@php
    use Illuminate\Support\Facades\Storage;
    $floorplanUrl = Storage::url($floorplan->image_path);
@endphp

<x-app-layout>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        html, body { height: 100%; }
        .ops-shell{
            position: fixed; left:0; right:0; top:64px; bottom:0;
            background:#000; display:flex; flex-direction:column; z-index:10;
        }

        /* Important for mobile gestures */
        #viewport{ touch-action:none; }

        #overlay, #overlay *{ -webkit-user-select:none; user-select:none; }

        /* Bottom sheet */
        .sheet-backdrop{
            position:absolute; inset:0;
            background:rgba(0,0,0,0.55);
            opacity:0; pointer-events:none;
            transition:opacity .18s ease;
            z-index: 40;
            touch-action: none;
        }
        .sheet-backdrop.open{ opacity:1; pointer-events:auto; }

        .sheet{
            position:absolute; left:0; right:0; bottom:0;
            z-index: 50;
            pointer-events: auto;
            background:#0b1220;
            border-top:1px solid rgba(255,255,255,0.12);
            border-radius:18px 18px 0 0;
            transform: translateY(102%);
            transition: transform .22s ease;
            height: min(72vh, 680px);
            display:flex; flex-direction:column;
            will-change: transform;
            overscroll-behavior: contain;
            touch-action: pan-y;
        }
        .sheet.open{ transform: translateY(0); }

        .sheet-handle{
            width:44px; height:5px; border-radius:999px;
            background:rgba(255,255,255,0.25);
            margin:10px auto 8px;
        }

        .sheet-header{
            padding: 0 12px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.10);
            display:flex; align-items:center; gap:10px;
        }

        .sheet-body{
            overflow:auto;
            padding: 12px;
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
            -webkit-overflow-scrolling: touch;
        }

        .chip{
            display:inline-flex; align-items:center; gap:6px;
            padding:6px 10px; border-radius:999px;
            background:rgba(255,255,255,0.08);
            border:1px solid rgba(255,255,255,0.10);
            color:rgba(255,255,255,0.9);
            font-size:12px;
        }
        .card{
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:14px;
            padding:12px;
        }

        /* Icon buttons */
        .iconbtn{
            width:42px; height:38px;
            border-radius:12px;
            display:inline-flex; align-items:center; justify-content:center;
            border:1px solid rgba(255,255,255,0.12);
            background:#111827;
            color:#fff;
        }
        .iconbtn:hover{ background:#0f172a; }
        .iconbtn:active{ transform: translateY(1px); }
        .iconbtn-green{ background:#10b981; color:#071015; border-color:rgba(16,185,129,0.65); }
        .iconbtn-green:hover{ background:#34d399; }
        .iconbtn-indigo{ background:#4f46e5; border-color:rgba(79,70,229,0.65); }
        .iconbtn-indigo:hover{ background:#6366f1; }
        .ico{ width:18px; height:18px; display:block; }

        .btn{
            border-radius:10px; padding:10px 14px; font-size:14px;
            font-weight:800; border:1px solid rgba(255,255,255,0.12);
            cursor:pointer;
        }
        .btn-secondary{ background:#111827; color:#fff; }
        .btn-secondary:hover{ background:#0f172a; }
        .btn-primary{ background:#4f46e5; color:#fff; border-color:rgba(79,70,229,0.65); }
        .btn-primary:hover{ background:#6366f1; }
        .btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

        /* Table nodes */
        .tblnode{
            position:absolute;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            font-size:12px;
            user-select:none;
            cursor:pointer;
            border:2px solid rgba(255,255,255,0.35);
            background:rgba(0,0,0,0.75);
            border-radius:10px;
            box-shadow: 0 10px 22px rgba(0,0,0,0.40);
            touch-action: none;
        }
        .tblnode.sel{
            outline: 3px solid rgba(255,255,255,0.9);
            outline-offset: 1px;
        }

        /* Add form fields */
        .f-label{ display:block; font-size:12px; color:rgba(255,255,255,0.75); margin-bottom:6px; }
        .f-input{
            width:100%;
            border-radius:12px;
            padding:10px 12px;
            background:#0f172a;
            border:1px solid rgba(255,255,255,0.12);
            color:#fff;
            outline:none;
        }
        .f-input:focus{ border-color: rgba(99,102,241,0.7); box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }
        .f-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    </style>

    <div class="ops-shell">
        {{-- FLOORPLAN --}}
        <div id="viewport" class="flex-1 relative overflow-hidden bg-black">
            <div id="zoomWrap" class="absolute left-0 top-0" style="transform-origin: 0 0;">
                <img id="fpimg"
                     src="{{ $floorplanUrl }}"
                     alt="floorplan"
                     class="block"
                     style="display:block; max-width:none; max-height:none;">

                <svg id="linksSvg" class="absolute left-0 top-0 pointer-events-none"></svg>
                <div id="overlay" class="absolute left-0 top-0"></div>
            </div>

            <div class="absolute top-2 left-2 z-10 text-xs text-white/70 bg-black/50 px-2 py-1 rounded">
                PC: Wheel zoom • Drag pan • Mobile: Pinch zoom • 1-finger pan
            </div>

            {{-- Bottom Sheet --}}
            <div id="sheetBackdrop" class="sheet-backdrop"></div>

            <div id="sheet" class="sheet" aria-hidden="true">
                <div class="sheet-handle"></div>

                <div class="sheet-header">
                    <div class="text-white font-semibold" id="sheetTitle">Panel</div>
                    <div class="ml-auto">
                        <button id="sheetClose" type="button" class="btn btn-secondary py-2 px-3">Close</button>
                    </div>
                </div>

                <div class="sheet-body" id="sheetBody"></div>
            </div>
        </div>

        {{-- BOTTOM BAR --}}
        <div class="bg-gray-900 border-t border-gray-800">
            <div class="px-3 py-2 flex flex-col gap-2 md:flex-row md:items-center md:gap-3">
                <div class="text-xs text-gray-200 md:w-72">
                    <div class="font-semibold text-white truncate">Mazzo • Operations</div>
                    <div class="truncate text-gray-300">{{ $floorplan->name }} • {{ $date }}</div>
                    <div class="mt-1">Selected: <span id="selCount" class="text-white font-semibold">0</span></div>
                </div>

                <div class="flex flex-wrap items-center gap-2 md:flex-1">
                    <form id="dateForm" method="GET" action="{{ route('ops.floorplan') }}" class="flex items-center gap-2">
                        <input id="dateInput" type="date" name="date" value="{{ $date }}"
                               class="rounded-lg px-2 py-1 text-sm bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </form>

                    <button id="btnFit" type="button" class="iconbtn" title="Fit">
                        <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 9V4h5"/><path d="M20 9V4h-5"/><path d="M4 15v5h5"/><path d="M20 15v5h-5"/>
                        </svg>
                    </button>

                    <button id="btnAdd" type="button" class="iconbtn iconbtn-green" title="Add reservation">
                        <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 5v14"/><path d="M5 12h14"/>
                        </svg>
                    </button>

                    <button id="btnList" type="button" class="iconbtn iconbtn-indigo" title="Reservations">
                        <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/>
                        </svg>
                    </button>

                    <button id="btnClear" type="button" class="iconbtn" title="Clear selection">
                        <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M6 6l12 12"/><path d="M18 6L6 18"/>
                        </svg>
                    </button>
                </div>

                <div class="md:w-96">
                    <div id="hint" class="text-xs text-gray-200 bg-black/30 border border-white/10 rounded-xl px-3 py-2">
                        Tip: Select table(s) → Add Reservation. Tap a reserved table to view details.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const tables = @json($tables);
        const reservationGroups = @json($reservationGroups ?? $reservations ?? []);
        const storeUrl = @json(route('ops.reservations.store'));
        const currentDate = @json($date);
        const currentFloorplanId = @json($floorplan->id);

        const viewport = document.getElementById('viewport');
        const zoomWrap = document.getElementById('zoomWrap');
        const img = document.getElementById('fpimg');
        const overlay = document.getElementById('overlay');
        const linksSvg = document.getElementById('linksSvg');
        const hint = document.getElementById('hint');

        const sheet = document.getElementById('sheet');
        const sheetBackdrop = document.getElementById('sheetBackdrop');
        const sheetTitle = document.getElementById('sheetTitle');
        const sheetBody = document.getElementById('sheetBody');
        const sheetClose = document.getElementById('sheetClose');

        const selected = new Set();
        const selCountEl = document.getElementById('selCount');

        const DEFAULT_HINT_TEXT = 'Tip: Select table(s) → Add Reservation. Tap a reserved table to view details.';

        // Auto-submit on date change
        const dateForm = document.getElementById('dateForm');
        const dateInput = document.getElementById('dateInput');
        dateInput.addEventListener('change', () => dateForm.submit());

        let scale = 1, panX = 0, panY = 0;
        const MIN_SCALE = 0.15, MAX_SCALE = 3.5;
        let didDrag = false;
        let uiOpen = false;

        // Stop sheet/backdrop events from leaking to the floorplan
        ['pointerdown','pointermove','pointerup','pointercancel','wheel','click','touchstart','touchmove','touchend'].forEach(evt => {
            sheet.addEventListener(evt, (e) => { e.stopPropagation(); }, { passive: false });
            sheetBackdrop.addEventListener(evt, (e) => { e.stopPropagation(); }, { passive: false });
        });

        function openSheet(title, html) {
            sheetTitle.textContent = title;
            sheetBody.innerHTML = html;
            sheet.classList.add('open');
            sheetBackdrop.classList.add('open');
            sheet.setAttribute('aria-hidden', 'false');
            uiOpen = true;
            requestAnimationFrame(() => { sheetBody.scrollTop = 0; });
        }
        function closeSheet() {
            sheet.classList.remove('open');
            sheetBackdrop.classList.remove('open');
            sheet.setAttribute('aria-hidden', 'true');
            uiOpen = false;
        }
        sheetClose.addEventListener('click', closeSheet);
        sheetBackdrop.addEventListener('click', closeSheet);
        window.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSheet(); });

        function clamp(v, min, max){ return Math.max(min, Math.min(max, v)); }

        function syncLayersToImage() {
            const w = img.naturalWidth;
            const h = img.naturalHeight;
            if (!w || !h) return;

            img.style.width = w + 'px';
            img.style.height = h + 'px';

            overlay.style.width = w + 'px';
            overlay.style.height = h + 'px';

            linksSvg.setAttribute('width', w);
            linksSvg.setAttribute('height', h);
            linksSvg.style.width = w + 'px';
            linksSvg.style.height = h + 'px';
        }

        function setTransform() {
            zoomWrap.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
        }

        function fitToScreen() {
            const vw = viewport.clientWidth;
            const vh = viewport.clientHeight;
            const iw = img.naturalWidth;
            const ih = img.naturalHeight;
            if (!vw || !vh || !iw || !ih) return;

            const s = Math.min(vw / iw, vh / ih);
            scale = clamp(s, MIN_SCALE, MAX_SCALE);
            panX = (vw - iw * scale) / 2;
            panY = (vh - ih * scale) / 2;
            setTransform();
        }

        function escapeHtml(s){
            return String(s ?? '').replace(/[&<>"']/g, (m) => ({
                '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'
            }[m]));
        }

        function updateSelectedUi() {
            selCountEl.textContent = String(selected.size);
            overlay.querySelectorAll('.tblnode').forEach(el => {
                const tid = Number(el.dataset.id);
                if (selected.has(tid)) el.classList.add('sel');
                else el.classList.remove('sel');
            });
        }

        function clearSelectionAndHint(){
            selected.clear();
            updateSelectedUi();
            hint.textContent = DEFAULT_HINT_TEXT;
        }

        function colorForReservation(id) {
            const hue = (Number(id) * 47) % 360;
            return `hsl(${hue} 90% 60%)`;
        }

        function getTableCenter(t) {
            const x = parseInt(t.x ?? 20, 10);
            const y = parseInt(t.y ?? 20, 10);
            const w = parseInt(t.w ?? 60, 10);
            const h = parseInt(t.h ?? 60, 10);
            return { cx: x + (w / 2), cy: y + (h / 2) };
        }

        function findReservationForTable(tableId) {
            const tid = Number(tableId);
            return reservationGroups.find(g => Array.isArray(g.table_ids) && g.table_ids.map(Number).includes(tid)) || null;
        }

        function applyShape(el, shape) {
            const s = (shape || '');
            el.style.borderRadius = s.startsWith('circle') ? '9999px' : '10px';
        }

        function ensureSvgDefs() {
            if (linksSvg.querySelector('defs')) return;

            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
            const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
            filter.setAttribute('id', 'glow');
            filter.innerHTML = `
                <feGaussianBlur stdDeviation="3" result="coloredBlur"></feGaussianBlur>
                <feMerge>
                    <feMergeNode in="coloredBlur"></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                </feMerge>
            `;
            defs.appendChild(filter);
            linksSvg.appendChild(defs);
        }

        function drawReservationLinks() {
            ensureSvgDefs();

            Array.from(linksSvg.children).forEach(ch => {
                if (ch.tagName.toLowerCase() !== 'defs') ch.remove();
            });

            const tById = new Map(tables.map(t => [Number(t.id), t]));

            reservationGroups.forEach(g => {
                const ids = (g.table_ids || []).map(Number).filter(id => tById.has(id));
                if (ids.length < 2) return;

                const base = tById.get(ids[0]);
                const baseC = getTableCenter(base);
                const stroke = colorForReservation(g.id);

                for (let i = 1; i < ids.length; i++) {
                    const t = tById.get(ids[i]);
                    const c = getTableCenter(t);

                    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                    line.setAttribute('x1', baseC.cx);
                    line.setAttribute('y1', baseC.cy);
                    line.setAttribute('x2', c.cx);
                    line.setAttribute('y2', c.cy);
                    line.setAttribute('stroke', stroke);
                    line.setAttribute('stroke-width', '5');
                    line.setAttribute('stroke-linecap', 'round');
                    line.setAttribute('opacity', '0.9');
                    line.setAttribute('filter', 'url(#glow)');
                    linksSvg.appendChild(line);
                }
            });
        }

        // --- Reservation hint UI ---
        function setSelectionToReservationTables(r){
            selected.clear();
            (r.table_ids || []).map(Number).forEach(id => selected.add(id));
            updateSelectedUi();
        }

        function showReservationInHint(r){
            setSelectionToReservationTables(r);

            const time = r.expected_arrival_time ? String(r.expected_arrival_time).slice(0,5) : '-';
            const tbls = (r.table_ids || []).map(id => {
                const t = tables.find(x => Number(x.id) === Number(id));
                return t?.label ?? ('#'+id);
            }).join(', ');

            hint.innerHTML = `
                <div style="display:flex; align-items:flex-start; gap:10px;">
                    <div style="flex:1; min-width:0;">
                        <div class="text-white font-semibold">🪑 ${escapeHtml(tbls)}</div>
                        <div class="text-white/80 mt-1 text-xs" style="display:flex; gap:6px; flex-wrap:wrap;">
                            <span class="chip">⏰ ${escapeHtml(time)}</span>
                            <span class="chip">👥 ${escapeHtml(String(r.people_count ?? ''))}</span>
                            ${r.phone ? `<span class="chip">📞 ${escapeHtml(r.phone)}</span>` : ''}
                            ${r.locked_move ? `<span class="chip">🔒 Locked</span>` : ''}
                            ${(r.advance_amount && Number(r.advance_amount) > 0) ? `<span class="chip">💰 ${escapeHtml(String(r.advance_amount))}</span>` : ''}
                        </div>
                        <div class="text-white/90 mt-2 text-sm">
                            ${escapeHtml(r.guest_name ?? 'Reservation')}
                        </div>
                        <div class="mt-2" style="display:flex; gap:8px; flex-wrap:wrap;">
                            <button type="button" id="hintOpenRes" class="btn btn-secondary py-2 px-3">Open details</button>
                        </div>
                    </div>

                    <button type="button" id="hintClose" class="iconbtn" title="Close" style="width:36px;height:36px;border-radius:10px;">
                        <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M6 6l12 12"/><path d="M18 6L6 18"/>
                        </svg>
                    </button>
                </div>
            `;

            const closeBtn = document.getElementById('hintClose');
            if (closeBtn) closeBtn.addEventListener('click', () => clearSelectionAndHint());

            const openBtn = document.getElementById('hintOpenRes');
            if (openBtn) openBtn.addEventListener('click', () => {
                clearSelectionAndHint();
                openReservationDetails(r);
            });
        }

        function openReservationDetails(r){
            const time = r.expected_arrival_time ? String(r.expected_arrival_time).slice(0,5) : '-';
            const tbls = (r.table_ids || []).map(id => {
                const t = tables.find(x => Number(x.id) === Number(id));
                return t?.label ?? ('#'+id);
            }).join(', ');

            const html = `
                <div class="card">
                    <div class="text-white font-semibold text-base">${escapeHtml(r.guest_name ?? 'Reservation')}</div>
                    <div class="mt-2 flex flex-wrap gap-2">
                        <span class="chip">⏰ ${escapeHtml(time)}</span>
                        <span class="chip">👥 ${escapeHtml(String(r.people_count ?? ''))}</span>
                        <span class="chip">📞 ${escapeHtml(r.phone ?? '')}</span>
                    </div>
                    <div class="mt-2 text-white/80 text-sm">🪑 ${escapeHtml(tbls)}</div>
                    <div class="mt-3 flex flex-wrap gap-2">
                        ${r.locked_move ? '<span class="chip">🔒 Locked</span>' : ''}
                        ${r.is_seated ? '<span class="chip">✅ Seated</span>' : '<span class="chip">🕒 Expected</span>'}
                        ${(r.advance_amount && Number(r.advance_amount) > 0) ? '<span class="chip">💰 Advance</span>' : ''}
                    </div>
                </div>
            `;
            openSheet('Reservation', html);
        }

        function openReservationsList(){
            if (!reservationGroups.length){
                openSheet('Reservations', `<div class="text-white/80 text-sm">No reservations for this date.</div>`);
                return;
            }

            const html = reservationGroups.map(r => {
                const time = r.expected_arrival_time ? String(r.expected_arrival_time).slice(0,5) : '-';
                const tbls = (r.table_ids || []).map(id => {
                    const t = tables.find(x => Number(x.id) === Number(id));
                    return t?.label ?? ('#'+id);
                }).join(', ');

                return `
                    <div class="card" style="margin-bottom:10px;">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="text-white font-semibold">${escapeHtml(r.guest_name ?? 'Reservation')}</div>
                                <div class="text-xs text-white/70 mt-1">⏰ ${escapeHtml(time)} • 👥 ${escapeHtml(String(r.people_count ?? ''))}</div>
                                <div class="text-xs text-white/70 mt-1">🪑 ${escapeHtml(tbls)}</div>
                            </div>
                            <button class="iconbtn iconbtn-indigo" type="button" data-open="${r.id}" title="Open">
                                <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M9 18l6-6-6-6"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                `;
            }).join('');

            openSheet('Reservations', html);

            sheetBody.querySelectorAll('[data-open]').forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = Number(btn.dataset.open);
                    const r = reservationGroups.find(x => Number(x.id) === id);
                    if (r) openReservationDetails(r);
                });
            });
        }

        function makeNode(t) {
            const el = document.createElement('div');
            el.className = 'tblnode';
            el.dataset.id = t.id;

            const x = parseInt(t.x ?? 20, 10);
            const y = parseInt(t.y ?? 20, 10);
            const w = parseInt(t.w ?? 60, 10);
            const h = parseInt(t.h ?? 60, 10);
            const r = parseInt(t.rotation ?? 0, 10);

            el.style.left = x + 'px';
            el.style.top  = y + 'px';
            el.style.width  = w + 'px';
            el.style.height = h + 'px';
            el.style.transform = `rotate(${r}deg)`;

            const res = findReservationForTable(t.id);

            if (res && res.is_seated) el.style.background = 'rgba(16,185,129,0.85)';
            else el.style.background = 'rgba(0,0,0,0.75)';

            if (t.waiter_color) {
                el.style.boxShadow = `0 0 0 4px ${t.waiter_color}, 0 10px 22px rgba(0,0,0,0.40)`;
            }

            applyShape(el, t.shape);

            if (res) {
                const time = res.expected_arrival_time || '--:--';
                const name = (res.guest_name || '').trim();
                const people = res.people_count ?? '';
                const lock = res.locked_move ? ' 🔒' : '';
                const adv = (res.advance_amount && Number(res.advance_amount) > 0) ? ' 💰' : '';

                el.innerHTML = `
                    <div style="text-align:center; line-height:1.05; padding:2px;">
                        <div style="font-weight:800;">${escapeHtml(t.label || ('T'+t.id))}${lock}${adv}</div>
                        <div style="font-size:11px; opacity:.95;">${escapeHtml(time)} • ${escapeHtml(String(people))}p</div>
                        <div style="font-size:11px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:${Math.max(40, w-6)}px;">
                            ${escapeHtml(name)}
                        </div>
                    </div>
                `;
            } else {
                el.textContent = t.label || ('T' + t.id);
            }

            // IMPORTANT: stop touch from becoming a viewport gesture
            el.addEventListener('touchstart', (e) => { e.stopPropagation(); }, { passive:false });
            el.addEventListener('touchmove', (e) => { e.stopPropagation(); }, { passive:false });

            el.addEventListener('pointerdown', (e) => { e.stopPropagation(); }, { passive:true });

            el.addEventListener('click', (e) => {
                e.stopPropagation();
                if (didDrag) return;

                const id = Number(t.id);
                const rr = findReservationForTable(id);

                if (rr) {
                    showReservationInHint(rr);
                    return;
                }

                if (selected.has(id)) selected.delete(id);
                else selected.add(id);
                updateSelectedUi();
            });

            return el;
        }

        function render() {
            overlay.innerHTML = '';
            syncLayersToImage();

            if (!Array.isArray(tables) || tables.length === 0) {
                hint.textContent = 'No tables found for this floorplan. Open Admin → Floorplans → Add/position tables.';
                drawReservationLinks();
                return;
            }

            tables.forEach(t => overlay.appendChild(makeNode(t)));
            updateSelectedUi();
            drawReservationLinks();
        }

        // ---------- AJAX ADD RESERVATION FORM ----------
        function openAddReservationForm() {
            if (selected.size === 0) {
                hint.textContent = 'Select table(s) first.';
                return;
            }

            const ids = Array.from(selected.values());
            const labels = ids.map(id => {
                const t = tables.find(x => Number(x.id) === Number(id));
                return t?.label ?? ('#'+id);
            });

            const html = `
                <form id="addResForm" class="card">
                    <div class="text-white font-semibold text-base">New reservation</div>
                    <div class="text-white/70 text-sm mt-1">
                        Tables: <span class="text-white">${escapeHtml(labels.join(', '))}</span>
                    </div>

                    <div style="height:12px;"></div>

                    <label class="f-label">Guest name *</label>
                    <input class="f-input" name="guest_name" required maxlength="120" placeholder="e.g. Ivan Petrov">

                    <div style="height:10px;"></div>

                    <div class="f-row">
                        <div>
                            <label class="f-label">Phone</label>
                            <input class="f-input" name="phone" maxlength="40" placeholder="08... / +359...">
                        </div>
                        <div>
                            <label class="f-label">People *</label>
                            <input class="f-input" name="people_count" type="number" min="1" max="50" required value="2">
                        </div>
                    </div>

                    <div style="height:10px;"></div>

                    <div class="f-row">
                        <div>
                            <label class="f-label">Arrival time</label>
                            <input class="f-input" name="expected_arrival_time" type="time">
                        </div>
                        <div>
                            <label class="f-label">Advance (BGN)</label>
                            <input class="f-input" name="advance_amount" type="number" min="0" step="0.01" placeholder="0">
                        </div>
                    </div>

                    <div style="height:10px;"></div>

                    <label class="chip" style="cursor:pointer;">
                        <input type="checkbox" name="locked_move" value="1" style="margin-right:8px;">
                        🔒 Lock tables (prevent moving)
                    </label>

                    <div style="height:14px;"></div>

                    <div style="display:flex; gap:10px; flex-wrap:wrap;">
                        <button id="btnCreateRes" type="submit" class="btn btn-primary" style="flex:1; min-width:180px;">
                            Create reservation
                        </button>
                        <button type="button" class="btn btn-secondary" id="cancelAdd" style="flex:1; min-width:180px;">
                            Cancel
                        </button>
                    </div>

                    <div id="addResErr" class="text-sm text-red-300 mt-3" style="display:none;"></div>
                </form>
            `;

            openSheet('Add reservation', html);

            document.getElementById('cancelAdd').addEventListener('click', closeSheet);

            const form = document.getElementById('addResForm');
            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const btn = document.getElementById('btnCreateRes');
                const err = document.getElementById('addResErr');
                err.style.display = 'none';
                err.textContent = '';
                btn.disabled = true;

                try {
                    const fd = new FormData(form);
                    fd.append('date', currentDate);
                    fd.append('floorplan_id', String(currentFloorplanId));
                    Array.from(selected.values()).forEach(id => fd.append('table_ids[]', String(id)));

                    const res = await fetch(storeUrl, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json',
                        },
                        body: fd
                    });

                    if (!res.ok) {
                        let msg = 'Failed to create reservation.';
                        try {
                            const j = await res.json();
                            if (j?.message) msg = j.message;
                            if (j?.errors) {
                                msg += "\n" + Object.values(j.errors).flat().join("\n");
                            }
                        } catch (_) {}
                        throw new Error(msg);
                    }

                    const j = await res.json();
                    if (!j || !j.ok) throw new Error('Server did not confirm success.');

                    closeSheet();
                    clearSelectionAndHint();
                    hint.textContent = 'Reservation created ✅';

                    const url = new URL(window.location.href);
                    url.searchParams.set('date', currentDate);
                    window.location.href = url.toString();
                } catch (ex) {
                    err.textContent = String(ex.message || ex);
                    err.style.display = 'block';
                    btn.disabled = false;
                }
            });
        }

        // =========================
        // ✅ PAN/ZOOM (FIXED MOBILE)
        // =========================
        let mousePanning = false;
        let panStartX = 0, panStartY = 0;
        let panOriginX = 0, panOriginY = 0;

        // Touch gesture state
        let touchMode = 'none'; // 'none' | 'pan' | 'pinch'
        let tPanStart = { x:0, y:0 };
        let tPanOrigin = { x:0, y:0 };
        let tPinchStartDist = 0;
        let tPinchStartScale = 1;
        let tPinchStartPan = { x:0, y:0 };
        let tPinchMid = { x:0, y:0 };

        function dist(p1, p2){
            const dx = p1.x - p2.x, dy = p1.y - p2.y;
            return Math.hypot(dx, dy);
        }
        function mid(p1, p2){
            return { x:(p1.x+p2.x)/2, y:(p1.y+p2.y)/2 };
        }
        function ptFromTouch(t){
            const rect = viewport.getBoundingClientRect();
            return { x: t.clientX - rect.left, y: t.clientY - rect.top };
        }

        // ---- Desktop mouse pan
        viewport.addEventListener('pointerdown', (e) => {
            if (uiOpen) return;
            if (e.pointerType !== 'mouse') return;
            if (e.target && e.target.closest && e.target.closest('.tblnode')) return;

            didDrag = false;
            mousePanning = true;
            panStartX = e.clientX;
            panStartY = e.clientY;
            panOriginX = panX;
            panOriginY = panY;
            viewport.setPointerCapture(e.pointerId);
        });

        viewport.addEventListener('pointermove', (e) => {
            if (!mousePanning) return;
            const dx = e.clientX - panStartX;
            const dy = e.clientY - panStartY;
            if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didDrag = true;
            panX = panOriginX + dx;
            panY = panOriginY + dy;
            setTransform();
        });

        viewport.addEventListener('pointerup', () => {
            mousePanning = false;
            setTimeout(() => { didDrag = false; }, 0);
        });

        // ---- Mouse wheel zoom
        viewport.addEventListener('wheel', (e) => {
            if (uiOpen) return;
            e.preventDefault();

            const rect = viewport.getBoundingClientRect();
            const mx = e.clientX - rect.left;
            const my = e.clientY - rect.top;

            const prevScale = scale;
            const delta = e.deltaY > 0 ? 0.9 : 1.1;
            scale = clamp(scale * delta, MIN_SCALE, MAX_SCALE);

            panX = mx - (mx - panX) * (scale / prevScale);
            panY = my - (my - panY) * (scale / prevScale);
            setTransform();
        }, { passive:false });

        // ---- Touch pan + pinch (real pinch zoom)
        viewport.addEventListener('touchstart', (e) => {
            if (uiOpen) return;

            // If touching a table, let the click logic handle it (don’t start viewport gesture)
            if (e.target && e.target.closest && e.target.closest('.tblnode')) return;

            if (e.touches.length === 1) {
                // Start 1-finger pan
                e.preventDefault();
                didDrag = false;
                touchMode = 'pan';
                const p = ptFromTouch(e.touches[0]);
                tPanStart = p;
                tPanOrigin = { x: panX, y: panY };
            } else if (e.touches.length === 2) {
                // Start pinch (cancel any pan)
                e.preventDefault();
                didDrag = true;
                touchMode = 'pinch';

                const p1 = ptFromTouch(e.touches[0]);
                const p2 = ptFromTouch(e.touches[1]);
                tPinchStartDist = dist(p1, p2);
                tPinchStartScale = scale;
                tPinchStartPan = { x: panX, y: panY };
                tPinchMid = mid(p1, p2);
            }
        }, { passive:false });

        viewport.addEventListener('touchmove', (e) => {
            if (uiOpen) return;
            if (e.target && e.target.closest && e.target.closest('.tblnode')) return;

            if (touchMode === 'pan' && e.touches.length === 1) {
                e.preventDefault();
                const p = ptFromTouch(e.touches[0]);
                const dx = p.x - tPanStart.x;
                const dy = p.y - tPanStart.y;
                if (Math.abs(dx) > 2 || Math.abs(dy) > 2) didDrag = true;
                panX = tPanOrigin.x + dx;
                panY = tPanOrigin.y + dy;
                setTransform();
                return;
            }

            if (e.touches.length === 2) {
                e.preventDefault();
                didDrag = true;
                touchMode = 'pinch';

                const p1 = ptFromTouch(e.touches[0]);
                const p2 = ptFromTouch(e.touches[1]);
                const d = dist(p1, p2);
                const m = mid(p1, p2);

                const factor = d / (tPinchStartDist || d);
                const newScale = clamp(tPinchStartScale * factor, MIN_SCALE, MAX_SCALE);

                // Anchor zoom to pinch midpoint
                scale = newScale;
                panX = m.x - (m.x - tPinchStartPan.x) * (scale / tPinchStartScale);
                panY = m.y - (m.y - tPinchStartPan.y) * (scale / tPinchStartScale);

                setTransform();
                return;
            }
        }, { passive:false });

        viewport.addEventListener('touchend', (e) => {
            // Tap empty space => clear selection + close hint
            if (!didDrag) {
                clearSelectionAndHint();
            }

            if (e.touches.length === 0) {
                touchMode = 'none';
                setTimeout(() => { didDrag = false; }, 0);
            } else if (e.touches.length === 1) {
                // If pinch ended and one finger remains, continue panning smoothly
                touchMode = 'pan';
                const p = ptFromTouch(e.touches[0]);
                tPanStart = p;
                tPanOrigin = { x: panX, y: panY };
            }
        }, { passive:false });

        // Buttons
        document.getElementById('btnFit').addEventListener('click', () => fitToScreen());
        document.getElementById('btnClear').addEventListener('click', () => clearSelectionAndHint());
        document.getElementById('btnList').addEventListener('click', () => openReservationsList());
        document.getElementById('btnAdd').addEventListener('click', () => openAddReservationForm());

        // Desktop: click empty => clear
        viewport.addEventListener('click', (e) => {
            if (uiOpen) return;
            if (didDrag) return;
            if (e.target && e.target.closest && e.target.closest('.tblnode')) return;
            clearSelectionAndHint();
        });

        function renderAll(){
            render();
            requestAnimationFrame(() => {
                fitToScreen();
                requestAnimationFrame(() => fitToScreen());
            });
        }

        async function init() {
            try {
                if (img.decode) await img.decode();
                else if (!img.complete) await new Promise((res) => img.addEventListener('load', res, { once: true }));
            } catch (_) {}

            renderAll();
        }

        init();
        window.addEventListener('resize', () => requestAnimationFrame(() => fitToScreen()));
    </script>
</x-app-layout>