KTVCentral/resources/views/livewire/grids/room-grid.blade.php

<x-card title="{{ $branchName }} - 包廂設定" shadow="none">
    {{-- 全域控制按鈕 --}}
    <div class="flex gap-4 mb-6">
        <x-button 
            label="🔥 火災" 
            class="bg-red-600 text-white hover:bg-red-700"
            wire:click="fireAlarm" 
        />
        <x-button 
            label="⏻ 關台" 
            class="bg-gray-800 text-white hover:bg-black"
            wire:click="shutdownAll" 
        />
        <x-button 
            label="🔇 靜音" 
            class="bg-yellow-600 text-white hover:bg-yellow-700"
            wire:click="muteAll" 
        />
        <x-button 
            label="⏸ 暫停" 
            class="bg-blue-600 text-white hover:bg-blue-700"
            wire:click="pauseAll" 
        />
    </div>
    <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-notifications/>
    <livewire:modals.room-detail-modal />
</x-card>