@extends('layouts.admin')

@section('title', 'FAQs')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">FAQs <span class="page-title-count">({{ $faqs->count() }})</span></h1>
        <p class="page-subtitle">Manage frequently asked questions shown on the public FAQ page</p>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.faqs.create') }}" class="btn btn-primary btn-sm">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            Add FAQ
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body no-padding">
        <x-data-table :emptyMessage="'No FAQs yet. Add your first question and answer.'">
            <x-slot:thead>
                <th style="width:60px;">Order</th>
                <th>Question</th>
                <th>Answer</th>
                <th>Status</th>
                <th style="width:180px;">Actions</th>
            </x-slot:thead>
            <x-slot:tbody>
                @forelse($faqs as $faq)
                <tr>
                    <td>
                        <span class="badge badge-blue">{{ $faq->sort_order }}</span>
                    </td>
                    <td class="text-semibold" style="max-width:320px;">{{ $faq->question }}</td>
                    <td style="max-width:340px;color:#6b7280;">{{ \Illuminate\Support\Str::limit(strip_tags($faq->answer), 90) }}</td>
                    <td>
                        <span class="badge badge-{{ $faq->is_active ? 'green' : 'gray' }}">{{ $faq->is_active ? 'Active' : 'Hidden' }}</span>
                    </td>
                    <td>
                        <div class="table-actions">
                            <a href="{{ route('admin.faqs.edit', $faq) }}" class="btn btn-sm btn-outline">Edit</a>
                            <form method="POST" action="{{ route('admin.faqs.toggle', $faq) }}" class="inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline btn-{{ $faq->is_active ? 'orange' : 'green' }}">
                                    {{ $faq->is_active ? 'Hide' : 'Show' }}
                                </button>
                            </form>
                            <form method="POST" action="{{ route('admin.faqs.destroy', $faq) }}" class="inline" onsubmit="return confirm('Delete this FAQ?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline btn-red">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5">
                        <div class="data-table-empty-content">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><circle cx="24" cy="24" r="10" stroke="#94A3B8" stroke-width="1.5"/><path d="M24 20v6M24 30h.01" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                            <p>No FAQs yet. Add your first question and answer.</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </x-slot:tbody>
        </x-data-table>
    </div>
</div>
@endsection