@extends('Billing.layout')

@php
    $billLogoBase64 = '';
    $logoPath = public_path('assets/img/bill_logo.png');
    if (file_exists($logoPath)) {
        $billLogoBase64 = 'data:image/png;base64,' . base64_encode(file_get_contents($logoPath));
    }
@endphp

@section('content')

    {{-- ── Self-contained toast ── --}}
    <style>
        .kot-toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 99999;
        }

        .kot-toast {
            display: none;
            align-items: center;
            gap: 15px;
            min-width: 300px;
            max-width: 380px;
            padding: 16px 18px;
            border-radius: 14px;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .kot-toast-success {
            background: linear-gradient(135deg, #10b981, #059669);
        }

        .kot-toast-error {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }

        .kot-toast-icon {
            font-size: 22px;
            font-weight: bold;
        }

        .kot-toast-content {
            flex: 1;
        }

        .kot-toast-title {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .kot-toast-message {
            font-size: 13px;
            opacity: 0.95;
        }

        .kot-toast-close {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

        .kot-toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: rgba(255, 255, 255, 0.6);
        }

        @keyframes kotSlideIn {
            from {
                transform: translateX(120%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes kotFadeOut {
            to {
                opacity: 0;
                transform: translateX(120%);
            }
        }

        @keyframes kotProgressBar {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }
    </style>

    <div class="kot-toast-container">
        <div id="kotLiveToast" class="kot-toast">
            <div class="kot-toast-icon" id="kotToastIcon"></div>
            <div class="kot-toast-content">
                <div class="kot-toast-title" id="kotToastTitle"></div>
                <div class="kot-toast-message" id="kotToastMessage"></div>
            </div>
            <button class="kot-toast-close" onclick="closeKotToast()">&times;</button>
            <div class="kot-toast-progress" id="kotToastProgress"></div>
        </div>
    </div>

    <script>
        function showKotToast(type, message) {
            const toast = document.getElementById('kotLiveToast');
            const icon = document.getElementById('kotToastIcon');
            const title = document.getElementById('kotToastTitle');
            const msg = document.getElementById('kotToastMessage');
            const progress = document.getElementById('kotToastProgress');

            toast.classList.remove('kot-toast-success', 'kot-toast-error');
            if (type === 'success') {
                toast.classList.add('kot-toast-success');
                icon.textContent = '✓';
                title.textContent = 'Success';
            } else {
                toast.classList.add('kot-toast-error');
                icon.textContent = '⚠';
                title.textContent = 'Notice';
            }

            msg.textContent = message;
            toast.style.animation = 'none';
            progress.style.animation = 'none';
            void toast.offsetWidth;

            toast.style.display = 'flex';
            toast.style.animation = 'kotSlideIn 0.4s ease, kotFadeOut 0.4s ease 3s forwards';
            progress.style.animation = 'kotProgressBar 3s linear forwards';

            clearTimeout(window._kotToastTimer);
            window._kotToastTimer = setTimeout(() => { toast.style.display = 'none'; }, 3400);
        }

        function closeKotToast() {
            const toast = document.getElementById('kotLiveToast');
            toast.style.animation = 'kotFadeOut 0.3s forwards';
            setTimeout(() => { toast.style.display = 'none'; }, 300);
        }
    </script>

    <div id="kot-app">

        {{-- ======================================================== --}}
        {{-- VIEW 1: TABLES VIEW (SCREEN 1) --}}
        {{-- ======================================================== --}}
        <div id="tablesView">
            <div class="kot-page-header">
                <h2 class="kot-heading">Select a Table</h2>
                <p class="kot-subheading">Choose a free table or open an occupied table.</p>
            </div>
            <div id="tablesGrid" class="kot-grid">
                <p class="kot-muted">Loading tables…</p>
            </div>
        </div>

        {{-- ======================================================== --}}
        {{-- VIEW 2: PERSONS VIEW (SCREEN 2) --}}
        {{-- ======================================================== --}}
        <div id="personsView" class="kot-hidden">
            <div class="kot-subpage-header">
                <div class="kot-subpage-left">
                    <button type="button" class="kot-circle-back-btn" onclick="backToTables()">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 12H5" />
                            <path d="M12 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <div class="kot-table-title-wrap">
                        <div class="kot-title-row">
                            <span class="kot-table-icon-svg">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 18v3M20 18v3M4 10h16M2 14h20M5 10V5a2 2 0 012-2h10a2 2 0 012 2v5" />
                                </svg>
                            </span>
                            <h2 id="personsViewTitle" class="kot-heading">Table</h2>
                        </div>
                        <p class="kot-subheading" style="margin-bottom:0;">Separate bills for each person</p>
                    </div>
                </div>

                <div class="kot-person-badge-pill" id="tablePersonCountBadge">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
                        <circle cx="9" cy="7" r="4" />
                        <path d="M23 21v-2a4 4 0 00-3-3.87" />
                        <path d="M16 3.13a4 4 0 010 7.75" />
                    </svg>
                    <span id="tablePersonCountText">0 Persons</span>
                </div>
            </div>

            <div id="personsGrid" class="kot-persons-grid">
                {{-- Injected dynamically --}}
            </div>
        </div>

        {{-- ======================================================== --}}
        {{-- VIEW 3: ORDER VIEW (SCREEN 3) --}}
        {{-- ======================================================== --}}
        <div id="orderView" class="kot-hidden">

            {{-- Top row: back button, table+person title, and products/bill tabs --}}
            <div class="kot-order-header-row">
                <div class="kot-order-left">
                    <button type="button" class="kot-circle-back-btn" onclick="backToPersons()">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 12H5" />
                            <path d="M12 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <div>
                        <h2 id="orderViewTitle" class="kot-heading">Table 0</h2>
                        <span id="orderViewPersonBadge" class="kot-person-tag">Person 1</span>
                    </div>
                </div>

                <div class="kot-tabs">
                    <button type="button" class="kot-tab-btn active" data-tab="products" onclick="switchTab('products')">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
                        </svg>
                        Products
                    </button>
                    <button type="button" class="kot-tab-btn" data-tab="bill" onclick="switchTab('bill')">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
                            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
                        </svg>
                        Bill
                    </button>
                </div>
            </div>

            {{-- ---- Products tab ---- --}}
            <div id="tab-products">
                <div class="kot-search-wrap">
                    <span class="kot-search-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8" />
                            <path d="M21 21l-4.35-4.35" />
                        </svg>
                    </span>
                    <input type="text" id="productSearch" class="kot-search-input"
                        placeholder="Search products or code… (F1)">
                </div>

                <div id="productList" class="kot-product-list"></div>

                <div id="draftBar" class="kot-draft-bar kot-hidden">
                    <span id="draftCount">0 items</span>
                    <button type="button" class="kot-draft-add-btn" onclick="addDraftToBill()">
                        Add to Bill · <span id="draftTotal">₹0.00</span>
                    </button>
                </div>
            </div>

            {{-- ---- Bill tab ---- --}}
            <div id="tab-bill" class="kot-hidden">
                <div class="kot-section">
                    <div class="kot-section-header-row">
                        <h4 class="kot-section-title kot-kitchen-title" style="margin-bottom:0;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 6h18M3 12h18M3 18h18" />
                            </svg>
                            Sent to kitchen / juice <span class="kot-badge kot-badge-kitchen" id="sentCartCount">0</span>
                        </h4>
                        <div class="kot-bill-header-row" style="margin-bottom:0;">
                            <button type="button" class="kot-mini-btn" onclick="openDiscountModal()">Discount</button>
                            <button type="button" class="kot-mini-btn" onclick="openChargeModal()">Charge</button>
                        </div>
                    </div>
                    <div id="sentItemsList" class="kot-kitchen-box">
                        <p class="kot-muted">Nothing sent yet.</p>
                    </div>
                </div>

                <div class="kot-section">
                    <h4 class="kot-section-title">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                        </svg>
                        New items <span class="kot-badge" id="newCartCount">0</span>
                    </h4>
                    <p class="kot-hint">Fast food items automatically go to the Kitchen printer and Juice/Drinks go to the
                        Juice printer. <i>Tick [✓] only if an item does not need to go to any printer.</i></p>
                    <div id="newCartList" class="kot-new-items-box">
                        <p class="kot-muted">No items added.</p>
                    </div>
                </div>

                <div class="kot-section">
                    <h4 class="kot-section-title">Payment Mode</h4>
                    <select id="paymentMode" class="form-select kot-input">
                        <option value="cash" selected>Cash</option>
                        <option value="credit">Credit</option>
                        <option value="card">Card</option>
                        <option value="upi">UPI</option>
                    </select>
                </div>

                <div class="kot-summary">
                    <div class="kot-summary-row"><span>Subtotal</span><span id="sumSubtotal">₹0.00</span></div>
                    <div class="kot-summary-row"><span>GST</span><span id="sumGst">₹0.00</span></div>
                    <div class="kot-summary-row kot-hidden" id="sumDiscountRow"><span>Discount</span><span id="sumDiscount"
                            style="color:#16a34a;">− ₹0.00</span></div>
                    <div class="kot-summary-row kot-hidden" id="sumChargeRow"><span>Charge</span><span id="sumCharge"
                            style="color:#ea580c;">+ ₹0.00</span></div>
                    <div class="kot-summary-row kot-summary-total"><span>Total</span><span id="sumTotal">₹0.00</span></div>
                </div>

                <div class="kot-field kot-staff-field">
                    <label for="staffDropdownBtn">Staff (F3)</label>
                    <button type="button" id="staffDropdownBtn" class="kot-input kot-staff-dropdown-btn"
                        onclick="toggleStaffDropdown()">
                        <span id="staffDropdownLabel">Select staff…</span>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M6 9l6 6 6-6" />
                        </svg>
                    </button>
                    <div id="staffDropdownPanel" class="kot-staff-dropdown-panel kot-hidden"></div>
                    <input type="hidden" id="staffSelect" value="">
                </div>

                <button type="button" class="kot-btn-hold" onclick="openCustomerModal('hold')">Hold Table</button>
                <div class="kot-actions">
                    <button type="button" class="kot-btn kot-btn-kitchen" onclick="openCustomerModal('kitchen')">Kitchen
                        Bill</button>
                    <button type="button" class="kot-btn kot-btn-close" onclick="openCustomerModal('close')">Close Bill
                        (F2)</button>
                </div>
            </div>
        </div>

        {{-- ======================================================== --}}
        {{-- MODALS --}}
        {{-- ======================================================== --}}

        {{-- Close Bill Modal --}}
        <div id="closeBillModalBackdrop" class="kot-modal-backdrop kot-hidden"
            onclick="if(event.target===this)closeCloseBillModal()">
            <div class="kot-modal">
                <div class="kot-modal-header">
                    <h3>Close Bill for This Person</h3>
                    <button type="button" class="kot-modal-close" onclick="closeCloseBillModal()">&times;</button>
                </div>
                <div class="kot-modal-body">
                    <p style="margin:0;font-size:14px;color:#374151;">
                        Close this person's bill? This will finalize this person's orders and generate their receipt.
                    </p>
                    <p style="margin-top:8px;font-size:13px;color:#6b7280;">
                        Note: Other persons' orders on this table will remain active.
                    </p>
                </div>
                <div class="kot-modal-footer">
                    <button type="button" class="kot-btn kot-btn-secondary" onclick="closeCloseBillModal()">Cancel</button>
                    <button type="button" class="kot-btn kot-btn-close" onclick="confirmCloseBill()">Close Bill</button>
                </div>
            </div>
        </div>

        {{-- Delete Person Modal --}}
        <div id="deletePersonModalBackdrop" class="kot-modal-backdrop kot-hidden"
            onclick="if(event.target===this)closeDeletePersonModal()">
            <div class="kot-modal">
                <div class="kot-modal-header">
                    <h3 style="color:#dc2626;">Delete Person</h3>
                    <button type="button" class="kot-modal-close" onclick="closeDeletePersonModal()">&times;</button>
                </div>
                <div class="kot-modal-body">
                    <p style="margin:0;font-size:14px;color:#374151;" id="deletePersonPrompt">
                        Are you sure you want to delete this person and cancel all their pending orders?
                    </p>
                </div>
                <div class="kot-modal-footer">
                    <button type="button" class="kot-btn kot-btn-secondary"
                        onclick="closeDeletePersonModal()">Cancel</button>
                    <button type="button" class="kot-btn kot-btn-close" style="background:#dc2626;"
                        onclick="confirmDeletePerson()">Delete Person</button>
                </div>
            </div>
        </div>

        {{-- Remove Item Modal --}}
        <div id="removeItemModalBackdrop" class="kot-modal-backdrop kot-hidden"
            onclick="if(event.target===this)closeRemoveItemModal()">
            <div class="kot-modal">
                <div class="kot-modal-header">
                    <h3>Remove Item</h3>
                    <button type="button" class="kot-modal-close" onclick="closeRemoveItemModal()">&times;</button>
                </div>
                <div class="kot-modal-body">
                    <p style="margin:0;font-size:14px;color:#374151;">Remove this item from the order?</p>
                </div>
                <div class="kot-modal-footer">
                    <button type="button" class="kot-btn kot-btn-secondary" onclick="closeRemoveItemModal()">Cancel</button>
                    <button type="button" class="kot-btn kot-btn-close" onclick="confirmRemoveItem()"
                        style="background:#ef4444;">Remove</button>
                </div>
            </div>
        </div>

        {{-- Discount Modal --}}
        <div id="discountModalBackdrop" class="kot-modal-backdrop kot-hidden"
            onclick="if(event.target===this)closeDiscountModal()">
            <div class="kot-modal">
                <div class="kot-modal-header">
                    <h3>Add Discount</h3>
                    <button type="button" class="kot-modal-close" onclick="closeDiscountModal()">&times;</button>
                </div>
                <div class="kot-modal-body">
                    <div class="kot-field">
                        <label>Discount type</label>
                        <div class="kot-radio-row">
                            <label class="kot-radio-option">
                                <input type="radio" name="discountType" value="flat" checked> Flat (₹)
                            </label>
                            <label class="kot-radio-option">
                                <input type="radio" name="discountType" value="percentage"> Percentage (%)
                            </label>
                        </div>
                    </div>
                    <div class="kot-field">
                        <label for="discountAmount">Amount</label>
                        <input type="number" id="discountAmount" class="kot-input" min="0" step="0.01" placeholder="0">
                    </div>
                    <div class="kot-field">
                        <label for="discountOffer">Offer (optional)</label>
                        <input type="text" id="discountOffer" class="kot-input" placeholder="e.g. Diwali Offer">
                    </div>
                    <div class="kot-field">
                        <label for="discountReason">Reason (optional)</label>
                        <input type="text" id="discountReason" class="kot-input" placeholder="Enter reason (optional)">
                    </div>
                </div>
                <div class="kot-modal-footer">
                    <button type="button" class="kot-btn kot-btn-remove-link" id="discountRemoveBtn"
                        onclick="removeDiscount()">Remove</button>
                    <button type="button" class="kot-btn kot-btn-secondary" onclick="closeDiscountModal()">Cancel</button>
                    <button type="button" class="kot-btn kot-btn-primary" onclick="applyDiscount()">Apply Discount</button>
                </div>
            </div>
        </div>

        {{-- Charge Modal --}}
        <div id="chargeModalBackdrop" class="kot-modal-backdrop kot-hidden"
            onclick="if(event.target===this)closeChargeModal()">
            <div class="kot-modal">
                <div class="kot-modal-header">
                    <h3>Add Charge</h3>
                    <button type="button" class="kot-modal-close" onclick="closeChargeModal()">&times;</button>
                </div>
                <div class="kot-modal-body">
                    <div class="kot-field">
                        <label for="chargeAmount">Amount</label>
                        <input type="number" id="chargeAmount" class="kot-input" min="0" step="0.01" placeholder="0">
                    </div>
                    <div class="kot-field">
                        <label for="chargeReason">Reason</label>
                        <input type="text" id="chargeReason" class="kot-input" placeholder="Enter reason">
                    </div>
                </div>
                <div class="kot-modal-footer">
                    <button type="button" class="kot-btn kot-btn-remove-link" id="chargeRemoveBtn"
                        onclick="removeCharge()">Remove</button>
                    <button type="button" class="kot-btn kot-btn-secondary" onclick="closeChargeModal()">Cancel</button>
                    <button type="button" class="kot-btn kot-btn-primary" onclick="applyCharge()">Apply</button>
                </div>
            </div>
        </div>

        {{-- Customer Modal --}}
        <div id="customerModalBackdrop" class="kot-modal-backdrop kot-hidden"
            onclick="if(event.target===this)closeCustomerModal()">
            <div class="kot-modal">
                <div class="kot-modal-header">
                    <h3>Customer Details</h3>
                    <button type="button" class="kot-modal-close" onclick="closeCustomerModal()">&times;</button>
                </div>
                <div class="kot-modal-body">
                    <div class="kot-field">
                        <label for="customerNameInput">Name</label>
                        <input type="text" id="customerNameInput" class="kot-input" placeholder="Customer name (optional)">
                    </div>
                    <div class="kot-field">
                        <label for="customerPhoneInput">Phone</label>
                        <input type="text" id="customerPhoneInput" class="kot-input" placeholder="Phone number (optional)">
                    </div>
                </div>
                <div class="kot-modal-footer">
                    <button type="button" class="kot-btn kot-btn-secondary" onclick="closeCustomerModal()">Cancel</button>
                    <button type="button" class="kot-btn kot-btn-primary"
                        onclick="confirmCustomerDetails()">Continue</button>
                </div>
            </div>
        </div>

    </div>

    {{-- ======================================================== --}}
    {{-- CSS STYLES --}}
    {{-- ======================================================== --}}
    <style>
        #kot-app {
            max-width: 820px;
            margin: 0 auto;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: #1f2937;
        }

        .kot-heading {
            font-size: 24px;
            font-weight: 800;
            margin: 0;
            color: #111827;
            letter-spacing: -0.02em;
        }

        .kot-subheading {
            color: #6b7280;
            font-size: 14px;
            margin: 4px 0 20px;
        }

        .kot-muted {
            color: #9ca3af;
            font-size: 14px;
            text-align: center;
            padding: 20px;
        }

        .kot-hint {
            color: #9ca3af;
            font-size: 12px;
            margin: -4px 0 8px;
        }

        .kot-hidden {
            display: none !important;
        }

        /* ── Tables View Grid (Screen 1) ── */
        .kot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 16px;
        }

        .kot-table-card {
            border-radius: 16px;
            padding: 18px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 190px;
            cursor: pointer;
        }

        .kot-table-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .kot-table-card.occupied {
            background: #fffdf9;
            border: 1.5px solid #fed7aa;
        }

        .kot-table-card.free {
            background: #ffffff;
            border: 1.5px solid #e5e7eb;
        }

        .kot-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .kot-table-icon {
            color: #ea580c;
        }

        .kot-table-card.free .kot-table-icon {
            color: #10b981;
        }

        .kot-status-badge {
            font-size: 13px;
            font-weight: 700;
        }

        .kot-status-badge.occupied {
            color: #ea580c;
        }

        .kot-status-badge.free {
            color: #16a34a;
        }

        .kot-table-name {
            font-size: 20px;
            font-weight: 800;
            color: #111827;
            margin: 0 0 6px;
        }

        .kot-table-info {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 16px;
        }

        .kot-table-btn {
            width: 100%;
            border: none;
            border-radius: 10px;
            padding: 11px 0;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .kot-table-btn.free {
            background: #1d4ed8;
            color: #fff;
        }

        .kot-table-btn.free:hover {
            background: #1e40af;
        }

        .kot-table-link-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 700;
            font-size: 14px;
            color: #111827;
            padding: 8px 0;
        }

        /* ── Persons View (Screen 2) ── */
        .kot-subpage-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .kot-subpage-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .kot-circle-back-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: #f3f4f6;
            color: #374151;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.15s;
        }

        .kot-circle-back-btn:hover {
            background: #e5e7eb;
        }

        .kot-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .kot-person-badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #fef3c7;
            color: #92400e;
            font-size: 13px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 20px;
        }

        .kot-persons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 16px;
        }

        .kot-person-card {
            background: #fff;
            border: 1.5px solid #e5e7eb;
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            transition: all 0.15s;
        }

        .kot-person-card:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .kot-person-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .kot-person-info-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .kot-person-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #fef08a;
            color: #1f2937;
            font-weight: 800;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(254, 240, 138, 0.6);
        }

        .kot-person-meta-name {
            font-size: 16px;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        .kot-person-meta-sub {
            font-size: 13px;
            color: #6b7280;
            margin-top: 2px;
        }

        .kot-person-menu-btn {
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
        }

        .kot-person-menu-btn:hover {
            color: #374151;
            background: #f3f4f6;
        }

        .kot-person-view-btn {
            margin-top: 16px;
            width: 100%;
            background: #facc15;
            color: #111827;
            font-weight: 700;
            font-size: 14px;
            border: none;
            border-radius: 10px;
            padding: 11px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .kot-person-view-btn:hover {
            background: #eab308;
        }

        .kot-add-person-card {
            border: 2px dashed #cbd5e1;
            border-radius: 16px;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 155px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .kot-add-person-card:hover {
            border-color: #facc15;
            background: #fefce8;
            transform: translateY(-2px);
        }

        .kot-add-person-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: #facc15;
            color: #1e1e1e;
            font-size: 26px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(250, 204, 21, 0.4);
            margin-bottom: 8px;
        }

        .kot-add-person-label {
            font-size: 14px;
            font-weight: 700;
            color: #4b5563;
        }

        /* ── Order View (Screen 3) ── */
        .kot-order-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
        }

        .kot-order-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .kot-person-tag {
            display: inline-block;
            background: #fef3c7;
            color: #92400e;
            font-size: 12px;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 12px;
            margin-top: 2px;
        }

        .kot-tabs {
            display: inline-flex;
            gap: 4px;
            background: #f3f4f6;
            border-radius: 12px;
            padding: 4px;
        }

        .kot-tab-btn {
            border: none;
            background: none;
            padding: 8px 18px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            color: #6b7280;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s;
        }

        .kot-tab-btn.active {
            background: #facc15;
            color: #111827;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* ── Search Bar ── */
        .kot-search-wrap {
            position: relative;
            margin-bottom: 16px;
        }

        .kot-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            pointer-events: none;
        }

        .kot-search-input {
            width: 100%;
            box-sizing: border-box;
            background: #f9fafb;
            border: 1.5px solid #e5e7eb;
            border-radius: 12px;
            padding: 12px 16px 12px 42px;
            font-size: 15px;
            color: #111827;
            transition: all 0.15s;
        }

        .kot-search-input:focus {
            outline: none;
            background: #fff;
            border-color: #eab308;
            box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18);
        }

        /* ── Product List (Matching Image 3) ── */
        .kot-product-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: calc(100vh - 310px);
            min-height: 250px;
            overflow-y: auto;
            padding-right: 4px;
            padding-bottom: 6px;
        }

        .kot-product-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            background: #fff;
            border: 1.5px solid #f1f5f9;
            border-radius: 14px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            transition: all 0.15s;
        }

        .kot-product-row:hover {
            border-color: #cbd5e1;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .kot-product-row-selected {
            background: #fefce8 !important;
            border-color: #facc15 !important;
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4), 0 4px 12px rgba(250, 204, 21, 0.15) !important;
            transform: scale(1.008);
        }

        .kot-product-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .kot-product-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #eff6ff;
            color: #2563eb;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
        }

        .kot-product-icon-badge {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background: #2563eb;
            color: #fff;
            border-radius: 50%;
            font-size: 10px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .kot-product-name {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
            margin: 0 0 2px;
        }

        .kot-product-meta {
            font-size: 12px;
            color: #6b7280;
            margin: 0 0 3px;
        }

        .kot-product-price {
            font-size: 15px;
            font-weight: 800;
            color: #111827;
        }

        .kot-target-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 6px;
            margin-left: 6px;
            text-transform: capitalize;
        }

        .kot-target-kitchen {
            background: #fef3c7;
            color: #b45309;
        }

        .kot-target-juice {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .kot-target-skip {
            background: #fee2e2;
            color: #b91c1c;
        }

        .kot-target-none {
            background: #f3f4f6;
            color: #6b7280;
        }

        .kot-skip-label {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            margin-right: 4px;
        }

        .kot-add-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #facc15;
            color: #111827;
            font-size: 24px;
            font-weight: 700;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(250, 204, 21, 0.4);
            transition: transform 0.1s, background 0.15s;
            flex-shrink: 0;
        }

        .kot-add-btn:hover {
            background: #eab308;
            transform: scale(1.05);
        }

        .kot-line-stepper {
            display: inline-flex;
            align-items: center;
            background: #fef08a;
            border-radius: 20px;
            padding: 2px 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .kot-line-stepper button {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #fff;
            border: none;
            color: #111827;
            font-weight: 800;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .kot-line-stepper span {
            padding: 0 10px;
            font-weight: 800;
            font-size: 14px;
            color: #111827;
        }

        /* ── Draft Bar ── */
        .kot-draft-bar {
            position: sticky;
            bottom: 24px;
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #111827;
            color: #fff;
            padding: 13px 20px;
            border-radius: 16px;
            margin-top: 14px;
            margin-bottom: 24px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
            font-weight: 700;
        }

        .kot-draft-add-btn {
            background: #facc15;
            color: #111827;
            font-weight: 800;
            border: none;
            padding: 10px 20px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.15s, transform 0.1s;
        }

        .kot-draft-add-btn:hover {
            background: #eab308;
            transform: scale(1.02);
        }

        /* ── Bill Tab Sections ── */
        .kot-section {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 14px;
        }

        .kot-section-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .kot-section-title {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .kot-badge {
            background: #f3f4f6;
            color: #374151;
            font-size: 12px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 12px;
        }

        .kot-badge-kitchen {
            background: #fee2e2;
            color: #dc2626;
        }

        .kot-kitchen-box,
        .kot-new-items-box {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .kot-line-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: #f8fafc;
            border-radius: 8px;
            font-size: 14px;
        }

        .kot-cart-item {
            padding: 10px 12px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
        }

        .kot-cart-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .kot-line-left {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 14px;
        }

        .kot-line-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #eab308;
        }

        .kot-cart-item-price {
            font-weight: 700;
            font-size: 13px;
            color: #4b5563;
            margin-top: 4px;
            text-align: right;
        }

        .kot-icon-btn {
            background: none;
            border: none;
            color: #ef4444;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
        }

        .kot-icon-btn:hover {
            background: #fee2e2;
        }

        .kot-note-input {
            margin-top: 6px;
            font-size: 12px;
            padding: 6px 8px;
            border-radius: 6px;
        }

        .kot-mini-btn {
            background: #f3f4f6;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            cursor: pointer;
        }

        .kot-mini-btn:hover {
            background: #e5e7eb;
        }

        /* ── Bill Summary ── */
        .kot-summary {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 14px;
        }

        .kot-summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #4b5563;
            margin-bottom: 6px;
        }

        .kot-summary-total {
            font-size: 18px;
            font-weight: 800;
            color: #111827;
            border-top: 1px dashed #d1d5db;
            padding-top: 8px;
            margin-top: 8px;
            margin-bottom: 0;
        }

        /* ── Staff Select Dropdown ── */
        .kot-field {
            margin-bottom: 12px;
        }

        .kot-field label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #374151;
            margin-bottom: 4px;
        }

        .kot-staff-field {
            position: relative;
            margin-bottom: 14px;
        }

        .kot-staff-dropdown-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            cursor: pointer;
            text-align: left;
        }

        .kot-staff-dropdown-panel {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            max-height: 200px;
            overflow-y: auto;
            z-index: 50;
            margin-top: 4px;
        }

        .kot-staff-option {
            padding: 10px 14px;
            font-size: 14px;
            color: #1f2937;
            cursor: pointer;
            transition: all 0.1s;
            border-left: 4px solid transparent;
        }

        .kot-staff-option:hover,
        .kot-staff-option-selected {
            background: #fef08a !important;
            color: #854d0e !important;
            font-weight: 700;
            border-left-color: #eab308;
            padding-left: 12px;
        }

        /* ── Action Buttons ── */
        .kot-btn-hold {
            width: 100%;
            border: 1.5px solid #d97706;
            background: #fff;
            color: #d97706;
            font-weight: 800;
            font-size: 15px;
            padding: 12px 0;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 10px;
            transition: background 0.15s;
        }

        .kot-btn-hold:hover {
            background: #fffbeb;
        }

        .kot-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .kot-btn {
            border: none;
            border-radius: 12px;
            padding: 13px 0;
            font-weight: 800;
            font-size: 15px;
            cursor: pointer;
            transition: opacity 0.15s;
        }

        .kot-btn-kitchen {
            background: #f59e0b;
            color: #fff;
        }

        .kot-btn-close {
            background: #16a34a;
            color: #fff;
        }

        .kot-btn:hover {
            opacity: 0.92;
        }

        /* ── Modals ── */
        .kot-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(2px);
        }

        .kot-modal {
            background: #fff;
            width: 90%;
            max-width: 440px;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            animation: kotModalZoom 0.2s ease-out;
        }

        @keyframes kotModalZoom {
            from {
                transform: scale(0.95);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .kot-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #f3f4f6;
        }

        .kot-modal-header h3 {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
            color: #111827;
        }

        .kot-modal-close {
            background: none;
            border: none;
            font-size: 22px;
            color: #9ca3af;
            cursor: pointer;
        }

        .kot-modal-body {
            padding: 20px;
        }

        .kot-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 14px 20px;
            background: #f9fafb;
            border-top: 1px solid #f3f4f6;
        }

        .kot-btn-secondary {
            background: #e5e7eb;
            color: #374151;
            padding: 9px 16px;
        }

        .kot-btn-primary {
            background: #facc15;
            color: #111827;
            padding: 9px 18px;
        }

        .kot-btn-remove-link {
            background: none;
            color: #ef4444;
            margin-right: auto;
            padding: 0;
        }

        .kot-input {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 14px;
        }

        .kot-input:focus {
            outline: none;
            border-color: #facc15;
            box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2);
        }

        .kot-radio-row {
            display: flex;
            gap: 16px;
        }

        .kot-radio-option {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>

    {{-- ======================================================== --}}
    {{-- JAVASCRIPT LOGIC --}}
    {{-- ======================================================== --}}
    <script>
        const ROUTES = {
            tableStatus: "{{ route('billing.kot_table_status') }}",
            products: "{{ route('billing.get_kot_products') }}",
            staffList: "{{ route('billing.get_staff_list') }}",
            tableOrder: (tableId, personId) => {
                let url = "{{ route('billing.kot_table_order', ['table_id' => 'TABLE_ID_PLACEHOLDER']) }}".replace('TABLE_ID_PLACEHOLDER', tableId);
                if (personId) {
                    url += '?person_id=' + encodeURIComponent(personId);
                }
                return url;
            },
            getPersons: (tableId) => "{{ route('billing.kot_get_persons', ['table_id' => 'TABLE_ID_PLACEHOLDER']) }}".replace('TABLE_ID_PLACEHOLDER', tableId),
            addPerson: (tableId) => "{{ route('billing.kot_add_person', ['table_id' => 'TABLE_ID_PLACEHOLDER']) }}".replace('TABLE_ID_PLACEHOLDER', tableId),
            deletePerson: (tableId, personId) => "{{ route('billing.kot_delete_person', ['table_id' => 'TABLE_ID_PLACEHOLDER', 'person_id' => 'PERSON_ID_PLACEHOLDER']) }}"
                .replace('TABLE_ID_PLACEHOLDER', tableId)
                .replace('PERSON_ID_PLACEHOLDER', encodeURIComponent(personId)),
            holdSaveOrder: "{{ route('billing.kot_hold_save_order') }}",
            removeProduct: "{{ route('billing.kot_hold_remove_product') }}",
            saveOrder: (tableId) => "{{ route('billing.kot_save_order', ['table_id' => 'TABLE_ID_PLACEHOLDER']) }}".replace('TABLE_ID_PLACEHOLDER', tableId),
        };

        const csrfToken = "{{ csrf_token() }}";
        const TRASH_ICON = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>';

        // ── Global State ──
        let currentTableId = null;
        let currentPersonId = null;
        let currentPersonNumber = 1;
        let tablePersonsCache = [];

        let allProductsCache = [];
        let productsCache = [];
        let selectedProductIndex = 0;
        let draftQuantities = {};

        let staffCache = [];
        let selectedStaffIndex = 0;
        let staffKeyBuffer = '';
        let staffKeyBufferTimer = null;

        let newCart = []; // { product_id, name, unit, qty, is_kot, note }
        let unsentHoldItems = [];
        let sentLineItems = [];

        let currentDiscount = { type: 'flat', value: 0, offer: null, reason: null };
        let currentCharge = { amount: 0, reason: null };
        let hasSentFirstHoldOrder = false;
        let customerDetails = { user_id: null, customer_name: null, customer_phone: null };
        let pendingCustomerAction = null;
        let pendingDeletePersonId = null;

        function postJson(url, body) {
            return fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json',
                    Accept: 'application/json'
                },
                body: JSON.stringify(body),
            }).then((res) => res.json());
        }

        // ============================================================
        // SCREEN 1: TABLES VIEW
        // ============================================================
        function loadTables() {
            fetch(ROUTES.tableStatus)
                .then((res) => res.json())
                .then((data) => {
                    const grid = document.getElementById('tablesGrid');
                    grid.innerHTML = '';

                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to load tables.');
                        return;
                    }

                    if (!data.data || data.data.length === 0) {
                        grid.innerHTML = '<p class="kot-muted">No active tables found for this branch.</p>';
                        return;
                    }

                    const tables = data.data.slice().sort((a, b) => a.table_id - b.table_id);

                    tables.forEach((table) => {
                        const occupied = table.table_status === 'occupied';
                        const card = document.createElement('div');
                        card.className = `kot-table-card ${occupied ? 'occupied' : 'free'}`;

                        const personCount = table.person_count || 0;
                        const personText = personCount === 1 ? '1 Person' : `${personCount} Persons`;
                        const staffText = table.staff_name ? ` - ${table.staff_name}` : '';

                        card.innerHTML = `
                                <div>
                                    <div class="kot-card-header">
                                        <div class="kot-table-icon">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M4 18v3M20 18v3M4 10h16M2 14h20M5 10V5a2 2 0 012-2h10a2 2 0 012 2v5"/>
                                            </svg>
                                        </div>
                                        <span class="kot-status-badge ${occupied ? 'occupied' : 'free'}">
                                            ${occupied ? 'Occupied' : 'Free'}
                                        </span>
                                    </div>
                                    <div class="kot-table-name">Table ${table.table_id}</div>
                                    <div class="kot-table-info">
                                        ${occupied ? (personText + staffText) : 'Available for a new order'}
                                    </div>
                                </div>
                                <div>
                                    ${occupied ? `
                                        <div class="kot-table-link-row">
                                            <span>View details</span>
                                            <span>&gt;</span>
                                        </div>
                                    ` : `
                                        <button type="button" class="kot-table-btn free">
                                            Take Order
                                        </button>
                                    `}
                                </div>
                            `;

                        card.onclick = () => openTable(table.table_id);
                        grid.appendChild(card);
                    });
                })
                .catch((err) => {
                    console.error('Failed to load tables', err);
                    showKotToast('error', 'Unable to fetch tables.');
                });
        }

        function backToTables() {
            document.getElementById('personsView').classList.add('kot-hidden');
            document.getElementById('orderView').classList.add('kot-hidden');
            document.getElementById('tablesView').classList.remove('kot-hidden');
            currentTableId = null;
            currentPersonId = null;
            loadTables();
        }

        // ============================================================
        // SCREEN 2: PERSONS VIEW (FOR A TABLE)
        // ============================================================
        function openTable(tableId) {
            currentTableId = tableId;
            currentPersonId = null;

            document.getElementById('tablesView').classList.add('kot-hidden');
            document.getElementById('orderView').classList.add('kot-hidden');
            document.getElementById('personsView').classList.remove('kot-hidden');
            document.getElementById('personsViewTitle').textContent = `Table ${tableId}`;

            loadPersons(tableId);
        }

        function loadPersons(tableId) {
            const grid = document.getElementById('personsGrid');
            grid.innerHTML = '<p class="kot-muted">Loading persons…</p>';

            fetch(ROUTES.getPersons(tableId))
                .then((res) => res.json())
                .then((data) => {
                    grid.innerHTML = '';

                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to load persons.');
                        return;
                    }

                    tablePersonsCache = data.data.persons || [];
                    const personCount = tablePersonsCache.length;
                    document.getElementById('tablePersonCountText').textContent = personCount === 1 ? '1 Person' : `${personCount} Persons`;

                    // Render existing persons
                    tablePersonsCache.forEach((person) => {
                        const card = document.createElement('div');
                        card.className = 'kot-person-card';

                        card.innerHTML = `
                                <div>
                                    <div class="kot-person-top-row">
                                        <div class="kot-person-info-left">
                                            <div class="kot-person-avatar">${person.person_number}</div>
                                            <div>
                                                <h4 class="kot-person-meta-name">${person.display_name}</h4>
                                                <div class="kot-person-meta-sub">${person.items_count} item${person.items_count === 1 ? '' : 's'} · ₹${person.total.toFixed(2)}</div>
                                            </div>
                                        </div>
                                        <button type="button" class="kot-person-menu-btn" title="Options" onclick="openDeletePersonModal('${person.person_id}', '${person.display_name}')">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <circle cx="12" cy="12" r="1"/>
                                                <circle cx="12" cy="5" r="1"/>
                                                <circle cx="12" cy="19" r="1"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                <button type="button" class="kot-person-view-btn" onclick='openPersonOrder(${JSON.stringify(person).replace(/'/g, "&#39;")})'>
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                                        <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
                                    </svg>
                                    View &gt;
                                </button>
                            `;

                        grid.appendChild(card);
                    });

                    // Render Add Person card
                    const addCard = document.createElement('div');
                    addCard.className = 'kot-add-person-card';
                    addCard.innerHTML = `
                            <div class="kot-add-person-icon">+</div>
                            <div class="kot-add-person-label">Add Person</div>
                        `;
                    addCard.onclick = () => addPersonToTable(tableId);
                    grid.appendChild(addCard);
                })
                .catch((err) => {
                    console.error('Failed to load persons', err);
                    grid.innerHTML = '<p class="kot-muted">Error loading persons.</p>';
                });
        }

        function addPersonToTable(tableId) {
            postJson(ROUTES.addPerson(tableId), {})
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to add person.');
                        return;
                    }
                    showKotToast('success', `${data.data.display_name} added.`);

                    // Immediately open this newly created person's order view!
                    const newPerson = {
                        person_id: data.data.person_id,
                        person_number: data.data.person_number,
                        display_name: data.data.display_name,
                        items_count: 0,
                        total: 0,
                    };
                    openPersonOrder(newPerson);
                })
                .catch((err) => {
                    console.error('Add person failed', err);
                    showKotToast('error', 'Unable to add person.');
                });
        }

        function openDeletePersonModal(personId, displayName) {
            pendingDeletePersonId = personId;
            document.getElementById('deletePersonPrompt').textContent = `Are you sure you want to delete ${displayName} and cancel all their pending orders?`;
            document.getElementById('deletePersonModalBackdrop').classList.remove('kot-hidden');
        }

        function closeDeletePersonModal() {
            document.getElementById('deletePersonModalBackdrop').classList.add('kot-hidden');
            pendingDeletePersonId = null;
        }

        function confirmDeletePerson() {
            if (!pendingDeletePersonId || !currentTableId) return;
            const personId = pendingDeletePersonId;
            closeDeletePersonModal();

            postJson(ROUTES.deletePerson(currentTableId, personId), {})
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to delete person.');
                        return;
                    }
                    showKotToast('success', 'Person removed.');
                    loadPersons(currentTableId);
                })
                .catch((err) => {
                    console.error('Delete person error', err);
                    showKotToast('error', 'Failed to delete person.');
                });
        }

        function backToPersons() {
            document.getElementById('orderView').classList.add('kot-hidden');
            document.getElementById('personsView').classList.remove('kot-hidden');
            resetOrderState();
            loadPersons(currentTableId);
        }

        // ============================================================
        // SCREEN 3: ORDER VIEW (FOR A PERSON)
        // ============================================================
        function openPersonOrder(person) {
            resetOrderState();
            currentPersonId = person.person_id;
            currentPersonNumber = person.person_number;

            document.getElementById('personsView').classList.add('kot-hidden');
            document.getElementById('orderView').classList.remove('kot-hidden');

            document.getElementById('orderViewTitle').textContent = `Table ${currentTableId}`;
            document.getElementById('orderViewPersonBadge').textContent = `Person ${currentPersonNumber}`;

            switchTab('products');
            loadProducts();
            loadStaff();
            loadSentItems();
            renderNewCart();
        }

        function resetOrderState() {
            newCart = [];
            unsentHoldItems = [];
            draftQuantities = {};
            currentDiscount = { type: 'flat', value: 0, offer: null, reason: null };
            currentCharge = { amount: 0, reason: null };
            hasSentFirstHoldOrder = false;
            customerDetails = { user_id: null, customer_name: null, customer_phone: null };
            resetStaffSelection();

            const searchInput = document.getElementById('productSearch');
            if (searchInput) {
                searchInput.value = '';
            }
        }

        function switchTab(tab) {
            document.querySelectorAll('.kot-tab-btn').forEach((btn) => {
                btn.classList.toggle('active', btn.dataset.tab === tab);
            });
            document.getElementById('tab-products').classList.toggle('kot-hidden', tab !== 'products');
            document.getElementById('tab-bill').classList.toggle('kot-hidden', tab !== 'bill');
        }

        // ── Staff Selection ──
        function loadStaff(onLoadedCallback) {
            if (staffCache.length > 0) {
                if (onLoadedCallback) onLoadedCallback();
                return;
            }

            fetch(ROUTES.staffList)
                .then((res) => res.json())
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to load staff.');
                        return;
                    }
                    staffCache = data.data.slice().sort((a, b) => a.id - b.id);
                    const currentId = parseInt(document.getElementById('staffSelect').value);
                    if (currentId) {
                        selectStaff(currentId);
                    }
                    if (onLoadedCallback) onLoadedCallback();
                });
        }

        function resetStaffSelection() {
            const input = document.getElementById('staffSelect');
            const label = document.getElementById('staffDropdownLabel');
            if (input) input.value = '';
            if (label) label.textContent = 'Select staff…';
        }

        function toggleStaffDropdown() {
            const panel = document.getElementById('staffDropdownPanel');
            if (panel.classList.contains('kot-hidden')) openStaffDropdown();
            else closeStaffDropdown();
        }

        function openStaffDropdown() {
            if (staffCache.length === 0) {
                loadStaff(() => {
                    openStaffDropdown();
                });
                return;
            }

            const currentId = parseInt(document.getElementById('staffSelect').value);
            const foundIdx = staffCache.findIndex((s) => s.id === currentId);
            selectedStaffIndex = foundIdx !== -1 ? foundIdx : 0;

            renderStaffDropdownOptions();
            document.getElementById('staffDropdownPanel').classList.remove('kot-hidden');
            highlightSelectedStaffOption();
        }

        function closeStaffDropdown() {
            document.getElementById('staffDropdownPanel').classList.add('kot-hidden');
            if (staffKeyBufferTimer) {
                clearTimeout(staffKeyBufferTimer);
                staffKeyBufferTimer = null;
            }
            staffKeyBuffer = '';
        }

        function renderStaffDropdownOptions() {
            const panel = document.getElementById('staffDropdownPanel');
            panel.innerHTML = '';

            if (staffCache.length === 0) {
                panel.innerHTML = '<div class="kot-muted" style="padding:10px;">No staff found.</div>';
                return;
            }

            staffCache.forEach((s, idx) => {
                const opt = document.createElement('div');
                opt.className = 'kot-staff-option' + (idx === selectedStaffIndex ? ' kot-staff-option-selected' : '');
                opt.textContent = `${idx + 1}. ${s.name}`;
                opt.onclick = () => selectStaff(s.id);
                opt.onmouseenter = () => {
                    selectedStaffIndex = idx;
                    highlightSelectedStaffOption();
                };
                panel.appendChild(opt);
            });
        }

        function highlightSelectedStaffOption() {
            const options = document.querySelectorAll('#staffDropdownPanel .kot-staff-option');
            options.forEach((opt, i) => {
                opt.classList.toggle('kot-staff-option-selected', i === selectedStaffIndex);
            });
            if (options[selectedStaffIndex]) {
                options[selectedStaffIndex].scrollIntoView({ block: 'nearest' });
            }
        }

        function selectStaff(id) {
            const staffId = parseInt(id);
            if (!staffId) return;
            const staff = staffCache.find((s) => s.id === staffId);
            document.getElementById('staffSelect').value = staffId;
            document.getElementById('staffDropdownLabel').textContent = staff ? staff.name : ('Staff #' + staffId);
            closeStaffDropdown();
        }

        function selectStaffBySerial(n) {
            const staff = staffCache[n - 1];
            if (staff) {
                selectStaff(staff.id);
            } else {
                showKotToast('error', 'No staff at position ' + n + '.');
            }
        }

        document.addEventListener('click', (e) => {
            const panel = document.getElementById('staffDropdownPanel');
            const btn = document.getElementById('staffDropdownBtn');
            if (!panel || panel.classList.contains('kot-hidden')) return;
            if (!panel.contains(e.target) && e.target !== btn && !btn.contains(e.target)) {
                closeStaffDropdown();
            }
        });

        // ── Products List & Search ──
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('productSearch').addEventListener('input', (e) => {
                filterProducts(e.target.value);
            });
        });

        function loadProducts() {
            fetch(ROUTES.products)
                .then((res) => res.json())
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to load products.');
                        return;
                    }
                    allProductsCache = data.data;
                    productsCache = allProductsCache;
                    selectedProductIndex = 0;
                    renderProductList();
                });
        }

        function filterProducts(term) {
            const q = term.trim().toLowerCase();
            if (q === '') {
                productsCache = allProductsCache;
            } else {
                const matches = allProductsCache.filter((p) => {
                    const name = (p.name || '').toLowerCase();
                    const code = String(p.code || '').toLowerCase();
                    return name.includes(q) || code.includes(q);
                });

                matches.sort((a, b) => {
                    const codeA = String(a.code || '').toLowerCase();
                    const codeB = String(b.code || '').toLowerCase();
                    const nameA = (a.name || '').toLowerCase();
                    const nameB = (b.name || '').toLowerCase();

                    // 1. Exact match on code (e.g. searching 'a1' -> code 'A1' is top priority)
                    const exactCodeA = codeA === q;
                    const exactCodeB = codeB === q;
                    if (exactCodeA && !exactCodeB) return -1;
                    if (!exactCodeA && exactCodeB) return 1;

                    // 2. Exact match on name
                    const exactNameA = nameA === q;
                    const exactNameB = nameB === q;
                    if (exactNameA && !exactNameB) return -1;
                    if (!exactNameA && exactNameB) return 1;

                    // 3. Code starts with query (e.g. 'a1' matches 'a1', 'a10', 'a12', 'a15')
                    const codeStartsA = codeA.startsWith(q);
                    const codeStartsB = codeB.startsWith(q);
                    if (codeStartsA && !codeStartsB) return -1;
                    if (!codeStartsA && codeStartsB) return 1;

                    // When both codes start with query, rank shorter code first (A1 before A10), then numeric sort
                    if (codeStartsA && codeStartsB) {
                        if (codeA.length !== codeB.length) {
                            return codeA.length - codeB.length;
                        }
                        return codeA.localeCompare(codeB, undefined, { numeric: true });
                    }

                    // 4. Name starts with query
                    const nameStartsA = nameA.startsWith(q);
                    const nameStartsB = nameB.startsWith(q);
                    if (nameStartsA && !nameStartsB) return -1;
                    if (!nameStartsA && nameStartsB) return 1;

                    // 5. Code includes query
                    const codeIncA = codeA.includes(q);
                    const codeIncB = codeB.includes(q);
                    if (codeIncA && !codeIncB) return -1;
                    if (!codeIncA && codeIncB) return 1;

                    // 6. Name includes query (alphabetical fallback)
                    return nameA.localeCompare(nameB);
                });

                productsCache = matches;
            }

            selectedProductIndex = 0;
            renderProductList();
        }

        function renderProductList() {
            const list = document.getElementById('productList');
            list.innerHTML = '';

            if (productsCache.length === 0) {
                list.innerHTML = '<p class="kot-muted">No products found.</p>';
                return;
            }

            productsCache.forEach((p, idx) => {
                const qty = draftQuantities[p.id] || 0;
                const row = document.createElement('div');
                row.className = 'kot-product-row' + (idx === selectedProductIndex ? ' kot-product-row-selected' : '');

                const targetBadge = p.print_target ? `
                        <span class="kot-target-badge ${p.print_target === 'juice' ? 'kot-target-juice' : 'kot-target-kitchen'}">
                            ${p.print_target === 'juice' ? '🧃 Juice' : '🍳 Kitchen'}
                        </span>
                    ` : '';

                row.innerHTML = `
                        <div class="kot-product-left">
                            <div class="kot-product-icon-box">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
                                    <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"/>
                                </svg>
                                <span class="kot-product-icon-badge">+</span>
                            </div>
                            <div>
                                <div class="kot-product-name">${p.name} ${targetBadge}</div>
                                <div class="kot-product-meta">${p.unit} · Code: ${p.code}</div>
                                <div class="kot-product-price">₹${p.price.toFixed(2)}</div>
                            </div>
                        </div>
                        ${qty > 0 ? `
                            <span class="kot-line-stepper">
                                <button type="button" data-action="dec">&minus;</button>
                                <span>${qty}</span>
                                <button type="button" data-action="inc">&plus;</button>
                            </span>
                        ` : `<button type="button" class="kot-add-btn" data-action="inc">+</button>`}
                    `;

                row.onclick = (e) => {
                    if (e.target.closest('[data-action]')) return;
                    selectedProductIndex = idx;
                    highlightSelectedRow();
                };

                const incBtn = row.querySelector('[data-action="inc"]');
                const decBtn = row.querySelector('[data-action="dec"]');
                if (incBtn) incBtn.onclick = (e) => { e.stopPropagation(); incDraftQty(p.id); };
                if (decBtn) decBtn.onclick = (e) => { e.stopPropagation(); decDraftQty(p.id); };
                list.appendChild(row);
            });

            highlightSelectedRow();
        }

        function highlightSelectedRow() {
            const rows = document.querySelectorAll('#productList .kot-product-row');
            if (rows.length === 0) return;
            if (selectedProductIndex < 0) selectedProductIndex = 0;
            if (selectedProductIndex >= rows.length) selectedProductIndex = rows.length - 1;
            rows.forEach((r, i) => r.classList.toggle('kot-product-row-selected', i === selectedProductIndex));
            if (rows[selectedProductIndex]) {
                rows[selectedProductIndex].scrollIntoView({ block: 'nearest' });
            }
        }

        function incDraftQty(productId) {
            draftQuantities[productId] = (draftQuantities[productId] || 0) + 1;
            renderProductList();
            updateDraftBar();
        }

        function decDraftQty(productId) {
            const cur = draftQuantities[productId] || 0;
            if (cur <= 1) delete draftQuantities[productId];
            else draftQuantities[productId] = cur - 1;
            renderProductList();
            updateDraftBar();
        }

        function updateDraftBar() {
            const entries = Object.entries(draftQuantities).filter(([, qty]) => qty > 0);
            const bar = document.getElementById('draftBar');

            if (entries.length === 0) {
                bar.classList.add('kot-hidden');
                return;
            }

            let totalQty = 0, totalAmount = 0;
            entries.forEach(([productId, qty]) => {
                const product = allProductsCache.find((p) => p.id === parseInt(productId));
                if (!product) return;
                totalQty += qty;
                totalAmount += qty * product.price;
            });

            document.getElementById('draftCount').textContent = totalQty + ' item' + (totalQty === 1 ? '' : 's');
            document.getElementById('draftTotal').textContent = '₹' + totalAmount.toFixed(2);
            bar.classList.remove('kot-hidden');
        }

        function addDraftToBill() {
            const entries = Object.entries(draftQuantities).filter(([, qty]) => qty > 0);
            if (entries.length === 0) return;

            entries.forEach(([productId, qty]) => {
                const product = allProductsCache.find((p) => p.id === parseInt(productId));
                if (!product) return;

                const existingIndex = newCart.findIndex((i) => i.product_id === product.id);
                if (existingIndex !== -1) {
                    const existing = newCart[existingIndex];
                    const existingQtyMatch = String(existing.qty).match(/^([0-9.]+)/);
                    const existingQty = existingQtyMatch ? parseFloat(existingQtyMatch[1]) : 0;
                    existing.qty = `${existingQty + qty}${product.unit}`;
                } else {
                    newCart.push({
                        product_id: product.id,
                        name: product.name,
                        unit: product.unit,
                        qty: `${qty}${product.unit}`,
                        is_kot: 0, // 0 = send to kitchen/juice printer
                        note: null,
                    });
                }
            });

            draftQuantities = {};
            renderProductList();
            updateDraftBar();
            renderNewCart();
            switchTab('bill');
        }

        // ============================================================
        // BILL TAB (FOR CURRENT PERSON)
        // ============================================================
        let sentTotals = { subtotal: 0, gst: 0, total: 0 };

        function loadSentItems() {
            if (!currentTableId || !currentPersonId) return;

            fetch(ROUTES.tableOrder(currentTableId, currentPersonId))
                .then((res) => res.json())
                .then((data) => {
                    const container = document.getElementById('sentItemsList');
                    container.innerHTML = '';

                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to load current orders.');
                        return;
                    }

                    sentTotals = { subtotal: 0, gst: 0, total: 0 };
                    sentLineItems = [];
                    unsentHoldItems = [];
                    let anyItems = false;
                    let savedStaffId = null;

                    data.data.hold_orders.forEach((hold) => {
                        if (hold.staff_id) savedStaffId = hold.staff_id;
                        if (hold.customer_name || hold.customer_phone) {
                            customerDetails.customer_name = hold.customer_name || null;
                            customerDetails.customer_phone = hold.customer_phone || null;
                            customerDetails.user_id = hold.user_id || null;
                        }
                        sentTotals.subtotal += parseFloat(hold.subtotal);
                        sentTotals.gst += parseFloat(hold.gst);
                        sentTotals.total += parseFloat(hold.total);

                        (hold.kothold_order_details || hold.kotholdOrderDetails || []).forEach((line) => {
                            anyItems = true;
                            sentLineItems.push(line);

                            const targetTag = line.print_target ? `
                                    <span class="kot-target-badge ${line.print_target === 'juice' ? 'kot-target-juice' : 'kot-target-kitchen'}">
                                        ${line.print_target}
                                    </span>
                                ` : '';

                            const row = document.createElement('div');
                            row.className = 'kot-line-row';
                            row.innerHTML = `
                                    <span>${line.product_name} (${line.quantity}${line.unit}) ${targetTag}</span>
                                    <span>
                                        ₹${parseFloat(line.row_total).toFixed(2)}
                                        <button type="button" class="kot-icon-btn" title="Remove" onclick="removeProductLine(${hold.id}, ${line.id})">${TRASH_ICON}</button>
                                    </span>
                                `;
                            container.appendChild(row);
                        });
                    });

                    if (savedStaffId) {
                        if (staffCache.length > 0) {
                            selectStaff(savedStaffId);
                        } else {
                            document.getElementById('staffSelect').value = savedStaffId;
                            loadStaff(() => selectStaff(savedStaffId));
                        }
                    }

                    document.getElementById('sentCartCount').textContent = sentLineItems.length;
                    if (!anyItems) container.innerHTML = '<p class="kot-muted">Nothing sent yet for this person.</p>';
                    if (data.data.hold_orders.length > 0) hasSentFirstHoldOrder = true;

                    renderNewCart();
                    updateBillSummary();
                });
        }

        function cartLineAmount(item) {
            const product = allProductsCache.find((p) => p.id === item.product_id);
            if (!product) return 0;

            const qtyMatch = String(item.qty).match(/^([0-9.]+)/);
            const qty = qtyMatch ? parseFloat(qtyMatch[1]) : 0;
            const baseAmount = qty * product.price;

            if (product.tax > 0 && product.tax_mode === 'exclude') {
                return baseAmount + baseAmount * (product.tax / 100);
            }
            return baseAmount;
        }

        function previewCartTotals() {
            let subtotal = 0, gst = 0, total = 0;

            newCart.forEach((item) => {
                const product = allProductsCache.find((p) => p.id === item.product_id);
                if (!product) return;

                const qtyMatch = String(item.qty).match(/^([0-9.]+)/);
                const qty = qtyMatch ? parseFloat(qtyMatch[1]) : 0;
                const baseAmount = qty * product.price;

                let taxAmount = 0, lineSubtotal = baseAmount, lineTotal = baseAmount;

                if (product.tax > 0 && product.tax_mode === 'include') {
                    taxAmount = baseAmount - (baseAmount / (1 + product.tax / 100));
                    lineSubtotal = baseAmount - taxAmount;
                    lineTotal = baseAmount;
                } else if (product.tax > 0 && product.tax_mode === 'exclude') {
                    taxAmount = baseAmount * (product.tax / 100);
                    lineSubtotal = baseAmount;
                    lineTotal = baseAmount + taxAmount;
                }

                subtotal += lineSubtotal;
                gst += taxAmount;
                total += lineTotal;
            });

            return { subtotal, gst, total };
        }

        function calcDiscountAmount(amountBeforeDiscount) {
            if (!currentDiscount.value || currentDiscount.value <= 0) return 0;
            if (currentDiscount.type === 'percentage') return amountBeforeDiscount * (currentDiscount.value / 100);
            return currentDiscount.value;
        }

        function updateBillSummary() {
            const cartPreview = previewCartTotals();
            const amountBeforeDiscount = sentTotals.total + cartPreview.total;

            let discountAmount = calcDiscountAmount(amountBeforeDiscount);
            if (discountAmount > amountBeforeDiscount) discountAmount = amountBeforeDiscount;

            const chargeAmount = currentCharge.amount || 0;
            const total = amountBeforeDiscount - discountAmount + chargeAmount;

            document.getElementById('sumSubtotal').textContent = '₹' + amountBeforeDiscount.toFixed(2);
            document.getElementById('sumGst').textContent = '₹0.00';
            document.getElementById('sumTotal').textContent = '₹' + total.toFixed(2);

            const discountRow = document.getElementById('sumDiscountRow');
            if (discountAmount > 0) {
                discountRow.classList.remove('kot-hidden');
                document.getElementById('sumDiscount').textContent = '− ₹' + discountAmount.toFixed(2);
            } else {
                discountRow.classList.add('kot-hidden');
            }

            const chargeRow = document.getElementById('sumChargeRow');
            if (chargeAmount > 0) {
                chargeRow.classList.remove('kot-hidden');
                document.getElementById('sumCharge').textContent = '+ ₹' + chargeAmount.toFixed(2);
            } else {
                chargeRow.classList.add('kot-hidden');
            }
        }

        function renderNewCart() {
            const container = document.getElementById('newCartList');
            container.innerHTML = '';
            document.getElementById('newCartCount').textContent = newCart.length;

            if (newCart.length === 0) {
                container.innerHTML = '<p class="kot-muted">No items added.</p>';
            } else {
                newCart.forEach((item, idx) => {
                    const product = allProductsCache.find((p) => p.id === item.product_id);
                    const isTickedSkip = item.is_kot === 1;

                    let targetTag = '';
                    if (isTickedSkip) {
                        targetTag = `<span class="kot-target-badge kot-target-skip" title="No need to go anywhere (skipped by printer)">🚫 No Print</span>`;
                    } else if (product && product.print_target === 'kitchen') {
                        targetTag = `<span class="kot-target-badge kot-target-kitchen" title="Fast Food category - Kitchen printer">🍳 Kitchen</span>`;
                    } else if (product && product.print_target === 'juice') {
                        targetTag = `<span class="kot-target-badge kot-target-juice" title="Juice & Drinks category - Juice printer">🧃 Juice</span>`;
                    } else {
                        targetTag = `<span class="kot-target-badge kot-target-none" title="Counter item - no printer target">Counter</span>`;
                    }

                    const row = document.createElement('div');
                    row.className = 'kot-cart-item';
                    row.innerHTML = `
                            <div class="kot-cart-item-top">
                                <span class="kot-line-left">
                                    <label class="kot-skip-label" title="Tick only if this item should NOT be sent to printer (no need to go anywhere)">
                                        <input type="checkbox" class="kot-line-checkbox" ${isTickedSkip ? 'checked' : ''} onchange="toggleCartItem(${idx}, this.checked)">
                                    </label>
                                    <span>${item.name} ${targetTag}</span>
                                    <span class="kot-line-stepper">
                                        <button type="button" onclick="stepCartQty(${idx}, -1)">&minus;</button>
                                        <span>${item.qty}</span>
                                        <button type="button" onclick="stepCartQty(${idx}, 1)">&plus;</button>
                                    </span>
                                </span>
                                <button type="button" class="kot-icon-btn" title="Remove" onclick="removeFromNewCart(${idx})">${TRASH_ICON}</button>
                            </div>
                            <div class="kot-cart-item-price">₹${cartLineAmount(item).toFixed(2)}</div>
                            <input type="text" class="kot-input kot-note-input" placeholder="Special mention / note"
                                value="${item.note ? item.note.replace(/"/g, '&quot;') : ''}"
                                onchange="updateCartNote(${idx}, this.value)">
                        `;
                    container.appendChild(row);
                });
            }

            updateBillSummary();
        }

        function toggleCartItem(idx, checked) {
            // Ticked (checked) = "no need to go anywhere" (is_kot = 1)
            // Unticked (default) = auto-send to kitchen/juice printer (is_kot = 0)
            newCart[idx].is_kot = checked ? 1 : 0;
            renderNewCart();
        }

        function updateCartNote(idx, value) {
            newCart[idx].note = value.trim() || null;
        }

        function stepCartQty(idx, delta) {
            const item = newCart[idx];
            const qtyMatch = String(item.qty).match(/^([0-9.]+)/);
            const currentQty = qtyMatch ? parseFloat(qtyMatch[1]) : 0;
            const nextQty = currentQty + delta;

            if (nextQty <= 0) newCart.splice(idx, 1);
            else item.qty = `${nextQty}${item.unit}`;

            renderNewCart();
        }

        function removeFromNewCart(idx) {
            newCart.splice(idx, 1);
            renderNewCart();
        }

        let pendingRemoveHoldId = null;
        let pendingRemoveDetailId = null;

        function removeProductLine(holdOrderId, detailId) {
            pendingRemoveHoldId = holdOrderId;
            pendingRemoveDetailId = detailId;
            document.getElementById('removeItemModalBackdrop').classList.remove('kot-hidden');
        }

        function closeRemoveItemModal() {
            document.getElementById('removeItemModalBackdrop').classList.add('kot-hidden');
            pendingRemoveHoldId = null;
            pendingRemoveDetailId = null;
        }

        function confirmRemoveItem() {
            const holdOrderId = pendingRemoveHoldId;
            const detailId = pendingRemoveDetailId;
            closeRemoveItemModal();

            postJson(ROUTES.removeProduct, { order_id: holdOrderId, detail_id: detailId })
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to remove item.');
                        return;
                    }
                    showKotToast('success', 'Item removed.');
                    loadSentItems();
                });
        }

        // ── Discount & Charge ──
        function openDiscountModal() {
            document.querySelector(`input[name="discountType"][value="${currentDiscount.type}"]`).checked = true;
            document.getElementById('discountAmount').value = currentDiscount.value || '';
            document.getElementById('discountOffer').value = currentDiscount.offer || '';
            document.getElementById('discountReason').value = currentDiscount.reason || '';
            document.getElementById('discountRemoveBtn').style.display = currentDiscount.value > 0 ? 'inline-block' : 'none';
            document.getElementById('discountModalBackdrop').classList.remove('kot-hidden');
        }

        function closeDiscountModal() {
            document.getElementById('discountModalBackdrop').classList.add('kot-hidden');
        }

        function applyDiscount() {
            const type = document.querySelector('input[name="discountType"]:checked').value;
            const value = parseFloat(document.getElementById('discountAmount').value) || 0;

            if (type === 'percentage' && value > 100) {
                showKotToast('error', 'Percentage discount cannot exceed 100.');
                return;
            }

            currentDiscount = {
                type,
                value,
                offer: document.getElementById('discountOffer').value.trim() || null,
                reason: document.getElementById('discountReason').value.trim() || null,
            };

            closeDiscountModal();
            updateBillSummary();
        }

        function removeDiscount() {
            currentDiscount = { type: 'flat', value: 0, offer: null, reason: null };
            closeDiscountModal();
            updateBillSummary();
        }

        function openChargeModal() {
            document.getElementById('chargeAmount').value = currentCharge.amount || '';
            document.getElementById('chargeReason').value = currentCharge.reason || '';
            document.getElementById('chargeRemoveBtn').style.display = currentCharge.amount > 0 ? 'inline-block' : 'none';
            document.getElementById('chargeModalBackdrop').classList.remove('kot-hidden');
        }

        function closeChargeModal() {
            document.getElementById('chargeModalBackdrop').classList.add('kot-hidden');
        }

        function applyCharge() {
            const amount = parseFloat(document.getElementById('chargeAmount').value) || 0;
            currentCharge = { amount, reason: document.getElementById('chargeReason').value.trim() || null };
            closeChargeModal();
            updateBillSummary();
        }

        function removeCharge() {
            currentCharge = { amount: 0, reason: null };
            closeChargeModal();
            updateBillSummary();
        }

        // ============================================================
        // ORDER SUBMISSION (KITCHEN BILL & HOLD)
        // ============================================================
        function submitCart(products, printKitchen, forceIncludeDiscount) {
            const staffId = document.getElementById('staffSelect').value;
            if (!staffId) {
                showKotToast('error', 'Please select a staff member.');
                return Promise.resolve(false);
            }

            if (!currentPersonId) {
                showKotToast('error', 'Person identification missing. Please re-select person.');
                return Promise.resolve(false);
            }

            let includeDiscountCharge = true;

            if (!hasSentFirstHoldOrder && (currentDiscount.value > 0 || currentCharge.amount > 0)) {
                const previewAmount = products.reduce((sum, i) => sum + cartLineAmount(i), 0);
                const discountAmt = calcDiscountAmount(previewAmount);
                const coversDiscount = discountAmt <= previewAmount + 0.01;
                includeDiscountCharge = !!forceIncludeDiscount || coversDiscount;
            } else if (hasSentFirstHoldOrder) {
                includeDiscountCharge = false;
            }

            return postJson(ROUTES.holdSaveOrder, {
                table_id: currentTableId,
                person_id: currentPersonId, // Scope order strictly to current person!
                staff_id: staffId,
                print_kitchen: printKitchen,
                payment_mode: document.getElementById('paymentMode').value,
                user_id: customerDetails.user_id,
                customer_name: customerDetails.customer_name,
                customer_phone: customerDetails.customer_phone,
                discount_type: includeDiscountCharge && currentDiscount.value > 0 ? currentDiscount.type : 'none',
                discount_value: includeDiscountCharge ? (currentDiscount.value || 0) : 0,
                offer: includeDiscountCharge ? currentDiscount.offer : null,
                discount_reason: includeDiscountCharge ? currentDiscount.reason : null,
                charge: includeDiscountCharge ? (currentCharge.amount || 0) : 0,
                charge_reason: includeDiscountCharge ? currentCharge.reason : null,
                products: products.map((i) => ({
                    product_id: i.product_id,
                    qty: i.qty,
                    is_kot: i.is_kot,
                    note: i.note,
                })),
            }).then((data) => {
                if (!data.status) {
                    showKotToast('error', data.message || 'Unable to save KOT order.');
                    return false;
                }
                if (includeDiscountCharge) hasSentFirstHoldOrder = true;
                return true;
            });
        }

        async function processCartSubmission(printKitchen, forceIncludeDiscount) {
            let productsToSend = [];

            newCart.forEach((i) => {
                productsToSend.push({
                    product_id: i.product_id,
                    qty: i.qty,
                    // When printKitchen is true:
                    //   i.is_kot === 1 (ticked) => 1 ("no need to go anywhere", skipped by printer)
                    //   i.is_kot === 0 (unticked) => 0 (sent to kitchen or juice printer via SendKotBillToPrinter)
                    is_kot: printKitchen ? (i.is_kot === 1 ? 1 : 0) : 1,
                    note: i.note || null,
                });
            });

            if (productsToSend.length === 0) {
                if (printKitchen) {
                    showKotToast('error', 'Add at least one product for Kitchen Bill.');
                    return false;
                }
                return true;
            }

            const ok = await submitCart(productsToSend, printKitchen, forceIncludeDiscount);
            if (ok) {
                newCart = [];
            }
            return ok;
        }

        function sendKitchenBill() {
            if (newCart.length === 0) {
                showKotToast('error', 'Add products to cart before sending to kitchen/juice.');
                return;
            }

            processCartSubmission(true).then((ok) => {
                if (ok) {
                    showKotToast('success', 'Sent to kitchen / juice printer.');
                    loadSentItems();
                }
            });
        }

        function holdTable() {
            if (newCart.length === 0) {
                backToPersons();
                return;
            }

            processCartSubmission(false, true).then((ok) => {
                if (ok) {
                    showKotToast('success', 'Table order held.');
                    backToPersons();
                }
            });
        }

        // ============================================================
        // CLOSE BILL (CLOSES ONLY CURRENT PERSON'S ORDER!)
        // ============================================================
        function closeBill() {
            document.getElementById('closeBillModalBackdrop').classList.remove('kot-hidden');
        }

        function closeCloseBillModal() {
            document.getElementById('closeBillModalBackdrop').classList.add('kot-hidden');
        }

        function confirmCloseBill() {
            closeCloseBillModal();

            if (!currentPersonId || !currentTableId) {
                showKotToast('error', 'Missing table or person reference.');
                return;
            }

            const billedByStaffName = document.getElementById('staffDropdownLabel').textContent;

            // Submit any pending cart items first
            processCartSubmission(true, true).then((ok) => {
                if (!ok && newCart.length > 0) return;

                postJson(ROUTES.saveOrder(currentTableId), {
                    person_id: currentPersonId, // CRITICAL: Only closes this person's bill!
                    user_id: customerDetails.user_id,
                    customer_name: customerDetails.customer_name,
                    customer_phone: customerDetails.customer_phone,
                    payment_mode: document.getElementById('paymentMode').value,
                })
                    .then((data) => {
                        if (!data.status) {
                            showKotToast('error', data.message || 'Unable to close bill.');
                            return;
                        }

                        const completedOrder = data.data.completed_order;
                        showKotToast('success', `Bill closed for Person ${currentPersonNumber}: ${completedOrder.order_id}`);

                        // Print receipt
                        try {
                            completedOrder.customer_name = completedOrder.customer_name || customerDetails.customer_name || '';
                            completedOrder.customer_phone = completedOrder.customer_phone || customerDetails.customer_phone || '';
                            openThermalPreview(completedOrder, billedByStaffName);
                        } catch (printErr) {
                            console.error('PRINT ERROR', printErr);
                            showKotToast('error', 'Bill closed, but printing preview encountered an issue.');
                        }

                        // Check if other persons still have orders on this table!
                        if (data.data.is_processing === 1) {
                            // Table still occupied by other persons -> return to Persons screen
                            backToPersons();
                        } else {
                            // All persons closed on this table -> table is now free, return to Tables screen!
                            showKotToast('success', `All bills closed for Table ${currentTableId}. Table is now free.`);
                            backToTables();
                        }
                    })
                    .catch((err) => {
                        console.error('Close bill failed', err);
                        showKotToast('error', 'Unable to complete bill close.');
                    });
            });
        }

        function openCustomerModal(action) {
            pendingCustomerAction = action;
            document.getElementById('customerNameInput').value = customerDetails.customer_name || '';
            document.getElementById('customerPhoneInput').value = customerDetails.customer_phone || '';
            document.getElementById('customerModalBackdrop').classList.remove('kot-hidden');
        }

        function closeCustomerModal() {
            document.getElementById('customerModalBackdrop').classList.add('kot-hidden');
            pendingCustomerAction = null;
        }

        function confirmCustomerDetails() {
            customerDetails = {
                user_id: customerDetails.user_id,
                customer_name: document.getElementById('customerNameInput').value.trim() || null,
                customer_phone: document.getElementById('customerPhoneInput').value.trim() || null,
            };

            const action = pendingCustomerAction;
            closeCustomerModal();

            if (action === 'kitchen') sendKitchenBill();
            else if (action === 'close') confirmCloseBill();
            else if (action === 'hold') holdTable();
        }

        // ============================================================
        // THERMAL RECEIPT PRINTING (EXACT BILLING.BLADE FORMAT)
        // ============================================================
        const BILL_LOGO_SRC = @json($billLogoBase64) || '{{ asset('assets/img/bill_logo.png') }}';

        function calcTotalsFromPayload(bill) {
            const subtotal = parseFloat(bill.subtotal || 0);
            const gst = parseFloat(bill.gst || 0);
            const discount = parseFloat(bill.discount || 0);
            const charge = parseFloat(bill.charge || 0);
            return {
                subtotal: subtotal,
                gst: gst,
                discount: discount,
                charge: charge,
                total: parseFloat(bill.total || (subtotal + gst - discount + charge))
            };
        }

        function getStore(staffNameOverride) {
            let customAddress = document.getElementById('settAddress')?.value || 'Vetturnimadam , Nagercoil - 629001';
            customAddress = customAddress.replace(/\s+/g, ' ').trim();

            return {
                name: (document.getElementById('settStoreName')?.value || '').trim(),
                address: customAddress,
                gstin: (document.getElementById('settGstin')?.value || '33JRFPK4606B1Z5').trim(),
                cell: (document.getElementById('settCell')?.value || '9943873319').trim(),
                staff: (staffNameOverride || document.getElementById('staffDropdownLabel')?.textContent || 'COMMON').trim(),
                logo: '{{ asset('assets/img/sidebar_logo.png') }}',
                logoUrl: BILL_LOGO_SRC || '{{ asset('assets/img/bill_logo.png') }}',
            };
        }

        function buildReceiptHeader(store, billNo, serialNo, type, showStaff = false, customerName = '', customerPhone = '') {
            const now = new Date();
            const dd = String(now.getDate()).padStart(2, '0');
            const mm = String(now.getMonth() + 1).padStart(2, '0');
            const yyyy = now.getFullYear();
            const dateStr = `${dd}/${mm}/${yyyy}`;
            const timeStr = now.toLocaleTimeString('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });

            const staffBlock = showStaff ? `
    <div style="font-family:'Courier New',Courier,monospace;font-size:10px;margin:0 0 2px 0;">
        <span>Staff: <b>${store.staff}</b></span>
    </div>
    <div style="border-top:1px solid #000;margin:2px 0;"></div>` : '';

            const serialBlock = serialNo ? `<div>Serial No: <b>${serialNo}</b></div>` : '';

            const customerBlock = (customerName || customerPhone) ? `
    <div style="font-family:'Courier New',Courier,monospace;font-size:10px;margin:0;">
        ${customerName ? `<div>Customer: <b>${customerName}</b></div>` : ''}
        ${customerPhone ? `<div>Phone: <b>${customerPhone}</b></div>` : ''}
    </div>` : '';

            return `
    <div style="font-family:'Courier New',Courier,monospace;text-align:center;line-height:1.2;margin:0;padding:0;">
        <img src="${store.logoUrl || BILL_LOGO_SRC || '{{ asset('assets/img/bill_logo.png') }}'}" style="max-width:160px;max-height:160px;margin:0 auto 8px;display:block;" alt="Logo" />
        <div style="font-size:14px;font-weight:900;letter-spacing:0.5px;margin:0 0 1px 0;">${store.name}</div>
        <div style="font-size:11px;margin:0 0 2px 0;">${store.address}</div>
        <div style="display:flex;justify-content:center;gap:10px;font-size:10px;margin:0;">
            <span>GSTIN:${store.gstin}</span>
            <span>CELL:${store.cell}</span>
        </div>
        <div style="font-size:10px;font-weight:700;margin:2px 0 4px 0;letter-spacing:0.5px;">${type}</div>
    </div>
    <div style="border-top:1px solid #000;margin:2px 0;"></div>
    ${staffBlock}
    <div style="font-family:'Courier New',Courier,monospace;font-size:10px;margin:0;">
        <div style="display:flex;margin:0;">
            <span>Bill No: <b>${billNo}</b></span>
        </div>
        ${serialBlock}
         <div style="margin:0;"><span>Date ${dateStr} ${timeStr}</span></div>
    </div>
    ${customerBlock}
    <div style="border-top:1px solid #000;margin:2px 0;"></div>`;
        }

        function buildCustomerBill(store, bill, billNo, serialNo, totals, type = "ORIGINAL", personNumber = '') {
            const rows = (bill.products || []).map((item) => {
                const qty = parseFloat(
                    item.qty || item.quantity || item.unit_value || item.weight || item.net_weight || 0
                );
                const price = parseFloat(item.price || 0);
                const baseAmt = (price * qty).toFixed(2);
                const name = item.name || item.product_name || '';

                return `
        <tr>
            <td style="padding:2px 2px;text-align:left;">${name}</td>
            <td style="padding:2px 4px 2px 8px;text-align:right;">
                ${price.toFixed(2)}
            </td>
            <td style="padding:2px 1px;text-align:center;">
                ${qty}
            </td>
            <td style="padding:2px 2px 2px 1px;text-align:right;">
                ${baseAmt}
            </td>
        </tr>`;
            }).join('');

            const gstGroups = {};

            (bill.products || []).forEach(item => {
                const gstRate = parseFloat(item.tax) || 0;
                if (gstRate <= 0) return;

                const amount =
                    parseFloat(item.price || 0) *
                    parseFloat(item.qty || item.quantity || item.unit_value || item.weight || item.net_weight || 0);
                let gstAmount = 0;

                if ((item.tax_mode || 'exclude') === 'include') {
                    gstAmount =
                        amount -
                        (amount / (1 + gstRate / 100));
                } else {
                    gstAmount =
                        amount * gstRate / 100;
                }

                if (!gstGroups[gstRate]) {
                    gstGroups[gstRate] = {
                        taxable: 0,
                        gst: 0
                    };
                }

                gstGroups[gstRate].taxable += amount;
                gstGroups[gstRate].gst += gstAmount;
            });

            const gstRows = Object.keys(gstGroups).map(rateKey => {
                const gstRate = parseFloat(rateKey);
                const totalBase = gstGroups[rateKey].taxable;
                const gstAmt = gstGroups[rateKey].gst;
                const half = gstRate / 2;

                return `
        <tr>
            <td>${gstRate}%</td>
            <td>${totalBase.toFixed(2)}</td>
            <td>${half}%</td>
            <td>${(gstAmt / 2).toFixed(2)}</td>
            <td>${half}%</td>
            <td>${(gstAmt / 2).toFixed(2)}</td>
        </tr>`;
            }).join('');

            return `
    ${buildReceiptHeader(store, billNo, serialNo, type, true, bill.customer_name, bill.customer_phone)}
    <table style="width:100%;border-collapse:collapse;font-family:'Courier New',Courier,monospace;font-size:11px;margin:0;padding:0;table-layout:fixed;">
        <colgroup>
            <col style="width:38%;">
            <col style="width:22%;">
            <col style="width:15%;">
            <col style="width:25%;">
        </colgroup>
        <thead>
            <tr style="border-bottom:1px solid #000;">
                <th style="padding:2px 2px;text-align:left;">Particulars</th>
                <th style="padding:2px 4px 2px 8px;text-align:right;">Rate</th>
                <th style="padding:2px 1px;text-align:center;">Qty</th>
                <th style="padding:2px 2px 2px 1px;text-align:right;">Amount</th>
            </tr>
        </thead>
        <tbody>${rows}</tbody>
    </table>
    <div style="border-top:1px solid #000;margin:2px 0;"></div>
    <div style="font-family:'Courier New';font-size:10px;margin:0 0 2px 0;">
        ${(totals.discount > 0 || totals.charge > 0) ? `<div style="display:flex;justify-content:space-between;margin:0;"><span>Subtotal</span><span>₹${totals.subtotal.toFixed(2)}</span></div>` : ''}
        <div style="display:none;justify-content:space-between;margin:0;"><span>GST</span><span>₹${totals.gst.toFixed(2)}</span></div>
        ${totals.discount > 0 ? `<div style="display:flex;justify-content:space-between;margin:0;"><span>Discount</span><span>-₹${totals.discount.toFixed(2)}</span></div>` : ''}
        ${totals.charge > 0 ? `<div style="display:flex;justify-content:space-between;margin:0;"><span>Charge</span><span>+₹${totals.charge.toFixed(2)}</span></div>` : ''}
        <div style="border-top:1px solid #000;margin:2px 0;"></div>
        <div style="display:flex;justify-content:space-between;margin:0;font-size:11px;">
            <span>Total Items:</span>
            <span>${(bill.products || []).length}</span>
        </div>
        <div style="border-top:1px solid #000;margin:2px 0;"></div>
        <div style="display:flex;justify-content:space-between;margin:0;font-size:13px;font-weight:bold;">
            <span>Grand Total</span>
    <span>₹${Math.round(totals.total).toFixed(2)}</span>
        </div>
    </div>
    <div style="border-top:1px solid #000;margin:2px 0;"></div>
    <div style="font-family:'Courier New',Courier,monospace;">
        <table style="width:100%;border-collapse:collapse;font-size:7.5px;table-layout:fixed;">
            <colgroup>
                <col style="width:14%;">
                <col style="width:24%;">
                <col style="width:14%;">
                <col style="width:16%;">
                <col style="width:14%;">
                <col style="width:16%;">
            </colgroup>
            <thead>
                <tr style="border-bottom:1px solid #000;">
                    <th style="padding:1px 0;white-space:nowrap;overflow:hidden;">GST</th>
                    <th style="padding:1px 0;text-align:right;white-space:nowrap;overflow:hidden;">Amt</th>
                    <th style="padding:1px 0;text-align:center;white-space:nowrap;overflow:hidden;">CGST</th>
                    <th style="padding:1px 0;text-align:right;white-space:nowrap;overflow:hidden;">Amt</th>
                    <th style="padding:1px 0;text-align:center;white-space:nowrap;overflow:hidden;">SGST</th>
                    <th style="padding:1px 0;text-align:right;white-space:nowrap;overflow:hidden;">Amt</th>
                </tr>
            </thead>
            <tbody>${gstRows}</tbody>
        </table>
    </div>
    <div style="border-top:1px solid #000;margin:2px 0;"></div>
    <div style="text-align:center;font-family:'Courier New',Courier,monospace;font-size:10px;margin:0;">Thank You Visit Again</div>`;
        }

        function buildDuplicateBill(store, bill, billNo) {
            const rows = (bill.products || []).map((item, i) => `
            <tr>
                <td style="padding:2px 2px;">${i + 1}</td>
                <td style="padding:2px 2px;font-weight:600;">${item.name || item.product_name || ''}</td>
                <td style="padding:2px 2px;text-align:center;">${parseFloat(item.qty || item.quantity || item.unit_value || item.weight || item.net_weight || 0)}</td>
                <td style="padding:2px 2px;text-align:center;">${item.unit || 'pcs'}</td>
            </tr>`).join('');
            return `
         ${buildReceiptHeader(store, billNo, "", "DUPLICATE", true, bill.customer_name, bill.customer_phone)}
            <table style="width:100%;border-collapse:collapse;font-family:'Courier New',Courier,monospace;font-size:11px;">
                <thead>
                    <tr style="border-bottom:1px solid #000;">
                        <th style="padding:2px 2px;text-align:left;">#</th>
                        <th style="padding:2px 2px;text-align:left;">Product</th>
                        <th style="padding:2px 2px;text-align:center;">Qty</th>
                        <th style="padding:2px 2px;text-align:center;">Unit</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>
            <div style="border-top:1px solid #000;margin:2px 0;"></div>
            <div style="font-family:'Courier New',Courier,monospace;font-size:10px;">
                <div style="display:flex;justify-content:space-between;margin:0;">
                    <span>Total Items:</span>
                    <span>${(bill.products || []).length}</span>
                </div>
            </div>
            <div style="border-top:1px solid #000;margin:2px 0;"></div>
            <div style="text-align:center;font-family:'Courier New',Courier,monospace;font-size:10px;margin:0;"></div>`;
        }

        function executePrint(customerHTML, duplicateHTML) {
            const w = window.open('', '', 'width=760,height=700');

            if (!w) {
                showKotToast('error', 'Popup blocked — please allow popups for this site to print receipts.');
                return;
            }

            const pageStyle = `
    <style>
    body{
        margin:0;
        padding:0;
        font-family:'Courier New', monospace;
        font-weight: 700;
    }
    .bill{
        width:65mm;
        margin:0;
        padding:3mm;
    }
    @page{
        size:65mm auto;
        margin:0;
    }
    @media print{
        html,body{
            width:65mm;
            margin:0;
            padding:0;
        }
        .bill{
            margin:0;
            padding:2mm;
        }
    }
    </style>`;

            function writeAndPrint(html, isLast) {
                w.document.open();
                w.document.write(
                    `<!DOCTYPE html><html><head><title>Bill Print</title>${pageStyle}</head><body><div class="bill">${html}</div></body></html>`
                );
                w.document.close();

                let advanced = false;
                function advance() {
                    if (advanced) return;
                    advanced = true;
                    if (isLast) {
                        w.close();
                    } else {
                        setTimeout(function () {
                            writeAndPrint(duplicateHTML, true);
                        }, 800);
                    }
                }

                w.onafterprint = advance;

                // Ensure all images (PickMySnacks logo) are decoded/loaded before calling print
                const imgs = w.document.images;
                let loaded = 0;
                const total = imgs.length;

                function doPrint() {
                    setTimeout(function () {
                        w.print();
                        setTimeout(advance, 4000);
                    }, 250);
                }

                if (total === 0) {
                    doPrint();
                } else {
                    let hasTriggered = false;
                    function checkLoaded() {
                        loaded++;
                        if (loaded >= total && !hasTriggered) {
                            hasTriggered = true;
                            doPrint();
                        }
                    }
                    for (let i = 0; i < total; i++) {
                        if (imgs[i].complete) {
                            checkLoaded();
                        } else {
                            imgs[i].onload = checkLoaded;
                            imgs[i].onerror = checkLoaded;
                        }
                    }
                    setTimeout(function () {
                        if (!hasTriggered) {
                            hasTriggered = true;
                            doPrint();
                        }
                    }, 600);
                }
            }

            writeAndPrint(customerHTML, false);
        }

        function openThermalPreview(bill, staffNameOverride) {
            const store = getStore(staffNameOverride);
            const totals = calcTotalsFromPayload(bill);
            const billNo = bill.order_id || "ORD00000";
            const serialNo = bill.daily_serial_number || "";

            const custHTML = buildCustomerBill(store, bill, billNo, serialNo, totals, "ORIGINAL");
            const dupHTML = buildDuplicateBill(store, bill, billNo);

            executePrint(custHTML, dupHTML);
        }

        // ============================================================
        // KEYBOARD SHORTCUTS
        // ============================================================
        document.addEventListener('keydown', (e) => {
            const anyModalOpen = document.querySelectorAll('.kot-modal-backdrop:not(.kot-hidden)').length > 0;
            if (anyModalOpen) {
                if (e.key === 'Escape') {
                    closeCloseBillModal();
                    closeDeletePersonModal();
                    closeRemoveItemModal();
                    closeDiscountModal();
                    closeChargeModal();
                    closeCustomerModal();
                }
                return;
            }

            const staffPanel = document.getElementById('staffDropdownPanel');
            const staffPanelOpen = staffPanel && !staffPanel.classList.contains('kot-hidden');

            if (staffPanelOpen) {
                if (/^[0-9]$/.test(e.key)) {
                    e.preventDefault();
                    staffKeyBuffer += e.key;
                    const serialNumber = parseInt(staffKeyBuffer, 10);
                    if (serialNumber >= 1 && serialNumber <= staffCache.length) {
                        selectedStaffIndex = serialNumber - 1;
                        highlightSelectedStaffOption();
                    }
                    clearTimeout(staffKeyBufferTimer);
                    staffKeyBufferTimer = setTimeout(() => {
                        const n = parseInt(staffKeyBuffer, 10);
                        staffKeyBuffer = '';
                        selectStaffBySerial(n);
                    }, 500);
                    return;
                }

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    if (staffKeyBufferTimer) {
                        clearTimeout(staffKeyBufferTimer);
                        staffKeyBuffer = '';
                    }
                    if (staffCache.length > 0) {
                        selectedStaffIndex = Math.min(selectedStaffIndex + 1, staffCache.length - 1);
                        highlightSelectedStaffOption();
                    }
                    return;
                }

                if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    if (staffKeyBufferTimer) {
                        clearTimeout(staffKeyBufferTimer);
                        staffKeyBuffer = '';
                    }
                    if (staffCache.length > 0) {
                        selectedStaffIndex = Math.max(selectedStaffIndex - 1, 0);
                        highlightSelectedStaffOption();
                    }
                    return;
                }

                if (e.key === 'Enter') {
                    e.preventDefault();
                    if (staffKeyBufferTimer) {
                        clearTimeout(staffKeyBufferTimer);
                        const n = parseInt(staffKeyBuffer, 10);
                        staffKeyBuffer = '';
                        if (!isNaN(n) && n >= 1 && n <= staffCache.length) {
                            selectStaffBySerial(n);
                            return;
                        }
                    }
                    if (staffCache[selectedStaffIndex]) {
                        selectStaff(staffCache[selectedStaffIndex].id);
                    }
                    return;
                }

                if (e.key === 'Escape') {
                    e.preventDefault();
                    closeStaffDropdown();
                    return;
                }

                return;
            }

            // If staff dropdown is closed, but staffDropdownBtn has focus:
            const staffBtn = document.getElementById('staffDropdownBtn');
            if (document.activeElement === staffBtn) {
                if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    openStaffDropdown();
                    return;
                }
            }

            if (e.key === 'F1') {
                e.preventDefault();
                const orderVisible = !document.getElementById('orderView').classList.contains('kot-hidden');
                if (orderVisible) {
                    switchTab('products');
                    const search = document.getElementById('productSearch');
                    if (search) {
                        search.focus();
                        search.select();
                    }
                    if (productsCache.length > 0) {
                        if (selectedProductIndex < 0 || selectedProductIndex >= productsCache.length) {
                            selectedProductIndex = 0;
                        }
                        highlightSelectedRow();
                    }
                }
                return;
            }

            if (e.key === 'F2') {
                if (currentTableId !== null && currentPersonId !== null) {
                    e.preventDefault();
                    closeBill();
                }
                return;
            }

            if (e.key === 'F3') {
                if (currentTableId !== null && currentPersonId !== null) {
                    e.preventDefault();
                    const billTabHidden = document.getElementById('tab-bill').classList.contains('kot-hidden');
                    if (billTabHidden) {
                        switchTab('bill');
                    }
                    toggleStaffDropdown();
                }
                return;
            }

            const orderVisible = !document.getElementById('orderView').classList.contains('kot-hidden');
            const productsTabActive = orderVisible && !document.getElementById('tab-products').classList.contains('kot-hidden');

            if (!productsTabActive) return;

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (productsCache.length > 0) {
                    selectedProductIndex = Math.min(selectedProductIndex + 1, productsCache.length - 1);
                    highlightSelectedRow();
                }
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (productsCache.length > 0) {
                    selectedProductIndex = Math.max(selectedProductIndex - 1, 0);
                    highlightSelectedRow();
                }
            } else if (e.key === 'Enter') {
                if (productsCache[selectedProductIndex]) {
                    e.preventDefault();
                    incDraftQty(productsCache[selectedProductIndex].id);
                }
            } else if (e.key === 'Escape') {
                const search = document.getElementById('productSearch');
                if (document.activeElement === search && search.value) {
                    e.preventDefault();
                    search.value = '';
                    filterProducts('');
                }
            }
        });

        // Initial Load
        loadTables();
    </script>
@endsection