@extends('admin.layouts.app')
@section('title', 'Restaurant Tables')
@section('content')
<div class="card" style="margin-bottom:20px;">
    <h3 style="margin-bottom:14px;">Add New Table</h3>
    <form method="POST" action="{{ route('admin.tables.store') }}" class="grid-4" style="align-items:end;">
        @csrf
        <div class="field"><label>Table Number</label><input type="text" name="table_number" required></div>
        <div class="field"><label>Capacity</label><input type="number" name="capacity" required></div>
        <div class="field"><label>Location</label><input type="text" name="location" placeholder="Indoor / Terrace"></div>
        <div class="field"><label>Status</label>
            <select name="status">
                <option value="available">Available</option>
                <option value="occupied">Occupied</option>
                <option value="reserved">Reserved</option>
                <option value="disabled">Disabled</option>
            </select>
        </div>
        <button class="btn btn-primary" style="height:44px;" type="submit">Add Table</button>
    </form>
</div>

<div class="grid-4">
    @foreach($tables as $t)
        @php
            $colors = ['available' => '#1F9D55', 'occupied' => '#E53E3E', 'reserved' => '#F5B301', 'disabled' => '#999'];
        @endphp
        <div class="card hover-lift" style="text-align:center; border-top: 4px solid {{ $colors[$t->status] }};">
            <div style="width:70px;height:70px;margin:0 auto 12px;border-radius:16px;background:{{ $colors[$t->status] }}22;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:{{ $colors[$t->status] }};transform:perspective(200px) rotateX(8deg);">
                <i class="fa-solid fa-chair"></i>
            </div>
            <h3>{{ $t->table_number }}</h3>
            <p style="opacity:0.6; font-size:0.85rem;">{{ $t->capacity }} seats · {{ $t->location }}</p>
            <form method="POST" action="{{ route('admin.tables.status', $t) }}" style="margin-top:10px;">
                @csrf @method('PATCH')
                <select name="status" onchange="this.form.submit()" style="text-align:center;">
                    <option value="available" {{ $t->status=='available'?'selected':'' }}>Available</option>
                    <option value="occupied" {{ $t->status=='occupied'?'selected':'' }}>Occupied</option>
                    <option value="reserved" {{ $t->status=='reserved'?'selected':'' }}>Reserved</option>
                    <option value="disabled" {{ $t->status=='disabled'?'selected':'' }}>Disabled</option>
                </select>
            </form>
            <form method="POST" action="{{ route('admin.tables.destroy', $t) }}" onsubmit="return confirm('Delete table?');" style="margin-top:8px;">
                @csrf @method('DELETE')
                <button class="btn btn-danger btn-sm" style="width:100%;">Delete</button>
            </form>
        </div>
    @endforeach
</div>
@endsection