{{-- waiting-screen.blade.php --}}
<div wire:poll.5s class="waiting-screen-container" style="height: 100vh; display: flex; flex-direction: column;">
    <style>
        /* Reset & base */
        html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }

        /* Header group */
        .group-header {
            font-size: 4.2rem !important;
            font-weight: 900 !important;
            line-height: 1.0 !important;
            letter-spacing: -1px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        /* Queue item */
        .queue-item {
            margin-bottom: 0.3rem !important;
            padding: 0.4rem 0.6rem !important;
            line-height: 1.1;
            font-size: 3.6rem !important;
            font-weight: 900 !important;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        }

        .small-text-info {
            font-size: 1.6rem !important;
            font-weight: 600 !important;
        }

        /* Responsive: 5 kolom di desktop, 1 kolom di mobile */
        @media (min-width: 768px) {
            .custom-col-5 { flex: 0 0 20%; max-width: 20%; }
        }

        /* Empty state */
        .empty-state {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
            padding: 2rem;
        }

        .empty-title {
            font-size: 5rem !important;
            font-weight: 900 !important;
            color: #6c757d;
            margin-bottom: 2rem;
        }

        .video-container {
            max-width: 90vw;
            max-height: 70vh;
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3);
        }

        .responsive-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #000;
        }
    </style>

    {{-- ✅ Error Fallback --}}
    @if (isset($error))
        <div class="empty-state bg-dark text-white">
            <h1 class="display-1 mb-4">⚠️</h1>
            <p class="fs-2">{{ $error }}</p>
            <p class="mt-3">Menunggu pemulihan...</p>
        </div>
        @return
    @endif

    {{-- ✅ Kosong: Video atau fallback teks --}}
    @if ($groups->isEmpty())
        <div class="empty-state">
            <h1 class="empty-title">ANTRIAN KOSONG</h1>
            
            {{-- Coba muat video --}}
            <div class="video-container">
                <video 
                    class="responsive-video" 
                    autoplay muted loop playsinline
                    onerror="this.style.display='none'; document.getElementById('video-fallback').style.display='block'"
                >
                    <source src="{{ asset('videos/promosi.mp4') }}" type="video/mp4">
                </video>
                
                {{-- Fallback jika video gagal --}}
                <div id="video-fallback" class="d-none w-100 h-100 d-flex justify-content-center align-items-center bg-dark text-white">
                    <div class="p-4">
                        <i class="fas fa-video fa-3x mb-3"></i>
                        <p class="fs-4">Video promosi sedang tidak tersedia.</p>
                    </div>
                </div>
            </div>
        </div>

    {{-- ✅ Ada data: Tampilkan 5 kolom --}}
    @else
        <div class="row g-3 h-100 m-0">
            @foreach ($groups as $group)
                <div class="col-12 custom-col-5 d-flex p-2">
                    <div class="card w-100 border-0 shadow-lg h-100">
                        <div class="card-header bg-dark text-white text-center py-2">
                            <p class="mb-0 group-header">{{ e($group->name ?? '—') }}</p>
                        </div>
                        <div class="card-body p-2 flex-grow-1 overflow-hidden">
                            <ul class="list-group list-group-flush h-100 overflow-auto">
                                @forelse ($group->waitingLists as $waiting)
                                    @php
                                        $isCalled = $waiting->status === 'called';
                                        $bgClass = $isCalled ? 'bg-warning' : 'bg-danger';
                                        $textClass = $isCalled ? 'text-dark' : 'text-white';
                                    @endphp

                                    <li 
                                        id="queue-{{ $waiting->queue_number }}"
                                        class="list-group-item d-flex flex-column justify-content-center align-items-center mb-2 border-0 {{ $bgClass }} {{ $textClass }} queue-item rounded shadow-sm"
                                    >
                                        <span class="d-block">{{ e($waiting->guest_name ?? '—') }}</span>
                                        <span class="small-text-info mt-1">
                                            ({{ $waiting->guest_count ?? 0 }} Orang)
                                        </span>
                                        
                                        @if ($isCalled)
                                            <span class="badge bg-danger mt-2 fs-6 px-3 py-2 animate__animated animate__flash animate__infinite">
                                                🔔 SEDANG DIPANGGIL
                                            </span>
                                        @endif
                                    </li>
                                @empty
                                    <li class="list-group-item text-center py-4 text-muted">
                                        Tidak ada antrian
                                    </li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

@script
<script>
    document.addEventListener('livewire:init', () => {
        // Respons terhadap event dari OperatorList (lebih efisien daripada polling terus)
        Livewire.on('queue-called', (event) => {
            const el = document.getElementById(`queue-${event.queueNumber}`);
            if (el) {
                el.classList.add('animate__animated', 'animate__tada');
                setTimeout(() => el.classList.remove('animate__tada'), 1000);
            }
        });

        Livewire.on('queue-finished', () => {
            // Tidak perlu reload — polling otomatis refresh dalam 5 detik
        });
    });
</script>
@endscript