@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>Master Plans</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 class="bc-active">Master Plans</li>
                            </ol>
                        </div>
                    </div>
                </div>

                {{-- ── Bulk import results flash ───────────────────────── --}}
                @if(session('bulk_result'))
                    @php $result = session('bulk_result'); @endphp
                    <div class="container-fluid mb-3">
                        <div
                            class="alert alert-{{ $result['skipped'] > 0 ? 'warning' : 'success' }} alert-dismissible fade show">
                            <i class="fas fa-file-csv mr-2"></i>
                            <strong>Import complete —</strong>
                            {{ $result['imported'] }} imported
                            @if($result['skipped'] > 0)
                                , {{ $result['skipped'] }} skipped
                            @endif
                            @if(!empty($result['errors']))
                                <ul class="mt-2 mb-0 small">
                                    @foreach($result['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 ── --}}
                <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-map" style="font-size:22px;color:#c9a96e;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700;font-size:15px;">Add Single Master Plan</div>
                                        <div style="font-size:13px;color:#6c757d;">Create one master plan manually</div>
                                    </div>
                                    <a href="/master-plan/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 Master Plans</div>
                                            <div style="font-size:13px;color:#6c757d;">
                                                Columns: <code>project_id, master_plan_name</code> &nbsp;
                                                <a href="/master-plan/csv-template" style="color:#28a745;">
                                                    <i class="fas fa-download mr-1"></i>Download template
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="/master-plan/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-masterplan" 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-masterplan').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>


                @if(session('success'))
                    <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>
                @endif
                @if(session('info'))
                    <div class="alert alert-info alert-dismissible fade show">
                        {{ session('info') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                @endif

                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div
                                class="card-header pb-0 card-no-border d-flex justify-content-between align-items-center">
                                <h3>Master Plans</h3>
                                <a href="/master-plan/create" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus mr-1"></i> Add New
                                </a>
                            </div>
                            <div class="card-body">

                                {{-- Search + per page --}}
                                <div class="d-flex justify-content-between mb-3">
                                    <div class="dataTables_length">
                                        <label>Show
                                            <select id="rowsPerPageSelect">
                                                <option value="5">5</option>
                                                <option value="10" selected>10</option>
                                                <option value="25">25</option>
                                                <option value="50">50</option>
                                            </select>
                                            entries
                                        </label>
                                    </div>
                                    <div class="dataTables_filter">
                                        <label>Search:
                                            <input type="search" id="searchInput"
                                                class="form-control form-control-sm d-inline w-auto" placeholder="">
                                        </label>
                                    </div>
                                </div>

                                <table class="display dataTable no-footer" id="data-table" role="grid">
                                    <thead>
                                        <tr class="table-header">
                                            <th>#</th>
                                            <th>Project</th>
                                            <th>Master Plan Name</th>
                                            <th>Panorama</th>
                                            <th class="text-center">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>

                                <div class="pagination mt-3" id="pagination-controls"></div>
                            </div>
                        </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:480px;
                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 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-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="resetPanoModal()"
                        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 ease;">
                    </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>

<script>
    var PANO_CHUNK_SIZE = 5 * 1024 * 1024;
    var PANO_CSRF = "{{ csrf_token() }}";
    var panoEntityId = null;
    var panoEntityType = null;
    var panoFile = null;
    var panoUploading = false;
    var panoStartTime = null;

    var panoOverlay = document.getElementById('pano-modal-overlay');
    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;
        resetPanoModal();
        panoOverlay.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
    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 = '';
    }
    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'; stepSuccess.style.display = 'none';
        panoUploadBtn.disabled = false;
    });
    async function startPanoUpload() {
        if (!panoFile || panoUploading) 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';
        stepError.style.display = 'none'; panoUploadBtn.disabled = true;
        panoCancelBtn.disabled = true; panoStartTime = Date.now();
        try {
            for (var i = 0; i < totalChunks; i++) {
                var start = i * PANO_CHUNK_SIZE;
                var 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);
                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 on chunk ' + i);
                }
                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';
    }

    // ── Table ──────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function () {
        var masterPlans = @json($MasterPlans);
        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;

        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 masterPlans.filter(function (p) {
                return (p.master_plan_name || '').toLowerCase().includes(q)
                    || (p.project_name || '').toLowerCase().includes(q);
            });
        }

        function render() { displayTable(getFiltered()); setupPagination(getFiltered()); }

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

            if (!paged.length) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">No records found</td></tr>';
                return;
            }

            paged.forEach(function (plan, idx) {
                var panoCol;

                if (adminRole === 'super_admin') {
                    // Upload / change button
                    panoCol = '<button class="btn btn-sm btn-info mb-1" '
                        + 'onclick="openPanoramaUpload(' + plan.id + ', \'master\')">'
                        + '<i class="fas fa-image mr-1"></i>'
                        + (plan.panorama_image ? 'Change' : 'Upload Panorama')
                        + '</button>';

                    if (plan.panorama_image) {
                        var floorCount = plan.blocks_count || 0;
                        // Hotspots button
                        panoCol += ' <a href="/admin/hotspots/master-plan/' + plan.id + '" '
                            + 'class="btn btn-sm btn-warning mb-1">'
                            + '<i class="fas fa-map-pin mr-1"></i>Hotspots'
                            + (floorCount > 0
                                ? ' <span style="background:#fff;border-radius:10px;'
                                + 'padding:2px 10px;font-size:11px;margin-left:4px;">'
                                + floorCount + ' floor' + (floorCount > 1 ? 's' : '') + '</span>'
                                : '')
                            + '</a>';

                        // ── Preview button (Option 3) ──────────────────
                        var previewSrc = plan.panorama_thumb
                            ? storageBase + '/' + plan.panorama_thumb
                            : storageBase + '/' + plan.panorama_image;

                        panoCol += '<br>'
                            // ── Lazy-loaded thumbnail (Option 1) ──
                            + '<img src="' + previewSrc + '" '
                            + 'loading="lazy" '
                            + 'style="max-width:60px;border-radius:4px;margin-top:4px;cursor:pointer;" '
                            + 'onclick="previewPano(\'' + storageBase + '/' + plan.panorama_image + '\')" '
                            + 'title="Click to preview full size">';
                    } else {
                        panoCol += '<br/><div style="width:180px;height:100px;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>';
                    }

                } else {
                    // Non super_admin — just show status badge + preview button if exists
                    if (plan.panorama_image) {
                        var previewSrc = plan.panorama_thumb
                            ? storageBase + '/' + plan.panorama_thumb
                            : storageBase + '/' + plan.panorama_image;

                        panoCol = '<span class="badge badge-success d-block mb-1">Ready</span>'
                            + '<img src="' + previewSrc + '" '
                            + 'loading="lazy" '
                            + 'style="max-width:60px;border-radius:4px;cursor:pointer;" '
                            + 'onclick="previewPano(\'' + storageBase + '/' + plan.panorama_image + '\')" '
                            + 'title="Click to preview">';
                    } else {
                        panoCol = '<span class="badge badge-secondary">No Panorama</span>';
                    }
                }

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

                var tr = document.createElement('tr');
                tr.className = idx % 2 === 0 ? 'odd' : 'even';
                tr.innerHTML = '<td>' + (start + idx + 1) + '</td>'
                    + '<td>' + (plan.project_name || '—') + '</td>'
                    + '<td>' + plan.master_plan_name + '</td>'
                    + '<td class="panorama-div">' + panoCol + '</td>'
                    + '<td class="text-center">'
                    + '<a href="/master-plan/' + plan.id + '/edit" '
                    + 'class="btn btn-sm btn-warning mr-1" title="Edit">'
                    + '<i class="fas fa-edit"></i></a>'
                    + delBtn
                    + '</td>';
                tbody.appendChild(tr);
            });
        }

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