{{-- resources/views/pos/desktop.blade.php --}}
@extends('layouts.app_w_nav')

@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <style>
        :root {
            --bg: #f6f7fb;
            --card: #ffffff;
            --border: #e6e8ef;
            --muted: #6b7280;
            --ink: #1f2937;
            --brand: #0d6efd;
        }

        body {
            background: var(--bg)
        }

        .pos-shell {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 16px
        }

        .cardish {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(16, 24, 40, .04)
        }

        .cardish .card-h {
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            font-weight: 700
        }

        .cardish .card-b {
            padding: 12px 14px
        }

        .toolbar {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap
        }

        .toolbar .switch {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #fff
        }

        .toolbar .clock {
            margin-left: auto;
            border: 1px solid var(--border);
            padding: 6px 10px;
            border-radius: 999px;
            display: flex;
            gap: 6px;
            align-items: center;
            background: #fff
        }

        .muted {
            color: var(--muted)
        }

        .kbd {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            border: 1px solid var(--border);
            border-bottom-width: 2px;
            border-radius: 6px;
            padding: 1px 6px;
            background: #fff
        }

        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px
        }

        .smart-suggest {
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 1050;
            width: 100%;
            max-height: 320px;
            overflow: auto;
            border: 1px solid var(--border);
            background: #fff;
            border-radius: 10px;
            display: none
        }

        .smart-suggest .rowy {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 8px;
            padding: 8px 10px;
            cursor: pointer
        }

        .smart-suggest .rowy:hover,
        .smart-suggest .rowy.active {
            background: #f1f5ff
        }

        .tall {
            height: 58vh;
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 10px
        }

        table.pos-table {
            width: 100%
        }

        table.pos-table th,
        table.pos-table td {
            vertical-align: middle
        }

        table.pos-table thead th {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1
        }

        .badge-pill {
            border: 1px solid var(--border);
            background: #fff
        }

        .right-sticky {
            position: sticky;
            top: 72px
        }

        .tot-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            margin-bottom: 8px
        }

        .tot-row label {
            margin: 0;
            color: var(--muted)
        }

        .tot-row .form-control {
            height: 44px
        }

        .actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap
        }

        .actions .btn {
            height: 46px
        }

        .help-keys {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            font-size: .9rem;
            color: var(--muted)
        }

        .help-keys div {
            display: flex;
            justify-content: space-between;
            border: 1px dashed var(--border);
            border-radius: 8px;
            padding: 6px 8px;
            background: #fff
        }

        .hl {
            background: #fffbe6
        }
    </style>
@endpush

@section('content')
    @php $getDefaultCustomer = getDefaultCustomer(); @endphp

    <form action="{{ route('pos.store') }}" method="post" id="posForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="hold_id" id="hold_id">
        <input type="hidden" name="sale_return_id" id="sale_return_id">

        <div class="pos-shell">

            {{-- ===== LEFT: Search + Inputs + Sale Table ===== --}}
            <div>

                {{-- Top toolbar --}}
                <div class="cardish mb-2">
                    <div class="card-b">
                        <div class="toolbar">
                            <label class="switch"><input class="form-check-input" type="checkbox"
                                    id="sale_mode_switch"><span>Sale Mode</span></label>
                            <label class="switch"><input class="form-check-input" type="checkbox"
                                    id="auto_input_switch"><span>Auto-Input</span></label>
                            <label class="switch"><input class="form-check-input" type="checkbox"
                                    id="auto_print_switch"><span>Auto-Print</span></label>
                            <label class="switch"><input class="form-check-input" type="checkbox"
                                    id="sound_switch"><span>Sound</span></label>
                            <div class="clock"><i class="bi bi-clock text-primary"></i><span id="pos_clock">--:--:--</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Header row (invoice/date/branch/customer/stock) --}}
                <div class="cardish mb-2">
                    <div class="card-b">
                        <div class="row g-2">
                            <div class="col-md-3">
                                <label class="form-label">Invoice</label>
                                <input type="text" class="form-control" value="{{ invoiceNo('sale') }}" disabled>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Date</label>
                                <input type="datetime-local" class="form-control" name="sale_date"
                                    value="{{ date('Y-m-d\TH:i') }}">
                            </div>

                            @if (usertype() == 'admin')
                                <div class="col-md-3">
                                    <label class="form-label">Location</label>
                                    <select id="company_branch_id" name="company_branch_id" class="form-select">
                                        <option value="">Select</option>
                                        @foreach (branches() as $company_branch)
                                            <option value="{{ $company_branch->id }}">{{ $company_branch->branch_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                <input type="hidden" id="company_branch_id" name="company_branch_id"
                                    value="{{ branch_id() }}">
                            @endif

                            <div class="col-md-3">
                                <label class="form-label">Customer</label>
                                <select class="form-select selectpicker" name="customer_id" data-live-search="true">
                                    <option value="">Select or Search</option>
                                    @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}"
                                            {{ $getDefaultCustomer->id == $customer->id ? 'selected' : '' }}>
                                            {{ $customer->company }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Search/Scan + Quick Inputs --}}
                <div class="cardish mb-2">
                    <div class="card-h">Find Product <span class="muted">(F2 search, F3 price, F4 qty, Ctrl+Enter
                            add)</span></div>
                    <div class="card-b">
                        <div class="row g-2 align-items-end">
                            <div class="col-md-6 position-relative">
                                <label class="form-label">Search / Scan</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                                    <input type="search" id="product_search" class="form-control"
                                        placeholder="name / code / scan (Enter)" />
                                    <button class="btn btn-outline-secondary d-none" id="clear_search" type="button"><i
                                            class="bi bi-x-lg"></i></button>
                                    <span class="input-group-text d-none" id="spin_search"><span
                                            class="spinner-border spinner-border-sm"></span></span>
                                </div>
                                <div class="smart-suggest" id="suggestions" role="listbox"></div>
                                <div class="small mt-1 muted">Tip: Scan barcode and press <span class="kbd">Enter</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Unit Price</label>
                                <input type="number" id="unit_price" class="form-control" placeholder="0.00"
                                    step="any">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Qty</label>
                                <input type="number" id="qty" class="form-control" placeholder="1"
                                    step="any" value="1" min="0">
                            </div>
                            <div class="col-12">
                                <button type="button" id="btnAdd" class="btn btn-primary w-100"><i
                                        class="bi bi-plus-square"></i> Add to Sale <span class="kbd">Ctrl</span>+<span
                                        class="kbd">Enter</span></button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sale table --}}
                <div class="cardish">
                    <div class="card-h">Sale Items</div>
                    <div class="card-b">
                        <div class="tall">
                            <table class="table table-sm pos-table" id="saleTable">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width:48px">#</th>
                                        <th class="text-center" style="width:120px">Code</th>
                                        <th>Description</th>
                                        <th class="text-center" style="width:110px">Qty</th>
                                        <th class="text-end" style="width:120px">Price</th>
                                        <th class="text-end" style="width:120px">VAT</th>
                                        <th class="text-end" style="width:140px">Amount</th>
                                        <th class="text-center" style="width:60px"></th>
                                    </tr>
                                </thead>
                                <tbody id="rows"></tbody>
                            </table>
                        </div>
                        <div class="d-flex gap-2 mt-2">
                            <button type="button" id="btnHold" class="btn btn-outline-secondary"><i
                                    class="bi bi-pause-circle"></i> Hold <span class="kbd">F8</span></button>
                            <button type="button" id="btnViewHold" class="btn btn-outline-secondary"><i
                                    class="bi bi-list-check"></i> View Held</button>
                            <button type="button" id="btnCancel" class="btn btn-outline-danger ms-auto"><i
                                    class="bi bi-x-octagon"></i> Cancel <span class="kbd">Esc</span></button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== RIGHT: Summary + Payment ===== --}}
            <div class="right-sticky">

                <div class="cardish mb-2">
                    <div class="card-h">Summary</div>
                    <div class="card-b">
                        <div class="tot-row">
                            <label>Amount</label>
                            <input type="number" class="form-control text-end" id="subTotal" value="0.00"
                                step="any" disabled>
                            <input type="hidden" name="amount" class="totalAmount">
                        </div>
                        <div class="tot-row">
                            <label>Discount <span class="muted">(Alt+D)</span></label>
                            <div class="input-group">
                                <select name="gross_discount_type" id="gross_discount_type" class="form-select"
                                    style="max-width:120px">
                                    <option value="normal">Tk</option>
                                    <option value="parcantage">%</option>
                                </select>
                                <input type="number" name="gross_discount_value" class="form-control" value="0"
                                    step="any" id="gross_discount_value">
                                <input type="number" class="form-control text-end" id="gross_discount_amount"
                                    value="0.00" step="any" disabled style="max-width:160px">
                                <input type="hidden" name="gross_discount_amount" class="gross_discount_amount">
                            </div>
                        </div>
                        <div class="tot-row">
                            <label>VAT</label>
                            <input type="number" class="form-control text-end" id="taxVat" value="0.00"
                                step="any" disabled>
                            <input type="hidden" name="total_vat" class="totalVat">
                        </div>
                        <hr>
                        <div class="tot-row">
                            <label class="fw-bold">Payable</label>
                            <input type="number" class="form-control text-end hl fw-bold" id="payableAmount"
                                value="0.00" step="any" disabled>
                            <input type="hidden" class="totalNetTotal" name="nettotal">
                        </div>
                        <div class="grid-2">
                            <div class="tot-row">
                                <label>Received <span class="muted">(F7)</span></label>
                                <input type="number" class="form-control text-end paidamount" name="paid_amount"
                                    value="0.00" step="any" id="paidAmount">
                            </div>
                            <div class="tot-row">
                                <label>Change</label>
                                <input type="number" class="form-control text-end changeamount" value="0.00"
                                    step="any" id="changeAmount" disabled>
                                <input type="hidden" class="changeamount" name="change_amount">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="cardish mb-2">
                    <div class="card-h">Payment Methods</div>
                    <div class="card-b" id="payMethods">
                        {{-- Minimal dynamic payment rows (compatible with your controller) --}}
                        <div class="border rounded p-2 mb-2 pm-row">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input pm-active" type="checkbox" checked>
                                <label class="form-check-label">Use this method</label>
                            </div>
                            <div class="grid-2">
                                <div>
                                    <label class="form-label">Account</label>
                                    <select class="form-select pm-account">
                                        @foreach ($accounts as $acc)
                                            <option value="{{ $acc->id }}">{{ $acc->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Method</label>
                                    <select class="form-select pm-method">
                                        @foreach (payment_method() as $m)
                                            <option value="{{ $m }}">{{ ucfirst($m) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Received</label>
                                    <input type="number" class="form-control pm-received" step="any"
                                        value="0">
                                </div>
                                <div class="d-flex align-items-end justify-content-end">
                                    <button type="button" class="btn btn-outline-secondary add-method">Add
                                        Another</button>
                                </div>
                            </div>
                        </div>
                        <div id="pmContainer"></div>

                        {{-- Hidden fields arrays sent to backend (kept in sync by JS) --}}
                        <div id="pmHidden"></div>
                    </div>
                </div>

                <div class="cardish mb-2">
                    <div class="card-h">Actions</div>
                    <div class="card-b actions">
                        <button type="button" id="btnPayment" class="btn btn-outline-primary w-100"><i
                                class="bi bi-cash-coin"></i> Payment Panel <span class="kbd">F7</span></button>
                        <button type="button" id="btnPrint" class="btn btn-outline-secondary w-100"><i
                                class="bi bi-printer"></i> Invoice <span class="kbd">F9</span></button>
                        <button type="submit" id="btnSave" class="btn btn-primary w-100"><i
                                class="bi bi-check2-circle"></i> Save <span class="kbd">Ctrl</span>+<span
                                class="kbd">S</span></button>
                        <button type="button" id="btnReturn" class="btn btn-outline-warning w-100">Return Save</button>
                        <a href="{{ route('pos.close_register') }}" class="btn btn-outline-dark w-100">Close Register</a>
                    </div>
                </div>

                <div class="cardish">
                    <div class="card-h">Shortcuts</div>
                    <div class="card-b help-keys">
                        <div><span>Focus Search</span><span class="kbd">F2</span></div>
                        <div><span>Focus Price</span><span class="kbd">F3</span></div>
                        <div><span>Focus Qty</span><span class="kbd">F4</span></div>
                        <div><span>Add Row</span><span><span class="kbd">Ctrl</span>+<span
                                    class="kbd">Enter</span></span></div>
                        <div><span>Payment</span><span class="kbd">F7</span></div>
                        <div><span>Hold</span><span class="kbd">F8</span></div>
                        <div><span>Print</span><span class="kbd">F9</span></div>
                        <div><span>Save</span><span><span class="kbd">Ctrl</span>+<span class="kbd">S</span></span>
                        </div>
                        <div><span>Discount</span><span><span class="kbd">Alt</span>+<span
                                    class="kbd">D</span></span></div>
                        <div><span>Cancel</span><span class="kbd">Esc</span></div>
                    </div>
                </div>

            </div>
        </div>

        {{-- Held Sales Modal --}}
        <div class="modal fade" id="heldModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Held Sales</h5><button class="btn-close"
                            data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="heldList">
                        <div class="text-center text-muted">Loading…</div>
                    </div>
                    <div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Audio --}}
        <audio id="scan_beep" preload="auto">
            <source src="{{ asset('assets/audio/beep.mp3') }}" type="audio/mpeg">
        </audio>

    </form>
@endsection

@push('script')
    <script>
        (function() {
            // ===== Helpers
            const fmt = n => (Number(n || 0)).toFixed(2);
            const el = sel => document.querySelector(sel);
            const els = sel => Array.from(document.querySelectorAll(sel));
            const beep = () => {
                const a = el('#scan_beep');
                if (a && el('#sound_switch').checked) {
                    a.currentTime = 0;
                    a.play().catch(() => {});
                }
            };

            // ===== Clock
            function tickClock() {
                const d = new Date();
                el('#pos_clock').textContent = d.toLocaleTimeString();
            }
            setInterval(tickClock, 1000);
            tickClock();

            // ===== Suggest / Search
            const search = el('#product_search');
            const sugg = el('#suggestions');
            const clearBtn = el('#clear_search');
            const spin = el('#spin_search');
            let activeIdx = -1;
            let cache = [];

            function showSugg(items) {
                sugg.innerHTML = '';
                if (!items.length) {
                    sugg.style.display = 'none';
                    return;
                }
                items.forEach((it, i) => {
                    const row = document.createElement('div');
                    row.className = 'rowy';
                    row.setAttribute('role', 'option');
                    row.dataset.id = it.id;
                    row.dataset.name = it.name;
                    row.dataset.code = it.product_code;
                    row.dataset.price = it.sale_price;
                    row.innerHTML = `
                <div class="text-truncate"><strong>${it.name}</strong><div class="small muted">${it.product_code}${it.category?(' • '+it.category):''}</div></div>
                <div class="text-end small text-nowrap align-self-center">Stock: ${it.stock??0}</div>
                <div class="fw-bold text-end align-self-center">${fmt(it.sale_price)}</div>
            `;
                    row.addEventListener('click', () => pick(it));
                    sugg.appendChild(row);
                });
                sugg.style.display = 'block';
                activeIdx = -1;
            }

            async function fetchByCodeOrQuery(q) {
                spin.classList.remove('d-none');
                try {
                    // try code endpoint first when alphanumeric & no spaces
                    if (q && /^[A-Za-z0-9\-]+$/.test(q)) {
                        const r = await fetch(`{{ route('product.findByCode') }}?code=${encodeURIComponent(q)}`);
                        if (r.ok) {
                            const p = await r.json();
                            pick(p);
                            return;
                        }
                    }
                    // otherwise load products fragment quickly (example uses your ProductController->getList or grid)
                    // Here we hit a lightweight search on server (you can swap to your own endpoint)
                    const all = @json($allproducts ?? []);
                    const needle = (q || '').toLowerCase();
                    const filtered = all.filter(p => (p.name || '').toLowerCase().includes(needle) || (p
                        .product_code || '').toLowerCase().includes(needle)).slice(0, 30);
                    cache = filtered.map(p => ({
                        id: p.id,
                        name: p.name,
                        product_code: p.product_code,
                        sale_price: p.sale_price,
                        stock: p.stock ?? 0,
                        category: p.category ?? ''
                    }));
                    showSugg(cache);
                } catch (e) {
                    console.error(e);
                } finally {
                    spin.classList.add('d-none');
                }
            }

            function pick(it) {
                sugg.style.display = 'none';
                search.value = `${it.name} (${it.product_code})`;
                el('#unit_price').value = fmt(it.sale_price);
                search.dataset.productId = it.id;
                if (el('#auto_input_switch').checked) {
                    el('#qty').focus();
                }
                beep();
            }

            search.addEventListener('input', e => {
                const v = e.target.value.trim();
                clearBtn.classList.toggle('d-none', !v.length);
                if (v.length < 1) {
                    sugg.style.display = 'none';
                    return;
                }
                fetchByCodeOrQuery(v);
            });
            clearBtn.addEventListener('click', () => {
                search.value = '';
                search.removeAttribute('data-product-id');
                sugg.style.display = 'none';
                search.focus();
            });

            search.addEventListener('keydown', e => {
                if (sugg.style.display === 'block' && ['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) {
                    const rows = Array.from(sugg.querySelectorAll('.rowy'));
                    if (!rows.length) return;
                    if (e.key === 'ArrowDown') {
                        activeIdx = Math.min(rows.length - 1, activeIdx + 1);
                    }
                    if (e.key === 'ArrowUp') {
                        activeIdx = Math.max(0, activeIdx - 1);
                    }
                    rows.forEach((r, i) => r.classList.toggle('active', i === activeIdx));
                    if (e.key === 'Enter' && activeIdx >= 0) {
                        rows[activeIdx].click();
                    }
                    e.preventDefault();
                }
                if (e.key === 'Enter' && (!sugg || sugg.style.display !== 'block')) {
                    // Treat as barcode enter
                    const v = search.value.trim();
                    if (v) {
                        fetchByCodeOrQuery(v);
                        e.preventDefault();
                    }
                }
            });

            // ===== Rows
            const tbody = el('#rows');
            let rowCounter = 0;

            async function addRow() {
                const pid = search.dataset.productId;
                const price = Number(el('#unit_price').value || 0);
                const qty = Number(el('#qty').value || 0);
                if (!pid) {
                    search.focus();
                    return;
                }
                if (qty <= 0) {
                    el('#qty').focus();
                    return;
                }

                rowCounter++;
                // request server to render row (preserves discounts/VAT calc)
                const url = new URL("{{ route('pos.row') }}", window.location.origin);
                url.searchParams.set('id', pid);
                url.searchParams.set('qty', qty);
                url.searchParams.set('unit_price', price);
                url.searchParams.set('row', rowCounter);

                const res = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const html = await res.text();
                const tr = document.createElement('tbody');
                tr.innerHTML = html;
                // The partial returns <tr>…</tr>; append
                const row = tr.querySelector('tr');
                if (!row) {
                    console.warn('Row partial missing');
                    return;
                }
                tbody.appendChild(row);

                search.value = '';
                search.removeAttribute('data-product-id');
                el('#qty').value = '1';
                el('#unit_price').value = '';
                search.focus();
                recomputeTotals();
                beep();
            }

            el('#btnAdd').addEventListener('click', addRow);
            tbody.addEventListener('input', e => {
                if (e.target.matches('.line-qty, .line-price')) {
                    recomputeTotals();
                }
            });
            tbody.addEventListener('click', e => {
                if (e.target.closest('.btn-del')) {
                    e.preventDefault();
                    e.target.closest('tr').remove();
                    recomputeTotals();
                }
            });

            function recomputeTotals() {
                let amount = 0,
                    totalVat = 0,
                    net = 0;
                els('#rows tr').forEach(tr => {
                    const amt = Number(tr.dataset.amount || tr.querySelector('.line-amount')?.value || 0);
                    const v = Number(tr.dataset.vat || tr.querySelector('.line-vat')?.value || 0);
                    const nt = Number(tr.dataset.nettotal || tr.querySelector('.line-net')?.value || 0);
                    amount += amt;
                    totalVat += v;
                    net += nt;
                });
                const discType = el('#gross_discount_type').value;
                const discVal = Number(el('#gross_discount_value').value || 0);
                let discAmt = 0;
                if (discType === 'parcantage') {
                    discAmt = amount * (discVal / 100);
                } else {
                    discAmt = discVal;
                }
                discAmt = Math.max(0, Math.min(discAmt, amount));
                const payable = amount - discAmt + totalVat;

                el('#subTotal').value = fmt(amount);
                el('#gross_discount_amount').value = fmt(discAmt);
                el('#taxVat').value = fmt(totalVat);
                el('#payableAmount').value = fmt(payable);

                document.querySelector('input[name="amount"]').value = fmt(amount);
                document.querySelector('input.gross_discount_amount').value = fmt(discAmt);
                document.querySelector('input.totalVat').value = fmt(totalVat);
                document.querySelector('input.totalNetTotal').value = fmt(payable);

                const paid = Number(el('#paidAmount').value || 0);
                const change = Math.max(0, paid - payable);
                el('#changeAmount').value = fmt(change);
                document.querySelector('input[name="change_amount"]').value = fmt(change);

                syncPaymentArrays();
            }

            el('#gross_discount_type').addEventListener('change', recomputeTotals);
            el('#gross_discount_value').addEventListener('input', recomputeTotals);
            el('#paidAmount').addEventListener('input', recomputeTotals);

            // ===== Payment methods (sync arrays expected by controller)
            function addPmRow() {
                const container = el('#pmContainer');
                const div = document.createElement('div');
                div.className = 'border rounded p-2 mb-2 pm-row';
                div.innerHTML = `
            <div class="form-check form-switch mb-2">
                <input class="form-check-input pm-active" type="checkbox" checked>
                <label class="form-check-label">Use this method</label>
                <button type="button" class="btn btn-sm btn-outline-danger float-end remove-method">Remove</button>
            </div>
            <div class="grid-2">
                <div><label class="form-label">Account</label>
                    <select class="form-select pm-account">
                        @foreach ($accounts as $acc)
                            <option value="{{ $acc->id }}">{{ $acc->name }}</option>
                        @endforeach
                    </select></div>
                <div><label class="form-label">Method</label>
                    <select class="form-select pm-method">
                        @foreach (payment_method() as $m)
                            <option value="{{ $m }}">{{ ucfirst($m) }}</option>
                        @endforeach
                    </select></div>
                <div><label class="form-label">Received</label>
                    <input type="number" class="form-control pm-received" step="any" value="0"></div>
                <div></div>
            </div>
        `;
                container.appendChild(div);
            }
            el('#payMethods').addEventListener('click', e => {
                if (e.target.closest('.add-method')) {
                    addPmRow();
                }
                if (e.target.closest('.remove-method')) {
                    e.target.closest('.pm-row').remove();
                    syncPaymentArrays();
                }
            });
            el('#payMethods').addEventListener('input', e => {
                if (e.target.matches('.pm-received')) { // auto sum to paid input
                    const total = els('.pm-row').filter(r => r.querySelector('.pm-active').checked)
                        .reduce((s, r) => s + Number(r.querySelector('.pm-received').value || 0), 0);
                    el('#paidAmount').value = fmt(total);
                    recomputeTotals();
                }
                syncPaymentArrays();
            });

            function syncPaymentArrays() {
                const wrap = el('#pmHidden');
                wrap.innerHTML = '';
                const rows = els('.pm-row');
                rows.forEach((r, idx) => {
                    const active = r.querySelector('.pm-active').checked ? 1 : 0;
                    const acc = r.querySelector('.pm-account').value;
                    const method = r.querySelector('.pm-method').value;
                    const recv = r.querySelector('.pm-received').value || 0;

                    // conform to your controller field names:
                    wrap.insertAdjacentHTML('beforeend',
                        `<input type="hidden" name="active_payment_method[${idx}]" value="${active}">`);
                    wrap.insertAdjacentHTML('beforeend',
                        `<input type="hidden" name="account_id[${idx}]" value="${acc}">`);
                    wrap.insertAdjacentHTML('beforeend',
                        `<input type="hidden" name="payment_method[${idx}]" value="${method}">`);
                    wrap.insertAdjacentHTML('beforeend',
                        `<input type="hidden" name="cash_recieved[${idx}]" value="${recv}">`);
                });
            }

            // ===== Hold
            const heldModal = new bootstrap.Modal(document.getElementById('heldModal'));
            el('#btnHold').addEventListener('click', async () => {
                // Build minimal payload for hold (requires branch id)
                const company_branch_id = el('#company_branch_id')?.value || '{{ branch_id() }}';
                if (!company_branch_id) {
                    alert('Branch required.');
                    return;
                }

                // gather row fields for backend
                const payload = new FormData();
                payload.append('company_branch_id', company_branch_id);
                els('#rows tr').forEach((tr, i) => {
                    const pid = tr.querySelector('input[name="product_id[]"]')?.value;
                    const up = tr.querySelector('input[name="unit_price[]"]')?.value || 0;
                    const q = tr.querySelector('input[name="qty[]"]')?.value || 0;
                    if (pid) {
                        payload.append(`product_id[${i}]`, pid);
                        payload.append(`unit_price[${i}]`, up);
                        payload.append(`qty[${i}]`, q);
                    }
                });

                const r = await fetch(`{{ route('pos.hold') }}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: payload
                });
                const j = await r.json();
                if (j.status) {
                    alert('Sale held successfully.');
                    resetForm();
                } else {
                    alert(j.msg || 'Failed to hold.');
                }
            });

            el('#btnViewHold').addEventListener('click', async () => {
                el('#heldList').innerHTML = '<div class="text-center text-muted">Loading…</div>';
                heldModal.show();
                const r = await fetch(`{{ route('pos.getHeldSales') }}`);
                el('#heldList').innerHTML = await r.text();
            });

            // ===== Cancel / Reset
            function resetForm() {
                tbody.innerHTML = '';
                rowCounter = 0;
                search.value = '';
                el('#unit_price').value = '';
                el('#qty').value = '1';
                el('#paidAmount').value = '0.00';
                els('.pm-row .pm-received').forEach(i => i.value = 0);
                recomputeTotals();
            }
            el('#btnCancel').addEventListener('click', resetForm);

            // ===== Print (open invoice modal like your original flow if needed)
            el('#btnPrint').addEventListener('click', () => {
                alert('After saving, open the invoice from the right panel or use your existing print route.');
            });

            // ===== Save sale (AJAX submit to pos.store)
            el('#posForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                // Ensure at least one product
                if (!els('#rows input[name="product_id[]"]').length) {
                    alert('Add at least one product');
                    return;
                }
                // Build FormData (existing hidden mirrors included)
                const fd = new FormData(el('#posForm'));

                // Also mirror details from rows required by your controller:
                els('#rows tr').forEach((tr, i) => {
                    const get = sel => tr.querySelector(sel)?.value ?? '';
                    fd.append('product_id[]', get('input[name="product_id[]"]'));
                    fd.append('product_note[]', get('input[name="product_note[]"]') || '');
                    fd.append('unit_price[]', get('input[name="unit_price[]"]'));
                    fd.append('qty[]', get('input[name="qty[]"]'));
                    fd.append('details_amount[]', get('input[name="details_amount[]"]') || 0);
                    fd.append('vat_amount[]', get('input[name="vat_amount[]"]') || 0);
                    fd.append('details_nettotal[]', get('input[name="details_nettotal[]"]') || 0);
                });

                // Safety mirrors
                fd.set('amount', el('input[name="amount"]').value || '0');
                fd.set('total_vat', el('input[name="total_vat"]').value || '0');
                fd.set('nettotal', el('input[name="nettotal"]').value || '0');
                fd.set('paid_amount', el('#paidAmount').value || '0');
                fd.set('change_amount', el('input[name="change_amount"]').value || '0');

                const r = await fetch(`{{ route('pos.store') }}`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: fd
                });
                const j = await r.json();
                if (j.status) {
                    alert('Sale saved!');
                    if (el('#auto_print_switch').checked) {
                        window.open("{{ url('/sale/print') }}/" + (j.id?.[0] || ''), '_blank');
                    }
                    resetForm();
                } else {
                    alert(j.msg || 'Failed to save');
                }
            });

            // ===== Keyboard shortcuts
            document.addEventListener('keydown', e => {
                // Ignore inside inputs where default combos matter
                const tag = e.target.tagName.toLowerCase();
                const isTyping = ['input', 'textarea', 'select'].includes(tag);
                // F2 search
                if (e.key === 'F2') {
                    e.preventDefault();
                    search.focus();
                    search.select();
                }
                // F3 price
                if (e.key === 'F3') {
                    e.preventDefault();
                    el('#unit_price').focus();
                    el('#unit_price').select();
                }
                // F4 qty
                if (e.key === 'F4') {
                    e.preventDefault();
                    el('#qty').focus();
                    el('#qty').select();
                }
                // Ctrl+Enter add
                if (e.ctrlKey && e.key === 'Enter') {
                    e.preventDefault();
                    addRow();
                }
                // F7 payment focus
                if (e.key === 'F7') {
                    e.preventDefault();
                    el('#paidAmount').focus();
                    el('#paidAmount').select();
                }
                // F8 hold
                if (e.key === 'F8') {
                    e.preventDefault();
                    el('#btnHold').click();
                }
                // F9 print
                if (e.key === 'F9') {
                    e.preventDefault();
                    el('#btnPrint').click();
                }
                // Alt+D discount value
                if (e.altKey && (e.key === 'd' || e.key === 'D')) {
                    e.preventDefault();
                    el('#gross_discount_value').focus();
                    el('#gross_discount_value').select();
                }
                // Ctrl+S save
                if (e.ctrlKey && (e.key === 's' || e.key === 'S')) {
                    e.preventDefault();
                    el('#btnSave').click();
                }
                // Esc cancel
                if (e.key === 'Escape') {
                    e.preventDefault();
                    el('#btnCancel').click();
                }
            });

            // Recompute when table changes via server-rendered partials (MutationObserver)
            const mo = new MutationObserver(() => recomputeTotals());
            mo.observe(tbody, {
                childList: true,
                subtree: true
            });
        })();
    </script>
@endpush