@extends('layouts.app')
@section('title', 'Restaurant · Tables')

@section('content')
<div class="space-y-6" x-data="{ ...modal(), saleType: 'dine_in' }">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Restaurant Floor</h1>
            <p class="text-sm text-ink-muted">Tap a free table to open an order, or a occupied table to resume it.</p>
        </div>
        <div class="flex items-center gap-2">
            @if (auth()->user()->can('tables.manage'))
                <a href="{{ route('restaurant.tables.manage') }}" class="btn-secondary btn-sm"><i data-lucide="layout-grid" class="w-3.5 h-3.5"></i> Manage tables & floors</a>
            @endif
            <button class="btn-secondary btn-sm" x-on:click="$dispatch('open-modal-quick-sale')">
                <i data-lucide="zap" class="w-3.5 h-3.5"></i> Quick sale
            </button>
            <button class="btn-secondary btn-sm" x-on:click="$dispatch('open-modal-new-takeaway')">
                <i data-lucide="shopping-bag" class="w-3.5 h-3.5"></i> Takeaway / Delivery
            </button>
        </div>
    </div>

    {{-- Legend --}}
    <div class="flex flex-wrap items-center gap-4 text-xs text-ink-muted">
        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-success"></span> Free</span>
        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-danger"></span> Occupied</span>
        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-accent-500"></span> Reserved</span>
        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span> Merged</span>
    </div>

    @forelse ($tables as $zone => $zoneTables)
        <div>
            <h2 class="text-sm font-semibold text-ink-muted mb-3">{{ $zone ?: 'Main Hall' }}</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
                @foreach ($zoneTables as $table)
                    @php
                        $statusColor = match($table->status->value ?? $table->status) {
                            'occupied' => 'border-danger/40 bg-danger/5',
                            'reserved' => 'border-accent-500/40 bg-accent-50',
                            'merged' => 'border-purple-400/40 bg-purple-50',
                            default => 'border-success/30 bg-success/5',
                        };
                        $dot = match($table->status->value ?? $table->status) {
                            'occupied' => 'bg-danger', 'reserved' => 'bg-accent-500', 'merged' => 'bg-purple-500', default => 'bg-success',
                        };
                    @endphp
                    <a href="{{ $table->currentOrder ? route('restaurant.pos.show', $table->currentOrder) : '#' }}"
                       x-on:click="@if(!$table->currentOrder) $event.preventDefault(); $dispatch('open-modal-open-order', { tableId: {{ $table->id }} }) @endif"
                       class="card card-pad !p-4 border-2 {{ $statusColor }} hover:shadow-pop transition cursor-pointer">
                        <div class="flex items-center justify-between mb-3">
                            <span class="w-2.5 h-2.5 rounded-full {{ $dot }}"></span>
                            <span class="text-xs text-ink-faint">{{ $table->capacity }} seats</span>
                        </div>
                        <p class="font-display font-bold text-lg">{{ $table->name }}</p>
                        @if ($table->currentOrder)
                            <p class="text-xs text-ink-muted mt-1">{{ $table->currentOrder->order_number }}</p>
                            <p class="text-sm font-semibold text-primary-600 mt-1.5">{{ config('pos.company.currency_symbol') }} {{ number_format($table->currentOrder->grand_total ?: $table->currentOrder->subtotal, 0) }}</p>
                        @else
                            <p class="text-xs text-ink-faint mt-1">Tap to seat guests</p>
                        @endif
                    </a>
                @endforeach
            </div>
        </div>
    @empty
        <div class="card card-pad text-center py-12">
            <i data-lucide="table-2" class="w-8 h-8 mx-auto text-ink-faint mb-2"></i>
            <p class="text-sm text-ink-muted">No tables configured yet.</p>
            @if (auth()->user()->can('tables.manage'))
                <a href="{{ route('restaurant.tables.manage') }}" class="btn-primary btn-sm mt-3 inline-flex">Add your first table</a>
            @endif
        </div>
    @endforelse

    {{-- Open-order modal --}}
    <div
        x-data="{ open: false, tableId: null }"
        x-on:open-modal-open-order.window="open = true; tableId = $event.detail.tableId"
        x-on:keydown.escape.window="open = false"
        x-show="open" x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
    >
        <div x-show="open" x-transition.opacity class="absolute inset-0 bg-ink/50" x-on:click="open = false"></div>
        <div x-show="open" x-transition class="relative card w-full max-w-sm">
            <div class="flex items-center justify-between px-5 py-4 border-b border-border">
                <h3 class="font-display font-bold text-base">Open new order</h3>
                <button x-on:click="open = false" class="text-ink-faint hover:text-ink"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <form method="POST" action="{{ route('restaurant.orders.create') }}" class="p-5 space-y-4">
                @csrf
                <input type="hidden" name="table_id" x-bind:value="tableId">
                <div>
                    <label class="field-label">Sale type</label>
                    <select name="sale_type" class="input">
                        <option value="dine_in">Dine-in</option>
                        <option value="takeaway">Takeaway</option>
                        <option value="delivery">Delivery</option>
                    </select>
                </div>
                <div>
                    <label class="field-label">Number of covers</label>
                    <input type="number" name="covers" value="2" min="1" class="input">
                </div>
                <button type="submit" class="btn-primary w-full">Open order</button>
            </form>
        </div>
    </div>

    {{-- Quick sale modal — a walk-in sale with no table and no waiting for a dine-in slot --}}
    <div x-data="{ open: false }" x-on:open-modal-quick-sale.window="open = true" x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div x-show="open" x-transition.opacity class="absolute inset-0 bg-ink/50" x-on:click="open = false"></div>
        <div x-show="open" x-transition class="relative card w-full max-w-sm">
            <div class="flex items-center justify-between px-5 py-4 border-b border-border">
                <h3 class="font-display font-bold text-base">Quick sale</h3>
                <button x-on:click="open = false" class="text-ink-faint hover:text-ink"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <form method="POST" action="{{ route('restaurant.orders.create') }}" class="p-5 space-y-4">
                @csrf
                <input type="hidden" name="sale_type" value="counter">
                <p class="text-sm text-ink-muted">For a walk-in sale that doesn't need a table — ring it up and bill it straight away.</p>
                <button type="submit" class="btn-primary w-full">Start quick sale</button>
            </form>
        </div>
    </div>

    {{-- Takeaway modal (no table) --}}
    <div x-data="{ open: false }" x-on:open-modal-new-takeaway.window="open = true" x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div x-show="open" x-transition.opacity class="absolute inset-0 bg-ink/50" x-on:click="open = false"></div>
        <div x-show="open" x-transition class="relative card w-full max-w-sm">
            <div class="flex items-center justify-between px-5 py-4 border-b border-border">
                <h3 class="font-display font-bold text-base">Takeaway / Delivery order</h3>
                <button x-on:click="open = false" class="text-ink-faint hover:text-ink"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <form method="POST" action="{{ route('restaurant.orders.create') }}" class="p-5 space-y-4">
                @csrf
                <div>
                    <label class="field-label">Sale type</label>
                    <select name="sale_type" class="input">
                        <option value="takeaway">Takeaway</option>
                        <option value="delivery">Delivery</option>
                    </select>
                </div>
                <button type="submit" class="btn-primary w-full">Start order</button>
            </form>
        </div>
    </div>
</div>
@endsection