@extends('layouts.app')
@section('title','Preguntas frecuentes — '.config('app.name'))
@section('content')
@php
    $publishedFaqs = $faqs->where('is_published', true)->count();
    $featuredFaqs = $faqs->where('is_featured', true)->count();
    $faqCategories = $faqs->pluck('category')->filter()->unique()->sort()->values();
@endphp
<div class="dashboard-page"><div class="container-shell dashboard-shell"><x-dashboard-sidebar/><section class="dashboard-main content-admin-page">
    <header class="admin-page-header content-admin-title">
        <div><span class="dashboard-kicker">Centro de ayuda</span><h1>Preguntas frecuentes</h1><p>Organiza respuestas por tema y audiencia para resolver dudas de forma clara y rápida.</p></div>
        <a class="btn btn-secondary" href="{{ route('faqs') }}" target="_blank" rel="noopener">Ver centro de ayuda ↗</a>
    </header>

    <section class="content-overview" aria-label="Estado de las preguntas frecuentes">
        <article><span>01</span><div><strong>{{ $faqs->count() }} preguntas</strong><small>Total registrado</small></div></article>
        <article><span>02</span><div><strong>{{ $publishedFaqs }} visibles</strong><small>{{ $featuredFaqs }} destacadas</small></div></article>
        <article><span>03</span><div><strong>{{ $faqCategories->count() }} categorías</strong><small>Temas de ayuda organizados</small></div></article>
    </section>

    <section class="panel content-admin-panel">
        <div class="panel-head"><div><span class="settings-step">Nueva pregunta</span><h2>Crear respuesta de ayuda</h2></div><p>Clasifica cada respuesta por tema y audiencia para construir una base fácil de consultar.</p></div>
        <form class="content-admin-form" method="POST" action="{{ route('admin.faqs.store') }}">@csrf
            <div class="content-editor-layout faq-editor-layout">
                <div class="content-editor-main"><section class="content-form-section"><div class="content-form-section-head"><div><span>Pregunta y respuesta</span><h3>Información que verá el usuario</h3></div><p>Formula la pregunta con las mismas palabras que usaría un estudiante.</p></div><label><span class="form-label">Pregunta</span><input class="form-input" name="question" value="{{ old('question') }}" maxlength="500" placeholder="Ej. ¿Cómo descargo mi certificado?" required></label><label><span class="form-label">Respuesta</span><x-rich-text-editor name="answer" :value="old('answer')" :short="true" placeholder="Explica el proceso paso a paso y agrega enlaces cuando sean útiles." /></label></section></div>
                <aside class="content-editor-aside"><section class="content-side-card"><header><span>Organización</span><strong>Clasificación y alcance</strong></header><label><span class="form-label">Categoría</span><input class="form-input" name="category" value="{{ old('category') }}" list="faq-categories" maxlength="100" placeholder="Ej. Certificados"><datalist id="faq-categories">@foreach($faqCategories as $category)<option value="{{ $category }}">@endforeach</datalist></label><label><span class="form-label">Audiencia</span><select class="form-select" name="audience"><option value="all">Todas las personas</option><option value="students">Estudiantes</option><option value="instructors">Instructores</option></select></label><div class="content-switches"><label><input type="checkbox" name="is_published" value="1" checked><span><strong>Publicar respuesta</strong><small>Visible en el centro de ayuda.</small></span></label><label><input type="checkbox" name="is_featured" value="1"><span><strong>Pregunta destacada</strong><small>Aparece antes que las demás.</small></span></label></div></section></aside>
            </div>
            <div class="content-form-actions"><span class="form-help">La posición inicial se asignará automáticamente.</span><button class="btn btn-primary">Agregar pregunta</button></div>
        </form>
    </section>

    <section class="content-records">
        <div class="content-records-head"><div><span class="dashboard-kicker">Base de ayuda</span><h2>Organiza y actualiza las respuestas</h2></div><p>{{ $faqs->count() }} {{ $faqs->count() === 1 ? 'pregunta registrada' : 'preguntas registradas' }}</p></div>
        @forelse($faqs as $faq)
            <details class="panel content-record"><summary><span class="content-record-icon">?</span><span><strong>{{ $faq->question }}</strong><small>{{ $faq->category ?: 'Sin categoría' }} · {{ match($faq->audience) {'students'=>'Estudiantes','instructors'=>'Instructores',default=>'Todo público'} }} · Posición {{ $faq->position }}</small></span><span class="status {{ $faq->is_published ? 'status-published' : 'status-review' }}">{{ $faq->is_featured ? 'Destacada' : ($faq->is_published ? 'Publicada' : 'Borrador') }}</span><span class="content-record-edit">Editar</span><i>⌄</i></summary>
                <form class="content-record-form" method="POST" action="{{ route('admin.faqs.update',$faq) }}">@csrf @method('PUT')
                    <div class="content-editor-layout faq-editor-layout"><div class="content-editor-main"><section class="content-form-section"><label><span class="form-label">Pregunta</span><input class="form-input" name="question" value="{{ $faq->question }}" required></label><label><span class="form-label">Respuesta</span><x-rich-text-editor name="answer" :value="$faq->answer" :short="true" /></label></section></div><aside class="content-editor-aside"><section class="content-side-card"><header><span>Organización</span><strong>Clasificación y estado</strong></header><label><span class="form-label">Categoría</span><input class="form-input" name="category" value="{{ $faq->category }}" list="faq-categories"></label><div class="form-grid"><label><span class="form-label">Audiencia</span><select class="form-select" name="audience"><option value="all" @selected($faq->audience==='all')>Todo público</option><option value="students" @selected($faq->audience==='students')>Estudiantes</option><option value="instructors" @selected($faq->audience==='instructors')>Instructores</option></select></label><label><span class="form-label">Posición</span><input class="form-input" type="number" name="position" value="{{ $faq->position }}" min="0" required></label></div><div class="content-switches"><label><input type="checkbox" name="is_published" value="1" @checked($faq->is_published)><span><strong>Visible en el sitio</strong></span></label><label><input type="checkbox" name="is_featured" value="1" @checked($faq->is_featured)><span><strong>Destacada</strong></span></label></div></section></aside></div>
                    <div class="content-form-actions"><span class="form-help">Última actualización: {{ $faq->updated_at->format('d/m/Y H:i') }}</span><button class="btn btn-primary">Guardar cambios</button></div>
                </form>
                <form class="content-delete-form" method="POST" action="{{ route('admin.faqs.destroy',$faq) }}" data-confirm="¿Eliminar esta pregunta frecuente? Dejará de mostrarse en el centro de ayuda.">@csrf @method('DELETE')<span><strong>Eliminar pregunta</strong><small>Esta acción retira permanentemente la respuesta.</small></span><button class="btn btn-danger btn-small">Eliminar</button></form>
            </details>
        @empty<div class="panel content-empty"><strong>Aún no hay preguntas frecuentes.</strong><span>Agrega las dudas que recibe con mayor frecuencia tu equipo.</span></div>@endforelse
    </section>
</section></div></div>
@endsection