@extends('layout.app')

@section('body')

<div class="min-h-screen bg-[#F5F7F9] text-[#111100]">
    <!-- Header Navigation -->
    <div class="sticky top-0 z-50 border-b border-black/5 bg-white/95 backdrop-blur-md">
        <div class="px-4 py-3 sm:px-8">
            <a href="{{ Route('homepage') }}" class="inline-block transition hover:opacity-70">
                <img src="{{ asset('img/logo.png') }}" alt="Logo" class="h-12 w-auto"/>
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <main class="relative">
        <!-- Hero Section -->
        <div class="relative overflow-hidden bg-gradient-to-b from-white via-white to-[#F5F7F9] px-4 py-12 sm:px-8 sm:py-16">
            <div class="max-w-7xl mx-auto">
                <div class="space-y-4 max-w-2xl">
                    <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00] animate-fade-in">Inscription Été 2026</span>
                    <h1 class="text-5xl sm:text-7xl font-black leading-[0.95] text-[#111100] animate-fade-in-up animation-delay-100">
                        L'été de<br>vos enfants
                    </h1>
                    <p class="text-lg text-[#666] font-light animate-fade-in-up animation-delay-200">Inscription simplifiée pour les activités estivales des FRANCAS</p>
                </div>
            </div>
        </div>

        <!-- Form Section -->
        <form action="" method="post" class="relative z-10">
            @csrf

            @if ($errors->any())
                <div class="mb-8 rounded-3xl border border-red-200 bg-red-50 px-6 py-5 text-sm text-red-800">
                    <p class="font-bold">L'inscription n'a pas pu être enregistrée car il y a des erreurs.</p>
                    <p>Veuillez corriger les éléments signalés et réessayer.</p>
                </div>
            @endif

            <div class="max-w-4xl mx-auto px-4 sm:px-8 py-12">
                <p class="mb-6 text-sm text-[#666]">
                    <span class="font-bold text-red-500">*</span> Champs obligatoires
                </p>
                <!-- Child Info Section -->
                <section class="space-y-8 mb-16">
                    <div>
                        <h2 class="text-3xl font-black mb-2">Enfant</h2>
                        <div class="h-1 w-16 bg-[#F77F00]"></div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                        <!-- Nom -->
                        <div class="space-y-2">
                            <label for="name_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Nom <span class="text-red-500">*</span></label>
                            <input type="text" id="name_child" name="name_child" required autofocus maxlength="255" value="{{ old('name_child') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                            @error('name_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Prénom -->
                        <div class="space-y-2">
                            <label for="firstname_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Prénom <span class="text-red-500">*</span></label>
                            <input type="text" id="firstname_child" name="firstname_child" required maxlength="255" value="{{ old('firstname_child') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                            @error('firstname_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Sexe -->
                        <div class="space-y-2">
                            <label for="sex_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Sexe <span class="text-red-500">*</span></label>
                            <select name="sex_child" id="sex_child" required class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition">
                                <option value="">-- Choisir --</option>
                                <option value="garcon" {{ old('sex_child') == 'garcon' ? 'selected' : '' }}>Garçon</option>
                                <option value="fille" {{ old('sex_child') == 'fille' ? 'selected' : '' }}>Fille</option>
                            </select>
                            @error('sex_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Classe -->
                        <div class="space-y-2">
                            <label for="class_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Classe <span class="text-red-500">*</span></label>
                            <select name="class_child" id="class_child" required class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition">
                                <option value="">-- Choisir --</option>
                                <option value="PS" {{ old('class_child') == 'PS' ? 'selected' : '' }}>Petite Section</option>
                                <option value="MS" {{ old('class_child') == 'MS' ? 'selected' : '' }}>Moyenne Section</option>
                                <option value="GS" {{ old('class_child') == 'GS' ? 'selected' : '' }}>Grande Section</option>
                                <option value="CP" {{ old('class_child') == 'CP' ? 'selected' : '' }}>CP</option>
                                <option value="CE1" {{ old('class_child') == 'CE1' ? 'selected' : '' }}>CE1</option>
                                <option value="CE2" {{ old('class_child') == 'CE2' ? 'selected' : '' }}>CE2</option>
                                <option value="CM1" {{ old('class_child') == 'CM1' ? 'selected' : '' }}>CM1</option>
                                <option value="CM2" {{ old('class_child') == 'CM2' ? 'selected' : '' }}>CM2</option>
                                <option value="college" {{ old('class_child') == 'college' ? 'selected' : '' }}>Collège</option>
                            </select>
                            @error('class_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Date -->
                        <div class="space-y-2">
                            <label for="birthday_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Date naissance <span class="text-red-500">*</span></label>
                            <input type="date" id="birthday_child" name="birthday_child" required value="{{ old('birthday_child') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                            @error('birthday_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Ville -->
                        <div class="space-y-2">
                            <label for="city_birthday_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Lieu naissance <span class="text-red-500">*</span></label>
                            <input type="text" id="city_birthday_child" name="city_birthday_child" required maxlength="255" value="{{ old('city_birthday_child') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                            @error('city_birthday_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Doncheroi -->
                        <div class="space-y-2 md:col-span-3">
                            <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                                <input type="checkbox" id="doncheroi_child" name="doncheroi_child" value="1" {{ old('doncheroi_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                                <span class="font-semibold">Doncheroi (résidant ou scolarisé à Donchery)</span>
                                @error('doncheroi_child')
                                    <span class="text-red-500 text-xs">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- CAF beneficiary -->
                        <div class="space-y-2 md:col-span-2">
                            <label for="beneficiary_number_caf_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">N° allocataire CAF <span class="text-red-500">*</span></label>
                            <input type="text" id="beneficiary_number_caf_child" name="beneficiary_number_caf_child" required maxlength="255" value="{{ old('beneficiary_number_caf_child') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition" placeholder="Numéro allocataire CAF"/>
                            @error('beneficiary_number_caf_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- CAF coefficient -->
                        <div class="space-y-2 md:col-span-1">
                            <label for="coefficient_caf_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Quotient CAF</label>
                            <input type="text" id="coefficient_caf_child" name="coefficient_caf_child" maxlength="10" value="{{ old('coefficient_caf_child') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition" placeholder="Ex: 750"/>
                            @error('coefficient_caf_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-2 md:col-span-3">
                            <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                                <input type="checkbox" id="leave_alone_child" name="leave_alone_child" value="1" {{ old('leave_alone_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                                <span class="font-semibold">Peut repartir seul</span>
                                @error('leave_alone_child')
                                    <span class="text-red-500 text-xs">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>

                        <!-- Autorisation tiers -->
                        <div class="space-y-2 md:col-span-3">
                            <label for="allow_take_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Personne(s) autorisée(s) à reprendre l'enfant</label>
                            <textarea id="allow_take_child" name="allow_take_child" maxlength="500" rows="2" class="w-full text-sm bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition resize-none" placeholder="Nom des personnes autorisées">{{ old('allow_take_child') }}</textarea>
                            @error('allow_take_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Authorizations -->
                        <div class="space-y-2 md:col-span-3">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                                    <input type="checkbox" id="authorized_take_activities_child" name="authorized_take_activities_child" value="1" {{ old('authorized_take_activities_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                                    <span class="font-semibold">Autorise mon enfant à participer à toutes les activités</span>
                                </label>
                                <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                                    <input type="checkbox" id="authorized_transport_child" name="authorized_transport_child" value="1" {{ old('authorized_transport_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                                    <span class="font-semibold">Autorise mon enfant à être transporté en véhicule de service et transport en commun</span>
                                </label>
                                <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                                    <input type="checkbox" id="authorized_photo_child" name="authorized_photo_child" value="1" {{ old('authorized_photo_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                                    <span class="font-semibold">Autorise à utiliser les photos de mon enfant dans toutes les communications et publications</span>
                                </label>
                                <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                                    <input type="checkbox" id="authorized_heal_child" name="authorized_heal_child" value="1" {{ old('authorized_heal_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                                    <span class="font-semibold">Autorise à faire soigner et à faire pratiquer toute intervention d'urgence sur mon enfant. Si une hospitalisation est nécessaire, j'autorise à faire transporter mon enfant à l'hôpital le plus proche.</span>
                                </label>
                            </div>
                        </div>

                    </div>
                </section>

                {{-- Responsable légal --}}
                <section class="space-y-8 mb-16">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-3xl font-black mb-2">Responsables légaux</h2>
                            <div class="h-1 w-16 bg-[#F77F00]"></div>
                        </div>
                        <button type="button" id="add-guardian-btn" class="px-4 py-2 rounded-full bg-[#F77F00] text-white font-bold text-sm hover:shadow-lg transition">
                            + Ajouter un 2e responsable
                        </button>
                    </div>

                    <!-- Premier responsable légal -->
                    <div class="legal-guardian-block" data-guardian-index="1">
                        <h3 class="text-xl font-bold mb-4 text-[#111100]">Responsable 1</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                            <!-- Statut -->
                            <div class="space-y-2">
                                <label for="status_legal_guardian" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Statut <span class="text-red-500">*</span></label>
                                <select id="status_legal_guardian" name="status_legal_guardian" required class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition">
                                    <option value="">Sélectionnez un statut</option>
                                    <option value="père" {{ old('status_legal_guardian') === 'père' ? 'selected' : '' }}>Père</option>
                                    <option value="mère" {{ old('status_legal_guardian') === 'mère' ? 'selected' : '' }}>Mère</option>
                                    <option value="tuteur" {{ old('status_legal_guardian') === 'tuteur' ? 'selected' : '' }}>Tuteur</option>
                                </select>
                                @error('status_legal_guardian')
                                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Nom -->
                            <div class="space-y-2">
                                <label for="name_legal_guardian" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Nom <span class="text-red-500">*</span></label>
                                <input type="text" id="name_legal_guardian" name="name_legal_guardian" required autofocus maxlength="255" value="{{ old('name_legal_guardian') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                                @error('name_legal_guardian')
                                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Prénom -->
                            <div class="space-y-2">
                                <label for="firstname_legal_guardian" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Prénom <span class="text-red-500">*</span></label>
                                <input type="text" id="firstname_legal_guardian" name="firstname_legal_guardian" required maxlength="255" value="{{ old('firstname_legal_guardian') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                                @error('firstname_legal_guardian')
                                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <!-- email -->
                            <div class="space-y-2">
                                <label for="email_legal_guardian" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Email <span class="text-red-500">*</span></label>
                                <input type="email" id="email_legal_guardian" name="email_legal_guardian" required maxlength="255" value="{{ old('email_legal_guardian') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                                @error('email_legal_guardian')
                                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Phone -->
                            <div class="space-y-2">
                                <label for="phone_legal_guardian" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Téléphone <span class="text-red-500">*</span></label>
                                <input type="tel" id="phone_legal_guardian" name="phone_legal_guardian" required maxlength="255" value="{{ old('phone_legal_guardian') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                                @error('phone_legal_guardian')
                                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Address -->
                            <div class="space-y-2">
                                <label for="address_legal_guardian" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Adresse <span class="text-red-500">*</span></label>
                                <input type="text" id="address_legal_guardian" name="address_legal_guardian" required maxlength="255" value="{{ old('address_legal_guardian') }}" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
                                @error('address_legal_guardian')
                                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Conteneur pour les responsables additionnels -->
                    <div id="additional-guardians-container"></div>
                </section>

                <!-- Health Section -->
                <section class="space-y-6 mb-16 border-t border-black/5 pt-12">
                    <div>
                        <h2 class="text-3xl font-black mb-2">Santé</h2>
                        <div class="h-1 w-16 bg-[#F77F00]"></div>
                    </div>

                    <!-- Checkboxes -->
                    <div class="space-y-3">
                        <label class="flex items-center gap-3 p-3 rounded-lg bg-white border border-black/5 hover:border-[#F77F00] cursor-pointer transition">
                            <input type="checkbox" id="swim_child" name="swim_child" value="1" {{ old('swim_child') ? 'checked' : '' }} class="h-5 w-5 rounded border-2 border-black/20 text-[#F77F00]"/>
                            <span class="font-semibold">Sait nager</span>
                            @error('swim_child')
                                <span class="text-red-500 text-xs">{{ $message }}</span>
                            @enderror
                        </label>
                        
                    </div>

                    <!-- Textareas -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label for="allergy_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Allergies</label>
                            <textarea id="allergy_child" name="allergy_child" maxlength="500" rows="2" class="w-full text-sm bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition resize-none" placeholder="Listez les allergies">{{ old('allergy_child') }}</textarea>
                            @error('allergy_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="medical_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Dossier médical</label>
                            <textarea id="medical_child" name="medical_child" maxlength="500" rows="2" class="w-full text-sm bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition resize-none" placeholder="L'enfant a-t-il des problèmes de santé ?">{{ old('medical_child') }}</textarea>
                            @error('medical_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="treatment_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Traitement</label>
                            <textarea id="treatment_child" name="treatment_child" maxlength="500" rows="2" class="w-full text-sm bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition resize-none" placeholder="Traitements">{{ old('treatment_child') }}</textarea>
                            @error('treatment_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="food_constraint_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Régime alimentaire</label>
                            <textarea id="food_constraint_child" name="food_constraint_child" maxlength="500" rows="2" class="w-full text-sm bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition resize-none" placeholder="Végétarien, sans gluten...">{{ old('food_constraint_child') }}</textarea>
                            @error('food_constraint_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="md:col-span-2 space-y-2">
                            <label for="observation_child" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Notes</label>
                            <textarea id="observation_child" name="observation_child" maxlength="500" rows="2" class="w-full text-sm bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition resize-none" placeholder="Autres informations">{{ old('observation_child') }}</textarea>
                            @error('observation_child')
                                <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </section>

                <!-- Activities Section -->
                <section class="space-y-6 border-t border-black/5 pt-12">
                    <div>
                        <h2 class="text-3xl font-black mb-2">Semaines & Activités</h2>
                        <div class="h-1 w-16 bg-[#F77F00]"></div>
                    </div>

                    <div class="space-y-4">
                        @foreach ($activities as $index => $activity)
                            <div class="rounded-2xl bg-white border border-black/5 overflow-hidden">
                                <!-- Week Header -->
                                <div class="p-4 flex justify-between items-center bg-gradient-to-r from-white to-[#F5F7F9] border-b border-black/5">
                                    <div class="flex items-center gap-3">
                                        <span class="text-2xl">{{ $activity['icon'] }}</span>
                                        <div>
                                            <p class="font-bold text-lg">{{ $activity['name_activity'] }}</p>
                                            <p class="text-xs text-[#666]">{{ \Carbon\Carbon::parse($activity['date_start_activity'])->format('d/m/Y') }} - {{ \Carbon\Carbon::parse($activity['date_end_activity'])->format('d/m/Y') }}</p>
                                        </div>
                                    </div>
                                    <label class="flex items-center gap-2 px-4 py-2 rounded-full bg-[#F77F00] text-white font-bold cursor-pointer hover:shadow-lg transition">
                                        <input type="checkbox" name="activity_{{ $activity['id'] }}_selected" data-week-toggle="week_{{ $index + 1 }}" class="week-selector h-4 w-4 rounded accent-white" />
                                        <span class="text-sm">Inscrire</span>
                                    </label>
                                    @error('activity_' . $activity['id'] . '_selected')
                                        <p class="text-red-500 text-xs font-bold mt-2 px-4">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Activities Grid -->
                                <div class="week-options-container" data-week-container="week_{{ $index + 1 }}" style="display: none;">
                                    <div class="p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 bg-[#F9FAFB]">
                                        @foreach ($activity['options'] as $optionIndex => $option)
                                            @php
                                                $inputName =  'activity_' . $activity['id'] . '_options[]';
                                                $isFull = isset($option['limit_options_activity']) && $option['limit_options_activity'] <= 0;
                                            @endphp
                                            <label class="group cursor-pointer">
                                                <div class="flex items-start gap-3 h-full p-4 rounded-xl border-2 border-black/10 bg-white text-left transition-all hover:border-[#F77F00] hover:shadow-md hover:scale-105{{ $isFull ? ' opacity-50 cursor-not-allowed' : '' }}">
                                                    <input type="checkbox" name="{{ $inputName }}" value="{{ $option['id'] }}" class="mt-1 h-5 w-5 flex-shrink-0 text-[#F77F00] border-black/20 focus:ring-[#F77F00]" data-week-activity="week_{{ $index + 1 }}" disabled {{ $isFull ? 'data-full="true"' : '' }} />
                                                    <div class="flex-1">
                                                        <div class="flex items-start justify-between gap-3 mb-2">
                                                            <div>
                                                                <p class="font-bold text-sm leading-tight text-[#111100]">{{ $option['name_options_activity'] }} @if (isset($option['limit_options_activity'])) ({{ $option['limit_options_activity'] }} places) @endif</p>
                                                                <p class="text-[11px] text-[#666]">{{ \Carbon\Carbon::parse($option['date_start_options_activity'])->format('d/m/Y') }} - {{ \Carbon\Carbon::parse($option['date_end_options_activity'])->format('d/m/Y') }}</p>
                                                            </div>
                                                            @if($isFull)
                                                                <span class="rounded-full bg-red-100 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-red-700">Complète</span>
                                                            @endif
                                                        </div>
                                                        <p class="text-xs text-[#666] leading-relaxed">{{ $option['description_options_activity'] }}</p>
                                                    </div>
                                                </div>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('activity_' . $activity['id'] . '_options')
                                        <p class="text-red-500 text-xs font-bold mt-2 px-4">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>

                <!-- Submit Button -->
                <div class="mt-12 flex justify-end">
                    <button type="submit" class="group relative px-8 py-4 rounded-full bg-[#111100] text-white font-black text-lg overflow-hidden transition hover:shadow-2xl hover:scale-105">
                        <span class="relative z-10 flex items-center gap-2">
                            S'inscrire
                            <svg class="w-5 h-5 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </span>
                        <div class="absolute inset-0 bg-[#F77F00] opacity-0 transition group-hover:opacity-100"></div>
                    </button>
                </div>
            </div>
        </form>
    </main>
</div>

<!-- Script for Week Toggle and Legal Guardians Management -->
<script>
// Week Toggle
document.querySelectorAll('[data-week-toggle]').forEach(checkbox => {
    const weekId = checkbox.dataset.weekToggle;
    const container = document.querySelector(`[data-week-container="${weekId}"]`);
    const activities = document.querySelectorAll(`[data-week-activity="${weekId}"]`);

    checkbox.addEventListener('change', function() {
        if (this.checked) {
            container.style.display = 'block';
            activities.forEach(activity => {
                if (activity.dataset.full === 'true') {
                    activity.disabled = true;
                } else {
                    activity.disabled = false;
                }
            });
        } else {
            container.style.display = 'none';
            activities.forEach(activity => {
                activity.disabled = true;
                activity.checked = false;
            });
        }
    });
});

// Legal Guardians Management
let guardianCount = 1;
const addGuardianBtn = document.getElementById('add-guardian-btn');
const additionalContainer = document.getElementById('additional-guardians-container');

addGuardianBtn.addEventListener('click', function(e) {
    e.preventDefault();
    
    // Ne permettre que 2 responsables
    if (guardianCount >= 2) {
        return;
    }
    
    guardianCount++;
    addGuardianBtn.style.display = 'none';
    
    const guardianBlock = document.createElement('div');
    guardianBlock.className = 'legal-guardian-block';
    guardianBlock.setAttribute('data-guardian-index', guardianCount);
    guardianBlock.innerHTML = `
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-[#111100]">Responsable 2</h3>
            <button type="button" class="remove-guardian-btn px-3 py-1 rounded-full bg-red-500 text-white font-bold text-sm hover:bg-red-600 transition">
                × Supprimer
            </button>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
           <!-- Statut -->
            <div class="space-y-2">
                <label for="status_legal_guardian_2" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Statut</label>
                <select id="status_legal_guardian_2" name="status_legal_guardian_2" required class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition">
                    <option value="">Sélectionnez un statut</option>
                    <option value="père" {{ old('status_legal_guardian_2') === 'père' ? 'selected' : '' }}>Père</option>
                    <option value="mère" {{ old('status_legal_guardian_2') === 'mère' ? 'selected' : '' }}>Mère</option>
                    <option value="tuteur" {{ old('status_legal_guardian_2') === 'tuteur' ? 'selected' : '' }}>Tuteur</option>
                </select>
                @error('status_legal_guardian_2')
                    <p class="text-red-500 text-xs font-bold">{{ $message }}</p>
                @enderror
            </div>
            <!-- Nom -->
            <div class="space-y-2">
                <label for="name_legal_guardian_2" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Nom</label>
                <input type="text" id="name_legal_guardian_2" name="name_legal_guardian_2" maxlength="255" value="" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
            </div>

            <!-- Prénom -->
            <div class="space-y-2">
                <label for="firstname_legal_guardian_2" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Prénom</label>
                <input type="text" id="firstname_legal_guardian_2" name="firstname_legal_guardian_2" maxlength="255" value="" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
            </div>
            
            <!-- email -->
            <div class="space-y-2">
                <label for="email_legal_guardian_2" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Email</label>
                <input type="email" id="email_legal_guardian_2" name="email_legal_guardian_2" maxlength="255" value="" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
            </div>

            <!-- Phone -->
            <div class="space-y-2">
                <label for="phone_legal_guardian_2" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Téléphone</label>
                <input type="tel" id="phone_legal_guardian_2" name="phone_legal_guardian_2" maxlength="255" value="" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
            </div>

            <!-- Address -->
            <div class="space-y-2">
                <label for="address_legal_guardian_2" class="text-xs font-bold uppercase tracking-wider text-[#111100] opacity-70">Adresse</label>
                <input type="text" id="address_legal_guardian_2" name="address_legal_guardian_2" maxlength="255" value="" class="w-full text-lg font-semibold bg-white border border-black/10 rounded-lg px-4 py-3 text-[#111100] placeholder-[#999] focus:border-[#F77F00] focus:outline-none focus:ring-2 focus:ring-[#F77F00]/20 transition"/>
            </div>
        </div>
    `;
    
    additionalContainer.appendChild(guardianBlock);
    
    // Ajouter l'écouteur de suppression
    guardianBlock.querySelector('.remove-guardian-btn').addEventListener('click', function(e) {
        e.preventDefault();
        guardianBlock.remove();
        guardianCount--;
        addGuardianBtn.style.display = 'inline-flex';
    });
});
</script>

@endsection