@extends('layouts.app')

@section('title', 'POS Fast Checkout Terminal - Pavitram Agroz')

@section('content')
<div class="pos-terminal-container">
    <!-- Header Bar -->
    <div class="card shadow-sm border-0 mb-3 bg-white">
        <div class="card-body py-2 px-3">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-success text-white rounded p-2 d-flex align-items-center justify-content-center" style="width: 42px; height: 42px;">
                        <i class="bi bi-calculator fs-4"></i>
                    </div>
                    <div>
                        <div class="d-flex align-items-center gap-2">
                            <h5 class="fw-bold mb-0 text-dark">POS Checkout Station</h5>
                            <span class="badge bg-success-subtle text-success border border-success"><i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i> Active Terminal</span>
                            <span class="badge bg-light text-dark border font-monospace">{{ $currentStore->code }}</span>
                        </div>
                        <small class="text-muted">
                            <i class="bi bi-shop me-1"></i><strong>{{ $currentStore->name }}</strong> | Cashier: <strong>{{ $user->name }}</strong>
                        </small>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-2">
                    <a href="{{ route('pos.invoices.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-receipt me-1"></i> Invoice History
                    </a>
                    <a href="{{ route('pos.returns.create') }}" class="btn btn-sm btn-outline-warning">
                        <i class="bi bi-arrow-return-left me-1"></i> Customer Return
                    </a>
                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#catalogModal">
                        <i class="bi bi-search me-1"></i> Product Directory
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main POS Grid -->
    <div class="row g-3">
        <!-- Left: Scanner & Cart Table (8 cols) -->
        <div class="col-lg-8">
            <!-- Hardware Scanner Bar -->
            <div class="card shadow-sm border-0 mb-3" style="background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);">
                <div class="card-body p-3">
                    <form id="scannerForm" onsubmit="event.preventDefault(); handleScanSubmit();">
                        <label class="form-label text-white small fw-bold mb-1">
                            <i class="bi bi-qr-code-scan me-1"></i> Scan Product Unit QR Code / Serial Number (USB Scanner / Keyboard Wedge)
                        </label>
                        <div class="input-group input-group-lg shadow-sm">
                            <span class="input-group-text bg-white border-0 text-success"><i class="bi bi-upc-scan fs-4"></i></span>
                            <input type="text" id="scannerInput" class="form-control border-0 font-monospace" 
                                   placeholder="Ready for scan... (e.g. PA-P001-000001 or scan QR token)" 
                                   autocomplete="off" autofocus>
                            <button class="btn btn-warning fw-bold px-4" type="submit" id="btnScanAdd">
                                <i class="bi bi-plus-circle me-1"></i> Add Unit
                            </button>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <small class="text-white-50">
                                <i class="bi bi-keyboard me-1"></i> Scanner autofocus active. Hardware scanners auto-submit on read.
                            </small>
                            <div id="scanStatusMsg" class="small fw-bold text-warning" style="min-height: 20px;"></div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Cart Table Card -->
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <span class="fw-bold"><i class="bi bi-cart3 me-2 text-success"></i>Billing Cart (<span id="cartCount">0</span> items)</span>
                    <button type="button" class="btn btn-outline-danger btn-sm py-0 px-2" onclick="clearCart()" id="btnClearCart" style="display: none;">
                        <i class="bi bi-trash me-1"></i> Clear Cart
                    </button>
                </div>
                <div class="table-responsive" style="min-height: 280px; max-height: 440px; overflow-y: auto;">
                    <table class="table align-middle mb-0" id="cartTable">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th>#</th>
                                <th>Product Details</th>
                                <th>Unit Serial #</th>
                                <th>Batch / Expiry</th>
                                <th class="text-end">Base (₹)</th>
                                <th class="text-end">GST</th>
                                <th class="text-end">Total (₹)</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody id="cartTableBody">
                            <tr id="emptyCartRow">
                                <td colspan="8" class="text-center py-5 text-muted">
                                    <i class="bi bi-qr-code fs-1 d-block mb-2 text-secondary"></i>
                                    <div class="fw-semibold">Cart is currently empty</div>
                                    <small>Scan product unit QR labels or serial numbers to build the customer's bill.</small>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right: Order Summary, Customer & Checkout (4 cols) -->
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 sticky-top" style="top: 15px;">
                <div class="card-header bg-white py-2">
                    <span class="fw-bold"><i class="bi bi-calculator me-2 text-success"></i>Bill Summary & Payment</span>
                </div>
                <div class="card-body p-3">
                    <form id="checkoutForm" onsubmit="event.preventDefault(); handleCheckoutSubmit();">
                        <!-- Customer Details (Optional) -->
                        <div class="accordion accordion-flush mb-3" id="customerAccordion">
                            <div class="accordion-item border rounded">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed py-2 px-3 small fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCustomer">
                                        <i class="bi bi-person me-2 text-muted"></i> Customer Information (Optional)
                                    </button>
                                </h2>
                                <div id="collapseCustomer" class="accordion-collapse collapse" data-bs-parent="#customerAccordion">
                                    <div class="accordion-body p-2">
                                        <div class="mb-2">
                                            <input type="text" id="custName" class="form-control form-control-sm" placeholder="Customer Name">
                                        </div>
                                        <div class="mb-2">
                                            <input type="tel" id="custPhone" class="form-control form-control-sm" placeholder="Mobile Number (for SMS receipt)">
                                        </div>
                                        <div class="mb-2">
                                            <input type="text" id="custGstin" class="form-control form-control-sm text-uppercase" placeholder="GSTIN (if B2B sale)">
                                        </div>
                                        <div>
                                            <input type="email" id="custEmail" class="form-control form-control-sm" placeholder="Email Address">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Discount Control -->
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Discount (%)</label>
                                <input type="number" id="discountPercent" class="form-control form-control-sm" min="0" max="100" step="0.5" value="0" onchange="recalculateTotals()">
                            </div>
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Discount (₹ Flat)</label>
                                <input type="number" id="discountFlat" class="form-control form-control-sm" min="0" step="1" value="0" onchange="recalculateTotals()">
                            </div>
                        </div>

                        <!-- Calculation Breakdown Table -->
                        <div class="bg-light p-3 rounded mb-3">
                            <div class="d-flex justify-content-between mb-1 small text-muted">
                                <span>Subtotal (Base):</span>
                                <span class="font-monospace fw-semibold" id="sumSubtotal">₹0.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 small text-danger" id="discountRow" style="display: none !important;">
                                <span>Discount:</span>
                                <span class="font-monospace fw-semibold" id="sumDiscount">-₹0.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 small text-muted">
                                <span>Taxable Amount:</span>
                                <span class="font-monospace fw-semibold" id="sumTaxable">₹0.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 small text-muted">
                                <span>GST (CGST + SGST):</span>
                                <span class="font-monospace fw-semibold text-primary" id="sumTax">₹0.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 small text-muted">
                                <span>Round Off:</span>
                                <span class="font-monospace" id="sumRoundOff">₹0.00</span>
                            </div>
                            <hr class="my-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold fs-6">Net Payable:</span>
                                <span class="fs-4 fw-bold text-success font-monospace" id="sumGrandTotal">₹0.00</span>
                            </div>
                        </div>

                        <!-- Payment Method Selector -->
                        <div class="mb-3">
                            <label class="form-label small fw-bold mb-1">Select Payment Method</label>
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="payment_method" id="payCash" value="Cash" checked onchange="togglePaymentFields()">
                                <label class="btn btn-outline-success btn-sm" for="payCash"><i class="bi bi-cash me-1"></i> Cash</label>

                                <input type="radio" class="btn-check" name="payment_method" id="payUpi" value="UPI" onchange="togglePaymentFields()">
                                <label class="btn btn-outline-primary btn-sm" for="payUpi"><i class="bi bi-qr-code me-1"></i> UPI</label>

                                <input type="radio" class="btn-check" name="payment_method" id="payCard" value="Card" onchange="togglePaymentFields()">
                                <label class="btn btn-outline-info btn-sm" for="payCard"><i class="bi bi-credit-card me-1"></i> Card</label>

                                <input type="radio" class="btn-check" name="payment_method" id="payOther" value="Other" onchange="togglePaymentFields()">
                                <label class="btn btn-outline-secondary btn-sm" for="payOther"><i class="bi bi-wallet2 me-1"></i> Other</label>
                            </div>
                        </div>

                        <!-- Cash Tendered Calculator (Shown when Cash selected) -->
                        <div id="cashTenderedGroup" class="mb-3 bg-light p-2 rounded">
                            <div class="row g-2 align-items-center">
                                <div class="col-6">
                                    <label class="form-label small fw-semibold mb-0">Cash Tendered (₹):</label>
                                    <input type="number" id="cashTendered" class="form-control form-control-sm" placeholder="Tendered" oninput="calculateChange()">
                                </div>
                                <div class="col-6 text-end">
                                    <span class="small text-muted d-block">Change to Return:</span>
                                    <span class="fs-6 fw-bold text-dark font-monospace" id="cashChange">₹0.00</span>
                                </div>
                            </div>
                        </div>

                        <!-- Reference Input (Shown when UPI/Card selected) -->
                        <div id="refGroup" class="mb-3" style="display: none;">
                            <label class="form-label small fw-semibold mb-1">Transaction Ref / UTR / Auth Code</label>
                            <input type="text" id="transRef" class="form-control form-control-sm" placeholder="Enter UPI UTR or Card Approval Code">
                        </div>

                        <!-- Final Checkout Button -->
                        <div class="d-grid gap-2">
                            <button type="submit" id="btnCheckout" class="btn btn-agri btn-lg fw-bold shadow-sm" disabled>
                                <i class="bi bi-check2-circle me-1"></i> Finalize Bill & Print
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Product Directory Modal for Manual Assistance -->
<div class="modal fade" id="catalogModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><i class="bi bi-search me-2 text-success"></i>Store Product Master Directory</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div class="input-group mb-3">
                    <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
                    <input type="text" id="dirSearchInput" class="form-control" placeholder="Search by product name, SKU, or code..." onkeyup="searchDirectory()">
                </div>
                <div id="dirResultsContainer" class="table-responsive" style="max-height: 380px;">
                    <div class="text-center py-4 text-muted">Type product name or SKU to view available in-store inventory.</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal with Print Options -->
<div class="modal fade" id="successModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content text-center p-4">
            <div class="rounded-circle bg-success-subtle text-success mx-auto d-flex align-items-center justify-content-center mb-3" style="width: 72px; height: 72px; font-size: 2.2rem;">
                <i class="bi bi-check2"></i>
            </div>
            <h4 class="fw-bold text-dark mb-1">Sale Completed!</h4>
            <p class="text-muted small mb-3">Invoice <strong id="succInvNum" class="text-success font-monospace"></strong> generated successfully.</p>
            <div class="fs-3 fw-bold text-dark font-monospace mb-4" id="succAmount"></div>

            <div class="d-grid gap-2">
                <button type="button" class="btn btn-agri btn-lg fw-bold" onclick="printThermalCurrent()">
                    <i class="bi bi-printer me-2"></i> Print Thermal Receipt (80mm)
                </button>
                <a href="#" id="succPrintA4" target="_blank" class="btn btn-outline-secondary">
                    <i class="bi bi-file-earmark-pdf me-2"></i> View / Print A4 Tax Invoice
                </a>
                <button type="button" class="btn btn-light border mt-2" onclick="resetTerminalForNextSale()">
                    <i class="bi bi-arrow-clockwise me-1"></i> Start Next Customer Sale (Esc)
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const STORE_ID = {{ $currentStore->id }};
    const SCAN_URL = "{{ route('pos.scan-unit') }}";
    const CHECKOUT_URL = "{{ route('pos.checkout') }}";
    const SEARCH_DIR_URL = "{{ route('pos.search-products') }}";
    const CSRF_TOKEN = "{{ csrf_token() }}";

    // In-memory Cart
    let cart = [];
    let currentCompletedInvoice = null;

    document.addEventListener('DOMContentLoaded', () => {
        focusScanner();

        // Keyboard hotkeys
        document.addEventListener('keydown', (e) => {
            // F8 or Ctrl+Enter to trigger checkout
            if ((e.key === 'F8' || (e.ctrlKey && e.key === 'Enter')) && cart.length > 0) {
                e.preventDefault();
                handleCheckoutSubmit();
            }
            // Escape to reset if modal open
            if (e.key === 'Escape') {
                const modalEl = document.getElementById('successModal');
                if (bootstrap.Modal.getInstance(modalEl)) {
                    resetTerminalForNextSale();
                }
            }
        });
    });

    function focusScanner() {
        const input = document.getElementById('scannerInput');
        if (input) {
            input.focus();
            input.select();
        }
    }

    // Process Scanned Code via AJAX
    async function handleScanSubmit() {
        const input = document.getElementById('scannerInput');
        const code = input.value.trim();
        const statusEl = document.getElementById('scanStatusMsg');

        if (!code) {
            focusScanner();
            return;
        }

        // Check if unit is already in cart
        if (cart.some(item => item.serial_number === code || item.qr_token === code)) {
            showScanMessage("Unit is already in the billing cart!", true);
            input.value = '';
            focusScanner();
            return;
        }

        statusEl.className = "small fw-bold text-info";
        statusEl.innerText = "Validating unit...";

        try {
            const response = await fetch(SCAN_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                },
                body: JSON.stringify({
                    scan_code: code,
                    store_id: STORE_ID,
                })
            });

            const data = await response.json();

            if (data.success && data.unit) {
                // Check if already in cart by ID
                if (cart.some(item => item.id === data.unit.id)) {
                    showScanMessage("Unit is already added in cart!", true);
                } else {
                    cart.push(data.unit);
                    renderCart();
                    showScanMessage(`Added: ${data.unit.product_name} (${data.unit.serial_number})`, false);
                }
                input.value = '';
            } else {
                showScanMessage(data.message || 'Scanned code is invalid or not available in store.', true);
                input.select();
            }
        } catch (err) {
            showScanMessage("Error communicating with store server. Please try again.", true);
        } finally {
            focusScanner();
        }
    }

    function showScanMessage(msg, isError) {
        const statusEl = document.getElementById('scanStatusMsg');
        statusEl.className = isError ? "small fw-bold text-warning" : "small fw-bold text-white";
        statusEl.innerText = msg;
        setTimeout(() => {
            if (statusEl.innerText === msg) statusEl.innerText = '';
        }, 4000);
    }

    function renderCart() {
        const tbody = document.getElementById('cartTableBody');
        const countEl = document.getElementById('cartCount');
        const clearBtn = document.getElementById('btnClearCart');
        const checkoutBtn = document.getElementById('btnCheckout');

        countEl.innerText = cart.length;

        if (cart.length === 0) {
            tbody.innerHTML = `
                <tr id="emptyCartRow">
                    <td colspan="8" class="text-center py-5 text-muted">
                        <i class="bi bi-qr-code fs-1 d-block mb-2 text-secondary"></i>
                        <div class="fw-semibold">Cart is currently empty</div>
                        <small>Scan product unit QR labels or serial numbers to build the customer's bill.</small>
                    </td>
                </tr>
            `;
            clearBtn.style.display = 'none';
            checkoutBtn.disabled = true;
            recalculateTotals();
            return;
        }

        clearBtn.style.display = 'inline-block';
        checkoutBtn.disabled = false;

        let rowsHtml = '';
        cart.forEach((item, index) => {
            rowsHtml += `
                <tr>
                    <td class="text-muted small">${index + 1}</td>
                    <td>
                        <div class="fw-bold text-dark">${escapeHtml(item.product_name)}</div>
                        <small class="text-muted">${escapeHtml(item.sku)} | ${escapeHtml(item.size_or_weight ?? '')} ${escapeHtml(item.unit_of_measurement ?? '')}</small>
                    </td>
                    <td>
                        <span class="badge bg-light text-dark border font-monospace">${escapeHtml(item.serial_number)}</span>
                    </td>
                    <td>
                        <div class="font-monospace small">${escapeHtml(item.batch_number)}</div>
                        <small class="text-muted">Exp: ${escapeHtml(item.expiry_date)}</small>
                    </td>
                    <td class="text-end font-monospace">₹${item.selling_price.toFixed(2)}</td>
                    <td class="text-end small">
                        <span class="badge bg-info-subtle text-info-emphasis">${item.tax_rate}%</span>
                    </td>
                    <td class="text-end font-monospace fw-bold text-success">₹${item.total_price.toFixed(2)}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2" onclick="removeItem(${item.id})" title="Remove item">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </td>
                </tr>
            `;
        });

        tbody.innerHTML = rowsHtml;
        recalculateTotals();
    }

    function removeItem(unitId) {
        cart = cart.filter(item => item.id !== unitId);
        renderCart();
        focusScanner();
    }

    function clearCart() {
        if (confirm("Are you sure you want to clear the entire billing cart?")) {
            cart = [];
            renderCart();
            focusScanner();
        }
    }

    function recalculateTotals() {
        let subtotal = 0;
        let totalTax = 0;

        const discPercent = parseFloat(document.getElementById('discountPercent').value) || 0;
        const discFlat = parseFloat(document.getElementById('discountFlat').value) || 0;

        cart.forEach(item => {
            subtotal += item.selling_price;
        });

        let discount = 0;
        if (discPercent > 0) {
            discount = Math.round((subtotal * discPercent) / 100 * 100) / 100;
        } else if (discFlat > 0) {
            discount = Math.min(subtotal, discFlat);
        }

        const taxable = Math.max(0, subtotal - discount);

        // Approximate blended tax on taxable proportion
        cart.forEach(item => {
            const propPrice = subtotal > 0 ? (item.selling_price / subtotal) * taxable : 0;
            totalTax += Math.round((propPrice * (item.tax_rate / 100)) * 100) / 100;
        });

        const rawTotal = taxable + totalTax;
        const grandTotal = Math.round(rawTotal);
        const roundOff = Math.round((grandTotal - rawTotal) * 100) / 100;

        document.getElementById('sumSubtotal').innerText = '₹' + subtotal.toFixed(2);
        document.getElementById('sumTaxable').innerText = '₹' + taxable.toFixed(2);
        document.getElementById('sumTax').innerText = '₹' + totalTax.toFixed(2);
        document.getElementById('sumRoundOff').innerText = (roundOff >= 0 ? '+₹' : '-₹') + Math.abs(roundOff).toFixed(2);
        document.getElementById('sumGrandTotal').innerText = '₹' + grandTotal.toFixed(2);

        const discRow = document.getElementById('discountRow');
        const discEl = document.getElementById('sumDiscount');
        if (discount > 0) {
            discRow.style.setProperty('display', 'flex', 'important');
            discEl.innerText = '-₹' + discount.toFixed(2);
        } else {
            discRow.style.setProperty('display', 'none', 'important');
        }

        calculateChange();
    }

    function togglePaymentFields() {
        const method = document.querySelector('input[name="payment_method"]:checked').value;
        const cashGroup = document.getElementById('cashTenderedGroup');
        const refGroup = document.getElementById('refGroup');

        if (method === 'Cash') {
            cashGroup.style.display = 'block';
            refGroup.style.display = 'none';
        } else {
            cashGroup.style.display = 'none';
            refGroup.style.display = 'block';
        }
    }

    function calculateChange() {
        const tenderVal = parseFloat(document.getElementById('cashTendered').value) || 0;
        const grandTotalStr = document.getElementById('sumGrandTotal').innerText.replace(/[₹,]/g, '');
        const grandTotal = parseFloat(grandTotalStr) || 0;
        const changeEl = document.getElementById('cashChange');

        if (tenderVal > grandTotal) {
            changeEl.innerText = '₹' + (tenderVal - grandTotal).toFixed(2);
            changeEl.className = "fs-6 fw-bold text-success font-monospace";
        } else {
            changeEl.innerText = '₹0.00';
            changeEl.className = "fs-6 fw-bold text-muted font-monospace";
        }
    }

    async function handleCheckoutSubmit() {
        if (cart.length === 0) {
            alert("Cart is empty. Please scan units first.");
            focusScanner();
            return;
        }

        const btn = document.getElementById('btnCheckout');
        btn.disabled = true;
        btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span> Processing Sale...`;

        const paymentMethod = document.querySelector('input[name="payment_method"]:checked').value;
        const payload = {
            store_id: STORE_ID,
            unit_ids: cart.map(item => item.id),
            customer_name: document.getElementById('custName').value.trim() || null,
            customer_phone: document.getElementById('custPhone').value.trim() || null,
            customer_gstin: document.getElementById('custGstin').value.trim() || null,
            customer_email: document.getElementById('custEmail').value.trim() || null,
            discount_percent: parseFloat(document.getElementById('discountPercent').value) || 0,
            discount_amount: parseFloat(document.getElementById('discountFlat').value) || 0,
            payment_method: paymentMethod,
            transaction_reference: document.getElementById('transRef').value.trim() || null,
            checkout_token: 'chk_' + Date.now() + '_' + Math.random().toString(36).substring(2, 9),
        };

        try {
            const response = await fetch(CHECKOUT_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                },
                body: JSON.stringify(payload)
            });

            const data = await response.json();

            if (data.success && data.invoice) {
                currentCompletedInvoice = data.invoice;
                document.getElementById('succInvNum').innerText = data.invoice.invoice_number;
                document.getElementById('succAmount').innerText = '₹' + parseFloat(data.invoice.grand_total).toFixed(2);
                document.getElementById('succPrintA4').href = `/pos/invoices/${data.invoice.id}/print`;

                const modal = new bootstrap.Modal(document.getElementById('successModal'));
                modal.show();
            } else {
                alert("Checkout failed: " + (data.message || "Unknown error occurred."));
                btn.disabled = false;
                btn.innerHTML = `<i class="bi bi-check2-circle me-1"></i> Finalize Bill & Print`;
            }
        } catch (err) {
            alert("Server connection failed during checkout. Please verify inventory state before re-trying.");
            btn.disabled = false;
            btn.innerHTML = `<i class="bi bi-check2-circle me-1"></i> Finalize Bill & Print`;
        }
    }

    function printThermalCurrent() {
        if (currentCompletedInvoice) {
            const printWin = window.open(`/pos/invoices/${currentCompletedInvoice.id}/thermal`, '_blank', 'width=420,height=600');
            if (printWin) {
                printWin.focus();
            }
        }
    }

    function resetTerminalForNextSale() {
        const modalEl = document.getElementById('successModal');
        const modalInstance = bootstrap.Modal.getInstance(modalEl);
        if (modalInstance) {
            modalInstance.hide();
        }

        cart = [];
        currentCompletedInvoice = null;
        document.getElementById('custName').value = '';
        document.getElementById('custPhone').value = '';
        document.getElementById('custGstin').value = '';
        document.getElementById('custEmail').value = '';
        document.getElementById('discountPercent').value = '0';
        document.getElementById('discountFlat').value = '0';
        document.getElementById('cashTendered').value = '';
        document.getElementById('transRef').value = '';
        document.getElementById('payCash').checked = true;
        togglePaymentFields();

        renderCart();
        focusScanner();
    }

    // Product Directory Search
    let searchDebounce = null;
    function searchDirectory() {
        clearTimeout(searchDebounce);
        searchDebounce = setTimeout(async () => {
            const term = document.getElementById('dirSearchInput').value.trim();
            const container = document.getElementById('dirResultsContainer');

            if (!term) {
                container.innerHTML = `<div class="text-center py-4 text-muted">Type product name or SKU to view available in-store inventory.</div>`;
                return;
            }

            try {
                const res = await fetch(`${SEARCH_DIR_URL}?store_id=${STORE_ID}&search=${encodeURIComponent(term)}`);
                const data = await res.json();

                if (data.success && data.products.length > 0) {
                    let html = `<table class="table table-hover align-middle mb-0">
                        <thead class="table-light"><tr><th>Product</th><th>SKU</th><th>Available Units</th><th>Price (₹)</th></tr></thead><tbody>`;
                    data.products.forEach(p => {
                        html += `<tr>
                            <td class="fw-bold">${escapeHtml(p.name)}</td>
                            <td><span class="badge bg-light text-dark border font-monospace">${escapeHtml(p.sku)}</span></td>
                            <td><span class="badge ${p.available_units_count > 0 ? 'bg-success' : 'bg-secondary'}">${p.available_units_count} units in store</span></td>
                            <td class="font-monospace fw-bold">₹${parseFloat(p.selling_price).toFixed(2)}</td>
                        </tr>`;
                    });
                    html += `</tbody></table>`;
                    container.innerHTML = html;
                } else {
                    container.innerHTML = `<div class="text-center py-4 text-muted">No products found matching '${escapeHtml(term)}'.</div>`;
                }
            } catch (e) {
                container.innerHTML = `<div class="text-center py-4 text-danger">Failed to load product directory.</div>`;
            }
        }, 300);
    }

    function escapeHtml(text) {
        if (!text) return '';
        const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
        return text.toString().replace(/[&<>"']/g, m => map[m]);
    }
</script>
@endpush