@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">
                            <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>
                        </div>
                    </div>

                    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink/40" x-on:keydown.escape.window="open = false">
                        <div class="card w-full max-w-md 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>
                            <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 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 type="text" name="reference_number" class="input" :disabled="split" placeholder="M-Pesa code, card slip…">
                                </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>
                </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

    @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>
@endsection