@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]">Étape 2/3</span>
                    <h1 class="text-5xl sm:text-7xl font-black leading-[0.95] text-[#111100]">
                        Choisir les<br/>activités
                    </h1>
                    <p class="text-lg text-[#666] font-light">Sélectionnez les activités qui plairont le plus à votre enfant</p>
                </div>
            </div>
        </div>

        <!-- Form Section -->
        <form action="{{ Route('inscription-activity') }}" method="post" class="relative z-10">
            @csrf
            <div class="max-w-4xl mx-auto px-4 sm:px-8 py-12">
                <!-- Activities Section -->
                <section class="space-y-6">
                    <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 ([
                            ['title' => 'Semaine 1', 'dates' => '6-10 juil', 'icon' => '🏖️', 'options' => [
                                ['name' => 'Garderie matin', 'emoji' => '🌅', 'desc' => 'Accueil matin avec jeux et activités'],
                                ['name' => 'Garderie soir', 'emoji' => '🌙', 'desc' => 'Accueil soir jusqu\'à 18h'],
                                ['name' => 'Camp Hirson (20 places)', 'emoji' => '⛺', 'desc' => 'Excursion & nuit à la belle étoile'],
                                ['name' => 'test', 'emoji' => '🎯', 'desc' => 'Activité test'],
                                ['name' => 'test2', 'emoji' => '🚀', 'desc' => 'Deuxième activité test'],
                            ]],
                            ['title' => 'Semaine 2', 'dates' => '13-17 juil', 'icon' => '🎪', 'options' => [
                                ['name' => 'Garderie matin', 'emoji' => '🌅', 'desc' => 'Accueil matin avec jeux et activités'],
                                ['name' => 'Garderie soir', 'emoji' => '🌙', 'desc' => 'Accueil soir jusqu\'à 18h'],
                                ['name' => 'Camp (5 places)', 'emoji' => '⛺', 'desc' => 'Excursion en montagne'],
                            ]],
                            ['title' => 'Semaine 3', 'dates' => '20-24 juil', 'icon' => '🎢', 'options' => [
                                ['name' => 'Garderie matin', 'emoji' => '🌅', 'desc' => 'Accueil matin avec jeux et activités'],
                                ['name' => 'Garderie soir', 'emoji' => '🌙', 'desc' => 'Accueil soir jusqu\'à 18h'],
                                ['name' => 'Walibi', 'emoji' => '🎡', 'desc' => 'Journée au parc d\'attractions'],
                            ]],
                            ['title' => 'Semaine 4', 'dates' => '27-31 juil', 'icon' => '🎯', 'options' => [
                                ['name' => 'Garderie matin', 'emoji' => '🌅', 'desc' => 'Accueil matin avec jeux et activités'],
                                ['name' => 'Garderie soir', 'emoji' => '🌙', 'desc' => 'Accueil soir jusqu\'à 18h'],
                            ]],
                            ['title' => 'Semaine 5', 'dates' => '3-7 août', 'icon' => '⭐', 'options' => [
                                ['name' => 'Garderie matin', 'emoji' => '🌅', 'desc' => 'Accueil matin avec jeux et activités'],
                                ['name' => 'Garderie soir', 'emoji' => '🌙', 'desc' => 'Accueil soir jusqu\'à 18h'],
                            ]],
                        ] as $index => $week)
                            <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">{{ $week['icon'] }}</span>
                                        <div>
                                            <p class="font-bold text-lg">{{ $week['title'] }}</p>
                                            <p class="text-xs text-[#666]">{{ $week['dates'] }}</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="week_{{ $index + 1 }}_selected" data-week-toggle="week_{{ $index + 1 }}" class="week-selector h-4 w-4 rounded accent-white" />
                                        <span class="text-sm">Inscrire</span>
                                    </label>
                                </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 ($week['options'] as $optionIndex => $option)
                                            @php
                                                $inputName = 'week_' . ($index + 1) . '_activity[]';
                                                $inputValue = strtolower(preg_replace('/[^a-z0-9_]+/', '_', str_replace(' ', '_', $option['name'])));
                                            @endphp
                                            <label class="group relative cursor-pointer">
                                                <input type="checkbox" name="{{ $inputName }}" value="{{ $inputValue }}" class="peer absolute inset-0 opacity-0" disabled="disabled" data-week-activity="week_{{ $index + 1 }}" />

                                                <div class="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 peer-checked:border-[#F77F00] peer-checked:bg-[#F77F00]/5 peer-checked:shadow-lg peer-disabled:opacity-50 peer-disabled:cursor-not-allowed">
                                                    <div class="flex items-start gap-3 mb-2">
                                                        <span class="text-2xl flex-shrink-0">{{ $option['emoji'] }}</span>
                                                        <div class="flex-1 min-w-0">
                                                            <p class="font-bold text-sm leading-tight text-[#111100]">{{ $option['name'] }}</p>
                                                        </div>
                                                    </div>
                                                    <p class="text-xs text-[#666] leading-relaxed ml-9">{{ $option['desc'] }}</p>
                                                </div>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>

                <!-- Navigation Buttons -->
                <div class="mt-12 flex gap-4 justify-between">
                    <a href="{{ Route('inscription-child') }}" class="group relative px-6 py-4 rounded-full border-2 border-[#111100] text-[#111100] font-black overflow-hidden transition hover:text-white hover:scale-105">
                        <span class="relative z-10 flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" />
                            </svg>
                            Retour
                        </span>
                        <div class="absolute inset-0 bg-[#111100] opacity-0 transition group-hover:opacity-100 -z-10"></div>
                    </a>
                    <button type="submit" class="group relative px-8 py-4 rounded-full bg-[#111100] text-white font-black overflow-hidden transition hover:shadow-2xl hover:scale-105">
                        <span class="relative z-10 flex items-center gap-2">
                            Suivant
                            <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 -->
<script>
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 => {
                activity.disabled = false;
            });
        } else {
            container.style.display = 'none';
            activities.forEach(activity => {
                activity.disabled = true;
                activity.checked = false;
            });
        }
    });
});
</script>

@endsection