<x-wireui:card class="border border-gray-200 w-full">
    <x-slot name="title">
        <div class="flex items-center gap-2">
            <x-select-dropdown
                :options="App\Models\Branch::pluck('name', 'id')"
                fieldName="selectedBranchId"
                :modelId="0"
                :selected="$selectedBranchId"
            />
            <span class="text-lg font-semibold whitespace-nowrap">
                {{ $selectedBranchId ? " - 包廂設定 ($external_ip)" : '' }}
            </span>
        </div>
    </x-slot>

    <div x-data="{ floor: '{{ $floors[0] ?? 1 }}', type: 'all' }">
        {{-- 樓層 Tab --}}
        <div class="flex gap-2 mb-2">
            @foreach($floors as $fl)
                <button 
                    class="px-3 py-1 rounded border"
                    :class="floor === '{{ $fl }}' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700'"
                    x-on:click="floor = '{{ $fl }}'"
                >
                    {{ $fl === 'all' ? '全部' : $fl . '樓' }}
                </button>
            @endforeach
        </div>

        {{-- 類別 Tab --}}
        <div class="flex gap-2 mb-4">
            @foreach(['all' => '全部', 'pc' => 'PC', 'svr' => 'SVR'] as $value => $label)
                <button 
                    class="px-3 py-1 rounded border"
                    :class="type === '{{ $value }}' ? 'bg-green-500 text-white' : 'bg-white text-gray-700'"
                    x-on:click="type = '{{ $value }}'"
                >
                    {{ $label }}
                </button>
            @endforeach
        </div>

        {{-- 房間卡片列表 --}}
        <div wire:poll.5s>
            <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @forelse($rooms as $room)
                    <div x-show="(floor == 'all' || floor == '{{ $room->floor }}') && (type == 'all' || type == '{{ $room->type }}')" x-transition class="transition-all duration-300">
                        @if($room->type->value === \App\Enums\RoomType::SVR->value)
                            <x-room-card-svr :room="$room" />
                        @else
                            <x-room-card :room="$room" />
                        @endif
                    </div>
                @empty
                    <div class="col-span-full text-center text-gray-500">尚無包廂資料</div>
                @endforelse
            </div>
        </div>
    </div>
    <x-wireui:notifications/>
    <livewire:modals.room-detail-modal />
</x-wireui:card>