@extends('layouts.school')
@section('title', 'FAQs')
@section('header', 'Frequently Asked Questions')
@section('content')
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <form method="POST" action="{{ route('school.cms.store-faq', request()->route('schoolId')) }}" class="space-y-4">
            @csrf
            <div><label class="block text-sm font-medium text-gray-700">Question *</label><input type="text" name="question" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            <div><label class="block text-sm font-medium text-gray-700">Answer *</label><textarea name="answer" rows="4" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></textarea></div>
            <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Add FAQ</button>
        </form>
    </div>
    <div class="space-y-4">
        @forelse($faqs as $faq)
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-5 flex items-start justify-between">
                <div>
                    <p class="font-medium text-gray-900">{{ $faq->question }}</p>
                    <p class="mt-1 text-sm text-gray-600">{{ $faq->answer }}</p>
                </div>
                <form method="POST" action="{{ route('school.cms.delete-faq', [request()->route('schoolId'), $faq->id]) }}" onsubmit="return confirm('Delete?')">@csrf @method('DELETE')<button type="submit" class="text-xs text-red-600 hover:text-red-800 ml-4 shrink-0">Delete</button></form>
            </div>
        @empty
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center text-sm text-gray-500">No FAQs yet.</div>
        @endforelse
    </div>
@endsection