<x-layouts.portal title="Edit Table" page-title="Manage Tables">

<div class="max-w-xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('portal.tables.index') }}" class="flex items-center text-[10px] font-bold text-zinc-500 uppercase tracking-widest hover:text-amber-600 transition-colors">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            Back to Grid
        </a>
    </div>

    <x-card :title="'Update Table: ' . $table->name">
        <form action="{{ route('portal.tables.update', $table) }}" method="POST" class="space-y-4">
            @csrf
            @method('PATCH')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <x-input name="name" label="Table Name/Number" :value="old('name', $table->name)" required autofocus />
                <x-input type="number" name="capacity" label="Seating Capacity" :value="old('capacity', $table->capacity)" min="1" required />
            </div>

            <x-select name="area_id" label="Assigned Area">
                <option value="">-- No Area (Unassigned) --</option>
                @foreach($areas as $area)
                    <option value="{{ $area->id }}" {{ old('area_id', $table->area_id) == $area->id ? 'selected' : '' }}>{{ $area->name }}</option>
                @endforeach
            </x-select>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <x-select name="status" label="Current Status">
                    <option value="available" {{ $table->status == 'available' ? 'selected' : '' }}>Available</option>
                    <option value="occupied" {{ $table->status == 'occupied' ? 'selected' : '' }}>Occupied</option>
                    <option value="reserved" {{ $table->status == 'reserved' ? 'selected' : '' }}>Reserved</option>
                    <option value="cleaning" {{ $table->status == 'cleaning' ? 'selected' : '' }}>Cleaning</option>
                </x-select>
                <x-select name="is_active" label="Status">
                    <option value="1" {{ $table->is_active ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ !$table->is_active ? 'selected' : '' }}>Inactive</option>
                </x-select>
            </div>

            <div class="pt-4 flex justify-end">
                <x-button type="submit">
                    Save Changes
                </x-button>
            </div>
        </form>
    </x-card>

    <div class="mt-4 flex justify-center">
        <form action="{{ route('portal.tables.destroy', $table) }}" method="POST" onsubmit="return confirm('Delete this table?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="text-[10px] font-bold text-red-400 uppercase tracking-widest hover:text-red-600 transition-colors">
                Delete This Table Permanentely
            </button>
        </form>
    </div>
</div>

</x-layouts.portal>
