@extends('layouts.app')

@section('title', 'QR Code Kunjungan')
@section('header-right', 'Kunjungan #' . $visit->id)

@section('content')
<main class="mx-auto max-w-xl px-4 py-10 text-center">
    <div id="pending-view" class="animate-pop">
        <h2 class="text-xl font-semibold text-navy">{{ $visit->full_name }}</h2>
        <p class="mt-1 text-sm text-ink-soft">Pindai QR Code di bawah dengan kamera HP untuk membubuhkan tanda tangan.</p>

        <div class="mx-auto mt-6 inline-block rounded-card bg-white p-6 shadow-sm ring-1 ring-line">
            {!! $qr !!}
        </div>

        <p class="mt-4 text-xs text-ink-soft">
            Gagal memindai? Buka tautan ini di HP tamu:
            <a href="{{ $tokenUrl }}" class="break-all text-teal underline">{{ $tokenUrl }}</a>
        </p>

        <div class="mx-auto mt-6 flex max-w-md items-center justify-center gap-3 rounded-field bg-info-bg px-4 py-3">
            <span class="h-4 w-4 animate-spin rounded-full border-2 border-teal border-t-transparent"></span>
            <p class="text-sm font-medium text-navy">Menunggu tanda tangan dari tamu…</p>
        </div>
    </div>

    <div id="done-view" class="hidden">
        <div class="mx-auto mt-4 max-w-md rounded-card bg-success-bg p-8 ring-1 ring-success/30 animate-pop">
            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-white text-2xl text-success">✓</div>
            <h2 class="mt-3 text-xl font-semibold text-success">Registrasi Selesai</h2>
            <p class="mt-2 text-sm text-success/80">Tanda tangan diterima. Halaman akan kembali ke formulir dalam beberapa detik.</p>
        </div>
    </div>
</main>

<script>
    const pending = document.getElementById('pending-view');
    const done = document.getElementById('done-view');
    const statusUrl = "{{ route('visits.status', $visit) }}";
    const RESET_DELAY = 5000;

    async function poll() {
        try {
            const res = await fetch(statusUrl);
            const data = await res.json();

            if (data.status === 'selesai') {
                pending.classList.add('hidden');
                done.classList.remove('hidden');
                setTimeout(() => window.location.href = "{{ route('visits.create') }}", RESET_DELAY);
                return;
            }
        } catch (e) {
            /* network hiccup — tetap lanjut polling */
        }
        setTimeout(poll, 2000);
    }

    poll();
</script>
@endsection