@extends('layouts.app')
@section('title', __('New Sale'))

@section('content')
<div x-data="pos()" x-init="init()" x-cloak>
    {{-- Tabs / multiple carts (#4) --}}
    <div class="mb-3 flex items-center gap-2 overflow-x-auto pb-1">
        <template x-for="(c, ci) in carts" :key="c.id">
            <div class="flex shrink-0 items-center">
                <button @click="active = ci"
                        class="rounded-l-lg px-4 py-2 text-sm font-medium ring-1 ring-slate-200"
                        :class="active === ci ? 'bg-brand-600 text-white ring-brand-600' : 'bg-white text-slate-600'">
                    <span x-text="c.label"></span>
                    <span x-show="c.items.length" class="ml-1 text-xs opacity-75" x-text="'('+c.items.length+')'"></span>
                </button>
                <button x-show="carts.length > 1" @click="closeCart(ci)"
                        class="rounded-r-lg bg-white px-2 py-2 text-slate-400 ring-1 ring-l-0 ring-slate-200 hover:text-red-500"
                        :class="active === ci ? 'bg-brand-600 text-white' : ''">&times;</button>
            </div>
        </template>
        <button @click="newCart()" class="btn-secondary shrink-0 !py-2">+ {{ __('New cart') }}</button>
        <button @click="toggleFullscreen()" class="btn-secondary ml-auto hidden shrink-0 !py-2 sm:inline-flex"
                :title="fullscreen ? '{{ __('Exit full screen') }}' : '{{ __('Full screen') }}'">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-5h-4m4 0v4m0-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4"/>
            </svg>
            <span x-text="fullscreen ? '{{ __('Exit full screen') }}' : '{{ __('Full screen') }}'"></span>
        </button>
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        {{-- Scanner + search --}}
        <div class="space-y-4 xl:col-span-2">
            <div class="card">
                <div class="flex flex-wrap items-center gap-3">
                    <div class="relative flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                            <x-icon name="search" class="h-5 w-5" />
                        </span>
                        <input id="barcode-input" type="text" x-model="term" x-ref="scan"
                               @keydown.enter.prevent="handleEnter()"
                               @keydown.arrow-down.prevent="move(1)"
                               @keydown.arrow-up.prevent="move(-1)"
                               @input.debounce.250ms="lookup()"
                               class="input pl-10 text-lg" autocomplete="off"
                               placeholder="{{ __('Scan barcode or search product...') }}">
                    </div>
                    <label class="flex items-center gap-2 text-sm text-slate-600">
                        <input type="checkbox" x-model="fastAdd" class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                        {{ __('Fast-add') }}
                    </label>
                </div>
                <p class="mt-2 text-xs text-slate-400">
                    {{ __('The scanner stays focused. Use arrow keys to navigate suggestions, Enter to add.') }}
                </p>

                <div x-show="results.length" class="mt-3 max-h-64 space-y-1 overflow-y-auto">
                    <template x-for="(p, pi) in results" :key="p.id">
                        <button @click="addProduct(p)" @mouseenter="highlight = pi"
                                class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left"
                                :class="highlight === pi ? 'bg-brand-50' : 'hover:bg-slate-50'">
                            <span>
                                <span class="block text-sm font-medium text-slate-700" x-text="p.name"></span>
                                <span class="block text-xs text-slate-400" x-text="p.barcode + ' · ' + p.available + ' {{ __('in stock') }}'"></span>
                            </span>
                            <span class="text-sm font-semibold text-brand-700" x-text="fmt(p.price)"></span>
                        </button>
                    </template>
                </div>
            </div>

            {{-- 20 quick products (#2) --}}
            <div class="card">
                <div class="mb-3 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-slate-700">{{ __('Quick products') }} <span class="text-xs font-normal text-slate-400">({{ __('20 shown') }})</span></h3>
                    <button @click="loadQuick()" class="text-xs text-slate-400 hover:text-brand-600">↻ {{ __('Refresh') }}</button>
                </div>
                <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
                    <template x-for="p in quick" :key="'q'+p.id">
                        <button @click="addProduct(p)"
                                class="flex flex-col rounded-lg p-2 text-left ring-1 ring-slate-100 transition hover:bg-brand-50 hover:ring-brand-200 dark:ring-slate-700">
                            <span class="truncate text-xs font-medium text-slate-700 dark:text-slate-200" x-text="p.name"></span>
                            <span class="mt-1 flex items-center justify-between">
                                <span class="text-xs font-semibold text-brand-700" x-text="fmt(p.price)"></span>
                                <span class="text-[10px] text-slate-400" x-text="p.available"></span>
                            </span>
                        </button>
                    </template>
                </div>
            </div>

            {{-- Cart --}}
            {{-- Desktop: full 7-column table. Below `sm` the stacked list further
                 down takes over — a phone cannot show those columns. --}}
            <div class="table-wrap hidden sm:block">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="th">{{ __('Product') }}</th>
                            <th class="th w-32">{{ __('Qty') }}</th>
                            <th class="th w-24">{{ __('Mode') }}</th>
                            <th class="th w-28">{{ __('Price') }}</th>
                            <th class="th w-28">{{ __('Discount') }}</th>
                            <th class="th w-28 text-right">{{ __('Total') }}</th>
                            <th class="th w-10"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <template x-for="(item, index) in cart.items" :key="item.key">
                            <tr>
                                <td class="td">
                                    <span class="font-medium text-slate-700" x-text="item.name"></span>
                                    <span x-show="item.requires_prescription" class="badge ml-1 bg-purple-100 text-purple-700">Rx</span>
                                    <span x-show="item.selling_mode === 'box'" class="badge ml-1 bg-sky-100 text-sky-700" x-text="item.units_per_box + ' u/box'"></span>
                                </td>
                                <td class="td">
                                    <input type="number" min="1" x-model.number="item.quantity" @input="item.quantity = Math.max(1, item.quantity || 1)"
                                           class="input !w-20 !py-1 text-center">
                                </td>
                                <td class="td">
                                    <select x-model="item.selling_mode" x-show="item.units_per_box > 1" class="input !w-20 !py-1 text-xs">
                                        <option value="unit">{{ __('Unit') }}</option>
                                        <option value="box">{{ __('Box') }}</option>
                                    </select>
                                </td>
                                <td class="td" x-text="fmt(unitPrice(item))"></td>
                                <td class="td">
                                    <input type="number" min="0" x-model.number="item.discount" class="input !w-24 !py-1">
                                </td>
                                <td class="td text-right font-semibold" x-text="fmt(lineTotal(item))"></td>
                                <td class="td">
                                    <button @click="cart.items.splice(index, 1)" class="text-red-500 hover:text-red-700">
                                        <x-icon name="trash" class="h-4 w-4" />
                                    </button>
                                </td>
                            </tr>
                        </template>
                        <tr x-show="!cart.items.length">
                            <td colspan="7" class="td py-10 text-center text-slate-400">{{ __('Scan or search to add products.') }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- Mobile cart: one stacked row per line, with quantity steppers.
                 The table above stays hidden below `sm`. --}}
            <div class="table-wrap sm:hidden">
                <div class="divide-y divide-slate-100 dark:divide-slate-700">
                    <template x-for="(item, index) in cart.items" :key="'m-' + item.key">
                        <div class="p-3">
                            <div class="flex items-start gap-2">
                                <div class="min-w-0 flex-1">
                                    <p class="flex flex-wrap items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200">
                                        <span class="truncate" x-text="item.name"></span>
                                        <span x-show="item.requires_prescription" class="badge shrink-0 bg-purple-100 text-purple-700">Rx</span>
                                    </p>
                                    <p class="mt-0.5 text-xs text-slate-400">
                                        <span x-text="fmt(unitPrice(item))"></span>
                                        <span x-show="item.units_per_box > 1" x-text="item.units_per_box + ' u/box'"></span>
                                    </p>
                                </div>
                                <span class="shrink-0 text-sm font-semibold text-slate-800 dark:text-slate-100" x-text="fmt(lineTotal(item))"></span>
                                <button type="button" @click="cart.items.splice(index, 1)"
                                        class="mt-0.5 shrink-0 text-red-500" aria-label="{{ __('Delete') }}">
                                    <x-icon name="trash" class="h-4 w-4" />
                                </button>
                            </div>

                            <div class="mt-2 flex flex-wrap items-center gap-2">
                                <div class="flex items-center rounded-lg ring-1 ring-slate-200 dark:ring-slate-700">
                                    <button type="button" @click="item.quantity = Math.max(1, (item.quantity || 1) - 1)"
                                            class="px-3 py-1.5 text-lg leading-none text-slate-500 dark:text-slate-300">&minus;</button>
                                    <input type="number" min="1" x-model.number="item.quantity"
                                           @input="item.quantity = Math.max(1, item.quantity || 1)"
                                           class="w-12 border-0 bg-transparent p-0 text-center text-base font-semibold focus:ring-0 dark:bg-transparent">
                                    <button type="button" @click="item.quantity = (item.quantity || 1) + 1"
                                            class="px-3 py-1.5 text-lg leading-none text-slate-500 dark:text-slate-300">+</button>
                                </div>

                                <select x-model="item.selling_mode" x-show="item.units_per_box > 1"
                                        class="input !w-24 !py-1.5 text-base sm:text-sm">
                                    <option value="unit">{{ __('Unit') }}</option>
                                    <option value="box">{{ __('Box') }}</option>
                                </select>

                                <input type="number" min="0" x-model.number="item.discount"
                                       class="input ml-auto !w-24 !py-1.5 text-base sm:text-sm"
                                       placeholder="{{ __('Discount') }}">
                            </div>
                        </div>
                    </template>

                    <div x-show="!cart.items.length" class="py-10 text-center text-sm text-slate-400">
                        {{ __('Scan or search to add products.') }}
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-2 text-xs text-slate-500">
                <span class="badge bg-slate-100">{{ __('F2 validate') }}</span>
                <span class="badge bg-slate-100">{{ __('F3 clear cart') }}</span>
                <span class="badge bg-slate-100">{{ __('F4 reprint last') }}</span>
            </div>
        </div>

        {{-- Checkout --}}
        <div class="space-y-4">
            <form method="POST" action="{{ route('pos.store') }}" @submit="prepareSubmit($event)" x-ref="checkoutForm">
                @csrf
                <input type="hidden" name="store_id" value="{{ $store?->id }}">
                <input type="hidden" name="amount_given" x-model="amountGiven">
                <template x-for="(item, i) in cart.items" :key="'h'+item.key">
                    <span>
                        <input type="hidden" :name="`items[${i}][product_id]`" :value="item.id">
                        <input type="hidden" :name="`items[${i}][quantity]`" :value="item.quantity">
                        <input type="hidden" :name="`items[${i}][selling_mode]`" :value="item.selling_mode">
                        <input type="hidden" :name="`items[${i}][discount]`" :value="item.discount || 0">
                    </span>
                </template>

                <div class="card scroll-mt-20" id="pos-checkout">
                    <h2 class="font-semibold text-slate-800">{{ __('Checkout') }}</h2>
                    <div class="mt-4 space-y-3">
                        <div>
                            <label class="label">{{ __('Client') }}</label>
                            <select name="client_id" class="input">
                                <option value="">{{ __('Walk-in customer') }}</option>
                                @foreach ($clients as $client)
                                    <option value="{{ $client->id }}">{{ $client->name }} — {{ $client->phone }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="label">{{ __('Payment method') }}</label>
                            <select name="payment_method" class="input">
                                <option value="cash">{{ __('Cash') }}</option>
                                <option value="card">{{ __('Card') }}</option>
                                <option value="mvola">MVola</option>
                                <option value="orange_money">Orange Money</option>
                                <option value="credit">{{ __('Credit') }}</option>
                            </select>
                        </div>
                        <div>
                            <label class="label">{{ __('Order discount') }}</label>
                            <input type="number" min="0" name="discount" x-model.number="orderDiscount" class="input">
                        </div>
                        <div>
                            <label class="label">{{ __('Notes / Prescriber') }}</label>
                            <input type="text" name="prescriber" class="input">
                        </div>
                    </div>

                    <div class="mt-5 space-y-2 border-t border-slate-100 pt-4 text-sm">
                        <div class="flex justify-between text-slate-500"><span>{{ __('Subtotal') }}</span><span x-text="fmt(subtotal)"></span></div>
                        <div class="flex justify-between text-slate-500"><span>{{ __('Discount') }}</span><span x-text="'- ' + fmt(totalDiscount)"></span></div>
                        <div class="flex justify-between text-slate-500"><span>{{ __('VAT incl.') }}</span><span x-text="fmt(vat)"></span></div>
                        <div class="flex justify-between border-t border-slate-100 pt-2 text-base font-bold text-slate-800">
                            <span>{{ __('Total') }}</span><span x-text="fmt(total)"></span>
                        </div>
                        <div class="mt-3">
                            <label class="label">{{ __('Amount given') }}</label>
                            <input type="number" min="0" step="0.01" x-model.number="amountGiven" class="input !w-48 text-base sm:text-sm" placeholder="0">
                            <p class="mt-1 text-sm" x-show="amountGiven >= total" x-text="amountGiven ? '{{ __('Change') }}: ' + fmt(amountGiven - total) : ''"></p>
                            <p class="mt-1 text-sm text-red-500" x-show="amountGiven && amountGiven < total" x-text="'{{ __('Missing') }}: ' + fmt(total - amountGiven)"></p>
                        </div>
                    </div>

                    <button type="submit" :disabled="!cart.items.length" class="btn-primary mt-5 w-full !py-3 text-base">
                        {{ __('Complete sale') }} <span class="opacity-60">(F2)</span>
                    </button>
                </div>
            </form>

            <div class="card" x-data="stockRefresh()" x-init="start()">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-slate-700">{{ __('Stock auto-refresh') }}</h3>
                    <span class="badge bg-brand-100 text-brand-700" x-text="interval + ' min'"></span>
                </div>
                <p class="mt-1 text-xs text-slate-400">{{ __('Last synced') }}: <span x-text="lastSync"></span></p>
            </div>
        </div>
    </div>

    <a x-ref="lastTicket" href="{{ $lastSale ? route('pos.ticket', $lastSale) : '#' }}" class="hidden"></a>

    {{-- Unit / box choice modal (#2) --}}
    {{-- Closing is bound to the backdrop itself: @click.outside would also fire for
         the very click that opens the modal and dismiss it immediately. --}}
    {{-- The fade is a plain CSS transition rather than x-transition: Alpine animates
         with requestAnimationFrame, which never runs in a backgrounded tab and
         would leave the modal stuck hidden. --}}
    <div x-show="pending" x-cloak @click="pending = null"
         :class="pending ? 'opacity-100' : 'opacity-0'"
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4 transition-opacity duration-150">
        <div @click.stop class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl dark:bg-slate-800">
            <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100">{{ __('Choose unit or box') }}</h3>
            <p class="mt-1 text-sm text-slate-500" x-text="pending ? pending.name : ''"></p>
            <p class="mt-1 text-xs text-slate-400" x-text="pending ? (pending.units_per_box + ' {{ __('units per box') }}') : ''"></p>

            <div class="mt-5 grid grid-cols-2 gap-3">
                <button type="button" @click="pendingMode = 'unit'"
                        class="rounded-xl p-4 text-center ring-2 transition"
                        :class="pendingMode === 'unit' ? 'ring-brand-500 bg-brand-50' : 'ring-slate-200 hover:bg-slate-50'">
                    <span class="block text-sm font-semibold text-slate-700 dark:text-slate-200">{{ __('Unit') }}</span>
                    <span class="mt-1 block text-lg font-bold text-brand-700" x-text="pending ? fmt(pending.price) : ''"></span>
                </button>
                <button type="button" @click="pendingMode = 'box'"
                        class="rounded-xl p-4 text-center ring-2 transition"
                        :class="pendingMode === 'box' ? 'ring-brand-500 bg-brand-50' : 'ring-slate-200 hover:bg-slate-50'">
                    <span class="block text-sm font-semibold text-slate-700 dark:text-slate-200">{{ __('Box') }}</span>
                    <span class="mt-1 block text-lg font-bold text-brand-700" x-text="pending && pending.box_price ? fmt(pending.box_price) : ''"></span>
                </button>
            </div>

            <div class="mt-5 flex gap-2">
                <button type="button" @click="confirmPending()" class="btn-primary flex-1">{{ __('Confirm') }}</button>
                <button type="button" @click="pending = null" class="btn-secondary">{{ __('Cancel') }}</button>
            </div>
        </div>
    </div>

    {{-- Mobile: sticky cart summary sitting just above the bottom menu, so the
         cashier always sees the running total and can reach the checkout. --}}
    <div x-show="cart.items.length" x-cloak
         class="fixed inset-x-0 bottom-[calc(4.0625rem_+_env(safe-area-inset-bottom))] z-30 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur lg:hidden dark:border-slate-700 dark:bg-slate-900/95">
        <div class="flex items-center gap-3">
            <div class="min-w-0">
                <p class="text-[11px] leading-tight text-slate-400">
                    <span x-text="cart.items.length"></span> {{ __('Items') }}
                </p>
                <p class="truncate text-lg font-bold leading-tight text-slate-800 dark:text-slate-100" x-text="fmt(total)"></p>
            </div>
            <button type="button" @click="goCheckout()" class="btn-primary ml-auto !py-3">
                {{ __('Encaisser') }}
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function pos() {
    let uid = 0;
    const mkCart = (label) => ({ id: 'cart-' + (++uid), label, items: [] });
    return {
        term: '', results: [], highlight: 0, fastAdd: true, orderDiscount: 0, amountGiven: 0,
        fullscreen: false,
        pending: null, pendingMode: 'unit',
        carts: [mkCart('{{ __('Cart') }} 1')], active: 0,
        quick: @js($recentProducts->map(fn ($p) => [
            'id' => $p->id, 'name' => $p->name, 'barcode' => $p->barcode,
            'price' => (float) $p->selling_price,
            'box_price' => $p->sellableByBox() ? $p->priceForBox() : null,
            'units_per_box' => (int) $p->units_per_box,
            'vat_rate' => (float) $p->vat_rate, 'available' => (int) $p->available_qty,
            'requires_prescription' => $p->requires_prescription,
        ])),
        get cart() { return this.carts[this.active]; },
        init() {
            this.$nextTick(() => this.$refs.scan.focus());
            window.addEventListener('keydown', (e) => this.shortcuts(e));
            document.addEventListener('fullscreenchange', () => { this.fullscreen = !!document.fullscreenElement; });
            document.addEventListener('click', (e) => {
                if (!e.target.closest('input, select, button, a, textarea')) this.$refs.scan.focus();
            });
        },
        shortcuts(e) {
            if (e.key === 'F2') { e.preventDefault(); if (this.cart.items.length) this.$refs.checkoutForm.requestSubmit(); }
            if (e.key === 'F3') { e.preventDefault(); this.cart.items = []; }
            if (e.key === 'F4') { e.preventDefault(); const a = this.$refs.lastTicket; if (a && a.getAttribute('href') !== '#') window.open(a.href, '_blank'); }
            if (e.key === 'F11') { e.preventDefault(); this.toggleFullscreen(); }
        },
        fmt(v) { return new Intl.NumberFormat(document.documentElement.lang === 'en' ? 'en-US' : 'fr-FR', { minimumFractionDigits: 0 }).format(v || 0) + ' {{ current_tenant()?->currency_symbol ?? "Ar" }}'; },
        async lookup() {
            if (this.term.length < 2) { this.results = []; return; }
            const res = await fetch(`{{ route('pos.search') }}?q=${encodeURIComponent(this.term)}&limit=20`, { headers: { 'Accept': 'application/json' } });
            if (res.ok) {
                const data = await res.json();
                this.results = data.data || []; this.highlight = 0;
                // Exact barcode match + Fast-add => add immediately.
                const exact = this.results.find(p => p.barcode && p.barcode === this.term);
                if (this.fastAdd && exact) this.addProduct(exact);
            } else { this.results = []; }
        },
        move(dir) { if (!this.results.length) return; this.highlight = (this.highlight + dir + this.results.length) % this.results.length; },
        handleEnter() {
            if (this.results.length) { this.addProduct(this.results[this.highlight]); }
            else if (this.term.length >= 2) { this.lookup(); }
        },
        addProduct(p) {
            // Products sold by box open a choice modal first (#2).
            if ((p.units_per_box || 1) > 1) {
                this.pending = p;
                this.pendingMode = 'unit';
                return;
            }
            this.pushItem(p, 'unit');
        },
        pushItem(p, mode) {
            const key = p.id + '-' + mode;
            const existing = this.cart.items.find(i => i.key === key);
            if (existing) { existing.quantity++; }
            else {
                this.cart.items.push({
                    key, id: p.id, name: p.name, price: p.price,
                    box_price: p.box_price, units_per_box: p.units_per_box || 1,
                    selling_mode: mode, vat_rate: p.vat_rate, quantity: 1, discount: 0,
                    requires_prescription: p.requires_prescription,
                });
            }
            this.term = ''; this.results = [];
            this.$nextTick(() => this.$refs.scan.focus());
        },
        confirmPending() {
            if (this.pending) this.pushItem(this.pending, this.pendingMode);
            this.pending = null;
        },
        unitPrice(item) { return item.selling_mode === 'box' && item.box_price ? item.box_price : item.price; },
        lineTotal(item) { return this.unitPrice(item) * item.quantity - (item.discount || 0); },
        get subtotal() { return this.cart.items.reduce((s, i) => s + this.unitPrice(i) * i.quantity, 0); },
        get totalDiscount() { return this.cart.items.reduce((s, i) => s + (i.discount || 0), 0) + (this.orderDiscount || 0); },
        get vat() { return this.cart.items.reduce((s, i) => { const t = this.unitPrice(i) * i.quantity - (i.discount || 0); return s + t * (i.vat_rate / (100 + i.vat_rate)); }, 0); },
        get total() { return Math.max(0, this.subtotal - this.totalDiscount); },
        newCart() { this.carts.push(mkCart('{{ __('Cart') }} ' + (this.carts.length + 1))); this.active = this.carts.length - 1; },
        closeCart(i) { this.carts.splice(i, 1); if (this.active >= this.carts.length) this.active = this.carts.length - 1; },
        async loadQuick() {
            const res = await fetch(`{{ route('pos.search') }}?limit=20`, { headers: { 'Accept': 'application/json' } });
            if (res.ok) { const d = await res.json(); this.quick = d.data || []; }
        },
        toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen?.();
            } else {
                document.exitFullscreen?.();
            }
        },
        prepareSubmit(e) { if (!this.cart.items.length) e.preventDefault(); },
        goCheckout() {
            // Phones: drop the on-screen keyboard, then jump straight to the
            // checkout panel (it sits below the cart, which can be long).
            // A jump rather than a smooth scroll: it stays instant even when the
            // browser throttles animation frames (backgrounded / low-power tab).
            const active = document.activeElement;
            if (active && typeof active.blur === 'function') active.blur();
            const el = document.getElementById('pos-checkout');
            if (el) el.scrollIntoView({ behavior: 'auto', block: 'start' });
        },
    };
}
function stockRefresh() {
    return {
        interval: {{ stock_refresh_minutes() }}, lastSync: '—',
        start() {
            const run = async () => {
                try {
                    const r = await fetch('{{ route('stock.feed') }}?type=pos', { headers: { 'Accept': 'application/json' } });
                    const d = await r.json();
                    this.lastSync = new Date(d.refreshed_at).toLocaleTimeString();
                    this.interval = d.interval_minutes;
                } catch (e) {}
                // Re-arm using the latest interval so changing the setting takes effect.
                clearTimeout(this._t);
                this._t = setTimeout(run, Math.max(1, this.interval) * 60 * 1000);
            };
            run();
        }
    };
}
</script>
@endpush