@extends('layouts.public')

@section('title', 'Kitchen orders')

@push('head')
    <style>
        body {
            background: var(--soft);
        }

        .board-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 28px;
        }

        .cols {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .col h3 {
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .ticket {
            background: #fff;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ticket.fresh {
            border: 2px solid var(--accent);
        }

        .ticket .top {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        .ticket .top strong {
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: 24px;
        }

        .note {
            font-size: 13px;
            background: #FBE7D3;
            border-radius: 8px;
            padding: 8px 10px;
        }

        .go {
            height: 48px;
            border-radius: 24px;
            border: 0;
            width: 100%;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            cursor: pointer;
        }

        .go:disabled {
            opacity: .6;
        }

        .ticket {
            transition: opacity .2s, filter .2s;
        }

        .ticket.sending {
            opacity: .55;
            pointer-events: none;
        }

        .go {
            transition: transform .1s, opacity .2s;
        }

        .go:active {
            transform: scale(.97);
        }

        .list:empty+.empty {
            display: block;
        }

        .empty {
            display: none;
        }
        
        .tables-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-top:12px; }
.tbl { background:#fff; border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; border:2px solid transparent; }
.tbl.is-open { border-color:var(--green); }
.tbl-top { display:flex; flex-direction:column; gap:2px; }
.tbl-top strong { font-size:16px; }
.tbl-state { font-size:12px; font-weight:700; color:#8a8f8c; }
.tbl.is-open .tbl-state { color:var(--green); }
.tbl-actions { display:flex; gap:6px; }
.tbl-actions form { flex:1; margin:0; }
.tbl-btn { width:100%; height:36px; border:0; border-radius:18px; font-weight:700; font-size:13px; cursor:pointer; }
.tbl-btn.green { background:var(--green); color:#fff; }
.tbl-btn.dark  { background:var(--ink); color:#fff; }
.tbl-btn.light { background:#E7ECE8; color:var(--ink); }
.tbl-btn:disabled { opacity:.6; }

        /* ── Top bar / nav ───────────────────────────────────────── */
        .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
        .topbar h1 { font-size: 28px; margin: 0; }
        .topbar-right { display: flex; align-items: center; gap: 16px; }
        .open-pill { font-weight: 700; color: var(--muted, #6b726e); white-space: nowrap; }
        .nav { display: flex; align-items: center; gap: 8px; }
        .nav-link, .nav-out {
            height: 40px; padding: 0 16px; border-radius: 20px; border: 0; cursor: pointer;
            background: #fff; color: #17211B; font-weight: 700; font-size: 14px;
            display: inline-flex; align-items: center; text-decoration: none; font-family: inherit;
        }
        .nav-out { background: #17211B; color: #fff; }
        .nav-form { margin: 0; }
        .menu-btn { display: none; }

        @media (max-width: 720px) {
            .board-wrap { padding: 16px; }
            .topbar h1 { font-size: 22px; }
            .topbar-right { gap: 10px; }
            .open-pill {
                background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; color: #17211B;
            }

            .menu-btn {
                display: inline-flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
                background: #17211B; color: #fff;
            }
            .menu-btn .ico-close { display: none; }
            .menu-btn[aria-expanded="true"] .ico-open { display: none; }
            .menu-btn[aria-expanded="true"] .ico-close { display: block; }

            .nav {
                display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 20;
                flex-direction: column; align-items: stretch; gap: 0;
                background: #fff; border-radius: 18px; padding: 6px;
                box-shadow: 0 12px 32px rgba(23, 33, 27, .18);
            }
            .nav.open { display: flex; animation: navIn .18s cubic-bezier(.2, .8, .2, 1); }
            .nav-link {
                height: 52px; border-radius: 12px; padding: 0 14px; font-size: 16px;
                background: transparent; justify-content: space-between;
            }
            .nav-link::after { content: '›'; font-size: 22px; color: #8a8f8c; }
            .nav-link:active { background: var(--soft, #F3F5F2); }
            .nav-link + .nav-link { border-top: 1px solid #EEF1EE; }
            .nav-form { margin-top: 6px; }
            .nav-out { width: 100%; height: 52px; border-radius: 26px; justify-content: center; font-size: 16px; }

            .cols { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
            .tables-grid { grid-template-columns: repeat(2, 1fr); }
            .ticket .top strong { font-size: 22px; }
        }
        @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .nav.open { animation: none; } }
    </style>
@endpush

@section('content')
    <div class="board-wrap">
        <header class="topbar">
            <h1>Kitchen orders</h1>
            <div class="topbar-right">
                <span id="openCount" class="open-pill">{{ $orders->flatten()->count() }} open</span>
                <button type="button" id="navBtn" class="menu-btn" aria-expanded="false" aria-controls="navMenu" aria-label="Menu">
                    <svg class="ico-open" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
                    <svg class="ico-close" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                </button>
                <nav id="navMenu" class="nav" aria-label="Kitchen menu">
                    <a class="nav-link" href="{{ route('admin.menu.index') }}">Menu items</a>
                    <a class="nav-link" href="{{ route('tables.qr') }}">QR cards</a>
                    <a class="nav-link" href="{{ route('admin.sessions.index') }}">History</a>
                    <a class="nav-link" href="{{ route('admin.shop.edit') }}">Shop location</a>
                    <form method="POST" action="{{ route('logout') }}" class="nav-form">
                        @csrf
                        <button type="submit" class="nav-out">Log out</button>
                    </form>
                </nav>
            </div>
        </header>

        <h2 style="font-size:20px;margin-top:24px">Tables</h2>
<div id="tables">
    @include('kitchen-tables')
</div>
        <div id="board">
            @include('kitchen-board')
        </div>
    </div>

    <script>
        const board = document.getElementById('board');
        const BOARD_URL = @json(route('kitchen.board'));
        const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
        const EASE = 'cubic-bezier(.2,.8,.2,1)';
        let busy = false;

        function animate(el, frames, ms) {
            if (!reduce) el.animate(frames, {
                duration: ms,
                easing: EASE
            });
        }

        function updateEmpty() {
            board.querySelectorAll('.col').forEach(col => {
                const has = col.querySelector('.list').children.length > 0;
                col.querySelector('.empty').style.display = has ? 'none' : 'block';
            });
        }

        function reconcile(html) {
            const doc = new DOMParser().parseFromString(html, 'text/html');
            const incoming = [...doc.querySelectorAll('.ticket')];
            const incomingIds = new Set(incoming.map(t => t.dataset.id));
            const existing = new Map([...board.querySelectorAll('.ticket')].map(t => [t.dataset.id, t]));

            // FIRST: where everything is now
            const first = new Map();
            existing.forEach((el, id) => first.set(id, el.getBoundingClientRect()));

            // Finished orders: fade out a ghost copy, remove the real one
            existing.forEach((el, id) => {
                if (incomingIds.has(id)) return;
                if (!reduce) {
                    const r = first.get(id);
                    const ghost = el.cloneNode(true);
                    Object.assign(ghost.style, {
                        position: 'fixed',
                        left: r.left + 'px',
                        top: r.top + 'px',
                        width: r.width + 'px',
                        margin: 0,
                        pointerEvents: 'none',
                        zIndex: 5,
                    });
                    document.body.appendChild(ghost);
                    ghost.animate(
                        [{
                            opacity: 1,
                            transform: 'scale(1)'
                        }, {
                            opacity: 0,
                            transform: 'scale(.96)'
                        }], {
                            duration: 250,
                            easing: EASE
                        }
                    ).onfinish = () => ghost.remove();
                }
                el.remove();
                existing.delete(id);
            });

            // Update / insert / reorder, column by column
            const counters = {};
            incoming.forEach(t => {
                const status = t.dataset.status;
                const list = board.querySelector(`.col[data-status="${status}"] .list`);
                const idx = counters[status] = (counters[status] ?? -1) + 1;
                let el = existing.get(t.dataset.id);

                if (el) {
                    el.querySelector('.age').textContent = t.querySelector('.age').textContent;
                    if (el.dataset.sig !== t.dataset.sig) { // status changed: swap content only
                        el.innerHTML = t.innerHTML;
                        el.className = t.className;
                        el.dataset.sig = t.dataset.sig;
                        el.dataset.status = status;
                    }
                } else {
                    el = document.importNode(t, true);
                    el.dataset.isNew = '1';
                }

                if (list.children[idx] !== el) list.insertBefore(el, list.children[idx] || null);
            });

            // LAST + PLAY: slide moved tickets, fade in new ones
            board.querySelectorAll('.ticket').forEach(el => {
                const f = first.get(el.dataset.id);
                if (!f) {
                    animate(el, [{
                            opacity: 0,
                            transform: 'translateY(-10px) scale(.97)'
                        },
                        {
                            opacity: 1,
                            transform: 'none'
                        }
                    ], 350);
                    delete el.dataset.isNew;
                    return;
                }
                const l = el.getBoundingClientRect();
                const dx = f.left - l.left,
                    dy = f.top - l.top;
                if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
                    animate(el, [{
                        transform: `translate(${dx}px, ${dy}px)`
                    }, {
                        transform: 'none'
                    }], 350);
                }
            });

            updateEmpty();
            const total = doc.getElementById('openTotal');
            if (total) document.getElementById('openCount').textContent = total.value + ' open';
        }

        async function refreshBoard() {
            if (busy || document.hidden) return;
            busy = true;
            try {
                const res = await fetch(BOARD_URL, {
                    cache: 'no-store',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                });
                if (res.redirected) {
                    location.reload();
                    return;
                } // session expired
                if (res.ok) reconcile(await res.text());
            } catch (e) {
                /* offline: try again next tick */ } finally {
                busy = false;
            }
        }

        board.addEventListener('submit', async (e) => {
            e.preventDefault();
            const form = e.target;
            const ticket = form.closest('.ticket');
            ticket.classList.add('sending');
            busy = true;
            try {
                const res = await fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                });
                if (!res.ok) throw new Error();
            } catch (err) {
                ticket.classList.remove('sending');
                alert('Could not update the order. Please try again.');
            } finally {
                busy = false;
                refreshBoard();
            }
        });

        updateEmpty();
        setInterval(refreshBoard, 4000);
        document.addEventListener('visibilitychange', refreshBoard);

        // ── Mobile nav menu ─────────────────────────────────────────
        const navBtn = document.getElementById('navBtn');
        const nav = document.getElementById('navMenu');

        function setNav(open) {
            nav.classList.toggle('open', open);
            navBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
        }
        navBtn.addEventListener('click', () => setNav(!nav.classList.contains('open')));
        document.addEventListener('click', e => { if (!e.target.closest('.topbar')) setNav(false); });
        document.addEventListener('keydown', e => { if (e.key === 'Escape') setNav(false); });
        matchMedia('(min-width: 721px)').addEventListener('change', () => setNav(false));
        
        
        
        
        const tablesBox = document.getElementById('tables');
const TABLES_URL = @json(route('kitchen.tables'));
let tablesBusy = false;

async function refreshTables() {
    if (tablesBusy || document.hidden) return;
    tablesBusy = true;
    try {
        const res = await fetch(TABLES_URL, { cache: 'no-store', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
        if (res.redirected) { location.reload(); return; }
        if (res.ok) tablesBox.innerHTML = await res.text();
    } catch (e) { /* try again next tick */ }
    finally { tablesBusy = false; }
}

tablesBox.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    form.querySelector('button').disabled = true;
    tablesBusy = true;
    try {
        const res = await fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        });
        if (!res.ok) throw new Error();
    } catch (err) {
        alert('Could not update the table. Please try again.');
    } finally {
        tablesBusy = false;
        refreshTables();
    }
});

setInterval(refreshTables, 10000);
document.addEventListener('visibilitychange', refreshTables);
        
        
        
        
    </script>
@endsection