@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="flex flex-col gap-4 rounded-2xl border border-[var(--line-subtle)]
                   bg-[var(--surface-panel-strong)] p-4 sm:p-5
                   lg:flex-row lg:items-center lg:justify-between"
        >
            <form id="child-search-form" class="w-full lg:max-w-2xl" onsubmit="return false;">
                <div class="relative">
                    <div
                        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4
                               text-[var(--content-muted)]"
                    >
                        <i class="bi bi-search"></i>
                    </div>
                    <input
                        type="search"
                        id="child-search"
                        name="search"
                        autocomplete="off"
                        placeholder="Rechercher un enfant..."
                        class="block h-11 w-full rounded-xl border border-[var(--line-subtle)]
                               bg-[var(--surface-page)] pl-11 pr-12 text-sm text-[var(--content-primary)]
                               placeholder:text-[var(--content-muted)] outline-none transition-all duration-200
                               focus:border-[var(--color-orange)]/40 focus:ring-2 focus:ring-[var(--color-orange)]/10"
                    >
                    <button
                        type="button"
                        id="clear-child-search"
                        class="absolute right-3 top-1/2 hidden -translate-y-1/2
                               text-[var(--content-muted)] transition hover:text-[var(--content-secondary)]"
                        aria-label="Effacer la recherche"
                    >
                        <i class="bi bi-x-circle"></i>
                    </button>
                </div>
            </form>
            <div
                class="flex h-11 shrink-0 items-center justify-center gap-2 rounded-xl
                       border border-[var(--line-subtle)] px-4 text-xs text-[var(--content-muted)]"
            >
                <i class="bi bi-people text-[var(--color-orange)]"></i>
                <span id="child-toolbar-count">
                    {{ $children->count() }} enfant{{ $children->count() > 1 ? 's' : '' }}
                </span>
            </div>
        </div>

        <div class="mt-8 flex items-end justify-between">
            <div>
                <div class="flex items-center gap-2">
                    <h2 class="text-lg font-semibold text-[var(--content-primary)]">Enfants</h2>
                    <span
                        id="child-count"
                        class="rounded-md border border-[var(--line-subtle)]
                               bg-[var(--surface-panel-strong)] px-2 py-0.5
                               text-[10px] font-medium text-[var(--content-muted)]"
                    >
                        {{ $children->count() }} enfant{{ $children->count() > 1 ? 's' : '' }}
                    </span>
                </div>
                <p class="mt-1 text-sm text-[var(--content-muted)]">Retrouvez et consultez les fiches des enfants inscrits.</p>
            </div>
        </div>

        <div
            id="no-child-results"
            class="mt-4 hidden rounded-2xl border border-[var(--line-subtle)]
                   bg-[var(--surface-panel-strong)] px-6 py-10 text-center"
        >
            <i class="bi bi-search text-2xl text-[var(--content-muted)]"></i>
            <p class="mt-3 text-sm font-medium text-[var(--content-secondary)]">Aucun enfant trouvé</p>
            <p class="mt-1 text-xs text-[var(--content-muted)]">Aucun enfant ne correspond à votre recherche.</p>
        </div>

        <div id="children-list" class="mt-4 space-y-3">
            @forelse ($children as $child)
                <div
                    class="child-item group rounded-2xl border border-[var(--line-subtle)]
                           bg-[var(--surface-panel-strong)] transition-all duration-200
                           hover:bg-[var(--surface-panel-strong)] hover:shadow-xl hover:shadow-black/10"
                    data-search="{{ strtolower($child->name_child . ' ' . $child->firstname_child . ' ' . $child->class_child . ' ' . $child->sex_child) }}"
                >
                    <div class="flex flex-col gap-4 p-4 sm:p-5 xl:flex-row xl:items-center">
                        <div class="flex min-w-0 flex-1 items-center gap-3">
                            <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-[var(--color-orange)]/15 bg-[var(--color-orange)]/[0.07] text-sm font-semibold text-[var(--color-orange)]">
                                {{ strtoupper(substr($child->name_child, 0, 1) . substr($child->firstname_child, 0, 1)) }}
                            </div>
                            <div class="min-w-0">
                                <p class="truncate text-sm font-medium text-[var(--content-primary)]">{{ $child->name_child }} {{ $child->firstname_child }}</p>
                                {{-- <p class="mt-0.5 text-xs text-[var(--content-muted)]">Dossier enfant #{{ $child->id }}</p> --}}
                            </div>
                            <div>
                                <p class="text-[10px] text-[var(--content-muted)]">Naissance</p>
                                <p class="mt-1 text-xs text-[var(--content-secondary)]">
                                    {{ $child->birthday_child?->format('d/m/Y') ?? 'Non renseignée' }}
                                </p>
                            </div>
                            <div>
                                <p class="text-[10px] text-[var(--content-muted)]">Âge</p>
                                <p class="mt-1 text-xs text-[var(--content-secondary)]">
                                    {{ $child->birthday_child?->age ?? 'Non renseigné' }}{{ $child->birthday_child ? ' ans' : '' }}
                                </p>
                            </div>
                            <div>
                                <p class="text-[10px] text-[var(--content-muted)]">Classe</p>
                                <p class="mt-1 text-xs text-[var(--content-secondary)]">
                                    {{ $child->class_child }}
                                </p>
                            </div>
                            <div>
                                <p class="text-[10px] text-[var(--content-muted)]">Sexe</p>
                                <p class="mt-1 text-xs capitalize text-[var(--content-secondary)]">
                                    {{ $child->sex_child }}
                                </p>
                            </div>
                        </div>

                        <div class="flex items-center gap-2 border-t border-[var(--line-subtle)] pt-4 xl:border-0 xl:pt-0">
                            <a
                                href="{{ route('auth.admin.gestion-enfants.show', $child) }}"
                                class="group/action flex h-10 flex-1 items-center justify-center gap-2
                                       rounded-xl border border-[var(--color-orange)]/20
                                       bg-[var(--color-orange)]/[0.07] px-3.5 text-xs font-medium
                                       text-[var(--color-orange)]/90 transition hover:border-[var(--color-orange)]/40
                                       hover:bg-[var(--color-orange)]/[0.14] hover:text-[var(--color-orange)] xl:flex-none"
                                aria-label="Consulter la fiche de {{ $child->firstname_child }} {{ $child->name_child }}"
                            >
                                <i class="bi bi-search transition-transform group-hover/action:scale-110"></i>
                                <span>Consulter</span>
                            </a>
                            <a
                                href="{{ route('auth.admin.gestion-enfants.fiche-sanitaire', $child) }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl
                                       border border-[var(--line-subtle)] text-[var(--content-muted)] transition
                                       hover:border-[var(--color-orange)]/30 hover:bg-[var(--color-orange)]/[0.08]
                                       hover:text-[var(--color-orange)]"
                                aria-label="Télécharger la fiche sanitaire de {{ $child->firstname_child }} {{ $child->name_child }}"
                                title="Fiche sanitaire PDF"
                            >
                                <i class="bi bi-filetype-pdf"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div
                    class="rounded-2xl border border-[var(--line-subtle)]
                           bg-[var(--surface-panel-strong)] px-6 py-10 text-center"
                >
                    <i class="bi bi-person-x text-2xl text-[var(--content-muted)]"></i>
                    <p class="mt-3 text-sm font-medium text-[var(--content-secondary)]">
                        Aucun enfant enregistré
                    </p>
                    <p class="mt-1 text-xs text-[var(--content-muted)]">
                        Les enfants inscrits apparaîtront ici.
                    </p>
                </div>
            @endforelse
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('child-search');
            const clearButton = document.getElementById('clear-child-search');
            const emptyState = document.getElementById('no-child-results');
            const count = document.getElementById('child-count');
            const toolbarCount = document.getElementById('child-toolbar-count');
            const children = [...document.querySelectorAll('.child-item')];
            const normalize = (value) => value
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .toLowerCase();

            const updateList = () => {
                const search = normalize(input.value.trim());
                let visible = 0;
                children.forEach((child) => {
                    const matches = normalize(child.dataset.search).includes(search);

                    child.classList.toggle('hidden', !matches);
                    visible += matches ? 1 : 0;
                });

                const label = `${visible} enfant${visible > 1 ? 's' : ''}`;

                count.textContent = label;
                toolbarCount.textContent = label;
                clearButton.classList.toggle('hidden', search === '');
                emptyState.classList.toggle('hidden', visible !== 0 || children.length === 0);
            };

            input.addEventListener('input', updateList);
            clearButton.addEventListener('click', () => {
                input.value = '';
                input.focus();
                updateList();
            });
        });
    </script>

@endsection