@extends('layouts.admin')
@section('content')
<div class="max-w-6xl">
    <div class="flex flex-col justify-between gap-4 md:flex-row md:items-end">
        <div>
            <p class="hms-kicker">Patient information</p>
            <h1 class="font-serif text-4xl">Frequently Asked Questions</h1>
            <p class="mt-3 max-w-3xl text-black/60">Manage the questions shown in the <strong>Frequently asked questions</strong> section of the public Patient Information page. Only Published FAQs are visible to visitors.</p>
        </div>
        <a class="text-sm font-semibold text-[var(--hms-forest)]" href="{{ route('patient-info') }}" target="_blank" rel="noopener">View Patient Information ↗</a>
    </div>

    <div class="mt-6 grid gap-3 sm:grid-cols-3">
        <div class="rounded-xl border border-black/10 bg-white p-4"><span class="text-xs uppercase tracking-wide text-black/40">Total</span><strong class="mt-1 block text-2xl">{{ $faqs->count() }}</strong></div>
        <div class="rounded-xl border border-black/10 bg-white p-4"><span class="text-xs uppercase tracking-wide text-black/40">Published</span><strong class="mt-1 block text-2xl">{{ $faqs->where('status','published')->count() }}</strong></div>
        <div class="rounded-xl border border-black/10 bg-white p-4"><span class="text-xs uppercase tracking-wide text-black/40">Draft / archived</span><strong class="mt-1 block text-2xl">{{ $faqs->where('status','!=','published')->count() }}</strong></div>
    </div>

    <section class="mt-8 rounded-2xl border border-black/10 bg-white p-6">
        <div class="grid gap-6 lg:grid-cols-[.8fr_1.5fr]">
            <div>
                <h2 class="font-serif text-2xl">Add an FAQ</h2>
                <p class="mt-2 text-sm leading-relaxed text-black/55">Use clear patient-facing language and only enter verified store requirements or policies. Categories group related questions; display order controls their sequence within that category.</p>
            </div>
            <form class="grid gap-4 sm:grid-cols-2" method="POST" action="{{ route('admin.faqs.store') }}">
                @csrf
                <label class="grid gap-1.5 text-sm font-semibold sm:col-span-2">Question<span class="text-xs font-normal text-black/45">The clickable question visitors see on the Patient Information page.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="question" value="{{ old('question') }}" placeholder="Example: What should I bring for my first visit?" required></label>
                <label class="grid gap-1.5 text-sm font-semibold">Category<span class="text-xs font-normal text-black/45">Optional grouping label, such as Visiting, Eligibility, or Store Policies.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="category" value="{{ old('category') }}" placeholder="Visiting"></label>
                <label class="grid gap-1.5 text-sm font-semibold">Display order<span class="text-xs font-normal text-black/45">Lower numbers appear first within a category. Use 10, 20, 30… to leave room between items.</span><input class="rounded-xl border border-black/15 px-4 py-3" type="number" min="0" name="sort_order" value="{{ old('sort_order', 10) }}" required></label>
                <label class="grid gap-1.5 text-sm font-semibold sm:col-span-2">Answer<span class="text-xs font-normal text-black/45">Public answer displayed when the visitor expands the question.</span><textarea class="min-h-32 rounded-xl border border-black/15 px-4 py-3" name="answer" required>{{ old('answer') }}</textarea></label>
                <label class="grid gap-1.5 text-sm font-semibold">Status<span class="text-xs font-normal text-black/45">Draft stays private; Published appears publicly.</span><select class="rounded-xl border border-black/15 px-4 py-3" name="status"><option value="draft" @selected(old('status','draft')==='draft')>Draft</option><option value="published" @selected(old('status')==='published')>Published</option></select></label>
                <div class="flex items-end"><button class="hms-button hms-button-primary">Add FAQ</button></div>
            </form>
        </div>
    </section>

    <section class="mt-8">
        <div><h2 class="font-serif text-2xl">Existing FAQs</h2><p class="mt-1 text-sm text-black/50">Grouped by category, then ordered by the Display order number.</p></div>
        <div class="mt-4 grid gap-6">
            @forelse($faqs->groupBy(fn ($faq) => $faq->category ?: 'Uncategorized') as $category => $categoryFaqs)
                <div>
                    <div class="mb-2 flex items-center gap-3"><h3 class="text-xs font-bold uppercase tracking-[.14em] text-black/45">{{ $category }}</h3><span class="text-xs text-black/35">{{ $categoryFaqs->count() }}</span></div>
                    <div class="overflow-hidden rounded-2xl border border-black/10 bg-white">
                        @foreach($categoryFaqs as $faq)
                            <details class="border-b border-black/10 last:border-b-0">
                                <summary class="flex cursor-pointer list-none flex-col justify-between gap-3 p-5 hover:bg-black/[.015] sm:flex-row sm:items-center [&::-webkit-details-marker]:hidden">
                                    <div class="min-w-0"><strong class="block">{{ $faq->question }}</strong><span class="mt-1 block text-xs text-black/45">Display order {{ $faq->sort_order }} · Updated {{ $faq->updated_at->diffForHumans() }}</span></div>
                                    <div class="flex shrink-0 items-center gap-3"><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide {{ $faq->status === 'published' ? 'bg-green-100 text-green-800' : ($faq->status === 'archived' ? 'bg-black/5 text-black/50' : 'bg-amber-100 text-amber-800') }}">{{ $faq->status }}</span><span class="text-xs font-semibold text-black/40">Edit ▾</span></div>
                                </summary>
                                <form class="grid gap-4 border-t border-black/10 bg-black/[.015] p-5 sm:grid-cols-2" method="POST" action="{{ route('admin.faqs.update', $faq) }}">
                                    @csrf @method('PUT')
                                    <label class="grid gap-1 text-sm font-semibold sm:col-span-2">Question<input class="rounded-xl border border-black/15 bg-white px-4 py-3" name="question" value="{{ $faq->question }}" required></label>
                                    <label class="grid gap-1 text-sm font-semibold">Category<input class="rounded-xl border border-black/15 bg-white px-4 py-3" name="category" value="{{ $faq->category }}"></label>
                                    <label class="grid gap-1 text-sm font-semibold">Display order<span class="text-xs font-normal text-black/45">Lower numbers appear first.</span><input class="rounded-xl border border-black/15 bg-white px-4 py-3" type="number" min="0" name="sort_order" value="{{ $faq->sort_order }}" required></label>
                                    <label class="grid gap-1 text-sm font-semibold sm:col-span-2">Answer<textarea class="min-h-32 rounded-xl border border-black/15 bg-white px-4 py-3" name="answer" required>{{ $faq->answer }}</textarea></label>
                                    <label class="grid gap-1 text-sm font-semibold">Status<select class="rounded-xl border border-black/15 bg-white px-4 py-3" name="status">@foreach(['draft' => 'Draft','published' => 'Published','archived' => 'Archived'] as $value => $label)<option value="{{ $value }}" @selected($faq->status === $value)>{{ $label }}</option>@endforeach</select></label>
                                    <div class="flex items-end"><button class="hms-button border border-black/15 bg-white">Save FAQ</button></div>
                                </form>
                            </details>
                        @endforeach
                    </div>
                </div>
            @empty
                <p class="rounded-2xl border border-dashed border-black/15 p-8 text-center text-black/50">No FAQs yet. Add the first patient-facing question above.</p>
            @endforelse
        </div>
    </section>
</div>
@endsection