@extends('layout.app')

@section('body')

    <x-menu-auth>Configuration globale</x-menu-auth>

    <div class="w-full px-4 py-6 sm:px-6 lg:px-8">

        @if (session('success'))
            <div
                class="mb-5 flex items-start gap-3 rounded-xl border border-emerald-400/20
                       bg-emerald-400/[0.07] px-4 py-3 text-sm text-emerald-300"
                role="alert"
            >
                <i class="bi bi-check-circle mt-0.5 shrink-0"></i>
                <p>{{ session('success') }}</p>
            </div>
        @endif

        <div class="mb-6">
            <p class="text-xs font-medium uppercase tracking-[0.18em] text-[var(--content-muted)]">
                Administration
            </p>
            <h1 class="mt-2 text-2xl font-semibold text-[var(--content-primary)]">
                Configuration globale
            </h1>
            <p class="mt-2 max-w-2xl text-sm text-[var(--content-muted)]">
                Gérez les paramètres communs utilisés dans l'organisation.
            </p>
        </div>

        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]">

            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] p-5 shadow-sm">
                <div class="flex items-start gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl
                                bg-[var(--color-orange)]/[0.10] text-[var(--color-orange)]">
                        <i class="bi bi-plus-lg"></i>
                    </div>
                    <div>
                        <h2 class="text-base font-semibold text-[var(--content-primary)]">Ajouter un groupe</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">Les groupes pourront ensuite être associés à chaque inscription.</p>
                    </div>
                </div>

                <form method="POST" action="{{ route('auth.admin.configuration.groups.store') }}" class="mt-6">
                    @csrf
                    <label for="group_name" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Nom du groupe</label>
                    <input
                        id="group_name"
                        name="group_name"
                        type="text"
                        value="{{ old('group_name') }}"
                        required
                        maxlength="255"
                        placeholder="Ex. Groupe des petits"
                        class="h-11 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)]
                               px-3 text-sm text-[var(--content-primary)] outline-none placeholder:text-[var(--content-muted)]
                               focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10"
                    >
                    @error('group_name')
                        <p class="mt-2 text-xs text-red-300">{{ $message }}</p>
                    @enderror

                    <button
                        type="submit"
                        class="mt-4 flex h-10 items-center gap-2 rounded-xl bg-[var(--color-orange)]
                               px-4 text-sm font-semibold text-black transition hover:brightness-110"
                    >
                        <i class="bi bi-plus-lg"></i>
                        Ajouter le groupe
                    </button>
                </form>
            </section>

            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <h2 class="text-base font-semibold text-[var(--content-primary)]">Groupes d'enfants</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">{{ $groups->count() }} groupe{{ $groups->count() > 1 ? 's' : '' }} configuré{{ $groups->count() > 1 ? 's' : '' }}</p>
                    </div>
                    <i class="bi bi-people text-lg text-[var(--color-orange)]"></i>
                </div>

                <div class="mt-5 space-y-2">
                    @forelse($groups as $group)
                        <div class="flex items-center gap-3 rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] p-3">
                            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--surface-panel-strong)] text-sm font-semibold text-[var(--content-secondary)]">
                                {{ $loop->iteration }}
                            </div>

                            <form method="POST" action="{{ route('auth.admin.configuration.groups.update', $group) }}" class="flex min-w-0 flex-1 items-center gap-2">
                                @csrf
                                @method('PATCH')
                                <label for="group-{{ $group->id }}" class="sr-only">Nom du groupe</label>
                                <input
                                    id="group-{{ $group->id }}"
                                    name="group_name"
                                    type="text"
                                    value="{{ $group->group_name }}"
                                    required
                                    maxlength="255"
                                    class="min-w-0 flex-1 rounded-lg border border-transparent bg-transparent px-2 py-2 text-sm text-[var(--content-primary)] outline-none transition focus:border-[var(--line-subtle)] focus:bg-[var(--surface-panel-strong)]"
                                >
                                <button type="submit" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-[var(--content-muted)] transition hover:bg-[var(--surface-panel-strong)] hover:text-[var(--color-orange)]" aria-label="Enregistrer le groupe">
                                    <i class="bi bi-check-lg"></i>
                                </button>
                            </form>

                            <button type="button" onclick="openConfigurationDeleteModal(@js(route('auth.admin.configuration.groups.destroy', $group)), @js($group->group_name), 'group')" class="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--content-muted)] transition hover:bg-red-500/[0.10] hover:text-red-300" aria-label="Supprimer le groupe">
                                    <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    @empty
                        <div class="rounded-xl border border-dashed border-[var(--line-subtle)] px-4 py-8 text-center">
                            <i class="bi bi-people text-2xl text-[var(--content-muted)]"></i>
                            <p class="mt-3 text-sm text-[var(--content-muted)]">Aucun groupe configuré</p>
                        </div>
                    @endforelse
                </div>
            </section>
        </div>

        <div class="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]">
            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] p-5 shadow-sm">
                <div class="flex items-start gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl
                                bg-[var(--color-orange)]/[0.10] text-[var(--color-orange)]">
                        <i class="bi bi-tags"></i>
                    </div>
                    <div>
                        <h2 class="text-base font-semibold text-[var(--content-primary)]">Ajouter un tag d’activité</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">Les tags permettent de regrouper les activités sur la homepage.</p>
                    </div>
                </div>

                <form method="POST" action="{{ route('auth.admin.configuration.activity-tags.store') }}" class="mt-6">
                    @csrf
                    <label for="tag_name" class="mb-2 block text-xs font-medium text-[var(--content-secondary)]">Nom du tag</label>
                    <input
                        id="tag_name"
                        name="tag_name"
                        type="text"
                        value="{{ old('tag_name') }}"
                        required
                        maxlength="255"
                        placeholder="Ex. Club mercredi"
                        class="h-11 w-full rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)]
                               px-3 text-sm text-[var(--content-primary)] outline-none placeholder:text-[var(--content-muted)]
                               focus:border-[var(--color-orange)]/50 focus:ring-2 focus:ring-[var(--color-orange)]/10"
                    >
                    @error('tag_name')
                        <p class="mt-2 text-xs text-red-300">{{ $message }}</p>
                    @enderror

                    <button
                        type="submit"
                        class="mt-4 flex h-10 items-center gap-2 rounded-xl bg-[var(--color-orange)]
                               px-4 text-sm font-semibold text-black transition hover:brightness-110"
                    >
                        <i class="bi bi-plus-lg"></i>
                        Ajouter le tag
                    </button>
                </form>
            </section>

            <section class="rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <h2 class="text-base font-semibold text-[var(--content-primary)]">Tags d’activités</h2>
                        <p class="mt-1 text-xs text-[var(--content-muted)]">{{ $activityTags->count() }} tag{{ $activityTags->count() > 1 ? 's' : '' }} configuré{{ $activityTags->count() > 1 ? 's' : '' }}</p>
                    </div>
                    <i class="bi bi-tags text-lg text-[var(--color-orange)]"></i>
                </div>

                <div class="mt-5 space-y-2">
                    @forelse($activityTags as $activityTag)
                        <div class="flex items-center gap-3 rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] p-3">
                            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--surface-panel-strong)] text-sm font-semibold text-[var(--content-secondary)]">
                                {{ $loop->iteration }}
                            </div>

                            <form method="POST" action="{{ route('auth.admin.configuration.activity-tags.update', $activityTag) }}" class="flex min-w-0 flex-1 items-center gap-2">
                                @csrf
                                @method('PATCH')
                                <label for="activity-tag-{{ $activityTag->id }}" class="sr-only">Nom du tag</label>
                                <input
                                    id="activity-tag-{{ $activityTag->id }}"
                                    name="tag_name"
                                    type="text"
                                    value="{{ $activityTag->tag_name }}"
                                    required
                                    maxlength="255"
                                    class="min-w-0 flex-1 rounded-lg border border-transparent bg-transparent px-2 py-2 text-sm text-[var(--content-primary)] outline-none transition focus:border-[var(--line-subtle)] focus:bg-[var(--surface-panel-strong)]"
                                >
                                <button type="submit" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-[var(--content-muted)] transition hover:bg-[var(--surface-panel-strong)] hover:text-[var(--color-orange)]" aria-label="Enregistrer le tag">
                                    <i class="bi bi-check-lg"></i>
                                </button>
                            </form>

                            <button type="button" onclick="openConfigurationDeleteModal(@js(route('auth.admin.configuration.activity-tags.destroy', $activityTag)), @js($activityTag->tag_name), 'tag')" class="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--content-muted)] transition hover:bg-red-500/[0.10] hover:text-red-300" aria-label="Supprimer le tag">
                                    <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    @empty
                        <div class="rounded-xl border border-dashed border-[var(--line-subtle)] px-4 py-8 text-center">
                            <i class="bi bi-tags text-2xl text-[var(--content-muted)]"></i>
                            <p class="mt-3 text-sm text-[var(--content-muted)]">Aucun tag configuré</p>
                        </div>
                    @endforelse
                </div>
            </section>
        </div>
    </div>

    <div
        id="configurationDeleteModal"
        class="fixed inset-0 z-50 hidden items-center justify-center p-4"
        aria-labelledby="configurationDeleteTitle"
        aria-modal="true"
        role="dialog"
    >
        <div class="absolute inset-0 bg-[var(--surface-page)]/80 backdrop-blur-sm" onclick="closeConfigurationDeleteModal()"></div>

        <div class="relative w-full max-w-md overflow-hidden rounded-2xl border border-[var(--line-subtle)] bg-[var(--surface-panel-strong)] shadow-2xl">
            <div class="flex items-start gap-4 p-6">
                <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-red-500/[0.08] text-red-500">
                    <i class="bi bi-trash text-xl"></i>
                </div>
                <div class="min-w-0">
                    <h2 id="configurationDeleteTitle" class="text-base font-semibold text-[var(--content-primary)]">Supprimer cet élément ?</h2>
                    <p class="mt-1 text-sm leading-5 text-[var(--content-muted)]">
                        Vous êtes sur le point de supprimer <span id="configurationDeleteName" class="font-medium text-[var(--content-primary)]"></span>.
                    </p>
                </div>
            </div>

            <div class="mx-6 rounded-xl bg-red-500/[0.05] p-4">
                <div class="flex gap-3">
                    <i class="bi bi-exclamation-triangle mt-0.5 text-red-500"></i>
                    <p id="configurationDeleteWarning" class="text-xs leading-5 text-red-500/70"></p>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 p-6">
                <button type="button" onclick="closeConfigurationDeleteModal()" class="rounded-xl border border-[var(--line-subtle)] bg-[var(--surface-page)] px-4 py-2.5 text-sm font-medium text-[var(--content-secondary)] transition hover:text-[var(--content-primary)]">Annuler</button>
                <form id="configurationDeleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="flex items-center gap-2 rounded-xl bg-red-500 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-red-600">
                        <i class="bi bi-trash"></i>
                        Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function openConfigurationDeleteModal(route, name, type) {
            const modal = document.getElementById('configurationDeleteModal');
            const form = document.getElementById('configurationDeleteForm');
            const warning = document.getElementById('configurationDeleteWarning');

            form.action = route;
            document.getElementById('configurationDeleteName').textContent = `"${name}"`;
            warning.textContent = type === 'tag'
                ? 'Les activités associées resteront conservées sans tag.'
                : 'Les inscriptions associées seront conservées sans groupe.';

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

        function closeConfigurationDeleteModal() {
            const modal = document.getElementById('configurationDeleteModal');

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

        document.addEventListener('keydown', event => {
            if (event.key === 'Escape') {
                closeConfigurationDeleteModal();
            }
        });
    </script>

@endsection