@extends('layouts.app')

@section('title', 'Panggil Antrian')
@section('header-right')
    <div class="flex items-center gap-2">
        <span>{{ now()->format('D, d M Y') }}</span>
        <form method="POST" action="{{ route('admin.logout') }}">
            @csrf
            <button type="submit" class="rounded-field border border-white/30 px-4 py-1.5 font-medium text-white transition hover:bg-white/10">
                Logout
            </button>
        </form>
    </div>
@endsection

@section('content')
<main class="mx-auto max-w-7xl px-4 py-8">
    <div class="flex flex-wrap items-end justify-between gap-3">
        <div>
            <h2 class="text-2xl font-semibold tracking-tight text-navy">Panggil Antrian</h2>
            <p class="mt-1 text-sm text-ink-soft">
                Buka <a href="{{ route('queue.display') }}" target="_blank" class="font-medium text-teal underline">layar display</a> di monitor kedua agar pengantri dapat melihat nomor yang dipanggil.
            </p>
        </div>
        <p class="text-xs text-ink-soft">Auto-refresh tiap 2 detik · Panggil = geser nomor ditampilkan</p>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        @foreach (['umum', 'asrama', 'prioritas'] as $s)
            @php
                $svc = [
                    'umum'      => ['badgeBg' => 'bg-info-bg', 'accentText' => 'text-teal', 'letter' => 'U', 'label' => 'Layanan Umum'],
                    'asrama'    => ['badgeBg' => 'bg-warn-bg', 'accentText' => 'text-warn', 'letter' => 'A', 'label' => 'Layanan Sarana dan Prasarana'],
                    'prioritas' => ['badgeBg' => 'bg-rose-50', 'accentText' => 'text-rose-600', 'letter' => 'P', 'label' => 'Prioritas'],
                ][$s];
            @endphp
            <section class="rounded-card bg-white p-6 shadow-sm ring-1 ring-line">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <span class="flex h-11 w-11 items-center justify-center rounded-full font-mono text-xl font-bold {{ $svc['badgeBg'] }} {{ $svc['accentText'] }}">{{ $svc['letter'] }}</span>
                        <div>
                            <h3 class="text-lg font-semibold text-navy">{{ $svc['label'] }}</h3>
                            <p class="text-xs text-ink-soft">Nomor terakhir diterbitkan: <span id="issued-{{ $s }}" class="font-mono font-semibold text-navy">—</span></p>
                        </div>
                    </div>
                </div>

                <div id="cur-{{ $s }}" class="mt-5 rounded-field bg-paper p-5 ring-1 ring-line">
                    <p class="text-xs font-medium uppercase tracking-wide text-ink-soft">Sedang Dilayani</p>
                    <div class="mt-2 flex flex-wrap items-center gap-4">
                        <p class="font-mono text-5xl font-bold tabular-nums text-navy" id="cur-no-{{ $s }}">—</p>
                        <div class="min-w-0">
                            <p class="truncate text-lg font-semibold text-navy" id="cur-name-{{ $s }}">Belum ada panggilan</p>
                            <p class="text-sm text-ink-soft" id="cur-inst-{{ $s }}"></p>
                            <p class="mt-1 line-clamp-2 text-sm text-ink-soft" id="cur-purpose-{{ $s }}"></p>
                            <p class="mt-1 text-xs text-teal" id="cur-guest-{{ $s }}"></p>
                            @if ($s === 'prioritas')
                                <a id="edit-{{ $s }}" href="#" target="_blank"
                                   class="mt-2 hidden inline-block rounded-field bg-rose-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-rose-600">Isi Data Tamu</a>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-3">
                    <button type="button" data-call="{{ $s }}" data-action="previous"
                            class="btn-ghost px-4 py-5 text-lg leading-tight">← Kembali</button>
                    <button type="button" data-call="{{ $s }}" data-action="next"
                            class="btn-primary px-4 py-5 text-lg leading-tight">Panggil Berikutnya →</button>
                </div>

                <div class="mt-4">
                    <div class="flex items-center justify-between">
                        <p class="text-xs font-medium uppercase tracking-wide text-ink-soft">Antrean</p>
                        <p class="text-xs text-ink-soft">Berikutnya: <span id="next-no-{{ $s }}" class="font-mono font-semibold text-navy">—</span></p>
                    </div>
                    <ul id="queue-{{ $s }}" class="mt-2 max-h-72 overflow-y-auto rounded-field bg-paper-2/50 p-3 ring-1 ring-line">
                        <li class="py-1.5 text-sm text-ink-soft">Memuat…</li>
                    </ul>
                </div>
            </section>
        @endforeach
    </div>
</main>
@endsection

@push('scripts')
    @vite(['resources/js/resepsionis.js'])
@endpush