@extends('layouts.public')

@section('title', 'Check registration status')

@section('content')
    <x-inner-hero kicker="Registration status" title="Where is my registration?" subtitle="Enter your reference number and the e-mail address or phone number you registered with." />

    <section class="mesh-light py-12 sm:py-16">
        <div class="mx-auto max-w-lg space-y-6 px-4 sm:px-6">
            <form method="POST" action="{{ route('status.check') }}" class="surface space-y-5 p-6 sm:p-8" novalidate>
                @csrf
                <div>
                    <label for="reference" class="label">Reference number</label>
                    <input id="reference" name="reference" type="text" class="field uppercase tracking-wider" value="{{ old('reference') }}" placeholder="NYES26-ABC123" required autofocus autocomplete="off" autocapitalize="characters">
                    <x-input-error :messages="$errors->get('reference')" class="mt-1" />
                </div>
                <div>
                    <label for="contact" class="label">E-mail or phone number</label>
                    <input id="contact" name="contact" type="text" class="field" value="{{ old('contact') }}" placeholder="you@example.com or 0771 234 567" required autocomplete="email">
                    <x-input-error :messages="$errors->get('contact')" class="mt-1" />
                </div>
                <button type="submit" class="btn-primary w-full">Check status</button>
            </form>

            <p class="text-center text-sm text-navy-500">
                Can't find your reference? <a href="{{ route('contact') }}" class="font-semibold text-emerald-600 underline">Contact us</a>
                or e-mail <a href="mailto:{{ config('event.contact.email') }}" class="font-semibold text-emerald-600 underline">{{ config('event.contact.email') }}</a>.
            </p>
        </div>
    </section>
@endsection