@extends('layouts.app')

@section('content')
<div class="bg-white/90 backdrop-blur-sm shadow-egg rounded-3xl overflow-hidden">

    <div class="bg-gradient-to-r from-easter-turquoise to-easter-teal px-6 py-8 relative overflow-hidden">
        <div class="absolute -top-2 -right-2 text-5xl opacity-30 animate-wiggle">🐰</div>
        <div class="absolute bottom-2 left-4 text-3xl opacity-30 animate-float">🥚</div>

        <div class="flex items-center justify-center gap-2 text-3xl mb-2">
            <span class="egg-decoration bg-easter-pink"></span>
            <span class="egg-decoration bg-easter-yellow"></span>
            <span class="egg-decoration bg-easter-blue"></span>
            <span class="egg-decoration bg-easter-lilac"></span>
            <span class="egg-decoration bg-easter-peach"></span>
        </div>

        <h1 class="text-3xl md:text-4xl font-display font-bold text-white text-center drop-shadow-lg">
            🐣 Chasse aux œufs 🐣
        </h1>
        <p class="text-white/90 text-center mt-2 font-display text-lg font-semibold">
            Lundi 6 Avril 2026 &mdash; 10h00 à Midi
        </p>
        <p class="text-white/80 text-center text-sm font-body mt-1">
            📍 Salle OMICI &mdash; Esmans
        </p>
    </div>

    <div class="p-6 md:p-8">
        @if (session('success'))
            <div class="mb-6 bg-easter-green/20 border border-easter-green text-easter-grass px-4 py-3 rounded-xl flex items-center font-body">
                <span class="text-xl mr-2">🎉</span>
                {{ session('success') }}
            </div>
        @endif

        <div class="bg-easter-cream border-l-4 border-easter-yellow rounded-xl p-4 mb-6">
            <p class="text-gray-700 font-body text-sm leading-relaxed">
                <span class="font-bold text-easter-teal">🐰 Inscription obligatoire</span><br>
                Événement réservé aux <strong>enfants et petits-enfants d'Esmans</strong> jusqu'à <strong>11 ans maximum</strong>.
            </p>
            <p class="text-gray-500 text-xs mt-2 font-body">
                📞 Contact : 07 69 32 19 92
            </p>
        </div>

        @if ($errors->any())
            <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl font-body text-sm">
                <p class="font-semibold mb-1">Oups, veuillez corriger les erreurs suivantes :</p>
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('inscriptions.store') }}" class="space-y-6" id="inscription-form">
            @csrf

            <fieldset>
                <legend class="font-display text-xl font-bold text-easter-purple mb-4 flex items-center gap-2">
                    <span class="egg-decoration bg-easter-turquoise inline-block w-4 h-5"></span>
                    Responsable légal
                </legend>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="nom" class="block text-sm font-semibold text-gray-600 mb-1 font-body">Nom</label>
                        <input id="nom" type="text" name="nom" value="{{ old('nom') }}" required
                            class="block w-full rounded-xl border-2 border-easter-lilac/50 bg-white px-4 py-2.5 text-gray-800 font-body
                            focus:border-easter-turquoise focus:ring-2 focus:ring-easter-turquoise/20 focus:outline-none transition-all
                            @error('nom') border-red-300 @enderror">
                        @error('nom')
                            <p class="mt-1 text-sm text-red-500 font-body">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="prenom" class="block text-sm font-semibold text-gray-600 mb-1 font-body">Prénom</label>
                        <input id="prenom" type="text" name="prenom" value="{{ old('prenom') }}" required
                            class="block w-full rounded-xl border-2 border-easter-lilac/50 bg-white px-4 py-2.5 text-gray-800 font-body
                            focus:border-easter-turquoise focus:ring-2 focus:ring-easter-turquoise/20 focus:outline-none transition-all
                            @error('prenom') border-red-300 @enderror">
                        @error('prenom')
                            <p class="mt-1 text-sm text-red-500 font-body">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="adresse" class="block text-sm font-semibold text-gray-600 mb-1 font-body">Adresse (à Esmans)</label>
                        <input id="adresse" type="text" name="adresse" value="{{ old('adresse') }}" required
                            class="block w-full rounded-xl border-2 border-easter-lilac/50 bg-white px-4 py-2.5 text-gray-800 font-body
                            focus:border-easter-turquoise focus:ring-2 focus:ring-easter-turquoise/20 focus:outline-none transition-all
                            @error('adresse') border-red-300 @enderror">
                        @error('adresse')
                            <p class="mt-1 text-sm text-red-500 font-body">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-600 mb-1 font-body">Email</label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" required
                            class="block w-full rounded-xl border-2 border-easter-lilac/50 bg-white px-4 py-2.5 text-gray-800 font-body
                            focus:border-easter-turquoise focus:ring-2 focus:ring-easter-turquoise/20 focus:outline-none transition-all
                            @error('email') border-red-300 @enderror">
                        @error('email')
                            <p class="mt-1 text-sm text-red-500 font-body">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="telephone" class="block text-sm font-semibold text-gray-600 mb-1 font-body">Téléphone</label>
                        <input id="telephone" type="tel" name="telephone" value="{{ old('telephone') }}" required
                            class="block w-full rounded-xl border-2 border-easter-lilac/50 bg-white px-4 py-2.5 text-gray-800 font-body
                            focus:border-easter-turquoise focus:ring-2 focus:ring-easter-turquoise/20 focus:outline-none transition-all
                            @error('telephone') border-red-300 @enderror">
                        @error('telephone')
                            <p class="mt-1 text-sm text-red-500 font-body">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend class="font-display text-xl font-bold text-easter-purple mb-2 flex items-center gap-2">
                    <span class="egg-decoration bg-easter-yellow inline-block w-4 h-5"></span>
                    Enfant(s) participant(s)
                </legend>
                <p class="text-gray-500 text-xs mb-4 font-body">11 ans maximum. Ajoutez chaque enfant qui participera à la chasse.</p>

                <div id="enfants-container" class="space-y-3">
                    <div class="enfant-row flex items-center gap-3 bg-easter-cream/60 rounded-xl p-3 border border-easter-yellow/30">
                        <span class="text-xl shrink-0">🐣</span>
                        <div class="flex-1">
                            <input type="text" name="enfants[0][prenom]" placeholder="Prénom de l'enfant"
                                value="{{ old('enfants.0.prenom') }}" required
                                class="block w-full rounded-lg border-2 border-easter-yellow/40 bg-white px-3 py-2 text-sm text-gray-800 font-body
                                focus:border-easter-yellow focus:ring-2 focus:ring-easter-yellow/20 focus:outline-none transition-all">
                        </div>
                        <div class="w-24 shrink-0">
                            <input type="number" name="enfants[0][age]" placeholder="Âge" min="0" max="11"
                                value="{{ old('enfants.0.age') }}" required
                                class="block w-full rounded-lg border-2 border-easter-yellow/40 bg-white px-3 py-2 text-sm text-gray-800 font-body text-center
                                focus:border-easter-yellow focus:ring-2 focus:ring-easter-yellow/20 focus:outline-none transition-all">
                        </div>
                        <button type="button" onclick="removeEnfant(this)" class="text-red-300 hover:text-red-500 transition-colors shrink-0 hidden remove-btn" title="Retirer">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </button>
                    </div>
                </div>

                <button type="button" onclick="addEnfant()"
                    class="mt-3 inline-flex items-center gap-2 text-easter-turquoise hover:text-easter-teal font-display font-semibold text-sm transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    Ajouter un enfant
                </button>
            </fieldset>

            <div class="mt-2">
                <label class="inline-flex items-start gap-2 cursor-pointer">
                    <input type="checkbox" name="esmans" required
                        class="mt-1 form-checkbox rounded text-easter-turquoise focus:ring-easter-turquoise/30 border-easter-lilac">
                    <span class="text-sm text-gray-600 font-body">
                        Je certifie que mon/mes enfant(s) sont des <strong>enfants ou petits-enfants d'Esmans</strong> et ont <strong>11 ans ou moins</strong>.
                    </span>
                </label>
            </div>

            <div class="flex justify-center pt-4">
                <button type="submit"
                    class="bg-gradient-to-r from-easter-turquoise to-easter-teal text-white px-10 py-3.5 rounded-full font-display text-lg font-bold
                    hover:shadow-egg-hover focus:outline-none focus:ring-4 focus:ring-easter-turquoise/30
                    transition-all duration-300 transform hover:scale-105 flex items-center gap-2">
                    <span>🥚</span>
                    Inscrire mon/mes enfant(s)
                    <span>🐰</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
let enfantIndex = {{ old('enfants') ? count(old('enfants')) : 1 }};

function addEnfant() {
    const container = document.getElementById('enfants-container');
    const emojis = ['🐣', '🐥', '🐰', '🥚', '🌷'];
    const emoji = emojis[enfantIndex % emojis.length];

    const row = document.createElement('div');
    row.className = 'enfant-row flex items-center gap-3 bg-easter-cream/60 rounded-xl p-3 border border-easter-yellow/30';
    row.innerHTML = `
        <span class="text-xl shrink-0">${emoji}</span>
        <div class="flex-1">
            <input type="text" name="enfants[${enfantIndex}][prenom]" placeholder="Prénom de l'enfant" required
                class="block w-full rounded-lg border-2 border-easter-yellow/40 bg-white px-3 py-2 text-sm text-gray-800 font-body
                focus:border-easter-yellow focus:ring-2 focus:ring-easter-yellow/20 focus:outline-none transition-all">
        </div>
        <div class="w-24 shrink-0">
            <input type="number" name="enfants[${enfantIndex}][age]" placeholder="Âge" min="0" max="11" required
                class="block w-full rounded-lg border-2 border-easter-yellow/40 bg-white px-3 py-2 text-sm text-gray-800 font-body text-center
                focus:border-easter-yellow focus:ring-2 focus:ring-easter-yellow/20 focus:outline-none transition-all">
        </div>
        <button type="button" onclick="removeEnfant(this)" class="text-red-300 hover:text-red-500 transition-colors shrink-0 remove-btn" title="Retirer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
        </button>
    `;

    container.appendChild(row);
    enfantIndex++;
    updateRemoveButtons();
}

function removeEnfant(button) {
    const row = button.closest('.enfant-row');
    row.remove();
    updateRemoveButtons();
}

function updateRemoveButtons() {
    const rows = document.querySelectorAll('.enfant-row');
    rows.forEach((row, i) => {
        const btn = row.querySelector('.remove-btn');
        if (btn) {
            btn.classList.toggle('hidden', rows.length <= 1);
        }
    });
}

updateRemoveButtons();
</script>
@endsection