@extends('layouts.app')
@section('title', 'Held Orders')

@section('content')
<div class="space-y-6" x-data="{ customerModal: false, customerTarget: null }" x-on:open-held-customer.window="customerTarget = $event.detail.target; customerModal = true">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="text-xl font-bold">Held Orders</h1>
            <p class="text-sm text-ink-muted">Every order a waiter has put on hold, waiting for you to take payment and clear it.</p>
        </div>
        <form method="GET" class="flex gap-2">
            <select name="waiter_id" onchange="this.form.submit()" class="input !py-1.5 !text-xs">
                <option value="">All waiters</option>
                @foreach ($waiters as $w)
                    <option value="{{ $w->id }}" @selected(request('waiter_id') == $w->id)>{{ $w->name }}</option>
                @endforeach
            </select>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Order #…" class="input !py-1.5 !text-xs w-40">
            <button class="btn-secondary btn-sm">Search</button>
        </form>
    </div>

    @if (session('receipt_print_url'))
        <div class="card card-pad flex items-center justify-between gap-4 flex-wrap border border-success/30 bg-success/5">
            <div>
                <p class="font-semibold text-sm">Payment cleared successfully.</p>
                <p class="text-xs text-ink-muted">The order is closed. You can now print the customer's receipt.</p>
            </div>
            <a href="{{ session('receipt_print_url') }}" target="_blank" rel="noopener" class="btn-primary btn-sm inline-flex items-center gap-1.5">
                <i data-lucide="printer" class="w-3.5 h-3.5"></i> Print Receipt
            </a>
        </div>
    @endif

    @if ($orders->isEmpty())
        <div class="card card-pad text-center text-sm text-ink-muted py-12">
            <i data-lucide="check-circle-2" class="w-8 h-8 mx-auto mb-2 text-success"></i>
            Nothing on hold right now.
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach ($orders as $order)
                <div class="card card-pad space-y-3" x-data="{ open: false, method: null }">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="font-display font-bold">{{ $order->order_number }}</p>
                            <p class="text-xs text-ink-muted">{{ $order->table->name ?? $order->sale_type->label() }}</p>
                        </div>
                        <x-badge :color="$order->status->badgeColor()">{{ $order->status->label() }}</x-badge>
                    </div>
                    <div class="text-xs text-ink-muted space-y-0.5">
                        <p>Waiter: <span class="font-medium text-ink">{{ $order->waiter->name ?? '—' }}</span></p>
                        <p>On hold since {{ $order->held_at?->timezone(config('pos.company.timezone'))->format('H:i') }}</p>
                    </div>
                    <div class="rounded-lg bg-ink/[0.03] border border-border/70 p-2 space-y-1">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-ink-faint">Items</p>
                        @foreach ($order->items->where('status', '!=', 'void') as $item)
                            <div class="flex justify-between gap-2 text-xs"><span>{{ $item->quantity }}× {{ $item->product->name }}</span><span class="font-medium">{{ number_format($item->line_total, 0) }}</span></div>
                        @endforeach
                    </div>
                    <div class="flex items-center justify-between pt-2 border-t border-border">
                        <span class="text-lg font-bold">{{ config('pos.company.currency_symbol') }} {{ number_format($order->display_total, 2) }}</span>
                        <div class="flex gap-1.5 items-center">
                            @if (auth()->user()->hasPermission('sales.cash_out'))
                            <a href="{{ route('restaurant.pos.show', $order) }}" class="btn-ghost btn-sm">Open</a>
                            @if (auth()->user()->hasRole('administrator'))
                                <form method="POST" action="{{ route('restaurant.orders.destroy', $order) }}" onsubmit="return confirm('PERMANENT DELETE\n\nDelete order {{ $order->order_number }} completely? This cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-ghost btn-sm text-danger">Delete</button>
                                </form>
                            @endif
                            <button type="button" class="btn-primary btn-sm" x-on:click="open = true">Clear</button>
                            @endif
                            @if (auth()->user()->hasPermission('sales.force_close'))
                                <form method="POST" action="{{ route('restaurant.held.void', $order) }}" class="flex gap-1" onsubmit="return confirm('Void this held order?')">
                                    @csrf
                                    <input type="hidden" name="reason" value="Voided by manager">
                                    <button type="submit" class="btn-ghost btn-sm text-danger">Void</button>
                                </form>
                            @endif
                        </div>
                    </div>

                    @if (auth()->user()->hasPermission('sales.cash_out'))
                    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-start sm:items-center justify-center overflow-y-auto p-3 sm:p-4 bg-ink/40" x-on:keydown.escape.window="open = false">
                        <div class="card my-2 sm:my-4 w-full max-w-md max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto overscroll-contain p-4 sm:p-5 space-y-4" x-on:click.outside="open = false">
                            <h3 class="font-display font-bold">Clear {{ $order->order_number }}</h3>
                            <p class="text-sm text-ink-muted">Balance: <span class="font-bold text-ink">{{ config('pos.company.currency_symbol') }} {{ number_format($order->display_total, 2) }}</span></p>
                            <div class="rounded-xl border border-green-200 bg-green-50/70 p-3 space-y-2" x-data="mpesaPush({ pushUrl: '{{ route('mpesa.push', ['restaurant', $order->id]) }}', statusUrl: '{{ url('mpesa/status') }}', amount: {{ (int) ceil($order->display_total) }}, configured: {{ $mpesaReady ? 'true' : 'false' }} })">
                                <div class="flex items-center gap-2 font-semibold text-sm text-green-900"><i data-lucide="smartphone" class="w-4 h-4"></i> M-PESA STK Push</div>
                                @if ($mpesaReady)
                                    <p class="text-xs text-green-900/80">Send a payment prompt to the customer's phone. The order is marked paid only after Safaricom confirms payment.</p>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                        <div><label class="field-label">Customer M-PESA number</label><input type="tel" inputmode="tel" x-model="phone" class="input" placeholder="0712 345 678" autocomplete="off"></div>
                                        <div><label class="field-label">Amount (Ksh)</label><input type="number" min="1" step="1" x-model="amount" class="input"></div>
                                    </div>
                                    <p x-show="error" x-cloak x-text="error" class="text-xs text-danger"></p>
                                    <p x-show="stage !== 'form'" x-cloak x-text="message" class="text-xs font-medium" :class="ok ? 'text-green-800' : 'text-ink-muted'"></p>
                                    <div class="flex gap-2">
                                        <button type="button" class="btn-primary btn-sm" x-on:click="send()" x-bind:disabled="busy || stage === 'waiting'"><span x-show="!busy">Send STK Push</span><span x-show="busy" x-cloak>Sending…</span></button>
                                        <button type="button" class="btn-secondary btn-sm" x-show="stage === 'done'" x-cloak x-on:click="window.location.reload()">Refresh orders</button>
                                    </div>
                                @else
                                    <p class="text-xs text-danger">STK Push is not configured. Set MPESA_CONSUMER_KEY, MPESA_CONSUMER_SECRET, MPESA_SHORTCODE, MPESA_PASSKEY and MPESA_CALLBACK_URL in .env, then clear Laravel config cache.</p>
                                @endif
                            </div>
                               <div class="rounded-xl border border-blue-200 bg-blue-50/70 p-3 space-y-2" x-data="manualTill({ lookupUrl: '{{ route('mpesa.till.lookup') }}', pendingUrl: '{{ route('mpesa.till.pending') }}', orderAmount: {{ (float) $order->display_total }}, orderId: {{ (int) $order->id }} })">
                                <div class="flex items-center gap-2 font-semibold text-sm text-blue-900"><i data-lucide="scan-line" class="w-4 h-4"></i> Manual M-PESA Till Payment</div>
                                <p class="text-xs text-blue-900/80">Find payments received by your Buy Goods Till. Select a confirmed payment below; entering a receipt code manually is only a fallback.</p>
                                <div class="flex flex-col sm:flex-row gap-2">
                                    <input type="search" x-model="searchTerm" class="input flex-1" placeholder="Search by phone, customer, bill ref or receipt" autocomplete="off">
                                    <button type="button" class="btn-secondary btn-sm whitespace-nowrap" x-on:click="loadPending()" x-bind:disabled="busy">
                                        <span x-show="!busy">Find Till Payments</span><span x-show="busy" x-cloak>Searching…</span>
                                    </button>
                                </div>
                                <div x-show="payments.length" x-cloak class="max-h-56 overflow-y-auto rounded-lg border border-blue-200 bg-white divide-y divide-gray-100">
                                    <template x-for="payment in payments" :key="payment.receipt">
                                        <div class="p-2 text-xs flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                                            <div class="min-w-0 space-y-1">
                                                <p class="font-semibold text-gray-900"><span x-text="payment.receipt"></span> · KSh <span x-text="Number(payment.amount || 0).toLocaleString('en-KE',{minimumFractionDigits:2,maximumFractionDigits:2})"></span></p>
                                                <p class="text-gray-600"><span x-text="payment.customer_name || 'Customer name not supplied'"></span> · <span x-text="payment.phone || 'Phone unavailable'"></span></p>
                                                <p class="text-gray-500">Bill ref: <span x-text="payment.bill_reference || '—'"></span> · <span x-text="payment.transaction_time || 'Time unavailable'"></span></p>
                                            </div>
                                            <button type="button" class="btn-primary btn-sm shrink-0" x-on:click="applyPayment(payment)">Use this payment</button>
                                        </div>
                                    </template>
                                </div>
                                <p x-show="message" x-cloak x-text="message" class="text-xs" :class="found ? 'text-green-800' : 'text-danger'"></p>
                                <details class="text-xs">
                                    <summary class="cursor-pointer text-blue-900 font-medium">Enter a receipt code manually</summary>
                                    <div class="flex flex-col sm:flex-row gap-2 mt-2">
                                        <input type="text" x-model="receipt" class="input flex-1" placeholder="e.g. QJK123ABC" autocomplete="off" maxlength="32">
                                        <button type="button" class="btn-secondary btn-sm whitespace-nowrap" x-on:click="lookup()" x-bind:disabled="busy || !receipt.trim()">Check receipt</button>
                                    </div>
                                    <div x-show="found" x-cloak class="rounded-lg border border-green-200 bg-white p-2 mt-2 space-y-1">
                                        <p><strong>Receipt:</strong> <span x-text="details.receipt"></span></p>
                                        <p><strong>Amount received:</strong> KSh <span x-text="Number(details.amount || 0).toLocaleString('en-KE',{minimumFractionDigits:2,maximumFractionDigits:2})"></span></p>
                                        <p><strong>Phone:</strong> <span x-text="details.phone || '—'"></span> · <strong>Bill ref:</strong> <span x-text="details.bill_reference || '—'"></span></p>
                                        <button type="button" class="btn-primary btn-sm" x-on:click="applyPayment(details)">Use receipt in payment form</button>
                                    </div>
                                </details>
                            </div>
                            <form method="POST"
                                  action="{{ route('restaurant.held.clear', $order) }}"
                                  :action="split ? '{{ route('restaurant.held.clear-split', $order) }}' : '{{ route('restaurant.held.clear', $order) }}'"
                                  class="space-y-3"
                                  x-data="{
                                      methodType: '',
                                      credit: false,
                                      split: false,
                                      rows: [{methodId: '', amount: '', reference: ''}],
                                      getType(id) {
                                          const el = document.querySelector('[data-held-method-{{ $order->id }}=\'' + id + '\']');
                                          return el ? el.dataset.type : '';
                                      },
                                      addRow() { if (this.rows.length < 5) this.rows.push({methodId:'', amount:'', reference:''}); },
                                      removeRow(i) { if (this.rows.length > 2) this.rows.splice(i,1); }
                                  }">
                                @csrf
                                <div class="flex items-center justify-between gap-3">
                                    <label class="field-label mb-0">Payment</label>
                                    <label class="flex items-center gap-2 text-xs font-semibold">
                                        <input type="checkbox" x-model="split" class="rounded">
                                        Split payment
                                    </label>
                                </div>

                                <div x-show="!split">
                                    <label class="field-label">Payment method</label>
                                    <select id="held-payment-method-{{ $order->id }}" name="payment_method_id" class="input" required :disabled="split" x-on:change="methodType = $event.target.options[$event.target.selectedIndex].dataset.type; credit = methodType === 'credit'">
                                        <option value="">Select payment method…</option>
                                        @foreach ($paymentMethods as $m)
                                            <option value="{{ $m->id }}" data-type="{{ $m->type }}" data-held-method-{{ $order->id }}="{{ $m->id }}">{{ $m->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div x-show="split" x-cloak class="space-y-3">
                                    <template x-for="(row, i) in rows" :key="i">
                                        <div class="rounded-lg border border-border p-3 space-y-2">
                                            <div class="flex justify-between items-center">
                                                <p class="text-xs font-semibold">Payment <span x-text="i + 1"></span></p>
                                                <button type="button" x-show="rows.length > 2" class="text-xs text-danger hover:underline" x-on:click="removeRow(i)">Remove</button>
                                            </div>
                                            <div>
                                                <label class="field-label">Payment method</label>
                                                <select name="payment_method_id[]" class="input" :disabled="!split" required x-model="row.methodId">
                                                    <option value="">Select method…</option>
                                                    @foreach ($paymentMethods as $m)
                                                        <option value="{{ $m->id }}" data-type="{{ $m->type }}" data-held-method-{{ $order->id }}="{{ $m->id }}">{{ $m->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                                <div>
                                                    <label class="field-label">Amount</label>
                                                    <input type="number" step="0.01" min="0.01" name="amount[]" class="input" :disabled="!split" required x-model="row.amount">
                                                </div>
                                                <div>
                                                    <label class="field-label">Reference</label>
                                                    <input type="text" name="reference_number[]" class="input" :disabled="!split" x-model="row.reference" placeholder="M-Pesa code, card slip…">
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <button type="button" x-show="rows.length < 5" class="btn-secondary btn-sm" x-on:click="addRow()">+ Add another payment</button>
                                    <p class="text-xs text-ink-muted">Example: Cash Ksh 60 + M-Pesa Ksh 40. The total must equal the bill balance.</p>
                                </div>

                                <div x-show="split ? rows.some(row => getType(row.methodId) === 'credit') : credit" x-cloak class="rounded-lg border border-accent-200 bg-accent-50/40 p-3 space-y-2">
                                    <label class="field-label">Customer for credit sale</label>
                                    <div class="flex gap-2">
                                        <select id="held-customer-{{ $order->id }}" name="customer_id" class="input flex-1" :required="split ? rows.some(row => getType(row.methodId) === 'credit') : credit">
                                            <option value="">Select customer…</option>
                                            @foreach ($customers as $customer)
                                                <option value="{{ $customer->id }}">{{ $customer->name }} — owes {{ number_format($customer->balance, 2) }}@if($customer->credit_limit > 0) / limit {{ number_format($customer->credit_limit, 2) }}@endif</option>
                                            @endforeach
                                        </select>
                                        @can('customers.manage')
                                            <button type="button" class="btn-secondary btn-sm whitespace-nowrap" x-on:click="customerTarget = '{{ $order->id }}'; customerModal = true">+ Add customer</button>
                                        @endcan
                                    </div>
                                    <p class="text-xs text-ink-muted">Required only when credit is one of the payment methods.</p>
                                </div>

                                <div x-show="!split">
                                    <label class="field-label">Reference (if needed)</label>
                                    <input id="held-payment-reference-{{ $order->id }}" type="text" name="reference_number" class="input" :disabled="split" placeholder="M-Pesa code, card slip…">
                                    <p class="text-xs text-ink-muted mt-1">Manual Till payment: enter the exact M-PESA receipt code only after confirming the incoming payment in Safaricom records. Selecting M-Pesa and entering a reference records it in this POS; it does not independently verify the receipt. Never accept a screenshot alone.</p>
                                </div>
                                <div class="flex justify-end gap-2 pt-2">
                                    <button type="button" class="btn-secondary" x-on:click="open = false">Cancel</button>
                                    <button type="submit" class="btn-primary">Mark paid & clear</button>
                                </div>
                            </form>
                            @if ($mpesaReady)
                                <p class="text-xs text-ink-muted text-center pt-1 border-t border-border">Need to send an M-Pesa prompt instead? Open the order and use M-Pesa there.</p>
                            @endif
                        </div>
                    </div>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
    @can('customers.manage')
    <div x-show="customerModal" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-ink/40" x-on:keydown.escape.window="customerModal = false">
        <div class="card w-full max-w-md p-5 space-y-4" x-on:click.outside="customerModal = false">
            <h3 class="font-display font-bold">Add new customer</h3>
            <form method="POST" action="{{ route('sales.customers.store') }}" class="space-y-3" x-data="{ saving: false }" x-on:submit.prevent="saving=true; const csrf=document.querySelector('meta[name=csrf-token]')?.content || '{{ csrf_token() }}'; fetch($el.action, {method:'POST', credentials:'same-origin', headers:{'X-CSRF-TOKEN':csrf,'X-Requested-With':'XMLHttpRequest','Accept':'application/json'}, body:new FormData($el)}).then(async r => { const text=await r.text(); let data={}; try{data=JSON.parse(text)}catch(e){} if(!r.ok || !data.customer) throw new Error(data.message || 'Unable to add customer'); return data; }).then(data => { const select=document.getElementById('held-customer-'+customerTarget); if(select){ let opt=select.querySelector('option[value="'+data.customer.id+'"]'); if(!opt){ opt=new Option(data.customer.name+' — owes '+Number(data.customer.balance||0).toFixed(2), data.customer.id); select.add(opt); } select.value=data.customer.id; select.dispatchEvent(new Event('change',{bubbles:true})); } customerModal=false; customerTarget=null; saving=false; $el.reset(); }).catch(err => { saving=false; alert(err.message || 'Unable to add customer. Please check the details.'); })>
                @csrf
                <div><label class="field-label">Customer name</label><input type="text" name="name" class="input" required></div>
                <div><label class="field-label">Phone</label><input type="text" name="phone" class="input"></div>
                <div><label class="field-label">Email</label><input type="email" name="email" class="input"></div>
                <div><label class="field-label">Credit limit</label><input type="number" step="0.01" min="0" name="credit_limit" value="0" class="input"></div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" class="btn-secondary" x-on:click="customerModal = false">Cancel</button>
                    <button type="submit" class="btn-primary" x-bind:disabled="saving" x-text="saving ? 'Saving…' : 'Save customer'"></button>
                </div>
            </form>
        </div>
    </div>
    @endcan

    @once
        @push('scripts')
            <script>
                document.addEventListener('alpine:init', () => {
                    if (Alpine.data('mpesaPush')) return;
                    Alpine.data('mpesaPush', (cfg) => ({
                        stage: 'form', phone: '', amount: cfg.amount, error: '', message: '', ok: false,
                        busy: false, txId: null, timer: null,
                        headers() { return { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '' }; },
                        async send() {
                            this.error = ''; this.busy = true;
                            try {
                                const r = await fetch(cfg.pushUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ phone: this.phone, amount: parseInt(this.amount, 10) || 0 }) });
                                const d = await r.json().catch(() => ({}));
                                if (!r.ok || !d.ok) { this.error = d.message || (d.errors ? Object.values(d.errors)[0][0] : 'Could not send the request.'); return; }
                                this.txId = d.id; this.message = d.message; this.stage = 'waiting'; this.poll();
                            } catch (e) { this.error = 'Could not reach the server. Check the connection and try again.'; }
                            finally { this.busy = false; }
                        },
                        poll() {
                            let tries = 0; clearInterval(this.timer);
                            this.timer = setInterval(async () => {
                                tries++;
                                try {
                                    const r = await fetch(cfg.statusUrl + '/' + this.txId, { headers: { 'Accept': 'application/json' } });
                                    const d = await r.json(); this.message = d.message;
                                    if (d.status !== 'pending') { clearInterval(this.timer); this.ok = d.status === 'success' && d.applied; this.stage = 'done'; }
                                } catch (e) {}
                                if (tries > 70 && this.stage === 'waiting') { clearInterval(this.timer); this.ok = false; this.stage = 'done'; this.message = 'No final response yet. Do not request payment again immediately; refresh and check the M-PESA dashboard.'; }
                            }, 3000);
                        }
                    }));
                });
            </script>
        @endpush
    @endonce

    @if (session('receipt_print_url'))
        @push('scripts')
            <script>
                window.addEventListener('load', function () {
                    const url = @json(session('receipt_print_url'));
                    const w = window.open(url, '_blank');
                    if (w) w.focus();
                });
            </script>
        @endpush
    @endif

</div>

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('mpesaPush', (cfg) => ({
        stage: 'form', phone: '', amount: cfg.amount, error: '', message: '', ok: false,
        busy: false, txId: null, timer: null,
        headers() {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
            return {'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrf,'X-Requested-With':'XMLHttpRequest'};
        },
        async send() {
            this.error = '';
            if (!cfg.configured) { this.error = 'M-PESA is not configured on the server.'; return; }
            if (!this.phone.trim()) { this.error = 'Enter the customer M-PESA phone number.'; return; }
            if (!(Number(this.amount) > 0)) { this.error = 'Enter a valid payment amount.'; return; }
            this.busy = true;
            try {
                const r = await fetch(cfg.pushUrl, {method:'POST',credentials:'same-origin',headers:this.headers(),body:JSON.stringify({phone:this.phone,amount:parseInt(this.amount,10)||0})});
                const d = await r.json().catch(()=>({}));
                if (!r.ok || !d.ok) { this.error = d.message || (d.errors ? Object.values(d.errors)[0][0] : 'Could not send STK Push.'); return; }
                this.txId = d.id; this.message = d.message || 'STK request sent. Ask the customer to enter their PIN.'; this.stage = 'waiting'; this.poll();
            } catch (e) { this.error = 'Could not reach the server. Check your connection and Laravel logs.'; }
            finally { this.busy = false; }
        },
        poll() {
            let tries = 0; clearInterval(this.timer);
            this.timer = setInterval(async () => {
                tries++;
                try {
                    const r = await fetch(cfg.statusUrl + '/' + this.txId, {credentials:'same-origin',headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'}});
                    const d = await r.json();
                    if (!r.ok) throw new Error(d.message || 'Could not check payment status.');
                    this.message = d.message || ('Payment status: ' + d.status);
                    if (d.status !== 'pending') {
                        clearInterval(this.timer); this.ok = d.status === 'success' && d.applied; this.stage = 'done';
                        if (this.ok) this.message = 'Payment confirmed and applied. Refresh orders to see the updated balance.';
                    }
                } catch(e) { /* retry while pending */ }
                if (tries > 70 && this.stage === 'waiting') { clearInterval(this.timer); this.stage='done'; this.ok=false; this.message='No final response yet. Check the M-PESA dashboard before retrying to avoid duplicate payment.'; }
            },3000);
        },
        reset() { clearInterval(this.timer); this.stage='form'; this.error=''; this.message=''; this.ok=false; }
    }));
    Alpine.data('manualTill', (cfg) => ({
        receipt: '', searchTerm: '', busy: false, found: false, message: '', details: {}, payments: [],
        async loadPending() {
            this.busy = true; this.message = ''; this.found = false;
            try {
                const csrf = document.querySelector('meta[name=csrf-token]')?.content || '';
                const r = await fetch(cfg.pendingUrl, { method: 'POST', credentials: 'same-origin', headers: {'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrf,'X-Requested-With':'XMLHttpRequest'}, body: JSON.stringify({q:this.searchTerm.trim()}) });
                const d = await r.json().catch(() => ({}));
                if (!r.ok || !d.ok) { this.payments = []; this.message = d.message || 'Could not load Till payments.'; return; }
                this.payments = d.payments || []; this.message = d.message || (this.payments.length ? 'Select the payment for this order.' : 'No unlinked Till payments found.');
            } catch (e) { this.payments = []; this.message = 'Could not reach the server. Try again.'; }
            finally { this.busy = false; }
        },
        async lookup() {
            this.busy = true; this.found = false; this.message = ''; this.details = {};
            try {
                const csrf = document.querySelector('meta[name=csrf-token]')?.content || '';
                const r = await fetch(cfg.lookupUrl, { method: 'POST', credentials: 'same-origin', headers: {'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrf,'X-Requested-With':'XMLHttpRequest'}, body: JSON.stringify({receipt:this.receipt.trim()}) });
                const d = await r.json().catch(() => ({}));
                if (!r.ok || !d.ok) { this.message = d.message || 'Could not verify this receipt.'; return; }
                this.details = d; this.found = true; this.message = d.message;
            } catch (e) { this.message = 'Could not reach the server. Try again.'; }
            finally { this.busy = false; }
        },
        applyPayment(payment) {
            const ref = document.getElementById('held-payment-reference-' + cfg.orderId);
            const select = document.getElementById('held-payment-method-' + cfg.orderId);
            const receipt = payment.receipt || this.receipt.trim();
            const amount = Number(payment.amount || 0);
            if (ref) { ref.value = receipt; ref.dispatchEvent(new Event('input', {bubbles:true})); }
            if (select) {
                const opt = Array.from(select.options).find(o => /m.?pesa|lipa na mpesa|mobile money/i.test(o.text));
                if (opt) { select.value = opt.value; select.dispatchEvent(new Event('change', {bubbles:true})); }
            }
            this.receipt = receipt; this.details = payment; this.found = true;
            this.message = amount > Number(cfg.orderAmount) + 0.009
                ? 'Payment selected, but its amount exceeds this order balance. Do not apply it to this order.'
                : 'Confirmed receipt selected. Check the amount against the remaining balance, then submit the payment.';
        }
    }));
});
</script>
@endpush

@endsection