@extends('layout.app')

@section('body')
<div class="min-h-screen bg-[#F5F7F9] text-[#111100]">
    <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 class="relative">
        <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">
                        Confirmation<br/>d'inscription
                    </h1>
                    <p class="text-lg text-[#666] font-light animate-fade-in-up animation-delay-200">Votre inscription a bien été prise en compte. Retrouvez ci-dessous le résumé des informations transmises.</p>
                </div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-4 sm:px-8 py-12 space-y-10">
            <div class="rounded-[2rem] border border-black/5 bg-white p-8 shadow-sm">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div>
                        <p class="text-sm uppercase tracking-[0.2em] text-[#F77F00] font-bold">Confirmation</p>
                        <h2 class="mt-2 text-3xl font-black text-[#111100]">Votre inscription est enregistrée</h2>
                    </div>
                    <a href="{{ route('homepage') }}" class="inline-flex items-center justify-center rounded-full bg-[#111100] px-6 py-3 text-sm font-black text-white transition hover:opacity-90">Retour à l'accueil</a>
                </div>

                <div class="mt-8 grid gap-8 lg:grid-cols-2">
                    <div class="rounded-[1.5rem] border border-black/5 bg-[#F9FAFB] p-6">
                        <h3 class="text-xl font-bold text-[#111100] mb-4">Informations de l'enfant</h3>
                        <dl class="grid gap-3">
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Nom</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['name'] }} {{ $child['firstname'] }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Sexe</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ ucfirst($child['sex']) }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Classe</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['class'] }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Date de naissance</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ \Carbon\Carbon::parse($child['birthday'])->format('d/m/Y') }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Lieu de naissance</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['birth_city'] }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">N° allocataire CAF</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['beneficiary_number_caf'] }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Coefficient CAF</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['coefficient_caf'] ?: 'Aucun' }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Personne(s) autorisée(s) à reprendre l'enfant</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['allow_take'] ?: 'Aucune' }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Autorisation activités</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['authorized_take_activities'] ? 'Oui' : 'Non' }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Autorisation transport</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['authorized_transport'] ? 'Oui' : 'Non' }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Autorisation photos</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['authorized_photo'] ? 'Oui' : 'Non' }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs uppercase tracking-[0.2em] text-[#666]">Autorisation soins</dt>
                                <dd class="mt-1 text-lg font-semibold text-[#111100]">{{ $child['authorized_heal'] ? 'Oui' : 'Non' }}</dd>
                            </div>
                        </dl>
                    </div>

                    <div class="rounded-[1.5rem] border border-black/5 bg-[#F9FAFB] p-6">
                        <h3 class="text-xl font-bold text-[#111100] mb-4">Responsables légaux</h3>
                        <div class="space-y-6">
                            <div class="rounded-[1.25rem] bg-white p-5 shadow-sm border border-black/5">
                                <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Responsable 1</p>
                                <p class="text-lg font-bold text-[#111100]">{{ $guardian1['status'] }} : {{ $guardian1['name'] }} {{ $guardian1['firstname'] }}</p>
                                <p class="mt-2 text-sm text-[#666]">{{ $guardian1['email'] }}</p>
                                <p class="text-sm text-[#666]">{{ $guardian1['phone'] }}</p>
                                <p class="text-sm text-[#666]">{{ $guardian1['address'] }}</p>
                            </div>
                            @if($guardian2)
                                <div class="rounded-[1.25rem] bg-white p-5 shadow-sm border border-black/5">
                                    <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Responsable 2</p>
                                    <p class="text-lg font-bold text-[#111100]">{{ $guardian2['status'] }} : {{ $guardian2['name'] }} {{ $guardian2['firstname'] }}</p>
                                    <p class="mt-2 text-sm text-[#666]">{{ $guardian2['email'] }}</p>
                                    <p class="text-sm text-[#666]">{{ $guardian2['phone'] }}</p>
                                    <p class="text-sm text-[#666]">{{ $guardian2['address'] }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-10 rounded-[1.5rem] border border-black/5 bg-[#F9FAFB] p-6">
                    <h3 class="text-xl font-bold text-[#111100] mb-4">Santé et informations supplémentaires</h3>
                    <div class="grid gap-4 md:grid-cols-2">
                        <div class="rounded-2xl bg-white p-5 border border-black/5">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Sait nager</p>
                            <p class="text-lg font-semibold text-[#111100]">{{ $health['swim'] ? 'Oui' : 'Non' }}</p>
                        </div>
                        <div class="rounded-2xl bg-white p-5 border border-black/5">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Peut repartir seul</p>
                            <p class="text-lg font-semibold text-[#111100]">{{ $health['leave_alone'] ? 'Oui' : 'Non' }}</p>
                        </div>
                    </div>
                    <div class="mt-6 grid gap-4">
                        <div class="rounded-2xl bg-white p-5 border border-black/5">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Allergies</p>
                            <p class="text-base text-[#111100]">{{ $health['allergy'] ?: 'Aucune' }}</p>
                        </div>
                        <div class="rounded-2xl bg-white p-5 border border-black/5">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Dossier médical</p>
                            <p class="text-base text-[#111100]">{{ $health['medical'] ?: 'Aucun' }}</p>
                        </div>
                        <div class="rounded-2xl bg-white p-5 border border-black/5">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Traitement</p>
                            <p class="text-base text-[#111100]">{{ $health['treatment'] ?: 'Aucun' }}</p>
                        </div>
                        <div class="rounded-2xl bg-white p-5 border border-black/5">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Régime alimentaire</p>
                            <p class="text-base text-[#111100]">{{ $health['food_constraint'] ?: 'Aucun' }}</p>
                        </div>
                        <div class="rounded-2xl bg-white p-5 border border-black/5 md:col-span-2">
                            <p class="text-sm uppercase tracking-[0.18em] text-[#666] mb-3">Notes</p>
                            <p class="text-base text-[#111100]">{{ $health['observation'] ?: 'Aucune' }}</p>
                        </div>
                    </div>
                </div>

                <div class="mt-10 rounded-[1.5rem] border border-black/5 bg-[#F9FAFB] p-6">
                    <h3 class="text-xl font-bold text-[#111100] mb-4">Activités sélectionnées</h3>
                    @if(count($selectedActivities) > 0)
                        <div class="space-y-4">
                            @foreach($selectedActivities as $activity)
                                <div class="rounded-2xl bg-white p-5 border border-black/5">
                                    <div class="flex items-center justify-between gap-4">
                                        <div>
                                            <p class="text-lg font-bold text-[#111100]">{{ $activity['name'] }}</p>
                                            <p class="text-sm text-[#666]">{{ $activity['dates'] }}</p>
                                        </div>
                                    </div>
                                    @if(count($activity['options']) > 0)
                                        <div class="mt-4 grid gap-2">
                                            @foreach($activity['options'] as $option)
                                                <span class="inline-flex rounded-full bg-[#F77F00]/10 px-3 py-1 text-sm font-semibold text-[#111100]">{{ $option }}</span>
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="mt-4 text-sm text-[#666]">Aucune option sélectionnée.</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-base text-[#666]">Aucune activité n'a été sélectionnée.</p>
                    @endif
                </div>
            </div>
        </div>
    </main>
</div>
@endsection