@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
        @if(session('success'))
            <div class="container-fluid pt-3">
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                    <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">Add</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-home mr-2 text-primary"></i>Add New Unit</h5>
                            </div>
                            <div class="card-body">
                                <form id="plot_form" action="{{ url('/plot-details/store') }}" method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <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 $project)
                                                        <option value="{{ $project->id }}" {{ old('project') == $project->id ? 'selected' : '' }}>
                                                            {{ $project->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($masterPlans as $mp)
                                                        <option value="{{ $mp->id }}" {{ old('master_plan') == $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 $block)
                                                        <option value="{{ $block->id }}" {{ old('block') == $block->id ? 'selected' : '' }}>
                                                            {{ $block->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
                                                       placeholder="e.g. A-101" value="{{ old('plot_no') }}">
                                            </div>
                                        </div>

                                        {{-- Plot Size --}}
                                        <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
                                                       placeholder="e.g. 1200" value="{{ old('plot_size') }}">
                                            </div>
                                        </div>

                                        {{-- Plot 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>
                                                    @foreach(['1BHK','2BHK','3BHK','4BHK','Studio','Residential Plot','Villa','Apartment','Commercial','Duplex','Penthouse'] as $t)
                                                        <option value="{{ $t }}" {{ old('plot_type') === $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
                                                       placeholder="e.g. 5000000" value="{{ old('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"
                                                       placeholder="e.g. 4500000" value="{{ old('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
                                                       placeholder="e.g. North" value="{{ old('direction') }}">
                                            </div>
                                        </div>

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

                                    {{-- ══ Dimensions & Amenities card ══════════════════════ --}}
                                    <div class="card mt-4">
                                        <div class="card-header fw-bold">📐 Unit Dimensions</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') }}">
                                                </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') }}">
                                                </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') }}">
                                                </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') }}">
                                                </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') }}">
                                                </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') }}">
                                                </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') }}">
                                                </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') }}">
                                                </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. Override manually if needed.
                                            </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">
                                                @php
                                                    $dims = old('room_dimensions', [
                                                        ['label'=>'Living / Kitchen','width'=>'','length'=>'','unit'=>'m','area_sqm'=>'','area_sqft'=>'']
                                                    ]);
                                                @endphp

                                                @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" 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 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 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 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 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 = old('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 amenity-label"
                                                       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':'' }}
                                                           onchange="this.closest('label').style.cssText=this.checked?'cursor:pointer;background:#e8f5e9;border-color:#4caf50!important':'cursor:pointer;'">
                                                    {{ $amenity }}
                                                </label>
                                                @endforeach
                                            </div>--}}

                                            {{-- 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 #dee2e6;border-radius:12px;padding:28px 20px;text-align:center;
           cursor:pointer;transition:all 0.2s;background:#fafafa;position:relative;"
    onmouseover="this.style.borderColor='#c9a96e';this.style.background='#fffdf8';"
    onmouseout="if(!document.getElementById('fp-preview-wrap').style.display||document.getElementById('fp-preview-wrap').style.display==='none'){this.style.borderColor='#dee2e6';this.style.background='#fafafa';}">

    {{-- Empty state --}}
    <div id="fp-empty-state">
        <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 (hidden until file chosen) --}}
    <div id="fp-preview-wrap" style="display:none;">
        <div style="position:relative;display:inline-block;">
            <img id="fp-preview-img" src=""
                 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;"></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>

<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>

                                    {{-- ══ Payment Plans card ══════════════════════════════ --}}
                                    @if(isset($allPlans) && $allPlans->isNotEmpty())
                                    <div class="card mt-4">
                                        <div class="card-header fw-bold">
                                            <i class="fas fa-file-invoice-dollar mr-2 text-warning"></i>
                                            Payment Plans
                                            <small class="text-muted font-weight-normal ml-2">— select which plans apply to this unit</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="pp-assign-grid">
                                                @foreach($allPlans as $plan)
                                                @php $checked = in_array($plan->id, old('payment_plan_ids', [])); @endphp
                                                <label class="pp-assign-card {{ $checked ? 'pp-assign-card--checked' : '' }}"
                                                       for="pp-create-{{ $plan->id }}">
                                                    <input type="checkbox"
                                                           id="pp-create-{{ $plan->id }}"
                                                           class="pp-plan-checkbox"
                                                           name="payment_plan_ids[]"
                                                           value="{{ $plan->id }}"
                                                           {{ $checked ? 'checked' : '' }}
                                                           onchange="this.closest('label').classList.toggle('pp-assign-card--checked', this.checked)">
                                                    <div class="pp-assign-card-body">
                                                        <div class="pp-assign-name">{{ $plan->name }}</div>
                                                        @if($plan->description)
                                                            <div class="pp-assign-desc">{{ $plan->description }}</div>
                                                        @endif
                                                        <div class="pp-assign-steps">
                                                            @foreach($plan->milestones->take(3) as $m)
                                                                <span class="pp-assign-step">
                                                                    {{ $m->label }}@if($m->percentage) ({{ $m->percentage }}%)@endif
                                                                </span>
                                                            @endforeach
                                                            @if($plan->milestones->count() > 3)
                                                                <span class="pp-assign-step pp-assign-step--more">
                                                                    +{{ $plan->milestones->count() - 3 }} more milestones
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="pp-assign-check"><i class="fas fa-check-circle"></i></div>
                                                </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                    {{-- Status --}}
                                    <div class="row mt-3">
                                        <div class="col-xl-6 col-sm-12">
                                            <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
    $currentStatus = old('plot_status', 'Available');
    $statusMap = [
        'available'     => 'Available',
        'not available' => 'Not Available',
        'pre-booked'    => 'Pre-Booked',
        'booked'        => 'Not Available',
    ];
    $currentStatus = $statusMap[strtolower(trim($currentStatus))] ?? $currentStatus;
@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
                                                <small class="text-muted font-weight-normal">— rooms, bathrooms, etc. (optional, multiple allowed)</small>
                                            </h6>
                                            <div class="form-group">
                                                <label for="gallery_images" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i> Choose 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>

                                    <div class="d-flex" style="gap:10px;margin-top:20px;margin-bottom:8px;">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fas fa-save mr-1"></i> Save 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 ?? [1]) }};

// ── 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 && !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 && !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" 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 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 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 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 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);
});

// ── 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>');
        }
    });
});

// ── 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 #dee2e6;">'
                + '<div style="position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:10px;color:#fff;'
                + 'background:rgba(0,0,0,0.5);border-radius:0 0 6px 6px;padding:2px;">' + file.name.substr(0, 12) + '...</div>';
            preview.appendChild(div);
        };
        reader.readAsDataURL(file);
    });
}
</script>

<style>
.pp-assign-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.pp-assign-card { position:relative; display:flex; align-items:flex-start; padding:14px; border:2px solid #e9ecef; border-radius:10px; cursor:pointer; transition:all 0.18s; background:#fff; user-select:none; }
.pp-assign-card:hover, .pp-assign-card--checked { border-color:#c9a96e; background:#fffdf8; }
.pp-assign-card input[type="checkbox"] { display:none; }
.pp-assign-card-body { flex:1; min-width:0; }
.pp-assign-name  { font-size:13px; font-weight:700; color:#343a40; margin-bottom:4px; }
.pp-assign-desc  { font-size:11px; color:#6c757d; margin-bottom:6px; line-height:1.4; }
.pp-assign-steps { display:flex; flex-direction:column; gap:2px; }
.pp-assign-step  { font-size:11px; color:#495057; padding:1px 0; }
.pp-assign-step::before { content:'•'; margin-right:5px; color:#c9a96e; }
.pp-assign-step--more { color:#adb5bd; font-style:italic; }
.pp-assign-step--more::before { display:none; }
.pp-assign-check { color:#dee2e6; font-size:20px; transition:color 0.18s; flex-shrink:0; margin-left:10px; }
.pp-assign-card--checked .pp-assign-check { color:#c9a96e; }
</style>

<script>
    // ── 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')