@extends('layouts.app')
@section('title', 'Point of Sale')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('sales.index') }}">Sales</a></li>
<li class="breadcrumb-item active">POS</li>
@endsection

@push('styles')
<style>
    #main-content { padding: .5rem 1rem 1rem; }
    .pos-grid {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: .75rem;
        min-height: calc(100vh - 90px);
    }
    @media (max-width: 991px) {
        .pos-grid { grid-template-columns: 1fr; min-height: auto; }
    }
    .pos-left  { display: flex; flex-direction: column; gap: .65rem; }
    .pos-right { display: flex; flex-direction: column; gap: .65rem; }
    .cart-wrap { flex: 1; overflow-y: auto; min-height: 200px; }
    .cart-table { font-size: .82rem; }
    .cart-table thead th {
        font-size: .7rem; font-weight: 700;
        color: #64748b; text-transform: uppercase;
        letter-spacing: .04em; background: #f8fafc;
        position: sticky; top: 0; z-index: 1;
    }
    .cart-row:hover { background: #f0f9ff; }
    .sr-card {
        border: 1.5px solid #e2e8f0; border-radius: 10px;
        padding: .6rem .75rem; cursor: pointer;
        transition: all .12s;
    }
    .sr-card:hover { border-color: #1d4ed8; background: #eff6ff; }
    .numpad-btn {
        padding: .55rem; border: 1px solid #e2e8f0;
        border-radius: 8px; font-size: 1rem;
        font-weight: 600; cursor: pointer;
        background: #fff; color: #1e293b;
        transition: background .1s;
        width: 100%;
    }
    .numpad-btn:hover  { background: #f1f5f9; }
    .numpad-btn.danger { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
    .method-btn { font-size: .75rem; padding: .3rem .7rem; }
    .total-line { font-size: .875rem; }
    .grand-total-val { font-size: 1.5rem; font-weight: 900; color: #1d4ed8; }
</style>
@endpush

@section('content')

<form id="posForm" method="POST" action="{{ route('sales.store') }}" novalidate>
@csrf
<input type="hidden" name="invoice_no" value="{{ $invoiceNo }}">
<input type="hidden" name="sale_date"  value="{{ date('Y-m-d') }}">
<input type="hidden" name="payment_method" id="payMethodHidden" value="cash">

<div class="pos-grid">

    {{-- ════════════ LEFT ════════════ --}}
    <div class="pos-left">

        {{-- Barcode / Search --}}
        <div class="card">
            <div class="card-body py-2 px-3">
                <div class="input-group">
                    <span class="input-group-text"
                          style="background:#1d4ed8;color:#fff;border-color:#1d4ed8;">
                        <i class="bi bi-upc-scan" style="font-size:1.1rem;"></i>
                    </span>
                    <input type="text"
                           id="posSearch"
                           class="form-control"
                           style="font-size:.95rem;font-family:monospace;"
                           placeholder="Scan barcode or search product name / SKU…"
                           autocomplete="off"
                           autofocus>
                    <button type="button" class="btn btn-outline-secondary"
                            onclick="document.getElementById('posSearch').focus()">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- Search Results --}}
        <div class="card d-none" id="searchResultCard">
            <div class="card-header py-2 d-flex justify-content-between align-items-center"
                 style="font-size:.825rem;font-weight:600;">
                <span id="searchResultTitle">Results</span>
                <button type="button" class="btn btn-sm btn-outline-secondary"
                        onclick="hideSearchResults()">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <div class="card-body p-2" id="searchResultBody"></div>
        </div>

        {{-- Cart --}}
        <div class="card" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <span style="font-weight:700;font-size:.9rem;">
                    <i class="bi bi-cart me-2" style="color:#1d4ed8;"></i>Cart
                </span>
                <span class="badge bg-primary" id="cartCountBadge">0</span>
            </div>
            <div class="cart-wrap card-body p-0">
                <table class="table cart-table mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Product</th>
                            <th style="width:75px;">Qty</th>
                            <th style="width:105px;">Price (৳)</th>
                            <th style="width:90px;">Disc. (৳)</th>
                            <th style="width:90px;">Total</th>
                            <th style="width:70px;">Serial</th>
                            <th style="width:30px;"></th>
                        </tr>
                    </thead>
                    <tbody id="cartBody">
                        <tr id="cartEmptyRow">
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="bi bi-cart" style="font-size:2.5rem;display:block;margin-bottom:.5rem;color:#cbd5e1;"></i>
                                Cart is empty. Scan or search a product.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    {{-- ════════════ RIGHT ════════════ --}}
    <div class="pos-right">

        {{-- Customer --}}
        <div class="card">
            <div class="card-body py-2 px-3">
                <label class="form-label fw-semibold mb-1" style="font-size:.8rem;">
                    Customer
                </label>
                <div class="d-flex gap-2">
                    <select name="customer_id" id="customer_id" class="form-select form-select-sm">
                        <option value="">Walk-in Customer</option>
                        @foreach($customers as $c)
                        <option value="{{ $c->id }}"
                                data-due="{{ $c->current_due }}">
                            {{ $c->name }}{{ $c->phone ? ' ('.$c->phone.')' : '' }}
                        </option>
                        @endforeach
                    </select>
                    @can_permission('customers.create')
                    <button type="button"
                            class="btn btn-outline-primary btn-sm flex-shrink-0"
                            data-bs-toggle="modal"
                            data-bs-target="#quickAddCustomerModal"
                            title="Add new customer">
                        <i class="bi bi-person-plus"></i>
                    </button>
                    @endcan_permission
                </div>
                <div id="customerDueAlert" class="d-none mt-1"
                     style="font-size:.75rem;color:#dc2626;">
                    <i class="bi bi-exclamation-triangle me-1"></i><span id="customerDueText"></span>
                </div>
            </div>
        </div>

        {{-- Totals --}}
        <div class="card">
            <div class="card-body px-3 py-3">
                <div class="d-flex justify-content-between total-line mb-2">
                    <span class="text-muted">Subtotal</span>
                    <span id="posSubtotal" class="fw-600">৳0.00</span>
                </div>
                <div class="d-flex justify-content-between align-items-center total-line mb-2">
                    <span class="text-muted">Discount</span>
                    <div class="input-group input-group-sm" style="width:120px;">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="discount" id="posDiscount"
                               class="form-control" value="0" min="0" step="0.01"
                               oninput="recalcPos()">
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center total-line mb-2">
                    <span class="text-muted">VAT</span>
                    <div class="input-group input-group-sm" style="width:120px;">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="vat" id="posVat"
                               class="form-control" value="0" min="0" step="0.01"
                               oninput="recalcPos()">
                    </div>
                </div>
                <hr class="my-2">
                <div class="d-flex justify-content-between">
                    <span class="fw-700" style="font-size:1rem;">TOTAL</span>
                    <span class="grand-total-val" id="posTotal">৳0.00</span>
                </div>
                <input type="hidden" id="posTotalHidden" name="_total_hidden" value="0">
            </div>
        </div>

        {{-- Payment --}}
        <div class="card">
            <div class="card-body p-3">

                {{-- Sale Type --}}
                <div class="mb-2">
                    <label class="form-label fw-semibold" style="font-size:.78rem;">Sale Type</label>
                    <select name="sale_type" class="form-select form-select-sm">
                        <option value="retail">Retail</option>
                        <option value="wholesale">Wholesale</option>
                    </select>
                </div>

                {{-- Account --}}
                <div class="mb-2">
                    <label class="form-label fw-semibold" style="font-size:.78rem;">Account</label>
                    <select name="account_id" class="form-select form-select-sm">
                        <option value="">— Select —</option>
                        @foreach($accounts as $acc)
                        <option value="{{ $acc->id }}">{{ $acc->name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Payment Method --}}
                <div class="mb-2">
                    <label class="form-label fw-semibold" style="font-size:.78rem;">Payment Method</label>
                    <div class="d-flex flex-wrap gap-1" id="payMethodBtns">
                        @foreach(['cash'=>'Cash','card'=>'Card','mobile_banking'=>'bKash/Nagad','bank_transfer'=>'Bank','due'=>'Due'] as $val => $lbl)
                        <button type="button"
                                class="btn method-btn {{ $val === 'cash' ? 'btn-primary' : 'btn-outline-secondary' }}"
                                onclick="setPayMethod('{{ $val }}', this)">
                            {{ $lbl }}
                        </button>
                        @endforeach
                    </div>
                </div>

                {{-- Paid --}}
                <div class="mb-2">
                    <label class="form-label fw-semibold" style="font-size:.78rem;">
                        Amount Received (৳)
                    </label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="paid_amount" id="posPaid"
                               class="form-control" value="0" min="0" step="0.01"
                               oninput="recalcPos()">
                    </div>
                </div>

                {{-- Numpad --}}
                <div class="row g-1 mb-2">
                    @foreach(['7','8','9','4','5','6','1','2','3','00','0','.'] as $n)
                    <div class="col-4">
                        <button type="button" class="numpad-btn"
                                onclick="numpadHit('{{ $n }}')">{{ $n }}</button>
                    </div>
                    @endforeach
                </div>
                <div class="row g-1 mb-2">
                    <div class="col-6">
                        <button type="button" class="numpad-btn danger w-100"
                                onclick="numpadHit('back')">
                            <i class="bi bi-backspace"></i>
                        </button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-secondary w-100"
                                style="border-radius:8px;font-weight:600;"
                                onclick="payExact()">
                            Exact
                        </button>
                    </div>
                </div>

                {{-- Change / Due --}}
                <div class="d-flex justify-content-between total-line mb-1">
                    <span class="text-muted">Change</span>
                    <span id="posChange" class="fw-600 text-success">৳0.00</span>
                </div>
                <div class="d-flex justify-content-between total-line">
                    <span style="color:#dc2626;font-weight:700;">Due</span>
                    <span id="posDue" style="color:#dc2626;font-weight:800;font-size:1rem;">৳0.00</span>
                </div>

            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="card">
            <div class="card-body p-2 d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-outline-danger flex-fill"
                        onclick="clearCart()">
                    <i class="bi bi-trash me-1"></i>Clear
                </button>
                <button type="button" class="btn btn-outline-primary flex-fill"
                        id="quoteBtn"
                        style="font-weight:700;"
                        onclick="submitAsQuotation()">
                    <span id="quoteBtnText">
                        <i class="bi bi-file-earmark-text me-1"></i>Save as Quotation
                    </span>
                    <span id="quoteBtnSpinner" class="d-none spinner-border spinner-border-sm"></span>
                </button>
                <button type="button" class="btn btn-success flex-fill"
                        id="checkoutBtn"
                        style="font-weight:700;"
                        onclick="submitPOS()">
                    <span id="checkoutBtnText">
                        <i class="bi bi-check-circle me-1"></i>Complete Sale
                    </span>
                    <span id="checkoutBtnSpinner" class="d-none spinner-border spinner-border-sm"></span>
                </button>
            </div>
        </div>

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

{{-- Hidden form used only to POST the cart to Quotations --}}
<form id="quoteForm" method="POST" action="{{ route('quotations.store') }}" class="d-none">
    @csrf
    <input type="hidden" name="quotation_date" value="{{ date('Y-m-d') }}">
</form>

{{-- Serial Selection Modal --}}
<div class="modal fade" id="serialModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-700">
                    <i class="bi bi-upc-scan me-2"></i>Select Serial Numbers
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="serialModalBody">
                <div class="text-center py-3 text-muted">
                    <span class="spinner-border spinner-border-sm me-2"></span>Loading…
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary"
                        data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary"
                        onclick="confirmSerials()">
                    <i class="bi bi-check-circle me-1"></i>Confirm
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Quick Add Customer Modal --}}
<x-quick-add-customer />

@endsection

@push('scripts')
<x-quick-add-scripts />

<script>
(function () {
'use strict';

// ─── Config ───────────────────────────────────────────────────────────────────
const SEARCH_URL   = '{{ route("sales.search-product") }}';
const SERIALS_URL = '{{ route("serials.available") }}';
const STORE_URL    = '{{ route("sales.store") }}';
const CSRF         = document.querySelector('meta[name="csrf-token"]').content;

// ─── State ────────────────────────────────────────────────────────────────────
let cart               = [];      // array of cart items
let posTotal           = 0;
let currentSerialCart  = null;    // index of cart item awaiting serial selection
let searchTimeout      = null;
let lastSearchResults  = [];      // cache of the most recent product search results

// ─── Customer due notice ──────────────────────────────────────────────────────
document.getElementById('customer_id').addEventListener('change', function () {
    const opt = this.options[this.selectedIndex];
    const due = parseFloat(opt?.dataset?.due || '0');
    const el  = document.getElementById('customerDueAlert');
    if (this.value && due > 0) {
        document.getElementById('customerDueText').textContent =
            'This customer has an existing due of ৳' + due.toLocaleString('en-IN',
                {minimumFractionDigits:2,maximumFractionDigits:2});
        el.classList.remove('d-none');
    } else {
        el.classList.add('d-none');
    }
});

// ─── Search ────────────────────────────────────────────────────────────────────
const posSearchEl = document.getElementById('posSearch');
posSearchEl.addEventListener('input', function () {
    clearTimeout(searchTimeout);
    const q = this.value.trim();
    if (!q) { hideSearchResults(); return; }
    searchTimeout = setTimeout(() => doSearch(q), 260);
});
posSearchEl.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') { e.preventDefault(); doSearch(this.value.trim(), true); }
    if (e.key === 'Escape') { hideSearchResults(); }
});

async function doSearch(q, addFirst = false) {
    try {
        const resp = await fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const variants = await resp.json();

        if (!Array.isArray(variants) || variants.length === 0) {
            showSearchResults(
                `<div class="py-3 text-center text-muted" style="font-size:.85rem;">
                    <i class="bi bi-search d-block mb-1" style="font-size:1.4rem;"></i>
                    No products found for "<strong>${esc(q)}</strong>"
                </div>`, q
            );
            return;
        }

        // Barcode exact match → add directly
        if (addFirst && variants.length === 1) {
            addToCart(variants[0]);
            posSearchEl.value = '';
            hideSearchResults();
            return;
        }
        if (addFirst && variants.length > 0 && variants[0].barcode === q) {
            addToCart(variants[0]);
            posSearchEl.value = '';
            hideSearchResults();
            return;
        }

        // Cache results so the click handler can reference them by index
        // instead of embedding raw JSON inside an HTML attribute (which
        // breaks when a product name contains a quote or other special
        // character).
        lastSearchResults = variants;

        const html = variants.map((v, idx) => {
            const stockClr = v.current_stock <= 0 ? '#dc2626' :
                             v.current_stock <= 5  ? '#d97706' : '#059669';
            return `
            <div class="sr-card mb-1 d-flex align-items-center gap-2"
                 onclick="addFromSearchResult(${idx})">
                <div style="flex:1;min-width:0;">
                    <div style="font-size:.85rem;font-weight:700;color:#1e293b;
                                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                        ${esc(v.name)}
                    </div>
                    <div style="font-size:.72rem;color:#64748b;font-family:monospace;">
                        ${esc(v.sku)}${v.barcode ? ' · '+esc(v.barcode) : ''}
                    </div>
                    ${v.matched_serial ? `
                    <div style="font-size:.7rem;color:#1d4ed8;font-family:monospace;">
                        <i class="bi bi-upc"></i> SN: ${esc(v.matched_serial)}
                    </div>` : ''}
                </div>
                <div style="text-align:right;flex-shrink:0;">
                    <div style="font-size:.9rem;font-weight:800;color:#059669;">
                        ৳${parseFloat(v.selling_price).toFixed(2)}
                    </div>
                    <div style="font-size:.68rem;color:${stockClr};">
                        Stock: ${v.current_stock}
                    </div>
                </div>
            </div>`;
        }).join('');

        showSearchResults(html, q, variants.length);

    } catch (err) {
        console.error('POS search error', err);
        showSearchResults(
            `<div class="py-3 px-3 text-danger" style="font-size:.85rem;">
                <i class="bi bi-x-circle me-1"></i>Search failed. Please try again.
            </div>`, q
        );
    }
}

function showSearchResults(html, q, count = 0) {
    const card  = document.getElementById('searchResultCard');
    const body  = document.getElementById('searchResultBody');
    const title = document.getElementById('searchResultTitle');
    title.textContent = count ? `${count} result${count !== 1 ? 's' : ''} for "${q}"` : `Search: "${q}"`;
    body.innerHTML    = html;
    card.classList.remove('d-none');
}

window.hideSearchResults = function () {
    document.getElementById('searchResultCard').classList.add('d-none');
};

// ─── Add from a search result (looked up by index, never inline JSON) ─────────
window.addFromSearchResult = function (idx) {
    const variant = lastSearchResults[idx];
    if (!variant) return;
    addToCart(variant);
    posSearchEl.value = '';
    hideSearchResults();
};

// ─── Cart ─────────────────────────────────────────────────────────────────────
window.addToCart = function (variant) {
    const stock = parseInt(variant.current_stock ?? 0);

    // For non-serial products, merge qty if already in cart
    const existIdx = cart.findIndex(
        i => i.variant_id === variant.id && !i.serial_tracked
    );

    if (existIdx !== -1) {
        if (stock > 0 && cart[existIdx].qty + 1 > stock) {
            showToast(`Only ${stock} unit(s) in stock for ${variant.name}.`, 'danger');
            return;
        }
        cart[existIdx].qty++;
        cart[existIdx].total =
            cart[existIdx].qty * cart[existIdx].price - cart[existIdx].discount;
        renderCart();
        return;
    }

    // For serial-tracked products, each unit is its own row — total qty
    // already in the cart (across all rows for this variant) must not
    // exceed available stock.
    if (variant.serial_tracked) {
        const alreadyInCart = cart
            .filter(i => i.variant_id === variant.id)
            .reduce((sum, i) => sum + i.qty, 0);

        if (stock > 0 && alreadyInCart + 1 > stock) {
            showToast(`Only ${stock} unit(s) in stock for ${variant.name}.`, 'danger');
            return;
        }
    }

    if (stock <= 0) {
        showToast(`${variant.name} is out of stock.`, 'danger');
        return;
    }

    cart.push({
        variant_id:    variant.id,
        name:          variant.name,
        sku:           variant.sku,
        price:         parseFloat(variant.selling_price),
        qty:           1,
        discount:      0,
        total:         parseFloat(variant.selling_price),
        serial_tracked: !!variant.serial_tracked,
        warranty_months: parseInt(variant.warranty_months || 0),
        cost_price:    parseFloat(variant.cost_price || 0),
        current_stock: stock,
        serial_ids:    [],
    });

    renderCart();
};

function renderCart() {
    const tbody = document.getElementById('cartBody');
    document.getElementById('cartEmptyRow')?.remove();

    if (cart.length === 0) {
        tbody.innerHTML = `
            <tr id="cartEmptyRow">
                <td colspan="8" class="text-center py-5 text-muted">
                    <i class="bi bi-cart" style="font-size:2.5rem;display:block;margin-bottom:.5rem;color:#cbd5e1;"></i>
                    Cart is empty. Scan or search a product.
                </td>
            </tr>`;
        document.getElementById('cartCountBadge').textContent = '0';
        recalcPos();
        return;
    }

    tbody.innerHTML = cart.map((item, i) => `
        <tr class="cart-row">
            <td style="color:#94a3b8;font-size:.75rem;">${i+1}</td>
            <td>
                <div style="font-weight:600;font-size:.82rem;">${esc(item.name)}</div>
                <code style="font-size:.68rem;color:#94a3b8;">${esc(item.sku)}</code>
            </td>
            <td>
                <input type="number" class="form-control form-control-sm"
                       value="${item.qty}" min="1"
                       style="width:58px;font-size:.82rem;"
                       onchange="updateCartQty(${i}, this.value)">
            </td>
            <td>
                <div class="input-group input-group-sm">
                    <span class="input-group-text" style="font-size:.7rem;">৳</span>
                    <input type="number" class="form-control"
                           value="${item.price.toFixed(2)}" min="0" step="0.01"
                           style="width:72px;font-size:.82rem;"
                           onchange="updateCartPrice(${i}, this.value)">
                </div>
            </td>
            <td>
                <div class="input-group input-group-sm">
                    <span class="input-group-text" style="font-size:.7rem;">৳</span>
                    <input type="number" class="form-control"
                           value="${item.discount.toFixed(2)}" min="0" step="0.01"
                           style="width:65px;font-size:.82rem;"
                           onchange="updateCartDiscount(${i}, this.value)">
                </div>
            </td>
            <td style="font-weight:700;color:#059669;font-size:.85rem;">
                ৳${item.total.toFixed(2)}
            </td>
            <td>
                ${item.serial_tracked
                    ? `<button type="button"
                               class="btn btn-xs ${item.serial_ids.length > 0 ? 'btn-success' : 'btn-outline-warning'}"
                               style="font-size:.68rem;padding:2px 6px;border-radius:5px;"
                               onclick="openSerialModal(${i})">
                           ${item.serial_ids.length > 0 ? item.serial_ids.length+'✓' : 'Select'}
                       </button>`
                    : '<span style="color:#cbd5e1;font-size:.72rem;">—</span>'}
            </td>
            <td>
                <button type="button"
                        style="background:none;border:none;color:#dc2626;cursor:pointer;padding:2px 4px;"
                        onclick="removeCartItem(${i})">
                    <i class="bi bi-x-circle-fill" style="font-size:1rem;"></i>
                </button>
            </td>
        </tr>
    `).join('');

    document.getElementById('cartCountBadge').textContent = String(cart.length);
    recalcPos();
}

window.updateCartQty      = (i, v) => {
    let qty = Math.max(1, parseInt(v) || 1);
    const stock = parseInt(cart[i].current_stock ?? 0);

    if (stock > 0) {
        const otherRowsQty = cart
            .filter((item, idx) => idx !== i && item.variant_id === cart[i].variant_id)
            .reduce((sum, item) => sum + item.qty, 0);

        if (otherRowsQty + qty > stock) {
            const maxAllowed = Math.max(1, stock - otherRowsQty);
            showToast(`Only ${stock} unit(s) in stock for ${cart[i].name}.`, 'danger');
            qty = maxAllowed;
        }
    }

    cart[i].qty = qty;
    recalcCartItem(i);
    renderCart();
};
window.updateCartPrice    = (i, v) => { cart[i].price = Math.max(0, parseFloat(v)||0); recalcCartItem(i); };
window.updateCartDiscount = (i, v) => { cart[i].discount = Math.max(0, parseFloat(v)||0); recalcCartItem(i); };
window.removeCartItem     = (i)    => { cart.splice(i,1); renderCart(); };
window.clearCart          = ()     => { cart = []; renderCart(); };

function recalcCartItem(i) {
    cart[i].total = Math.max(0, cart[i].qty * cart[i].price - cart[i].discount);
    renderCart();
}

// ─── Totals ────────────────────────────────────────────────────────────────────
window.recalcPos = function () {
    const sub  = cart.reduce((s, i) => s + i.total, 0);
    const disc = Math.max(0, parseFloat(document.getElementById('posDiscount').value) || 0);
    const vat  = Math.max(0, parseFloat(document.getElementById('posVat').value)      || 0);
    posTotal   = Math.max(0, sub - disc + vat);

    document.getElementById('posSubtotal').textContent   = '৳' + sub.toFixed(2);
    document.getElementById('posTotal').textContent      = '৳' + posTotal.toFixed(2);
    document.getElementById('posTotalHidden').value      = posTotal.toFixed(2);

    const paid   = Math.max(0, parseFloat(document.getElementById('posPaid').value) || 0);
    const change = Math.max(0, paid - posTotal);
    const due    = Math.max(0, posTotal - paid);

    document.getElementById('posChange').textContent = '৳' + change.toFixed(2);
    document.getElementById('posDue').textContent    = '৳' + due.toFixed(2);
    document.getElementById('posDue').style.color    = due > 0 ? '#dc2626' : '#059669';
}

window.payExact = () => {
    document.getElementById('posPaid').value = posTotal.toFixed(2);
    recalcPos();
};

window.setPayMethod = (method, btn) => {
    document.querySelectorAll('#payMethodBtns button').forEach(b => {
        b.className = 'btn method-btn btn-outline-secondary';
    });
    btn.className = 'btn method-btn btn-primary';
    document.getElementById('payMethodHidden').value = method;
};

// ─── Numpad ────────────────────────────────────────────────────────────────────
window.numpadHit = (val) => {
    const el = document.getElementById('posPaid');
    if (val === 'back') {
        el.value = el.value.length > 1 ? el.value.slice(0,-1) : '0';
    } else if (val === '.') {
        if (!el.value.includes('.')) el.value += '.';
    } else {
        el.value = el.value === '0' ? val : el.value + val;
    }
    recalcPos();
};

// ─── Serial Modal ──────────────────────────────────────────────────────────────
window.openSerialModal = async function (cartIdx) {
    currentSerialCart = cartIdx;
    const item = cart[cartIdx];

    document.getElementById('serialModalBody').innerHTML =
        '<div class="text-center py-4 text-muted"><span class="spinner-border spinner-border-sm me-2"></span>Loading serials…</div>';

    const modal = new bootstrap.Modal(document.getElementById('serialModal'));
    modal.show();

    try {
        const resp = await fetch(SERIALS_URL + '?variant_id=' + item.variant_id, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const serials = await resp.json();

        if (!Array.isArray(serials) || serials.length === 0) {
            document.getElementById('serialModalBody').innerHTML =
                '<div class="alert alert-warning">No serial numbers in stock for this variant. Receive a purchase first.</div>';
            return;
        }

        document.getElementById('serialModalBody').innerHTML = `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span style="font-size:.875rem;font-weight:600;">
                    Need: ${item.qty} &nbsp;|&nbsp; Available: ${serials.length}
                </span>
                <button type="button" class="btn btn-sm btn-outline-primary"
                        onclick="autoSelectSerials(${item.qty})">
                    Auto-select ${item.qty}
                </button>
            </div>
            <div style="max-height:320px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;padding:.5rem;">
                ${serials.map(s => `
                    <div class="form-check mb-1">
                        <input class="form-check-input serial-check" type="checkbox"
                               value="${s.id}" id="sn_${s.id}"
                               ${item.serial_ids.includes(s.id) ? 'checked' : ''}>
                        <label class="form-check-label" for="sn_${s.id}"
                               style="font-family:monospace;font-size:.875rem;">
                            ${esc(s.serial_no)}
                        </label>
                    </div>`).join('')}
            </div>`;
    } catch (e) {
        document.getElementById('serialModalBody').innerHTML =
            '<div class="alert alert-danger">Failed to load serials. Please try again.</div>';
    }
};

window.autoSelectSerials = (qty) => {
    document.querySelectorAll('.serial-check').forEach((cb, i) => {
        cb.checked = i < qty;
    });
};

window.confirmSerials = () => {
    if (currentSerialCart === null) return;
    const selected = [...document.querySelectorAll('.serial-check:checked')]
        .map(cb => parseInt(cb.value));
    cart[currentSerialCart].serial_ids = selected;
    cart[currentSerialCart].qty        = selected.length || cart[currentSerialCart].qty;
    renderCart();
    const inst = bootstrap.Modal.getInstance(document.getElementById('serialModal'));
    inst?.hide();
    currentSerialCart = null;
};

// ─── Submit ────────────────────────────────────────────────────────────────────
window.submitPOS = function () {
    if (!cart.length) {
        showToast('Cart is empty. Add products first.', 'danger');
        document.getElementById('posSearch').focus();
        return;
    }

    // Serial validation
    for (const item of cart) {
        if (item.serial_tracked && item.serial_ids.length !== item.qty) {
            showToast(`Select ${item.qty} serial number(s) for: ${item.name}`, 'danger');
            return;
        }
    }

    const form = document.getElementById('posForm');

    // Remove old item fields
    form.querySelectorAll('[name^="items["]').forEach(el => el.remove());

    // Append item fields
    cart.forEach((item, i) => {
        const fields = {
            [`items[${i}][product_variant_id]`]: item.variant_id,
            [`items[${i}][qty]`]:                item.qty,
            [`items[${i}][unit_price]`]:          item.price,
            [`items[${i}][discount]`]:             item.discount,
            [`items[${i}][warranty_months]`]:      item.warranty_months,
        };
        for (const [name, value] of Object.entries(fields)) {
            const inp = document.createElement('input');
            inp.type  = 'hidden';
            inp.name  = name;
            inp.value = value;
            form.appendChild(inp);
        }
        item.serial_ids.forEach((sid, j) => {
            const inp = document.createElement('input');
            inp.type  = 'hidden';
            inp.name  = `items[${i}][serial_ids][${j}]`;
            inp.value = sid;
            form.appendChild(inp);
        });
    });

    // Disable button
    document.getElementById('checkoutBtn').disabled = true;
    document.getElementById('checkoutBtnText').classList.add('d-none');
    document.getElementById('checkoutBtnSpinner').classList.remove('d-none');

    form.submit();
};

// ─── Save current cart as a Quotation ──────────────────────────────────────────
window.submitAsQuotation = function () {
    if (!cart.length) {
        showToast('Cart is empty. Add products first.', 'danger');
        document.getElementById('posSearch').focus();
        return;
    }

    const form = document.getElementById('quoteForm');

    // Remove old dynamic fields (keep csrf + quotation_date)
    form.querySelectorAll('[data-dynamic="1"]').forEach(el => el.remove());

    const addField = (name, value) => {
        const inp = document.createElement('input');
        inp.type  = 'hidden';
        inp.name  = name;
        inp.value = value;
        inp.dataset.dynamic = '1';
        form.appendChild(inp);
    };

    // Customer + totals (mirror what's on the POS form)
    const customerId = document.getElementById('customer_id').value;
    if (customerId) addField('customer_id', customerId);

    addField('discount', document.getElementById('posDiscount').value || 0);
    addField('vat',      document.getElementById('posVat').value || 0);

    // Items
    cart.forEach((item, i) => {
        addField(`items[${i}][item_name]`, item.name);
        addField(`items[${i}][product_variant_id]`, item.variant_id);
        addField(`items[${i}][qty]`, item.qty);
        addField(`items[${i}][unit_price]`, item.price);
        addField(`items[${i}][discount]`, item.discount);
    });

    // Saving state
    document.getElementById('quoteBtn').disabled = true;
    document.getElementById('quoteBtnText').classList.add('d-none');
    document.getElementById('quoteBtnSpinner').classList.remove('d-none');

    form.submit();
};

// ─── Helpers ──────────────────────────────────────────────────────────────────
function esc(str) {
    if (!str) return '';
    return String(str)
        .replace(/&/g,'&amp;').replace(/</g,'&lt;')
        .replace(/>/g,'&gt;').replace(/"/g,'&quot;')
        .replace(/'/g,'&#39;');
}

// ─── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => recalcPos());

})();
</script>
@endpush