@extends('master.app')
@section('title', 'Create Invoice')

@section('pageCSS')
    {{-- If select2 is NOT in master, uncomment these --}}
    {{-- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> --}}

    <style>
        :root{
            --radius: 16px;
            --shadow: 0 10px 28px rgba(2, 6, 23, .06);
            --muted: #6b7280;
        }

        .card-soft {
            border: 0;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .fade-in { animation: fadeIn .25s ease-in-out; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pill {
            padding: .35rem .75rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, .06);
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            font-size: .9rem;
        }

        .muted-hint { font-size: .82rem; color: var(--muted); }

        /* ✅ unified fields */
        .field {
            margin-bottom: 0;
        }
        .field label.form-label {
            font-size: .85rem;
            color: #111827;
            margin-bottom: .35rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }
        .field .form-control,
        .field .select2-container--default .select2-selection--single {
            height: 44px !important;
            border-radius: 12px !important;
        }

        /* select2 align */
        .select2-container--default .select2-selection--single {
            display:flex !important;
            align-items:center !important;
            border: 1px solid #d1d5db !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 44px !important;
            padding-left: 12px !important;
            padding-right: 34px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 44px !important;
            right: 8px !important;
        }

        .form-outline .form-control {
            height: 44px !important;
            border-radius: 12px !important;
        }
        .form-outline .form-label { font-size: .85rem; }

        .table thead th { background: #fff; white-space: nowrap; }
        .table td { vertical-align: middle; }

        .btn-rounded { border-radius: 999px; }
        .btn-soft {
            background: rgba(2, 132, 199, .08);
            color: #0369a1;
            border: 0;
        }
        .btn-soft:hover { background: rgba(2, 132, 199, .14); }

        .section-title{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom: 10px;
        }
        .section-title h5{ margin:0; }

        .divider {
            height: 1px;
            background: #e5e7eb;
            margin: 14px 0;
        }
    </style>
@endsection

@section('body')
<main class="app-content fade-in">

    @include('general.valert')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('customer_bill.store_full') }}" method="POST" enctype="multipart/form-data" id="invoiceForm">
        @csrf

        {{-- ✅ HEADER --}}
        <div class="card card-soft mb-3">
            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div>
                        <h4 class="fw-bold mb-0">
                            <i class="fas fa-file-invoice-dollar me-1"></i> Create Invoice
                        </h4>
                        <small class="text-muted">Single page • Clean • Fast</small>
                    </div>

                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <span class="pill">
                            <i class="fas fa-hashtag"></i>
                            <span id="invPreview">{{ old('invoice_number', $number) }}</span>
                        </span>
                        <span class="pill">
                            <i class="fas fa-layer-group"></i>
                            Items: <span id="itemsCount">0</span>
                        </span>
                        <span class="pill">
                            <i class="fas fa-wallet"></i>
                            Balance: <span id="balancePreview">0</span>
                        </span>
                    </div>
                </div>

                <div class="row g-3">

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-tags"></i> Type</label>
                        <select id="type_id" name="type_id" required class="form-control select2" style="width:100%;">
                            <option value="1" selected>Finished Goods</option>
                            <option value="2" disabled>Row Material (disabled)</option>
                            <option value="5" disabled>No Stock (disabled)</option>
                        </select>
                        <div class="muted-hint mt-1">Safe mode (stock required)</div>
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-user"></i> Customer (Search)</label>
                        <select id="customer_id" name="customer_id" required class="form-control select2" style="width:100%;">
                            <option value="">Search customer...</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" @selected(old('customer_id') == $customer->id)>
                                    {{ $customer->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="muted-hint mt-1">Type name / phone / code to search</div>
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-hashtag"></i> Invoice Number</label>
                        <input type="number" name="invoice_number" required value="{{ old('invoice_number', $number) }}"
                            id="invoice_number" class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-calendar"></i> Date</label>
                        <input type="date" required name="date" value="{{ old('date', date('Y-m-d')) }}"
                            class="form-control" id="date" />
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-pen"></i> Title</label>
                        <input type="text" name="title" required id="title" value="{{ old('title') }}"
                            class="form-control" />
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-coins"></i> Currency</label>
                        <select id="currency_id" required name="currency_id" class="form-control select2" style="width:100%;">
                            <option value="">Choose Currency</option>
                            @foreach ($currencies as $row)
                                <option value="{{ $row->id }}" @selected(old('currency_id', 1) == $row->id)>
                                    {{ $row->title_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 field" id="exRateBox">
                        <label class="form-label"><i class="fas fa-exchange-alt"></i> Exchange Rate</label>
                        <input type="text" name="ex_rate" id="ex_rate" value="{{ old('ex_rate') }}"
                            class="form-control" placeholder="Optional" />
                    </div>

                    <div class="col-md-6 field">
                        <label class="form-label"><i class="fas fa-paperclip"></i> Attach Invoice File</label>
                        <input type="file" class="form-control" name="invoice_file" id="invoice_file" />
                    </div>

                </div>
            </div>
        </div>

        {{-- ✅ ITEMS --}}
        <div class="card card-soft mb-3">
            <div class="card-body">

                <div class="section-title">
                    <h5 class="fw-bold"><i class="fas fa-list me-1"></i> Add Items</h5>
                    <small class="text-muted"><i class="fas fa-shield-alt me-1"></i> Stock qty validated</small>
                </div>

                <div class="row g-3">
                    <div class="col-md-6 field">
                        <label class="form-label"><i class="fas fa-box"></i> Stock (Search)</label>
                        <select id="stock_id" class="form-control select2" style="width:100%;">
                            <option value="">Search stock...</option>
                            @foreach ($stocks as $s)
                                <option value="{{ $s->id }}"
                                    data-qty="{{ $s->qty ?? 0 }}">
                                    {{ optional($s->category)->title_en }} /
                                    {{ optional($s->sub_category)->title_en }} /
                                    {{ optional($s->weight)->title_en }} /
                                    {{ optional($s->unit)->title_en }}
                                    (Qty: {{ $s->qty ?? 0 }})
                                </option>
                            @endforeach
                        </select>
                        <div class="muted-hint mt-1" id="stockHint"></div>
                    </div>

                    <div class="col-md-2 field">
                        <label class="form-label"><i class="fas fa-tag"></i> Sale Price</label>
                        <input type="number" step="0.01" id="sale_price" value="0" class="form-control" />
                    </div>

                    <div class="col-md-2 field">
                        <label class="form-label"><i class="fas fa-sort-numeric-up"></i> Qty</label>
                        <input type="number" step="0.01" id="qty_input" value="1" class="form-control" />
                    </div>

                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-primary btn-rounded w-100" id="addBtn">
                            Add Item <i class="fa fa-plus ms-1"></i>
                        </button>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead>
                            <tr>
                                <th style="width:60px;">#</th>
                                <th>Stock</th>
                                <th style="width:130px;">Price</th>
                                <th style="width:110px;">Qty</th>
                                <th style="width:140px;">Total</th>
                                <th style="width:90px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="itemsBody">
                            <tr id="emptyRow">
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="fas fa-box-open me-1"></i> No items yet
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div id="itemsInputs"></div>

            </div>
        </div>

        {{-- ✅ STATEMENT --}}
        <div class="card card-soft">
            <div class="card-body">

                <div class="section-title">
                    <h5 class="fw-bold"><i class="fas fa-calculator me-1"></i> Invoice Statement</h5>
                    <small class="text-muted">Discount & Received auto-calc balance</small>
                </div>

                <div class="row g-3">

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-sack-dollar"></i> Total</label>
                        <input type="text" readonly id="grand_total" name="grand_total" value="{{ old('grand_total', 0) }}"
                            class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-percent"></i> Discount</label>
                        <input type="number" step="0.01" id="bill_discount" name="bill_discount"
                            value="{{ old('bill_discount', 0) }}" class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-hand-holding-dollar"></i> Received</label>
                        <input type="number" step="0.01" id="received" name="received"
                            value="{{ old('received', 0) }}" class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-wallet"></i> Balance</label>
                        <input type="text" readonly id="balance_value" name="balance_value"
                            value="{{ old('balance_value', 0) }}" class="form-control" />
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-exchange"></i> Transaction</label>
                        <select name="transaction_id" class="form-control select2" required style="width:100%;">
                            <option value="">Define Transaction</option>
                            <option value="1" @selected(old('transaction_id') == 1)>By Cash</option>
                            <option value="2" @selected(old('transaction_id') == 2)>By Bank</option>
                            <option value="3" @selected(old('transaction_id') == 3)>By Sarafi</option>
                            <option value="4" @selected(old('transaction_id') == 4)>Other</option>
                        </select>
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-bullseye"></i> Cash Target</label>
                        <select name="cash_id" class="form-control select2" required style="width:100%;">
                            <option value="">Define Cash Target</option>
                            <option value="1" @selected(old('cash_id') == 1)>Target Cash Yes</option>
                            <option value="2" @selected(old('cash_id') == 2)>Target Cash No</option>
                        </select>
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-user-check"></i> Received By</label>
                        <input type="text" name="received_by" value="{{ old('received_by') }}"
                            class="form-control" />
                    </div>

                    <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                        <button type="button" class="btn btn-soft btn-rounded" id="resetBtn">
                            Reset <i class="fas fa-rotate-left ms-1"></i>
                        </button>
                        <button type="submit" class="btn btn-success btn-rounded" id="checkoutBtn">
                            Checkout <i class="fas fa-check ms-1"></i>
                        </button>
                    </div>

                    <div class="col-12">
                        <div class="muted-hint mt-1">
                            <i class="fas fa-shield-alt me-1"></i>
                            Submit blocked if no items — prevents empty invoices.
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </form>
</main>
@endsection

@section('pageJs')
    {{-- If select2 is NOT in master, uncomment these --}}
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // ===============================
        // Robust Invoice JS (No jQuery required)
        // - Auto fill price when stock selected (SPI)
        // - Block zero stock & enforce remaining (available - inCart)
        // - Only In Stock toggle (based on remaining)
        // - After adding, option hides when remaining becomes 0
        // - Works with/without select2
        // ===============================

        (function(){
            const $id = (id) => document.getElementById(id);
            const num = (v)=> { const n=parseFloat(v); return isNaN(n)?0:n; };

            const stockSel   = $id('stock_id');
            const priceInput = $id('sale_price');
            const qtyInput   = $id('qty_input');
            const addBtn     = $id('addBtn');

            const tbody      = $id('itemsBody');
            const inputsWrap = $id('itemsInputs');

            const grandInput = $id('grand_total');
            const discInput  = $id('bill_discount');
            const recvInput  = $id('received');
            const balInput   = $id('balance_value');

            const onlyInStock = $id('onlyInStock');
            const stockHint   = $id('stockHint');

            const itemsCount = $id('itemsCount');
            const invPreview = $id('invPreview');
            const balancePreview = $id('balancePreview');
            const invoiceNumberInput = $id('invoice_number');

            // SweetAlert fallback
            const alertBox = (title, text, icon='info') => {
                if (window.Swal) return Swal.fire(title, text, icon);
                alert(`${title}\n${text}`);
            };
            const confirmBox = async (title, text) => {
                if (window.Swal){
                    const r = await Swal.fire({title, text, icon:'warning', showCancelButton:true, confirmButtonText:'Yes', cancelButtonText:'Cancel'});
                    return !!r.isConfirmed;
                }
                return confirm(`${title}\n${text}`);
            };

            // Optional: mark menus if jQuery exists
            try{
                if(window.jQuery){
                    $(".app-menu").removeClass("active");
                    $("#nav_salei").addClass("active");
                    $("#salei").addClass("is-expanded");
                    $("#customer_bill").addClass("active");
                }
            }catch(e){}

            // select2 init if available
            try{
                if(window.jQuery && jQuery.fn && jQuery.fn.select2){
                    jQuery('.select2').select2({ placeholder:"Search...", allowClear:true, width:'resolve' });
                }
            }catch(e){}

            let items = [];

            function optOf(stockId){
                return stockSel ? stockSel.querySelector(`option[value="${CSS.escape(String(stockId))}"]`) : null;
            }
            function availableOf(stockId){
                const o = optOf(stockId);
                return o ? num(o.dataset.qty) : 0;
            }
            function qtyInCart(stockId){
                stockId = String(stockId);
                return items.filter(x => String(x.stock_id)===stockId).reduce((s,x)=> s + num(x.qty), 0);
            }
            function remainingOf(stockId){
                return Math.max(availableOf(stockId) - qtyInCart(stockId), 0);
            }

            function refreshBadges(){
                if(itemsCount) itemsCount.innerText = String(items.length);
                if(invPreview && invoiceNumberInput) invPreview.innerText = invoiceNumberInput.value || '';
                if(balancePreview && balInput) balancePreview.innerText = balInput.value || '0';
            }

            function recalc(){
                const total = num(grandInput?.value);
                const disc  = num(discInput?.value);
                const recv  = num(recvInput?.value);

                const final = Math.max(total - disc, 0);
                const received = Math.min(recv, final);
                const bal   = Math.max(final - received, 0);

                if(recvInput && recv > final) recvInput.value = final.toFixed(2);
                if(balInput) balInput.value = bal.toFixed(2);

                refreshBadges();
            }

            function updateStockHint(){
                if(!stockHint) return;

                const stockId = stockSel?.value;
                if(!stockId){
                    stockHint.innerHTML = '';
                    return;
                }

                const o = optOf(stockId);
                if(!o){
                    stockHint.innerHTML = '';
                    return;
                }

                const av  = availableOf(stockId);
                const inC = qtyInCart(stockId);
                const rem = remainingOf(stockId);
                const sku = o.dataset.sku || '-';
                const cpi = num(o.dataset.cpi || 0);
                const spi = num(o.dataset.spi || 0);

                stockHint.innerHTML =
                    `<div class="d-flex flex-wrap gap-3">
                        <div><span class="mini">SKU</span><div><b>${sku}</b></div></div>
                        <div><span class="mini">CPI</span><div><b>${cpi}</b></div></div>
                        <div><span class="mini">SPI</span><div><b>${spi}</b></div></div>
                     </div>
                     <div class="mt-2">
                        <i class="fas fa-cubes me-1"></i>
                        Available: <b>${av}</b>
                        <span class="ms-2">In Invoice: <b>${inC}</b></span>
                        <span class="ms-2">Remaining: <b>${rem}</b></span>
                     </div>`;

                // clamp qty to remaining
                const q = num(qtyInput?.value);
                if(qtyInput && q > rem) qtyInput.value = rem > 0 ? rem : 1;
            }

            function applyStockFilter(){
                if(!stockSel) return;
                const only = !!onlyInStock?.checked;

                // filter based on REMAINING not just available
                for(const o of stockSel.options){
                    if(!o.value) continue;
                    const rem = remainingOf(o.value);
                    o.hidden = only ? (rem <= 0) : false;
                    o.disabled = (rem <= 0); // prevent selecting empty even if visible
                }

                // if current selected is now invalid, clear it
                const cur = stockSel.value;
                if(cur && remainingOf(cur) <= 0){
                    stockSel.value = '';
                    // sync select2 if present
                    try{
                        if(window.jQuery && jQuery.fn && jQuery.fn.select2){
                            jQuery(stockSel).val(null).trigger('change');
                        }
                    }catch(e){}
                    updateStockHint();
                }
            }

            function renderItems(){
                if(!tbody || !inputsWrap) return;

                tbody.innerHTML = '';
                inputsWrap.innerHTML = '';

                if(items.length === 0){
                    tbody.innerHTML = `
                        <tr id="emptyRow">
                            <td colspan="6" class="text-center text-muted py-4">
                                <i class="fas fa-box-open me-1"></i> No items yet
                            </td>
                        </tr>`;
                    if(grandInput) grandInput.value = "0";
                    recalc();
                    refreshBadges();
                    applyStockFilter();
                    updateStockHint();
                    return;
                }

                let sum = 0;

                items.forEach((it, idx)=>{
                    const rowTotal = num(it.price) * num(it.qty);
                    sum += rowTotal;

                    tbody.insertAdjacentHTML("beforeend", `
                        <tr>
                            <td>${idx+1}</td>
                            <td>
                                <div class="fw-semibold">${it.label}</div>
                                <small class="text-muted"><i class="fas fa-barcode me-1"></i> Stock ID: ${it.stock_id}</small>
                            </td>
                            <td>${num(it.price).toFixed(2)}</td>
                            <td>${it.qty}</td>
                            <td class="fw-bold">${rowTotal.toFixed(2)}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-light js-remove" data-i="${idx}" title="Remove">
                                    <i class="fa fa-trash text-danger"></i>
                                </button>
                            </td>
                        </tr>
                    `);

                    inputsWrap.insertAdjacentHTML("beforeend", `
                        <input type="hidden" name="items[${idx}][stock_id]" value="${it.stock_id}">
                        <input type="hidden" name="items[${idx}][sale_price]" value="${it.price}">
                        <input type="hidden" name="items[${idx}][qty]" value="${it.qty}">
                    `);
                });

                if(grandInput) grandInput.value = sum.toFixed(2);
                recalc();
                refreshBadges();
                applyStockFilter();
                updateStockHint();
            }

            async function removeItem(i){
                const ok = await confirmBox("Remove item?", "This will remove this row from invoice items.");
                if(!ok) return;
                items.splice(i,1);
                renderItems();
            }

            function autoFillPriceFromSelected(){
                const sid = stockSel?.value;
                if(!sid) return;
                const o = optOf(sid);
                if(!o) return;

                const spi = num(o.dataset.spi || 0);
                if(priceInput) priceInput.value = spi ? spi : (priceInput.value || 0);

                // also clamp qty
                const rem = remainingOf(sid);
                if(qtyInput){
                    if(num(qtyInput.value) <= 0) qtyInput.value = 1;
                    if(num(qtyInput.value) > rem) qtyInput.value = rem > 0 ? rem : 1;
                }

                updateStockHint();
            }

            function addItem(){
                const sid = stockSel?.value;
                if(!sid) return alertBox("Missing", "Please choose a stock item first.", "warning");

                const rem = remainingOf(sid);
                const price = num(priceInput?.value);
                const qty   = num(qtyInput?.value);

                if(price <= 0) return alertBox("Invalid Price", "Sale price must be greater than 0.", "warning");
                if(qty <= 0) return alertBox("Invalid Qty", "Qty must be greater than 0.", "warning");

                // ✅ block zero stock & over remaining
                if(rem <= 0) return alertBox("Out of Stock", "This item has no remaining quantity.", "warning");
                if(qty > rem) return alertBox("Stock Limit", `Only ${rem} remaining for this invoice.`, "warning");

                const o = optOf(sid);
                const label = o ? o.text.trim() : (`Stock #${sid}`);

                // merge same stock + same price
                const foundIndex = items.findIndex(x => String(x.stock_id)===String(sid) && num(x.price)===price);
                if(foundIndex !== -1){
                    const newQty = num(items[foundIndex].qty) + qty;
                    if(newQty > availableOf(sid)){
                        return alertBox("Stock Limit", `Total for this item cannot exceed ${availableOf(sid)}.`, "warning");
                    }
                    items[foundIndex].qty = newQty;
                }else{
                    items.push({ stock_id: sid, label, price, qty });
                }

                // reset inputs
                if(qtyInput) qtyInput.value = 1;
                if(stockSel) stockSel.value = '';

                // sync select2 if present
                try{
                    if(window.jQuery && jQuery.fn && jQuery.fn.select2){
                        jQuery(stockSel).val(null).trigger('change');
                    }
                }catch(e){}

                renderItems();
            }

            function resetInvoice(){
                items = [];
                if(priceInput) priceInput.value = 0;
                if(qtyInput) qtyInput.value = 1;
                if(discInput) discInput.value = 0;
                if(recvInput) recvInput.value = 0;
                renderItems();
            }

            // Event bindings
            if(addBtn) addBtn.addEventListener('click', addItem);

            if(stockSel){
                stockSel.addEventListener('change', function(){
                    // auto fill price when stock selected ✅
                    autoFillPriceFromSelected();
                    applyStockFilter();
                });
            }
            if(qtyInput) qtyInput.addEventListener('input', updateStockHint);
            if(discInput) discInput.addEventListener('input', recalc);
            if(recvInput) recvInput.addEventListener('input', recalc);
            if(invoiceNumberInput) invoiceNumberInput.addEventListener('input', refreshBadges);
            if(onlyInStock) onlyInStock.addEventListener('change', applyStockFilter);

            // remove button delegation
            if(tbody){
                tbody.addEventListener('click', function(e){
                    const btn = e.target.closest('.js-remove');
                    if(!btn) return;
                    const i = parseInt(btn.dataset.i, 10);
                    if(!isNaN(i)) removeItem(i);
                });
            }

            const resetBtn = $id('resetBtn');
            if(resetBtn){
                resetBtn.addEventListener('click', async function(){
                    const ok = await confirmBox("Reset invoice?", "This will clear all items and totals.");
                    if(ok) resetInvoice();
                });
            }

            const form = $id('invoiceForm');
            const checkoutBtn = $id('checkoutBtn');
            if(form){
                form.addEventListener('submit', function(e){
                    if(items.length === 0){
                        e.preventDefault();
                        alertBox("No Items", "Please add at least one item to checkout.", "warning");
                        return;
                    }

                    // final hard validation
                    const map = {};
                    items.forEach(it => map[it.stock_id] = (map[it.stock_id] || 0) + num(it.qty));
                    for(const sid in map){
                        const av = availableOf(sid);
                        if(map[sid] > av){
                            e.preventDefault();
                            alertBox("Stock Limit", `Stock limit exceeded for item ${sid}. Needed ${map[sid]}, available ${av}`, "warning");
                            return;
                        }
                    }

                    if(checkoutBtn){
                        checkoutBtn.disabled = true;
                        checkoutBtn.innerHTML = `Processing <i class="fas fa-spinner fa-spin ms-1"></i>`;
                    }
                });
            }

            // initial
            renderItems();
            recalc();
            refreshBadges();
            applyStockFilter();
            updateStockHint();

        })();
    </script>
@endsection