@extends('layouts.app')
@section('title', __('FAQs'))
@section('page-title', __('FAQs'))
@section('page-subtitle', __('Questions shown on the public homepage.'))

@section('content')
@include('super-admin._nav')

<div class="card overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-200/70 dark:border-slate-800 flex items-center gap-3">
        <x-icon name="mail" class="w-5 h-5 text-brand-600"/>
        <span class="font-semibold">{{ __('All FAQs') }}</span>
        <span class="ms-auto badge-info">{{ $faqs->count() }}</span>
        <a href="{{ route('super-admin.faqs.create') }}" class="btn-primary text-xs">
            <x-icon name="plus" class="w-4 h-4"/> {{ __('Add FAQ') }}
        </a>
    </div>
    <div class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse($faqs as $f)
            <div class="px-6 py-4 flex items-start gap-4">
                <span class="w-8 h-8 rounded-lg bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 flex items-center justify-center text-xs font-bold">{{ $f->sort }}</span>
                <div class="flex-1 min-w-0">
                    <div class="font-semibold">{{ $f->question() }}</div>
                    <div class="text-sm text-slate-500 mt-1 line-clamp-2">{{ $f->answer() }}</div>
                </div>
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold {{ $f->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                    {{ $f->is_active ? __('Active') : __('Inactive') }}
                </span>
                <a href="{{ route('super-admin.faqs.edit', $f) }}" class="btn-secondary text-xs">
                    <x-icon name="edit" class="w-4 h-4"/> {{ __('Edit') }}
                </a>
                <form method="POST" action="{{ route('super-admin.faqs.destroy', $f) }}" onsubmit="return confirm('{{ __('Delete this FAQ?') }}')">
                    @csrf @method('DELETE')
                    <button class="btn-ghost text-xs text-rose-600"><x-icon name="trash" class="w-4 h-4"/></button>
                </form>
            </div>
        @empty
            <div class="text-center py-16 text-slate-500">
                {{ __('No FAQs yet.') }}
            </div>
        @endforelse
    </div>
</div>
@endsection