@extends('layouts.app')

@section('content')
<style>
    body { background:#f4f6f9; overflow:auto; }
    .rb-page { min-height:calc(100vh - 40px); display:grid; grid-template-rows:auto 1fr; gap:10px; }
    .rb-header { background:#fff; border:1px solid #e5edf6; border-radius:8px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:12px; box-shadow:0 3px 10px rgba(0,0,0,.05); }
    .rb-title { color:#E84C0D; font-size:24px; font-weight:900; }
    .rb-meta { display:flex; gap:18px; font-size:14px; font-weight:800; color:#334155; flex-wrap:wrap; }
    .rb-meta span { color:#1E4FA8; }
    .rb-layout { display:grid; grid-template-columns:260px minmax(420px, 1fr) 380px; gap:10px; min-height:0; }
    .rb-layout.no-tables { grid-template-columns:minmax(420px, 1fr) 380px; }
    .rb-panel { background:#fff; border:1px solid #e5edf6; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,.05); min-height:0; overflow:hidden; }
    .panel-head { padding:10px 12px; border-bottom:1px solid #edf1f6; display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .panel-title { font-size:16px; font-weight:900; color:#0f172a; }
    .table-btn, .category-btn, .product-card, .action-btn, .small-btn { border:1px solid #dbe5f0; border-radius:8px; background:#fff; cursor:pointer; font-weight:900; }
    .table-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; padding:10px; overflow:auto; max-height:calc(100vh - 225px); }
    .table-btn { min-height:58px; padding:9px; text-align:left; }
    .table-btn strong { display:block; font-size:15px; color:#0f172a; }
    .table-btn span { display:block; margin-top:4px; color:#64748b; font-size:12px; }
    .table-btn.active { border-color:#1E4FA8; box-shadow:0 0 0 2px rgba(0,74,173,.16); }
    .table-btn.occupied { background:#7c2d12; border-color:#431407; }
    .table-btn.occupied strong,
    .table-btn.occupied span { color:#fff; }
    .search-row { display:grid; grid-template-columns:minmax(180px, .75fr) 90px auto auto; gap:8px; padding:10px; border-bottom:1px solid #edf1f6; }
    .search-row input, .ticket-input, .pay-input, .payment-reference, .note-input { border:1px solid #dbe5f0; border-radius:8px; padding:11px; font-size:15px; width:100%; box-sizing:border-box; }
    .keyboard-btn { border:1px solid #1E4FA8; background:#1E4FA8; color:#fff; border-radius:8px; cursor:pointer; font-weight:900; }
    .keyboard-panel { display:none; padding:10px; border-bottom:1px solid #edf1f6; background:#f8fafc; }
    .keyboard-panel.is-visible { display:block; }
    .keyboard-row { display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; margin-bottom:6px; }
    .keyboard-key { min-height:42px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#0f172a; cursor:pointer; font-size:16px; font-weight:900; }
    .keyboard-key.wide { grid-column:span 2; }
    .keyboard-key.space { grid-column:span 4; }
    .category-strip { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; padding:10px; overflow:auto; border-bottom:1px solid #edf1f6; }
    .category-btn { min-height:58px; padding:14px 12px; color:#166534; background:#f0fdf4; border-color:#86efac; white-space:normal; font-size:19px; line-height:1.05; }
    .category-btn[data-category="all"] { background:#fff; border-color:#dbe5f0; color:#334155; }
    .category-btn.active { background:#E84C0D; border-color:#E84C0D; color:#fff; }
    .product-grid { display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; padding:10px; overflow:auto; max-height:calc(100vh - 240px); }
    .product-card { width:var(--product-width, 140px); min-height:96px; padding:8px 4px; text-align:left; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; }
    .product-card .name { color:#0f172a; font-size:18px; line-height:1.05; width:100%; overflow-wrap:anywhere; word-break:normal; }
    .product-card .price { color:#15803d; font-size:20px; }
    .ticket-body { padding:10px; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 108px); overflow:auto; }
    .ticket-fields { display:grid; grid-template-columns:1fr; gap:8px; }
    .ticket-line { border:1px solid #e5edf6; border-radius:8px; padding:9px; }
    .line-top { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start; }
    .line-name { font-weight:900; color:#0f172a; font-size:20px; }
    .line-total { font-weight:900; color:#1E4FA8; white-space:nowrap; }
    .line-actions { display:grid; grid-template-columns:52px 68px 52px 1fr 44px; gap:8px; margin-top:8px; align-items:center; }
    .line-actions.no-note { grid-template-columns:86px 96px 86px 48px; }
    .small-btn { height:40px; background:#f8fafc; color:#1E4FA8; }
    .qty-action { height:52px; font-size:30px; line-height:1; }
    .line-actions.no-note .qty-action { height:62px; font-size:38px; }
    .small-btn.danger { color:#E84C0D; background:#fff3ee; border-color:#ffd7c6; }
    .qty-box { height:36px; border:1px solid #dbe5f0; border-radius:8px; text-align:center; font-weight:900; }
    .line-actions.no-note .qty-box { height:62px; font-size:28px; }
    .totals { background:#f8fafc; border-radius:8px; padding:10px; }
    .grand { color:#dc2626; font-size:34px; font-weight:900; text-align:center; margin-top:4px; }
    .grand-label { color:#334155; font-size:13px; font-weight:900; text-align:center; text-transform:uppercase; }
    .payments { display:grid; gap:8px; }
    .payment-row { display:grid; grid-template-columns:110px 1fr; gap:8px; align-items:center; }
    .payment-row label { font-size:13px; font-weight:900; color:#166534; }
    .payment-input-stack { display:flex; flex-direction:column; gap:6px; }
    .payment-reference { font-weight:800; }
    .pay-input { text-align:right; font-size:18px; font-weight:900; }
    .action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .action-btn { padding:13px 8px; color:#fff; background:#1E4FA8; border-color:#1E4FA8; }
    .action-btn.green { background:#15803d; border-color:#15803d; }
    .action-btn.orange { background:#E84C0D; border-color:#E84C0D; }
    .action-btn.light { background:#fff3ee; color:#E84C0D; border-color:#ffd7c6; }
    .action-btn.is-muted { background:#f8fafc; border-color:#cbd5e1; color:#334155; }
    .bills-panel { display:none; }
    .bills-panel.is-visible { display:block; }
    .bill-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px; }
    .bill-card { border:1px solid #dbe5f0; border-radius:8px; padding:7px; background:#f8fafc; }
    .bill-title { font-weight:900; color:#1E4FA8; margin-bottom:3px; font-size:15px; }
    .bill-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
    .bill-card .small-btn { height:34px; font-size:12px; }
    .toast { position:fixed; top:18px; right:18px; display:none; background:#15803d; color:#fff; border-radius:8px; padding:12px 16px; font-weight:900; z-index:10000; box-shadow:0 8px 24px rgba(0,0,0,.16); }
    .stock-warning { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:100000; display:none; width:calc(100vw - 40px); max-width:620px; background:#E84C0D; color:#fff; border:4px solid #0c0c0c; border-radius:12px; box-shadow:0 18px 45px rgba(12,12,12,.35); padding:26px 30px; text-align:center; font-size:26px; font-weight:900; line-height:1.25; }
    .stock-warning.is-visible { display:block; }
    .shift-modal { align-items:center; background:rgba(15,23,42,.55); display:none; inset:0; justify-content:center; position:fixed; z-index:10001; }
    .shift-modal.is-visible { display:flex; }
    .shift-dialog { background:#fff; border-radius:10px; max-width:420px; padding:18px; width:min(92vw, 420px); }
    .shift-dialog h3 { color:#1E4FA8; margin:0 0 14px; }
    .shift-dialog label { color:#334155; display:block; font-size:13px; font-weight:900; margin:0 0 6px; }
    .shift-dialog input { border:1px solid #dbe5f0; border-radius:8px; box-sizing:border-box; font-size:16px; margin:0 0 12px; min-height:42px; padding:11px; width:100%; }
    .shift-dialog input:focus { border-color:#1E4FA8; box-shadow:0 0 0 3px rgba(0,74,173,.12); outline:none; }
    .shift-banner { background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; color:#9a3412; font-weight:900; padding:8px 10px; }
    @media(max-width:1200px) { .rb-layout, .rb-layout.no-tables { grid-template-columns:220px 1fr; } .rb-layout.no-tables { grid-template-columns:1fr; } .ticket-panel { grid-column:1 / -1; } }
    @media(max-width:760px) { .rb-layout { grid-template-columns:1fr; } .search-row { grid-template-columns:1fr 74px 96px 86px; } .product-grid { max-height:none; } .table-grid { grid-template-columns:repeat(3, 1fr); max-height:none; } .rb-header { align-items:flex-start; flex-direction:column; } }
</style>

<div class="rb-page">
    <div id="toast" class="toast"></div>
    <div id="stockWarning" class="stock-warning"></div>

    <div class="rb-header">
        <div>
            <div class="rb-title">Restaurant / Bar</div>
            <div class="rb-meta">
                <div>User: <span>{{ auth()->user()->name }}</span></div>
                <div>Branch: <span>{{ auth()->user()->branch->name ?? 'No Branch Assigned' }}</span></div>
                @if($shiftManagementEnabled)
                    <div>Shift: <span>{{ $activeShift?->shift_no ?? 'Closed' }}</span></div>
                @endif
            </div>
        </div>
        <div style="display:flex;gap:8px;align-items:center;">
            @if($shiftManagementEnabled)
                @if($activeShift)
                    <button class="action-btn orange" type="button" id="openCloseShiftModal" data-permission="shifts.close">Close Shift</button>
                    <a class="action-btn" href="{{ url('/shifts/'.$activeShift->id.'/report') }}" style="text-decoration:none;">Shift Report</a>
                @else
                    <button class="action-btn green" type="button" id="openStartShiftModal" data-permission="shifts.open">Open Shift</button>
                @endif
            @endif
            <button class="action-btn green" type="button" id="toggleBills" data-permission="restaurant_bar.open_bills">My Bills</button>
            <form method="POST" action="{{ url('/logout') }}">
                @csrf
                <button class="action-btn orange" type="submit">Logout</button>
            </form>
        </div>
    </div>

    @if($shiftManagementEnabled && !$activeShift)
        <div class="shift-banner">Open your shift before posting orders or selling.</div>
    @endif

    <div class="rb-panel bills-panel" id="billsPanel">
        <div class="panel-head">
            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <button class="action-btn green" type="button" id="mergeBills" data-permission="restaurant_bar.merge_bills">Merge Selected</button>
                <button class="action-btn orange" type="button" id="openBills" data-permission="restaurant_bar.open_bills">Open Bills</button>
                <button class="action-btn is-muted" type="button" id="unclearedBills" data-permission="restaurant_bar.uncleared_bills">Uncleared Bills</button>
            </div>
        </div>
        <div class="bill-grid" id="billGrid" style="padding:10px;"></div>
    </div>

    <div class="rb-layout {{ $enableTables === '1' ? '' : 'no-tables' }}">
        @if($enableTables === '1')
            <div class="rb-panel">
                <div class="panel-head">
                    <div class="panel-title">Tables</div>
                </div>
                <div class="table-grid" id="tableGrid"></div>
            </div>
        @endif

        <div class="rb-panel">
            <div class="search-row">
                <input id="productSearch" type="text" placeholder="Search food, drink or barcode" autocomplete="off">
                <input id="defaultQty" type="number" min="1" value="1">
                @if($showKeyboard === '1')
                    <button class="keyboard-btn" type="button" id="toggleKeyboard">Keyboard</button>
                @endif
                @if($showNumbers === '1')
                    <button class="keyboard-btn" type="button" id="toggleNumbers">Numbers</button>
                @endif
            </div>
            @if($showKeyboard === '1')
            <div class="keyboard-panel" id="searchKeyboard">
                <div class="keyboard-row">
                    @foreach(str_split('QWERTYUIOP') as $key)
                        <button class="keyboard-key" type="button" data-key="{{ $key }}">{{ $key }}</button>
                    @endforeach
                </div>
                <div class="keyboard-row">
                    @foreach(str_split('ASDFGHJKL') as $key)
                        <button class="keyboard-key" type="button" data-key="{{ $key }}">{{ $key }}</button>
                    @endforeach
                    <button class="keyboard-key" type="button" data-key="Back">Back</button>
                </div>
                <div class="keyboard-row">
                    @foreach(str_split('ZXCVBNM') as $key)
                        <button class="keyboard-key" type="button" data-key="{{ $key }}">{{ $key }}</button>
                    @endforeach
                    <button class="keyboard-key wide" type="button" data-key="Clear">Clear</button>
                    <button class="keyboard-key" type="button" data-key="Close">Close</button>
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-key space" type="button" data-key="Space">Space</button>
                </div>
            </div>
            @endif
            @if($showNumbers === '1')
            <div class="keyboard-panel" id="numberKeyboard">
                <div class="keyboard-row">
                    @foreach(str_split('1234567890') as $key)
                        <button class="keyboard-key" type="button" data-key="{{ $key }}">{{ $key }}</button>
                    @endforeach
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-key" type="button" data-key=".">.</button>
                    <button class="keyboard-key wide" type="button" data-key="Back">Back</button>
                    <button class="keyboard-key wide" type="button" data-key="Clear">Clear</button>
                    <button class="keyboard-key wide" type="button" data-key="Close">Close</button>
                </div>
            </div>
            @endif
            <div class="category-strip" id="categoryStrip">
                <button type="button" class="category-btn active" data-category="all">All</button>
                @foreach($categories as $category)
                    <button type="button" class="category-btn" data-category="{{ $category->id }}">{{ $category->name }}</button>
                @endforeach
            </div>
            <div class="product-grid" id="productGrid"></div>
        </div>

        <div class="rb-panel ticket-panel">
            <div class="panel-head">
                <div>
                    <div class="panel-title">Current Order</div>
                    <div id="orderLabel" style="font-size:12px;color:#64748b;font-weight:800;">Table 1</div>
                </div>
                <button class="small-btn danger" type="button" id="clearOrder">Clear</button>
            </div>

            <div class="ticket-body">
                @if($showCustomerName === '1')
                    <div class="ticket-fields">
                        <input id="customerName" class="ticket-input" type="text" placeholder="Customer name">
                    </div>
                @endif

                <div id="cartLines"></div>

                <div class="totals">
                    <div class="grand-label">Total Amount</div>
                    <div class="grand" id="grandTotal">{{ \App\Models\SystemSetting::formatMoney(0) }}</div>
                </div>

                @if($printMode === 'one_receipt')
                    <div class="payments">
                        @foreach($paymentMethods as $method)
                            @php($requiresReference = strtolower(trim($method->name)) !== 'cash')
                            <div class="payment-row">
                                <label>{{ $method->name }}</label>
                                <div class="payment-input-stack">
                                    <input class="pay-input" type="number" min="0" step="0.01" data-payment-id="{{ $method->id }}" data-payment-name="{{ $method->name }}" placeholder="0.00">

                                    @if($requiresReference)
                                        <input class="payment-reference" type="text" data-payment-reference-for="{{ $method->id }}" placeholder="Transaction code">
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="action-grid">
                    @if($printMode === 'one_receipt')
                        <button class="action-btn orange" type="button" id="sendStkPush" data-permission="restaurant_bar.order" style="grid-column:1 / -1;">Send STK Push</button>
                        <button class="action-btn green" type="button" id="saveOnly" data-permission="restaurant_bar.order">Save</button>
                        @permission('restaurant_bar.print_bill')
                        <button class="action-btn green" type="button" id="savePrint" data-permission="restaurant_bar.order">Save & Print</button>
                        @endpermission
                    @elseif($printMode === 'bill_kitchen_order')
                        @permission('restaurant_bar.print_bill')
                        <button class="action-btn orange" type="button" id="billKitchenOrder" data-permission="restaurant_bar.order" style="grid-column:1 / -1;">Print Bill & Kitchen Order</button>
                        @endpermission
                    @else
                        <button class="action-btn green" type="button" id="orderOnly" data-permission="restaurant_bar.order" style="grid-column:1 / -1;">Order</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@if($shiftManagementEnabled)
    <div class="shift-modal" id="startShiftModal">
        <div class="shift-dialog">
            <h3>Open Shift</h3>
            <form method="POST" action="{{ url('/shifts') }}">
                @csrf
                <label>Opening Cash</label>
                <input type="number" name="opening_cash" min="0" step="0.01" value="0">
                <label>Note</label>
                <input type="text" name="opening_note" placeholder="Optional">
                <div class="action-grid">
                    <button class="action-btn green" type="submit">Open Shift</button>
                    <button class="action-btn light" type="button" data-close-shift-modal>Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div class="shift-modal" id="closeShiftModal">
        <div class="shift-dialog">
            <h3>Close Shift</h3>
            <form method="POST" action="{{ url('/shifts/close') }}">
                @csrf
                <label>Counted Cash</label>
                <input type="number" name="closing_cash" min="0" step="0.01" required>
                <label>Note</label>
                <input type="text" name="closing_note" placeholder="Optional">
                <div class="action-grid">
                    <button class="action-btn green" type="submit">Close Shift</button>
                    <button class="action-btn light" type="button" data-close-shift-modal>Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endif

<script>
const products = @json($products);
const currencyCode = @json($currencyCode);
const exchangeRate = Number(@json($exchangeRate));
const receiptSize = Number(@json($receiptSize));
const printMode = @json($printMode);
const allowItemNote = @json($allowItemNote) === '1';
const tablesEnabled = @json($enableTables) === '1';
const showCustomerName = @json($showCustomerName) === '1';
const showKeyboard = @json($showKeyboard) === '1';
const showNumbers = @json($showNumbers) === '1';
const allowOverselling = @json($allowOverselling) === 'yes';
const shiftManagementEnabled = @json($shiftManagementEnabled);
const hasActiveShift = @json((bool) $activeShift);
const saleUrl = @json(url('/restaurant_bar/sales'));
const orderUrl = @json(url('/restaurant_bar/orders'));
const mergeUrl = @json(url('/restaurant_bar/orders/merge'));
const canEditRestaurantOrder = @json(auth()->user()->hasPermission('restaurant_bar.edit_order'));
const canPrintRestaurantBill = @json(auth()->user()->hasPermission('restaurant_bar.print_bill'));
const csrfToken = @json(csrf_token());
const configuredTables = @json($tables);
const openOrders = @json($openOrders);
const tables = configuredTables.map(table => ({
    id: table.id,
    name: table.area ? `${table.name} (${table.area})` : table.name
}));

let activeOrderId = tables.length ? `table-${tables[0].id}` : 'order-main';
let activeRestaurantOrderId = null;
let activeCategory = 'all';
let orders = {};
let cart = [];
let activeKeyboardInput = null;
let billsView = 'open';

document.getElementById('openStartShiftModal')?.addEventListener('click', () => {
    document.getElementById('startShiftModal')?.classList.add('is-visible');
});

document.getElementById('openCloseShiftModal')?.addEventListener('click', () => {
    document.getElementById('closeShiftModal')?.classList.add('is-visible');
});

document.querySelectorAll('[data-close-shift-modal]').forEach(button => {
    button.addEventListener('click', () => {
        document.querySelectorAll('.shift-modal').forEach(modal => modal.classList.remove('is-visible'));
    });
});

const tableGrid = document.getElementById('tableGrid');
const productGrid = document.getElementById('productGrid');
const productSearch = document.getElementById('productSearch');
const toggleKeyboard = document.getElementById('toggleKeyboard');
const toggleNumbers = document.getElementById('toggleNumbers');
const searchKeyboard = document.getElementById('searchKeyboard');
const numberKeyboard = document.getElementById('numberKeyboard');
const defaultQty = document.getElementById('defaultQty');
const cartLines = document.getElementById('cartLines');
const stockWarning = document.getElementById('stockWarning');
const customerName = document.getElementById('customerName');
const orderLabel = document.getElementById('orderLabel');
const paymentInputs = document.querySelectorAll('.pay-input');

openOrders.forEach(order => {
    const key = order.status === 'closed'
        ? `closed-${order.id}`
        : (order.restaurant_table_id ? `table-${order.restaurant_table_id}` : `order-${order.id}`);
    orders[key] = order;
});

function money(amount) {
    return `${currencyCode} ${(Number(amount) * exchangeRate).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function productMoney(amount) {
    return (Number(amount) * exchangeRate).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function persistOrders() {
}

function currentOrderName() {
    if (activeOrderId?.startsWith('table-')) {
        return tables.find(table => String(table.id) === activeOrderId.replace('table-', ''))?.name || 'Table';
    }
    return 'Order';
}

function saveCurrentOrder() {
    orders[activeOrderId] = {
        id: activeRestaurantOrderId,
        restaurant_table_id: activeOrderId?.startsWith('table-') ? Number(activeOrderId.replace('table-', '')) : null,
        customerName: customerName?.value || '',
        customerPhone: '',
        status: orders[activeOrderId]?.status || 'open',
        cart,
        updatedAt: new Date().toISOString()
    };
    persistOrders();
}

function loadOrder(orderId) {
    activeOrderId = orderId;
    const order = orders[orderId] || { cart: [], customerName: '', customerPhone: '' };
    activeRestaurantOrderId = order.id || null;
    cart = order.cart || [];
    if (customerName) {
        customerName.value = order.customerName || '';
    }
    paymentInputs.forEach(input => input.value = '');
    renderAll();
}

function renderTables() {
    if (!tableGrid) {
        return;
    }

    tableGrid.innerHTML = '';

    if (!tables.length) {
        tableGrid.innerHTML = '<div style="grid-column:1 / -1;color:#64748b;font-weight:800;padding:8px;">No tables added.</div>';
        return;
    }

    tables.forEach(table => {
        const orderId = `table-${table.id}`;
        const order = orders[orderId];
        const total = (order?.cart || []).reduce((sum, item) => sum + (item.qty * item.price), 0);
        const button = document.createElement('button');
        button.type = 'button';
        button.className = `table-btn ${orderId === activeOrderId ? 'active' : ''} ${total > 0 ? 'occupied' : ''}`;
        button.innerHTML = `<strong>${table.name}</strong><span>${total > 0 ? money(total) : 'Empty'}</span>`;
        button.addEventListener('click', () => {
            if (total > 0) {
                document.getElementById('billsPanel').classList.add('is-visible');
                showToast('Use My Bills to edit or print this table.', true);
                return;
            }

            saveCurrentOrder();
            loadOrder(orderId);
        });
        tableGrid.appendChild(button);
    });
}

function renderProducts() {
    const query = productSearch.value.trim().toLowerCase();
    productGrid.innerHTML = '';

    products
        .filter(product => activeCategory === 'all' || String(product.category_id) === String(activeCategory))
        .filter(product => !query || product.name.toLowerCase().includes(query) || String(product.barcode || '').toLowerCase().includes(query))
        .forEach(product => {
            const button = document.createElement('button');
            button.type = 'button';
            button.className = 'product-card';
            button.style.setProperty('--product-width', productBoxWidth(product.name));
            button.innerHTML = `<div class="name">${escapeHtml(product.name)}</div><strong class="price">${productMoney(product.retail_price)}</strong>`;
            button.addEventListener('click', () => addProduct(product));
            productGrid.appendChild(button);
        });
}

function keyboardTarget() {
    return activeKeyboardInput || productSearch;
}

function typeKeyboardKey(key) {
    const target = keyboardTarget();
    target.focus();

    if (key === 'Close') {
        searchKeyboard?.classList.remove('is-visible');
        numberKeyboard?.classList.remove('is-visible');
        return;
    }

    if (key === 'Clear') {
        target.value = '';
        afterKeyboardInput(target);
        return;
    }

    const value = target.value || '';
    const start = target.selectionStart ?? value.length;
    const end = target.selectionEnd ?? value.length;

    if (key === 'Back') {
        if (start === end && start > 0) {
            target.value = value.slice(0, start - 1) + value.slice(end);
            setCursor(target, start - 1);
        } else {
            target.value = value.slice(0, start) + value.slice(end);
            setCursor(target, start);
        }
    } else {
        const text = key === 'Space' ? ' ' : key.toLowerCase();
        target.value = value.slice(0, start) + text + value.slice(end);
        setCursor(target, start + text.length);
    }

    afterKeyboardInput(target);
}

function setCursor(target, position) {
    try {
        target.setSelectionRange(position, position);
    } catch (error) {
    }
}

function afterKeyboardInput(target) {
    if (target === productSearch) {
        renderProducts();
        return;
    }

    if (target.classList.contains('qty-box')) {
        syncCartQtyInput(target);
        return;
    }

    if (target === defaultQty) {
        return;
    }

    target.dispatchEvent(new Event('input', { bubbles: true }));
}

function productBoxWidth(name) {
    const length = String(name || '').length;

    if (length <= 8) {
        return '92px';
    }

    if (length <= 16) {
        return '128px';
    }

    if (length <= 28) {
        return '168px';
    }

    return '210px';
}

function addProduct(product) {
    if (orders[activeOrderId]?.id && !activeRestaurantOrderId) {
        document.getElementById('billsPanel').classList.add('is-visible');
        showToast('Use Edit Order to add items to this table.', true);
        return;
    }

    const qty = Math.max(Number(document.getElementById('defaultQty').value || 1), 1);
    const existing = cart.find(item => item.id === product.id && !item.note);
    const existingQty = cart
        .filter(item => item.id === product.id)
        .reduce((sum, item) => sum + Number(item.qty || 0), 0);

    if (!canUseStock(product, existingQty + qty)) {
        return;
    }

    if (existing) {
        existing.qty += qty;
        cart.splice(cart.indexOf(existing), 1);
        cart.unshift(existing);
    } else {
        cart.unshift({
            id: product.id,
            name: product.name,
            barcode: product.barcode,
            stock_quantity: Number(product.stock_quantity || 0),
            track_stock: product.track_stock === true || Number(product.track_stock) === 1,
            price: Number(product.retail_price),
            qty,
            discount: 0,
            note: ''
        });
    }

    renderCart();
    saveCurrentOrder();
}

function renderCart() {
    cartLines.innerHTML = cart.length ? '' : '<div class="ticket-line" style="color:#64748b;font-weight:800;">No items added.</div>';

    cart.forEach((item, index) => {
        const lineTotal = Math.max((item.qty * item.price) - Number(item.discount || 0), 0);
        const postedQty = Number(item.postedQty || 0);
        const removeButton = postedQty > 0
            ? '<button class="small-btn danger" type="button" disabled title="Posted items cannot be removed">X</button>'
            : '<button class="small-btn danger" type="button" data-action="remove">X</button>';
        const row = document.createElement('div');
        row.className = 'ticket-line';
        const noteInput = allowItemNote
            ? `<input class="note-input" type="text" placeholder="Item note" value="${escapeHtml(item.note || '')}">`
            : '';
        row.innerHTML = `
            <div class="line-top">
                <div class="line-name">${escapeHtml(item.name)}</div>
                <div class="line-total">${money(lineTotal)}</div>
            </div>
            <div class="line-actions ${allowItemNote ? '' : 'no-note'}">
                <button class="small-btn qty-action" type="button" data-action="minus">-</button>
                <input class="qty-box" type="number" min="${postedQty || 0.01}" step="0.01" value="${item.qty}" data-index="${index}">
                <button class="small-btn qty-action" type="button" data-action="plus">+</button>
                ${noteInput}
                ${removeButton}
            </div>
        `;

        row.querySelector('[data-action="minus"]').addEventListener('click', () => updateQty(index, item.qty - 1));
        row.querySelector('[data-action="plus"]').addEventListener('click', () => updateQty(index, item.qty + 1));
        row.querySelector('[data-action="remove"]')?.addEventListener('click', () => {
            cart.splice(index, 1);
            renderCart();
            saveCurrentOrder();
        });
        row.querySelector('.qty-box').addEventListener('change', event => updateQty(index, Number(event.target.value)));
        row.querySelector('.note-input')?.addEventListener('input', event => {
            cart[index].note = event.target.value;
            saveCurrentOrder();
        });
        cartLines.appendChild(row);
    });

    updateTotals();
}

function updateQty(index, qty) {
    const postedQty = Number(cart[index]?.postedQty || 0);

    if (postedQty > 0 && qty < postedQty) {
        showToast('Posted items cannot be reduced by waiter.', true);
        qty = postedQty;
    }

    if (!canUseStock(cart[index], qty)) {
        renderCart();
        return;
    }

    if (qty <= 0) {
        cart.splice(index, 1);
    } else {
        cart[index].qty = qty;
    }
    renderCart();
    saveCurrentOrder();
}

function syncCartQtyInput(input) {
    const index = Number(input.dataset.index);
    const item = cart[index];

    if (!item) {
        return;
    }

    const postedQty = Number(item.postedQty || 0);
    let qty = Number(input.value || 0);

    if (postedQty > 0 && qty < postedQty) {
        qty = postedQty;
        input.value = qty;
        showToast('Posted items cannot be reduced by waiter.', true);
    }

    if (qty <= 0) {
        return;
    }

    if (!canUseStock(item, qty)) {
        input.value = item.qty;
        return;
    }

    item.qty = qty;
    updateTotals();
    saveCurrentOrder();
}

function updateTotals() {
    const total = cart.reduce((sum, item) => sum + Math.max((item.qty * item.price) - Number(item.discount || 0), 0), 0);
    document.getElementById('grandTotal').innerText = money(total);
    orderLabel.innerText = currentOrderName();
}

function canUseStock(item, requestedQty) {
    if (allowOverselling || !item?.track_stock) {
        return true;
    }

    const stock = Number(item.stock_quantity || 0);
    const qty = Number(requestedQty || 0);

    const postedQty = Number(item.postedQty || 0);
    const allowedQty = stock + postedQty;

    if (stock < 1 && qty > postedQty || qty > allowedQty) {
        showStockWarning(`${item.name} has only ${stock.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} available in stock. You cannot sell ${qty.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}.`);
        return false;
    }

    return true;
}

function showStockWarning(message) {
    stockWarning.innerText = message;
    stockWarning.classList.add('is-visible');
    beepStockWarning();

    clearTimeout(showStockWarning.timer);
    showStockWarning.timer = setTimeout(() => {
        stockWarning.classList.remove('is-visible');
    }, 3200);
}

function beepStockWarning() {
    try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        const context = new AudioContext();
        const oscillator = context.createOscillator();
        const gain = context.createGain();
        oscillator.type = 'square';
        oscillator.frequency.value = 880;
        gain.gain.value = 0.12;
        oscillator.connect(gain);
        gain.connect(context.destination);
        oscillator.start();
        oscillator.stop(context.currentTime + 0.18);
    } catch (error) {
    }
}

function renderAll() {
    renderTables();
    renderBills();
    renderProducts();
    renderCart();
}

function activeOrderPayload(status = 'open') {
    return {
        restaurant_order_id: activeRestaurantOrderId,
        restaurant_table_id: activeOrderId?.startsWith('table-') ? Number(activeOrderId.replace('table-', '')) : null,
        customer_name: customerName?.value || '',
        customer_phone: '',
        status,
        items: cart.map(item => ({
            id: item.id,
            qty: item.qty,
            discount: item.discount || 0,
            note: item.note || ''
        }))
    };
}

function orderKey(order) {
    if (order.status === 'closed') {
        return `closed-${order.id}`;
    }

    return order.restaurant_table_id ? `table-${order.restaurant_table_id}` : `order-${order.id}`;
}

function renderBills() {
    const billGrid = document.getElementById('billGrid');
    if (!billGrid) {
        return;
    }

    const bills = Object.values(orders)
        .filter(order => order.id && (order.cart || []).length)
        .filter(order => billsView === 'uncleared' ? order.status === 'closed' : order.status !== 'closed');
    billGrid.innerHTML = bills.length ? '' : `<div style="color:#64748b;font-weight:800;">No ${billsView === 'uncleared' ? 'uncleared' : 'open'} bills.</div>`;

    bills.forEach(order => {
        const card = document.createElement('div');
        card.className = 'bill-card';
        const title = order.restaurant_table_id
            ? (tables.find(table => Number(table.id) === Number(order.restaurant_table_id))?.name || order.table_name || 'Table')
            : 'Order';
        const orderNumber = order.invoice_no || `Order ${order.id}`;
        const statusLabel = order.status === 'closed' ? 'Uncleared' : (order.status || 'open');
        const actions = order.status === 'closed'
            ? (canPrintRestaurantBill ? '<button class="small-btn" type="button" data-action="print">Print Bill</button>' : '')
            : `${canEditRestaurantOrder ? '<button class="small-btn" type="button" data-action="edit">Edit Order</button>' : ''}${canPrintRestaurantBill ? '<button class="small-btn" type="button" data-action="print-close">Print Bill & Close Table</button>' : ''}`;

        card.innerHTML = `
            <label style="display:flex;align-items:center;gap:6px;font-weight:900;">
                <input type="checkbox" class="merge-check" value="${order.id}" style="width:auto;">
                <span>${escapeHtml(title)}</span>
            </label>
            <div style="font-size:12px;color:#475569;font-weight:900;">${escapeHtml(orderNumber)}</div>
            <div class="bill-title">${money(order.total || sumOrder(order))}</div>
            <div style="font-size:12px;color:#64748b;font-weight:800;">${escapeHtml(statusLabel)}</div>
            <div class="bill-actions">
                ${actions}
            </div>
        `;

        card.querySelector('[data-action="edit"]')?.addEventListener('click', () => loadOrder(orderKey(order)));
        card.querySelector('[data-action="print-close"]')?.addEventListener('click', () => closeTable(order));
        card.querySelector('[data-action="print"]')?.addEventListener('click', () => printOrder(order, 'Customer Bill'));
        billGrid.appendChild(card);
    });
}

function sumOrder(order) {
    return (order.cart || []).reduce((sum, item) => sum + Math.max((item.qty * item.price) - Number(item.discount || 0), 0), 0);
}

function showToast(message, error = false) {
    const toast = document.getElementById('toast');
    toast.innerText = message;
    toast.style.background = error ? '#dc2626' : '#15803d';
    toast.style.display = 'block';
    setTimeout(() => toast.style.display = 'none', 1000);
}

function printableHtml(title, includePayments = false, printerName = '') {
    const total = cart.reduce((sum, item) => sum + Math.max((item.qty * item.price) - Number(item.discount || 0), 0), 0);
    const lines = cart.map(item => `
        <tr>
            <td>${escapeHtml(item.name)}${item.note ? `<br><small>${escapeHtml(item.note)}</small>` : ''}</td>
            <td style="text-align:right;">${item.qty}</td>
            <td style="text-align:right;">${money(item.qty * item.price)}</td>
        </tr>
    `).join('');

    const payments = includePayments
        ? Array.from(paymentInputs).filter(input => Number(input.value || 0) > 0).map(input => {
            const referenceInput = document.querySelector(`[data-payment-reference-for="${input.dataset.paymentId}"]`);
            const reference = referenceInput?.value?.trim() || '';
            const isMpesa = /m-?pesa/i.test(input.dataset.paymentName || '');
            return `<div>${escapeHtml(input.dataset.paymentName)}: ${money(Number(input.value || 0) / exchangeRate)}</div>${reference ? `<div>${isMpesa ? 'M-Pesa Transaction Code' : 'Transaction Code'}: ${escapeHtml(reference)}</div>` : ''}`;
        }).join('')
        : '';

    return `
        <html>
        <head>
            <title>${title}</title>
            <style>
                @page { size: 72mm 210mm; margin: 0; }
                body { margin:0; font-family:Arial,sans-serif; font-size:12px; }
                .receipt { width:${receiptSize}%; transform-origin:top left; padding:3mm; box-sizing:border-box; }
                h3 { text-align:center; margin:0 0 6px; }
                table { width:100%; border-collapse:collapse; }
                td { padding:3px 0; border-bottom:1px dashed #ddd; vertical-align:top; }
                .total { font-size:16px; font-weight:900; text-align:right; margin-top:8px; }
            </style>
        </head>
        <body>
            <div class="receipt">
                <h3>${title}</h3>
                ${printerName ? `<div style="text-align:center;"><small>${escapeHtml(printerName)}</small></div>` : ''}
                <div><strong>${currentOrderName()}</strong></div>
                <div>${new Date().toLocaleString()}</div>
                <div>Waiter: {{ auth()->user()->name }}</div>
                <table>${lines}</table>
                <div class="total">Total: ${money(total)}</div>
                ${payments}
            </div>
        </body>
        </html>
    `;
}

function printDocument(title, includePayments = false, printerName = '') {
    if (!cart.length) {
        showToast('Add items first.', true);
        return;
    }

    const printWindow = window.open('', '_blank', 'width=420,height=650');
    printWindow.document.write(printableHtml(title, includePayments, printerName));
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

function printOrder(order, title) {
    const originalCart = cart;
    const originalOrderId = activeOrderId;
    cart = order.cart || [];
    activeOrderId = orderKey(order);
    printDocument(title);
    cart = originalCart;
    activeOrderId = originalOrderId;
}

async function submitRestaurantOrder(status, printJobs = []) {
    if (shiftManagementEnabled && !hasActiveShift) {
        showToast('Open your shift before posting orders.', true);
        return;
    }

    if (!cart.length) {
        showToast('Add items first.', true);
        return;
    }

    const response = await fetch(orderUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify(activeOrderPayload(status))
    });

    if (!response.ok) {
        const data = await response.json().catch(() => ({}));
        showToast(data.message || 'Order failed.', true);
        return;
    }

    const data = await response.json();
    const key = orderKey(data.order);
    orders[key] = data.order;
    printJobs.forEach(job => printDocument(job.title, job.includePayments));
    activeOrderId = tablesEnabled ? key : 'order-main';
    activeRestaurantOrderId = null;
    cart = [];
    if (customerName) {
        customerName.value = '';
    }
    renderAll();
    showToast(status === 'billed' ? 'Bill added successful' : 'Order added successful');
}

async function closeTable(order) {
    printOrder(order, 'Customer Bill');

    const response = await fetch(`${orderUrl}/${order.id}/close`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        }
    });

    if (!response.ok) {
        const data = await response.json().catch(() => ({}));
        showToast(data.message || 'Close table failed.', true);
        return;
    }

    delete orders[orderKey(order)];
    if (activeRestaurantOrderId === order.id) {
        cart = [];
        activeRestaurantOrderId = null;
        if (customerName) {
            customerName.value = '';
        }
    }
    renderAll();
    showToast('Table closed successful');
}

async function mergeSelectedBills() {
    const orderIds = Array.from(document.querySelectorAll('.merge-check:checked')).map(input => input.value);

    if (orderIds.length < 2) {
        showToast('Select at least two bills.', true);
        return;
    }

    const response = await fetch(mergeUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({ order_ids: orderIds })
    });

    if (!response.ok) {
        const data = await response.json().catch(() => ({}));
        showToast(data.message || 'Merge failed.', true);
        return;
    }

    orderIds.forEach(id => {
        Object.entries(orders).forEach(([key, order]) => {
            if (Number(order.id) === Number(id)) {
                delete orders[key];
            }
        });
    });

    const data = await response.json();
    orders[orderKey(data.order)] = data.order;
    loadOrder(orderKey(data.order));
    showToast('Bills merged successful');
}

async function submitSale(restaurantAction = 'one_receipt', printJobs = [], mpesaStk = false) {
    if (shiftManagementEnabled && !hasActiveShift) {
        showToast('Open your shift before selling.', true);
        return;
    }

    if (!cart.length) {
        showToast('Add items first.', true);
        return;
    }

    const payments = Array.from(paymentInputs)
        .filter(input => Number(input.value || 0) > 0)
        .map(input => {
            const referenceInput = document.querySelector(`[data-payment-reference-for="${input.dataset.paymentId}"]`);

            return {
                payment_method_id: input.dataset.paymentId,
                amount: Number(input.value),
                reference_no: referenceInput ? referenceInput.value.trim() : ''
            };
        });

    let mpesaPhone = '';

    if (mpesaStk) {
        mpesaPhone = prompt('Enter customer M-Pesa phone number') || '';

        if (!mpesaPhone.trim()) {
            showToast('Customer phone number is required.', true);
            return;
        }
    }

    if (restaurantAction === 'one_receipt' && !payments.length && !mpesaStk) {
        showToast('Add payment amount.', true);
        return;
    }

    const response = await fetch(saleUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({
            customer_name: customerName?.value || '',
            customer_phone: mpesaStk ? mpesaPhone : currentOrderName(),
            sale_mode: 'restaurant_bar',
            restaurant_action: restaurantAction,
            mpesa_stk: mpesaStk,
            items: cart.map(item => ({
                id: item.id,
                qty: item.qty,
                discount: item.discount || 0
            })),
            payments: mpesaStk ? [] : payments
        })
    });

    if (!response.ok) {
        const data = await response.json().catch(() => ({}));
        showToast(data.message || 'Sale failed.', true);
        return;
    }

    printJobs.forEach(job => printDocument(job.title, job.includePayments, job.printerName));

    delete orders[activeOrderId];
    persistOrders();
    cart = [];
    if (customerName) {
        customerName.value = '';
    }
    paymentInputs.forEach(input => input.value = '');
    renderAll();
    showToast(mpesaStk ? 'STK Push sent successful' : 'Sale added successful');
}

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

document.querySelectorAll('.category-btn').forEach(button => {
    button.addEventListener('click', () => {
        activeCategory = button.dataset.category;
        document.querySelectorAll('.category-btn').forEach(item => item.classList.toggle('active', item === button));
        renderProducts();
    });
});

productSearch.addEventListener('input', renderProducts);
document.addEventListener('focusin', event => {
    if (event.target.matches('input')) {
        activeKeyboardInput = event.target;
    }
});
toggleKeyboard?.addEventListener('click', () => {
    searchKeyboard?.classList.toggle('is-visible');
    numberKeyboard?.classList.remove('is-visible');
    keyboardTarget().focus();
});
toggleNumbers?.addEventListener('click', () => {
    numberKeyboard?.classList.toggle('is-visible');
    searchKeyboard?.classList.remove('is-visible');
    keyboardTarget().focus();
});
searchKeyboard?.querySelectorAll('.keyboard-key').forEach(button => {
    button.addEventListener('click', () => typeKeyboardKey(button.dataset.key));
});
numberKeyboard?.querySelectorAll('.keyboard-key').forEach(button => {
    button.addEventListener('click', () => typeKeyboardKey(button.dataset.key));
});
paymentInputs.forEach(input => input.addEventListener('input', updateTotals));
customerName?.addEventListener('input', saveCurrentOrder);
document.getElementById('saveOnly')?.addEventListener('click', () => submitSale('one_receipt'));
document.getElementById('savePrint')?.addEventListener('click', () => submitSale('one_receipt', [
    { title: 'Receipt', includePayments: true }
]));
document.getElementById('sendStkPush')?.addEventListener('click', () => submitSale('one_receipt', [], true));
document.getElementById('billKitchenOrder')?.addEventListener('click', () => submitRestaurantOrder('billed', [
    { title: 'Customer Bill', includePayments: false },
    { title: 'Kitchen / Bar Order', includePayments: false }
]));
document.getElementById('orderOnly')?.addEventListener('click', () => submitRestaurantOrder('open', [
    { title: 'Kitchen / Bar Order', includePayments: false }
]));
document.getElementById('toggleBills').addEventListener('click', () => {
    document.getElementById('billsPanel').classList.toggle('is-visible');
});
document.getElementById('mergeBills').addEventListener('click', mergeSelectedBills);
document.getElementById('openBills').addEventListener('click', () => {
    billsView = 'open';
    document.getElementById('openBills').classList.remove('is-muted');
    document.getElementById('openBills').classList.add('orange');
    document.getElementById('unclearedBills').classList.remove('orange');
    document.getElementById('unclearedBills').classList.add('is-muted');
    renderBills();
});
document.getElementById('unclearedBills').addEventListener('click', () => {
    billsView = 'uncleared';
    document.getElementById('unclearedBills').classList.remove('is-muted');
    document.getElementById('unclearedBills').classList.add('orange');
    document.getElementById('openBills').classList.remove('orange');
    document.getElementById('openBills').classList.add('is-muted');
    renderBills();
});
document.getElementById('clearOrder').addEventListener('click', () => {
    if (activeRestaurantOrderId) {
        showToast('Clear saved bills from My Bills.', true);
        return;
    }

    cart = [];
    if (customerName) {
        customerName.value = '';
    }
    delete orders[activeOrderId];
    persistOrders();
    renderAll();
});
loadOrder(activeOrderId);
</script>
@endsection