@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 Notification ── --}}
    <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: 'Segoe UI', sans-serif;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .kot-toast-success {
            background: linear-gradient(135deg, #00c853, #43a047);
        }

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

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

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

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

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

        .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()">×</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 = 'Error';
            }

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

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

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

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

    {{-- ===================== KOT-STYLE TAKE AWAY APP ===================== --}}
    <div id="kot-app">

        {{-- Header row: Title + Orders Pill + Segmented Tabs --}}
        <div class="kot-order-header-row">
            <div class="kot-order-left">
                <h2 class="kot-heading">Take Away</h2>
                <button type="button" class="kot-mini-btn" onclick="openTakeAwayOrdersModal('pending')"
                    style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:13px;"
                    title="View Take Away Orders">
                    <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                        <polyline points="14 2 14 8 20 8" />
                    </svg>
                    <span>Orders</span>
                    <span id="headerPendingBadge" class="kot-badge kot-badge-kitchen kot-hidden"
                        style="min-width:18px;height:18px;padding:0 6px;font-size:11px;">0</span>
                </button>
            </div>

            <div class="kot-tabs">
                <button type="button" id="tabBtnProducts" class="kot-tab-btn active" data-tab="products"
                    onclick="switchTab('products')">Products</button>
                <button type="button" id="tabBtnBill" class="kot-tab-btn" data-tab="bill" onclick="switchTab('bill')">
                    Bill <span id="billBadgeCount" class="kot-badge kot-hidden"
                        style="min-width:18px;height:18px;padding:0 5px;font-size:11px;margin-left:4px;">0</span>
                </button>
            </div>
        </div>

        {{-- Active Loaded Pending Order Banner --}}
        <div id="activePendingBanner" class="kot-kitchen-box kot-hidden"
            style="margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;">
            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
                <span class="kot-badge kot-badge-kitchen" style="font-size:11px;padding:2px 8px;">HOLD</span>
                <b id="activeOrderCodeDisplay" class="kot-hidden"></b>
                <span id="activeOrderCustDisplay" style="font-size:13px;color:#b45309;font-weight:600;"></span>
            </div>
            <button type="button" class="kot-mini-btn" onclick="clearLoadedPendingOrder()"
                style="background:#fff;border-color:#d1d5db;color:#374151;font-size:12px;padding:4px 10px;">✕ New
                Order</button>
        </div>

        {{-- ===================== TAB: PRODUCTS ===================== --}}
        <div id="tab-products">
            <div class="kot-search-wrap">
                <input type="text" id="productSearch" class="kot-input" placeholder="Search products or code… (F1)"
                    autocomplete="off">
            </div>

            <div id="productList" class="kot-product-list">
                <p class="kot-muted">Loading products…</p>
            </div>

            <div id="draftBar" class="kot-draft-bar kot-hidden" onclick="switchTab('bill')" title="Click to view bill">
                <div style="display:flex;align-items:center;gap:10px;">
                    <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                    </svg>
                    <span id="draftCount">0 items</span>
                </div>
                <div style="display:flex;align-items:center;gap:6px;">
                    <span>View bill</span>
                    <span id="draftTotal">₹0.00</span>
                    <span style="font-size:20px;line-height:1;margin-left:2px;">&rsaquo;</span>
                </div>
            </div>
        </div>

        {{-- ===================== TAB: BILL ===================== --}}
        <div id="tab-bill" class="kot-hidden">
            {{-- 1. Sent to Kitchen Section --}}
            <div class="kot-section">
                <div class="kot-section-header-row">
                    <h4 class="kot-section-title kot-kitchen-title" style="margin-bottom:0;">
                        <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 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>

            {{-- 2. Items in bill Section --}}
            <div class="kot-section">
                <div class="kot-section-header-row">
                    <h4 class="kot-section-title" style="margin-bottom:0;">
                        <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                        </svg>
                        Items in bill <span class="kot-badge" id="newCartCount">0</span>
                    </h4>
                    <button type="button" class="kot-mini-btn"
                        style="border:1.5px solid #f59e0b;background:#fff;color:#d97706;font-weight:700;padding:5px 14px;border-radius:999px;cursor:pointer;"
                        onclick="switchTab('products')">+ Add Product</button>
                </div>
                <p class="kot-hint" style="margin-top:6px;">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>

            {{-- 3. Payment Mode --}}
            <div class="kot-section">
                <h4 class="kot-section-title">Payment Mode</h4>
                <select id="paymentMode" class="form-select kot-input" style="cursor:pointer;">
                    <option value="cash" selected>Cash</option>
                    <option value="credit">Credit</option>
                    <option value="card">Card</option>
                    <option value="upi">UPI</option>
                </select>
            </div>

            {{-- 4. Bill Summary --}}
            <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>

            {{-- 5. Staff Field (F3) --}}
            <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>

            {{-- 6. Four Action Buttons (Matching App: Pending, Completed, Retry Kitchen Bill, Close Order) --}}
            <div style="margin-top: 18px;">
                <div class="ta-btn-grid">
                    <button type="button" class="ta-btn-outline" onclick="openTakeAwayOrdersModal('pending')"
                        title="View Pending Orders">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
                            <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
                        </svg>
                        <span>Pending</span>
                        <span id="btnPendingBadge" class="kot-badge kot-badge-kitchen kot-hidden"
                            style="min-width:18px;height:18px;padding:0 5px;font-size:11px;margin-left:4px;">0</span>
                    </button>
                    <button type="button" class="ta-btn-outline" onclick="openTakeAwayOrdersModal('completed')"
                        title="View Completed Orders">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>Completed</span>
                    </button>
                </div>
                <div class="ta-btn-grid" style="margin-top: 10px;">
                    <button type="button" id="btnKitchenAction" class="kot-btn kot-btn-kitchen"
                        onclick="openCustomerModal('kitchen')"
                        style="display:inline-flex;align-items:center;justify-content:center;gap:8px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 8h1a4 4 0 0 1 0 8h-1" />
                            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
                            <line x1="6" y1="1" x2="6" y2="4" />
                            <line x1="10" y1="1" x2="10" y2="4" />
                            <line x1="14" y1="1" x2="14" y2="4" />
                        </svg>
                        <span>Kitchen Bill</span>
                    </button>
                    <button type="button" id="btnCloseAction" class="kot-btn kot-btn-close"
                        onclick="openCustomerModal('close')"
                        style="display:inline-flex;align-items:center;justify-content:center;gap:8px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>Close Order</span>
                    </button>
                </div>
            </div>
        </div>

    </div>

    {{-- ===================== CLOSE ORDER CONFIRMATION 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 Order</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 Take Away order? This will deduct stock and
                    finalize the sale.</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 Order</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. Festival 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 (e.g. Packing charge)">
                </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 DETAILS 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
                        <span id="custNameReq" style="color:#ef4444;font-weight:bold;">*</span>
                        <span id="custNameOpt" class="kot-muted"
                            style="font-weight:normal;font-size:12px;display:none;">(optional)</span>
                    </label>
                    <input type="text" id="customerNameInput" class="kot-input" placeholder="Customer name">
                </div>
                <div class="kot-field">
                    <label for="customerPhoneInput">
                        Phone
                        <span id="custPhoneReq" style="color:#ef4444;font-weight:bold;">*</span>
                        <span id="custPhoneOpt" class="kot-muted"
                            style="font-weight:normal;font-size:12px;display:none;">(optional)</span>
                    </label>
                    <input type="text" id="customerPhoneInput" class="kot-input" maxlength="10"
                        placeholder="10-digit mobile number">
                </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>

    {{-- ===================== TAKE AWAY ORDERS MODAL ===================== --}}
    <div id="takeAwayOrdersModalBackdrop" class="kot-modal-backdrop kot-hidden"
        onclick="if(event.target===this)closeTakeAwayOrdersModal()">
        <div class="kot-modal" style="max-width:540px;max-height:85vh;display:flex;flex-direction:column;">
            <div class="kot-modal-header">
                <div style="display:flex;align-items:center;gap:8px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                        <polyline points="14 2 14 8 20 8" />
                    </svg>
                    <h3 style="margin:0;">Take Away Orders</h3>
                </div>
                <div style="display:flex;align-items:center;gap:6px;">
                    <button type="button" class="kot-mini-btn" onclick="refreshTakeAwayOrders()" title="Refresh">↻
                        Refresh</button>
                    <button type="button" class="kot-modal-close" onclick="closeTakeAwayOrdersModal()">&times;</button>
                </div>
            </div>

            <div style="padding:12px 16px;border-bottom:1px solid #f3f4f6;">
                <div class="kot-tabs" style="width:100%;display:flex;">
                    <button type="button" id="taTabPending" class="kot-tab-btn active" style="flex:1;"
                        onclick="switchOrdersTab('pending')">Pending</button>
                    <button type="button" id="taTabCompleted" class="kot-tab-btn" style="flex:1;"
                        onclick="switchOrdersTab('completed')">Completed</button>
                </div>
            </div>

            <div class="kot-modal-body" id="taOrdersList" style="flex:1;overflow-y:auto;padding:14px 16px;">
                <p class="kot-muted" style="text-align:center;padding:20px;">Loading orders…</p>
            </div>
        </div>
    </div>

    {{-- Fallback Settings for Thermal Receipt --}}
    <input type="hidden" id="settStoreName" value="{{ $store_setting->store_name ?? 'Iyengar Bakery' }}">
    <input type="hidden" id="settAddress" value="{{ $store_setting->address ?? 'Vetturnimadam , Nagercoil - 629003' }}">
    <input type="hidden" id="settGstin" value="{{ $store_setting->gstin ?? '33JRFPK4606B1Z5' }}">
    <input type="hidden" id="settCell" value="{{ $store_setting->cell ?? '9943873319' }}">

    {{-- ===================== STYLES (EXACT KOT DESIGN) ===================== --}}
    <style>
        #kot-app {
            max-width: 760px;
            margin: 0 auto;
            font-family: inherit;
            color: #1f2937;
        }

        .kot-heading {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
        }

        .kot-subheading {
            color: #6b7280;
            font-size: 13px;
            margin: 0 0 16px;
        }

        .kot-muted {
            color: #9ca3af;
            font-size: 14px;
        }

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

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

        /* Header + tabs merged onto one row */
        .kot-order-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
        }

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

        .kot-tabs {
            display: inline-flex;
            gap: 4px;
            background: #f3f4f6;
            border-radius: 10px;
            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;
            justify-content: center;
            transition: all .15s ease;
        }

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

        .kot-search-wrap {
            margin-bottom: 12px;
        }

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

        .kot-input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        .kot-product-list {
            max-height: 55vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 8px;
            background: #fff;
        }

        .kot-product-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1.5px solid #edf2f7;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 10px;
            background: #fff;
            cursor: pointer;
            gap: 12px;
            transition: all .15s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }

        .kot-product-row:hover {
            border-color: #cbd5e1;
            background: #fafbfc;
        }

        .kot-product-row-selected {
            border-color: #ffbe0b !important;
            background: #fffdf5 !important;
        }

        .kot-prod-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: #eff6ff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        .kot-product-name {
            font-weight: 700;
            font-size: 14px;
            color: #111827;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .kot-product-meta {
            font-size: 12px;
            color: #64748b;
            margin-top: 2px;
        }

        .kot-product-price {
            font-size: 14px;
            font-weight: 800;
            color: #111827;
            margin-top: 2px;
        }

        .kot-add-btn {
            background: #ffbe0b;
            color: #ffffff;
            border: none;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(255, 190, 11, 0.4);
            transition: all 0.15s ease;
        }

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

        .kot-add-btn:active {
            transform: scale(0.94);
        }

        .kot-draft-bar {
            position: sticky;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffbe0b;
            color: #111827;
            padding: 14px 18px;
            margin-top: 12px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(255, 190, 11, 0.4);
            z-index: 10;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .kot-draft-bar:hover {
            background: #f59e0b;
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
        }

        .kot-draft-bar:active {
            transform: scale(0.99);
        }

        .kot-draft-bar span:first-child {
            font-weight: 700;
            font-size: 15px;
            color: #111827;
        }

        .kot-draft-add-btn {
            background: #111827;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 10px 16px;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
        }

        .kot-section {
            margin-bottom: 18px;
        }

        .kot-section-title {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #6b7280;
            margin: 0 0 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .kot-kitchen-title {
            color: #b45309;
        }

        .kot-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            height: 24px;
            padding: 0 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            background: #dbeafe;
            color: #2563eb;
        }

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

        .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-kitchen-box {
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 12px;
            padding: 10px 14px;
        }

        .kot-kitchen-box .kot-muted {
            margin: 4px 0;
        }

        .kot-new-items-box {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 10px 14px;
        }

        .kot-new-items-box .kot-muted {
            margin: 4px 0;
        }

        .kot-line-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f3f4f6;
            padding: 8px 0;
            font-size: 14px;
        }

        .kot-line-row:last-child {
            border-bottom: none;
        }

        .kot-cart-item {
            border-bottom: 1px solid #f3f4f6;
            padding: 10px 0;
        }

        .kot-cart-item:last-child {
            border-bottom: none;
        }

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

        .kot-cart-item-price {
            text-align: right;
            font-size: 13px;
            color: #374151;
            font-weight: 600;
            margin: 4px 0 6px;
        }

        .kot-note-input {
            font-size: 13px;
            padding: 8px 10px;
        }

        .kot-line-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

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

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

        .kot-icon-btn:hover {
            color: #b91c1c;
        }

        .kot-line-stepper {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            border: 2px solid #ffbe0b;
            border-radius: 8px;
            background: #ffffff;
            min-width: 100px;
            height: 36px;
            padding: 0 4px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .kot-line-stepper button {
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            color: #111827;
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 4px;
            transition: background 0.1s;
        }

        .kot-line-stepper button:hover {
            background: #fef3c7;
        }

        .kot-line-stepper button:active {
            transform: scale(0.92);
        }

        .kot-line-stepper span {
            min-width: 26px;
            text-align: center;
            font-size: 15px;
            font-weight: 800;
            color: #111827;
        }

        .kot-bill-header-row {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-bottom: 14px;
        }

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

        .kot-mini-btn {
            border: 1px solid #fcd34d;
            background: #fffbeb;
            color: #b45309;
            font-weight: 600;
            font-size: 12px;
            padding: 6px 14px;
            border-radius: 999px;
            cursor: pointer;
        }

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

        .kot-radio-option {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

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

        .kot-summary {
            background: #f9fafb;
            border-radius: 10px;
            padding: 14px;
            margin: 16px 0;
        }

        .kot-summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 3px 0;
            color: #4b5563;
        }

        .kot-summary-total {
            font-weight: 700;
            font-size: 16px;
            color: #111827;
            border-top: 1px solid #e5e7eb;
            margin-top: 6px;
            padding-top: 8px;
        }

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

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

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

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

        .kot-staff-option {
            padding: 10px 12px;
            font-size: 14px;
            cursor: pointer;
        }

        .kot-staff-option:hover {
            background: #f3f4f6;
        }

        .kot-staff-option-selected {
            background: #eff6ff;
            color: #2563eb;
            font-weight: 600;
        }

        .kot-btn-hold {
            width: 100%;
            border: 1px solid #d97706;
            background: #fff;
            color: #d97706;
            font-weight: 700;
            font-size: 14px;
            padding: 11px 0;
            border-radius: 10px;
            cursor: pointer;
            margin-top: 10px;
        }

        .kot-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .kot-btn {
            flex: 1;
            border: none;
            border-radius: 10px;
            padding: 12px 0;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
        }

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

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

        .kot-btn-primary {
            background: #2563eb;
            color: #fff;
        }

        .kot-btn-secondary {
            background: #f3f4f6;
            color: #374151;
        }

        .kot-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            z-index: 1000;
        }

        .kot-modal {
            background: #fff;
            width: 100%;
            max-width: 420px;
            border-radius: 16px 16px 0 0;
            overflow: hidden;
        }

        @media (min-width: 640px) {
            .kot-modal-backdrop {
                align-items: center;
            }

            .kot-modal {
                border-radius: 16px;
            }
        }

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

        .kot-modal-header h3 {
            margin: 0;
            font-size: 16px;
        }

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

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

        .kot-modal-footer {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px;
            border-top: 1px solid #f3f4f6;
        }

        #tab-products,
        #tab-bill {
            margin-top: 0;
            padding-top: 0;
        }

        /* Order item cards in Take Away orders modal */
        .ta-order-card {
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            background: #fff;
        }

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

        .ta-order-code {
            font-weight: 700;
            font-size: 14px;
            color: #1e293b;
        }

        .ta-order-meta {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 8px;
        }

        .ta-order-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .ta-btn-grid {
            display: flex;
            gap: 10px;
        }

        .ta-btn-outline {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1.5px solid #2563eb;
            background: #fff;
            color: #2563eb;
            font-weight: 700;
            font-size: 14px;
            padding: 12px 14px;
            border-radius: 10px;
            cursor: pointer;
            transition: all .15s ease;
        }

        .ta-btn-outline:hover {
            background: #eff6ff;
        }

        .ta-btn-outline:active {
            transform: scale(0.98);
        }
    </style>

    {{-- ===================== JAVASCRIPT ===================== --}}
    <script>
        // ------------------------------------------------------------------
        // Routes
        // ------------------------------------------------------------------
        const ROUTES = {
            products: "{{ route('billing.get_take_away_products') }}",
            staffList: "{{ route('billing.get_take_away_staff_list') }}",
            holdOrder: "{{ route('billing.take_away_hold') }}",
            removeProduct: "{{ route('billing.take_away_remove_product') }}",
            changeQuantity: "{{ route('billing.take_away_change_quantity') }}",
            saveOrder: "{{ route('billing.take_away_save_order') }}",
            processing: "{{ route('billing.take_away_processing') }}",
            processingView: (id) => "{{ route('billing.take_away_processing_view', ['id' => 'ID_PLACEHOLDER']) }}".replace('ID_PLACEHOLDER', id),
            completed: "{{ route('billing.take_away_completed') }}",
            completedView: (id) => "{{ route('billing.take_away_completed_view', ['id' => 'ID_PLACEHOLDER']) }}".replace('ID_PLACEHOLDER', id),
        };

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

        // ------------------------------------------------------------------
        // State
        // ------------------------------------------------------------------
        let currentHoldOrderId = null; // ID of active held order if loaded
        let currentHoldOrderIds = [];   // Array of hold order IDs for current customer session
        let currentHoldOrderCodes = [];   // Array of KOT codes (e.g. ['KOT10001', 'KOT10002'])
        let currentHoldOrderCode = null;

        let allProductsCache = [];   // full list loaded once
        let productsCache = [];   // filtered subset
        let selectedProductIndex = 0;
        let draftQuantities = {};   // productId -> qty not yet committed

        let staffCache = [];   // staff list
        let staffKeyBuffer = '';
        let staffKeyBufferTimer = null;

        let newCart = [];   // uncommitted items: { product_id, name, unit, price, qty, is_kot, note }
        let unsentHoldItems = [];   // items from hold order with is_kot == 0
        let sentLineItems = [];   // items from hold order with is_kot == 1

        let sentTotals = { subtotal: 0, gst: 0, total: 0 };
        let hasSentFirstHoldOrder = false;

        let currentDiscount = { type: 'flat', value: 0, offer: null, reason: null };
        let currentCharge = { amount: 0, reason: null };

        let customerDetails = { user_id: null, customer_name: null, customer_phone: null };
        let pendingCustomerAction = null; // 'kitchen' | 'close' | 'hold'

        let pendingRemoveHoldId = null;
        let pendingRemoveDetailId = null;

        let activeOrdersTab = 'pending'; // 'pending' | 'completed' in Orders Modal

        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());
        }

        // ------------------------------------------------------------------
        // Tab switching: Products <-> Bill
        // ------------------------------------------------------------------
        function switchTab(tab) {
            const isProducts = tab === 'products';
            document.getElementById('tab-products').classList.toggle('kot-hidden', !isProducts);
            document.getElementById('tab-bill').classList.toggle('kot-hidden', isProducts);

            document.getElementById('tabBtnProducts').classList.toggle('active', isProducts);
            document.getElementById('tabBtnBill').classList.toggle('active', !isProducts);

            if (isProducts) {
                renderProductList();
                updateDraftBar();
                const search = document.getElementById('productSearch');
                if (search) setTimeout(() => search.focus(), 80);
            }
        }

        // ------------------------------------------------------------------
        // Products Loading & Searching
        // ------------------------------------------------------------------
        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();
                })
                .catch(() => {
                    showKotToast('error', 'Network error loading products.');
                });
        }

        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 A15), 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 getProductCartQty(productId) {
            const item = newCart.find((c) => c.product_id === productId);
            return item ? (parseFloat(item.qty) || 0) : 0;
        }

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

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

            productsCache.forEach((p, idx) => {
                const qty = getProductCartQty(p.id);
                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 style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;">
                                                        <div class="kot-prod-icon">
                                                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                                                                <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                                                <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                                            </svg>
                                                        </div>
                                                        <div style="flex:1;min-width:0;">
                                                            <div class="kot-product-name">${p.name} ${targetBadge}</div>
                                                            <div class="kot-product-meta">${p.unit} &middot; Code: ${p.code}</div>
                                                            <div class="kot-product-price">₹${p.price.toFixed(2)}</div>
                                                        </div>
                                                    </div>
                                                    ${qty > 0 ? `
                                                        <div class="kot-line-stepper">
                                                            <button type="button" data-action="dec" title="Decrease">&minus;</button>
                                                            <span>${qty}</span>
                                                            <button type="button" data-action="inc" title="Increase">&plus;</button>
                                                        </div>
                                                    ` : `<button type="button" class="kot-add-btn" data-action="inc" title="Add to bill">&plus;</button>`}
                                                `;

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

                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);
            });
        }

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

        function incDraftQty(productId) {
            const p = allProductsCache.find((item) => item.id === productId);
            if (!p) return;

            const existing = newCart.find((c) => c.product_id === productId);
            if (existing) {
                existing.qty = String(parseFloat(existing.qty) + 1);
            } else {
                newCart.push({
                    product_id: productId,
                    name: p.name,
                    unit: p.unit,
                    price: p.price,
                    qty: "1",
                    is_kot: 0,
                    print_target: p.print_target || null,
                    note: null,
                });
            }

            renderProductList();
            renderNewCart();
            updateBillSummary();
            updateDraftBar();
        }

        function decDraftQty(productId) {
            const existing = newCart.find((c) => c.product_id === productId);
            if (!existing) return;

            const current = parseFloat(existing.qty) || 0;
            if (current <= 1) {
                newCart = newCart.filter((c) => c.product_id !== productId);
            } else {
                existing.qty = String(current - 1);
            }

            renderProductList();
            renderNewCart();
            updateBillSummary();
            updateDraftBar();
        }

        function updateDraftBar() {
            const bar = document.getElementById('draftBar');
            if (!bar) return;

            let totalItems = 0;
            let totalPrice = 0;

            newCart.forEach((item) => {
                const qty = parseFloat(item.qty) || 0;
                totalItems += qty;
                totalPrice += (parseFloat(item.price) || 0) * qty;
            });

            if (totalItems > 0) {
                document.getElementById('draftCount').textContent = totalItems + (totalItems === 1 ? ' item' : ' items');
                document.getElementById('draftTotal').textContent = '₹' + totalPrice.toFixed(2);
                bar.classList.remove('kot-hidden');
            } else {
                bar.classList.add('kot-hidden');
            }
        }

        function addDraftToBill() {
            switchTab('bill');
        }

        // ------------------------------------------------------------------
        // Staff Dropdown & Shortcuts
        // ------------------------------------------------------------------
        function loadStaff(callback) {
            fetch(ROUTES.staffList)
                .then((res) => res.json())
                .then((data) => {
                    if (!data.status) return;
                    staffCache = (data.data || []).sort((a, b) => a.id - b.id);
                    renderStaffDropdown();
                    if (callback) callback();
                });
        }

        function toggleStaffDropdown() {
            const panel = document.getElementById('staffDropdownPanel');
            panel.classList.toggle('kot-hidden');
        }

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

        function renderStaffDropdown() {
            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;
            }

            const selectedId = parseInt(document.getElementById('staffSelect').value) || null;

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

        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();
            }
        });

        // ------------------------------------------------------------------
        // Bill Tab Rendering
        // ------------------------------------------------------------------
        function renderNewCart() {
            const container = document.getElementById('newCartList');
            container.innerHTML = '';

            const totalNewItems = newCart.length;
            document.getElementById('newCartCount').textContent = totalNewItems;

            // Update badge on Bill Tab
            const totalBillItems = totalNewItems + sentLineItems.length;
            const billBadge = document.getElementById('billBadgeCount');
            if (totalBillItems > 0) {
                billBadge.textContent = totalBillItems;
                billBadge.classList.remove('kot-hidden');
            } else {
                billBadge.classList.add('kot-hidden');
            }

            if (newCart.length === 0) {
                container.innerHTML = '<p class="kot-muted">No items added.</p>';
                return;
            }

            newCart.forEach((item, idx) => {
                const p = allProductsCache.find((prod) => prod.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 (p && p.print_target === 'kitchen') {
                    targetTag = `<span class="kot-target-badge kot-target-kitchen" title="Fast Food category - Kitchen printer">🍳 Kitchen</span>`;
                } else if (p && p.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 price = p ? p.price : (item.price || 0);
                const qtyNum = parseFloat(item.qty) || 1;
                const lineTotal = price * qtyNum;

                const row = document.createElement('div');
                row.className = 'kot-cart-item';
                row.innerHTML = `
                                                    <div class="kot-cart-item-top">
                                                        <div 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' : ''}>
                                                            </label>
                                                            <span style="font-weight:600;">${item.name} ${targetTag}</span>
                                                        </div>
                                                        <div style="display:flex;align-items:center;">
                                                            <span class="kot-line-stepper">
                                                                <button type="button" data-action="dec">&minus;</button>
                                                                <span>${qtyNum}</span>
                                                                <button type="button" data-action="inc">&plus;</button>
                                                            </span>
                                                            <button type="button" class="kot-icon-btn" data-action="del" title="Remove">${TRASH_ICON}</button>
                                                        </div>
                                                    </div>
                                                    <div class="kot-cart-item-price">₹${lineTotal.toFixed(2)}</div>
                                                    <input type="text" class="kot-input kot-note-input" placeholder="Add note (optional)" value="${item.note ? item.note.replace(/"/g, '&quot;') : ''}">
                                                `;

                row.querySelector('.kot-line-checkbox').onchange = (e) => {
                    item.is_kot = e.target.checked ? 1 : 0;
                    renderNewCart();
                };
                row.querySelector('[data-action="inc"]').onclick = () => {
                    item.qty = String(qtyNum + 1);
                    renderNewCart();
                    updateBillSummary();
                    updateDraftBar();
                    renderProductList();
                };
                row.querySelector('[data-action="dec"]').onclick = () => {
                    if (qtyNum > 1) {
                        item.qty = String(qtyNum - 1);
                    } else {
                        newCart.splice(idx, 1);
                    }
                    renderNewCart();
                    updateBillSummary();
                    updateDraftBar();
                    renderProductList();
                };
                row.querySelector('[data-action="del"]').onclick = () => {
                    newCart.splice(idx, 1);
                    renderNewCart();
                    updateBillSummary();
                    updateDraftBar();
                    renderProductList();
                };
                row.querySelector('.kot-note-input').oninput = (e) => {
                    item.note = e.target.value.trim() || null;
                };

                container.appendChild(row);
            });
        }

        function renderSentItems() {
            const container = document.getElementById('sentItemsList');
            container.innerHTML = '';
            document.getElementById('sentCartCount').textContent = sentLineItems.length;

            if (sentLineItems.length === 0) {
                container.innerHTML = '<p class="kot-muted">Nothing sent yet.</p>';
                return;
            }

            sentLineItems.forEach((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';
                const rowTotal = parseFloat(line.row_total || (line.price * line.quantity)) || 0;
                row.innerHTML = `
                                                    <span>${line.product_name} (${line.quantity} ${line.unit || 'pcs'}) ${targetTag}</span>
                                                    <span>
                                                        ₹${rowTotal.toFixed(2)}
                                                        <button type="button" class="kot-icon-btn" title="Remove" onclick="promptRemoveSentItem(${line.hold_order_id || currentHoldOrderId || 0}, ${line.id})">${TRASH_ICON}</button>
                                                    </span>
                                                `;
                container.appendChild(row);
            });
        }

        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() {
            let newItemsTotal = 0;
            newCart.forEach((item) => {
                const p = allProductsCache.find((prod) => prod.id === item.product_id);
                const price = p ? p.price : (item.price || 0);
                newItemsTotal += price * (parseFloat(item.qty) || 1);
            });

            const amountBeforeDiscount = sentTotals.total + newItemsTotal;

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

            const chargeAmount = currentCharge.amount || 0;
            const total = Math.max(0, 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');
            }
        }

        // ------------------------------------------------------------------
        // Removing Sent Line Items
        // ------------------------------------------------------------------
        function promptRemoveSentItem(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 holdId = pendingRemoveHoldId;
            const detailId = pendingRemoveDetailId;
            closeRemoveItemModal();

            if (!detailId) return;

            postJson(ROUTES.removeProduct, {
                hold_order_id: holdId,
                detail_id: detailId,
            }).then((res) => {
                if (!res.status) {
                    showKotToast('error', res.message || 'Failed to remove item.');
                    return;
                }

                // Remove from local sentLineItems
                sentLineItems = sentLineItems.filter((i) => parseInt(i.id) !== parseInt(detailId));

                // If hold order was completely removed on server
                if (res.data?.order_removed && holdId) {
                    currentHoldOrderIds = currentHoldOrderIds.filter((id) => parseInt(id) !== parseInt(holdId));
                    if (currentHoldOrderIds.length === 0) {
                        currentHoldOrderId = null;
                        currentHoldOrderCodes = [];
                        currentHoldOrderCode = null;
                        document.getElementById('activePendingBanner').classList.add('kot-hidden');
                    } else {
                        currentHoldOrderId = currentHoldOrderIds[0];
                    }
                }

                recalculateSentTotals();
                renderSentItems();
                updateBillSummary();
                showKotToast('success', res.message || 'Item removed successfully.');
                updatePendingBadge();
            }).catch(() => {
                showKotToast('error', 'Network error removing item.');
            });
        }

        function recalculateSentTotals() {
            sentTotals.total = sentLineItems.reduce((acc, i) => acc + (parseFloat(i.row_total || (i.price * i.quantity)) || 0), 0);
            sentTotals.subtotal = sentTotals.total;
        }

        // ------------------------------------------------------------------
        // Discount Modal
        // ------------------------------------------------------------------
        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();
        }

        // ------------------------------------------------------------------
        // Charge Modal
        // ------------------------------------------------------------------
        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();
        }

        // ------------------------------------------------------------------
        // Customer Details Modal
        // Dynamically reflects backend requirements:
        // - In `take_away_hold` (used by Kitchen Bill and Hold): name & phone are REQUIRED.
        // - In `take_away_save_order`: if currentHoldOrderId exists, they are NULLABLE.
        //   If creating a brand new order on direct Close, backend delegates to take_away_hold, so they are REQUIRED.
        // ------------------------------------------------------------------
        function openCustomerModal(action) {
            pendingCustomerAction = action;

            const isRequired = (action === 'kitchen' || action === 'hold' || (!currentHoldOrderId && action === 'close'));

            document.getElementById('custNameReq').style.display = isRequired ? 'inline' : 'none';
            document.getElementById('custNameOpt').style.display = isRequired ? 'none' : 'inline';
            document.getElementById('custPhoneReq').style.display = isRequired ? 'inline' : 'none';
            document.getElementById('custPhoneOpt').style.display = isRequired ? 'none' : 'inline';

            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() {
            const name = (document.getElementById('customerNameInput').value || '').trim();
            const phone = (document.getElementById('customerPhoneInput').value || '').trim();
            const action = pendingCustomerAction;

            const isRequired = (action === 'kitchen' || action === 'hold' || (!currentHoldOrderId && action === 'close'));

            if (isRequired) {
                if (!name) {
                    showKotToast('error', 'Customer name is required.');
                    return;
                }
                if (!phone) {
                    showKotToast('error', 'Customer phone number is required.');
                    return;
                }
                if (!/^\d{10}$/.test(phone)) {
                    showKotToast('error', 'Customer phone number must be exactly 10 digits.');
                    return;
                }
            } else {
                if (phone && !/^\d{10}$/.test(phone)) {
                    showKotToast('error', 'Customer phone number must be exactly 10 digits.');
                    return;
                }
            }

            customerDetails = {
                user_id: customerDetails.user_id,
                customer_name: name || null,
                customer_phone: phone || null,
            };

            closeCustomerModal();

            if (action === 'kitchen') {
                executeSendKitchenBill();
            } else if (action === 'close') {
                confirmCloseBill();
            } else if (action === 'hold') {
                executeHoldOrder();
            }
        }

        // ------------------------------------------------------------------
        // Orders Actions: Kitchen Bill, Hold, Close Order
        // ------------------------------------------------------------------
        function prepareProductsPayload(forKitchenOnly) {
            let list = [];

            // Carry over sent line items if hold order already existed
            sentLineItems.forEach((i) => {
                list.push({
                    product_id: i.product_id,
                    qty: String(i.quantity),
                    is_kot: i.is_kot ?? 0,
                    already_sent: 1, // Already sent to printer, stamp printed_at
                    note: i.note || null,
                });
            });

            // New cart items
            newCart.forEach((i) => {
                // When forKitchenOnly (printKitchen) is true:
                //   i.is_kot === 1 (ticked skip) => 1 ("no need to go anywhere", skipped by printer)
                //   i.is_kot === 0 (unticked)    => 0 (sent to kitchen or juice printer via SendKotBillToPrinter)
                // When forKitchenOnly is false (hold order without printing):
                //   is_kot: 1 (do not send to printer)
                const isKotValue = forKitchenOnly ? (i.is_kot === 1 ? 1 : 0) : 1;
                list.push({
                    product_id: i.product_id,
                    qty: String(i.qty),
                    is_kot: isKotValue,
                    already_sent: 0,
                    note: i.note || null,
                });
            });

            return list;
        }

        function executeSendKitchenBill() {
            const staffId = document.getElementById('staffSelect').value;
            if (!staffId) {
                showKotToast('error', 'Please select a staff member (F3).');
                return;
            }

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

            // Send ONLY newly added cart products to generate a new KOT slip
            const productsPayload = newCart.map((i) => ({
                product_id: i.product_id,
                qty: String(i.qty),
                is_kot: i.is_kot === 1 ? 1 : 0,
                note: i.note || null,
            }));

            const payload = {
                staff_id: parseInt(staffId),
                print_kitchen: 1,
                payment_mode: document.getElementById('paymentMode').value,
                user_id: customerDetails.user_id,
                customer_name: customerDetails.customer_name,
                customer_phone: customerDetails.customer_phone,
                discount_type: currentDiscount.type || 'none',
                discount_value: currentDiscount.value || 0,
                charge: currentCharge.amount || 0,
                products: productsPayload,
            };

            postJson(ROUTES.holdOrder, payload)
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to send to kitchen.');
                        return;
                    }

                    const order = data.data;
                    const newOrderId = order.id;
                    const newOrderCode = order.order_id || ('KOT#' + newOrderId);

                    if (!currentHoldOrderIds.includes(newOrderId)) {
                        currentHoldOrderIds.push(newOrderId);
                    }
                    if (!currentHoldOrderCodes.includes(newOrderCode)) {
                        currentHoldOrderCodes.push(newOrderCode);
                    }
                    currentHoldOrderId = newOrderId;
                    currentHoldOrderCode = newOrderCode;

                    // Append newly sent items to sentLineItems
                    const prods = order.products || order.kothold_order_details || order.kotholdOrderDetails || [];
                    prods.forEach((p) => {
                        const prodRef = allProductsCache.find((item) => item.id === p.product_id);
                        sentLineItems.push({
                            id: p.id,
                            hold_order_id: p.order_id || newOrderId,
                            order_id_code: newOrderCode,
                            product_id: p.product_id,
                            print_target: p.print_target || (prodRef ? prodRef.print_target : null),
                            product_name: p.product_name,
                            quantity: p.quantity,
                            unit: p.unit || 'pcs',
                            price: parseFloat(p.price),
                            row_total: p.row_total,
                            note: p.note,
                            is_kot: p.is_kot,
                        });
                    });

                    // Clear new cart as these items are now in kitchen bill
                    newCart = [];

                    recalculateSentTotals();

                    // Display active banner
                    const banner = document.getElementById('activePendingBanner');
                    const codeDisplay = document.getElementById('activeOrderCodeDisplay');
                    if (codeDisplay) codeDisplay.textContent = '';
                    document.getElementById('activeOrderCustDisplay').textContent = customerDetails.customer_name ? `${customerDetails.customer_name} (${customerDetails.customer_phone || ''})` : '';
                    banner.classList.remove('kot-hidden');

                    renderSentItems();
                    renderNewCart();
                    updateBillSummary();
                    updateDraftBar();
                    renderProductList();
                    showKotToast('success', 'Sent to kitchen / juice printer (' + newOrderCode + ').');
                    switchTab('bill');
                    updatePendingBadge();
                })
                .catch(() => {
                    showKotToast('error', 'Network error sending to kitchen/juice.');
                });
        }

        function executeHoldOrder() {
            const staffId = document.getElementById('staffSelect').value;
            if (!staffId) {
                showKotToast('error', 'Please select a staff member (F3).');
                return;
            }

            if (newCart.length === 0 && sentLineItems.length === 0) {
                showKotToast('error', 'Add at least one product before holding order.');
                return;
            }

            if (newCart.length === 0) {
                showKotToast('success', 'Order is already held in kitchen.');
                clearLoadedPendingOrder();
                updatePendingBadge();
                return;
            }

            const productsPayload = newCart.map((i) => ({
                product_id: i.product_id,
                qty: String(i.qty),
                is_kot: 1,
                note: i.note || null,
            }));

            const payload = {
                staff_id: parseInt(staffId),
                print_kitchen: 0,
                payment_mode: document.getElementById('paymentMode').value,
                user_id: customerDetails.user_id,
                customer_name: customerDetails.customer_name,
                customer_phone: customerDetails.customer_phone,
                discount_type: currentDiscount.type || 'none',
                discount_value: currentDiscount.value || 0,
                charge: currentCharge.amount || 0,
                products: productsPayload,
            };

            postJson(ROUTES.holdOrder, payload)
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to hold Take Away order.');
                        return;
                    }

                    showKotToast('success', 'Take Away held successfully (' + (data.data?.order_id || '') + ').');
                    clearLoadedPendingOrder();
                    updatePendingBadge();
                })
                .catch(() => {
                    showKotToast('error', 'Network error holding order.');
                });
        }

        function closeBill() {
            openCustomerModal('close');
        }

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

        function confirmCloseBill() {
            closeCloseBillModal();

            const staffId = document.getElementById('staffSelect').value;
            if (!staffId) {
                showKotToast('error', 'Please select a staff member (F3).');
                return;
            }

            if (newCart.length === 0 && sentLineItems.length === 0) {
                showKotToast('error', 'Add at least one product to bill before closing order.');
                return;
            }

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

            // Unsent items in newCart (if any)
            let productsPayload = [];
            if (newCart.length > 0) {
                productsPayload = newCart.map((i) => ({
                    product_id: i.product_id,
                    qty: String(i.qty),
                    is_kot: i.is_kot === 1 ? 1 : 0,
                    note: i.note || null,
                }));
            }

            const payload = {
                hold_order_ids: currentHoldOrderIds,
                hold_order_id: currentHoldOrderId,
                staff_id: parseInt(staffId),
                payment_mode: document.getElementById('paymentMode').value,
                user_id: customerDetails.user_id,
                customer_name: customerDetails.customer_name,
                customer_phone: customerDetails.customer_phone,
                discount_type: currentDiscount.type || 'none',
                discount_value: currentDiscount.value || 0,
                charge: currentCharge.amount || 0,
                products: productsPayload.length > 0 ? productsPayload : undefined,
            };

            postJson(ROUTES.saveOrder, payload)
                .then((data) => {
                    if (!data.status) {
                        showKotToast('error', data.message || 'Unable to close Take Away order.');
                        return;
                    }

                    const orderData = data.data?.completed_order || data.data?.order || data.data || {};
                    showKotToast('success', 'Order closed: ' + (orderData.order_id || ''));

                    // Print thermal receipt
                    try {
                        openThermalPreview(orderData, billedByStaffName);
                    } catch (printErr) {
                        console.error('Print Error:', printErr);
                        showKotToast('error', 'Order closed, but printing failed.');
                    }

                    clearLoadedPendingOrder();
                    updatePendingBadge();
                })
                .catch(() => {
                    showKotToast('error', 'Network error closing order.');
                });
        }

        // ------------------------------------------------------------------
        // Loaded Hold Order Management
        // ------------------------------------------------------------------
        function setLoadedHoldOrder(order) {
            currentHoldOrderId = order.id;
            currentHoldOrderIds = order.hold_order_ids || [order.id];
            currentHoldOrderCodes = order.hold_order_codes || [order.order_id || ('ID #' + order.id)];
            currentHoldOrderCode = currentHoldOrderCodes[0];

            customerDetails.user_id = order.user_id || null;
            customerDetails.customer_name = order.customer_name || null;
            customerDetails.customer_phone = order.customer_phone || null;

            if (order.staff_id) {
                selectStaff(order.staff_id);
            }

            if (order.discount_type) {
                currentDiscount = {
                    type: order.discount_type,
                    value: parseFloat(order.discount_value) || 0,
                    offer: null,
                    reason: null,
                };
            }
            if (order.charge) {
                currentCharge = { amount: parseFloat(order.charge) || 0, reason: null };
            }

            // Distribute products into sent items and newCart
            const products = order.products || order.kothold_order_details || order.kotholdOrderDetails || [];
            sentLineItems = [];
            newCart = [];

            products.forEach((p) => {
                const prodRef = allProductsCache.find((item) => item.id === p.product_id);
                sentLineItems.push({
                    id: p.id,
                    hold_order_id: p.order_id || order.id,
                    order_id_code: order.order_id,
                    product_id: p.product_id,
                    print_target: p.print_target || (prodRef ? prodRef.print_target : null),
                    product_name: p.product_name,
                    quantity: p.quantity,
                    unit: p.unit || 'pcs',
                    price: parseFloat(p.price),
                    row_total: p.row_total,
                    note: p.note,
                    is_kot: p.is_kot,
                });
            });

            recalculateSentTotals();

            // Display active banner
            const banner = document.getElementById('activePendingBanner');
            const codeDisplay = document.getElementById('activeOrderCodeDisplay');
            if (codeDisplay) codeDisplay.textContent = '';
            document.getElementById('activeOrderCustDisplay').textContent = order.customer_name ? `${order.customer_name} (${order.customer_phone || ''})` : '';
            banner.classList.remove('kot-hidden');

            renderSentItems();
            renderNewCart();
            updateBillSummary();
            updateDraftBar();
            renderProductList();
        }

        function clearLoadedPendingOrder() {
            currentHoldOrderId = null;
            currentHoldOrderIds = [];
            currentHoldOrderCodes = [];
            currentHoldOrderCode = null;
            customerDetails = { user_id: null, customer_name: null, customer_phone: null };
            newCart = [];
            sentLineItems = [];
            draftQuantities = {};
            sentTotals = { subtotal: 0, gst: 0, total: 0 };
            currentDiscount = { type: 'flat', value: 0, offer: null, reason: null };
            currentCharge = { amount: 0, reason: null };

            document.getElementById('activePendingBanner').classList.add('kot-hidden');
            document.getElementById('activeOrderCustDisplay').textContent = '';

            renderSentItems();
            renderNewCart();
            updateDraftBar();
            renderProductList();
            updateBillSummary();
        }

        // ------------------------------------------------------------------
        // Take Away Orders Modal (Pending vs Completed)
        // ------------------------------------------------------------------
        function openTakeAwayOrdersModal(tab) {
            document.getElementById('takeAwayOrdersModalBackdrop').classList.remove('kot-hidden');
            switchOrdersTab(tab || activeOrdersTab);
        }

        function closeTakeAwayOrdersModal() {
            document.getElementById('takeAwayOrdersModalBackdrop').classList.add('kot-hidden');
        }

        function switchOrdersTab(tab) {
            activeOrdersTab = tab;
            document.getElementById('taTabPending').classList.toggle('active', tab === 'pending');
            document.getElementById('taTabCompleted').classList.toggle('active', tab === 'completed');
            refreshTakeAwayOrders();
        }

        function refreshTakeAwayOrders() {
            const list = document.getElementById('taOrdersList');
            list.innerHTML = '<p class="kot-muted" style="text-align:center;padding:24px;">Loading orders…</p>';

            const url = activeOrdersTab === 'pending' ? ROUTES.processing : ROUTES.completed;

            fetch(url)
                .then((res) => res.json())
                .then((data) => {
                    if (!data.status) {
                        list.innerHTML = '<p class="kot-muted" style="text-align:center;padding:20px;">Failed to load orders.</p>';
                        return;
                    }

                    const orders = data.data || [];

                    if (activeOrdersTab === 'pending') {
                        updatePendingBadgeCount(orders.length);
                    }

                    if (orders.length === 0) {
                        list.innerHTML = `<p class="kot-muted" style="text-align:center;padding:24px;">No ${activeOrdersTab} orders found.</p>`;
                        return;
                    }

                    list.innerHTML = '';
                    orders.forEach((ord) => {
                        const card = document.createElement('div');
                        card.className = 'ta-order-card';
                        const sourceBadge = ord.billed_in === 'app'
                            ? `<span class="kot-target-badge" style="background:#8b5cf6;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;margin-left:6px;">📱 App</span>`
                            : `<span class="kot-target-badge" style="background:#0284c7;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;margin-left:6px;">💻 Web</span>`;
                        card.innerHTML = `
                                                            <div class="ta-order-card-header">
                                                                <span class="ta-order-code">${ord.order_id || ('Order #' + ord.id)} ${sourceBadge}</span>
                                                                <span style="font-weight:700;color:#16a34a;font-size:14px;">₹${(parseFloat(ord.total) || 0).toFixed(2)}</span>
                                                            </div>
                                                            <div class="ta-order-meta">
                                                                <div><b>Customer:</b> ${ord.customer_name || 'Walk-in'} (${ord.customer_phone || 'No phone'})</div>
                                                                <div><b>Staff:</b> ${ord.staff_name || 'Common'} &middot; <b>Items:</b> ${ord.items_count || 0} &middot; <b>Time:</b> ${ord.created_at || ''}</div>
                                                            </div>
                                                            <div class="ta-order-actions">
                                                                ${activeOrdersTab === 'pending' ? `
                                                                    <button type="button" class="kot-mini-btn" style="background:#2563eb;color:#fff;border:none;" onclick="loadHoldOrderIntoBill(${ord.id})">Load Order</button>
                                                                ` : `
                                                                    <button type="button" class="kot-mini-btn" onclick="printCompletedOrder(${ord.id})">Print Receipt</button>
                                                                `}
                                                            </div>
                                                        `;
                        list.appendChild(card);
                    });
                })
                .catch(() => {
                    list.innerHTML = '<p class="kot-muted" style="text-align:center;padding:20px;">Error loading orders.</p>';
                });
        }

        function loadHoldOrderIntoBill(orderId) {
            closeTakeAwayOrdersModal();
            fetch(ROUTES.processingView(orderId))
                .then((res) => res.json())
                .then((data) => {
                    if (!data.status || !data.data) {
                        showKotToast('error', 'Could not load order details.');
                        return;
                    }
                    setLoadedHoldOrder(data.data);
                    switchTab('bill');
                    showKotToast('success', 'Order loaded: ' + (data.data.order_id || ''));
                })
                .catch(() => {
                    showKotToast('error', 'Network error loading order.');
                });
        }

        function printCompletedOrder(orderId) {
            fetch(ROUTES.completedView(orderId))
                .then((res) => res.json())
                .then((data) => {
                    if (!data.status || !data.data) {
                        showKotToast('error', 'Could not load completed order.');
                        return;
                    }
                    const ord = data.data;
                    const staffName = ord.staff?.name || ord.staff_name || 'Common';
                    openThermalPreview(ord, staffName);
                });
        }

        function updatePendingBadge() {
            fetch(ROUTES.processing)
                .then((res) => res.json())
                .then((data) => {
                    if (data.status) {
                        updatePendingBadgeCount((data.data || []).length);
                    }
                });
        }

        function updatePendingBadgeCount(count) {
            const badges = [
                document.getElementById('headerPendingBadge'),
                document.getElementById('btnPendingBadge')
            ];
            badges.forEach((badge) => {
                if (badge) {
                    if (count > 0) {
                        badge.textContent = count;
                        badge.classList.remove('kot-hidden');
                    } else {
                        badge.classList.add('kot-hidden');
                    }
                }
            });
        }

        // ------------------------------------------------------------------
        // Thermal Receipt Printing (Matching billing.blade.php 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 - 629003';
            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") {
            const rawItems = bill.products || bill.order_details || bill.orderDetails || [];

            const rows = rawItems.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 = {};

            rawItems.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>${rawItems.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 rawItems = bill.products || bill.order_details || bill.orderDetails || [];
            const rows = rawItems.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>${rawItems.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
        // F1  → focus product search field
        // F2  → open Close Order modal
        // F3  → toggle staff dropdown (typing 1-9 jumps to that staff)
        // ↑/↓ → highlight product row
        // Enter → add highlighted product to draft
        // ------------------------------------------------------------------
        document.addEventListener('keydown', (e) => {
            const anyModalOpen = document.querySelectorAll('.kot-modal-backdrop:not(.kot-hidden)').length > 0;

            if (e.key === 'F1') {
                e.preventDefault();
                switchTab('products');
                const search = document.getElementById('productSearch');
                if (search) { search.focus(); search.select(); }
                return;
            }

            if (e.key === 'F2') {
                if (!anyModalOpen) {
                    e.preventDefault();
                    closeBill();
                }
                return;
            }

            if (e.key === 'F3') {
                e.preventDefault();
                toggleStaffDropdown();
                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;
                    clearTimeout(staffKeyBufferTimer);
                    staffKeyBufferTimer = setTimeout(() => {
                        const n = parseInt(staffKeyBuffer, 10);
                        staffKeyBuffer = '';
                        selectStaffBySerial(n);
                    }, 500);
                } else if (e.key === 'Escape') {
                    closeStaffDropdown();
                }
                return;
            }

            if (anyModalOpen) return;

            const productsTabActive = !document.getElementById('tab-products').classList.contains('kot-hidden');
            if (!productsTabActive) return;

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                selectedProductIndex = Math.min(selectedProductIndex + 1, productsCache.length - 1);
                highlightSelectedRow();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                selectedProductIndex = Math.max(selectedProductIndex - 1, 0);
                highlightSelectedRow();
            } else if (e.key === 'Enter') {
                if (productsCache[selectedProductIndex]) {
                    e.preventDefault();
                    incDraftQty(productsCache[selectedProductIndex].id);
                }
            }
        });


        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('productSearch').addEventListener('input', (e) => {
                filterProducts(e.target.value);
            });

            loadProducts();
            loadStaff();
            updatePendingBadge();
        });
    </script>

@endsection