@php
    use App\Models\Setting;
    $allSettings = \App\Models\Setting::getAllAsArray();
    $currencySymbol = $allSettings['currency_symbol'] ?? '₹';
    $currencyPosition = $allSettings['currency_position'] ?? 'before';
@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">
        <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">
                            @if($role === 'super_admin')
                                <ol class="bc">
                                    <li><a href="/project/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">All Units</li>
                                </ol>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Flash alerts --}}
            @foreach(['success', 'error', 'info'] as $type)
                @if(session($type))
                    <div class="container-fluid">
                        <div class="alert alert-{{ $type === 'error' ? 'danger' : $type }} alert-dismissible fade show">
                            <i class="fas fa-{{ $type === 'success' ? 'check-circle' : 'exclamation-circle' }} mr-2"></i>
                            {{ session($type) }}
                            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                        </div>
                    </div>
                @endif
            @endforeach

            @if(session('bulk_result'))
                @php $r = session('bulk_result'); @endphp
                <div class="container-fluid">
                    <div class="alert alert-{{ $r['skipped'] > 0 ? 'warning' : 'success' }} alert-dismissible fade show">
                        <i class="fas fa-file-csv mr-2"></i>
                        <strong>Import complete:</strong> {{ $r['imported'] }} imported
                        @if($r['skipped'] > 0)
                            , {{ $r['skipped'] }} skipped
                            <ul class="mt-2 mb-0 small">
                                @foreach($r['errors'] as $err)<li>{{ $err }}</li>@endforeach
                            </ul>
                        @endif
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            {{-- ── Upload cards ── --}}
            @if($role === 'super_admin')
                <div class="container-fluid mb-4">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card h-100" style="border-left:4px solid #c9a96e;">
                                <div class="card-body d-flex align-items-center" style="gap:16px;">
                                    <div style="width:48px;height:48px;border-radius:10px;background:#fff8ee;
                                                    display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <i class="fas fa-home" style="font-size:22px;color:#c9a96e;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700;font-size:15px;">Add Single Unit</div>
                                        <div style="font-size:13px;color:#6c757d;">Fill in the form manually</div>
                                    </div>
                                    <a href="/plot-details/create" class="btn btn-sm btn-primary ml-auto">
                                        <i class="fas fa-plus mr-1"></i> Add
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 mb-3">
                            <div class="card h-100" style="border-left:4px solid #28a745;">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-3" style="gap:12px;">
                                        <div style="width:48px;height:48px;border-radius:10px;background:#f0fff4;
                                                        display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <i class="fas fa-file-csv" style="font-size:22px;color:#28a745;"></i>
                                        </div>
                                        <div>
                                            <div style="font-weight:700;font-size:15px;">Bulk Import Units</div>
                                            <div style="font-size:13px;color:#6c757d;">
                                                Columns:
                                                <code>project_id, master_plan_id, block_id, plot_number, plot_size, plot_type, actual_price, direction, status, offer_price, bedrooms, bathrooms, ensuites, balconies, internal_area_sqft, internal_area_sqm, external_area_sqft, external_area_sqm</code>
                                                &nbsp;
                                                <a href="/plot-details/csv-template" style="color:#28a745;">
                                                    <i class="fas fa-download mr-1"></i>Download template
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="/plot-details/bulk-import" method="POST" enctype="multipart/form-data"
                                        class="d-flex align-items-center" style="gap:10px;">
                                        @csrf
                                        <label style="flex:1;margin:0;cursor:pointer;">
                                            <div id="csv-label-units" style="border:2px dashed #ced4da;border-radius:6px;padding:8px 14px;
                                                            font-size:13px;color:#6c757d;white-space:nowrap;
                                                            overflow:hidden;text-overflow:ellipsis;">
                                                <i class="fas fa-paperclip mr-1"></i> Choose CSV file...
                                            </div>
                                            <input type="file" name="csv_file" accept=".csv,.txt" required
                                                style="display:none;"
                                                onchange="document.getElementById('csv-label-units').innerHTML=
                                                           '<i class=\'fas fa-file-csv mr-1\' style=\'color:#28a745\'></i> '+this.files[0].name">
                                        </label>
                                        <button type="submit" class="btn btn-success btn-sm" style="white-space:nowrap;">
                                            <i class="fas fa-upload mr-1"></i> Import
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- ── Units list ── --}}
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            All Units
                            <span id="unit-count-badge" class="badge badge-primary ml-2"></span>
                        </h5>
                        <div class="d-flex align-items-center" style="gap:10px;">
                            <input type="search" id="searchInput" class="form-control form-control-sm"
                                style="width:200px;" placeholder="Search units...">
                            <select id="rowsPerPageSelect" class="form-control form-control-sm" style="width:100px;">
                                <option value="50">50</option>
                                <option value="100" selected>100</option>
                                <option value="250">250</option>
                                <option value="500">500</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" id="units-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width:32px;"></th>
                                        <th>Unit No</th>
                                        <th>Block</th>
                                        <th>Type / Area</th>
                                        <th>Actual Price</th>
                                        <!-- <th>Offer Price</th> -->
                                        <th>Status</th>
                                        <th>Project</th>
                                        <th>Floor Plan</th>{{-- ← NEW --}}
                                        <th>Media</th>
                                        @if($role === 'super_admin')
                                            <th class="text-center" style="width:100px;">Actions</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody id="units-tbody"></tbody>
                            </table>
                        </div>
                        <div class="px-3 py-2" id="pagination-controls"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- ── Panorama upload modal ── --}}
<div id="pano-modal-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;
     background:rgba(0,0,0,0.65);z-index:99999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:10px;width:100%;max-width:520px;
                margin:0 16px;box-shadow:0 20px 60px rgba(0,0,0,0.4);overflow:hidden;">
        <div style="background:#343a40;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;">
            <h5 id="pano-modal-title" style="margin:0;color:#fff;font-size:16px;">
                <i class="fas fa-vr-cardboard mr-2"></i>Upload 360° Panorama
            </h5>
            <button onclick="closePanoModal()"
                style="background:none;border:none;color:#fff;font-size:22px;cursor:pointer;">&times;</button>
        </div>
        <div style="padding:24px;">
            <div id="pano-room-selector" style="display:none;margin-bottom:16px;">
                <label style="font-weight:600;font-size:14px;display:block;margin-bottom:8px;">
                    Room / Area <span class="text-danger">*</span>
                </label>
                <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    @foreach(['Living Room', 'Bedroom', 'Bathroom', 'Kitchen', 'Balcony'] as $room)
                        <button type="button" class="room-chip" onclick="selectRoomChip(this,'{{ $room }}')"
                            style="padding:6px 14px;border-radius:20px;border:2px solid #ced4da;background:#fff;cursor:pointer;font-size:13px;">
                            {{ $room }}
                        </button>
                    @endforeach
                    <button type="button" class="room-chip" onclick="selectRoomChip(this,'__custom__')"
                        style="padding:6px 14px;border-radius:20px;border:2px dashed #ced4da;background:#fff;cursor:pointer;font-size:13px;">
                        <i class="fas fa-plus mr-1"></i>Custom
                    </button>
                </div>
                <input type="text" id="pano-custom-label" placeholder="Enter custom room name..."
                    style="display:none;margin-top:10px;width:100%;padding:8px 12px;border:1px solid #ced4da;border-radius:6px;font-size:13px;">
                <div id="pano-room-error" style="display:none;color:#dc3545;font-size:12px;margin-top:6px;">
                    Please select or enter a room label.
                </div>
            </div>
            <div id="pano-step-pick">
                <div onclick="document.getElementById('pano-file-input').click()"
                    style="border:2px dashed #ced4da;border-radius:8px;padding:36px 20px;text-align:center;cursor:pointer;"
                    onmouseover="this.style.borderColor='#007bff'" onmouseout="this.style.borderColor='#ced4da'">
                    <i class="fas fa-cloud-upload-alt" style="font-size:40px;color:#6c757d;"></i>
                    <p style="margin:12px 0 4px;font-weight:600;color:#495057;">Click to choose panorama image</p>
                    <small style="color:#6c757d;">JPG or PNG — max 500MB</small>
                </div>
                <input type="file" id="pano-file-input" accept="image/jpeg,image/png" style="display:none;">
            </div>
            <div id="pano-step-ready" style="display:none;">
                <div style="background:#f8f9fa;border-radius:8px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <i class="fas fa-file-image" style="font-size:28px;color:#17a2b8;"></i>
                        <div>
                            <div id="pano-fname" style="font-weight:600;font-size:14px;"></div>
                            <div id="pano-fsize" style="color:#6c757d;font-size:12px;"></div>
                        </div>
                    </div>
                    <button onclick="resetPanoFileOnly()"
                        style="background:none;border:1px solid #6c757d;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;color:#6c757d;">Change</button>
                </div>
            </div>
            <div id="pano-step-progress" style="display:none;margin-top:16px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
                    <span id="pano-status" style="font-size:13px;color:#6c757d;">Preparing...</span>
                    <strong id="pano-percent">0%</strong>
                </div>
                <div style="background:#e9ecef;border-radius:20px;height:18px;overflow:hidden;">
                    <div id="pano-bar" style="height:100%;width:0%;border-radius:20px;background:linear-gradient(90deg,#17a2b8,#007bff);transition:width 0.25s;"></div>
                </div>
                <div id="pano-speed" style="font-size:11px;color:#6c757d;margin-top:5px;"></div>
            </div>
            <div id="pano-step-success" style="display:none;margin-top:16px;">
                <div style="background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;padding:14px 16px;color:#155724;">
                    <i class="fas fa-check-circle"></i> <strong>Upload complete!</strong> Refreshing...
                </div>
            </div>
            <div id="pano-step-error" style="display:none;margin-top:16px;">
                <div style="background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;padding:14px 16px;color:#721c24;">
                    <i class="fas fa-exclamation-circle"></i> <span id="pano-error-text"></span>
                </div>
            </div>
        </div>
        <div style="padding:16px 20px;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end;gap:10px;">
            <button id="pano-cancel-btn" onclick="closePanoModal()" class="btn btn-secondary">Cancel</button>
            <button id="pano-upload-btn" onclick="startPanoUpload()" class="btn btn-primary" disabled>
                <i class="fas fa-upload"></i> Upload
            </button>
        </div>
    </div>
</div>

{{-- ── Panorama preview lightbox ── --}}
<div id="pano-preview-overlay" onclick="closePanoPreview(event)"
    style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;
           background:rgba(0,0,0,0.92);z-index:99998;align-items:center;justify-content:center;cursor:zoom-out;">
    <div id="pano-preview-spinner" style="position:absolute;color:#c9a96e;font-size:40px;">
        <i class="fas fa-spinner fa-spin"></i>
    </div>
    <img id="pano-preview-img" style="display:none;max-width:92vw;max-height:88vh;border-radius:8px;object-fit:contain;">
    <div id="pano-preview-label"
        style="position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
               background:rgba(0,0,0,0.6);color:#fff;padding:6px 18px;border-radius:20px;font-size:13px;"></div>
    <button onclick="document.getElementById('pano-preview-overlay').style.display='none';document.body.style.overflow='';"
        style="position:fixed;top:16px;right:20px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);
               border-radius:50%;color:#fff;font-size:22px;width:40px;height:40px;cursor:pointer;
               display:flex;align-items:center;justify-content:center;">&times;</button>
</div>

<style>
    .unit-expand-row { display:none; background:#fffdf8; border-left:3px solid #c9a96e; }
    .unit-expand-row.open { display:table-row; }
    .unit-expand-inner { padding:20px 24px; }
    .expand-arrow {
        display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; border-radius:50%; background:#f0f0f0;
        color:#6c757d; font-size:10px; border:1px solid #dee2e6; transition:all 0.2s;
    }
    .unit-summary-row:hover .expand-arrow { background:#c9a96e; border-color:#c9a96e; color:#fff; }
    .expand-arrow.open { transform:rotate(90deg); background:#c9a96e; border-color:#c9a96e; color:#fff; }
    .unit-summary-row {
        cursor:pointer; border-left:3px solid transparent;
        transition:background 0.15s, border-color 0.15s;
    }
    .unit-summary-row:hover { background:#fffbf3 !important; border-left-color:#c9a96e; }
    .unit-summary-row.expanded { background:#fffbf3 !important; border-left-color:#c9a96e; }
    .pano-pill {
        display:inline-flex; align-items:center; gap:4px;
        padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600;
    }
    .room-thumb-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
    .room-thumb-item { position:relative; text-align:center; transition:transform 0.15s; }
    .room-thumb-item:hover { transform:scale(1.05); }
    .room-thumb-item img {
        width:70px; height:46px; object-fit:cover; border-radius:6px;
        border:2px solid #dee2e6; cursor:pointer; display:block;
    }
    .room-thumb-item .room-label {
        font-size:10px; color:#6c757d; margin-top:3px;
        max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .room-thumb-item .room-del {
        position:absolute; top:-5px; right:-5px; width:18px; height:18px;
        border-radius:50%; background:#dc3545; border:none; color:#fff;
        font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    }
    .gallery-thumb-strip { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .gallery-thumb-item { position:relative; cursor:pointer; transition:transform 0.15s; }
    .gallery-thumb-item:hover { transform:scale(1.05); }
    .gallery-thumb-item img {
        width:60px; height:40px; object-fit:cover; border-radius:5px;
        border:2px solid #dee2e6; display:block;
    }
    .gallery-thumb-item .gallery-del {
        position:absolute; top:-5px; right:-5px; width:16px; height:16px;
        border-radius:50%; background:#dc3545; border:none; color:#fff;
        font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    }
    .gallery-vr-badge {
        position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,0.55);
        border-radius:3px; padding:1px 4px; font-size:9px; color:#fff; pointer-events:none;
    }
    .expand-section { margin-bottom:16px; }
    .expand-section-title {
        font-size:11px; font-weight:700; text-transform:uppercase;
        letter-spacing:0.5px; color:#6c757d; margin-bottom:8px;
    }
    .expand-section-divider { border:none; border-top:1px solid #e9ecef; margin:12px 0; }
    .dim-stat-pill {
        display:inline-flex; flex-direction:column; align-items:center;
        background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px;
        padding:6px 10px; min-width:52px; text-align:center;
    }
    .dim-stat-pill .dsv { font-size:15px; font-weight:700; color:#343a40; line-height:1.1; }
    .dim-stat-pill .dsl { font-size:9px; color:#6c757d; text-transform:uppercase; letter-spacing:0.3px; margin-top:2px; }
    .dim-area-row { display:flex; align-items:baseline; gap:4px; font-size:12px; color:#495057; margin-bottom:3px; }
    .dim-area-row .dar-label { color:#6c757d; width:58px; flex-shrink:0; }
    .dim-area-row .dar-val { font-weight:600; }
    .dim-area-row .dar-sub { color:#adb5bd; font-size:11px; }
    .expand-5col-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0 16px; align-items:start; }
    .exp-col { min-width:0; overflow:hidden; }
    @media (max-width:1199px) { .expand-5col-grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:767px)  { .expand-5col-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:479px)  { .expand-5col-grid { grid-template-columns:1fr; } }
</style>

<script>
    var CURRENCY_SYMBOL   = @json($currencySymbol);
    var CURRENCY_POSITION = @json($currencyPosition);

    function formatPrice(amount) {
        if (!amount || amount === '0') return '—';
        var num = parseFloat(amount.toString().replace(/,/g, ''));
        if (isNaN(num)) return amount;
        var f = num.toLocaleString('en-IN');
        return CURRENCY_POSITION === 'after' ? f + ' ' + CURRENCY_SYMBOL : CURRENCY_SYMBOL + ' ' + f;
    }

    // ── Panorama upload ──────────────────────────────────────────────
    var PANO_CHUNK_SIZE = 5 * 1024 * 1024;
    var PANO_CSRF = "{{ csrf_token() }}";
    var panoEntityId = null, panoEntityType = null, panoRoomLabel = null;
    var panoFile = null, panoUploading = false, panoStartTime = null;

    var panoOverlay    = document.getElementById('pano-modal-overlay');
    var panoModalTitle = document.getElementById('pano-modal-title');
    var panoRoomSelector  = document.getElementById('pano-room-selector');
    var panoCustomLabel   = document.getElementById('pano-custom-label');
    var panoRoomError     = document.getElementById('pano-room-error');
    var panoFileInput     = document.getElementById('pano-file-input');
    var stepPick          = document.getElementById('pano-step-pick');
    var stepReady         = document.getElementById('pano-step-ready');
    var stepProgress      = document.getElementById('pano-step-progress');
    var stepSuccess       = document.getElementById('pano-step-success');
    var stepError         = document.getElementById('pano-step-error');
    var panoFname         = document.getElementById('pano-fname');
    var panoFsize         = document.getElementById('pano-fsize');
    var panoBar           = document.getElementById('pano-bar');
    var panoPercent       = document.getElementById('pano-percent');
    var panoStatus        = document.getElementById('pano-status');
    var panoSpeed         = document.getElementById('pano-speed');
    var panoErrorText     = document.getElementById('pano-error-text');
    var panoCancelBtn     = document.getElementById('pano-cancel-btn');
    var panoUploadBtn     = document.getElementById('pano-upload-btn');

    function openPanoramaUpload(entityId, entityType) {
        panoEntityId = entityId; panoEntityType = entityType; panoRoomLabel = null;
        panoModalTitle.innerHTML = '<i class="fas fa-vr-cardboard mr-2"></i>Upload 360° Panorama';
        panoRoomSelector.style.display = 'none';
        resetPanoModal();
        panoOverlay.style.display = 'flex'; document.body.style.overflow = 'hidden';
    }
    function openRoomPanoramaUpload(plotId) {
        panoEntityId = plotId; panoEntityType = 'plot_room'; panoRoomLabel = null;
        panoModalTitle.innerHTML = '<i class="fas fa-door-open mr-2"></i>Upload Room 360° Panorama';
        panoRoomSelector.style.display = 'block';
        document.querySelectorAll('.room-chip').forEach(function(c) {
            c.style.background = '#fff'; c.style.borderColor = '#ced4da';
            c.style.color = '#495057'; c.style.fontWeight = '400';
        });
        panoCustomLabel.style.display = 'none'; panoCustomLabel.value = '';
        panoRoomError.style.display = 'none';
        resetPanoModal();
        panoOverlay.style.display = 'flex'; document.body.style.overflow = 'hidden';
    }
    function selectRoomChip(el, value) {
        document.querySelectorAll('.room-chip').forEach(function(c) {
            c.style.background = '#fff'; c.style.borderColor = '#ced4da';
            c.style.color = '#495057'; c.style.fontWeight = '400';
        });
        el.style.background = '#007bff'; el.style.borderColor = '#007bff';
        el.style.color = '#fff'; el.style.fontWeight = '600';
        panoRoomError.style.display = 'none';
        if (value === '__custom__') {
            panoCustomLabel.style.display = 'block'; panoCustomLabel.focus(); panoRoomLabel = null;
        } else {
            panoCustomLabel.style.display = 'none'; panoRoomLabel = value;
        }
        refreshUploadBtn();
    }
    panoCustomLabel.addEventListener('input', function() { panoRoomLabel = this.value.trim() || null; refreshUploadBtn(); });
    function refreshUploadBtn() {
        var roomOk = panoEntityType !== 'plot_room' || (panoRoomLabel && panoRoomLabel.length > 0);
        panoUploadBtn.disabled = !(panoFile && roomOk);
    }
    function closePanoModal() {
        if (panoUploading) return;
        panoOverlay.style.display = 'none'; document.body.style.overflow = '';
    }
    panoOverlay.addEventListener('click', function(e) { if (e.target === panoOverlay) closePanoModal(); });
    function resetPanoModal() {
        panoFile = null; panoUploading = false; panoFileInput.value = '';
        stepPick.style.display = 'block'; stepReady.style.display = 'none';
        stepProgress.style.display = 'none'; stepSuccess.style.display = 'none'; stepError.style.display = 'none';
        panoUploadBtn.disabled = true; panoCancelBtn.disabled = false; panoCancelBtn.textContent = 'Cancel';
        panoBar.style.width = '0%'; panoPercent.textContent = '0%'; panoSpeed.textContent = '';
    }
    function resetPanoFileOnly() {
        panoFile = null; panoFileInput.value = '';
        stepPick.style.display = 'block'; stepReady.style.display = 'none'; stepError.style.display = 'none';
        refreshUploadBtn();
    }
    panoFileInput.addEventListener('change', function() {
        var file = this.files[0]; if (!file) return;
        panoFile = file; panoFname.textContent = file.name; panoFsize.textContent = panoFormatBytes(file.size);
        stepPick.style.display = 'none'; stepReady.style.display = 'block'; stepError.style.display = 'none';
        refreshUploadBtn();
    });
    async function startPanoUpload() {
        if (!panoFile || panoUploading) return;
        if (panoEntityType === 'plot_room') {
            var cv = panoCustomLabel.value.trim(); if (cv) panoRoomLabel = cv;
            if (!panoRoomLabel) { panoRoomError.style.display = 'block'; return; }
        }
        panoUploading = true;
        var totalChunks = Math.ceil(panoFile.size / PANO_CHUNK_SIZE);
        var uploadId = Date.now() + '_' + Math.random().toString(36).substr(2, 8);
        stepReady.style.display = 'none'; stepProgress.style.display = 'block';
        panoUploadBtn.disabled = true; panoCancelBtn.disabled = true; panoStartTime = Date.now();
        try {
            for (var i = 0; i < totalChunks; i++) {
                var start = i * PANO_CHUNK_SIZE, end = Math.min(start + PANO_CHUNK_SIZE, panoFile.size);
                var fd = new FormData();
                fd.append('chunk', panoFile.slice(start, end)); fd.append('chunk_index', i);
                fd.append('total_chunks', totalChunks); fd.append('upload_id', uploadId);
                fd.append('filename', panoFile.name); fd.append('entity_id', panoEntityId);
                fd.append('entity_type', panoEntityType); fd.append('_token', PANO_CSRF);
                if (panoEntityType === 'plot_room') fd.append('room_label', panoRoomLabel);
                var resp = await fetch('/admin/panorama/chunk-upload', { method: 'POST', body: fd });
                if (!resp.ok) { var e = {}; try { e = await resp.json(); } catch(_) {} throw new Error(e.message || 'Server error'); }
                var pct = Math.round(((i + 1) / totalChunks) * 100);
                var elapsed = Math.max((Date.now() - panoStartTime) / 1000, 0.1);
                panoBar.style.width = pct + '%'; panoPercent.textContent = pct + '%';
                panoStatus.textContent = 'Chunk ' + (i + 1) + ' / ' + totalChunks;
                panoSpeed.textContent = panoFormatBytes(end / elapsed) + '/s  •  ' + panoFormatBytes(end) + ' of ' + panoFormatBytes(panoFile.size);
            }
            panoUploading = false;
            stepProgress.style.display = 'none'; stepSuccess.style.display = 'block';
            panoCancelBtn.disabled = false; panoCancelBtn.textContent = 'Close';
            setTimeout(function() { location.reload(); }, 1500);
        } catch(err) {
            panoUploading = false;
            stepProgress.style.display = 'none'; stepError.style.display = 'block';
            panoErrorText.textContent = ' ' + err.message;
            panoUploadBtn.disabled = false; panoCancelBtn.disabled = false;
        }
    }
    function panoFormatBytes(b) {
        if (b < 1024) return b + ' B';
        if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
        if (b < 1073741824) return (b / 1048576).toFixed(1) + ' MB';
        return (b / 1073741824).toFixed(2) + ' GB';
    }
    function previewPano(fullSrc, label) {
        var overlay = document.getElementById('pano-preview-overlay');
        var img     = document.getElementById('pano-preview-img');
        var spinner = document.getElementById('pano-preview-spinner');
        var lbl     = document.getElementById('pano-preview-label');
        img.style.display = 'none'; spinner.style.display = 'block';
        lbl.textContent = label || '';
        overlay.style.display = 'flex'; document.body.style.overflow = 'hidden';
        var t = new window.Image();
        t.onload = t.onerror = function() { img.src = fullSrc; img.style.display = 'block'; spinner.style.display = 'none'; };
        t.src = fullSrc;
    }
    function closePanoPreview(e) {
        if (e.target === document.getElementById('pano-preview-img')) return;
        document.getElementById('pano-preview-overlay').style.display = 'none';
        document.body.style.overflow = '';
    }
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.getElementById('pano-preview-overlay').style.display = 'none';
            document.body.style.overflow = '';
        }
    });

    // ── Table ────────────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function() {
        var plots            = @json($plotDetails);
        var rowsPerPageSelect = document.getElementById('rowsPerPageSelect');
        var searchInput      = document.getElementById('searchInput');
        var storageBase      = "{{ asset('storage') }}";
        var adminRole        = "{{ session('admin_role') }}";
        var csrfToken        = "{{ csrf_token() }}";
        var rowsPerPage      = parseInt(rowsPerPageSelect.value);
        var currentPage      = 1;
        var openExpandId     = null;

        rowsPerPageSelect.addEventListener('change', function() { rowsPerPage = parseInt(this.value); currentPage = 1; render(); });
        searchInput.addEventListener('input', function() { currentPage = 1; render(); });

        function getFiltered() {
            var q = searchInput.value.toLowerCase();
            return plots.filter(function(p) {
                return (p.plot_number  || '').toLowerCase().includes(q)
                    || (p.project_name || '').toLowerCase().includes(q)
                    || (p.plot_size    || '').toString().includes(q)
                    || (p.plot_type    || '').toLowerCase().includes(q)
                    || (p.status       || '').toLowerCase().includes(q)
                    || (p.direction    || '').toLowerCase().includes(q)
                    || (p.block        || '').toLowerCase().includes(q);
            });
        }

        function render() {
            var filtered = getFiltered();
            document.getElementById('unit-count-badge').textContent = filtered.length;
            displayTable(filtered);
            setupPagination(filtered);
        }

        function fmtArea(sqft, sqm) {
            if (!sqft && !sqm) return null;
            var parts = [];
            if (sqft) parts.push(parseFloat(sqft).toFixed(1) + ' ft²');
            if (sqm)  parts.push(parseFloat(sqm).toFixed(1)  + ' m²');
            return parts.join(' / ');
        }

        function displayTable(data) {
            var tbody = document.getElementById('units-tbody');
            tbody.innerHTML = '';
            var start = (currentPage - 1) * rowsPerPage;
            var paged = data.slice(start, start + rowsPerPage);

            if (!paged.length) {
                tbody.innerHTML = '<tr><td colspan="11" class="text-center text-muted py-4">'
                    + '<i class="fas fa-home fa-2x d-block mb-2"></i>No units found</td></tr>';
                return;
            }

            paged.forEach(function(plot) {
                // ── Status colours — case-insensitive match ────────────
                var statusColors = {
                    'available':     '#28a745',
                    'pre-booked':    '#ffc107',
                    'not available': '#dc3545',
                };
                var statusColor = statusColors[(plot.status || '').toLowerCase()] || '#6c757d';

                var rooms = plot.room_panorama || [];
                var blockName = (typeof plot.block === 'string')
                    ? plot.block
                    : (plot.block ? (plot.block.block_name || '—') : '—');

                var galleryImages = [];
                try {
                    galleryImages = plot.gallery_images
                        ? (Array.isArray(plot.gallery_images) ? plot.gallery_images : JSON.parse(plot.gallery_images))
                        : [];
                } catch(e) {}
                var galleryCount = galleryImages.length;

                var hasPano   = !!plot.panorama_image;
                var roomCount = rooms.length;

                // ── Media pills ────────────────────────────────────────
                var mediaPills = '';
                if (hasPano || roomCount > 0) {
                    mediaPills += '<span class="pano-pill" style="background:#e8f4ff;color:#007bff;">'
                        + '<i class="fas fa-vr-cardboard"></i>'
                        + (hasPano    ? ' Main' : '')
                        + (roomCount > 0 ? ' +' + roomCount + ' rooms' : '')
                        + '</span>';
                } else {
                    mediaPills += '<span class="pano-pill" style="background:#f0f0f0;color:#aaa;">'
                        + '<i class="fas fa-vr-cardboard"></i> None</span>';
                }
                if (galleryCount > 0) {
                    mediaPills += ' <span class="pano-pill" style="background:#fff3e0;color:#e65100;">'
                        + '<i class="fas fa-images"></i> ' + galleryCount + '</span>';
                }

                // ── Floor plan pill for summary row ────────────────────
                var fpPill = plot.floor_plan_image
                    ? '<span class="pano-pill" style="background:#f3e8ff;color:#7c3aed;cursor:pointer;" '
                      + 'onclick="event.stopPropagation();previewPano(\''
                      + storageBase + '/' + plot.floor_plan_image
                      + '\',\'Floor Plan — Unit ' + plot.plot_number + '\')">'
                      + '<i class="fas fa-map"></i> View</span>'
                    : '<span class="pano-pill" style="background:#f0f0f0;color:#aaa;">'
                      + '<i class="fas fa-map"></i> None</span>';

                var delBtn = adminRole === 'super_admin'
                    ? '<form action="/plot-details/' + plot.id + '/delete" method="POST" class="d-inline"'
                      + ' onsubmit="return confirm(\'Delete this unit?\')">'
                      + '<input type="hidden" name="_token" value="' + csrfToken + '">'
                      + '<input type="hidden" name="_method" value="DELETE">'
                      + '<button class="btn btn-sm btn-danger" type="submit" title="Delete">'
                      + '<i class="fas fa-trash-alt"></i></button></form>'
                    : '';

                // ── Summary row ────────────────────────────────────────
                var summaryRow = document.createElement('tr');
                summaryRow.className = 'unit-summary-row';
                summaryRow.title     = 'Click to expand details';
                summaryRow.setAttribute('data-id', plot.id);
                summaryRow.innerHTML =
                    '<td><span class="expand-arrow" id="arrow-' + plot.id + '"><i class="fas fa-chevron-right"></i></span></td>'
                    + '<td><strong>' + (plot.plot_number || '—') + '</strong></td>'
                    + '<td><span style="font-size:12px;">' + blockName + '</span></td>'
                    + '<td><span style="font-size:12px;">' + (plot.plot_type || '—') + '</span>'
                    + (plot.plot_size ? '<br><small class="text-muted">' + plot.plot_size + ' sqft</small>' : '') + '</td>'
                    + '<td><span style="font-weight:600;">' + formatPrice(plot.actual_price) + '</span></td>'
                    // + '<td>' + (plot.offer_price
                    //     ? '<span style="color:#28a745;font-weight:600;">' + formatPrice(plot.offer_price) + '</span>'
                    //     : '<span class="text-muted">—</span>') + '</td>'
                    + '<td><span style="background:' + statusColor + ';color:#fff;padding:3px 10px;'
                    + 'border-radius:12px;font-size:11px;font-weight:600;">' + (plot.status || '—') + '</span></td>'
                    + '<td><small>' + (plot.project_name || '—') + '</small></td>'
                    + '<td>' + fpPill + '</td>'           // ← Floor Plan column
                    + '<td>' + mediaPills + '</td>'        // ← Media column
                    + '<td class="text-center" onclick="event.stopPropagation();">'
                    + (adminRole === 'super_admin'
                        ? '<a href="/plot-details/' + plot.id + '/edit" class="btn btn-sm btn-warning mr-1" title="Edit">'
                          + '<i class="fas fa-edit"></i></a>'
                        : '')
                    + delBtn + '</td>';

                summaryRow.addEventListener('click', function(e) {
                    if (e.target.closest('a') || e.target.closest('form') || e.target.closest('button')) return;
                    toggleExpand(plot.id);
                });

                // ── Expand row ─────────────────────────────────────────
                var expandRow    = document.createElement('tr');
                expandRow.className = 'unit-expand-row';
                expandRow.id        = 'expand-' + plot.id;

                // colspan = 11 (was 10, added Floor Plan column)
                var expandHtml = '<td colspan="11"><div class="unit-expand-inner"><div class="expand-5col-grid">';

                // ── Col 1: Unit Details + Dimensions ──────────────────
                expandHtml += '<div class="exp-col"><div class="expand-section">'
                    + '<div class="expand-section-title"><i class="fas fa-info-circle mr-1"></i>Unit Details</div>'
                    + '<table class="table table-sm table-borderless mb-0" style="font-size:13px;">'
                    + '<tr><td class="text-muted" style="width:90px;">Unit No</td><td><strong>' + (plot.plot_number || '—') + '</strong></td></tr>'
                    + '<tr><td class="text-muted">Block</td><td>' + blockName + '</td></tr>'
                    + '<tr><td class="text-muted">Type</td><td>' + (plot.plot_type || '—') + '</td></tr>'
                    + '<tr><td class="text-muted">Area</td><td>' + (plot.plot_size ? plot.plot_size + ' sqft' : '—') + '</td></tr>'
                    + '<tr><td class="text-muted">Direction</td><td>' + (plot.direction || '—') + '</td></tr>'
                    + '<tr><td class="text-muted">Status</td><td><span style="background:' + statusColor
                    + ';color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;">' + (plot.status || '—') + '</span></td></tr>'
                    + '<tr><td class="text-muted">Actual</td><td><strong>' + formatPrice(plot.actual_price) + '</strong></td></tr>'
                    // + '<tr><td class="text-muted">Offer</td><td>' + (plot.offer_price
                    //     ? '<strong style="color:#28a745;">' + formatPrice(plot.offer_price) + '</strong>'
                    //     : '<span class="text-muted">—</span>') + '</td></tr>'
                    + '<tr><td class="text-muted">Project</td><td>' + (plot.project_name || '—') + '</td></tr>'
                    + '</table></div>';

                var hasDims = plot.bedrooms || plot.bathrooms || plot.ensuites || plot.balconies
                    || plot.internal_area_sqft || plot.external_area_sqft
                    || (plot.room_dimensions && plot.room_dimensions.length > 0);

                if (hasDims) {
                    expandHtml += '<hr class="expand-section-divider"><div class="expand-section">'
                        + '<div class="expand-section-title"><i class="fas fa-ruler-combined mr-1"></i>Dimensions</div>';

                    var pills = [
                        { v: plot.bedrooms,  l: 'Beds',    icon: '🛏' },
                        { v: plot.bathrooms, l: 'Baths',   icon: '🚿' },
                        { v: plot.ensuites,  l: 'Ensuite', icon: '🛁' },
                        { v: plot.balconies, l: 'Balcony', icon: '🌅' },
                    ].filter(function(p) { return p.v; });

                    if (pills.length) {
                        expandHtml += '<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;">';
                        pills.forEach(function(p) {
                            expandHtml += '<div class="dim-stat-pill">'
                                + '<span class="dsv">' + p.icon + ' ' + p.v + '</span>'
                                + '<span class="dsl">' + p.l + '</span></div>';
                        });
                        expandHtml += '</div>';
                    }

                    var intArea = fmtArea(plot.internal_area_sqft, plot.internal_area_sqm);
                    var extArea = fmtArea(plot.external_area_sqft, plot.external_area_sqm);
                    var totSqft = (parseFloat(plot.internal_area_sqft || 0) + parseFloat(plot.external_area_sqft || 0)) || null;
                    var totSqm  = (parseFloat(plot.internal_area_sqm  || 0) + parseFloat(plot.external_area_sqm  || 0)) || null;
                    var totArea = fmtArea(totSqft || null, totSqm || null);

                    if (intArea || extArea) {
                        expandHtml += '<div style="font-size:12px;">';
                        if (intArea) expandHtml += '<div class="dim-area-row"><span class="dar-label">Internal</span><span class="dar-val">' + intArea + '</span></div>';
                        if (extArea) expandHtml += '<div class="dim-area-row"><span class="dar-label">External</span><span class="dar-val">' + extArea + '</span></div>';
                        if (totArea && intArea && extArea) {
                            expandHtml += '<div class="dim-area-row" style="border-top:1px solid #e9ecef;margin-top:4px;padding-top:4px;">'
                                + '<span class="dar-label" style="font-weight:600;">Total</span>'
                                + '<span class="dar-val">' + totArea + '</span></div>';
                        }
                        expandHtml += '</div>';
                    }

                    var rdims = plot.room_dimensions;
                    if (rdims && rdims.length > 0) {
                        expandHtml += '<div style="margin-top:8px;font-size:11px;">'
                            + '<div style="display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline;">';
                        rdims.forEach(function(r) {
                            var w = parseFloat(r.width), l = parseFloat(r.length), u = r.unit || 'm';
                            var dimStr = (w && l) ? w + '×' + l + ' ' + u : '—';
                            var areaStr = '';
                            if      (r.area_sqm)  areaStr = parseFloat(r.area_sqm).toFixed(1)  + ' m²';
                            else if (r.area_sqft) areaStr = parseFloat(r.area_sqft).toFixed(1) + ' ft²';
                            else if (w && l) { var a = u === 'm' ? w * l : w * l / 10.7639; areaStr = a.toFixed(1) + ' m²'; }
                            expandHtml += '<span style="color:#495057;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;" title="' + r.label + '">' + r.label + '</span>'
                                + '<span style="color:#6c757d;text-align:right;white-space:nowrap;">' + dimStr
                                + (areaStr ? ' <span style="color:#adb5bd;">(' + areaStr + ')</span>' : '') + '</span>';
                        });
                        expandHtml += '</div></div>';
                    }
                    expandHtml += '</div>';
                }
                expandHtml += '</div>'; // end exp-col 1

                // ── Col 2: Main Panorama ───────────────────────────────
                expandHtml += '<div class="exp-col"><div class="expand-section">'
                    + '<div class="expand-section-title"><i class="fas fa-vr-cardboard mr-1"></i>Main 360° Panorama</div>';

                if (adminRole === 'super_admin') {
                    expandHtml += '<div style="margin-bottom:8px;">'
                        + '<button class="btn btn-sm btn-info" onclick="openPanoramaUpload(' + plot.id + ',\'plot\')">'
                        + '<i class="fas fa-cloud-upload-alt mr-1"></i>' + (plot.panorama_image ? 'Replace' : 'Upload') + '</button>'
                        + '</div>';
                }

                if (plot.panorama_image) {
                    var mainThumb = plot.panorama_thumb
                        ? storageBase + '/' + plot.panorama_thumb
                        : storageBase + '/' + plot.panorama_image;
                    expandHtml += '<div style="position:relative;display:inline-block;">'
                        + '<img src="' + mainThumb + '" loading="lazy" '
                        + 'style="width:160px;height:90px;object-fit:cover;border-radius:8px;border:2px solid #dee2e6;cursor:pointer;" '
                        + 'onclick="previewPano(\'' + storageBase + '/' + plot.panorama_image + '\',\'Main 360°\')">'
                        + '<div style="position:absolute;bottom:5px;right:5px;background:rgba(0,0,0,0.6);'
                        + 'color:#fff;border-radius:4px;padding:2px 5px;font-size:10px;">'
                        + '<i class="fas fa-eye mr-1"></i>Preview</div></div>';
                } else {
                    expandHtml += '<div style="width:160px;height:90px;border:2px dashed #ced4da;border-radius:8px;'
                        + 'display:flex;align-items:center;justify-content:center;color:#adb5bd;">'
                        + '<div style="text-align:center;"><i class="fas fa-vr-cardboard fa-2x d-block mb-1"></i>'
                        + '<small>No panorama</small></div></div>';
                }
                expandHtml += '</div></div>';

                // ── Col 3: Room Panoramas ──────────────────────────────
                expandHtml += '<div class="exp-col"><div class="expand-section">'
                    + '<div class="expand-section-title d-flex justify-content-between align-items-center">'
                    + '<span><i class="fas fa-door-open mr-1"></i>Room Panoramas</span>'
                    + (adminRole === 'super_admin'
                        ? '<button class="btn btn-sm btn-outline-primary ml-2" style="padding:2px 8px;font-size:11px;" '
                          + 'onclick="openRoomPanoramaUpload(' + plot.id + ')">'
                          + '<i class="fas fa-plus mr-1"></i>Add</button>'
                        : '') + '</div>';

                if (rooms.length > 0) {
                    expandHtml += '<div class="room-thumb-strip">';
                    rooms.forEach(function(room) {
                        var rThumb = room.panorama_thumb
                            ? storageBase + '/' + room.panorama_thumb
                            : storageBase + '/' + room.panorama_image;
                        expandHtml += '<div class="room-thumb-item">'
                            + '<img src="' + rThumb + '" loading="lazy" '
                            + 'onclick="previewPano(\'' + storageBase + '/' + room.panorama_image + '\',\'' + room.room_label + '\')" '
                            + 'title="' + room.room_label + '">';
                        if (adminRole === 'super_admin') {
                            expandHtml += '<form action="/admin/room-panorama/delete/' + room.id + '" method="POST" '
                                + 'onsubmit="return confirm(\'Remove ' + room.room_label + '?\')">'
                                + '<input type="hidden" name="_token" value="' + csrfToken + '">'
                                + '<input type="hidden" name="_method" value="DELETE">'
                                + '<button type="submit" class="room-del">&times;</button></form>';
                        }
                        expandHtml += '<div class="room-label">' + room.room_label + '</div></div>';
                    });
                    expandHtml += '</div>';
                } else {
                    expandHtml += '<p class="text-muted small mt-2 mb-0">No room panoramas yet.</p>';
                }
                expandHtml += '</div></div>';

                // ── Col 4: Floor Plan + Gallery ────────────────────────
                expandHtml += '<div class="exp-col"><div class="expand-section">';

                // Floor plan sub-section
                expandHtml += '<div class="expand-section-title d-flex justify-content-between align-items-center">'
                    + '<span><i class="fas fa-map mr-1"></i>Floor Plan</span>'
                    + (adminRole === 'super_admin'
                        ? '<a href="/plot-details/' + plot.id + '/edit" '
                          + 'class="btn btn-sm btn-outline-secondary ml-2" style="padding:2px 8px;font-size:11px;">'
                          + '<i class="fas fa-exchange-alt mr-1"></i>Replace</a>'
                        : '') + '</div>';

                if (plot.floor_plan_image) {
                    var fpSrc = storageBase + '/' + plot.floor_plan_image;
                    expandHtml += '<div style="margin-bottom:12px;position:relative;display:inline-block;">'
                        + '<img src="' + fpSrc + '" loading="lazy" '
                        + 'onclick="previewPano(\'' + fpSrc + '\',\'Floor Plan — Unit ' + plot.plot_number + '\')" '
                        + 'style="width:100%;max-width:180px;height:auto;min-height:60px;border-radius:8px;'
                        + 'border:2px solid #c9a96e;cursor:pointer;object-fit:cover;display:block;">'
                        + '<div style="position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,0.55);'
                        + 'color:#fff;border-radius:4px;padding:2px 6px;font-size:10px;pointer-events:none;">'
                        + '<i class="fas fa-eye mr-1"></i>Preview</div></div>';
                } else {
                    expandHtml += '<div style="width:100%;max-width:180px;height:70px;border:2px dashed #dee2e6;'
                        + 'border-radius:8px;display:flex;align-items:center;justify-content:center;'
                        + 'color:#adb5bd;margin-bottom:12px;">'
                        + '<div style="text-align:center;">'
                        + '<i class="fas fa-map fa-lg d-block mb-1"></i><small>No floor plan</small>'
                        + '</div></div>';
                }

                // Gallery sub-section
                expandHtml += '<hr class="expand-section-divider">'
                    + '<div class="expand-section-title d-flex justify-content-between align-items-center">'
                    + '<span><i class="fas fa-images mr-1"></i>Gallery'
                    + (galleryCount > 0 ? ' <span style="font-weight:400;color:#aaa;">(' + galleryCount + ')</span>' : '')
                    + '</span>'
                    + (adminRole === 'super_admin'
                        ? '<a href="/plot-details/' + plot.id + '/edit#gallery" '
                          + 'class="btn btn-sm btn-outline-secondary ml-2" style="padding:2px 8px;font-size:11px;">'
                          + '<i class="fas fa-plus mr-1"></i>Manage</a>'
                        : '') + '</div>';

                if (galleryCount > 0) {
                    expandHtml += '<div class="gallery-thumb-strip">';
                    galleryImages.forEach(function(filename, idx) {
                        var src = storageBase + '/plots/gallery/' + filename;
                        expandHtml += '<div class="gallery-thumb-item" onclick="previewPano(\'' + src + '\',\'Gallery ' + (idx + 1) + '\')">'
                            + '<img src="' + src + '" loading="lazy" title="Gallery ' + (idx + 1) + '">'
                            + '<div class="gallery-vr-badge"><i class="fas fa-vr-cardboard"></i></div>'
                            + '</div>';
                    });
                    expandHtml += '</div>';
                } else {
                    expandHtml += '<p class="text-muted small mt-2 mb-0">No gallery images yet.<br>'
                        + '<a href="/plot-details/' + plot.id + '/edit#gallery" style="font-size:12px;">Add via Edit</a></p>';
                }
                expandHtml += '</div></div>';

                // ── Col 5: Payment Plans ───────────────────────────────
                var assignedPlans = plot.payment_plans || [];
                expandHtml += '<div class="exp-col"><div class="expand-section">'
                    + '<div class="expand-section-title d-flex justify-content-between align-items-center">'
                    + '<span><i class="fas fa-file-invoice-dollar mr-1"></i>Payment Plans'
                    + (assignedPlans.length > 0 ? ' <span style="font-weight:400;color:#aaa;">(' + assignedPlans.length + ')</span>' : '')
                    + '</span>'
                    + (adminRole === 'super_admin'
                        ? '<a href="/plot-details/' + plot.id + '/edit" class="btn btn-sm btn-outline-warning ml-2" style="padding:2px 8px;font-size:11px;">'
                          + '<i class="fas fa-edit mr-1"></i>Assign</a>'
                        : '') + '</div>';

                if (assignedPlans.length > 0) {
                    assignedPlans.forEach(function(pp) {
                        expandHtml += '<div style="background:#fffdf8;border:1px solid #f0e4cc;border-radius:7px;padding:8px 10px;margin-bottom:6px;">'
                            + '<div style="font-size:12px;font-weight:700;color:#343a40;margin-bottom:3px;">'
                            + '<i class="fas fa-file-invoice-dollar mr-1" style="color:#c9a96e;"></i>' + pp.name + '</div>';
                        var mCount = pp.milestones_count || (pp.milestones ? pp.milestones.length : null);
                        if (mCount) {
                            expandHtml += '<div style="font-size:11px;color:#6c757d;">' + mCount + ' milestone' + (mCount !== 1 ? 's' : '') + '</div>';
                        }
                        expandHtml += '</div>';
                    });
                } else {
                    expandHtml += '<p class="text-muted small mt-2 mb-0">'
                        + 'No plans assigned.<br>'
                        + (adminRole === 'super_admin'
                            ? '<a href="/plot-details/' + plot.id + '/edit" style="font-size:12px;">Assign via Edit</a>'
                            : 'Contact admin.')
                        + '</p>';
                }
                expandHtml += '</div></div>';

                expandHtml += '</div></div></td>';
                expandRow.innerHTML = expandHtml;

                tbody.appendChild(summaryRow);
                tbody.appendChild(expandRow);
            });
        }

        function toggleExpand(id) {
            if (openExpandId && openExpandId !== id) {
                var prev      = document.getElementById('expand-' + openExpandId);
                var prevArrow = document.getElementById('arrow-' + openExpandId);
                var prevRow   = document.querySelector('[data-id="' + openExpandId + '"]');
                if (prev)      prev.classList.remove('open');
                if (prevArrow) prevArrow.classList.remove('open');
                if (prevRow)   prevRow.classList.remove('expanded');
            }
            var expandRow  = document.getElementById('expand-' + id);
            var arrow      = document.getElementById('arrow-' + id);
            var summaryRow = document.querySelector('[data-id="' + id + '"]');
            if (!expandRow) return;
            var isOpen = expandRow.classList.contains('open');
            expandRow.classList.toggle('open');
            if (arrow)      arrow.classList.toggle('open');
            if (summaryRow) summaryRow.classList.toggle('expanded', !isOpen);
            openExpandId = isOpen ? null : id;
        }

        function setupPagination(data) {
            var controls  = document.getElementById('pagination-controls');
            controls.innerHTML = '';
            var pageCount = Math.ceil(data.length / rowsPerPage);
            if (pageCount <= 1) return;
            function makeBtn(label, page, disabled) {
                var a = document.createElement('a');
                a.innerText = label;
                a.classList.add('paginate_button');
                if (page === currentPage) a.classList.add('active');
                if (disabled) a.classList.add('disabled');
                else a.addEventListener('click', function() { currentPage = page; render(); });
                return a;
            }
            controls.appendChild(makeBtn('Previous', currentPage - 1, currentPage === 1));
            for (var i = 1; i <= pageCount; i++) controls.appendChild(makeBtn(i, i, false));
            controls.appendChild(makeBtn('Next', currentPage + 1, currentPage === pageCount));
        }

        render();
    });
</script>

@include('Partials.footer')