{{-- resources/views/ui/faq/index.blade.php --}}

<x-layouts.app title="FAQ" userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">FAQ</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Antworten, Tipps & häufige Probleme – strukturiert nach Themen.
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('dashboard') }}" class="btn-rk-soft">
                    Dashboard
                </a>
                <a href="{{ route('faq.index') }}" class="btn-rk-soft">
                    Aktualisieren
                </a>
            </div>
        </div>

        {{-- Top hint / search (client-side only) --}}
        <div class="rounded-3xl bg-white border border-rk p-4 shadow-sm">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-7">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">FAQ
                        durchsuchen</label>
                    <input id="faqSearch" type="text"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="z.B. Mindestbestand, Export, Varianten, Status …">
                    <div class="mt-2 text-xs text-rk-slate">
                        Filtert nur in dieser Seite (clientseitig). Serverdaten bleiben unverändert.
                    </div>
                </div>

                <div class="lg:col-span-5 flex lg:justify-end gap-2">
                    <button type="button" id="expandAll" class="btn-rk-soft">
                        Alles öffnen
                    </button>
                    <button type="button" id="collapseAll" class="btn-rk-soft">
                        Alles schließen
                    </button>
                </div>
            </div>
        </div>

        {{-- Sections --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            @foreach ($sections as $sIndex => $section)
                <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                    <div class="px-6 py-5 border-b border-rk bg-rk-red text-white">
                        <div class="flex items-center justify-between gap-3">
                            <div>
                                <div class="text-sm font-semibold">{{ $section['title'] }}</div>
                                <div class="text-xs text-rk-white mt-1">
                                    {{ count($section['items']) }} Einträge
                                </div>
                            </div>

                            <span
                                class="inline-flex items-center rounded-full bg-neutral-50 px-3 py-1 text-xs font-semibold text-rk-slate border border-rk">
                                FAQ
                            </span>
                        </div>
                    </div>

                    <div class="p-4 space-y-3">
                        @foreach ($section['items'] as $iIndex => $f)
                            <details
                                class="faq-item group rounded-2xl border border-rk bg-white p-4 transition-rk hover:bg-neutral-50"
                                data-q="{{ Str::lower($f['q']) }}" data-a="{{ Str::lower($f['a']) }}">
                                <summary class="cursor-pointer list-none flex items-start justify-between gap-4">
                                    <div class="font-semibold text-sm text-rk-charcoal">
                                        {{ $f['q'] }}
                                    </div>

                                    <span class="shrink-0 mt-0.5 text-rk-slate transition-rk group-open:rotate-180">
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                            <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                </summary>

                                <div class="mt-3 text-sm text-rk-slate leading-relaxed">
                                    {{ $f['a'] }}
                                </div>
                            </details>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <script>
        (function() {
            const input = document.getElementById('faqSearch');
            const items = Array.from(document.querySelectorAll('.faq-item'));
            const expandAll = document.getElementById('expandAll');
            const collapseAll = document.getElementById('collapseAll');

            if (!input || !items.length) return;

            const match = (el, term) => {
                const q = (el.getAttribute('data-q') || '');
                const a = (el.getAttribute('data-a') || '');
                return (q.includes(term) || a.includes(term));
            };

            const applyFilter = () => {
                const term = (input.value || '').trim().toLowerCase();
                items.forEach(el => {
                    const ok = !term || match(el, term);
                    el.classList.toggle('hidden', !ok);
                    if (!ok) el.open = false;
                });
            };

            input.addEventListener('input', applyFilter);

            expandAll?.addEventListener('click', () => {
                const term = (input.value || '').trim().toLowerCase();
                items.forEach(el => {
                    if (!el.classList.contains('hidden') && (term ? match(el, term) : true)) el.open =
                        true;
                });
            });

            collapseAll?.addEventListener('click', () => {
                items.forEach(el => el.open = false);
            });
        })();
    </script>
</x-layouts.app>