@extends('layout.master')

@section('content')
    <div class="page-heading-block py-4">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('estates.view', ['id' => $estate_id]) }}">
                        Estate Details
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Edit Units & Blocks</li>
            </ol>
        </nav>
    </div>

    <div class="page-main-content">
        <div class="add-estate-form-block p-5 rounded">
            <form action="{{ route('estates.update-units-blocks', ['id' => $block_id]) }}" method="POST" class="row"
                id="edit-units-block-form" enctype="multipart/form-data">
                {{ csrf_field() }}
                <div id="vehicle-details-blocks" class="my-2">
                    <div>
                        <h4>Unit Details:</h4>
                    </div>

                    <input type="hidden" name="estate_id" id="estate_id" value="{{ $estate_id }}">
                    <input type="hidden" id="block_id" value="{{ $block_id }}">
                    <input type="hidden" id="removed_ids" name="removed_ids" value="[]">
                    @foreach ($blocks as $block)
                        <div class="my-2 rounded p-4 vehicle-block">
                            <div class="d-flex justify-content-end ">
                                <button type="button" class="btn btn-danger btn-sm delete-block hide">Remove</button>
                            </div>
                            <div class="row vehicle_details">
                                <div class="mb-3 col-6">
                                    <label for="block" class="form-label">Blk *</label>
                                    <input type="text" class="form-control rounded required block" name="block[]"
                                        id="block" value="{{ $block->block_number }}" placeholder="Block"
                                        maxlength="20">
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="unitField" class="form-label">Unit *</label>
                                    <div class="block-container d-flex gap-2">
                                        <input type="text" class="form-control rounded unitField" placeholder="Unit">
                                        <button type="button" class="btn small-btn addButton"
                                            style="padding: unset !important;">Add</button>
                                    </div>
                                </div>
                                <div class="mb-3 col-12">
                                    <label for="unitList" class="form-label">Unit List</label>
                                    <div class="rounded unit-list d-flex gap-2">
                                        @foreach ($block->units ?? [] as $unit)
                                            <div class="unit-item">
                                                <span class="unit-item-text">{{ $unit->unit }}</span>
                                                @if (!in_array($unit->id, $assigned_unit_ids))
                                                    <span class="remove-button px-2" data-id="{{ $unit->id }}">x</span>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                {{-- <div class="d-flex justify-content-end mb-4">
                    <button type="button" class="btn normal-btn" id="add-block">Add Another Unit</button>
                </div> --}}

                <div class="d-flex justify-content-end">
                    <a href="{{ route('estates.list-units-blocks', ['id' => $estate_id]) }}"
                        class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Update</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Add Splide Script-->
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': `{{ csrf_token() }}`
            }
        });
    </script>

    <script src="{{ asset('js/edit-units-blocks-page.js') }}"></script>
@endPush