<x-layouts.portal title="Table Areas" page-title="Floor Areas">

<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">Zoning</h2>
        <p class="text-[10px] text-zinc-400 mt-0.5">Organize your restaurant into sections like Indoor, Patio, or VIP.</p>
    </div>
    <x-button :href="route('portal.table-areas.create')">
        New Area
    </x-button>
</div>



<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    @forelse($areas as $area)
        <x-card :title="$area->name" class="relative group">
            <div class="flex items-center justify-between mt-2">
                <div>
                    <p class="text-2xl font-bold text-zinc-900">{{ $area->tables_count }}</p>
                    <p class="text-[9px] text-zinc-400 uppercase font-bold tracking-tighter">Total Tables</p>
                </div>
                <x-badge :variant="$area->is_active ? 'success' : 'zinc'" :label="$area->is_active ? 'Active' : 'Hidden'" />
            </div>

            <div class="mt-6 flex space-x-2">
                <x-button variant="outline" :href="route('portal.table-areas.edit', $area)" class="flex-1">
                    Edit Area
                </x-button>
                <form action="{{ route('portal.table-areas.destroy', $area) }}" method="POST" class="inline" onsubmit="return confirm('Delete this area?')">
                    @csrf
                    @method('DELETE')
                    <x-button type="submit" variant="ghost" class="px-2!">
                        <svg class="w-4 h-4 text-zinc-400 hover:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                    </x-button>
                </form>
            </div>
        </x-card>
    @empty
        <div class="col-span-full py-12 bg-white border border-dashed border-zinc-300 rounded-sm text-center">
            <p class="text-xs text-zinc-400 italic">No areas defined. Start by creating your first zone.</p>
        </div>
    @endforelse
</div>

</x-layouts.portal>
