@php $busy = 'search,setStatus,gotoPage,previousPage,nextPage,goTo'; @endphp

<div wire:loading.class="is-busy" wire:target="{{ $busy }}">
    @if ($error)
        <x-admin.panel pad>
            <div class="empty-state">
                <i class="fa-light fa-database" style="color:var(--coral);"></i>
                <div><div class="es-title">FAQs unavailable</div><div class="sub">{{ $error }}</div></div>
                <button type="button" class="btn btn-navy btn-sm" wire:click="$refresh" style="margin-left:auto;"><i class="fa-light fa-rotate-right"></i> Retry</button>
            </div>
        </x-admin.panel>
    @else
    <div class="stat-grid mb-1">
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-circle-question"></i></span>
            <span class="v">{{ number_format($kpi['total']) }}</span><span class="k">FAQs</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-eye"></i></span>
            <span class="v">{{ number_format($kpi['active']) }}</span><span class="k">Shown</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-eye-slash"></i></span>
            <span class="v">{{ number_format($kpi['hidden']) }}</span><span class="k">Hidden</span></div>
    </div>

    <x-admin.toolbar>
        <div class="tb-search">
            <i class="fa-light fa-magnifying-glass" wire:loading.remove wire:target="search"></i>
            <i class="fa-light fa-spinner-third fa-spin" wire:loading wire:target="search" style="color:var(--sky);"></i>
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search question or answer&hellip;" autocomplete="off">
            @if ($search !== '')
                <button type="button" class="ibtn" wire:click="$set('search','')" aria-label="Clear" style="border:none;background:transparent;"><i class="fa-light fa-xmark"></i></button>
            @endif
        </div>
        @foreach (['' => 'All', 'active' => 'Shown', 'hidden' => 'Hidden'] as $key => $label)
            <button type="button" class="fchip {{ $status === $key ? 'on' : '' }}" wire:click="setStatus('{{ $key }}')">{{ $label }}</button>
        @endforeach
        @php $grouped = $this->groupByCategory(app(\App\Support\Settings::class)); @endphp
        <button type="button" class="fchip {{ $grouped ? 'on' : '' }}" wire:click="toggleGrouping" style="margin-left:auto;" title="Group the public FAQ page by category">
            <i class="fa-light {{ $grouped ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i> Group by category
        </button>
        <x-admin.btn :href="route('admin.faqs.categories')" wire:navigate variant="ghost" sm icon="fa-light fa-folder-tree">Categories</x-admin.btn>
        <x-admin.btn :href="route('admin.faqs.create')" wire:navigate variant="navy" sm icon="fa-light fa-plus">New FAQ</x-admin.btn>
    </x-admin.toolbar>

    <x-admin.panel>
        <div class="tbl-wrap">
            <table class="tbl tbl-cards">
                <thead>
                    <tr><th>Question</th><th>Category</th><th>Status</th></tr>
                </thead>
                <tbody wire:loading.remove wire:target="{{ $busy }}">
                    @forelse ($faqs as $f)
                        <tr class="click" wire:key="faq-{{ $f->id }}" wire:click="goTo({{ $f->id }})">
                            <td data-label="Question">
                                <div class="nm">{{ \Illuminate\Support\Str::limit(strip_tags($f->question), 100) }}</div>
                            </td>
                            <td data-label="Category">
                                @if ($f->category)
                                    <x-admin.pill variant="neutral"><i class="fa-light fa-folder"></i> {{ $f->category->name }}</x-admin.pill>
                                @else
                                    <span class="sub">General</span>
                                @endif
                            </td>
                            <td data-label="Status">
                                <div style="display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;">
                                    @if ($f->isShown())<x-admin.pill variant="success">Shown</x-admin.pill>@else<x-admin.pill variant="neutral">Hidden</x-admin.pill>@endif
                                    @if ($f->isQuick())<x-admin.pill variant="sky"><i class="fa-light fa-bolt"></i> Landing</x-admin.pill>@endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3">
                            <div class="empty-state">
                                <i class="fa-light fa-circle-question"></i>
                                <div><div class="es-title">No FAQs match</div><div class="sub">Adjust the search or add one with “New FAQ”.</div></div>
                            </div>
                        </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($faqs->hasPages())
            <div class="tbl-foot">
                <span class="sub">Showing {{ $faqs->firstItem() }}–{{ $faqs->lastItem() }} of {{ number_format($faqs->total()) }}</span>
                <div style="display:flex;gap:.4rem;">
                    <button class="fchip" wire:click="previousPage" @disabled($faqs->onFirstPage())><i class="fa-light fa-chevron-left"></i> Prev</button>
                    <button class="fchip" wire:click="nextPage" @disabled(! $faqs->hasMorePages())>Next <i class="fa-light fa-chevron-right"></i></button>
                </div>
            </div>
        @endif
    </x-admin.panel>
    @endif
</div>