@extends('layout.app')

@section('body')


<!-- ============================================================
     HEADER
============================================================= -->

@include('header')



<!-- ============================================================
     FLASH MESSAGES
============================================================= -->

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

    @if(session('success'))

        <div class="pt-6">

            <div
                class="flex items-start gap-3 rounded-2xl
                       border border-emerald-500/20
                       bg-emerald-500/[0.08]
                       px-4 py-4"
                role="alert"
            >

                <div
                    class="flex h-9 w-9 shrink-0 items-center justify-center
                           rounded-xl bg-emerald-500/10
                           text-emerald-400"
                >
                    <i class="bi bi-check-circle-fill"></i>
                </div>

                <div class="min-w-0 flex-1">

                    <p class="text-sm font-semibold text-emerald-300">
                        Inscription réussie
                    </p>

                    <p class="mt-1 text-xs leading-5 text-emerald-300 dark:text-emerald-200/60">
                        {{ session('success') }}
                    </p>

                </div>

                <button
                    type="button"
                    onclick="this.closest('[role=alert]').remove()"
                    class="shrink-0 text-lg leading-none text-emerald-300/40
                           transition hover:text-emerald-300"
                    aria-label="Fermer"
                >
                    &times;
                </button>

            </div>

        </div>

    @endif


    @if(session('error'))

        <div class="pt-6">

            <div
                class="flex items-start gap-3 rounded-2xl
                       border border-red-500/20
                       bg-red-500/[0.08]
                       px-4 py-4"
                role="alert"
            >

                <div
                    class="flex h-9 w-9 shrink-0 items-center justify-center
                           rounded-xl bg-red-500/10
                           text-red-400"
                >
                    <i class="bi bi-exclamation-circle-fill"></i>
                </div>

                <div class="min-w-0 flex-1">

                    <p class="text-sm font-semibold text-red-300">
                        Une erreur est survenue
                    </p>

                    <p class="mt-1 text-xs leading-5 text-red-200/60">
                        {{ session('error') }}
                    </p>

                </div>

                <button
                    type="button"
                    onclick="this.closest('[role=alert]').remove()"
                    class="shrink-0 text-lg leading-none text-red-300/40
                           transition hover:text-red-300"
                    aria-label="Fermer"
                >
                    &times;
                </button>

            </div>

        </div>

    @endif


    @if($errors->any())

        <div class="pt-6">

            <div
                class="rounded-2xl
                       border border-red-500/20
                       bg-red-500/[0.08]
                       px-4 py-4"
                role="alert"
            >

                <div class="flex items-start gap-3">

                    <div
                        class="flex h-9 w-9 shrink-0 items-center justify-center
                               rounded-xl bg-red-500/10
                               text-red-400"
                    >
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <p class="text-sm font-semibold text-red-300">
                            Vérifiez les informations saisies
                        </p>

                        <ul class="mt-2 space-y-1">

                            @foreach($errors->all() as $error)

                                <li
                                    class="flex items-start gap-2 text-xs
                                           leading-5 text-red-200/60"
                                >
                                    <span
                                        class="mt-2 h-1 w-1 shrink-0 rounded-full
                                               bg-red-400"
                                    ></span>

                                    <span>
                                        {{ $error }}
                                    </span>
                                </li>

                            @endforeach

                        </ul>

                    </div>

                    <button
                        type="button"
                        onclick="this.closest('[role=alert]').remove()"
                        class="shrink-0 text-lg leading-none text-red-300/40
                               transition hover:text-red-300"
                        aria-label="Fermer"
                    >
                        &times;
                    </button>

                </div>

            </div>

        </div>

    @endif

</div>



<!-- ============================================================
     MAIN
============================================================= -->

<main
    class="min-h-[calc(100vh-68px)] bg-[var(--surface-page)]
           px-4 py-8 sm:px-6 lg:px-8"
>

    <div class="mx-auto max-w-6xl">


        <!-- ====================================================
             PAGE HEADER
        ===================================================== -->

        <section class="mb-8">

            <p class="mb-2 text-sm text-[var(--content-muted)]">
                Inscriptions
            </p>

            <h1
                class="text-3xl font-bold tracking-tight text-[var(--content-primary)] sm:text-4xl"
            >
                Inscrire un enfant
            </h1>

            <p
                class="mt-3 max-w-2xl text-sm leading-6 text-[var(--content-muted)]"
            >
                Renseignez les informations de votre enfant puis
                sélectionnez les activités auxquelles vous souhaitez
                l'inscrire.
            </p>

        </section>



        <form
            method="POST"
            action="{{ Route('inscription-activity') }}"
            id="registration-form"
        >

            @csrf


            <!-- ====================================================
                 CHILD INFORMATION
            ===================================================== -->

            <section
                class="mb-6 overflow-hidden rounded-2xl
                       border border-[var(--line-subtle)]
                       bg-[var(--surface-panel-strong)]"
            >

                <div
                    class="flex items-center gap-4
                           border-b border-[var(--line-subtle)]
                           px-5 py-4"
                >

                    <div
                        class="flex h-10 w-10 shrink-0 items-center justify-center
                               rounded-xl bg-[var(--color-orange)]/10
                               text-[var(--color-orange)]"
                    >
                        <i class="bi bi-person-vcard"></i>
                    </div>

                    <div>

                        <h2 class="text-sm font-semibold text-[var(--content-primary)]">
                            Informations de l'enfant
                        </h2>

                        <p class="mt-1 text-xs text-[var(--content-muted)]">
                            Ces informations permettent d'identifier
                            l'enfant inscrit.
                        </p>

                    </div>

                </div>


                <div class="p-5 sm:p-6">

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                        <!-- Adresse mail -->
                        <div>

                            <label
                                for="mail"
                                class="mb-2 block text-xs font-medium text-[var(--content-muted)]"
                            >
                                Adresse mail
                                <span class="text-[var(--color-orange)]">*</span>
                            </label>

                            <input
                                type="mail"
                                id="mail"
                                name="mail"
                                required
                                value="{{ old('mail') }}"
                                placeholder="Adresse mail"
                                class="w-full rounded-xl border border-[var(--line-subtle)]
                                       bg-[var(--surface-page)] px-4 py-3 text-sm
                                       text-[var(--content-primary)] placeholder:text-[var(--content-muted)]
                                       outline-none transition
                                       focus:border-[var(--color-orange)]/50
                                       focus:ring-2
                                       focus:ring-[var(--color-orange)]/10
                                       @error('mail')
                                           border-red-500/50
                                       @enderror"
                            >

                            @error('mail')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>
                        
                        <!-- Prénom -->

                        <div>

                            <label
                                for="child_first_name"
                                class="mb-2 block text-xs font-medium text-[var(--content-muted)]"
                            >
                                Prénom
                                <span class="text-[var(--color-orange)]">*</span>
                            </label>

                            <input
                                type="text"
                                id="child_first_name"
                                name="child_first_name"
                                required
                                value="{{ old('child_first_name') }}"
                                placeholder="Prénom de l'enfant"
                                class="w-full rounded-xl border border-[var(--line-subtle)]
                                       bg-[var(--surface-page)] px-4 py-3 text-sm
                                       text-[var(--content-primary)] placeholder:text-[var(--content-muted)]
                                       outline-none transition
                                       focus:border-[var(--color-orange)]/50
                                       focus:ring-2
                                       focus:ring-[var(--color-orange)]/10
                                       @error('child_first_name')
                                           border-red-500/50
                                       @enderror"
                            >

                            @error('child_first_name')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>


                        <!-- Nom -->

                        <div>

                            <label
                                for="child_last_name"
                                class="mb-2 block text-xs font-medium text-[var(--content-muted)]"
                            >
                                Nom
                                <span class="text-[var(--color-orange)]">*</span>
                            </label>

                            <input
                                type="text"
                                id="child_last_name"
                                name="child_last_name"
                                required
                                value="{{ old('child_last_name') }}"
                                placeholder="Nom de l'enfant"
                                class="w-full rounded-xl border border-[var(--line-subtle)]
                                       bg-[var(--surface-page)] px-4 py-3 text-sm
                                       text-[var(--content-primary)] placeholder:text-[var(--content-muted)]
                                       outline-none transition
                                       focus:border-[var(--color-orange)]/50
                                       focus:ring-2
                                       focus:ring-[var(--color-orange)]/10
                                       @error('child_last_name')
                                           border-red-500/50
                                       @enderror"
                            >

                            @error('child_last_name')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>


                        <!-- Date de naissance -->

                        <div>

                            <label
                                for="child_birth_date"
                                class="mb-2 block text-xs font-medium text-[var(--content-muted)]"
                            >
                                Date de naissance
                                <span class="text-[var(--color-orange)]">*</span>
                            </label>

                            <div class="relative">

                                <i
                                    class="bi bi-calendar3 pointer-events-none
                                           absolute left-4 top-1/2
                                           -translate-y-1/2
                                           text-[var(--content-muted)]"
                                ></i>

                                <input
                                    type="date"
                                    id="child_birth_date"
                                    name="child_birth_date"
                                    required
                                    value="{{ old('child_birth_date') }}"
                                    class="w-full rounded-xl border border-[var(--line-subtle)]
                                           bg-[var(--surface-page)] py-3 pl-11 pr-4
                                           text-sm text-[var(--content-primary)] outline-none
                                           transition
                                           focus:border-[var(--color-orange)]/50
                                           focus:ring-2
                                           focus:ring-[var(--color-orange)]/10
                                           @error('child_birth_date')
                                               border-red-500/50
                                           @enderror"
                                >

                            </div>

                            @error('child_birth_date')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>


                        <!-- Sexe -->

                        <div>

                            <label
                                for="child_sex"
                                class="mb-2 block text-xs font-medium text-[var(--content-muted)]"
                            >
                                Sexe
                            </label>

                            <select
                                id="child_sex"
                                name="child_sex"
                                class="w-full rounded-xl border border-[var(--line-subtle)]
                                       bg-[var(--surface-page)] px-4 py-3 text-sm
                                       text-[var(--content-primary)] outline-none transition
                                       focus:border-[var(--color-orange)]/50
                                       focus:ring-2
                                       focus:ring-[var(--color-orange)]/10"
                            >

                                <option value="" class="bg-[var(--surface-page)]">
                                    Sélectionner
                                </option>

                                <option
                                    value="fille"
                                    class="bg-[var(--surface-page)]"
                                    @selected(old('child_sex') === 'fille')
                                >
                                    Fille
                                </option>

                                <option
                                    value="garcon"
                                    class="bg-[var(--surface-page)]"
                                    @selected(old('child_sex') === 'garcon')
                                >
                                    Garçon
                                </option>

                            </select>

                            @error('child_sex')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>


                        <!-- Groupe -->

                        <div>

                            <label
                                for="child_group"
                                class="mb-2 block text-xs font-medium text-[var(--content-muted)]"
                            >
                                Classe
                            </label>

                            <select
                                id="child_group"
                                name="child_group"
                                class="w-full rounded-xl border border-[var(--line-subtle)]
                                       bg-[var(--surface-page)] px-4 py-3 text-sm
                                       text-[var(--content-primary)] outline-none transition
                                       focus:border-[var(--color-orange)]/50
                                       focus:ring-2
                                       focus:ring-[var(--color-orange)]/10"
                            >

                                <option value="" class="bg-[var(--surface-page)]">
                                    Sélectionner
                                </option>

                                <option value="petite_section" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'petite_section')>
                                    Petite section
                                </option>

                                <option value="moyenne_section" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'moyenne_section')>
                                    Moyenne section
                                </option>

                                <option value="grande_section" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'grande_section')>
                                    Grande section
                                </option>

                                <option value="cp" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'cp')>
                                    CP
                                </option>

                                <option value="ce1" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'ce1')>
                                    CE1
                                </option>

                                <option value="ce2" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'ce2')>
                                    CE2
                                </option>

                                <option value="cm1" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'cm1')>
                                    CM1
                                </option>

                                <option value="cm2" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'cm2')>
                                    CM2
                                </option>

                                <option value="college" class="bg-[var(--surface-page)]" @selected(old('child_group') === 'college')>
                                    Collège
                                </option>

                            </select>

                            @error('child_group')
                                <p class="mt-2 text-xs text-red-400">
                                    {{ $message }}
                                </p>
                            @enderror

                        </div>

                    </div>

                </div>

            </section>

            <section
                class="mb-6 overflow-hidden rounded-2xl border border-[var(--line-subtle)]
                       bg-[var(--surface-panel-strong)]"
            >
                <div class="flex items-center gap-4 border-b border-[var(--line-subtle)] px-5 py-4">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-orange)]/10 text-[var(--color-orange)]">
                        <i class="bi bi-heart-pulse"></i>
                    </div>
                    <div>
                        <h2 class="text-sm font-semibold text-[var(--content-primary)]">Informations sanitaires</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">Ces informations sont utilisées pour la sécurité et l'accueil de l'enfant.</p>
                    </div>
                </div>

                <div class="space-y-6 p-5 sm:p-6">
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
                        <div>
                            <label for="child_city_birth" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Lieu de naissance <span class="text-[var(--color-orange)]">*</span></label>
                            <input type="text" id="child_city_birth" name="child_city_birth" required value="{{ old('child_city_birth') }}" placeholder="Ville de naissance" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-4 py-3 text-sm text-[var(--content-primary)] placeholder:text-[var(--content-muted)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                        </div>
                        <div>
                            <label for="child_social_security_number" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">N° allocataire CAF</label>
                            <input type="text" id="child_social_security_number" name="child_social_security_number" value="{{ old('child_social_security_number') }}" placeholder="Numéro allocataire" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-4 py-3 text-sm text-[var(--content-primary)] placeholder:text-[var(--content-muted)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                        </div>
                        <div>
                            <label for="child_coefficient_caf" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Coefficient CAF</label>
                            <input type="text" id="child_coefficient_caf" name="child_coefficient_caf" value="{{ old('child_coefficient_caf') }}" placeholder="Coefficient" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-4 py-3 text-sm text-[var(--content-primary)] placeholder:text-[var(--content-muted)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                        </div>
                    </div>

                    <div>
                        <p class="mb-3 text-xs font-medium text-[var(--content-muted)]">Autorisations</p>
                        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                            @foreach ([
                                ['name' => 'child_leave_alone', 'label' => 'Départ seul'],
                                ['name' => 'child_swim', 'label' => 'Sait nager'],
                                ['name' => 'child_doncheroi', 'label' => 'Droit à l’image'],
                                ['name' => 'child_authorized_take_activities', 'label' => 'Participation aux activités'],
                                ['name' => 'child_authorized_transport', 'label' => 'Transport autorisé'],
                                ['name' => 'child_authorized_photo', 'label' => 'Photo autorisée'],
                                ['name' => 'child_authorized_heal', 'label' => 'Soins autorisés'],
                            ] as $permission)
                                <label class="flex items-center gap-2 rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-3 py-3 text-xs text-[var(--content-secondary)]">
                                    <input type="checkbox" name="{{ $permission['name'] }}" value="1" @checked(old($permission['name'])) class="h-4 w-4 accent-[var(--color-orange)]">
                                    {{ $permission['label'] }}
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        @foreach ([
                            ['name' => 'child_allow_take', 'label' => 'Personnes autorisées à reprendre l’enfant'],
                            ['name' => 'child_allergy', 'label' => 'Allergies'],
                            ['name' => 'child_medical', 'label' => 'Informations médicales'],
                            ['name' => 'child_treatment', 'label' => 'Traitement'],
                            ['name' => 'child_food_constraint', 'label' => 'Contraintes alimentaires'],
                            ['name' => 'child_observation', 'label' => 'Observations'],
                        ] as $field)
                            <div class="{{ $loop->first || $loop->last ? 'sm:col-span-2' : '' }}">
                                <label for="{{ $field['name'] }}" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">{{ $field['label'] }}</label>
                                <textarea id="{{ $field['name'] }}" name="{{ $field['name'] }}" rows="2" placeholder="{{ $field['label'] }}" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-4 py-3 text-sm text-[var(--content-primary)] placeholder:text-[var(--content-muted)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">{{ old($field['name']) }}</textarea>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>


            <section
                class="mb-6 overflow-hidden rounded-2xl border border-[var(--line-subtle)]
                       bg-[var(--surface-panel-strong)]"
            >
                <div
                    class="flex items-center gap-4 border-b border-[var(--line-subtle)]
                           px-5 py-4"
                >
                    <div
                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl
                               bg-[var(--color-orange)]/10 text-[var(--color-orange)]"
                    >
                        <i class="bi bi-person-badge"></i>
                    </div>
                    <div>
                        <div class="flex items-center gap-2">
                            <h2 class="text-sm font-semibold text-[var(--content-primary)]">
                                Responsables légaux
                            </h2>
                            <span
                                id="legal-guardian-count"
                                class="rounded-md border border-[var(--line-subtle)]
                                       bg-[var(--surface-panel-strong)] px-2 py-0.5
                                       text-[10px] font-medium text-[var(--content-muted)]"
                            >
                                1 responsable
                            </span>
                        </div>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">
                            Ces informations permettent de contacter la personne responsable de l'enfant.
                        </p>
                    </div>
                </div>

                <div id="legal-guardians-container" class="space-y-4 p-5 sm:p-6">
                    <div
                        class="legal-guardian rounded-xl border border-[var(--line-subtle)]
                               bg-[var(--surface-page)] p-4"
                        data-guardian-index="0"
                    >
                        <div class="mb-4 flex items-center justify-between gap-3">
                            <h3 class="text-xs font-semibold text-[var(--content-secondary)]">
                                Responsable légal 1
                            </h3>
                        </div>
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div>
                        <label for="legal_guardians_0_first_name" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">
                            Prénom <span class="text-[var(--color-orange)]">*</span>
                        </label>
                        <input
                            type="text"
                            id="legal_guardians_0_first_name"
                            name="legal_guardians[0][first_name]"
                            required
                            value="{{ old('legal_guardians.0.first_name') }}"
                            placeholder="Prénom du responsable"
                            class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-4 py-3 text-sm text-[var(--content-primary)]
                                   placeholder:text-[var(--content-muted)] outline-none transition
                                   focus:border-[var(--color-orange)]/50 focus:ring-2
                                   focus:ring-[var(--color-orange)]/10"
                        >
                    </div>

                    <div>
                        <label for="legal_guardians_0_name" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">
                            Nom <span class="text-[var(--color-orange)]">*</span>
                        </label>
                        <input
                            type="text"
                            id="legal_guardians_0_name"
                            name="legal_guardians[0][name]"
                            required
                            value="{{ old('legal_guardians.0.name') }}"
                            placeholder="Nom du responsable"
                            class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-4 py-3 text-sm text-[var(--content-primary)]
                                   placeholder:text-[var(--content-muted)] outline-none transition
                                   focus:border-[var(--color-orange)]/50 focus:ring-2
                                   focus:ring-[var(--color-orange)]/10"
                        >
                    </div>

                    <div>
                        <label for="legal_guardians_0_email" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">
                            Adresse email <span class="text-[var(--color-orange)]">*</span>
                        </label>
                        <input
                            type="email"
                            id="legal_guardians_0_email"
                            name="legal_guardians[0][email]"
                            required
                            value="{{ old('legal_guardians.0.email', old('mail')) }}"
                            placeholder="Email du responsable"
                            class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-4 py-3 text-sm text-[var(--content-primary)]
                                   placeholder:text-[var(--content-muted)] outline-none transition
                                   focus:border-[var(--color-orange)]/50 focus:ring-2
                                   focus:ring-[var(--color-orange)]/10"
                        >
                    </div>

                    <div>
                        <label for="legal_guardians_0_phone" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">
                            Téléphone <span class="text-[var(--color-orange)]">*</span>
                        </label>
                        <input
                            type="tel"
                            id="legal_guardians_0_phone"
                            name="legal_guardians[0][phone]"
                            required
                            value="{{ old('legal_guardians.0.phone') }}"
                            placeholder="06 00 00 00 00"
                            class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-4 py-3 text-sm text-[var(--content-primary)]
                                   placeholder:text-[var(--content-muted)] outline-none transition
                                   focus:border-[var(--color-orange)]/50 focus:ring-2
                                   focus:ring-[var(--color-orange)]/10"
                        >
                    </div>

                    <div class="sm:col-span-2">
                        <label for="legal_guardians_0_address" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">
                            Adresse <span class="text-[var(--color-orange)]">*</span>
                        </label>
                        <textarea
                            id="legal_guardians_0_address"
                            name="legal_guardians[0][address]"
                            rows="2"
                            required
                            placeholder="Adresse complète du responsable"
                            class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-4 py-3 text-sm text-[var(--content-primary)]
                                   placeholder:text-[var(--content-muted)] outline-none transition
                                   focus:border-[var(--color-orange)]/50 focus:ring-2
                                   focus:ring-[var(--color-orange)]/10"
                        >{{ old('legal_guardians.0.address') }}</textarea>
                    </div>
                        </div>
                    </div>

                    <button
                        type="button"
                        id="add-legal-guardian"
                        class="flex h-10 items-center gap-2 rounded-xl border border-[var(--color-orange)]/30
                               px-4 text-xs font-semibold text-[var(--color-orange)] transition
                               hover:bg-[var(--color-orange)]/[0.08]"
                    >
                        <i class="bi bi-plus-lg"></i>
                        Ajouter un responsable légal
                    </button>
                </div>
            </section>



            <!-- ====================================================
                 CONTENT
            ===================================================== -->

            <div
                class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_320px]"
            >

                <!-- ==================================================
                     ACTIVITIES
                =================================================== -->

                <section>

                    <div class="mb-4 flex items-end justify-between">

                        <div>

                            <p class="text-[10px] font-medium uppercase
                                      tracking-[0.15em] text-[var(--content-muted)]">
                                Programme
                            </p>

                            <h2 class="mt-1 text-lg font-semibold text-[var(--content-primary)]">
                                Choisissez les activités
                            </h2>

                        </div>

                        <span
                            id="selected-activities-count"
                            class="rounded-full border border-[var(--line-subtle)]
                                   bg-[var(--surface-panel-strong)] px-3 py-1.5
                                   text-[10px] font-medium text-[var(--content-muted)]"
                        >
                            0 activité
                        </span>

                    </div>


                    <div class="space-y-4">

                        @forelse($activities as $activity)

                            @php
                                $activityId = data_get($activity, 'id');
                                $options = data_get($activity, 'options', []);
                                $price = (float) data_get($activity, 'price', 0);
                                $places = data_get($activity, 'places');
                                $capacity = data_get($activity, 'capacity');
                            @endphp


                            <!-- ACTIVITY CARD -->

                            <article
                                data-activity-card
                                data-activity-id="{{ $activity->id }}"
                                class="overflow-hidden rounded-2xl
                                       border border-[var(--line-subtle)]
                                       bg-[var(--surface-panel-strong)]
                                       transition-all duration-200"
                            >

                                <!-- Activity header -->

                                <div class="p-5 sm:p-6">

                                    <div class="flex items-start gap-4">

                                        <!-- Selection -->

                                        <label class="mt-1 cursor-pointer">

                                            <input
                                                type="checkbox"
                                                name="activities[]"
                                                value="{{ $activity->id }}"
                                                data-activity-checkbox
                                                class="sr-only"
                                            >

                                            <span
                                                data-activity-check
                                                class="flex h-6 w-6 items-center justify-center
                                                       rounded-lg border border-[var(--line-subtle)]
                                                       bg-transparent text-transparent
                                                       transition-all duration-200"
                                            >
                                                <i class="bi bi-check text-sm"></i>
                                            </span>

                                        </label>


                                        <div class="min-w-0 flex-1">

                                            <div
                                                class="mb-3 inline-flex items-center gap-2
                                                       rounded-full border border-emerald-500/10
                                                       bg-emerald-500/[0.06]
                                                       px-2.5 py-1 text-[10px]
                                                       font-medium text-emerald-400"
                                            >
                                                <span
                                                    class="h-1.5 w-1.5 rounded-full bg-emerald-400"
                                                ></span>

                                                Inscriptions ouvertes
                                            </div>


                                            <h3
                                                class="text-xl font-bold tracking-tight text-[var(--content-primary)]"
                                            >
                                                {{ $activity->name_activity }}
                                            </h3>


                                            @if($activity->description_activity)

                                                <p
                                                    class="mt-2 text-sm leading-6 text-[var(--content-muted)]"
                                                >
                                                    {{ $activity->description_activity }}
                                                </p>

                                            @endif


                                            <!-- Meta -->

                                            <div class="mt-5 flex flex-wrap gap-2">

                                                @if($activity->date_start_activity)

                                                    <div
                                                        class="flex items-center gap-2 rounded-lg
                                                               border border-[var(--line-subtle)]
                                                               bg-[var(--surface-panel-strong)] px-3 py-2"
                                                    >
                                                        <i
                                                            class="bi bi-calendar3
                                                                   text-[var(--color-orange)]"
                                                        ></i>

                                                        <span class="text-[11px] text-[var(--content-muted)]">
                                                            {{ \Carbon\Carbon::parse($activity->date_start_activity)->translatedFormat('d M Y') }}

                                                            @if($activity->date_end_activity)
                                                                —
                                                                {{ \Carbon\Carbon::parse($activity->date_end_activity)->translatedFormat('d M Y') }}
                                                            @endif
                                                        </span>

                                                    </div>

                                                @endif


                                                @if(!is_null($activity->limit_activity))

                                                    <div
                                                        class="flex items-center gap-2 rounded-lg
                                                               border border-[var(--line-subtle)]
                                                               bg-[var(--surface-panel-strong)] px-3 py-2"
                                                    >
                                                        <i
                                                            class="bi bi-people
                                                                   text-[var(--color-orange)]"
                                                        ></i>

                                                        <span class="text-[11px] text-[var(--content-muted)]">
                                                            {{ $activity->limit_activity }} / {{ $activity->limit_activity }} places
                                                        </span>

                                                    </div>

                                                @endif

                                            </div>

                                        </div>

                                    </div>

                                </div>



                                <!-- Options -->

                                @if(count($options))

                                    <div
                                        data-activity-options
                                        class="hidden border-t border-[var(--line-subtle)] bg-[var(--surface-page)]"
                                    >

                                        <div class="px-5 py-4 sm:px-6">

                                            <div class="mb-3">

                                                <p
                                                    class="text-xs font-semibold text-[var(--content-secondary)]"
                                                >
                                                    Options disponibles
                                                </p>

                                                <p
                                                    class="mt-1 text-[11px] text-[var(--content-muted)]"
                                                >
                                                    Ajoutez les services souhaités
                                                    pour cette activité.
                                                </p>

                                            </div>


                                            <div class="space-y-2">

                                                @foreach($options as $option)

                                                    @php
                                                        $optionId = data_get($option, 'id');
                                                        $optionPrice = (float) data_get($option, 'price', 0);
                                                    @endphp

                                                    <label class="block cursor-pointer">

                                                        <input
                                                            type="checkbox"
                                                            name="options[]"
                                                            value="{{ $optionId }}"
                                                            data-option-checkbox
                                                            data-activity-id="{{ $activityId }}"
                                                            data-label="{{ $option->name_options_activity }}"
                                                            data-price="{{ $optionPrice }}"
                                                            class="sr-only"
                                                        >

                                                        <div
                                                            data-option-card
                                                            class="flex items-center gap-3 rounded-xl
                                                                   border border-[var(--line-subtle)]
                                                                   bg-[var(--surface-panel-strong)] p-3
                                                                   transition-all duration-200
                                                                   hover:border-[var(--line-subtle)]"
                                                        >

                                                            <div
                                                                data-option-icon
                                                                class="flex h-10 w-10 shrink-0
                                                                       items-center justify-center
                                                                       rounded-lg bg-[var(--surface-panel-strong)]
                                                                       text-[var(--content-muted)]
                                                                       transition-all"
                                                            >
                                                                <i
                                                                    class="bi {{ data_get($option, 'icon', 'bi-plus-lg') }}"
                                                                ></i>
                                                            </div>


                                                            <div class="min-w-0 flex-1">

                                                                <p
                                                                    class="text-xs font-medium text-[var(--content-secondary)]"
                                                                >
                                                                    {{ $option->name_options_activity }}
                                                                </p>

                                                                @if(data_get($option, 'description'))

                                                                    <p
                                                                        class="mt-0.5 text-[10px]
                                                                               leading-4 text-[var(--content-muted)]"
                                                                    >
                                                                        {{ data_get($option, 'description') }}
                                                                    </p>

                                                                @endif

                                                            </div>


                                                            <div
                                                                data-option-check
                                                                class="flex h-5 w-5 shrink-0
                                                                       items-center justify-center
                                                                       rounded-md border
                                                                       border-[var(--line-subtle)]
                                                                       bg-transparent
                                                                       text-transparent
                                                                       transition-all"
                                                            >
                                                                <i class="bi bi-check text-xs"></i>
                                                            </div>

                                                        </div>

                                                    </label>

                                                @endforeach

                                            </div>

                                        </div>

                                    </div>

                                @endif

                            </article>

                        @empty

                            <div
                                class="rounded-2xl border border-[var(--line-subtle)]
                                       bg-[var(--surface-panel-strong)] p-10 text-center"
                            >

                                <div
                                    class="mx-auto flex h-12 w-12 items-center justify-center
                                           rounded-xl bg-[var(--surface-panel-strong)] text-[var(--content-muted)]"
                                >
                                    <i class="bi bi-calendar-x text-xl"></i>
                                </div>

                                <h3 class="mt-4 text-sm font-semibold text-[var(--content-secondary)]">
                                    Aucune activité disponible
                                </h3>

                                <p class="mt-2 text-xs text-[var(--content-muted)]">
                                    Aucune activité n'est actuellement ouverte
                                    aux inscriptions.
                                </p>

                            </div>

                        @endforelse

                    </div>

                </section>



                <!-- ==================================================
                     SUMMARY
                =================================================== -->

                <aside class="lg:sticky lg:top-[92px] lg:self-start">

                    <section
                        class="overflow-hidden rounded-2xl
                               border border-[var(--line-subtle)]
                               bg-[var(--surface-panel-strong)]"
                    >

                        <div
                            class="border-b border-[var(--line-subtle)] px-5 py-4"
                        >

                            <div class="flex items-center justify-between">

                                <div>

                                    <h3 class="text-sm font-semibold text-[var(--content-primary)]">
                                        Récapitulatif
                                    </h3>

                                    <p class="mt-1 text-xs text-[var(--content-muted)]">
                                        Votre inscription
                                    </p>

                                </div>

                                <div
                                    class="flex h-9 w-9 items-center justify-center
                                           rounded-xl bg-[var(--color-orange)]/10
                                           text-[var(--color-orange)]"
                                >
                                    <i class="bi bi-receipt"></i>
                                </div>

                            </div>

                        </div>


                        <div class="p-5">

                            <!-- Child -->

                            <div>

                                <p
                                    class="text-[10px] font-medium uppercase
                                           tracking-[0.12em] text-[var(--content-muted)]"
                                >
                                    Enfant
                                </p>

                                <p
                                    id="summary-child"
                                    class="mt-2 text-sm font-medium text-[var(--content-secondary)]"
                                >
                                    Aucun enfant renseigné
                                </p>

                            </div>


                            <div class="my-5 border-t border-[var(--line-subtle)]"></div>


                            <!-- Activities -->

                            <div>

                                <p
                                    class="text-[10px] font-medium uppercase
                                           tracking-[0.12em] text-[var(--content-muted)]"
                                >
                                    Activités
                                </p>


                                <div
                                    id="summary-activities"
                                    class="mt-3 space-y-4"
                                >

                                    <div
                                        id="summary-empty"
                                        class="rounded-xl border border-dashed
                                               border-[var(--line-subtle)] p-4 text-center"
                                    >

                                        <i
                                            class="bi bi-calendar-plus
                                                   text-[var(--content-primary)]/15"
                                        ></i>

                                        <p class="mt-2 text-[11px] text-[var(--content-muted)]">
                                            Aucune activité sélectionnée
                                        </p>

                                    </div>

                                </div>

                            </div>


                            <div class="my-5 border-t border-[var(--line-subtle)]"></div>


                            <!-- Submit -->

                            <button
                                type="submit"
                                id="submit-button"
                                disabled
                                class="mt-6 inline-flex h-11 w-full items-center
                                       justify-center gap-2 rounded-xl
                                       bg-[var(--color-orange)] px-5
                                       text-sm font-semibold text-[var(--content-primary)]
                                       shadow-lg
                                       shadow-[var(--color-orange)]/10
                                       transition-all duration-200
                                       hover:brightness-110
                                       active:scale-[0.98]
                                       disabled:cursor-not-allowed
                                       disabled:opacity-30
                                       disabled:hover:brightness-100"
                            >

                                <i class="bi bi-check2-circle"></i>

                                Confirmer l'inscription

                            </button>


                            <p
                                class="mt-4 text-center text-[10px]
                                       leading-4 text-[var(--content-muted)]"
                            >
                                En confirmant, vous validez l'inscription
                                de l'enfant aux activités sélectionnées.
                            </p>

                        </div>

                    </section>


                    <!-- Help -->

                    <div class="mt-4 flex items-start gap-3 px-2">

                        <i
                            class="bi bi-question-circle mt-0.5 text-[var(--content-muted)]"
                        ></i>

                        <p
                            class="text-[10px] leading-4 text-[var(--content-muted)]"
                        >
                            Une question concernant une activité ?

                            <a
                                href="#"
                                class="font-medium text-[var(--color-orange)]
                                       hover:underline"
                            >
                                Contactez-nous
                            </a>

                        </p>

                    </div>

                </aside>

            </div>

        </form>



        <!-- ====================================================
             FOOTER
        ===================================================== -->

        <div
            class="mt-8 flex flex-col gap-2 border-t border-[var(--line-subtle)]
                   pt-5 text-[11px] text-[var(--content-muted)]
                   sm:flex-row sm:items-center sm:justify-between"
        >

            <span>
                Les Francas de Donchery
            </span>

            <span>
                Inscription aux activités
            </span>

        </div>

    </div>

</main>



<!-- ============================================================
     DYNAMIC REGISTRATION
============================================================= -->

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('legal-guardians-container');
        const addButton = document.getElementById('add-legal-guardian');
        const count = document.getElementById('legal-guardian-count');
        let guardianIndex = 0;

        const updateGuardianCount = () => {
            const total = container.querySelectorAll('.legal-guardian').length;
            count.textContent = `${total} responsable${total > 1 ? 's' : ''}`;
        };

        const guardianTemplate = (index) => `
            <div class="legal-guardian rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] p-4" data-guardian-index="${index}">
                <div class="mb-4 flex items-center justify-between gap-3">
                    <h3 class="text-xs font-semibold text-[var(--content-secondary)]">Responsable légal ${index + 1}</h3>
                    <button type="button" class="remove-legal-guardian text-[var(--content-muted)] transition hover:text-red-300" aria-label="Supprimer ce responsable">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div>
                        <label for="legal_guardians_${index}_first_name" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Prénom <span class="text-[var(--color-orange)]">*</span></label>
                        <input id="legal_guardians_${index}_first_name" name="legal_guardians[${index}][first_name]" type="text" required placeholder="Prénom du responsable" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] px-4 py-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div>
                        <label for="legal_guardians_${index}_name" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Nom <span class="text-[var(--color-orange)]">*</span></label>
                        <input id="legal_guardians_${index}_name" name="legal_guardians[${index}][name]" type="text" required placeholder="Nom du responsable" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] px-4 py-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div>
                        <label for="legal_guardians_${index}_email" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Adresse email <span class="text-[var(--color-orange)]">*</span></label>
                        <input id="legal_guardians_${index}_email" name="legal_guardians[${index}][email]" type="email" required placeholder="Email du responsable" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] px-4 py-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div>
                        <label for="legal_guardians_${index}_phone" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Téléphone <span class="text-[var(--color-orange)]">*</span></label>
                        <input id="legal_guardians_${index}_phone" name="legal_guardians[${index}][phone]" type="tel" required placeholder="06 00 00 00 00" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] px-4 py-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="legal_guardians_${index}_address" class="mb-2 block text-xs font-medium text-[var(--content-muted)]">Adresse <span class="text-[var(--color-orange)]">*</span></label>
                        <textarea id="legal_guardians_${index}_address" name="legal_guardians[${index}][address]" rows="2" required placeholder="Adresse complète du responsable" class="w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] px-4 py-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10"></textarea>
                    </div>
                </div>
            </div>
        `;

        addButton.addEventListener('click', () => {
            guardianIndex += 1;
            container.insertAdjacentHTML('afterbegin', guardianTemplate(guardianIndex));
            updateGuardianCount();
        });

        container.addEventListener('click', (event) => {
            const removeButton = event.target.closest('.remove-legal-guardian');

            if (removeButton) {
                removeButton.closest('.legal-guardian').remove();
                updateGuardianCount();
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const form = document.getElementById('registration-form');

        const activityCards =
            document.querySelectorAll('[data-activity-card]');

        const childFirstName =
            document.getElementById('child_first_name');

        const childLastName =
            document.getElementById('child_last_name');

        const summaryChild =
            document.getElementById('summary-child');

        const summaryActivities =
            document.getElementById('summary-activities');

        const selectedActivitiesCount =
            document.getElementById('selected-activities-count');

        const submitButton =
            document.getElementById('submit-button');


        /*
         * ---------------------------------------------------------
         * FORMAT PRICE
         * ---------------------------------------------------------
         */

        const formatPrice = (price) => {

            return new Intl.NumberFormat('fr-FR', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(price) + ' €';

        };


        /*
         * ---------------------------------------------------------
         * UPDATE CHILD
         * ---------------------------------------------------------
         */

        const updateChildSummary = () => {

            const firstName =
                childFirstName.value.trim();

            const lastName =
                childLastName.value.trim();

            if (!firstName && !lastName) {

                summaryChild.textContent =
                    'Aucun enfant renseigné';

                summaryChild.classList.remove(
                    'text-[var(--content-primary)]'
                );

                summaryChild.classList.add(
                    'text-[var(--content-muted)]'
                );

                return;

            }


            summaryChild.textContent =
                `${firstName} ${lastName}`.trim();

            summaryChild.classList.remove(
                'text-[var(--content-muted)]'
            );

            summaryChild.classList.add(
                'text-[var(--content-secondary)]'
            );

        };


        /*
         * ---------------------------------------------------------
         * UPDATE ACTIVITIES
         * ---------------------------------------------------------
         */

        const updateSummary = () => {

            let total = 0;

            let selectedCount = 0;

            summaryActivities.innerHTML = '';


            activityCards.forEach(card => {

                const checkbox =
                    card.querySelector('[data-activity-checkbox]');

                if (!checkbox || !checkbox.checked) {
                    return;
                }


                selectedCount++;


                const activityId =
                    card.dataset.activityId;

                const name =
                    card.querySelector('h3')?.textContent.trim()
                    || 'Activité';


                const price =
                    Number(
                        checkbox.dataset.price || 0
                    );


                const priceElement =
                    card.querySelector(
                        '.text-2xl.font-bold'
                    );

                let activityPrice = 0;

                if (priceElement) {

                    activityPrice =
                        parseFloat(
                            priceElement.textContent
                                .replace(/\s/g, '')
                                .replace(',', '.')
                                .replace('€', '')
                        ) || 0;

                }


                let optionsTotal = 0;

                const selectedOptions =
                    card.querySelectorAll(
                        '[data-option-checkbox]:checked'
                    );


                selectedOptions.forEach(option => {

                    optionsTotal += Number(
                        option.dataset.price || 0
                    );

                });


                const activityTotal =
                    activityPrice + optionsTotal;


                total += activityTotal;


                /*
                 * Activity summary
                 */

                const activityRow =
                    document.createElement('div');

                activityRow.className =
                    'rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] p-3';


                let optionsHtml = '';


                selectedOptions.forEach(option => {

                    optionsHtml += `

                        <div class="mt-2 flex items-center justify-between gap-2">

                            <div class="flex min-w-0 items-center gap-2">

                                <i
                                    class="bi bi-check-circle-fill
                                           shrink-0 text-[9px]
                                           text-[var(--color-orange)]"
                                ></i>

                                <span
                                    class="truncate text-[10px] text-[var(--content-muted)]"
                                >
                                    ${option.dataset.label}
                                </span>

                            </div>

                        </div>

                    `;

                });


                activityRow.innerHTML = `

                    <div class="flex items-start justify-between gap-3">

                        <div class="min-w-0">

                            <p class="truncate text-xs font-medium text-[var(--content-secondary)]">
                                ${name}
                            </p>

                            <p class="mt-1 text-[10px] text-[var(--content-muted)]">
                                Activité
                            </p>

                        </div>

                    </div>

                    <div class="mt-3 border-t border-[var(--line-subtle)] pt-2">

                        <div class="flex items-center justify-between">

                            <span class="text-[10px] text-[var(--content-muted)]">
                                Options
                            </span>

                        </div>

                        ${optionsHtml}

                    </div>
                `;


                summaryActivities.appendChild(
                    activityRow
                );

            });


            /*
             * Empty state
             */

            if (selectedCount === 0) {

                summaryActivities.innerHTML = `

                    <div
                        class="rounded-xl border border-dashed
                               border-[var(--line-subtle)] p-4 text-center"
                    >

                        <i
                            class="bi bi-calendar-plus text-[var(--content-primary)]/15"
                        ></i>

                        <p
                            class="mt-2 text-[11px] text-[var(--content-muted)]"
                        >
                            Aucune activité sélectionnée
                        </p>

                    </div>

                `;

            }


            /*
             * Count
             */

            selectedActivitiesCount.textContent =
                selectedCount === 1
                    ? '1 activité'
                    : `${selectedCount} activités`;


            /*
             * Submit state
             */

            submitButton.disabled =
                selectedCount === 0;

        };


        /*
         * ---------------------------------------------------------
         * ACTIVITY SELECTION
         * ---------------------------------------------------------
         */

        activityCards.forEach(card => {

            const activityCheckbox =
                card.querySelector(
                    '[data-activity-checkbox]'
                );

            const activityCheck =
                card.querySelector(
                    '[data-activity-check]'
                );

            const optionsContainer =
                card.querySelector(
                    '[data-activity-options]'
                );


            if (!activityCheckbox) {
                return;
            }


            activityCheckbox.addEventListener(
                'change',
                () => {

                    if (activityCheckbox.checked) {

                        card.classList.add(
                            'border-[var(--color-orange)]/30',
                            'bg-[var(--color-orange)]/[0.025]'
                        );


                        activityCheck.classList.add(
                            'border-[var(--color-orange)]',
                            'bg-[var(--color-orange)]',
                            'text-[var(--content-primary)]'
                        );

                        activityCheck.classList.remove(
                            'border-[var(--line-subtle)]',
                            'bg-transparent',
                            'text-transparent'
                        );


                        if (optionsContainer) {

                            optionsContainer.classList.remove(
                                'hidden'
                            );

                        }

                    } else {

                        card.classList.remove(
                            'border-[var(--color-orange)]/30',
                            'bg-[var(--color-orange)]/[0.025]'
                        );


                        activityCheck.classList.remove(
                            'border-[var(--color-orange)]',
                            'bg-[var(--color-orange)]',
                            'text-[var(--content-primary)]'
                        );

                        activityCheck.classList.add(
                            'border-[var(--line-subtle)]',
                            'bg-transparent',
                            'text-transparent'
                        );


                        card.querySelectorAll(
                            '[data-option-checkbox]'
                        ).forEach(option => {

                            option.checked = false;

                            const optionLabel =
                                option.closest('label');

                            const optionCard =
                                optionLabel?.querySelector(
                                    '[data-option-card]'
                                );

                            const optionIcon =
                                optionLabel?.querySelector(
                                    '[data-option-icon]'
                                );

                            const optionCheck =
                                optionLabel?.querySelector(
                                    '[data-option-check]'
                                );


                            optionCard?.classList.remove(
                                'border-[var(--color-orange)]/30',
                                'bg-[var(--color-orange)]/[0.04]'
                            );

                            optionCard?.classList.add(
                                'border-[var(--line-subtle)]',
                                'bg-[var(--surface-panel-strong)]'
                            );


                            optionIcon?.classList.remove(
                                'bg-[var(--color-orange)]/10',
                                'text-[var(--color-orange)]'
                            );

                            optionIcon?.classList.add(
                                'bg-[var(--surface-panel-strong)]',
                                'text-[var(--content-muted)]'
                            );


                            optionCheck?.classList.remove(
                                'border-[var(--color-orange)]',
                                'bg-[var(--color-orange)]',
                                'text-[var(--content-primary)]'
                            );

                            optionCheck?.classList.add(
                                'border-[var(--line-subtle)]',
                                'bg-transparent',
                                'text-transparent'
                            );

                        });


                        if (optionsContainer) {

                            optionsContainer.classList.add(
                                'hidden'
                            );

                        }

                    }


                    updateSummary();

                }
            );

        });


        /*
         * ---------------------------------------------------------
         * OPTIONS
         * ---------------------------------------------------------
         */

        document.addEventListener(
            'change',
            event => {

                const checkbox =
                    event.target.closest(
                        '[data-option-checkbox]'
                    );


                if (!checkbox) {
                    return;
                }


                const label =
                    checkbox.closest('label');

                const card =
                    label.querySelector(
                        '[data-option-card]'
                    );

                const icon =
                    label.querySelector(
                        '[data-option-icon]'
                    );

                const check =
                    label.querySelector(
                        '[data-option-check]'
                    );


                if (checkbox.checked) {

                    card.classList.add(
                        'border-[var(--color-orange)]/30',
                        'bg-[var(--color-orange)]/[0.04]'
                    );

                    card.classList.remove(
                        'border-[var(--line-subtle)]',
                        'bg-[var(--surface-panel-strong)]'
                    );


                    icon.classList.add(
                        'bg-[var(--color-orange)]/10',
                        'text-[var(--color-orange)]'
                    );

                    icon.classList.remove(
                        'bg-[var(--surface-panel-strong)]',
                        'text-[var(--content-muted)]'
                    );


                    check.classList.add(
                        'border-[var(--color-orange)]',
                        'bg-[var(--color-orange)]',
                        'text-[var(--content-primary)]'
                    );

                    check.classList.remove(
                        'border-[var(--line-subtle)]',
                        'bg-transparent',
                        'text-transparent'
                    );

                } else {

                    card.classList.remove(
                        'border-[var(--color-orange)]/30',
                        'bg-[var(--color-orange)]/[0.04]'
                    );

                    card.classList.add(
                        'border-[var(--line-subtle)]',
                        'bg-[var(--surface-panel-strong)]'
                    );


                    icon.classList.remove(
                        'bg-[var(--color-orange)]/10',
                        'text-[var(--color-orange)]'
                    );

                    icon.classList.add(
                        'bg-[var(--surface-panel-strong)]',
                        'text-[var(--content-muted)]'
                    );


                    check.classList.remove(
                        'border-[var(--color-orange)]',
                        'bg-[var(--color-orange)]',
                        'text-[var(--content-primary)]'
                    );

                    check.classList.add(
                        'border-[var(--line-subtle)]',
                        'bg-transparent',
                        'text-transparent'
                    );

                }


                updateSummary();

            }
        );


        /*
         * ---------------------------------------------------------
         * CHILD EVENTS
         * ---------------------------------------------------------
         */

        childFirstName.addEventListener(
            'input',
            updateChildSummary
        );

        childLastName.addEventListener(
            'input',
            updateChildSummary
        );


        /*
         * ---------------------------------------------------------
         * INITIALIZATION
         * ---------------------------------------------------------
         */

        updateChildSummary();
        updateSummary();

    });

</script>
```

@endsection