@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_details->id]) }}"> --}}
                    <a href="javascript:void(0);">
                        {{ $estate_details->name ?? '' }}
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Add Units & Blocks</li>
            </ol>
        </nav>
    </div>

    <div class="page-main-content">
        <div class="add-estate-form-block p-5 rounded">
            <form action="{{ route('estates.store-units-blocks', ['id' => $estate_details->id]) }}" method="POST"
                class="row" id="add-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" id="estate_id" value="{{ $estate_details->id }}">
                    <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[]"
                                    placeholder="Blk" 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 flex-wrap gap-2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mb-4">
                    <button type="button" class="btn normal-btn" id="add-block">Add Another Block</button>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{{ route('estates.get') }}" class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Save</button>
                </div>
            </form>
        </div>
    </div>
    @push('scripts')
        <!-- Add Splide Script-->
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

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