<!DOCTYPE html>
<html lang="en" class="h-full overflow-hidden bg-slate-50 font-sans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#f8fafc">
    <title>{{ $screen->name }} · Care Display</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body
    class="qms-display qms-display__grid-bg overflow-hidden bg-slate-50 font-sans text-slate-900"
    x-data="displayBoard(@js([
        'dataUrl' => $dataUrl,
        'playedUrl' => $playedUrl,
        'pollMs' => $pollMs,
        'csrf' => csrf_token(),
        'initial' => $initialPayload,
    ]))"
    x-init="init()"
>
    {{-- Voice unlock — required by browsers before TTS --}}
    <div
        x-cloak
        x-show="!speechReady"
        @click="unlockSpeech()"
        @keydown.enter.prevent="unlockSpeech()"
        tabindex="0"
        class="qms-display__unlock fixed inset-0 z-50 flex cursor-pointer items-center justify-center p-8 text-center outline-none"
        role="button"
        aria-label="Enable voice announcements"
    >
        <div class="max-w-lg rounded-3xl border border-slate-200 bg-white px-10 py-12 shadow-xl">
            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50 ring-1 ring-indigo-100">
                <svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
                </svg>
            </div>
            <p class="mt-6 text-2xl font-semibold tracking-tight text-slate-900">Tap to enable announcements</p>
            <p class="mt-3 text-base text-slate-500">Your browser needs one interaction before this screen can call tickets aloud.</p>
        </div>
    </div>

    <div
        x-show="pollError"
        x-cloak
        class="fixed left-1/2 top-4 z-40 max-w-lg -translate-x-1/2 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 shadow-lg"
        x-text="pollError"
    ></div>

    <div class="qms-display__shell">
        <header class="qms-display__header border-b border-slate-200/80 bg-white/90 backdrop-blur-md">
            <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-4 lg:px-8">
                <div class="flex min-w-0 items-center">
                    <img
                        src="{{ $logoUrl }}"
                        alt="{{ $logoAlt }}"
                        class="h-8 w-auto max-w-[min(100%,240px)] object-contain object-left lg:h-10"
                    >
                </div>
                <div class="shrink-0 text-right">
                    <p class="text-2xl font-semibold tabular-nums tracking-tight text-slate-900 lg:text-3xl" x-text="clock">--:--</p>
                    <p class="mt-0.5 text-xs text-slate-500" x-text="dateLabel"></p>
                </div>
            </div>
        </header>

        <main class="qms-display__main mx-auto w-full px-5 py-4 lg:px-8 lg:py-5">
            <section class="flex min-h-0 flex-1 flex-col">
                <div class="qms-display__serving-heading">
                    <div class="flex items-center gap-3">
                        <span class="qms-display__live-dot h-3 w-3 rounded-full bg-indigo-500" aria-hidden="true"></span>
                        <h1>Now serving</h1>
                    </div>
                    <p x-show="payload?.screen?.branch_name" x-text="payload?.screen?.branch_name"></p>
                </div>

                <div
                    class="qms-display__tickets"
                    x-show="(payload?.now_serving ?? []).length"
                    :data-ticket-count="Math.min((payload?.now_serving ?? []).length, 12)"
                >
                    <template x-for="item in (payload?.now_serving ?? [])" :key="(item.destination || item.counter || item.queue_name || '') + ':' + item.ticket_number">
                        <article class="qms-display__ticket rounded-2xl lg:rounded-3xl">
                            <div class="qms-display__ticket-accent" aria-hidden="true"></div>
                            <div class="qms-display__ticket-body">
                                <div class="qms-display__ticket-meta">
                                    <span class="qms-display__badge">Serving</span>
                                    <span class="qms-display__queue-name" x-text="item.queue_name ?? 'Service queue'"></span>
                                </div>
                                <p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
                                <div class="qms-display__destination">
                                    <span>Please proceed to</span>
                                    <p class="qms-display__counter-name" x-text="item.destination || item.counter || 'Await staff direction'"></p>
                                    <p
                                        class="mt-1 text-sm font-medium text-slate-600 lg:text-base"
                                        x-show="item.staff_display_name"
                                        x-text="item.staff_display_name"
                                    ></p>
                                </div>
                            </div>
                        </article>
                    </template>
                </div>

                <div
                    class="qms-display__ticket qms-display__ticket--empty flex min-h-0 flex-1 flex-col rounded-2xl px-6 py-8 lg:rounded-3xl"
                    x-show="!(payload?.now_serving ?? []).length"
                >
                    <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 ring-1 ring-slate-200 lg:h-14 lg:w-14">
                        <svg class="h-6 w-6 text-slate-400 lg:h-7 lg:w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                    </div>
                    <p class="mt-4 text-2xl font-semibold text-slate-900 lg:text-3xl">Please wait</p>
                    <p class="mt-2 max-w-md text-sm text-slate-500 lg:text-base">Your ticket number will appear here when it is called.</p>
                </div>
            </section>
        </main>

        <footer class="qms-display__footer border-t border-slate-200 bg-white/80 px-5 py-3 lg:px-8">
            <div class="mx-auto flex max-w-6xl items-center justify-between gap-3">
                <div class="flex items-center gap-2">
                    <span class="text-[10px] font-medium uppercase tracking-wider text-slate-400">Powered by</span>
                    <img
                        src="{{ $poweredByLogoUrl }}"
                        alt="Ladill Care"
                        class="h-3.5 w-auto opacity-80"
                    >
                </div>
                <p class="text-[10px] text-slate-400" x-show="payload?.updated_at" x-text="payload?.updated_at ? 'Updated ' + new Date(payload.updated_at).toLocaleTimeString() : ''"></p>
            </div>
        </footer>
    </div>
</body>
</html>
