@extends('admin.layouts.index-template', [
    'pageTitle' => 'Preguntas Frecuentes (FAQs)',
    'items' => $faqs,
    'icon' => 'question',
    'module' => 'FAQs',
    'createRoute' => route('faqs.create'),
    'indexRoute' => route('faqs.index'),
    'searchPlaceholder' => 'Buscar FAQs por pregunta, respuesta...',
    'emptyIcon' => 'question-circle',
    'emptyTitle' => 'No hay FAQs',
    'emptyMessage' => 'Crea tu primera pregunta frecuente para comenzar',
    'stats' => [
        'total' => [
            'label' => 'Total FAQs',
            'count' => $faqs->total(),
            'color' => 'info',
            'icon' => 'question'
        ],
        'active' => [
            'label' => 'FAQs Activas',
            'count' => \App\Models\Faq::where('status', 1)->count(),
            'color' => 'success',
            'icon' => 'checkbox-circle'
        ],
        'inactive' => [
            'label' => 'FAQs Inactivas',
            'count' => \App\Models\Faq::where('status', 0)->count(),
            'color' => 'warning',
            'icon' => 'close-circle'
        ],
        'categories' => [
            'label' => 'Categorías',
            'count' => \App\Models\FaqCategory::count(),
            'color' => 'primary',
            'icon' => 'folder'
        ]
    ]
])

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@section('header-buttons')
<a href="{{ route('faqs.create') }}" class="btn btn-primary">
    <i class="ri-add-line"></i> Nueva FAQ
</a>
@endsection

@section('action-buttons')
<a href="{{ route('faq_categories.index') }}" class="btn btn-secondary btn-sm me-2" title="Gestionar categorías">
    <i class="ri-folder-line"></i> Categorías
</a>
@endsection

@section('filters')
<!-- Filtro por Categoría -->
<div class="col-md-3">
    <label class="form-label small">Categoría</label>
    <select name="category" class="form-select form-select-sm">
        <option value="">Todas las Categorías</option>
        @foreach(\App\Models\FaqCategory::orderBy('order')->get() as $category)
            <option value="{{ $category->id }}" {{ Request::get('category') == $category->id ? 'selected' : '' }}>
                {{ $category->name }}
            </option>
        @endforeach
    </select>
</div>

<!-- Filtro por Estado -->
<div class="col-md-3">
    <label class="form-label small">Estado</label>
    <select name="status" class="form-select form-select-sm">
        <option value="">Todos los Estados</option>
        <option value="1" {{ Request::get('status') == '1' ? 'selected' : '' }}>Activas</option>
        <option value="0" {{ Request::get('status') == '0' ? 'selected' : '' }}>Inactivas</option>
    </select>
</div>
@endsection

@section('table-headers')
<tr>
    <th width="60">ID</th>
    <th>Categoría</th>
    <th>Pregunta</th>
    <th>Nombre</th>
    <th>Orden</th>
    <th width="100">Estado</th>
    <th width="120">SEO con IA</th>
    <th width="120">Acciones</th>
</tr>
@endsection

@section('table-body')
@foreach($faqs as $faq)
<tr>
    <td>{{ $faq->id }}</td>
    <td>
        @if($faq->faq_category)
            <span class="badge bg-info">{{ $faq->faq_category->name }}</span>
        @else
            <span class="badge bg-secondary">Sin categoría</span>
        @endif
    </td>
    <td>
        <strong>{{ Str::limit(strip_tags($faq->question), 60) }}</strong>
        @if($faq->name)
            <br><small class="text-muted">{{ $faq->name }}</small>
        @endif
    </td>
    <td>
        <code>{{ $faq->slug }}</code>
    </td>
    <td>
        <span class="badge badge-light">{{ $faq->order }}</span>
    </td>
    <td>
        @if($faq->status == 1)
            <span class="badge bg-success">
                <i class="ri-checkbox-circle-line"></i> Activa
            </span>
        @else
            <span class="badge bg-warning">
                <i class="ri-close-circle-line"></i> Inactiva
            </span>
        @endif
    </td>
    <td>
        @if($faq->ai_generated_at)
            <span class="badge bg-success">Generado</span>
        @endif
    </td>
    <td>
        <div class="d-flex gap-1">
            <a href="{{ route('faqs.edit', $faq->id) }}"
               class="btn btn-warning btn-sm"
               title="Editar">
                <i class="ri-pencil-line"></i>
            </a>
            <button onclick="deleteFaq({{ $faq->id }})"
                    class="btn btn-danger btn-sm"
                    title="Eliminar">
                <i class="ri-delete-bin-line"></i>
            </button>
        </div>
    </td>
</tr>
@endforeach
@endsection

@push('js')
<script>
function deleteFaq(id) {
    Swal.fire({
        title: '¿Estás seguro?',
        text: 'Esta acción no se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            var url = '{{ route("faqs.delete", "ID") }}';
            var newUrl = url.replace("ID", id);

            $.ajax({
                url: newUrl,
                type: 'DELETE',
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    if (response.status) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Eliminada!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(function() {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                        });
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Hubo un problema con la solicitud. Por favor, intente nuevamente.',
                    });
                }
            });
        }
    });
}

// Handle filter clicks from stats cards
$(document).ready(function() {
    $('.stats-card').on('click', function() {
        var filter = $(this).data('filter');
        if (filter) {
            var url = new URL(window.location.href);
            
            switch(filter) {
                case 'active':
                    url.searchParams.set('status', '1');
                    break;
                case 'inactive':
                    url.searchParams.set('status', '0');
                    break;
                case 'total':
                    url.searchParams.delete('status');
                    break;
                case 'categories':
                    window.location.href = '{{ route("faq_categories.index") }}';
                    return;
            }
            
            url.searchParams.delete('page'); // Reset pagination
            window.location.href = url.toString();
        }
    });
});
</script>
@endpush