<x-meet-kiosk-layout :title="'Register · '.$room->title" :organization="$organization">
    <div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center text-center">
        <div class="w-full max-w-lg">
            <h1 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">{{ $room->title }}</h1>

            @if ($eventTitle)
                <p class="mt-2 text-sm font-medium text-indigo-600">{{ $eventTitle }}</p>
            @endif

            @if ($room->scheduled_at)
                <p class="mt-3 text-base text-slate-500">
                    {{ $room->scheduled_at->timezone($room->timezone)->format('l, j F Y · g:i A T') }}
                </p>
            @endif

            <p class="mt-6 text-sm leading-relaxed text-slate-600">
                Register for this event before joining the {{ $sessionNoun }}. Paid tickets must be completed before you can enter.
            </p>

            @if ($errors->any())
                <div class="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-left text-sm text-red-700">
                    {{ $errors->first() }}
                </div>
            @endif

            @if ($registrationUrl)
                <a href="{{ $registrationUrl }}"
                   class="btn-primary btn-primary-lg mt-8 inline-flex w-full items-center justify-center py-4 text-base font-semibold">
                    Register for event
                </a>
            @else
                <p class="mt-8 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                    Event registration is not available. Contact the organizer.
                </p>
            @endif

            <div class="relative my-10">
                <div class="absolute inset-0 flex items-center" aria-hidden="true">
                    <div class="w-full border-t border-slate-200"></div>
                </div>
                <div class="relative flex justify-center">
                    <span class="bg-slate-100 px-3 text-sm font-medium text-slate-500">Already registered?</span>
                </div>
            </div>

            <form method="POST" action="{{ route('meet.join.verify-badge', $room) }}" class="text-left">
                @csrf

                <label class="block text-sm font-medium text-slate-700">Badge code</label>
                <input type="text" name="badge_code" required placeholder="Enter your badge code"
                       value="{{ old('badge_code') }}"
                       autocomplete="off"
                       class="mt-2 w-full rounded-2xl border-slate-200 bg-white px-4 py-3.5 font-mono uppercase tracking-widest text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:normal-case placeholder:tracking-normal placeholder:text-slate-400 focus:border-indigo-500 focus:ring-indigo-500">

                <button type="submit" class="btn-primary mt-4 w-full py-3.5 text-sm font-semibold">
                    Sign in with badge
                </button>
            </form>

            <div class="mt-6" x-data="meetBadgeScanner" x-cloak>
                <button type="button" @click="toggle()"
                        class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">
                    <span x-text="scanning ? 'Stop scanning' : 'Scan badge QR code'"></span>
                </button>

                <div x-show="scanning" class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-black">
                    <div id="meet-badge-qr-reader" class="w-full"></div>
                </div>

                <p x-show="scanError" x-text="scanError" class="mt-3 text-left text-sm text-red-600"></p>
            </div>
        </div>
    </div>

    @push('head')
        <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    @endpush
</x-meet-kiosk-layout>
