{{-- 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;
        }

        .waiting-screen-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            /* ← tambahkan ini agar position:absolute bekerja relatif ke sini */
        }

        /* Header group */
        .group-header {
            font-size: 2.5rem !important;
            font-weight: 700 !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: 2.5rem !important;
            font-weight: 700 !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 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* tetap flex-start */
            text-align: center;
            padding: 0.5rem 1rem 2rem;
            /* ↑ Hanya 8px dari atas */
            margin: 0;
            box-sizing: border-box;
        }

        .empty-title {
            font-size: 5rem !important;
            font-weight: 900 !important;
            color: #6c757d;
            margin-bottom: 1rem;
            /* 👈 Kurangi jarak ke video */
        }

        .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);
            margin-top: 1rem;
            /* 👈 Jaga jarak dari teks */
        }

        .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', () => {
        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', () => { });
    });
</script>
@endscript