@extends('layouts.public')

@section('title', 'Register — '.$category->name)

@php
    $corporate = $category->entity_type === 'corporate';
    $isReq = fn (string $field): bool => in_array($field, $requiredFields, true);
    $star = fn (bool $required): string => $required ? '<span class="text-coral-500" aria-hidden="true"> *</span><span class="sr-only"> (required)</span>' : '';

    // Fields whose requiredness depends on category type (mirrors StoreRegistrationRequest).
    $dobRequired = ! $corporate || $isReq('date_of_birth');
    $provinceRequired = ! $corporate || $isReq('province');

    $showOrganisation = $corporate || collect($requiredFields)->contains(fn ($f) => str_starts_with($f, 'organisation_') || $f === 'company_role');
    $showBooth = $isReq('booth_request') || $isReq('products_services') || $category->slug === 'exhibitor';
    $showSponsor = $isReq('sponsorship_interest') || $category->slug === 'sponsor';
    $showMedia = $isReq('media_outlet') || $category->slug === 'media';

    $selectedInterests = (array) old('interests', []);
    $full = $remainingCapacity !== null && $remainingCapacity <= 0;
@endphp

@section('content')
    <section class="hero-wash relative overflow-hidden text-white">
        <x-geo-pattern id="geo-reg2" />
        <div class="relative mx-auto max-w-7xl px-4 pb-10 pt-32 sm:px-6 sm:pb-14 sm:pt-40 lg:px-8">
            <x-steps :current="2" class="mb-10 max-w-xl" />
            <div class="max-w-3xl animate-fade-up">
                <a href="{{ route('registration.create') }}" class="text-sm font-medium text-gold-500 hover:text-gold-400">&larr; Change category</a>
                <h1 class="mt-3 font-display text-3xl font-semibold tracking-tight sm:text-5xl">{{ $category->name }}</h1>
                @if ($category->description)
                    <p class="mt-3 max-w-2xl text-base text-white/80 sm:text-lg">{{ $category->description }}</p>
                @endif
            </div>
        </div>
    </section>

    <section class="mesh-light py-10 sm:py-14">
        <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">

            @if ($full)
                <div class="mb-6 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-800">
                    This category is currently full. You can still register and will be placed on the <strong>waitlist</strong>.
                </div>
            @elseif ($category->requires_manual_approval)
                <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                    Registrations in this category are reviewed by the organisers before a badge is issued.
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
                    <p class="font-semibold">Please fix the {{ $errors->count() === 1 ? 'problem' : $errors->count().' problems' }} below.</p>
                </div>
            @endif

            <form method="POST" action="{{ route('registration.store', $category) }}" enctype="multipart/form-data"
                  x-data="{ busy: false }" @submit="busy = true" class="space-y-8" novalidate>
                @csrf

                {{-- Honeypot --}}
                <div class="hidden" aria-hidden="true">
                    <label for="website_url">Leave this field empty</label>
                    <input type="text" id="website_url" name="website_url" tabindex="-1" autocomplete="off">
                </div>

                {{-- ===== About you ===== --}}
                <fieldset class="surface space-y-5 p-6 sm:p-8">
                    <legend class="sr-only">About you</legend>
                    <h2 class="font-display text-xl font-semibold text-navy-900">About you</h2>

                    <div>
                        <label for="full_name" class="label">Full name{!! $star(true) !!}</label>
                        <input id="full_name" name="full_name" type="text" class="field" value="{{ old('full_name') }}" required autocomplete="name" aria-describedby="full_name-hint">
                        <p id="full_name-hint" class="mt-1 text-xs text-navy-500">As it should appear on your badge.</p>
                        <x-input-error :messages="$errors->get('full_name')" class="mt-1" />
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="email" class="label">E-mail address{!! $star(true) !!}</label>
                            <input id="email" name="email" type="email" class="field" value="{{ old('email') }}" required autocomplete="email" inputmode="email">
                            <x-input-error :messages="$errors->get('email')" class="mt-1" />
                        </div>
                        <div>
                            <label for="phone" class="label">Mobile phone{!! $star(true) !!}</label>
                            <input id="phone" name="phone" type="tel" class="field" value="{{ old('phone') }}" required autocomplete="tel" inputmode="tel" placeholder="0771 234 567" aria-describedby="phone-hint">
                            <p id="phone-hint" class="mt-1 text-xs text-navy-500">We send a verification code to this number.</p>
                            <x-input-error :messages="$errors->get('phone')" class="mt-1" />
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="date_of_birth" class="label">Date of birth{!! $star($dobRequired) !!}</label>
                            <input id="date_of_birth" name="date_of_birth" type="date" class="field" value="{{ old('date_of_birth') }}" max="{{ now()->subDay()->toDateString() }}" min="1920-01-02" @required($dobRequired) autocomplete="bday">
                            @if ($category->min_age || $category->max_age)
                                <p class="mt-1 text-xs text-navy-500">Open to ages {{ $category->min_age ?? 'any' }}{{ $category->max_age ? '–'.$category->max_age : '+' }}.</p>
                            @endif
                            <x-input-error :messages="$errors->get('date_of_birth')" class="mt-1" />
                        </div>
                        <div>
                            <label for="gender" class="label">Gender{!! $star($isReq('gender')) !!}</label>
                            <select id="gender" name="gender" class="field" @required($isReq('gender'))>
                                <option value="">Select…</option>
                                @foreach ($genders as $value => $label)
                                    <option value="{{ $value }}" @selected(old('gender') === (string) $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <x-input-error :messages="$errors->get('gender')" class="mt-1" />
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="national_id" class="label">National ID{!! $star(! $corporate || $isReq('national_id')) !!}</label>
                            <input id="national_id" name="national_id" type="text" class="field uppercase" value="{{ old('national_id') }}" autocomplete="off" placeholder="63-123456 A 78" aria-describedby="id-hint">
                            <x-input-error :messages="$errors->get('national_id')" class="mt-1" />
                        </div>
                        <div>
                            <label for="passport_number" class="label">Passport number</label>
                            <input id="passport_number" name="passport_number" type="text" class="field uppercase" value="{{ old('passport_number') }}" autocomplete="off">
                            <x-input-error :messages="$errors->get('passport_number')" class="mt-1" />
                        </div>
                    </div>
                    @unless ($corporate)
                        <p id="id-hint" class="-mt-2 text-xs text-navy-500">Provide your national ID <em>or</em> passport number. It is stored encrypted.</p>
                    @endunless

                    <div class="grid gap-5 sm:grid-cols-3">
                        <div>
                            <label for="province" class="label">Province{!! $star($provinceRequired) !!}</label>
                            <select id="province" name="province" class="field" @required($provinceRequired)>
                                <option value="">Select…</option>
                                @foreach ($provinces as $province)
                                    <option value="{{ $province }}" @selected(old('province') === $province)>{{ $province }}</option>
                                @endforeach
                            </select>
                            <x-input-error :messages="$errors->get('province')" class="mt-1" />
                        </div>
                        <div>
                            <label for="district" class="label">District{!! $star($isReq('district')) !!}</label>
                            <input id="district" name="district" type="text" class="field" value="{{ old('district') }}" @required($isReq('district'))>
                            <x-input-error :messages="$errors->get('district')" class="mt-1" />
                        </div>
                        <div>
                            <label for="sector" class="label">Sector / ward{!! $star($isReq('sector')) !!}</label>
                            <input id="sector" name="sector" type="text" class="field" value="{{ old('sector') }}" @required($isReq('sector'))>
                            <x-input-error :messages="$errors->get('sector')" class="mt-1" />
                        </div>
                    </div>

                    <div>
                        <label for="photo" class="label">Photo{!! $star($isReq('photo')) !!}</label>
                        <input id="photo" name="photo" type="file" accept="image/png,image/jpeg" @required($isReq('photo'))
                               class="block w-full rounded-xl border border-dashed border-navy-200 bg-white p-3 text-sm text-navy-500 file:mr-4 file:rounded-lg file:border-0 file:bg-emerald-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-emerald-700 hover:file:bg-emerald-100"
                               aria-describedby="photo-hint">
                        <p id="photo-hint" class="mt-1 text-xs text-navy-500">JPG or PNG, at least 200 × 200 px, up to {{ number_format(config('event.registration.photo_max_kb') / 1024, 0) }} MB. Appears on your badge.</p>
                        <x-input-error :messages="$errors->get('photo')" class="mt-1" />
                    </div>
                </fieldset>

                {{-- ===== Organisation ===== --}}
                @if ($showOrganisation)
                    <fieldset class="surface space-y-5 p-6 sm:p-8">
                        <legend class="sr-only">Organisation</legend>
                        <h2 class="font-display text-xl font-semibold text-navy-900">Your organisation</h2>

                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="organisation_name" class="label">Organisation name{!! $star($corporate || $isReq('organisation_name')) !!}</label>
                                <input id="organisation_name" name="organisation_name" type="text" class="field" value="{{ old('organisation_name') }}" @required($corporate || $isReq('organisation_name')) autocomplete="organization">
                                <x-input-error :messages="$errors->get('organisation_name')" class="mt-1" />
                            </div>
                            <div>
                                <label for="company_role" class="label">Your role / position{!! $star($corporate || $isReq('company_role')) !!}</label>
                                <input id="company_role" name="company_role" type="text" class="field" value="{{ old('company_role') }}" @required($corporate || $isReq('company_role')) autocomplete="organization-title">
                                <x-input-error :messages="$errors->get('company_role')" class="mt-1" />
                            </div>
                        </div>

                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="organisation_email" class="label">Organisation e-mail{!! $star($corporate || $isReq('organisation_email')) !!}</label>
                                <input id="organisation_email" name="organisation_email" type="email" class="field" value="{{ old('organisation_email') }}" @required($corporate || $isReq('organisation_email')) inputmode="email">
                                <x-input-error :messages="$errors->get('organisation_email')" class="mt-1" />
                            </div>
                            <div>
                                <label for="organisation_phone" class="label">Organisation phone{!! $star($corporate || $isReq('organisation_phone')) !!}</label>
                                <input id="organisation_phone" name="organisation_phone" type="tel" class="field" value="{{ old('organisation_phone') }}" @required($corporate || $isReq('organisation_phone')) inputmode="tel" placeholder="+263 242 000 000">
                                <x-input-error :messages="$errors->get('organisation_phone')" class="mt-1" />
                            </div>
                        </div>

                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="organisation_registration_number" class="label">Registration number{!! $star($isReq('organisation_registration_number')) !!}</label>
                                <input id="organisation_registration_number" name="organisation_registration_number" type="text" class="field" value="{{ old('organisation_registration_number') }}" @required($isReq('organisation_registration_number'))>
                                <x-input-error :messages="$errors->get('organisation_registration_number')" class="mt-1" />
                            </div>
                            <div>
                                <label for="organisation_tin" class="label">TIN{!! $star($isReq('organisation_tin')) !!}</label>
                                <input id="organisation_tin" name="organisation_tin" type="text" class="field" value="{{ old('organisation_tin') }}" @required($isReq('organisation_tin'))>
                                <x-input-error :messages="$errors->get('organisation_tin')" class="mt-1" />
                            </div>
                        </div>

                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="organisation_sector" class="label">Sector / industry{!! $star($isReq('organisation_sector')) !!}</label>
                                <input id="organisation_sector" name="organisation_sector" type="text" class="field" value="{{ old('organisation_sector') }}" @required($isReq('organisation_sector'))>
                                <x-input-error :messages="$errors->get('organisation_sector')" class="mt-1" />
                            </div>
                            <div>
                                <label for="organisation_website" class="label">Website{!! $star($isReq('organisation_website')) !!}</label>
                                <input id="organisation_website" name="organisation_website" type="url" class="field" value="{{ old('organisation_website') }}" placeholder="https://" @required($isReq('organisation_website')) inputmode="url">
                                <x-input-error :messages="$errors->get('organisation_website')" class="mt-1" />
                            </div>
                        </div>

                        @if ($showBooth)
                            <div>
                                <label for="booth_request" class="label">Booth request{!! $star($isReq('booth_request')) !!}</label>
                                <textarea id="booth_request" name="booth_request" rows="3" class="field" @required($isReq('booth_request')) placeholder="Preferred size, power needs, location…">{{ old('booth_request') }}</textarea>
                                <x-input-error :messages="$errors->get('booth_request')" class="mt-1" />
                            </div>
                            <div>
                                <label for="products_services" class="label">Products &amp; services to showcase{!! $star($isReq('products_services')) !!}</label>
                                <textarea id="products_services" name="products_services" rows="3" class="field" @required($isReq('products_services'))>{{ old('products_services') }}</textarea>
                                <x-input-error :messages="$errors->get('products_services')" class="mt-1" />
                            </div>
                        @endif

                        @if ($showSponsor)
                            <div>
                                <label for="sponsorship_interest" class="label">Sponsorship interest{!! $star($isReq('sponsorship_interest')) !!}</label>
                                <textarea id="sponsorship_interest" name="sponsorship_interest" rows="3" class="field" @required($isReq('sponsorship_interest')) placeholder="Tell us how you would like to partner with the symposium.">{{ old('sponsorship_interest') }}</textarea>
                                <x-input-error :messages="$errors->get('sponsorship_interest')" class="mt-1" />
                            </div>
                        @endif
                    </fieldset>
                @endif

                @if ($showMedia && ! $showOrganisation)
                    <fieldset class="surface space-y-5 p-6 sm:p-8">
                        <legend class="sr-only">Media</legend>
                        <h2 class="font-display text-xl font-semibold text-navy-900">Media accreditation</h2>
                        <div>
                            <label for="media_outlet" class="label">Media outlet{!! $star($isReq('media_outlet')) !!}</label>
                            <input id="media_outlet" name="media_outlet" type="text" class="field" value="{{ old('media_outlet') }}" @required($isReq('media_outlet'))>
                            <x-input-error :messages="$errors->get('media_outlet')" class="mt-1" />
                        </div>
                    </fieldset>
                @elseif ($showMedia)
                    <div class="surface p-6 sm:p-8">
                        <label for="media_outlet" class="label">Media outlet{!! $star($isReq('media_outlet')) !!}</label>
                        <input id="media_outlet" name="media_outlet" type="text" class="field" value="{{ old('media_outlet') }}" @required($isReq('media_outlet'))>
                        <x-input-error :messages="$errors->get('media_outlet')" class="mt-1" />
                    </div>
                @endif

                {{-- ===== Interests & access ===== --}}
                <fieldset class="surface space-y-5 p-6 sm:p-8">
                    <legend class="sr-only">Interests and access</legend>
                    <h2 class="font-display text-xl font-semibold text-navy-900">Interests &amp; access</h2>

                    <div>
                        <p class="label">Topics you care about{!! $star($isReq('interests')) !!}</p>
                        <div class="mt-2 grid gap-2 sm:grid-cols-2">
                            @foreach ($interests as $value => $label)
                                <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-navy-100 bg-white px-3 py-2.5 text-sm text-navy-700 has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50">
                                    <input type="checkbox" name="interests[]" value="{{ $value }}" class="rounded border-navy-200 text-emerald-500 focus:ring-emerald-500" @checked(in_array((string) $value, $selectedInterests, true))>
                                    {{ $label }}
                                </label>
                            @endforeach
                        </div>
                        <x-input-error :messages="$errors->get('interests')" class="mt-1" />
                        <x-input-error :messages="$errors->get('interests.*')" class="mt-1" />
                    </div>

                    <div>
                        <label for="accessibility_needs" class="label">Accessibility needs{!! $star($isReq('accessibility_needs')) !!}</label>
                        <textarea id="accessibility_needs" name="accessibility_needs" rows="2" class="field" placeholder="Anything we should know to make your attendance comfortable." @required($isReq('accessibility_needs'))>{{ old('accessibility_needs') }}</textarea>
                        <x-input-error :messages="$errors->get('accessibility_needs')" class="mt-1" />
                    </div>
                </fieldset>

                {{-- ===== Documents ===== --}}
                @if (count($requiredDocuments))
                    <fieldset class="surface space-y-5 p-6 sm:p-8">
                        <legend class="sr-only">Supporting documents</legend>
                        <h2 class="font-display text-xl font-semibold text-navy-900">Supporting documents</h2>
                        <p class="-mt-2 text-sm text-navy-500">PDF, JPG or PNG, up to {{ number_format(config('event.registration.upload_max_kb') / 1024, 0) }} MB each.</p>
                        @foreach ($requiredDocuments as $type)
                            <div>
                                <label for="doc_{{ $type }}" class="label">{{ $documentTypes[$type] ?? ucwords(str_replace('_', ' ', $type)) }}{!! $star(true) !!}</label>
                                <input id="doc_{{ $type }}" name="documents[{{ $type }}]" type="file" accept=".pdf,image/png,image/jpeg" required
                                       class="block w-full rounded-xl border border-dashed border-navy-200 bg-white p-3 text-sm text-navy-500 file:mr-4 file:rounded-lg file:border-0 file:bg-emerald-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-emerald-700 hover:file:bg-emerald-100">
                                <x-input-error :messages="$errors->get('documents.'.$type)" class="mt-1" />
                            </div>
                        @endforeach
                        <x-input-error :messages="$errors->get('documents')" class="mt-1" />
                    </fieldset>
                @endif

                {{-- ===== Consent ===== --}}
                <fieldset class="surface space-y-4 p-6 sm:p-8">
                    <legend class="sr-only">Consent</legend>
                    <label class="flex cursor-pointer items-start gap-3 text-sm text-navy-700">
                        <input type="checkbox" name="consent_privacy" value="1" class="mt-0.5 rounded border-navy-200 text-emerald-500 focus:ring-emerald-500" @checked(old('consent_privacy')) required>
                        <span>I have read and accept the <a href="{{ route('privacy') }}" target="_blank" rel="noopener" class="font-semibold text-emerald-600 underline">privacy notice</a>.{!! $star(true) !!}</span>
                    </label>
                    <x-input-error :messages="$errors->get('consent_privacy')" />

                    <input type="hidden" name="consent_communications" value="0">
                    <label class="flex cursor-pointer items-start gap-3 text-sm text-navy-700">
                        <input type="checkbox" name="consent_communications" value="1" class="mt-0.5 rounded border-navy-200 text-emerald-500 focus:ring-emerald-500" @checked(old('consent_communications'))>
                        <span>Send me news and updates about the symposium (optional).</span>
                    </label>
                    <x-input-error :messages="$errors->get('website_url')" />
                </fieldset>

                <div class="flex flex-col-reverse items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <a href="{{ route('registration.create') }}" class="btn-ghost">Back</a>
                    <button type="submit" class="btn-primary sm:px-8 sm:py-4 sm:text-base" :disabled="busy" :class="busy && 'opacity-70'">
                        <span x-show="!busy">Continue to verification</span>
                        <span x-cloak x-show="busy">Submitting…</span>
                    </button>
                </div>
            </form>
        </div>
    </section>
@endsection