@extends('layouts.app')
@section('title', 'Order ' . $order->order_number)

@section('content')
<div class="grid lg:grid-cols-3 gap-6" x-data="{ ...tabs('{{ $menu->keys()->first() }}'), ...modal() }">

    {{-- Menu --}}
    <div class="lg:col-span-2 space-y-4">
        <div class="flex items-center justify-between flex-wrap gap-2">
            <div>
                <h1 class="text-lg font-bold">{{ $order->order_number }}</h1>
                <p class="text-xs text-ink-muted">
                    {{ $order->table->name ?? $order->sale_type->label() }} ·
                    Waiter: {{ $order->waiter->name ?? '—' }} · {{ $order->covers }} covers
                </p>
            </div>
            <div class="flex items-center gap-1.5">
                <x-badge :color="$order->status->badgeColor()">{{ $order->status->label() }}</x-badge>
                @if ($order->isHeld())
                    <x-badge color="amber" icon="pause">On hold {{ $order->held_at->timezone(config('pos.company.timezone'))->format('H:i') }}</x-badge>
                @endif
                @if ($order->splits->isNotEmpty())
                    <x-badge color="violet" icon="split">Split {{ $order->splits->count() }} ways</x-badge>
                @endif
            </div>
        </div>

        @if ($order->status->value === 'merged')
            <div class="card card-pad flex items-center gap-2 text-sm bg-ink/5">
                <i data-lucide="git-merge" class="w-4 h-4"></i>
                This bill was merged into
                @if ($order->mergedInto)<a class="font-semibold text-primary-600 hover:underline" href="{{ route('restaurant.pos.show', $order->mergedInto) }}">{{ $order->mergedInto->order_number }}</a>@endif — nothing was voided, the items moved across.
            </div>
        @endif

        @if ($happy['active'] || auth()->user()->can('sales.happy_hour'))
            <div class="flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm {{ $happy['active'] ? 'bg-accent-50 text-accent-700 border border-accent-500/30' : 'bg-ink/5 text-ink-muted' }}">
                <span class="flex items-center gap-2"><i data-lucide="party-popper" class="w-4 h-4"></i>
                    @if ($happy['active']) <b>Happy hour — {{ $happy['label'] }}</b> on everything you add now. @else Happy hour is off. @endif
                </span>
                @can('sales.happy_hour')
                    <form method="POST" action="{{ route('happy-hour.toggle') }}">@csrf
                        <button class="btn-secondary btn-sm">{{ $happy['active'] ? 'Switch off' : 'Switch on' }}</button>
                    </form>
                @endcan
            </div>
        @endif

        <div class="card @if(! $order->isLive()) opacity-60 pointer-events-none @endif">
            @if ($menuSections->isNotEmpty())
                <div class="flex items-center gap-2 border-b border-border px-3 py-2 bg-ink/[0.02]">
                    <span class="text-xs font-semibold text-ink-muted">POS section</span>
                    <form method="POST" action="{{ route('restaurant.pos.menu-section', $order) }}" class="flex-1">
                        @csrf
                        <select name="section_id" class="input !py-1.5 !text-xs w-full sm:w-auto" onchange="this.form.submit()">
                            @foreach ($menuSections as $section)
                                <option value="{{ $section->id }}" @selected($selectedMenuSection && $selectedMenuSection->id === $section->id)>{{ $section->name }} — {{ ucfirst($section->type) }}</option>
                            @endforeach
                        </select>
                    </form>
                </div>
            @endif
            <div class="flex border-b border-border px-2 overflow-x-auto">
                @foreach ($menu as $category => $products)
                    <button class="tab-btn whitespace-nowrap" :class="is('{{ $category }}') && 'active'" x-on:click="set('{{ $category }}')">{{ $category ?: 'Other' }}</button>
                @endforeach
            </div>

            @foreach ($menu as $category => $products)
                <div x-show="is('{{ $category }}')" x-cloak class="p-4 grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @foreach ($products as $product)
                        <form method="POST" action="{{ route('restaurant.pos.items.store', $order) }}" data-offline-queue="1" data-offline-label="{{ $product->name }}">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="card card-pad !p-3 w-full text-left hover:border-primary-300 hover:shadow-pop transition group relative">
                                @if ($product->department_id !== $order->department_id)
                                    <span class="absolute top-2 right-2 text-primary-500" title="Bar item — goes on the bar order"><i data-lucide="martini" class="w-3.5 h-3.5"></i></span>
                                @elseif ($product->is_direct_sale)
                                    <span class="absolute top-2 right-2 text-accent-500" title="Direct sale — no kitchen ticket"><i data-lucide="zap" class="w-3.5 h-3.5"></i></span>
                                @endif
                                <p class="text-sm font-semibold leading-snug group-hover:text-primary-600 pr-4">{{ $product->name }}</p>
                                <p class="text-xs text-ink-muted mt-1">
                                    @if ($happy['active'])
                                        <span class="line-through opacity-60">{{ number_format($product->selling_price, 0) }}</span>
                                        <span class="font-semibold text-accent-600">{{ config('pos.company.currency_symbol') }} {{ number_format($product->selling_price * (100 - $happy['percent']) / 100, 0) }}</span>
                                    @else
                                        {{ config('pos.company.currency_symbol') }} {{ number_format($product->selling_price, 0) }}
                                    @endif
                                </p>
                            </button>
                        </form>
                    @endforeach
                </div>
            @endforeach
        </div>

        {{-- Split billing panel --}}
        @if ($order->splits->isNotEmpty())
            <div class="card card-pad space-y-4">
                <div class="flex items-center justify-between">
                    <h2 class="font-display font-bold text-sm">Split bill — {{ $order->splits->count() }} ways</h2>
                    <form method="POST" action="{{ route('restaurant.pos.splits.destroy', $order) }}" onsubmit="return confirm('Cancel split billing? This makes it one bill again.')">
                        @csrf @method('DELETE')
                        <button class="text-xs text-danger hover:underline">Cancel split</button>
                    </form>
                </div>
                <div class="grid sm:grid-cols-2 gap-3">
                    @foreach ($order->splits as $split)
                        <div class="rounded-lg border border-border p-3 space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="font-semibold text-sm">{{ $split->label }}</span>
                                <x-badge :color="$split->status === 'paid' ? 'emerald' : ($split->status === 'billed' ? 'amber' : 'slate')">{{ ucfirst($split->status) }}</x-badge>
                            </div>

                            @if ($split->mode === 'by_item')
                                <div class="space-y-1">
                                    @forelse ($split->items as $item)
                                        <div class="text-xs flex justify-between"><span>{{ $item->quantity }}× {{ $item->product->name }}</span><span>{{ number_format($item->line_total, 0) }}</span></div>
                                    @empty
                                        <p class="text-xs text-ink-faint">No items assigned yet</p>
                                    @endforelse
                                </div>
                            @endif

                            <div class="text-sm font-bold flex justify-between border-t border-border pt-1.5">
                                <span>Total</span><span>{{ number_format($split->grand_total, 2) }}</span>
                            </div>
                            <div class="text-xs flex justify-between text-ink-muted">
                                <span>Paid</span><span>{{ number_format($split->amount_paid, 2) }}</span>
                            </div>

                            @if ($split->status !== 'paid')
                                @can('sales.cash_out')
                                    <button type="button" class="btn-primary btn-sm w-full" x-on:click="$dispatch('open-modal-pay-split-{{ $split->id }}')">Pay {{ number_format($split->balanceDue(), 2) }}</button>
                                @else
                                    <p class="text-[11px] text-ink-muted text-center">Owing {{ number_format($split->balanceDue(), 2) }} — the cashier collects.</p>
                                @endcan
                            @endif
                            <a href="{{ route('restaurant.pos.print.receipt', ['order' => $order, 'split' => $split->id]) }}" target="_blank" class="btn-secondary btn-sm w-full">{{ $split->status === 'paid' ? 'Print receipt' : 'Print bill' }}</a>
                        </div>

                        <x-modal id="pay-split-{{ $split->id }}" title="Pay {{ $split->label }}">
                            <form method="POST" action="{{ route('restaurant.pos.splits.pay', [$order, $split]) }}" id="pay-split-{{ $split->id }}-form" class="space-y-4">
                                @csrf
                                <div>
                                    <label class="field-label">Payment method</label>
                                    <select name="payment_method_id" class="input" required>
                                        @foreach ($paymentMethods as $method)<option value="{{ $method->id }}">{{ $method->name }}</option>@endforeach
                                    </select>
                                </div>
                                <div><label class="field-label">Amount</label><input type="number" step="0.01" name="amount" value="{{ $split->balanceDue() }}" class="input" required></div>
                                <div><label class="field-label">Reference (optional)</label><input type="text" name="reference_number" class="input"></div>
                            </form>
                            <x-slot:footer>
                                <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                                <button form="pay-split-{{ $split->id }}-form" class="btn-primary">Record payment</button>
                            </x-slot:footer>
                        </x-modal>
                    @endforeach
                </div>

                @if ($order->splits->first()->mode === 'by_item')
                    <p class="text-xs text-ink-muted">Assign each ticket item to a split using the dropdown next to it on the right.</p>
                @endif
            </div>
        @endif
    </div>

    {{-- Ticket --}}
    <div class="space-y-4">
        <div class="card card-pad space-y-3 sticky top-20">
            <h2 class="font-display font-bold text-sm">Order ticket</h2>

            <div class="space-y-2 max-h-96 overflow-y-auto pr-1">
                @forelse ($order->items as $item)
                    @php
                        $u = auth()->user();
                        $locked = $item->isLocked();
                        $canCancel = $item->status !== 'void' && $order->isLive() && ($u->can('sales.void_item') || ($u->can('sales.remove_unsent') && ! $locked));
                    @endphp
                    <div class="flex items-start justify-between gap-2 pb-2 border-b border-border/70 {{ $item->status === 'void' ? 'opacity-40' : '' }}">
                        <div class="min-w-0">
                            <p class="text-sm font-medium truncate">{{ $item->quantity }}× {{ $item->product->name }}</p>
                            @if ($item->special_instructions)
                                <p class="text-xs text-ink-muted italic">{{ $item->special_instructions }}</p>
                            @endif
                            <div class="flex items-center gap-1 mt-1 flex-wrap">
                                <span class="badge badge-{{ ['new'=>'slate','preparing'=>'amber','ready'=>'teal','served'=>'blue','void'=>'rose'][$item->status] ?? 'slate' }}">{{ ucfirst($item->status === 'new' ? 'not sent' : $item->status) }}</span>
                                @if ($item->destination === 'bar')<span class="badge badge-violet" title="Goes on the bar order"><i data-lucide="martini" class="w-3 h-3"></i> Bar</span>@endif
                                @if ($item->destination === 'none')<span class="badge badge-amber" title="Direct sale"><i data-lucide="zap" class="w-3 h-3"></i></span>@endif
                                @if ($item->discount_percent > 0)<span class="badge badge-emerald">-{{ rtrim(rtrim(number_format($item->discount_percent, 2), '0'), '.') }}%</span>@endif
                                @if ($locked && $item->status !== 'void')<span class="text-ink-faint" title="Sent or printed — only a manager can void it"><i data-lucide="lock" class="w-3 h-3"></i></span>@endif
                            </div>
                            @if ($order->splits->isNotEmpty() && $order->splits->first()->mode === 'by_item' && $item->status !== 'void')
                                <form method="POST" action="{{ route('restaurant.pos.splits.assign', [$order, $item->order_split_id ?: $order->splits->first()]) }}" class="mt-1">
                                    @csrf
                                    <input type="hidden" name="item_id" value="{{ $item->id }}">
                                    <select name="_split_target" onchange="this.form.action = this.form.action.replace(/splits\/\d+\/assign/, 'splits/' + this.value + '/assign'); this.form.submit()" class="input !py-0.5 !text-xs !w-32">
                                        @foreach ($order->splits as $s)
                                            <option value="{{ $s->id }}" @selected($item->order_split_id === $s->id)>{{ $s->label }}</option>
                                        @endforeach
                                    </select>
                                </form>
                            @endif
                        </div>
                        <div class="text-right shrink-0">
                            @if ($item->original_price)<p class="text-[11px] text-ink-faint line-through">{{ number_format($item->original_price * $item->quantity, 0) }}</p>@endif
                            <p class="text-sm font-semibold">{{ number_format($item->line_total, 0) }}</p>
                            @if ($canCancel)
                                <form method="POST" action="{{ route('restaurant.pos.items.void', [$order, $item]) }}" onsubmit="return confirm('{{ $locked ? 'Void this item?' : 'Remove this item?' }}')">
                                    @csrf
                                    <button class="text-[11px] text-danger hover:underline mt-1">{{ $locked ? 'Void' : 'Remove' }}</button>
                                </form>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="text-sm text-ink-muted py-6 text-center">No items yet — tap a menu item to add it.</p>
                @endforelse
            </div>

            <div class="border-t border-border pt-3 space-y-1.5 text-sm">
                <div class="flex justify-between"><span class="text-ink-muted">Subtotal</span><span>{{ number_format($order->subtotal, 2) }}</span></div>
                <div class="flex justify-between"><span class="text-ink-muted">Discount</span><span>-{{ number_format($order->discount_total, 2) }}</span></div>
                <div class="flex justify-between"><span class="text-ink-muted">Service charge</span><span>{{ number_format($order->service_charge_total, 2) }}</span></div>
                <div class="flex justify-between"><span class="text-ink-muted">VAT</span><span>{{ number_format($order->tax_total, 2) }}</span></div>
                <div class="flex justify-between"><span class="text-ink-muted">Levy</span><span>{{ number_format($order->levy_total, 2) }}</span></div>
                <div class="flex justify-between font-bold text-base pt-1.5 border-t border-border"><span>Total</span><span>{{ config('pos.company.currency_symbol') }} {{ number_format($order->grand_total ?: $order->subtotal, 2) }}</span></div>
                @if ($order->status->value === 'billed' || $order->payments->isNotEmpty())
                    <div class="flex justify-between text-xs text-ink-muted"><span>Paid</span><span>{{ number_format($order->payments->sum('amount'), 2) }}</span></div>
                    <div class="flex justify-between text-xs font-semibold {{ $order->balanceDue() > 0 ? 'text-danger' : 'text-success' }}"><span>Balance due</span><span>{{ number_format($order->balanceDue(), 2) }}</span></div>
                @endif
            </div>

            @if ($order->isLive())
                {{-- Send: the waiter decides what goes where --}}
                <div class="grid grid-cols-2 gap-2 pt-1">
                    <form method="POST" action="{{ route('restaurant.pos.send', $order) }}">
                        @csrf
                        <button class="btn-secondary w-full btn-sm" @disabled($pending['kitchen'] === 0)><i data-lucide="chef-hat" class="w-3.5 h-3.5"></i> Send to kitchen @if($pending['kitchen'])<span class="badge badge-amber">{{ $pending['kitchen'] }}</span>@endif</button>
                    </form>
                    <form method="POST" action="{{ route('restaurant.pos.send-bar', $order) }}">
                        @csrf
                        <button class="btn-secondary w-full btn-sm" @disabled($pending['bar'] === 0)><i data-lucide="martini" class="w-3.5 h-3.5"></i> Send to bar @if($pending['bar'])<span class="badge badge-violet">{{ $pending['bar'] }}</span>@endif</button>
                    </form>
                </div>

                {{-- Print: tick what to print, one print dialog --}}
                @can('sales.reprint')
                    <div class="rounded-lg border border-border p-2.5 space-y-2"
                         x-data="{ docs: { kitchen: true, bar: true, bill: false },
                                   go() { const q = Object.keys(this.docs).filter(k => this.docs[k]).map(k => 'docs[]=' + k).join('&');
                                          if (q) window.open('{{ route('restaurant.pos.print.docs', $order) }}?' + q, '_blank'); } }">
                        <p class="text-[11px] font-bold uppercase tracking-wide text-ink-faint">Print</p>
                        <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                            <label class="flex items-center gap-1.5"><input type="checkbox" x-model="docs.kitchen" class="rounded border-border text-primary-500"> Kitchen order</label>
                            <label class="flex items-center gap-1.5"><input type="checkbox" x-model="docs.bar" class="rounded border-border text-primary-500"> Bar order</label>
                            <label class="flex items-center gap-1.5"><input type="checkbox" x-model="docs.bill" class="rounded border-border text-primary-500"> Bill</label>
                        </div>
                        <button type="button" class="btn-secondary btn-sm w-full" x-on:click="go()" x-bind:disabled="!docs.kitchen && !docs.bar && !docs.bill"><i data-lucide="printer" class="w-3.5 h-3.5"></i> Print selected</button>
                        <p class="text-[11px] text-ink-faint">Once printed or sent, items are locked — only a manager can void them.</p>
                    </div>
                @endcan

                <div class="grid grid-cols-2 gap-2">
                    <button class="btn-primary w-full btn-sm" x-on:click="$dispatch('open-modal-bill')"><i data-lucide="receipt" class="w-3.5 h-3.5"></i> {{ $order->status->value === 'billed' ? 'Re-bill' : 'Bill order' }}</button>
                    @if ($order->isHeld())
                        <form method="POST" action="{{ route('restaurant.pos.resume', $order) }}">@csrf
                            <button class="btn-secondary w-full btn-sm"><i data-lucide="play" class="w-3.5 h-3.5"></i> Resume</button>
                        </form>
                    @else
                        <form method="POST" action="{{ route('restaurant.pos.hold', $order) }}">@csrf
                            <button class="btn-secondary w-full btn-sm" title="Park this order for the cashier"><i data-lucide="pause" class="w-3.5 h-3.5"></i> Hold / suspend</button>
                        </form>
                    @endif
                </div>

                @if ($canCancelOrder)
                    <form method="POST" action="{{ route('restaurant.pos.cancel', $order) }}" onsubmit="return confirm('Cancel {{ $order->order_number }} completely? This cannot be undone.')">
                        @csrf
                        <button class="btn-ghost btn-sm w-full text-danger"><i data-lucide="x-circle" class="w-3.5 h-3.5"></i> Cancel whole order</button>
                    </form>
                @endif

                @if ($mergeCandidates->isNotEmpty())
                    <button type="button" class="btn-secondary btn-sm w-full" x-on:click="$dispatch('open-modal-merge')"><i data-lucide="git-merge" class="w-3.5 h-3.5"></i> Merge bills ({{ $mergeCandidates->count() }} available)</button>
                @endif

                <form method="POST" action="{{ route('restaurant.pos.reprint-kitchen', $order) }}">
                    @csrf
                    <button class="btn-ghost btn-sm w-full"><i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i> Reprint kitchen (network printer)</button>
                </form>

                {{-- Money: only people allowed to cash out --}}
                @if ($order->status->value === 'billed' && $order->splits->isEmpty())
                    @can('sales.cash_out')
                        <div class="grid grid-cols-2 gap-2">
                            <button class="btn-primary btn-sm w-full" x-on:click="$dispatch('open-modal-pay')"><i data-lucide="banknote" class="w-3.5 h-3.5"></i> Collect payment</button>
                            @can('sales.split_bill')<button class="btn-secondary btn-sm w-full" x-on:click="$dispatch('open-modal-split')"><i data-lucide="split" class="w-3.5 h-3.5"></i> Split bill</button>@endcan
                        </div>
                        @if ($mpesaReady)
                            @can('sales.mpesa')
                                <button class="btn-secondary btn-sm w-full" x-on:click="$dispatch('open-modal-mpesa')"><i data-lucide="smartphone" class="w-3.5 h-3.5"></i> M-Pesa prompt to customer’s phone</button>
                            @endcan
                        @endif
                    @else
                        <p class="text-xs text-ink-muted bg-ink/5 rounded-lg px-3 py-2">Payment is taken by the cashier. Press <b>Hold / suspend</b> and hand the money over — the cashier clears it against your name.</p>
                        @can('sales.split_bill')
                            @if ($order->splits->isEmpty())<button class="btn-secondary btn-sm w-full" x-on:click="$dispatch('open-modal-split')"><i data-lucide="split" class="w-3.5 h-3.5"></i> Split bill</button>@endif
                        @endcan
                    @endcan
                @endif
            @endif

            @if ($order->payments->isNotEmpty() || $order->splits->isNotEmpty() || $order->status->value === 'billed')
                <a href="{{ route('restaurant.pos.print.receipt', $order) }}" target="_blank" class="btn-secondary btn-sm w-full">
                    <i data-lucide="file-text" class="w-3.5 h-3.5"></i> {{ $order->isFullyPaid() ? 'Print full receipt' : 'Print bill' }}
                </a>
            @endif

            @if (in_array($order->status->value, ['billed', 'sent_to_kitchen']) && $order->balanceDue() > 0 && auth()->user()->can('sales.force_close'))
                <form method="POST" action="{{ route('restaurant.pos.close', $order) }}" onsubmit="return confirm('Force-close this order with an outstanding balance of {{ number_format($order->balanceDue(), 2) }}? This is logged to the audit trail and should only be used for write-offs, comps, or correcting a stuck order.')">
                    @csrf
                    <button class="btn-ghost btn-sm w-full text-danger"><i data-lucide="shield-alert" class="w-3.5 h-3.5"></i> Force close (write off balance)</button>
                </form>
            @endif
        </div>
    </div>

    <x-modal id="bill" title="Generate bill">
        <form method="POST" action="{{ route('restaurant.pos.bill', $order) }}" id="bill-form" class="space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                @can('sales.discount')
                <div>
                    <label class="field-label">Discount ({{ config('pos.company.currency_symbol') }})</label>
                    <input type="number" step="0.01" name="discount_total" value="0" class="input">
                </div>
                @endcan
                <div>
                    <label class="field-label">Service charge ({{ config('pos.company.currency_symbol') }})</label>
                    <input type="number" step="0.01" name="service_charge_total" value="0" class="input">
                </div>
            </div>
            <p class="text-xs text-ink-muted">VAT and levy are computed automatically from Settings → Taxes & Levies.</p>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="bill-form" class="btn-primary">Generate bill</button>
        </x-slot:footer>
    </x-modal>

    <x-modal id="pay" title="Collect payment">
        <form method="POST" action="{{ route('restaurant.pos.pay', $order) }}" id="pay-form" class="space-y-4" x-data="{ methodId: '' }">
            @csrf
            <p class="text-sm">Balance due: <span class="font-bold">{{ config('pos.company.currency_symbol') }} {{ number_format($order->balanceDue(), 2) }}</span></p>
            @if ($order->payments->isNotEmpty())
                <div class="rounded-lg bg-ink/5 px-3 py-2 space-y-1">
                    <p class="text-[11px] font-bold uppercase tracking-wide text-ink-faint">Already received</p>
                    @foreach ($order->payments as $payment)
                        <div class="flex items-center justify-between text-xs">
                            <span>{{ $payment->paymentMethod->name ?? $payment->method }}@if($payment->reference_number) · {{ $payment->reference_number }}@endif</span>
                            <span class="font-semibold">{{ number_format($payment->amount, 2) }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
            <div>
                <label class="field-label">Payment method</label>
                <select name="payment_method_id" class="input" required x-model="methodId">
                    @foreach ($paymentMethods as $method)<option value="{{ $method->id }}" data-type="{{ $method->type }}">{{ $method->name }}</option>@endforeach
                </select>
            </div>
            <div><label class="field-label">Amount</label><input type="number" step="0.01" name="amount" value="{{ $order->balanceDue() }}" class="input" required></div>
            <div><label class="field-label">Reference (optional)</label><input type="text" name="reference_number" class="input" placeholder="M-Pesa code, card auth..."></div>
            <div x-show="$el.closest('form').querySelector(`option[value='${methodId}']`)?.dataset.type === 'credit'" x-cloak class="space-y-2">
                <label class="field-label">Customer (required for credit)</label>
                <select name="customer_id" class="input">
                    <option value="">Select customer…</option>
                    @foreach ($customers as $customer)
                        <option value="{{ $customer->id }}">{{ $customer->name }} — owes {{ number_format($customer->balance, 0) }}@if($customer->credit_limit > 0) / limit {{ number_format($customer->credit_limit, 0) }}@endif</option>
                    @endforeach
                </select>
                @if ($errors->any() || session('credit_limit_blocked'))
                    <label class="flex items-center gap-2 text-xs text-ink-muted {{ auth()->user()->can('sales.credit_override') ? '' : 'hidden' }}">
                        <input type="checkbox" name="override_credit_limit" value="1" class="rounded">
                        Override credit limit (only shown to people allowed to)
                    </label>
                @endif
            </div>
            <p class="text-xs text-ink-muted">Split tender (part cash, part M-Pesa): record one method and amount, then open <b>Collect payment</b> again for the rest with a different method — the balance above updates automatically.</p>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="pay-form" class="btn-primary">Record payment</button>
        </x-slot:footer>
    </x-modal>

    @if ($mergeCandidates->isNotEmpty())
        <x-modal id="merge" title="Merge bills into {{ $order->order_number }}">
            <form method="POST" action="{{ route('restaurant.pos.merge', $order) }}" id="merge-form" class="space-y-3">
                @csrf
                <p class="text-sm text-ink-muted">Tick the bills to add to this one. Their items move here and those orders are marked <b>Merged</b> — nothing is voided.</p>
                <div class="space-y-2 max-h-64 overflow-y-auto">
                    @foreach ($mergeCandidates as $candidate)
                        <label class="flex items-center gap-3 rounded-lg border border-border p-2.5 cursor-pointer">
                            <input type="checkbox" name="merge_ids[]" value="{{ $candidate->id }}" class="rounded border-border text-primary-500">
                            <span class="flex-1 min-w-0">
                                <span class="block text-sm font-semibold">{{ $candidate->order_number }} · {{ $candidate->table->name ?? $candidate->sale_type->label() }}</span>
                                <span class="block text-xs text-ink-muted">{{ $candidate->waiter->name ?? '—' }} · {{ $candidate->items->where('status', '!=', 'void')->count() }} items</span>
                            </span>
                            <span class="text-sm font-semibold">{{ number_format($candidate->subtotal, 0) }}</span>
                        </label>
                    @endforeach
                </div>
            </form>
            <x-slot:footer>
                <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                <button form="merge-form" class="btn-primary">Merge bills</button>
            </x-slot:footer>
        </x-modal>
    @endif

    @if ($mpesaReady && $order->status->value === 'billed')
        @can('sales.mpesa')
            <x-mpesa-modal type="restaurant" :id="$order->id" :balance="$order->balanceDue()" />
        @endcan
    @endif

    <x-modal id="split" title="Split this bill">
        <form method="POST" action="{{ route('restaurant.pos.splits.store', $order) }}" id="split-form" class="space-y-4">
            @csrf
            <div>
                <label class="field-label">How many ways?</label>
                <input type="number" name="count" min="2" max="20" value="2" class="input" required>
            </div>
            <div>
                <label class="field-label">Split method</label>
                <select name="mode" class="input">
                    <option value="by_item">By item (assign each item to a person)</option>
                    <option value="equal_share">Equal share (divide the total evenly)</option>
                </select>
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="split-form" class="btn-primary">Split bill</button>
        </x-slot:footer>
    </x-modal>
</div>

@if (session('auto_print_url'))
    @push('scripts')
        <script>window.open(@json(session('auto_print_url')), '_blank');</script>
    @endpush
@endif
@endsection