@extends('layout.app')

@section('body')

    <x-menu-auth>Gestion des enfants</x-menu-auth>

    <div class="w-full px-4 py-6 sm:px-6 lg:px-8">
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-xs font-medium uppercase tracking-[0.18em] text-[var(--content-muted)]">Administration / Enfants</p>
                <h1 class="mt-2 text-2xl font-semibold text-[var(--content-primary)]">Modifier l'enfant</h1>
                <p class="mt-2 text-sm text-[var(--content-muted)]">Mettez à jour les informations de {{ $child->firstname_child }} {{ $child->name_child }}.</p>
            </div>
            <a href="{{ route('auth.admin.gestion-enfants.show', $child) }}" class="flex h-10 items-center justify-center gap-2 rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] px-4 text-xs font-medium text-[var(--content-secondary)] transition hover:border-[var(--color-orange)]/30 hover:text-[var(--color-orange)]">
                <i class="bi bi-arrow-left"></i>
                Retour à la fiche
            </a>
        </div>

        @if ($errors->any())
            <div class="mb-5 rounded-xl border border-red-400/20 bg-red-400/[0.07] px-4 py-3 text-sm text-red-300" role="alert">
                <p class="font-medium">Vérifiez les informations saisies.</p>
                <ul class="mt-2 list-inside list-disc text-xs">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('auth.admin.gestion-enfants.update', $child) }}" class="space-y-5">
            @csrf
            @method('PUT')

            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] p-5 shadow-sm">
                <div class="mb-5 flex items-center gap-3">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--surface-page)] text-[var(--color-orange)]"><i class="bi bi-person-lines-fill"></i></span>
                    <div>
                        <h2 class="text-sm font-semibold text-[var(--content-primary)]">Informations générales</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">Identité et informations administratives.</p>
                    </div>
                </div>

                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ([
                        ['name' => 'name_child', 'label' => 'Nom', 'value' => $child->name_child],
                        ['name' => 'firstname_child', 'label' => 'Prénom', 'value' => $child->firstname_child],
                    ] as $field)
                        <div>
                            <label for="{{ $field['name'] }}" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">{{ $field['label'] }}</label>
                            <input id="{{ $field['name'] }}" name="{{ $field['name'] }}" type="text" value="{{ old($field['name'], $field['value']) }}" required class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                        </div>
                    @endforeach
                    <div>
                        <label for="sex_child" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Sexe</label>
                        <select
                            id="sex_child"
                            name="sex_child"
                            required
                            class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-3 text-sm text-[var(--content-primary)] outline-none
                                   focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10"
                        >
                            <option value="garcon" @selected(old('sex_child', $child->sex_child) === 'garcon')>Garçon</option>
                            <option value="fille" @selected(old('sex_child', $child->sex_child) === 'fille')>Fille</option>
                        </select>
                    </div>
                    <div>
                        <label for="class_child" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Classe</label>
                        <select
                            id="class_child"
                            name="class_child"
                            required
                            class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)]
                                   px-3 text-sm text-[var(--content-primary)] outline-none
                                   focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10"
                        >
                            @foreach ([
                                'PS' => 'Petite Section',
                                'MS' => 'Moyenne Section',
                                'GS' => 'Grande Section',
                                'CP' => 'CP',
                                'CE1' => 'CE1',
                                'CE2' => 'CE2',
                                'CM1' => 'CM1',
                                'CM2' => 'CM2',
                                'college' => 'Collège',
                            ] as $value => $label)
                                <option value="{{ $value }}" @selected(old('class_child', $child->class_child) === $value)>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="birthday_child" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Date de naissance</label>
                        <input id="birthday_child" name="birthday_child" type="date" value="{{ old('birthday_child', $child->birthday_child?->format('Y-m-d')) }}" required class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div>
                        <label for="city_birthday_child" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Lieu de naissance</label>
                        <input id="city_birthday_child" name="city_birthday_child" type="text" value="{{ old('city_birthday_child', $child->city_birthday_child) }}" required class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div>
                        <label for="beneficiary_number_caf_child" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">N° allocataire CAF</label>
                        <input id="beneficiary_number_caf_child" name="beneficiary_number_caf_child" type="text" value="{{ old('beneficiary_number_caf_child', $child->beneficiary_number_caf_child) }}" class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                    <div>
                        <label for="coefficient_caf_child" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Coefficient CAF</label>
                        <input id="coefficient_caf_child" name="coefficient_caf_child" type="text" value="{{ old('coefficient_caf_child', $child->coefficient_caf_child) }}" class="h-10 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-3 text-sm text-[var(--content-primary)] outline-none focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10">
                    </div>
                </div>
            </section>

            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] mt-5 p-5 shadow-sm">
                <div class="mb-5 flex items-center gap-3">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--surface-page)] text-[var(--color-orange)]"><i class="bi bi-heart-pulse"></i></span>
                    <div>
                        <h2 class="text-sm font-semibold text-[var(--content-primary)]">Informations sanitaires</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">Allergies, santé et recommandations.</p>
                    </div>
                </div>

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

            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] mt-5 p-5 shadow-sm">
                <div class="mb-5 flex items-center gap-3">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--surface-page)] text-[var(--color-orange)]"><i class="bi bi-shield-check"></i></span>
                    <div>
                        <h2 class="text-sm font-semibold text-[var(--content-primary)]">Autorisations</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">Modifiez les autorisations déclarées.</p>
                    </div>
                </div>
                <div class="flex flex-wrap gap-4">
                    @foreach ([
                        ['name' => 'leave_alone_child', 'label' => 'Départ seul', 'value' => $child->leave_alone_child],
                        ['name' => 'swim_child', 'label' => 'Sait nager', 'value' => $child->swim_child],
                        ['name' => 'doncheroi_child', 'label' => 'Doncheroi', 'value' => $child->doncheroi_child],
                        ['name' => 'authorized_take_activities_child', 'label' => 'Participation aux activités', 'value' => $child->authorized_take_activities_child],
                        ['name' => 'authorized_transport_child', 'label' => 'Transport autorisé', 'value' => $child->authorized_transport_child],
                        ['name' => 'authorized_photo_child', 'label' => 'Droits à l\'image', 'value' => $child->authorized_photo_child],
                        ['name' => 'authorized_heal_child', 'label' => 'Soins autorisés', 'value' => $child->authorized_heal_child],
                    ] as $permission)
                        <label class="flex items-center gap-2 text-xs text-[var(--content-secondary)]">
                            <input type="checkbox" name="{{ $permission['name'] }}" value="1" @checked(old($permission['name'], $permission['value'])) class="h-4 w-4 accent-[var(--color-orange)]">
                            {{ $permission['label'] }}
                        </label>
                    @endforeach
                </div>
            </section>

            <div class="flex flex-col-reverse gap-3 sm:flex-row mt-4 sm:justify-end">
                <a href="{{ route('auth.admin.gestion-enfants.show', $child) }}" class="flex h-10 items-center justify-center rounded-xl border border-[var(--line-subtle)] px-4 text-sm text-[var(--content-secondary)] transition hover:text-[var(--color-orange)]">Annuler</a>
                <button type="submit" class="flex h-10 items-center justify-center gap-2 rounded-xl bg-[var(--color-orange)] px-5 text-sm font-semibold text-black transition hover:brightness-110"><i class="bi bi-check-lg"></i>Enregistrer les modifications</button>
            </div>
        </form>
    </div>

@endsection