@extends('layouts.public')

@section('title', 'KDHC 2026 Registration')

@section('content')
    <style>
        .delegate-promo {
            background: #0b0f1c;
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
            overflow: hidden;
        }

        .delegate-promo figure {
            margin: 0;
        }

        .delegate-promo img {
            display: block;
            width: 100%;
            height: auto;
        }

        .delegate-promo .promo-meta {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.9rem;
        }

        @media (min-width: 768px) {
            .delegate-promo img {
                max-height: 520px;
                object-fit: cover;
            }
        }
    </style>
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        <h1 class="page-title">
                            Registrations
                        </h1>
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Registrations</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="section">
        <div class="container">
            @if ($errors->any())
                <div class="alert alert-danger" role="alert"><p>Please correct the following:</p><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
            @endif
            @if (session('message'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('message') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h3 class="h2 mb-3">KDHC {{ config('convention.year') }} registration</h3>
                            <p>{{ config('convention.dates') }} · {{ config('convention.venue') }} · Hybrid<br>{{ config('convention.theme') }}</p>
                            <p>Choose your registration type. Packages and spaces are subject to confirmation by the Secretariat.</p>
                            <div class="d-flex flex-wrap gap-3 align-items-center">
                                <div class="form-check me-4">
                                    <input class="form-check-input" type="radio" name="reg_type" id="reg_delegate"
                                        value="delegate" checked>
                                    <label class="form-check-label fw-semibold" for="reg_delegate">Delegate</label>
                                </div>
                                <div class="form-check me-4">
                                    <input class="form-check-input" type="radio" name="reg_type" id="reg_speaker"
                                        value="speaker">
                                    <label class="form-check-label fw-semibold" for="reg_speaker">Speaker</label>
                                </div>
                                <div class="form-check me-4">
                                    <input class="form-check-input" type="radio" name="reg_type" id="reg_partner"
                                        value="partner">
                                    <label class="form-check-label fw-semibold" for="reg_partner">Partner</label>
                                </div>
                                <div class="form-check me-4">
                                    <input class="form-check-input" type="radio" name="reg_type" id="reg_exhibitor"
                                        value="exhibitor">
                                    <label class="form-check-label fw-semibold" for="reg_exhibitor">Exhibitor</label>
                                </div>
                                <div class="form-check me-4">
                                    <input class="form-check-input" type="radio" name="reg_type" id="reg_volunteer"
                                        value="volunteer">
                                    <label class="form-check-label fw-semibold" for="reg_volunteer">Volunteer</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Delegate (default) --}}
                    <div id="form_delegate" class="card shadow-sm mb-5">
                        <div class="card-body">
                            <h2 class="mb-3">Delegate Registration</h2>
                            <div class="delegate-promo mb-4">
                                <div class="p-3 pb-0 d-flex justify-content-between align-items-center flex-wrap">
                                    <div>
                                        <span class="badge badge-success text-uppercase">Delegate spotlight</span>
                                        <div class="promo-meta mt-1">KDHC delegate information. Current 2026 ticket rates will be announced.</div>
                                    </div>
                                    <div class="text-end d-none d-md-block">
                                        <small class="text-light">Dec 9&ndash;11, 2026</small>
                                    </div>
                                </div>
                                <figure>
                                    <img src="{{ asset('assets/img/delegate-2026.png') }}"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/img/hero-2026.png') }}';"
                                        alt="KDHC 2026 delegate ticketing and payment options" loading="lazy">
                                </figure>
                            </div>

                            <p class="mb-4"><strong>Theme:</strong> {{ config('convention.theme') }}<br>
                                <strong>Dates:</strong> {{ config('convention.dates') }}<br>
                                <strong>Venue:</strong> {{ config('convention.venue') }} · Hybrid</p>
                            <div class="alert alert-info">Delegate ticket prices and payment arrangements will be announced. This form records your interest; it does not issue a paid ticket.</div>
                            <form class="mb-0" method="post" action="{{ route('registrations.submit') }}">
                                @csrf
                                <input type="hidden" name="reg_type" value="delegate">

                                <h5 class="mb-3">A. Personal Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Full Name</label>
                                        <input type="text" class="form-control" name="del_full_name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" class="form-control" name="del_email" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number (with country code)</label>
                                        <input type="tel" class="form-control" name="del_phone" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Nationality / Country of Residence</label>
                                        <input type="text" class="form-control" name="del_country" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Organization / Institution (if applicable)</label>
                                        <input type="text" class="form-control" name="del_organization">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Job Title / Designation</label>
                                        <input type="text" class="form-control" name="del_job_title">
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">B. Delegate Category</h5>
                                <label for="del_category">Participation preference</label>
                                <select class="form-control" id="del_category" name="del_category" required>
                                    <option value="">Select a category</option>
                                    @foreach(config('convention.delegate_categories') as $category)
                                    <option value="{{ $category }}" @selected(old('del_category') === $category)>{{ $category }}</option>
                                    @endforeach
                                </select>
                                <hr class="my-4">
                                <h5 class="mb-3">C. Consent &amp; Confirmation</h5>
                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="del_info_accurate"
                                                id="consent_accurate" required>
                                            <label class="form-check-label" for="consent_accurate">I confirm that the
                                                information provided above is accurate.</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="del_contact_consent"
                                                id="consent_contact" required>
                                            <label class="form-check-label" for="consent_contact">I consent to KDHC
                                                contacting me with updates and related event information.</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="del_privacy_consent"
                                                id="consent_privacy" required>
                                            <label class="form-check-label" for="consent_privacy">I consent to the collection and processing of the information in this form to manage my KDHC 2026 registration and respond to my enquiry.</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Signature (Digital)</label>
                                        <input type="text" class="form-control" name="del_signature" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Date</label>
                                        <input type="date" class="form-control" name="del_date" required>
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <button class="btn btn-success" type="submit">Submit Registration</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Speaker --}}
                    <div id="form_speaker" class="card shadow-sm mb-5 d-none">
                        <div class="card-body">
                            <h2 class="mb-3">Speaker Registration</h2>
                            <form class="mb-0" method="post" action="{{ route('registrations.submit') }}"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="reg_type" value="speaker">

                                <h5 class="mb-3">A. Personal Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Full Name</label>
                                        <input type="text" class="form-control" name="speaker_full_name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Title / Position</label>
                                        <input type="text" class="form-control" name="speaker_title" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Organization / Institution</label>
                                        <input type="text" class="form-control" name="speaker_org" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" class="form-control" name="speaker_email" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number (with country code)</label>
                                        <input type="tel" class="form-control" name="speaker_phone" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Nationality / Country of Residence</label>
                                        <input type="text" class="form-control" name="speaker_country" required>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">LinkedIn / Website (optional)</label>
                                        <input type="url" class="form-control" name="speaker_link">
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">B. Speaking Interest</h5>
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label d-block">Area of Interest (select one or more)</label>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Investment Deal Room"
                                                        id="si1">
                                                    <label class="form-check-label" for="si1">Investment Deal Room</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="AI, Digital Economy & Blockchain" id="si2">
                                                    <label class="form-check-label" for="si2">AI, Digital Economy &amp; Blockchain</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Agri-Business & Food Security"
                                                        id="si3">
                                                    <label class="form-check-label" for="si3">Agri-Business &amp; Food Security</label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Banking, FinTechs & SACCOs" id="si4">
                                                    <label class="form-check-label" for="si4">Banking, FinTechs &amp; SACCOs</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Women’s Economic Leadership & Youth Innovation"
                                                        id="si5">
                                                    <label class="form-check-label" for="si5">Women’s Economic Leadership &amp; Youth Innovation</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Government Commitment & Policy"
                                                        id="si6">
                                                    <label class="form-check-label" for="si6">Government Commitment &amp; Policy</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Optional Title of Proposed Speech / Presentation</label>
                                        <input type="text" class="form-control" name="speaker_title_proposed">
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">Short Abstract or Summary (150&ndash;200 words)</label>
                                        <textarea class="form-control" name="speaker_abstract" rows="4"></textarea>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">Relevance to KDHC 2026 Theme (briefly explain)</label>
                                        <textarea class="form-control" name="speaker_relevance" rows="3"></textarea>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">C. Technical Requirements</h5>
                                <div class="mb-3">
                                    <label class="form-label">Audio/Visual Needs or Special Equipment (if any)</label>
                                    <textarea class="form-control" name="speaker_av_needs" rows="2"></textarea>
                                </div>

                                <h5 class="mb-3">D. Previous Speaking Experience</h5>
                                <div class="mb-3">
                                    <label class="form-label d-block">Have you spoken at conferences or major events
                                        before?</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="speaker_spoken_before"
                                            id="sp_yes" value="yes">
                                        <label class="form-check-label" for="sp_yes">Yes</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="speaker_spoken_before"
                                            id="sp_no" value="no">
                                        <label class="form-check-label" for="sp_no">No</label>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Upload Bio and Headshot (optional)</label>
                                    <input type="file" class="form-control" name="speaker_bio_headshot"
                                        accept=".pdf,.doc,.docx,image/*">
                                    <small class="text-muted">PDF, Word, or image files up to 5MB.</small>
                                </div>

                                <div class="mt-4">
                                    <button class="btn btn-success" type="submit">Submit Speaker Registration</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Partner --}}
                    <div id="form_partner" class="card shadow-sm mb-5 d-none">
                        <div class="card-body">
                            <h2 class="mb-3">Partner Registration</h2>
                            <form class="mb-0" method="post" action="{{ route('registrations.submit') }}"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="reg_type" value="partner">

                                <h5 class="mb-3">A. Organization Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Organization Name</label>
                                        <input type="text" class="form-control" name="partner_org" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Sector / Industry</label>
                                        <input type="text" class="form-control" name="partner_sector" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Website / Social Media Handle(s)</label>
                                        <input type="text" class="form-control" name="partner_web">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Country / Region</label>
                                        <input type="text" class="form-control" name="partner_country" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Contact Person</label>
                                        <input type="text" class="form-control" name="partner_contact" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Title / Position</label>
                                        <input type="text" class="form-control" name="partner_title" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" class="form-control" name="partner_email" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control" name="partner_phone" required>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">B. Partnership Type</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="partner_type[]"
                                                value="Event Partner" id="pt1">
                                            <label class="form-check-label" for="pt1">Event Partner</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="partner_type[]"
                                                value="Knowledge Partner" id="pt2">
                                            <label class="form-check-label" for="pt2">Knowledge Partner</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="partner_type[]"
                                                value="Technical Partner" id="pt3">
                                            <label class="form-check-label" for="pt3">Technical Partner</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="partner_type[]"
                                                value="Media Partner" id="pt4">
                                            <label class="form-check-label" for="pt4">Media Partner</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="partner_type[]"
                                                value="CSR/Development Partner" id="pt5">
                                            <label class="form-check-label" for="pt5">CSR / Development Partner</label>
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">C. Partnership or Advertising Package</h5>
                                <p>All rates are in USD, exclusive of VAT. <a href="{{ route('partners') }}">View the full rate card and benefits</a>.</p>
                                <label for="partner_commitment">Preferred package</label>
                                <select class="form-control" name="partner_commitment" id="partner_commitment">
                                    <option value="">Select a package or discuss with the Secretariat</option>
                                    @foreach(\App\Support\ConventionRegistration::partnerOptions() as $option)
                                        <option value="{{ $option }}" @selected(old('partner_commitment') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                <div class="mt-3">
                                    <label class="form-label">Areas of Collaboration or Interest</label>
                                    <textarea class="form-control" name="partner_collab" rows="3"></textarea>
                                </div>

                                <div class="mt-3">
                                    <label class="form-label">Upload Company Profile or Proposal (optional)</label>
                                    <input type="file" class="form-control" name="partner_profile"
                                        accept=".pdf,.doc,.docx">
                                </div>

                                <div class="mt-4">
                                    <button class="btn btn-success" type="submit">Submit Partner Registration</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Exhibitor --}}
                    <div id="form_exhibitor" class="card shadow-sm mb-5 d-none">
                        <div class="card-body">
                            <h2 class="mb-3">Exhibitor Registration</h2>
                            <form class="mb-0" method="post" action="{{ route('registrations.submit') }}"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="reg_type" value="exhibitor">

                                <h5 class="mb-3">A. Organization Details</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Company / Organization Name</label>
                                        <input type="text" class="form-control" name="exh_org" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Contact Person</label>
                                        <input type="text" class="form-control" name="exh_contact" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Title / Position</label>
                                        <input type="text" class="form-control" name="exh_title" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" class="form-control" name="exh_email" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control" name="exh_phone" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Website / Social Media</label>
                                        <input type="text" class="form-control" name="exh_web">
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">Industry / Product Category</label>
                                        <input type="text" class="form-control" name="exh_category">
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">B. Exhibition Preference</h5>
                                <p>All rates are in USD, exclusive of VAT.</p>
                                <label for="exh_booth">Desk or booth package</label>
                                <select class="form-control mb-3" name="exh_booth" id="exh_booth" required>
                                    <option value="">Select your exhibition package</option>
                                    @foreach(\App\Support\ConventionRegistration::exhibitionOptions() as $option)
                                        <option value="{{ $option }}" @selected(old('exh_booth') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Power Requirements (if any)</label>
                                        <input type="text" class="form-control" name="exh_power">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Number of Exhibition Staff</label>
                                        <input type="number" class="form-control" name="exh_staff" min="1">
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">Brief Description of Products / Services</label>
                                        <textarea class="form-control" name="exh_desc" rows="3"></textarea>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">Upload Company Logo / Brochure (optional)</label>
                                        <input type="file" class="form-control" name="exh_logo"
                                            accept="image/*,.pdf,.zip">
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <button class="btn btn-success" type="submit">Submit Exhibitor Registration</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Volunteer --}}
                    <div id="form_volunteer" class="card shadow-sm mb-5 d-none">
                        <div class="card-body">
                            <h2 class="mb-3">Volunteer Registration</h2>
                            <form class="mb-0" method="post" action="{{ route('registrations.submit') }}">
                                @csrf
                                <input type="hidden" name="reg_type" value="volunteer">

                                <h5 class="mb-3">A. Personal Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Full Name</label>
                                        <input type="text" class="form-control" name="vol_name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" class="form-control" name="vol_email" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control" name="vol_phone" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Gender</label>
                                        <input type="text" class="form-control" name="vol_gender">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Age Group</label>
                                        <select class="form-select form-control" name="vol_age">
                                            <option value="">Select</option>
                                            <option value="Under 25">Under 25</option>
                                            <option value="25-34">25&ndash;34</option>
                                            <option value="35-44">35&ndash;44</option>
                                            <option value="45-54">45&ndash;54</option>
                                            <option value="55+">55+</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Nationality / Residence</label>
                                        <input type="text" class="form-control" name="vol_country">
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">B. Areas of Interest</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Registration & Guest Relations" id="vi1">
                                            <label class="form-check-label" for="vi1">Registration &amp; Guest
                                                Relations</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Logistics & Coordination" id="vi2">
                                            <label class="form-check-label" for="vi2">Logistics &amp; Coordination</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Media & Communications" id="vi3">
                                            <label class="form-check-label" for="vi3">Media &amp; Communications</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Technical Support" id="vi4">
                                            <label class="form-check-label" for="vi4">Technical Support</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Exhibition Support" id="vi5">
                                            <label class="form-check-label" for="vi5">Exhibition Support</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Speaker Liaison" id="vi6">
                                            <label class="form-check-label" for="vi6">Speaker Liaison</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="vol_interest[]"
                                                value="Documentation & Reporting" id="vi7">
                                            <label class="form-check-label" for="vi7">Documentation &amp; Reporting</label>
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">C. Availability & Experience</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Which days are you available?</label>
                                        <input type="text" class="form-control" name="vol_days"
                                            placeholder="e.g. 9&ndash;11 December">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Previous Event / Volunteer Experience (optional)</label>
                                        <textarea class="form-control" name="vol_experience" rows="3"></textarea>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">D. Emergency Contact</h5>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Name</label>
                                        <input type="text" class="form-control" name="em_name">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Relationship</label>
                                        <input type="text" class="form-control" name="em_relationship">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control" name="em_phone">
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <button class="btn btn-success" type="submit">Submit Volunteer Registration</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        (function() {
            function showForm(key) {
                var ids = ['delegate', 'speaker', 'partner', 'exhibitor', 'volunteer'];
                ids.forEach(function(k) {
                    var el = document.getElementById('form_' + k);
                    if (!el) return;
                    if (k === key) {
                        el.classList.remove('d-none');
                    } else {
                        el.classList.add('d-none');
                    }
                });
            }

            document.querySelectorAll('input[name="reg_type"]').forEach(function(r) {
                r.addEventListener('change', function(e) {
                    showForm(e.target.value);
                });
            });

            const requested = @json(old('reg_type', request('type', 'delegate')));
            const selected = document.getElementById('reg_' + requested);
            if (selected) selected.checked = true;
            var checked = document.querySelector('input[name="reg_type"]:checked');
            showForm(checked ? checked.value : 'delegate');
        })();
    </script>
@endsection