<x-layouts.portal title="Tables Grid" page-title="Floor Management">

<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">Table Map</h2>
        <p class="text-[10px] text-zinc-400 mt-0.5">Real-time occupancy and capacity management.</p>
    </div>
    <div class="flex space-x-3">
        <x-button variant="outline" :href="route('portal.table-areas.index')">
            Manage Areas
        </x-button>
        <x-button :href="route('portal.tables.create')">
            Add Table
        </x-button>
    </div>
</div>



<div class="space-y-12">
    @foreach($areas as $area)
        <div class="space-y-4">
            <div class="flex items-center space-x-4">
                <h3 class="text-[11px] font-bold uppercase tracking-widest text-zinc-600 bg-white px-3 py-1 border border-zinc-200 rounded-full shadow-sm">{{ $area->name }}</h3>
                <div class="flex-1 h-px bg-zinc-200"></div>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach($area->tables as $table)
                    <x-table-card :table="$table" />
                @endforeach

                <!-- Add Table Placeholder -->
                <a href="{{ route('portal.tables.create', ['area_id' => $area->id]) }}" class="border-2 border-dashed border-zinc-200 rounded-sm flex flex-col items-center justify-center p-4 hover:border-amber-500/50 hover:bg-amber-50 group transition-all min-h-[120px]">
                    <svg class="w-6 h-6 text-zinc-300 group-hover:text-amber-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    <span class="text-[9px] font-bold text-zinc-400 uppercase tracking-widest group-hover:text-amber-600">Add Table</span>
                </a>
            </div>
        </div>
    @endforeach

    @if($unassignedTables->count() > 0)
        <div class="space-y-4">
            <div class="flex items-center space-x-4">
                <h3 class="text-[11px] font-bold uppercase tracking-widest text-zinc-400 bg-white px-3 py-1 border border-zinc-200 rounded-full shadow-sm italic">Unassigned Tables</h3>
                <div class="flex-1 h-px bg-zinc-200"></div>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach($unassignedTables as $table)
                    <div class="bg-white border border-zinc-200 rounded-sm shadow-sm hover:shadow-md transition-all p-4 relative group">
                         <!-- Simplified view for unassigned -->
                         <div class="flex justify-between items-start mb-2">
                            <span class="text-sm font-bold text-zinc-900 tracking-tight">{{ $table->name }}</span>
                            <x-badge variant="zinc" :label="$table->status" />
                        </div>
                        <a href="{{ route('portal.tables.edit', $table) }}" class="text-[9px] text-amber-600 font-bold uppercase hover:underline mt-2 inline-block">Assign Area</a>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    @if($areas->count() == 0 && $unassignedTables->count() == 0)
        <div class="py-24 text-center bg-white border border-zinc-200 rounded-sm shadow-sm">
            <div class="opacity-20 mb-4">
                <svg class="w-16 h-16 mx-auto text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            </div>
            <h3 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">No Tables Found</h3>
            <p class="text-[10px] text-zinc-400 mt-2 max-w-xs mx-auto">Start by creating an Area (e.g. Indoor) and then add your tables to see them on the grid.</p>
            <div class="mt-8">
                <x-button :href="route('portal.table-areas.create')">
                    Create Your First Area
                </x-button>
            </div>
        </div>
    @endif
</div>

</x-layouts.portal>
