@extends('layouts.portal')

@section('title', __('Counter Sale'))

@push('styles')
    @include('accounting.journal._styles')
    <style>
        .pos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
        @media (max-width: 991px) { .pos { grid-template-columns: 1fr; } }
        .pos-scan { display: flex; gap: 8px; }
        .pos-scan input { font-size: 1.4rem; min-height: 56px; }
        .pos-scan .btn { min-width: 56px; font-size: 1.2rem; }
        .pos-cart { min-height: 260px; }
        .pos-empty { padding: 48px 16px; text-align: center; color: var(--muted, #64756d); }
        .pos-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--line, #d8e1d9); }
        .pos-line.is-flash { animation: pos-flash .8s ease-out; }
        @keyframes pos-flash { from { background: #e3f1e6; } to { background: transparent; } }
        .pos-line-name { font-weight: 600; font-size: 1.05rem; }
        .pos-line-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
        .pos-line-total { font-size: 1.15rem; font-weight: 700; text-align: right; white-space: nowrap; }
        .pos-qty { display: inline-flex; align-items: stretch; }
        .pos-qty .btn { min-width: 44px; min-height: 44px; font-size: 1.2rem; }
        .pos-qty input { width: 80px; text-align: center; font-size: 1.1rem; border-radius: 0; }
        .pos-line select, .pos-line .pos-price { min-height: 44px; }
        .pos-price { width: 110px; text-align: right; }
        .pos-lot-btn { min-height: 44px; }
        .pos-warning { color: #9a5b00; font-size: .85rem; }
        .pos-remove { min-width: 44px; min-height: 44px; }
        .pos-side .card + .card { margin-top: 12px; }
        .pos-total { font-size: 2.2rem; font-weight: 800; text-align: right; }
        .pos-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .pos-methods .btn, .pos-mode .btn { min-height: 52px; }
        .pos-charge { min-height: 68px; font-size: 1.4rem; font-weight: 700; }
        .pos-dialog { width: min(640px, 95vw); border: 0; border-radius: 6px; padding: 0; box-shadow: 0 20px 48px rgb(24 43 37 / 30%); }
        .pos-dialog::backdrop { background: rgb(15 30 25 / 45%); }
        .pos-dialog header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line, #d8e1d9); }
        .pos-dialog .pos-dialog-body { padding: 16px 18px; max-height: 70vh; overflow: auto; }
        .pos-dialog.is-wide { width: min(1100px, 96vw); }
        .pos-dialog iframe { width: 100%; height: 72vh; border: 0; display: block; }
        .pos-choice { display: block; width: 100%; text-align: left; min-height: 56px; margin-bottom: 8px; }
        .pos-choice small { display: block; opacity: .75; }
        .pos-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; min-width: 280px; max-width: 90vw; }
    </style>
@endpush

@section('content')
<div class="portal-page">
    @include('partials.portal-header')

    <main class="module-main">
        <div class="container-fluid py-3">
            <header class="mb-3 d-flex justify-content-between align-items-start flex-wrap gap-2">
                <div>
                    <h1 class="h3 mb-0">{{ __('Counter Sale') }}</h1>
                    <p class="text-muted mb-0">{{ __('Scan a product or type its barcode or SKU and press Enter.') }}</p>
                </div>
                <a href="{{ route('sales.invoices.index') }}" class="btn btn-outline-secondary">{{ __('Sales Invoices') }}</a>
            </header>

            <div id="posErrors" class="alert alert-danger" hidden></div>

            <div class="pos" id="pos" data-skip-unsaved-changes="true">
                <section>
                    <div class="card shadow-sm mb-3">
                        <div class="card-body">
                            <form class="pos-scan" id="scanForm" autocomplete="off">
                                <input type="text" id="scanInput" class="form-control" placeholder="{{ __('Scan barcode or type SKU') }}" autofocus>
                                <button type="submit" class="btn btn-primary" title="{{ __('Add') }}"><i class="bi bi-upc-scan"></i></button>
                                <button type="button" class="btn btn-outline-primary" id="openConcepts" title="{{ __('Add concept') }}" @disabled($concepts->isEmpty())><i class="bi bi-list-ul"></i></button>
                            </form>
                        </div>
                    </div>

                    <div class="card shadow-sm pos-cart">
                        <div id="cart"></div>
                        <div class="pos-empty" id="cartEmpty"><i class="bi bi-basket fs-1 d-block mb-2"></i>{{ __('The sale is empty. Scan the first product.') }}</div>
                    </div>
                </section>

                <aside class="pos-side">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <label class="form-label" for="customerSelect">{{ __('Customer') }}</label>
                            <div class="d-flex gap-2 align-items-start">
                                <div class="flex-grow-1">
                                    <select id="customerSelect" class="form-select">
                                        <option value="">{{ __('Consumidor final') }}</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer['id'] }}" data-help="{{ $customer['detail'] }}">{{ $customer['name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="button" class="btn btn-outline-primary" id="openCustomer" title="{{ __('New customer') }}" style="min-height: 42px;"><i class="bi bi-person-plus"></i></button>
                            </div>

                            <label class="form-label mt-3" for="warehouseSelect">{{ __('Warehouse') }}</label>
                            <select id="warehouseSelect" class="form-select">
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}" @selected($warehouse->id === $defaultWarehouseId)>{{ $warehouse->code }} — {{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-baseline">
                                <span class="text-muted">{{ __('Total') }}</span>
                                <span class="text-muted small" id="itemCount"></span>
                            </div>
                            <div class="pos-total" id="grandTotal">0.00</div>

                            <div class="btn-group w-100 my-3 pos-mode" role="group">
                                <button type="button" class="btn btn-primary" data-mode="paid">{{ __('Paid now') }}</button>
                                <button type="button" class="btn btn-outline-primary" data-mode="credit">{{ __('On credit') }}</button>
                            </div>

                            <div id="paidPanel">
                                @if($paymentMethods->isEmpty())
                                    <div class="alert alert-warning small mb-2">{{ __('No active payment method has an account assigned.') }}</div>
                                @endif
                                <div class="pos-methods mb-3">
                                    @foreach($paymentMethods as $method)
                                        <button type="button" class="btn btn-outline-success" data-method="{{ $method->id }}" data-kind="{{ $method->kind }}">{{ $method->name }}</button>
                                    @endforeach
                                </div>
                                <div class="row g-2" id="cashPanel">
                                    <div class="col-6">
                                        <label class="form-label small" for="receivedInput">{{ __('Amount received') }}</label>
                                        <input type="number" id="receivedInput" class="form-control form-control-lg" min="0" step="0.01" inputmode="decimal">
                                    </div>
                                    <div class="col-6">
                                        <div class="form-label small">{{ __('Change due') }}</div>
                                        <div class="fs-4 fw-bold" id="changeOutput">0.00</div>
                                    </div>
                                </div>
                            </div>

                            <div id="creditPanel" hidden>
                                <label class="form-label" for="termSelect">{{ __('Payment term') }}</label>
                                <select id="termSelect" class="form-select">
                                    <option value="">{{ __('Due today') }}</option>
                                    @foreach($terms as $term)
                                        <option value="{{ $term->id }}">{{ $term->name }} ({{ $term->days }} {{ __('days') }})</option>
                                    @endforeach
                                </select>
                            </div>

                            <label class="form-label mt-3 small" for="notesInput">{{ __('Notes') }}</label>
                            <input type="text" id="notesInput" class="form-control" maxlength="1000">

                            <button type="button" class="btn btn-success w-100 mt-3 pos-charge" id="chargeButton" disabled><i class="bi bi-cash-coin"></i> {{ __('Charge') }}</button>
                            <button type="button" class="btn btn-link w-100 text-danger mt-1" id="clearButton">{{ __('Clear sale') }}</button>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </main>
</div>

<dialog class="pos-dialog" id="lotDialog">
    <header>
        <strong id="lotDialogTitle">{{ __('Choose a lot') }}</strong>
        <button type="button" class="btn-close" data-close aria-label="{{ __('Close') }}"></button>
    </header>
    <div class="pos-dialog-body">
        <div id="lotChoices"></div>
        <details class="mt-2" id="lotManual">
            <summary>{{ __('Enter another lot number') }}</summary>
            <div class="row g-2 mt-1">
                <div class="col-7"><input type="text" class="form-control" id="lotNumberInput" maxlength="100" placeholder="{{ __('Lot number') }}"></div>
                <div class="col-5"><input type="date" class="form-control" id="lotExpiryInput" title="{{ __('Expiry date') }}"></div>
                <div class="col-12"><button type="button" class="btn btn-outline-primary w-100" id="lotManualButton">{{ __('Use this lot') }}</button></div>
            </div>
        </details>
    </div>
</dialog>

<dialog class="pos-dialog" id="conceptDialog">
    <header>
        <strong>{{ __('Add concept') }}</strong>
        <button type="button" class="btn-close" data-close aria-label="{{ __('Close') }}"></button>
    </header>
    <div class="pos-dialog-body">
        @foreach($concepts->groupBy(fn ($concept) => $concept->group_name ?: __('Other')) as $group => $groupConcepts)
            <div class="text-muted small text-uppercase mt-2 mb-1">{{ $group }}</div>
            @foreach($groupConcepts as $concept)
                <button type="button" class="btn btn-outline-secondary pos-choice" data-concept="{{ $concept->id }}" data-name="{{ $concept->name }}">
                    {{ $concept->name }}
                    @if($concept->help_text)
                        <small>{{ $concept->help_text }}</small>
                    @endif
                </button>
            @endforeach
        @endforeach
    </div>
</dialog>

<dialog class="pos-dialog is-wide" id="customerDialog">
    <header>
        <strong>{{ __('New customer') }}</strong>
        <button type="button" class="btn-close" data-close aria-label="{{ __('Close') }}"></button>
    </header>
    <iframe id="customerFrame" title="{{ __('New customer') }}"></iframe>
</dialog>

<div class="pos-toast" id="toast" hidden></div>

<script>
(() => {
    const urls = {
        lookup: @json(route('sales.invoices.lookup')),
        lots: @json(route('sales.invoices.lots', ['item' => '__ITEM__'])),
        store: @json(route('sales.invoices.store')),
        customer: @json(route('persons.roles.create', 'customers').'?embed=1'),
    };
    const text = {
        newLot: @json(__('New lot :lot will be created when the sale is posted.')),
        overStock: @json(__('Exceeds stock: :qty on hand.')),
        noLot: @json(__('Choose lot')),
        lot: @json(__('Lot')),
        expires: @json(__('Expires')),
        onHand: @json(__('On hand')),
        noStock: @json(__('No stock available for this item. Enter the lot number to sell it anyway.')),
        items: @json(__(':count item(s)')),
        confirmClear: @json(__('Remove every line from this sale?')),
        failed: @json(__('The sale could not be completed.')),
        lookupFailed: @json(__('The product could not be looked up.')),
        concept: @json(__('Concept')),
        description: @json(__('Description')),
        price: @json(__('Price')),
        remove: @json(__('Remove')),
    };
    const csrf = document.querySelector('meta[name="csrf-token"]').content;

    const scanForm = document.getElementById('scanForm');
    const scanInput = document.getElementById('scanInput');
    const cartElement = document.getElementById('cart');
    const cartEmpty = document.getElementById('cartEmpty');
    const warehouseSelect = document.getElementById('warehouseSelect');
    const customerSelect = document.getElementById('customerSelect');
    const receivedInput = document.getElementById('receivedInput');
    const chargeButton = document.getElementById('chargeButton');
    const errorsBox = document.getElementById('posErrors');
    const lotDialog = document.getElementById('lotDialog');
    const conceptDialog = document.getElementById('conceptDialog');
    const customerDialog = document.getElementById('customerDialog');
    const customerFrame = document.getElementById('customerFrame');

    const state = { lines: [], paymentMode: 'paid', methodId: null, methodKind: null, busy: false };
    let nextKey = 1;
    let pendingLotItem = null;

    const money = (value) => (Math.round((Number(value) || 0) * 100) / 100).toFixed(2);
    const qtyText = (value) => String(Math.round((Number(value) || 0) * 10000) / 10000);
    const format = (template, values) => Object.entries(values).reduce((result, [key, value]) => result.replace(':' + key, value), template);
    const anyDialogOpen = () => document.querySelector('dialog[open]') !== null;

    function focusScan() {
        if (!anyDialogOpen()) {
            scanInput.focus();
        }
    }

    function toast(message, kind = 'danger') {
        const box = document.getElementById('toast');
        box.className = 'pos-toast alert alert-' + kind + ' shadow';
        box.textContent = message;
        box.hidden = false;
        clearTimeout(toast.timer);
        toast.timer = setTimeout(() => { box.hidden = true; }, 4000);
    }

    function beep() {
        try {
            const context = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = context.createOscillator();
            oscillator.frequency.value = 220;
            oscillator.connect(context.destination);
            oscillator.start();
            oscillator.stop(context.currentTime + 0.25);
        } catch (error) {
            // Audio is optional.
        }
    }

    function lineTotal(line) {
        return (Number(line.quantity) || 0) * (Number(line.unitPrice) || 0) * (1 - (Number(line.discount) || 0) / 100);
    }

    function unitOf(line) {
        return line.item.units.find((unit) => unit.id === line.uomId) || line.item.units[0];
    }

    function baseQuantity(line) {
        return (Number(line.quantity) || 0) * (unitOf(line)?.factor || 1);
    }

    function availableFor(line) {
        if (!line.item.is_stockable) {
            return null;
        }

        if (line.item.tracking === 'lot') {
            if (line.isNewLot) {
                return 0;
            }

            const lot = line.item.lots.find((candidate) => candidate.id === line.lotId);

            return lot ? lot.on_hand : (line.lotOnHand ?? 0);
        }

        return line.item.on_hand ?? 0;
    }

    function stockWarning(line) {
        const available = availableFor(line);

        if (available === null) {
            return '';
        }

        const requested = state.lines
            .filter((other) => other.type === 'item' && other.item.id === line.item.id
                && (line.item.tracking !== 'lot' || (other.lotId === line.lotId && other.lotNumber === line.lotNumber)))
            .reduce((sum, other) => sum + baseQuantity(other), 0);

        return requested > available + 0.00001 ? format(text.overStock, { qty: qtyText(available) }) : '';
    }

    function escapeHtml(value) {
        const element = document.createElement('span');
        element.textContent = value ?? '';

        return element.innerHTML;
    }

    function render(flashKey = null) {
        cartElement.innerHTML = '';
        cartEmpty.hidden = state.lines.length > 0;

        state.lines.forEach((line) => {
            const row = document.createElement('div');
            row.className = 'pos-line' + (line.key === flashKey ? ' is-flash' : '');
            row.dataset.key = line.key;

            if (line.type === 'item') {
                const units = line.item.units.map((unit) => `<option value="${unit.id}" ${unit.id === line.uomId ? 'selected' : ''}>${escapeHtml(unit.code)}</option>`).join('');
                const lotLabel = line.item.tracking === 'lot'
                    ? `<button type="button" class="btn btn-sm ${line.lotNumber ? 'btn-outline-secondary' : 'btn-warning'} pos-lot-btn" data-action="lot">
                            <i class="bi bi-tag"></i> ${line.lotNumber ? escapeHtml(text.lot + ' ' + line.lotNumber) + (line.expiresOn ? ' · ' + escapeHtml(line.expiresOn) : '') : escapeHtml(text.noLot)}
                       </button>`
                    : '';
                const warning = stockWarning(line);

                row.innerHTML = `
                    <div>
                        <div class="pos-line-name">${escapeHtml(line.item.name)} <span class="text-muted small">${escapeHtml(line.item.sku || '')}</span></div>
                        <div class="pos-line-meta">
                            <div class="pos-qty">
                                <button type="button" class="btn btn-outline-secondary" data-action="minus">−</button>
                                <input type="number" class="form-control" data-field="quantity" value="${qtyText(line.quantity)}" min="0" step="any" inputmode="decimal">
                                <button type="button" class="btn btn-outline-secondary" data-action="plus">+</button>
                            </div>
                            <select class="form-select w-auto" data-field="uom" data-native>${units}</select>
                            <span class="text-muted">×</span>
                            <input type="number" class="form-control pos-price" data-field="price" value="${money(line.unitPrice)}" min="0" step="0.01" inputmode="decimal" title="${escapeHtml(text.price)}">
                            ${lotLabel}
                        </div>
                        ${line.isNewLot ? `<div class="pos-warning mt-1"><i class="bi bi-info-circle"></i> ${escapeHtml(format(text.newLot, { lot: line.lotNumber }))}</div>` : ''}
                        ${warning ? `<div class="pos-warning mt-1"><i class="bi bi-exclamation-triangle"></i> ${escapeHtml(warning)}</div>` : ''}
                    </div>
                    <div class="d-flex flex-column align-items-end justify-content-between gap-2">
                        <div class="pos-line-total">${money(lineTotal(line))}</div>
                        <button type="button" class="btn btn-outline-danger pos-remove" data-action="remove" title="${escapeHtml(text.remove)}"><i class="bi bi-trash"></i></button>
                    </div>`;
            } else {
                row.innerHTML = `
                    <div>
                        <div class="pos-line-name">${escapeHtml(line.conceptName)} <span class="badge text-bg-light">${escapeHtml(text.concept)}</span></div>
                        <div class="pos-line-meta">
                            <div class="pos-qty">
                                <button type="button" class="btn btn-outline-secondary" data-action="minus">−</button>
                                <input type="number" class="form-control" data-field="quantity" value="${qtyText(line.quantity)}" min="0" step="any" inputmode="decimal">
                                <button type="button" class="btn btn-outline-secondary" data-action="plus">+</button>
                            </div>
                            <span class="text-muted">×</span>
                            <input type="number" class="form-control pos-price" data-field="price" value="${money(line.unitPrice)}" min="0" step="0.01" inputmode="decimal" title="${escapeHtml(text.price)}">
                            <input type="text" class="form-control w-auto flex-grow-1" data-field="description" value="${escapeHtml(line.description)}" maxlength="500" placeholder="${escapeHtml(text.description)}">
                        </div>
                    </div>
                    <div class="d-flex flex-column align-items-end justify-content-between gap-2">
                        <div class="pos-line-total">${money(lineTotal(line))}</div>
                        <button type="button" class="btn btn-outline-danger pos-remove" data-action="remove" title="${escapeHtml(text.remove)}"><i class="bi bi-trash"></i></button>
                    </div>`;
            }

            cartElement.appendChild(row);
        });

        updateTotals();
    }

    function grandTotal() {
        return state.lines.reduce((sum, line) => sum + Math.round(lineTotal(line) * 100) / 100, 0);
    }

    function updateTotals() {
        const total = grandTotal();
        document.getElementById('grandTotal').textContent = money(total);
        document.getElementById('itemCount').textContent = state.lines.length ? format(text.items, { count: state.lines.length }) : '';

        const received = Number(receivedInput.value) || 0;
        document.getElementById('changeOutput').textContent = money(Math.max(0, received - total));

        chargeButton.disabled = state.busy || state.lines.length === 0 || total <= 0
            || (state.paymentMode === 'paid' && !state.methodId);
    }

    function addItemLine(item, lot) {
        const uomId = item.default_uom_id;
        const lotId = lot?.id ?? null;
        const lotNumber = lot?.lot_number ?? null;
        const existing = state.lines.find((line) => line.type === 'item' && line.item.id === item.id
            && line.uomId === uomId && line.lotId === lotId && line.lotNumber === lotNumber);

        if (existing) {
            existing.quantity = (Number(existing.quantity) || 0) + 1;
            existing.item = item;
            render(existing.key);

            return;
        }

        const unit = item.units.find((candidate) => candidate.id === uomId) || item.units[0];
        const line = {
            key: nextKey++,
            type: 'item',
            item,
            uomId: unit.id,
            lotId,
            lotNumber,
            expiresOn: lot?.expires_on ?? null,
            isNewLot: !!lot?.is_new,
            lotOnHand: lot?.on_hand ?? null,
            quantity: 1,
            unitPrice: unit.price,
            discount: 0,
        };

        state.lines.push(line);
        render(line.key);
    }

    function openLotDialog(item, lineKey = null) {
        pendingLotItem = { item, lineKey };
        document.getElementById('lotDialogTitle').textContent = item.name;
        const choices = document.getElementById('lotChoices');
        choices.innerHTML = '';

        if (!item.lots.length) {
            choices.innerHTML = `<div class="alert alert-warning">${escapeHtml(text.noStock)}</div>`;
        }

        item.lots.forEach((lot) => {
            const button = document.createElement('button');
            button.type = 'button';
            button.className = 'btn btn-outline-primary pos-choice';
            button.innerHTML = `<strong>${escapeHtml(text.lot)} ${escapeHtml(lot.lot_number)}</strong>
                <small>${lot.expires_on ? escapeHtml(text.expires + ' ' + lot.expires_on) + ' · ' : ''}${escapeHtml(text.onHand)}: ${qtyText(lot.on_hand)}</small>`;
            button.addEventListener('click', () => chooseLot(lot));
            choices.appendChild(button);
        });

        document.getElementById('lotNumberInput').value = '';
        document.getElementById('lotExpiryInput').value = '';
        document.getElementById('lotManual').open = !item.lots.length;
        lotDialog.showModal();
    }

    function chooseLot(lot) {
        const pending = pendingLotItem;
        lotDialog.close();

        if (!pending) {
            return;
        }

        if (pending.lineKey !== null) {
            const line = state.lines.find((candidate) => candidate.key === pending.lineKey);

            if (line) {
                line.lotId = lot.id ?? null;
                line.lotNumber = lot.lot_number;
                line.expiresOn = lot.expires_on ?? null;
                line.isNewLot = !!lot.is_new;
                line.lotOnHand = lot.on_hand ?? 0;
                render(line.key);
            }
        } else {
            addItemLine(pending.item, lot);
        }
    }

    document.getElementById('lotManualButton').addEventListener('click', () => {
        const lotNumber = document.getElementById('lotNumberInput').value.trim();

        if (!lotNumber || !pendingLotItem) {
            return;
        }

        const known = pendingLotItem.item.lots.find((lot) => lot.lot_number.toLowerCase() === lotNumber.toLowerCase());
        chooseLot(known || {
            id: null,
            lot_number: lotNumber,
            expires_on: document.getElementById('lotExpiryInput').value || null,
            on_hand: 0,
            is_new: true,
        });
    });

    async function scan(code) {
        const response = await fetch(urls.lookup + '?' + new URLSearchParams({ code, warehouse_id: warehouseSelect.value || '' }), {
            headers: { Accept: 'application/json' },
        });
        const data = await response.json().catch(() => ({}));

        if (!response.ok || !data.found) {
            beep();
            toast(data.message || text.lookupFailed);

            return;
        }

        const item = data.item;

        if (item.tracking !== 'lot') {
            addItemLine(item, null);
        } else if (data.scanned_lot) {
            const scanned = data.scanned_lot;
            const known = item.lots.find((lot) => lot.id === scanned.id);
            addItemLine(item, known || scanned);
        } else if (item.lots.length === 1 && item.lots[0].on_hand > 0) {
            addItemLine(item, item.lots[0]);
        } else {
            openLotDialog(item);
        }
    }

    scanForm.addEventListener('submit', async (event) => {
        event.preventDefault();
        const code = scanInput.value.trim();
        scanInput.value = '';

        if (!code) {
            return;
        }

        try {
            await scan(code);
        } catch (error) {
            beep();
            toast(text.lookupFailed);
        }

        focusScan();
    });

    // Scanners send the GS1 group separator as Ctrl+]; keep it as the real FNC1 character.
    scanInput.addEventListener('keydown', (event) => {
        if (event.ctrlKey && (event.key === ']' || event.code === 'BracketRight')) {
            event.preventDefault();
            scanInput.setRangeText('\x1D', scanInput.selectionStart, scanInput.selectionEnd, 'end');
        }
    });

    // A scan that starts while focus is elsewhere (body, a button) still lands in the scan box.
    document.addEventListener('keydown', (event) => {
        const target = event.target;
        const typing = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement
            || target instanceof HTMLSelectElement || target.isContentEditable;

        if (typing || anyDialogOpen() || event.ctrlKey || event.altKey || event.metaKey || event.key.length !== 1) {
            return;
        }

        event.preventDefault();
        scanInput.focus();
        scanInput.value += event.key;
    });

    cartElement.addEventListener('click', (event) => {
        const button = event.target.closest('[data-action]');

        if (!button) {
            return;
        }

        const key = Number(button.closest('.pos-line').dataset.key);
        const line = state.lines.find((candidate) => candidate.key === key);

        if (!line) {
            return;
        }

        if (button.dataset.action === 'plus') {
            line.quantity = (Number(line.quantity) || 0) + 1;
        } else if (button.dataset.action === 'minus') {
            line.quantity = Math.max(1, (Number(line.quantity) || 0) - 1);
        } else if (button.dataset.action === 'remove') {
            state.lines = state.lines.filter((candidate) => candidate.key !== key);
        } else if (button.dataset.action === 'lot') {
            openLotDialog(line.item, line.key);

            return;
        }

        render();
        focusScan();
    });

    cartElement.addEventListener('change', (event) => {
        const field = event.target.dataset.field;
        const row = event.target.closest('.pos-line');

        if (!field || !row) {
            return;
        }

        const line = state.lines.find((candidate) => candidate.key === Number(row.dataset.key));

        if (field === 'quantity') {
            line.quantity = Math.max(0, Number(event.target.value) || 0);
        } else if (field === 'price') {
            line.unitPrice = Math.max(0, Number(event.target.value) || 0);
        } else if (field === 'description') {
            line.description = event.target.value;
        } else if (field === 'uom') {
            line.uomId = Number(event.target.value);
            line.unitPrice = unitOf(line).price;
        }

        render();
    });

    cartElement.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' && event.target.matches('input')) {
            event.preventDefault();
            event.target.dispatchEvent(new Event('change', { bubbles: true }));
            focusScan();
        }
    });

    warehouseSelect.addEventListener('change', async () => {
        const items = [...new Map(state.lines.filter((line) => line.type === 'item').map((line) => [line.item.id, line.item])).values()];

        await Promise.all(items.map(async (item) => {
            const response = await fetch(urls.lots.replace('__ITEM__', item.id) + '?warehouse_id=' + encodeURIComponent(warehouseSelect.value), {
                headers: { Accept: 'application/json' },
            });

            if (response.ok) {
                const data = await response.json();
                state.lines.filter((line) => line.type === 'item' && line.item.id === item.id).forEach((line) => {
                    line.item = data.item;
                    const lot = data.item.lots.find((candidate) => candidate.id === line.lotId);
                    line.lotOnHand = lot ? lot.on_hand : 0;
                });
            }
        }));

        render();
        focusScan();
    });

    document.getElementById('openConcepts').addEventListener('click', () => conceptDialog.showModal());

    conceptDialog.addEventListener('click', (event) => {
        const button = event.target.closest('[data-concept]');

        if (!button) {
            return;
        }

        conceptDialog.close();
        const line = {
            key: nextKey++,
            type: 'account',
            conceptId: Number(button.dataset.concept),
            conceptName: button.dataset.name,
            description: button.dataset.name,
            quantity: 1,
            unitPrice: 0,
            discount: 0,
        };
        state.lines.push(line);
        render(line.key);
        cartElement.querySelector(`.pos-line[data-key="${line.key}"] [data-field="price"]`)?.select();
    });

    document.getElementById('openCustomer').addEventListener('click', () => {
        customerFrame.src = urls.customer;
        customerDialog.showModal();
    });

    window.addEventListener('message', (event) => {
        if (event.origin !== window.location.origin || !event.data || typeof event.data !== 'object') {
            return;
        }

        if (event.data.type === 'customer-created') {
            const option = new Option(event.data.name, event.data.id, true, true);
            option.dataset.help = event.data.detail || '';
            customerSelect.appendChild(option);
            customerSelect.value = String(event.data.id);
            customerDialog.close();
        } else if (event.data.type === 'customer-cancelled') {
            customerDialog.close();
        }
    });

    document.querySelectorAll('dialog [data-close]').forEach((button) => {
        button.addEventListener('click', () => button.closest('dialog').close());
    });

    document.querySelectorAll('dialog').forEach((dialog) => {
        dialog.addEventListener('close', () => {
            if (dialog === customerDialog) {
                customerFrame.src = 'about:blank';
            }

            if (dialog === lotDialog) {
                pendingLotItem = null;
            }

            setTimeout(focusScan, 0);
        });
    });

    document.querySelectorAll('[data-mode]').forEach((button) => {
        button.addEventListener('click', () => {
            state.paymentMode = button.dataset.mode;
            document.querySelectorAll('[data-mode]').forEach((other) => {
                other.classList.toggle('btn-primary', other === button);
                other.classList.toggle('btn-outline-primary', other !== button);
            });
            document.getElementById('paidPanel').hidden = state.paymentMode !== 'paid';
            document.getElementById('creditPanel').hidden = state.paymentMode !== 'credit';
            updateTotals();
            focusScan();
        });
    });

    function selectMethod(button) {
        state.methodId = button ? Number(button.dataset.method) : null;
        state.methodKind = button ? button.dataset.kind : null;
        document.querySelectorAll('[data-method]').forEach((other) => {
            other.classList.toggle('btn-success', other === button);
            other.classList.toggle('btn-outline-success', other !== button);
        });
        document.getElementById('cashPanel').hidden = state.methodKind !== 'cash';
        updateTotals();
    }

    document.querySelectorAll('[data-method]').forEach((button) => {
        button.addEventListener('click', () => {
            selectMethod(button);
            focusScan();
        });
    });
    selectMethod(document.querySelector('[data-method][data-kind="cash"]') || document.querySelector('[data-method]'));

    receivedInput.addEventListener('input', updateTotals);

    document.getElementById('clearButton').addEventListener('click', () => {
        if (state.lines.length && confirm(text.confirmClear)) {
            state.lines = [];
            receivedInput.value = '';
            render();
        }

        focusScan();
    });

    function payload() {
        return {
            person_id: customerSelect.value || null,
            warehouse_id: warehouseSelect.value || null,
            payment_mode: state.paymentMode,
            payment_method_id: state.paymentMode === 'paid' ? state.methodId : null,
            payment_term_id: state.paymentMode === 'credit' ? (document.getElementById('termSelect').value || null) : null,
            notes: document.getElementById('notesInput').value || null,
            lines: state.lines.map((line) => line.type === 'item'
                ? {
                    line_type: 'item',
                    item_id: line.item.id,
                    uom_id: line.uomId,
                    lot_id: line.lotId,
                    lot_number: line.lotNumber,
                    expires_on: line.expiresOn,
                    description: line.item.name,
                    quantity: line.quantity,
                    unit_price: line.unitPrice,
                    discount_pct: line.discount,
                }
                : {
                    line_type: 'account',
                    sales_concept_id: line.conceptId,
                    description: line.description || line.conceptName,
                    quantity: line.quantity,
                    unit_price: line.unitPrice,
                    discount_pct: line.discount,
                }),
        };
    }

    function showErrors(messages) {
        errorsBox.innerHTML = '<ul class="mb-0">' + messages.map((message) => `<li>${escapeHtml(message)}</li>`).join('') + '</ul>';
        errorsBox.hidden = messages.length === 0;
    }

    chargeButton.addEventListener('click', async () => {
        if (state.busy) {
            return;
        }

        state.busy = true;
        updateTotals();
        showErrors([]);

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

            if (response.ok) {
                window.location.href = data.show_url;

                return;
            }

            const messages = data.errors ? Object.values(data.errors).flat() : [data.message || text.failed];
            showErrors(messages);
            beep();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        } catch (error) {
            showErrors([text.failed]);
        }

        state.busy = false;
        updateTotals();
    });

    render();
    focusScan();
})();
</script>
@endsection