@extends('layouts.public')

@section('title', 'KDHC 2025 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 (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">Choose Registration Type</h3>
                            <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">Ticketing, passes, and payment options at a glance.</div>
                                    </div>
                                    <div class="text-end d-none d-md-block">
                                        <small class="text-light">Dec 9&ndash;11, 2025</small>
                                    </div>
                                </div>
                                <figure>
                                    <img src="{{ asset('assets/img/delegate.jpg') }}"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/img/updated-banner.jpg') }}';"
                                        alt="KDHC 2025 delegate ticketing and payment options" loading="lazy">
                                </figure>
                            </div>
                            <p class="mb-4">
                                <strong>Theme</strong>: Cooperative Models for Inclusive Growth and Sustainable
                                Development<br>
                                <strong>Dates</strong>: December 9&ndash;11, 2025 |
                                <strong>Location</strong>: Nairobi, Kenya
                            </p>

                            <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>
                                <p class="mb-3">
                                    Registration fees include access to plenary and breakout sessions, exhibition areas,
                                    networking events, and conference materials.
                                </p>

                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <h6 class="fw-semibold mb-2">3-Day Passes</h6>
                                        <ul class="list-unstyled small mb-0">
                                            <li>Local Delegates: USD 115</li>
                                            <li>International Delegates: USD 165</li>
                                            <li>Students: USD 75</li>
                                            <li>Virtual (Zoom VIP): USD 15</li>
                                            <li>Virtual (Online Channels): Free</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="fw-semibold mb-2">1-Day Pass</h6>
                                        <ul class="list-unstyled small mb-0">
                                            <li>Local Delegates: USD 40</li>
                                            <li>International Delegates: USD 55</li>
                                            <li>Students: USD 25</li>
                                            <li>Virtual (Zoom VIP): USD 5</li>
                                            <li>Virtual (Online Channels): Free</li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <h6 class="fw-semibold mb-2">Select 3-Day Pass</h6>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_3_local" value="3-day|local|115" checked required>
                                            <label class="form-check-label" for="del_3_local">3-Day &ndash; Local
                                                Delegate (Kenya-based) &ndash; USD 115</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_3_international" value="3-day|international|165" required>
                                            <label class="form-check-label" for="del_3_international">3-Day
                                                &ndash; International Delegate &ndash; USD 165</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_3_student" value="3-day|student|75" required>
                                            <label class="form-check-label" for="del_3_student">3-Day &ndash; Student /
                                                Youth Delegate &ndash; USD 75</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_3_virtual_vip" value="3-day|virtual_vip|15" required>
                                            <label class="form-check-label" for="del_3_virtual_vip">3-Day &ndash;
                                                Virtual (Zoom VIP) &ndash; USD 15</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_3_virtual_free" value="3-day|virtual_free|0" required>
                                            <label class="form-check-label" for="del_3_virtual_free">3-Day &ndash;
                                                Virtual (Online Channels) &ndash; Free</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="fw-semibold mb-2">Select 1-Day Pass</h6>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_1_local" value="1-day|local|40" required>
                                            <label class="form-check-label" for="del_1_local">1-Day &ndash; Local
                                                Delegate (Kenya-based) &ndash; USD 40</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_1_international" value="1-day|international|55" required>
                                            <label class="form-check-label" for="del_1_international">1-Day
                                                &ndash; International Delegate &ndash; USD 55</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_1_student" value="1-day|student|25" required>
                                            <label class="form-check-label" for="del_1_student">1-Day &ndash; Student /
                                                Youth Delegate &ndash; USD 25</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_1_virtual_vip" value="1-day|virtual_vip|5" required>
                                            <label class="form-check-label" for="del_1_virtual_vip">1-Day &ndash;
                                                Virtual (Zoom VIP) &ndash; USD 5</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="del_category"
                                                id="del_1_virtual_free" value="1-day|virtual_free|0" required>
                                            <label class="form-check-label" for="del_1_virtual_free">1-Day &ndash;
                                                Virtual (Online Channels) &ndash; Free</label>
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">C. Payment Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Preferred Payment Method</label>
                                        <select class="form-select form-control" name="del_payment_method" required>
                                            <option value="">Select payment method</option>
                                            <option value="Mpesa">M-Pesa</option>
                                            <option value="Bank Transfer">Bank Transfer</option>
                                            <option value="Card / Online">Card / Online Payment</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Payment Reference (if already paid)</label>
                                        <input type="text" class="form-control" name="del_payment_reference">
                                    </div>
                                    <div class="col-12">
                                        <small class="text-muted">You will receive payment instructions upon submitting
                                            this form.</small>
                                    </div>
                                </div>

                                <hr class="my-4">
                                <h5 class="mb-3">D. 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 have read and agree
                                                to the KDHC 2025 Privacy Notice, and I consent to the collection and
                                                processing of my data in accordance with applicable privacy laws.</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="Diaspora-Led Cooperatives & Investment Vehicles"
                                                        id="si1">
                                                    <label class="form-check-label" for="si1">Diaspora-Led
                                                        Cooperatives &amp; Investment Vehicles</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Technology & Innovation in Cooperatives" id="si2">
                                                    <label class="form-check-label" for="si2">Technology &amp;
                                                        Innovation in Cooperatives</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Agribusiness & Food Security through Cooperatives"
                                                        id="si3">
                                                    <label class="form-check-label" for="si3">Agribusiness &amp;
                                                        Food Security through Cooperatives</label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Cooperative Finance & Financial Inclusion" id="si4">
                                                    <label class="form-check-label" for="si4">Cooperative Finance
                                                        &amp; Financial Inclusion</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Youth, Women, and Inclusive Cooperative Leadership"
                                                        id="si5">
                                                    <label class="form-check-label" for="si5">Youth, Women, and
                                                        Inclusive Cooperative Leadership</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="speaker_interest[]"
                                                        value="Cooperative Policy, Governance & Regulatory Frameworks"
                                                        id="si6">
                                                    <label class="form-check-label" for="si6">Cooperative Policy,
                                                        Governance &amp; Regulatory Frameworks</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 2025 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 Level</h5>
                                <div class="mb-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="partner_commitment"
                                            value="Platinum - USD 17,000" id="pc1">
                                        <label class="form-check-label" for="pc1">Platinum &ndash; USD 17,000</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="partner_commitment"
                                            value="Gold - USD 15,000" id="pc2">
                                        <label class="form-check-label" for="pc2">Gold &ndash; USD 15,000</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="partner_commitment"
                                            value="Diamond - USD 6,000" id="pc3">
                                        <label class="form-check-label" for="pc3">Diamond &ndash; USD 6,000</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="partner_commitment"
                                            value="Silver - USD 3,000" id="pc4">
                                        <label class="form-check-label" for="pc4">Silver &ndash; USD 3,000</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="partner_commitment"
                                            value="Bronze - USD 1,500" id="pc5">
                                        <label class="form-check-label" for="pc5">Bronze &ndash; USD 1,500</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="partner_commitment"
                                            value="In-Kind" id="pc6">
                                        <label class="form-check-label" for="pc6">In-Kind Support</label>
                                    </div>
                                </div>

                                <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. Booth Preferences</h5>
                                <div class="mb-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="exh_booth"
                                            value="Standard (2x2m) - USD 1,500" id="eb1" required>
                                        <label class="form-check-label" for="eb1">Standard (2x2m) &ndash; USD 1,500</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="exh_booth"
                                            value="Premium (3x2m) - USD 2,000" id="eb2" required>
                                        <label class="form-check-label" for="eb2">Premium (3x2m) &ndash; USD 2,000</label>
                                    </div>
                                </div>

                                <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);
                });
            });

            var checked = document.querySelector('input[name="reg_type"]:checked');
            showForm(checked ? checked.value : 'delegate');
        })();
    </script>
@endsection