<?php

require APP_PATH
    . '/Views/public/layouts/header.php';

$selectedAttendanceDays = old(
    'attendance_days',
    [
        'day_1',
        'day_2',
    ]
);

if (!is_array($selectedAttendanceDays)) {
    $selectedAttendanceDays = [];
}
?>

<section class="registration-hero">
    <div class="registration-hero-pattern"></div>

    <div class="container registration-hero-inner">
        <div>
            <span class="registration-kicker">
                Delegate Registration
            </span>

            <h1>
                Register for the
                <span>
                    2nd Provincial Conference
                </span>
            </h1>

            <p>
                Traditional Authorities, Government and
                Industry on Bridging the Digital Divide
            </p>
        </div>

        <div class="registration-event-card">
            <div>
                <span>Date</span>

                <strong>
                    23–24 July 2026
                </strong>
            </div>

            <div>
                <span>Venue</span>

                <strong>
                    The Ranch Resort, Polokwane
                </strong>
            </div>
        </div>
    </div>
</section>

<section class="registration-section">
    <div class="container registration-layout">

        <aside class="registration-sidebar">

            <div class="registration-sidebar-card">
                <span class="sidebar-step-number">
                    01
                </span>

                <h2>
                    Your participation matters
                </h2>

                <p>
                    Provide your delegate details and
                    indicate the connectivity or development
                    challenge affecting your organisation
                    or community.
                </p>

                <ul>
                    <li>
                        Secure digital registration
                    </li>

                    <li>
                        Unique registration number
                    </li>

                    <li>
                        QR-enabled conference check-in
                    </li>

                    <li>
                        Digital badge delivery
                    </li>
                </ul>
            </div>

            <div class="registration-contact-card">
                <span>
                    Registration assistance
                </span>

                <strong>
                    Mr C Nkadimeng
                </strong>

                <a href="tel:+27744628633">
                    +27 74 462 8633
                </a>

                <a href="mailto:charley@linkagegroup.co.za">
                    charley@linkagegroup.co.za
                </a>
            </div>

        </aside>

        <div class="registration-form-card">

            <?php if (!empty($errors)): ?>
                <div class="form-alert form-alert-error">
                    <strong>
                        Please review the information below.
                    </strong>

                    <ul>
                        <?php foreach ($errors as $error): ?>
                            <li>
                                <?= e($error) ?>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            <?php endif; ?>

            <?php if ($message = flash('error')): ?>
                <div class="form-alert form-alert-error">
                    <?= e($message) ?>
                </div>
            <?php endif; ?>

            <form
                method="POST"
                action="<?= e(base_url('/register')) ?>"
                id="delegateRegistrationForm"
            >
                <?= csrf_field() ?>

                <div class="form-section-heading">
                    <span>01</span>

                    <div>
                        <h2>
                            Delegate information
                        </h2>

                        <p>
                            Enter your personal and
                            professional details.
                        </p>
                    </div>
                </div>

                <div class="form-grid form-grid-three">

                    <div class="form-group">
                        <label for="title">
                            Title
                        </label>

                        <select
                            id="title"
                            name="title"
                        >
                            <option value="">
                                Select title
                            </option>

                            <?php
                            $titles = [
                                'Adv',
                                'Cllr',
                                'Dr',
                                'Hon',
                                'Mr',
                                'Mrs',
                                'Ms',
                                'Prof',
                                'Kgosi',
                                'Kgoshi',
                                'Chief',
                                'Inkosi',
                                'Other',
                            ];
                            ?>

                            <?php foreach ($titles as $title): ?>
                                <option
                                    value="<?= e($title) ?>"
                                    <?= selected(
                                        old('title'),
                                        $title
                                    ) ?>
                                >
                                    <?= e($title) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group form-group-span-two">
                        <label for="full_names">
                            Full names
                            <span>*</span>
                        </label>

                        <input
                            type="text"
                            id="full_names"
                            name="full_names"
                            value="<?= e(old('full_names')) ?>"
                            maxlength="200"
                            autocomplete="name"
                            required
                        >
                    </div>

                </div>

                <div class="form-grid">

                    <div class="form-group">
                        <label for="position_title">
                            Title / Position
                            <span>*</span>
                        </label>

                        <input
                            type="text"
                            id="position_title"
                            name="position_title"
                            value="<?= e(old('position_title')) ?>"
                            maxlength="180"
                            required
                        >
                    </div>

                    <div class="form-group">
                        <label for="organisation">
                            Organisation / Institution
                        </label>

                        <input
                            type="text"
                            id="organisation"
                            name="organisation"
                            value="<?= e(old('organisation')) ?>"
                            maxlength="255"
                        >
                    </div>

                </div>

                <div class="form-grid">

                    <div class="form-group">
                        <label for="traditional_council">
                            Traditional Council
                        </label>

                        <input
                            type="text"
                            id="traditional_council"
                            name="traditional_council"
                            value="<?= e(old('traditional_council')) ?>"
                            maxlength="255"
                        >
                    </div>

                    <div class="form-group">
                        <label for="category_id">
                            Delegate category
                            <span>*</span>
                        </label>

                        <select
                            id="category_id"
                            name="category_id"
                            required
                        >
                            <option value="">
                                Select delegate category
                            </option>

                            <?php foreach ($categories as $category): ?>
                                <option
                                    value="<?= e($category['id']) ?>"
                                    <?= selected(
                                        old('category_id'),
                                        $category['id']
                                    ) ?>
                                >
                                    <?= e($category['name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                </div>

                <div class="form-section-heading">
                    <span>02</span>

                    <div>
                        <h2>
                            Location and contact details
                        </h2>

                        <p>
                            Tell us where you are located
                            and how we should contact you.
                        </p>
                    </div>
                </div>

                <div class="form-grid">

                    <div class="form-group">
                        <label for="district_id">
                            District
                            <span>*</span>
                        </label>

                        <select
                            id="district_id"
                            name="district_id"
                            data-municipality-url="<?= e(
                                base_url(
                                    '/api/municipalities/{districtId}'
                                )
                            ) ?>"
                            required
                        >
                            <option value="">
                                Select district
                            </option>

                            <?php foreach ($districts as $district): ?>
                                <option
                                    value="<?= e($district['id']) ?>"
                                    <?= selected(
                                        old('district_id'),
                                        $district['id']
                                    ) ?>
                                >
                                    <?= e($district['name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="municipality_id">
                            Local municipality
                        </label>

                        <select
                            id="municipality_id"
                            name="municipality_id"
                        >
                            <option value="">
                                Select municipality
                            </option>

                            <?php foreach ($municipalities as $municipality): ?>
                                <option
                                    value="<?= e($municipality['id']) ?>"
                                    <?= selected(
                                        old('municipality_id'),
                                        $municipality['id']
                                    ) ?>
                                >
                                    <?= e($municipality['name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                </div>

                <div class="form-grid">

                    <div class="form-group">
                        <label for="cell_number">
                            Cell number
                            <span>*</span>
                        </label>

                        <input
                            type="tel"
                            id="cell_number"
                            name="cell_number"
                            value="<?= e(old('cell_number')) ?>"
                            placeholder="+27 00 000 0000"
                            maxlength="20"
                            autocomplete="tel"
                            required
                        >
                    </div>

                    <div class="form-group">
                        <label for="email">
                            Email address
                            <span>*</span>
                        </label>

                        <input
                            type="email"
                            id="email"
                            name="email"
                            value="<?= e(old('email')) ?>"
                            maxlength="190"
                            autocomplete="email"
                            required
                        >
                    </div>

                </div>

                <div class="form-section-heading">
                    <span>03</span>

                    <div>
                        <h2>
                            Participation information
                        </h2>

                        <p>
                            Help the organisers prepare
                            for your participation.
                        </p>
                    </div>
                </div>

                <fieldset class="form-group attendance-fieldset">
                    <legend>
                        Attendance days
                        <span>*</span>
                    </legend>

                    <div class="attendance-options">

                        <label class="attendance-option">
                            <input
                                type="checkbox"
                                name="attendance_days[]"
                                value="day_1"
                                <?= checked(
                                    $selectedAttendanceDays,
                                    'day_1'
                                ) ?>
                            >

                            <span class="attendance-option-body">
                                <strong>
                                    Day 1
                                </strong>

                                <small>
                                    23 July 2026
                                </small>
                            </span>
                        </label>

                        <label class="attendance-option">
                            <input
                                type="checkbox"
                                name="attendance_days[]"
                                value="day_2"
                                <?= checked(
                                    $selectedAttendanceDays,
                                    'day_2'
                                ) ?>
                            >

                            <span class="attendance-option-body">
                                <strong>
                                    Day 2
                                </strong>

                                <small>
                                    24 July 2026
                                </small>
                            </span>
                        </label>

                    </div>
                </fieldset>

                <div class="form-group">
                    <label for="specific_challenge">
                        Specific network or development challenge
                    </label>

                    <textarea
                        id="specific_challenge"
                        name="specific_challenge"
                        rows="6"
                        maxlength="5000"
                        placeholder="Describe the connectivity, digital access or development challenge affecting your community or organisation."
                    ><?= e(old('specific_challenge')) ?></textarea>

                    <small class="form-help">
                        This information will help shape
                        conference discussions, resolutions
                        and implementation priorities.
                    </small>
                </div>

                <div class="form-grid">

                    <div class="form-group">
                        <label for="dietary_requirements">
                            Dietary requirements
                        </label>

                        <textarea
                            id="dietary_requirements"
                            name="dietary_requirements"
                            rows="3"
                            maxlength="1000"
                            placeholder="None, vegetarian, allergies, halaal, etc."
                        ><?= e(old('dietary_requirements')) ?></textarea>
                    </div>

                    <div class="form-group">
                        <label for="accessibility_requirements">
                            Accessibility requirements
                        </label>

                        <textarea
                            id="accessibility_requirements"
                            name="accessibility_requirements"
                            rows="3"
                            maxlength="1000"
                            placeholder="Indicate any accessibility assistance required."
                        ><?= e(old('accessibility_requirements')) ?></textarea>
                    </div>

                </div>

                <div class="consent-panel">
                    <label class="consent-checkbox">
                        <input
                            type="checkbox"
                            name="consent_given"
                            value="1"
                            <?= checked(
                                old('consent_given'),
                                '1'
                            ) ?>
                            required
                        >

                        <span>
                            I consent to Linkage SA Group
                            processing my personal information
                            for conference registration,
                            communication, accreditation,
                            badge generation and attendance
                            management.
                        </span>
                    </label>
                </div>

                <div class="registration-submit">

                    <div>
                        <strong>
                            Ready to submit?
                        </strong>

                        <p>
                            Confirm that your information
                            is accurate before registering.
                        </p>
                    </div>

                    <button
                        type="submit"
                        class="btn btn-primary registration-submit-btn"
                        id="registrationSubmitButton"
                    >
                        <span>
                            Submit Registration
                        </span>

                        <svg
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <path d="m9 18 6-6-6-6"/>
                        </svg>
                    </button>

                </div>

            </form>
        </div>
    </div>
</section>

<script src="<?= e(asset('js/registration.js')) ?>"></script>

<?php

require APP_PATH
    . '/Views/public/layouts/footer.php';
?>