@php
    use App\Models\Setting;
    $currencySymbol = Setting::get('currency_symbol', '₹');
@endphp

@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')
    <div class="main_content_iner default_main_contaner_iner">

        @if($errors->any())
            <div class="container-fluid pt-3">
                <div class="alert alert-danger alert-dismissible fade show">
                    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            </div>
        @endif

        <div class="page-body">
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0"><h3>Units</h3></div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li><a href="/plot-details/dashboard" class="bc-link">Units</a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Edit Unit</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-edit mr-2 text-warning"></i>
                                    Edit Unit — <strong>{{ $plots->plot_number }}</strong>
                                </h5>
                            </div>
                            <div class="card-body">
                                <form id="plot_form" action="{{ url('/plot-details/update/' . $plots->id) }}"
                                      method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="row">

                                        {{-- Project --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Project <span class="text-danger">*</span></label>
                                                <select class="form-control" id="project" name="project" required>
                                                    <option value="">— Choose Project —</option>
                                                    @foreach($projects as $p)
                                                        <option value="{{ $p->id }}" {{ $plots->project_id == $p->id ? 'selected' : '' }}>
                                                            {{ $p->project_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Master Plan --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Master Plan <span class="text-danger">*</span></label>
                                                <select class="form-control" id="master_plan" name="master_plan" required>
                                                    <option value="">— Choose Master Plan —</option>
                                                    @foreach($masterPlan as $mp)
                                                        <option value="{{ $mp->id }}" {{ $plots->master_plan_id == $mp->id ? 'selected' : '' }}>
                                                            {{ $mp->master_plan_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Block --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Block / Floor <span class="text-danger">*</span></label>
                                                <select class="form-control" id="block" name="block" required>
                                                    <option value="">— Choose Block —</option>
                                                    @foreach($blocks as $b)
                                                        <option value="{{ $b->id }}" {{ $plots->block_id == $b->id ? 'selected' : '' }}>
                                                            {{ $b->block_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Unit Number --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Unit Number <span class="text-danger">*</span></label>
                                                <input type="text" name="plot_no" class="form-control" required value="{{ $plots->plot_number }}">
                                            </div>
                                        </div>

                                        {{-- Area --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Area / Sqft <span class="text-danger">*</span></label>
                                                <input type="text" name="plot_size" class="form-control" required value="{{ $plots->plot_size }}">
                                            </div>
                                        </div>

                                        {{-- Type --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Unit Type <span class="text-danger">*</span></label>
                                                <select class="form-control" name="plot_type" required>
                                                    <option value="">— Choose Type —</option>
                                                    @php
                                                        $plotTypes = ['1BHK','2BHK','3BHK','4BHK','Studio',
                                                                      'Residential Plot','Villa','Apartment',
                                                                      'Commercial','Duplex','Penthouse'];
                                                        $currentType = $plots->plot_type;
                                                        if ($currentType && !in_array($currentType, $plotTypes)) {
                                                            $plotTypes[] = $currentType;
                                                        }
                                                    @endphp
                                                    @foreach($plotTypes as $t)
                                                        <option value="{{ $t }}" {{ $currentType === $t ? 'selected' : '' }}>{{ $t }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Actual Price --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Actual Price ({{ $currencySymbol }}) <span class="text-danger">*</span></label>
                                                <input type="text" name="actual_price" class="form-control" required value="{{ $plots->actual_price }}">
                                            </div>
                                        </div>

                                        {{-- Offer Price --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">
                                                    Offer Price ({{ $currencySymbol }})
                                                    <small class="text-muted font-weight-normal">optional</small>
                                                </label>
                                                <input type="text" name="offer_price" class="form-control" value="{{ $plots->offer_price }}">
                                            </div>
                                        </div>

                                        {{-- Direction --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Direction <span class="text-danger">*</span></label>
                                                <input type="text" name="direction" class="form-control" required value="{{ $plots->direction }}">
                                            </div>
                                        </div>

                                    </div>{{-- end .row --}}

                                    {{-- ═══════════════════════════════════════════════
                                         Dimensions & Amenities card
                                         ═══════════════════════════════════════════════ --}}
                                    <div class="card mt-4">
                                        <div class="card-header fw-bold">📐 Unit Dimensions & Amenities</div>
                                        <div class="card-body">

                                            {{-- Overall Areas --}}
                                            <h6 class="text-muted mb-3">Overall Floor Areas</h6>
                                            <div class="row g-3 mb-4">
                                                <div class="col-md-3">
                                                    <label class="form-label">Internal Area <small class="text-muted">(sqft)</small></label>
                                                    <input type="number" step="0.01" name="internal_area_sqft" id="internal_area_sqft"
                                                           class="form-control"
                                                           value="{{ old('internal_area_sqft', $plots->internal_area_sqft) }}">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Internal Area <small class="text-muted">(sqm)</small></label>
                                                    <input type="number" step="0.01" name="internal_area_sqm" id="internal_area_sqm"
                                                           class="form-control"
                                                           value="{{ old('internal_area_sqm', $plots->internal_area_sqm) }}">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">External Area <small class="text-muted">(sqft)</small></label>
                                                    <input type="number" step="0.01" name="external_area_sqft" id="external_area_sqft"
                                                           class="form-control"
                                                           value="{{ old('external_area_sqft', $plots->external_area_sqft) }}">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">External Area <small class="text-muted">(sqm)</small></label>
                                                    <input type="number" step="0.01" name="external_area_sqm" id="external_area_sqm"
                                                           class="form-control"
                                                           value="{{ old('external_area_sqm', $plots->external_area_sqm) }}">
                                                </div>
                                            </div>

                                            {{-- Room Counts --}}
                                            <h6 class="text-muted mb-3">Room Counts</h6>
                                            <div class="row g-3 mb-4">
                                                <div class="col-md-3">
                                                    <label class="form-label">Bedrooms</label>
                                                    <input type="number" min="0" name="bedrooms" class="form-control"
                                                           value="{{ old('bedrooms', $plots->bedrooms) }}">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Bathrooms</label>
                                                    <input type="number" min="0" name="bathrooms" class="form-control"
                                                           value="{{ old('bathrooms', $plots->bathrooms) }}">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Ensuites</label>
                                                    <input type="number" min="0" name="ensuites" class="form-control"
                                                           value="{{ old('ensuites', $plots->ensuites) }}">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Balconies</label>
                                                    <input type="number" min="0" name="balconies" class="form-control"
                                                           value="{{ old('balconies', $plots->balconies) }}">
                                                </div>
                                            </div>

                                            {{-- Room Dimensions --}}
                                            <h6 class="text-muted mb-1">Room Dimensions & Individual Areas</h6>
                                            <p class="text-muted small mb-3">Type width × length → sqm &amp; sqft auto-fill.</p>

                                            <div class="row g-2 mb-1 text-muted small fw-semibold px-1 d-none d-md-flex">
                                                <div class="col-md-3">Room Name</div>
                                                <div class="col-md-1">Unit</div>
                                                <div class="col-md-1">Width</div>
                                                <div class="col-md-1">Length</div>
                                                <div class="col-md-2">Area (sqm)</div>
                                                <div class="col-md-2">Area (sqft)</div>
                                                <div class="col-md-2"></div>
                                            </div>

                                            <div id="room-dims-wrapper">
                                                @foreach($dims as $i => $dim)
                                                <div class="row g-2 mb-2 room-dim-row align-items-center" data-index="{{ $i }}">
                                                    <div class="col-12 col-md-3">
                                                        <input type="text" name="room_dimensions[{{ $i }}][label]"
                                                               class="form-control form-control-sm" placeholder="e.g. Master Bedroom"
                                                               value="{{ $dim['label'] ?? '' }}">
                                                    </div>
                                                    <div class="col-4 col-md-1">
                                                        <select name="room_dimensions[{{ $i }}][unit]"
                                                                class="form-select form-select-sm dim-unit">
                                                            <option value="m"  {{ ($dim['unit']??'m')==='m'  ? 'selected':'' }}>m</option>
                                                            <option value="ft" {{ ($dim['unit']??'m')==='ft' ? 'selected':'' }}>ft</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-4 col-md-1">
                                                        <input type="number" step="0.01" name="room_dimensions[{{ $i }}][width]"
                                                               class="form-control form-control-sm dim-width" placeholder="W"
                                                               value="{{ $dim['width'] ?? '' }}">
                                                    </div>
                                                    <div class="col-4 col-md-1">
                                                        <input type="number" step="0.01" name="room_dimensions[{{ $i }}][length]"
                                                               class="form-control form-control-sm dim-length" placeholder="L"
                                                               value="{{ $dim['length'] ?? '' }}">
                                                    </div>
                                                    <div class="col-6 col-md-2">
                                                        <div class="input-group input-group-sm">
                                                            <input type="number" step="0.01" name="room_dimensions[{{ $i }}][area_sqm]"
                                                                   class="form-control form-control-sm dim-area-sqm" placeholder="auto"
                                                                   value="{{ $dim['area_sqm'] ?? '' }}">
                                                            <span class="input-group-text">m²</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-2">
                                                        <div class="input-group input-group-sm">
                                                            <input type="number" step="0.01" name="room_dimensions[{{ $i }}][area_sqft]"
                                                                   class="form-control form-control-sm dim-area-sqft" placeholder="auto"
                                                                   value="{{ $dim['area_sqft'] ?? '' }}">
                                                            <span class="input-group-text">ft²</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-2">
                                                        <button type="button" class="btn btn-outline-danger btn-sm w-100 remove-dim-row">✕ Remove</button>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            <button type="button" id="add-dim-row" class="btn btn-outline-secondary btn-sm mt-1 mb-4">+ Add Room</button>

                                            {{-- Amenities --}}
                                            {{-- <h6 class="text-muted mb-3">Amenities</h6>
                                            @php
                                                $savedAmenities = $plots->amenities ?? [];
                                                $allAmenities   = [
                                                    'Swimming Pool','Gym','Parking','24/7 Security','Club House',
                                                    'Children Play Area','Jogging Track','Garden','Lift','Power Backup',
                                                    'CCTV Surveillance','Intercom','Visitor Parking','Terrace',
                                                ];
                                            @endphp
                                            <div class="d-flex flex-wrap gap-2 mb-4">
                                                @foreach($allAmenities as $amenity)
                                                <label class="border rounded px-3 py-2 d-flex align-items-center gap-2"
                                                       style="cursor:pointer;{{ in_array($amenity,$savedAmenities)?'background:#e8f5e9;border-color:#4caf50!important':'' }}">
                                                    <input type="checkbox" name="amenities[]" value="{{ $amenity }}"
                                                           {{ in_array($amenity,$savedAmenities)?'checked':'' }}>
                                                    {{ $amenity }}
                                                </label>
                                                @endforeach
                                            </div> --}}

                                            {{-- Floor Plan Image --}}
                                            {{-- Floor Plan Image --}}
<h6 class="text-muted mb-3">Floor Plan Image</h6>

<div id="fp-upload-area" onclick="document.getElementById('floor_plan_image').click()"
    style="border:2px dashed {{ $plots->floor_plan_image ? '#c9a96e' : '#dee2e6' }};
           border-radius:12px;padding:28px 20px;text-align:center;
           cursor:pointer;transition:all 0.2s;
           background:{{ $plots->floor_plan_image ? '#fffdf8' : '#fafafa' }};position:relative;"
    onmouseover="this.style.borderColor='#c9a96e';this.style.background='#fffdf8';"
    onmouseout="if(!window._fpNewFile){this.style.borderColor='{{ $plots->floor_plan_image ? '#c9a96e' : '#dee2e6' }}';this.style.background='{{ $plots->floor_plan_image ? '#fffdf8' : '#fafafa' }}';}">

    {{-- Empty state --}}
    <div id="fp-empty-state" style="{{ $plots->floor_plan_image ? 'display:none;' : '' }}">
        <i class="fas fa-map" style="font-size:32px;color:#c9a96e;margin-bottom:10px;display:block;"></i>
        <div style="font-weight:600;color:#495057;font-size:14px;margin-bottom:4px;">Click to upload floor plan</div>
        <div style="font-size:12px;color:#94a3b8;">JPG, PNG or WebP — shown on the buyer-facing unit page</div>
    </div>

    {{-- Preview state --}}
    <div id="fp-preview-wrap" style="{{ $plots->floor_plan_image ? '' : 'display:none;' }}">
        <div style="position:relative;display:inline-block;">
            <img id="fp-preview-img"
                 src="{{ $plots->floor_plan_image ? asset('storage/'.$plots->floor_plan_image) : '' }}"
                 style="max-height:180px;max-width:100%;border-radius:8px;
                        border:2px solid #c9a96e;box-shadow:0 4px 16px rgba(0,0,0,0.1);">
            <div style="position:absolute;top:-8px;right:-8px;">
                <button type="button" id="fp-clear-btn"
                    onclick="event.stopPropagation();clearFloorPlan();"
                    style="width:24px;height:24px;border-radius:50%;background:#ef4444;
                           border:2px solid #fff;color:#fff;font-size:12px;
                           cursor:pointer;display:flex;align-items:center;
                           justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.2);">
                    &times;
                </button>
            </div>
        </div>
        <div id="fp-file-name"
             style="margin-top:10px;font-size:12px;color:#64748b;font-weight:600;">
            {{ $plots->floor_plan_image ? basename($plots->floor_plan_image) : '' }}
        </div>
        <div style="margin-top:6px;">
            <span style="font-size:11px;color:#c9a96e;font-weight:600;">
                <i class="fas fa-exchange-alt mr-1"></i>Click to change
            </span>
        </div>
    </div>
</div>

{{-- Hidden flag so backend knows to delete existing floor plan if cleared --}}
<input type="hidden" name="delete_floor_plan" id="delete_floor_plan" value="0">
<input type="file" id="floor_plan_image" name="floor_plan_image"
       accept="image/jpeg,image/png,image/webp" style="display:none;"
       onchange="previewFloorPlan(this)">

                                        </div>
                                    </div>

                                    {{-- Status --}}
                                    <div class="row mt-3">
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label font-weight-bold">Status <span class="text-danger">*</span></label>
                                                <div class="d-flex" style="gap:16px;margin-top:8px;">
                                                   @php
                                                        // Normalise DB value to Title Case for comparison
                                                        $statusMap = [
                                                            'available'     => 'Available',
                                                            'not available' => 'Not Available',
                                                            'pre-booked'    => 'Pre-Booked',
                                                            'booked'        => 'Not Available',
                                                        ];
                                                        $currentStatus = $statusMap[strtolower(trim($plots->status ?? ''))] ?? $plots->status;
                                                    @endphp
                                                    @foreach(['Available','Not Available','Pre-Booked'] as $s)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="plot_status"
                                                                value="{{ $s }}" id="status_{{ $loop->index }}"
                                                                {{ $currentStatus === $s ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="status_{{ $loop->index }}">{{ $s }}</label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Gallery Images --}}
                                    <div class="row">
                                        <div class="col-12">
                                            <hr>
                                            <h6 class="font-weight-bold mb-3">
                                                <i class="fas fa-images mr-2 text-info"></i>Unit Gallery Images
                                            </h6>

                                            @php $existingGallery = $plots->gallery_images ?? []; @endphp
                                            @if(!empty($existingGallery))
                                                <div class="mb-3">
                                                    <p class="text-muted small mb-2">Existing images — tick to delete:</p>
                                                    <div class="d-flex flex-wrap" style="gap:12px;">
                                                        @foreach($existingGallery as $img)
                                                            <div style="position:relative;width:90px;">
                                                                <img src="{{ asset('storage/plots/gallery/' . $img) }}"
                                                                     style="width:90px;height:90px;object-fit:cover;border-radius:8px;border:2px solid #dee2e6;">
                                                                <div style="position:absolute;top:4px;right:4px;">
                                                                    <input type="checkbox" name="delete_gallery_images[]"
                                                                           value="{{ $img }}" id="del_{{ $loop->index }}"
                                                                           style="width:18px;height:18px;cursor:pointer;">
                                                                </div>
                                                                <label for="del_{{ $loop->index }}"
                                                                       style="font-size:10px;color:#dc3545;display:block;text-align:center;margin-top:4px;cursor:pointer;">
                                                                    <i class="fas fa-trash-alt"></i> Delete
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endif

                                            <div class="form-group">
                                                <label for="gallery_images" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                    {{ empty($existingGallery) ? 'Choose Images' : 'Add More Images' }}
                                                </label>
                                                <input type="file" id="gallery_images" name="gallery_images[]"
                                                       class="file_input" accept=".jpg,.jpeg,.png,.webp" multiple
                                                       onchange="previewGallery(this)">
                                                <small class="text-muted d-block mt-1">JPG, PNG or WebP — up to 10MB each</small>
                                            </div>
                                            <div id="gallery-preview" class="d-flex flex-wrap" style="gap:10px;margin-top:10px;"></div>
                                        </div>
                                    </div>

                                    {{-- Payment Plans --}}
                                    @if(isset($allPlans))
                                        @include('PaymentPlans._unit_payment_plans', ['plots' => $plots, 'allPlans' => $allPlans])
                                    @endif

                                    <div class="d-flex" style="gap:10px;margin-top:16px;">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fas fa-save mr-1"></i> Update Unit
                                        </button>
                                        <a href="/plot-details/dashboard" class="btn btn-secondary">Cancel</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
let dimRowCount = {{ count($dims) }};

// ── Overall area auto-sync ─────────────────────────────────────
['internal','external'].forEach(function(type) {
    var sqft = document.getElementById(type + '_area_sqft');
    var sqm  = document.getElementById(type + '_area_sqm');
    if (!sqft || !sqm) return;
    sqft.addEventListener('input', function() { if (this.value) sqm.value  = (parseFloat(this.value) / 10.7639).toFixed(2); });
    sqm.addEventListener('input',  function() { if (this.value) sqft.value = (parseFloat(this.value) * 10.7639).toFixed(2); });
});

// ── Per-room auto-calculation ──────────────────────────────────
function calcRoomArea(row) {
    var unit   = row.querySelector('.dim-unit').value;
    var w      = parseFloat(row.querySelector('.dim-width').value);
    var l      = parseFloat(row.querySelector('.dim-length').value);
    var sqmEl  = row.querySelector('.dim-area-sqm');
    var sqftEl = row.querySelector('.dim-area-sqft');
    if (!w || !l) return;
    var sqm, sqft;
    if (unit === 'm') { sqm = w * l; sqft = sqm * 10.7639; }
    else              { sqft = w * l; sqm = sqft / 10.7639; }
    if (!sqmEl.dataset.manual)  sqmEl.value  = sqm.toFixed(2);
    if (!sqftEl.dataset.manual) sqftEl.value = sqft.toFixed(2);
}

function attachRowEvents(row) {
    ['dim-width','dim-length','dim-unit'].forEach(function(cls) {
        var el = row.querySelector('.' + cls);
        if (el) el.addEventListener('input', function() { calcRoomArea(row); });
    });
    var sqmEl  = row.querySelector('.dim-area-sqm');
    var sqftEl = row.querySelector('.dim-area-sqft');
    if (sqmEl) sqmEl.addEventListener('input', function() {
        this.dataset.manual = '1';
        if (this.value && !sqftEl.dataset.manual)
            sqftEl.value = (parseFloat(this.value) * 10.7639).toFixed(2);
    });
    if (sqftEl) sqftEl.addEventListener('input', function() {
        this.dataset.manual = '1';
        if (this.value && !sqmEl.dataset.manual)
            sqmEl.value = (parseFloat(this.value) / 10.7639).toFixed(2);
    });
    var removeBtn = row.querySelector('.remove-dim-row');
    if (removeBtn) removeBtn.addEventListener('click', function() { row.remove(); });
}

document.querySelectorAll('.room-dim-row').forEach(attachRowEvents);

document.getElementById('add-dim-row').addEventListener('click', function() {
    var i = dimRowCount++;
    var div = document.createElement('div');
    div.className = 'row g-2 mb-2 room-dim-row align-items-center';
    div.dataset.index = i;
    div.innerHTML =
        '<div class="col-12 col-md-3"><input type="text" name="room_dimensions['+i+'][label]" class="form-control form-control-sm" placeholder="e.g. Bedroom 2"></div>'
        +'<div class="col-4 col-md-1"><select name="room_dimensions['+i+'][unit]" class="form-select form-select-sm dim-unit"><option value="m">m</option><option value="ft">ft</option></select></div>'
        +'<div class="col-4 col-md-1"><input type="number" step="0.01" name="room_dimensions['+i+'][width]" class="form-control form-control-sm dim-width" placeholder="W"></div>'
        +'<div class="col-4 col-md-1"><input type="number" step="0.01" name="room_dimensions['+i+'][length]" class="form-control form-control-sm dim-length" placeholder="L"></div>'
        +'<div class="col-6 col-md-2"><div class="input-group input-group-sm"><input type="number" step="0.01" name="room_dimensions['+i+'][area_sqm]" class="form-control form-control-sm dim-area-sqm" placeholder="auto"><span class="input-group-text">m²</span></div></div>'
        +'<div class="col-6 col-md-2"><div class="input-group input-group-sm"><input type="number" step="0.01" name="room_dimensions['+i+'][area_sqft]" class="form-control form-control-sm dim-area-sqft" placeholder="auto"><span class="input-group-text">ft²</span></div></div>'
        +'<div class="col-12 col-md-2"><button type="button" class="btn btn-outline-danger btn-sm w-100 remove-dim-row">✕ Remove</button></div>';
    document.getElementById('room-dims-wrapper').appendChild(div);
    attachRowEvents(div);
});

// ── Gallery preview ────────────────────────────────────────────
function previewGallery(input) {
    var preview = document.getElementById('gallery-preview');
    preview.innerHTML = '';
    if (!input.files || !input.files.length) return;
    Array.from(input.files).forEach(function(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var div = document.createElement('div');
            div.style.cssText = 'position:relative;width:90px;height:90px;';
            div.innerHTML = '<img src="' + e.target.result + '" style="width:90px;height:90px;object-fit:cover;border-radius:8px;border:2px solid #28a745;">';
            preview.appendChild(div);
        };
        reader.readAsDataURL(file);
    });
}

// ── Project → Master Plan → Block cascade ─────────────────────
jQuery(document).ready(function($) {
    $('#project').on('change', function() {
        var projectId = $(this).val();
        $('#master_plan').html('<option value="">Loading...</option>');
        $('#block').html('<option value="">— Choose Block —</option>');
        if (projectId) {
            $.getJSON('/master-plans/' + projectId, function(data) {
                var opts = '<option value="">— Choose Master Plan —</option>';
                $.each(data, function(i, mp) { opts += '<option value="' + mp.id + '">' + mp.master_plan_name + '</option>'; });
                $('#master_plan').html(opts);
            });
        } else {
            $('#master_plan').html('<option value="">— Choose Master Plan —</option>');
        }
    });
    $('#master_plan').on('change', function() {
        var mpId = $(this).val();
        $('#block').html('<option value="">Loading...</option>');
        if (mpId) {
            $.getJSON('/blocks-list/' + mpId, function(data) {
                var opts = '<option value="">— Choose Block —</option>';
                $.each(data, function(i, b) { opts += '<option value="' + b.id + '">' + b.block_name + '</option>'; });
                $('#block').html(opts);
            });
        } else {
            $('#block').html('<option value="">— Choose Block —</option>');
        }
    });
});

// ── Floor Plan preview ─────────────────────────────────────────
window._fpNewFile = false;

function previewFloorPlan(input) {
    if (!input.files || !input.files.length) return;
    var file = input.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('fp-preview-img').src = e.target.result;
        document.getElementById('fp-file-name').textContent = file.name;
        document.getElementById('fp-empty-state').style.display = 'none';
        document.getElementById('fp-preview-wrap').style.display = 'block';
        document.getElementById('fp-upload-area').style.borderColor = '#c9a96e';
        document.getElementById('fp-upload-area').style.background  = '#fffdf8';
        // For edit form — cancel any pending delete
        var delInput = document.getElementById('delete_floor_plan');
        if (delInput) delInput.value = '0';
        window._fpNewFile = true;
    };
    reader.readAsDataURL(file);
}

function clearFloorPlan() {
    document.getElementById('floor_plan_image').value = '';
    document.getElementById('fp-preview-img').src = '';
    document.getElementById('fp-file-name').textContent = '';
    document.getElementById('fp-preview-wrap').style.display = 'none';
    document.getElementById('fp-empty-state').style.display  = 'block';
    document.getElementById('fp-upload-area').style.borderColor = '#dee2e6';
    document.getElementById('fp-upload-area').style.background  = '#fafafa';
    // For edit form — flag deletion of existing image
    var delInput = document.getElementById('delete_floor_plan');
    if (delInput) delInput.value = '1';
    window._fpNewFile = false;
}
</script>

@include('Partials.footer')