@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>Floors</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">Floors</li>                              
                            </ol>
                        </div>
                    </div>
                </div>

                {{-- Alerts --}}
                @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('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

                {{-- Bulk import result --}}
                @if(session('bulk_result'))
                    @php $r = session('bulk_result'); @endphp
                    <div class="alert alert-{{ $r['skipped'] > 0 ? 'warning' : 'success' }} alert-dismissible fade show">
                        <i class="fas fa-{{ $r['skipped'] > 0 ? 'exclamation-triangle' : 'check-circle' }} mr-2"></i>
                        <strong>Import complete:</strong> {{ $r['imported'] }} imported
                        @if($r['skipped'] > 0)
                            , {{ $r['skipped'] }} skipped
                            <ul class="mt-2 mb-0" style="font-size:13px;">
                                @foreach($r['errors'] as $err)
                                    <li>{{ $err }}</li>
                                @endforeach
                            </ul>
                        @endif
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                @endif

            </div>

            {{-- ── Add / Import cards ── --}}
            <div class="container-fluid mb-4">
                <div class="row">

                    {{-- Single add --}}
                    <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-layer-group" style="font-size:22px;color:#c9a96e;"></i>
                                </div>
                                <div>
                                    <div style="font-weight:700;font-size:15px;">Add Single Floor</div>
                                    <div style="font-size:13px;color:#6c757d;">Fill in the form manually</div>
                                </div>
                                <a href="/blocks/create" class="btn btn-sm btn-primary ml-auto">
                                    <i class="fas fa-plus mr-1"></i> Add
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- CSV bulk import --}}
                    <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 Floors</div>
                                        <div style="font-size:13px;color:#6c757d;">
                                            Upload a CSV to add multiple floors at once. &nbsp;
                                            <a href="/blocks/csv-template" style="color:#28a745;">
                                                <i class="fas fa-download mr-1"></i>Download template
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <form action="/blocks/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-blocks"
                                             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-blocks').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>

            {{-- ── Main table card ── --}}
            <div class="container-fluid">
                <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>Floors</h3>
                            </div>
                            <div class="card-body">

                                <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">10</option>
                                                <option value="25">25</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select>
                                            entries
                                        </label>
                                    </div>
                                    <div class="dataTables_filter">
                                        <label>Search: <input type="search" id="searchInput" placeholder=""></label>
                                    </div>
                                </div>

                                <table class="display dataTable no-footer" id="data-table" role="grid">
                                    <thead>
                                        <tr class="table-header">
                                            <th>#</th>
                                            <th>Floor Name</th>
                                            <th>Floor No.</th>
                                            <th>Panorama</th>
                                            <th>Project</th>
                                            <th>Master Plan</th>
                                            <th class="text-center">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                <div class="pagination" 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" style="margin-right:8px;"></i>Upload 360° Panorama
            </h5>
            <button onclick="closePanoModal()" style="background:none;border:none;color:#fff;
                            font-size:22px;cursor:pointer;line-height:1;padding:0;">&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;transition:border-color 0.2s;"
                     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 — maximum 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 page...
                </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;box-shadow:0 20px 60px rgba(0,0,0,0.7);">
    <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>

<script>
// ── Panorama upload modal ──────────────────────────────────
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 chunk = panoFile.slice(start, end);
            var fd    = new FormData();
            fd.append('chunk',        chunk);
            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 errData = {};
                try { errData = await resp.json(); } catch(e) {}
                throw new Error(errData.message || 'Server error on chunk ' + i);
            }

            var pct     = Math.round(((i + 1) / totalChunks) * 100);
            var elapsed = Math.max((Date.now() - panoStartTime) / 1000, 0.1);
            var speed   = end / elapsed;
            panoBar.style.width     = pct + '%';
            panoPercent.textContent = pct + '%';
            panoStatus.textContent  = 'Chunk ' + (i + 1) + ' / ' + totalChunks;
            panoSpeed.textContent   = panoFormatBytes(speed) + '/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';
}

// ── Lightbox ──────────────────────────────────────────────
function previewPano(fullSrc) {
    var overlay = document.getElementById('pano-preview-overlay');
    var img     = document.getElementById('pano-preview-img');
    var spinner = document.getElementById('pano-preview-spinner');
    img.style.display     = 'none';
    spinner.style.display = 'block';
    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') {
        var ol = document.getElementById('pano-preview-overlay');
        if (ol.style.display !== 'none') {
            ol.style.display = 'none';
            document.body.style.overflow = '';
        }
    }
});

// ── Table ─────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
    var blocks           = @json($BlocksDetails);
    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 blocks.filter(function(b) {
            return b.block_name.toLowerCase().includes(q)
                || (b.project      && b.project.project_name.toLowerCase().includes(q))
                || (b.master_plan  && b.master_plan.master_plan_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="7" class="text-center text-muted py-3">No records found</td></tr>';
            return;
        }

        paged.forEach(function(block, idx) {

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

                if (block.panorama_image) {
                    var plotCount  = block.plots_count || 0;
                    if (plotCount > 0) {
                        panoCol += ' <a href="/admin/hotspots/block/' + block.id + '" class="btn btn-sm btn-warning mb-1">'
                            + '<i class="fas fa-map-pin mr-1"></i>Hotspots'
                            + '<span class="badge badge-light ml-1">' + plotCount + ' units</span></a>';
                    } else {
                        panoCol += ' <span class="badge badge-danger d-block mb-1">'
                            + '<i class="fas fa-exclamation-triangle"></i> Add plots first</span>';
                    }
                    var previewSrc = block.panorama_thumb
                        ? storageBase + '/' + block.panorama_thumb
                        : storageBase + '/' + block.panorama_image;
                    panoCol += '<br><img src="' + previewSrc + '" loading="lazy" '
                        + 'style="max-width:60px;border-radius:4px;margin-top:4px;cursor:pointer;" '
                        + 'onclick="previewPano(\'' + storageBase + '/' + block.panorama_image + '\')" '
                        + 'title="Click to preview">';
                } 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 {
                if (block.panorama_image) {
                    var previewSrc = block.panorama_thumb
                        ? storageBase + '/' + block.panorama_thumb
                        : storageBase + '/' + block.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 + '/' + block.panorama_image + '\')">';
                } else {
                    panoCol = '<span class="badge badge-secondary">No Panorama</span>';
                }
            }

            // ── Delete button ─────────────────────────────
            var delBtn = adminRole === 'super_admin'
                ? '<form action="/blocks/' + block.id + '/delete" method="POST" class="d-inline" onsubmit="return confirm(\'Delete this floor?\')">'
                + '<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>'
                : '';

            var tr = document.createElement('tr');
            tr.className = idx % 2 === 0 ? 'odd' : 'even';
            tr.innerHTML = '<td>' + (start + idx + 1) + '</td>'
                + '<td>' + block.block_name + '</td>'
                + '<td>' + (block.floor_number !== null && block.floor_number !== undefined ? block.floor_number : '—') + '</td>'
                + '<td class="panorama-div">' + panoCol + '</td>'
                + '<td>' + (block.project     ? block.project.project_name          : '—') + '</td>'
                + '<td>' + (block.master_plan  ? block.master_plan.master_plan_name  : 'No Plan') + '</td>'
                + '<td class="text-center">'
                + '<a href="/blocks/' + block.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')