@extends('layout.app')

@section('body')

<div class="min-h-screen bg-[#F5F7F9] text-[#111100]">

    <!-- Header -->
    <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 flex items-center justify-between">

            <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 class="hidden sm:flex items-center gap-3">
                <div class="h-2 w-2 rounded-full bg-[#F77F00] animate-pulse"></div>
                <span class="text-sm font-bold uppercase tracking-[0.18em] text-[#666]">
                    Dashboard Été 2026
                </span>
            </div>

        </div>
    </div>

    <main class="relative">

        <!-- Hero -->
        <section 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="flex flex-col xl:flex-row xl:items-end xl:justify-between gap-10">

                    <div class="space-y-4 max-w-2xl">

                        <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00]">
                            Gestion des inscriptions
                        </span>

                        <h1 class="text-5xl sm:text-7xl font-black leading-[0.95] text-[#111100]">
                            Tableau de bord<br>
                            Été 2026
                        </h1>

                        <p class="text-lg text-[#666] font-light">
                            Consultation rapide des enfants, responsables et activités.
                        </p>

                    </div>

                    <!-- Search -->
                    <div class="w-full xl:w-[420px]">

                        <div class="relative">

                            <svg class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[#999]"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0a7 7 0 0114 0z"/>
                            </svg>

                            <input
                                id="searchInput"
                                type="text"
                                placeholder="Rechercher un enfant, parent, activité..."
                                class="w-full rounded-2xl border border-black/10 bg-white px-14 py-5 text-lg font-medium text-[#111100] placeholder-[#999] shadow-sm transition focus:border-[#F77F00] focus:outline-none focus:ring-4 focus:ring-[#F77F00]/10"
                            />

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <!-- CONTENT -->
        <section class="relative z-10 pb-20">

            <div class="max-w-7xl mx-auto px-4 sm:px-8">

                <!-- Stats -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">

                    <div class="rounded-3xl border border-black/5 bg-white p-6 shadow-sm">
                        <div class="flex items-center justify-between">

                            <div>
                                <p class="text-sm uppercase tracking-wider text-[#666] font-bold">
                                    Inscriptions
                                </p>

                                <h3 class="mt-3 text-5xl font-black">
                                    {{ count($inscriptions ?? []) }}
                                </h3>
                            </div>

                            <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#F77F00]/10">
                                <i class="bi bi-people-fill text-3xl text-[#F77F00]"></i>
                            </div>

                        </div>
                    </div>

                    <div class="rounded-3xl border border-black/5 bg-white p-6 shadow-sm">
                        <div class="flex items-center justify-between">

                            <div>
                                <p class="text-sm uppercase tracking-wider text-[#666] font-bold">
                                    Activités
                                </p>

                                <h3 class="mt-3 text-5xl font-black">
                                    {{ collect($inscriptions ?? [])->pluck('activities')->flatten()->count() }}
                                </h3>
                            </div>

                            <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#111100]/5">
                                <i class="bi bi-lightning-charge-fill text-3xl text-[#111100]"></i>
                            </div>

                        </div>
                    </div>

                    <div class="rounded-3xl border border-black/5 bg-white p-6 shadow-sm">
                        <div class="flex items-center justify-between">

                            <div>
                                <p class="text-sm uppercase tracking-wider text-[#666] font-bold">
                                    Options
                                </p>

                                <h3 class="mt-3 text-5xl font-black">
                                    {{ collect($inscriptions ?? [])->pluck('options')->flatten()->count() }}
                                </h3>
                            </div>

                            <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-green-100">
                                <i class="bi bi-stars text-3xl text-green-700"></i>
                            </div>

                        </div>
                    </div>

                </div>

                <!-- Table Card -->
                <div class="overflow-hidden rounded-[32px] border border-black/5 bg-white shadow-sm">

                    <!-- Table Header -->
                    <div class="flex items-center justify-between border-b border-black/5 px-6 py-5">

                        <div>
                            <h2 class="text-2xl font-black">
                                Liste des inscriptions
                            </h2>

                            <p class="mt-1 text-sm text-[#666]">
                                Toutes les inscriptions enregistrées pour l'été 2026.
                            </p>
                        </div>

                        <div class="hidden lg:flex items-center gap-2 rounded-full bg-[#F5F7F9] px-4 py-2 text-sm font-bold text-[#666]">
                            <div class="h-2 w-2 rounded-full bg-green-500"></div>
                            Temps réel
                        </div>

                    </div>

                    <!-- Table -->
                    <div class="overflow-x-auto">

                        <table class="w-full">

                            <thead class="bg-[#F9FAFB]">

                                <tr class="border-b border-black/5 text-left">

                                    <th class="px-6 py-5 text-xs font-black uppercase tracking-[0.18em] text-[#666]">
                                        Enfant
                                    </th>

                                    <th class="px-6 py-5 text-xs font-black uppercase tracking-[0.18em] text-[#666]">
                                        Âge
                                    </th>

                                    <th class="px-6 py-5 text-xs font-black uppercase tracking-[0.18em] text-[#666]">
                                        Classe
                                    </th>

                                    <th class="px-6 py-5 text-xs font-black uppercase tracking-[0.18em] text-[#666]">
                                        Responsable
                                    </th>

                                    <th class="px-6 py-5 text-xs font-black uppercase tracking-[0.18em] text-[#666]">
                                        Activités
                                    </th>

                                    <th class="px-6 py-5 text-right text-xs font-black uppercase tracking-[0.18em] text-[#666]">
                                        Actions
                                    </th>

                                </tr>

                            </thead>

                            <tbody id="inscriptionsTable">

                                @foreach ($inscriptions ?? [] as $inscription)

                                    @php
                                        $child = $inscription['child'];
                                        $guardians = $inscription['guardians'];
                                        $activities = $inscription['activities'];
                                        $options = $inscription['options'];

                                        $primary = $guardians->first();

                                        $age = \Carbon\Carbon::parse($child->birthday_child)->age;

                                        $summary = collect($activities)
                                            ->pluck('name_activity')
                                            ->merge(collect($options)->pluck('name_options_activity'))
                                            ->filter()
                                            ->take(3);
                                    @endphp

                                    <tr
                                        class="inscription-row border-b border-black/5 transition hover:bg-[#F9FAFB] cursor-pointer"
                                        data-item='@json($inscription)'
                                    >

                                        <!-- Child -->
                                        <td class="px-6 py-5">

                                            <div class="flex items-center gap-4">

                                                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#111100] text-xl font-black text-white">
                                                    {{ strtoupper(substr($child->firstname_child, 0, 1)) }}
                                                </div>

                                                <div>

                                                    <div class="text-lg font-bold text-[#111100]">
                                                        {{ $child->firstname_child }}
                                                        {{ $child->name_child }}
                                                    </div>

                                                    <div class="mt-1 text-sm text-[#666]">
                                                        Né(e) le
                                                        {{ \Carbon\Carbon::parse($child->birthday_child)->format('d/m/Y') }}
                                                    </div>

                                                </div>

                                            </div>

                                        </td>

                                        <!-- Age -->
                                        <td class="px-6 py-5">

                                            <div class="inline-flex rounded-full bg-[#F5F7F9] px-4 py-2 text-sm font-bold">
                                                {{ $age }} ans
                                            </div>

                                        </td>

                                        <!-- Class -->
                                        <td class="px-6 py-5">

                                            <span class="rounded-full bg-[#F77F00]/10 px-4 py-2 text-sm font-bold text-[#F77F00]">
                                                {{ $child->class_child }}
                                            </span>

                                        </td>

                                        <!-- Guardian -->
                                        <td class="px-6 py-5">

                                            @if($primary)

                                                <div class="font-bold">
                                                    {{ $primary->first_name_legal_guardian }}
                                                    {{ $primary->name_legal_guardian }}
                                                </div>

                                                <div class="mt-1 text-sm text-[#666]">
                                                    {{ $primary->phone_legal_guardian }}
                                                </div>

                                            @else

                                                <span class="text-[#999]">—</span>

                                            @endif

                                        </td>

                                        <!-- Activities -->
                                        <td class="px-6 py-5">

                                            <div class="flex flex-wrap gap-2">

                                                @foreach($summary as $tag)

                                                    <span class="rounded-full border border-[#F77F00]/20 bg-[#F77F00]/10 px-3 py-1 text-xs font-bold text-[#F77F00]">
                                                        {{ $tag }}
                                                    </span>

                                                @endforeach

                                            </div>

                                        </td>

                                        <!-- Actions -->
                                        <td class="px-6 py-5">

                                            <div class="flex justify-end gap-3">

                                                <button
                                                    class="btn-view flex h-11 w-11 items-center justify-center rounded-2xl border border-black/10 bg-white transition hover:border-[#F77F00] hover:bg-[#F77F00] hover:text-white"
                                                >
                                                    <i class="bi bi-eye"></i>
                                                </button>

                                                <a
                                                    href="#"
                                                    class="flex h-11 items-center gap-2 rounded-2xl bg-[#111100] px-5 text-sm font-bold text-white transition hover:bg-[#F77F00]"
                                                >
                                                    <i class="bi bi-pencil"></i>
                                                    Éditer
                                                </a>

                                            </div>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </section>

    </main>

</div>

<!-- MODAL -->
<div
    id="detailModal"
    class="fixed inset-0 z-[100] hidden items-center justify-center p-4"
>

    <!-- Overlay -->
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>

    <!-- Modal -->
    <div class="relative w-full max-w-5xl overflow-hidden rounded-[32px] bg-white shadow-2xl">

        <!-- Header -->
        <div class="border-b border-black/5 px-8 py-6 flex items-center justify-between">

            <div>

                <span class="text-xs uppercase tracking-[0.18em] text-[#F77F00] font-black">
                    Détails
                </span>

                <h2 class="mt-2 text-3xl font-black">
                    Inscription enfant
                </h2>

            </div>

            <button
                id="closeModal"
                class="flex h-12 w-12 items-center justify-center rounded-2xl border border-black/10 transition hover:bg-[#F5F7F9]"
            >
                <i class="bi bi-x-lg"></i>
            </button>

        </div>

        <!-- Content -->
        <div
            id="detailContent"
            class="max-h-[75vh] overflow-y-auto p-8"
        ></div>

    </div>

</div>

<script>

document.addEventListener('DOMContentLoaded', function () {

    const rows = document.querySelectorAll('.inscription-row');

    const modal = document.getElementById('detailModal');

    const detailContent = document.getElementById('detailContent');

    const closeModal = document.getElementById('closeModal');

    function openModal() {
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.classList.add('overflow-hidden');
    }

    function hideModal() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.classList.remove('overflow-hidden');
    }

    closeModal.addEventListener('click', hideModal);

    modal.addEventListener('click', function(e) {
        if(e.target === modal) {
            hideModal();
        }
    });

    function renderDetail(data) {

        const child = data.child;
        const guardians = data.guardians || [];
        const activities = data.activities || [];
        const options = data.options || [];

        let html = `
            <div class="space-y-10">

                <!-- Child -->
                <section>

                    <div class="flex items-center gap-5">

                        <div class="flex h-24 w-24 items-center justify-center rounded-[28px] bg-[#111100] text-4xl font-black text-white">
                            ${child.firstname_child.charAt(0)}
                        </div>

                        <div>

                            <h3 class="text-4xl font-black">
                                ${child.firstname_child} ${child.name_child}
                            </h3>

                            <div class="mt-3 flex flex-wrap gap-3">

                                <div class="rounded-full bg-[#F5F7F9] px-4 py-2 text-sm font-bold">
                                    ${child.class_child}
                                </div>

                                <div class="rounded-full bg-[#F77F00]/10 px-4 py-2 text-sm font-bold text-[#F77F00]">
                                    ${new Date(child.birthday_child).toLocaleDateString('fr-FR')}
                                </div>

                            </div>

                        </div>

                    </div>

                </section>

                <!-- Guardians -->
                <section>

                    <div class="mb-5">
                        <h4 class="text-2xl font-black">Responsables légaux</h4>
                        <div class="mt-2 h-1 w-16 bg-[#F77F00]"></div>
                    </div>

                    <div class="grid gap-5 md:grid-cols-2">
        `;

        guardians.forEach(g => {

            html += `
                <div class="rounded-3xl border border-black/5 bg-[#F9FAFB] p-6">

                    <div class="mb-4 text-xl font-bold">
                        ${g.first_name_legal_guardian} ${g.name_legal_guardian}
                    </div>

                    <div class="space-y-3 text-sm text-[#666]">

                        <div class="flex items-center gap-3">
                            <i class="bi bi-envelope text-[#F77F00]"></i>
                            ${g.email_legal_guardian}
                        </div>

                        <div class="flex items-center gap-3">
                            <i class="bi bi-telephone text-[#F77F00]"></i>
                            ${g.phone_legal_guardian}
                        </div>

                        <div class="flex items-start gap-3">
                            <i class="bi bi-geo-alt text-[#F77F00] mt-1"></i>
                            <span>${g.address_legal_guardian}</span>
                        </div>

                    </div>

                </div>
            `;
        });

        html += `
                    </div>

                </section>

                <!-- Activities -->
                <section>

                    <div class="mb-5">
                        <h4 class="text-2xl font-black">Activités</h4>
                        <div class="mt-2 h-1 w-16 bg-[#F77F00]"></div>
                    </div>

                    <div class="space-y-4">
        `;

        activities.forEach(a => {

            html += `
                <div class="rounded-3xl border border-black/5 bg-white p-6">

                    <div class="flex items-start justify-between gap-5">

                        <div>

                            <div class="text-xl font-bold">
                                ${a.name_activity}
                            </div>

                            <div class="mt-2 text-sm text-[#666]">
                                ${a.date_start_activity ? new Date(a.date_start_activity).toLocaleDateString('fr-FR') : ''}
                                —
                                ${a.date_end_activity ? new Date(a.date_end_activity).toLocaleDateString('fr-FR') : ''}
                            </div>

                        </div>

                        <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#F77F00]/10">
                            <i class="bi bi-stars text-2xl text-[#F77F00]"></i>
                        </div>

                    </div>

                </div>
            `;
        });

        if(options.length) {

            html += `
                <div class="pt-4">

                    <div class="mb-4 text-sm font-black uppercase tracking-[0.18em] text-[#666]">
                        Options
                    </div>

                    <div class="flex flex-wrap gap-3">
            `;

            options.forEach(o => {

                html += `
                    <div class="rounded-full border border-[#F77F00]/20 bg-[#F77F00]/10 px-4 py-2 text-sm font-bold text-[#F77F00]">
                        ${o.name_options_activity}
                    </div>
                `;
            });

            html += `</div></div>`;
        }

        html += `</div></section></div>`;

        return html;
    }

    rows.forEach(row => {

        row.addEventListener('click', function() {

            const data = JSON.parse(this.dataset.item);

            detailContent.innerHTML = renderDetail(data);

            openModal();

        });

    });

    // SEARCH
    const search = document.getElementById('searchInput');

    search.addEventListener('input', function () {

        const q = this.value.toLowerCase().trim();

        document.querySelectorAll('#inscriptionsTable tr').forEach(tr => {

            const item = JSON.parse(tr.dataset.item);

            const child = item.child;

            const guardians = item.guardians || [];

            const activities = (item.activities || [])
                .map(a => a.name_activity)
                .join(' ');

            const options = (item.options || [])
                .map(o => o.name_options_activity)
                .join(' ');

            const hay = [
                child.firstname_child,
                child.name_child,
                child.class_child,
                activities,
                options,
                guardians.map(g =>
                    g.first_name_legal_guardian + ' ' + g.name_legal_guardian
                ).join(' ')
            ]
            .join(' ')
            .toLowerCase();

            tr.style.display = hay.includes(q)
                ? ''
                : 'none';
        });

    });

});

</script>

@endsection