@extends('layouts.admin')

@section('title', 'FAQs Management – Admin CRM')
@section('page_title', 'Frequently Asked Questions CMS')

@section('content')
<div class="space-y-8 max-w-6xl">
    
    <!-- Add FAQ Form -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl space-y-4">
        <h3 class="text-sm font-bold text-white font-heading uppercase tracking-wider border-b border-white/10 pb-3 flex items-center gap-2">
            <i class="fa-solid fa-plus text-red-500"></i> Add New Frequently Asked Question
        </h3>

        <form method="POST" action="{{ route('admin.cms.faqs.store') }}" class="space-y-4 text-xs">
            @csrf
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="sm:col-span-2">
                    <label class="block font-bold text-slate-300 uppercase mb-1 text-[10px]">Question *</label>
                    <input type="text" name="question" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Can I participate in Japanese auctions directly?">
                </div>
                <div>
                    <label class="block font-bold text-slate-300 uppercase mb-1 text-[10px]">Category *</label>
                    <select name="category" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs font-semibold">
                        <option value="Japanese Auctions">Japanese Auctions</option>
                        <option value="Customs & Landed Costs">Customs & Landed Costs</option>
                        <option value="Shipping & Delivery">Shipping & Delivery</option>
                        <option value="Warranty & Registration">Warranty & Registration</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-300 uppercase mb-1 text-[10px]">Detailed Answer *</label>
                <textarea name="answer" rows="3" required class="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-white text-xs font-normal leading-relaxed focus:border-red-500 focus:outline-none" placeholder="Comprehensive explanation..."></textarea>
            </div>

            <button type="submit" class="px-5 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow transition">
                Add FAQ
            </button>
        </form>
    </div>

    <!-- FAQs Table -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="p-4 border-b border-white/10">
            <h3 class="text-sm font-bold text-white font-heading">Active FAQs ({{ $faqs->count() }})</h3>
        </div>
        <div class="divide-y divide-white/5 text-xs">
            @forelse($faqs as $faq)
                <div class="p-4 flex items-start justify-between gap-4 hover:bg-white/5 transition">
                    <div class="space-y-1 flex-1">
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-white/10 text-slate-300">
                            {{ $faq->category }}
                        </span>
                        <h4 class="font-bold text-white text-sm pt-1">{{ $faq->question }}</h4>
                        <p class="text-slate-400 text-xs leading-relaxed">{{ $faq->answer }}</p>
                    </div>
                    <form method="POST" action="{{ route('admin.cms.faqs.destroy', $faq->id) }}" onsubmit="return confirm('Remove this FAQ?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-2 rounded-lg bg-rose-500/20 hover:bg-rose-500/40 text-rose-300 transition">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </form>
                </div>
            @empty
                <div class="p-8 text-center text-slate-500">
                    No FAQs added yet.
                </div>
            @endforelse
        </div>
    </div>

</div>
@endsection