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

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

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

@section('action-buttons')
<a href="{{ route('faqs.index') }}" class="btn btn-secondary btn-sm me-2" title="Gestionar FAQs">
    <i class="ri-question-line"></i> FAQs
</a>
@endsection

@section('filters')
<!-- 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>Nombre</th>
    <th>Slug</th>
    <th>FAQs</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($faq_categories as $category)
<tr>
    <td>{{ $category->id }}</td>
    <td>
        <strong>{{ $category->name }}</strong>
        @if($category->meta_title)
            <br><small class="text-muted">{{ Str::limit($category->meta_title, 50) }}</small>
        @endif
    </td>
    <td>
        <code>{{ $category->slug }}</code>
    </td>
    <td>
        <span class="badge bg-info">{{ $category->faqs()->count() }} FAQs</span>
    </td>
    <td>{{ $category->order }}</td>
    <td>
        @if ($category->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($category->ai_generated_at)
            <span class="badge bg-success">Generado</span>
        @endif
    </td>
    <td>
        <div class="d-flex gap-1">
            <a href="{{ route('faq_categories.edit', $category->id) }}"
               class="btn btn-warning btn-sm"
               title="Editar">
                <i class="ri-pencil-line"></i>
            </a>
            <button onclick="deleteFaqCategory({{ $category->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 deleteFaqCategory(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("faq_categories.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 'faqs':
                    window.location.href = '{{ route("faqs.index") }}';
                    return;
            }
            
            url.searchParams.delete('page'); // Reset pagination
            window.location.href = url.toString();
        }
    });
});
</script>
@endpush