@extends('layouts.app')
@section('title', 'Bar POS')

@section('content')
<div class="grid lg:grid-cols-3 gap-6" x-data="{ ...tabs('{{ $menu->keys()->first() }}'), ...modal(), activeTabId: {{ $tabs->first()->id ?? 'null' }}, compMode: false, tabStatuses: {{ Illuminate\Support\Js::from($tabs->pluck('status', 'id')) }} }">

    <div class="lg:col-span-2 space-y-4">
        <div class="flex items-center justify-between flex-wrap gap-2">
            <div>
                <h1 class="text-xl font-bold">Bar POS</h1>
                <p class="text-sm text-ink-muted">Select an open tab on the right, then tap items to add them.</p>
            </div>
            <div class="flex items-center gap-2">
                @can('sales.complimentary')
                <label class="flex items-center gap-1.5 text-xs font-medium" :class="compMode && 'text-accent-600'">
                    <input type="checkbox" x-model="compMode" class="rounded border-border text-accent-500">
                    Next item is complimentary
                </label>
                @endcan
                <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-open-tab')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Open tab</button>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            @foreach (['active' => 'Open & billed', 'closed' => 'Closed (last 7 days)', 'void' => 'Voided'] as $key => $label)
                <a href="{{ route('bar.pos.index', ['status' => $key]) }}" class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $status === $key ? 'bg-primary-500 text-white' : 'bg-ink/5 text-ink-muted hover:bg-ink/10' }}">{{ $label }}</a>
            @endforeach
            <form method="GET" class="ml-auto flex gap-2">
                <input type="hidden" name="status" value="{{ $status }}">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search tab #…" class="input !py-1.5 !text-xs w-40">
                <button class="btn-secondary btn-sm">Search</button>
            </form>
        </div>

        <div class="card">
            <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)
                        <button
                            type="button"
                            class="card card-pad !p-3 w-full text-left hover:border-primary-300 hover:shadow-pop transition disabled:opacity-40 disabled:cursor-not-allowed"
                            :disabled="!activeTabId || tabStatuses[activeTabId] !== 'open'"
                            x-on:click="if(activeTabId && tabStatuses[activeTabId] === 'open') { const f = document.getElementById('add-item-form-' + activeTabId); f.querySelector('[name=product_id]').value = {{ $product->id }}; f.querySelector('[name=is_complimentary]').value = compMode ? 1 : 0; f.submit(); compMode = false; }"
                        >
                            <p class="text-sm font-semibold leading-snug">{{ $product->name }}</p>
                            <p class="text-xs text-ink-muted mt-1">{{ config('pos.company.currency_symbol') }} {{ number_format($product->selling_price, 0) }}</p>
                        </button>
                    @endforeach
                </div>
            @endforeach
            <template x-if="!activeTabId">
                <p class="text-xs text-center text-ink-muted pb-4">Select or open a tab on the right before adding items.</p>
            </template>
            <template x-if="activeTabId && tabStatuses[activeTabId] !== 'open'">
                <p class="text-xs text-center text-ink-muted pb-4">This tab is <span x-text="tabStatuses[activeTabId]"></span> — items can't be added anymore.</p>
            </template>
        </div>
    </div>

    <div class="space-y-4">
        <div class="card card-pad">
            <h2 class="font-display font-bold text-sm mb-3">{{ ['active' => 'Open tabs', 'closed' => 'Closed tabs', 'void' => 'Voided tabs'][$status] ?? 'Tabs' }}</h2>
            <div class="space-y-2">
                @forelse ($tabs as $tab)
                    <button
                        type="button"
                        class="w-full text-left flex items-center justify-between p-3 rounded-lg border transition"
                        :class="activeTabId === {{ $tab->id }} ? 'border-primary-400 bg-primary-50' : 'border-border'"
                        x-on:click="activeTabId = {{ $tab->id }}"
                    >
                        <div>
                            <p class="text-sm font-semibold">{{ $tab->tab_number }}</p>
                            <p class="text-xs text-ink-muted">{{ $tab->customer_name ?? 'Walk-in' }} · {{ $tab->bartender->name ?? '—' }}</p>
                        </div>
                        <p class="text-sm font-semibold">{{ number_format($tab->grand_total ?: $tab->subtotal, 0) }}</p>
                    </button>

                    <form :id="'add-item-form-{{ $tab->id }}'" id="add-item-form-{{ $tab->id }}" method="POST" action="{{ route('bar.tabs.items.store', $tab) }}" class="hidden" data-offline-queue="1" data-offline-label="Drink on {{ $tab->tab_number }}">
                        @csrf
                        <input type="hidden" name="product_id" value="">
                        <input type="hidden" name="quantity" value="1">
                        <input type="hidden" name="is_complimentary" value="0">
                    </form>
                @empty
                    <p class="text-sm text-ink-muted text-center py-6">{{ $status === 'active' ? 'No open tabs. Start one to begin selling.' : 'No tabs match this filter.' }}</p>
                @endforelse
            </div>
        </div>

        @foreach ($tabs as $tab)
            <div x-show="activeTabId === {{ $tab->id }}" x-cloak class="card card-pad space-y-3">
                @php $isEditable = $tab->status === 'open'; @endphp
                <div class="flex items-center justify-between">
                    <h3 class="font-display font-bold text-sm">{{ $tab->tab_number }}</h3>
                    <x-badge :color="['open' => 'emerald', 'closed' => 'slate', 'void' => 'rose'][$tab->status] ?? 'amber'">{{ ucfirst($tab->status) }}</x-badge>
                </div>

                @unless ($isEditable)
                    <div class="flex items-center gap-2 text-xs text-ink-muted bg-ink/5 rounded-lg px-3 py-2">
                        <i data-lucide="lock" class="w-3.5 h-3.5 shrink-0"></i>
                        This tab is {{ $tab->status }} and can't be changed. You can still print a copy below.
                    </div>
                @endunless

                <div class="space-y-1.5 max-h-64 overflow-y-auto">
                    @forelse ($tab->items as $item)
                        <div class="flex items-center justify-between text-sm {{ $item->status === 'void' ? 'opacity-40' : '' }}">
                            <span>{{ $item->quantity }}× {{ $item->product->name }}@if($item->is_complimentary) <span class="text-accent-600 text-xs">(comp)</span>@endif</span>
                            <div class="flex items-center gap-2">
                                <span>{{ number_format($item->line_total, 0) }}</span>
                                @if ($item->status !== 'void' && $isEditable && auth()->user()->can('sales.void_item'))
                                    <form method="POST" action="{{ route('bar.tabs.items.void', [$tab, $item]) }}" onsubmit="return confirm('Void this item?')">
                                        @csrf
                                        <input type="hidden" name="reason" value="Bartender void">
                                        <button class="text-danger text-[11px] hover:underline">Void</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                        @if ($tab->splits->isNotEmpty() && $tab->splits->first()->mode === 'by_item' && $item->status !== 'void' && $isEditable)
                            <form method="POST" action="{{ route('bar.tabs.splits.assign', [$tab, $item->bar_tab_split_id ?: $tab->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 ($tab->splits as $s)
                                        <option value="{{ $s->id }}" @selected($item->bar_tab_split_id === $s->id)>{{ $s->label }}</option>
                                    @endforeach
                                </select>
                            </form>
                        @endif
                    @empty
                        <p class="text-xs text-ink-muted">No items yet.</p>
                    @endforelse
                </div>

                <div class="border-t border-border pt-2 text-sm space-y-1">
                    <div class="flex justify-between"><span class="text-ink-muted">Subtotal</span><span>{{ number_format($tab->subtotal, 2) }}</span></div>
                    @if ($tab->grand_total > 0)
                        <div class="flex justify-between"><span class="text-ink-muted">VAT</span><span>{{ number_format($tab->tax_total, 2) }}</span></div>
                        <div class="flex justify-between"><span class="text-ink-muted">Levy</span><span>{{ number_format($tab->levy_total, 2) }}</span></div>
                        <div class="flex justify-between font-bold border-t border-border pt-1"><span>Total</span><span>{{ number_format($tab->grand_total, 2) }}</span></div>
                        <div class="flex justify-between text-xs {{ $tab->balanceDue() > 0 ? 'text-danger' : 'text-success' }}"><span>Balance</span><span>{{ number_format($tab->balanceDue(), 2) }}</span></div>
                    @endif
                </div>

                @if ($isEditable)
                    <div class="grid grid-cols-2 gap-2">
                        <form method="POST" action="{{ route('bar.tabs.bill', $tab) }}">
                            @csrf
                            <button class="btn-secondary btn-sm w-full">Bill tab</button>
                        </form>
                        @if ($tab->grand_total > 0)
                            <button type="button" class="btn-primary btn-sm w-full" x-on:click="$dispatch('open-modal-pay-tab-{{ $tab->id }}')">Pay</button>
                        @endif
                    </div>

                    @if ($tab->grand_total > 0 && $tab->splits->isEmpty() && auth()->user()->can('sales.split_bill'))
                        <button type="button" class="btn-secondary btn-sm w-full" x-on:click="$dispatch('open-modal-split-{{ $tab->id }}')"><i data-lucide="split" class="w-3.5 h-3.5"></i> Split bill</button>
                    @endif
                @endif

                <a href="{{ route('bar.tabs.print.receipt', $tab) }}" target="_blank" class="btn-secondary btn-sm w-full"><i data-lucide="printer" class="w-3.5 h-3.5"></i> {{ $tab->isFullyPaid() ? 'Print receipt' : 'Print bill' }}</a>

                @if ($tab->splits->isNotEmpty())
                    <div class="border-t border-border pt-3 space-y-3">
                        <div class="flex items-center justify-between">
                            <h4 class="font-display font-bold text-xs">Split bill — {{ $tab->splits->count() }} ways</h4>
                            @if ($isEditable)
                                <form method="POST" action="{{ route('bar.tabs.splits.destroy', $tab) }}" onsubmit="return confirm('Cancel split billing? This makes it one tab again.')">
                                    @csrf @method('DELETE')
                                    <button class="text-xs text-danger hover:underline">Cancel split</button>
                                </form>
                            @endif
                        </div>
                        <div class="space-y-2">
                            @foreach ($tab->splits as $split)
                                <div class="rounded-lg border border-border p-2.5 space-y-1.5">
                                    <div class="flex items-center justify-between">
                                        <span class="font-semibold text-xs">{{ $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-0.5">
                                            @forelse ($split->items as $item)
                                                <div class="text-[11px] flex justify-between"><span>{{ $item->quantity }}× {{ $item->product->name }}</span><span>{{ number_format($item->line_total, 0) }}</span></div>
                                            @empty
                                                <p class="text-[11px] text-ink-faint">No items assigned yet</p>
                                            @endforelse
                                        </div>
                                    @endif
                                    <div class="text-xs font-bold flex justify-between border-t border-border pt-1">
                                        <span>Total</span><span>{{ number_format($split->grand_total, 2) }}</span>
                                    </div>
                                    @if ($split->status !== 'paid' && $isEditable)
                                        <button type="button" class="btn-primary btn-sm w-full !text-[11px]" x-on:click="$dispatch('open-modal-pay-split-{{ $split->id }}')">Pay {{ number_format($split->balanceDue(), 2) }}</button>
                                    @endif
                                    <a href="{{ route('bar.tabs.print.receipt', ['tab' => $tab, 'split' => $split->id]) }}" target="_blank" class="btn-secondary btn-sm w-full !text-[11px]">{{ $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('bar.tabs.splits.pay', [$tab, $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 ($tab->splits->first()->mode === 'by_item')
                            <p class="text-[11px] text-ink-muted">Assign each item to a split using the dropdown next to it.</p>
                        @endif
                    </div>
                @endif
            </div>

            <x-modal id="split-{{ $tab->id }}" title="Split {{ $tab->tab_number }}">
                <form method="POST" action="{{ route('bar.tabs.splits.store', $tab) }}" id="split-{{ $tab->id }}-form" class="space-y-4">
                    @csrf
                    <div>
                        <label class="field-label">Number of ways</label>
                        <input type="number" name="count" value="2" min="2" max="20" 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 drink 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-{{ $tab->id }}-form" class="btn-primary">Split bill</button>
                </x-slot:footer>
            </x-modal>

            <x-modal id="pay-tab-{{ $tab->id }}" title="Pay {{ $tab->tab_number }}">
                <form method="POST" action="{{ route('bar.tabs.pay', $tab) }}" id="pay-tab-{{ $tab->id }}-form" class="space-y-4" x-data="{ methodId: '' }">
                    @csrf
                    <p class="text-sm">Balance due: <span class="font-bold">{{ number_format($tab->balanceDue(), 2) }}</span></p>
                    <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="{{ $tab->balanceDue() }}" class="input" required></div>
                    <div><label class="field-label">Reference (optional)</label><input type="text" name="reference_number" class="input"></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 (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>
                </form>
                <x-slot:footer>
                    <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                    <button form="pay-tab-{{ $tab->id }}-form" class="btn-primary">Record payment</button>
                </x-slot:footer>
            </x-modal>
        @endforeach
    </div>

    <x-modal id="open-tab" title="Open a new bar tab">
        <form method="POST" action="{{ route('bar.tabs.open') }}" id="open-tab-form" class="space-y-4">
            @csrf
            <div>
                <label class="field-label">Customer name (optional)</label>
                <input type="text" name="customer_name" class="input" placeholder="Walk-in">
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="open-tab-form" class="btn-primary">Open tab</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