@extends('admin.layouts.index-template')

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

@php
$stats = [
    'total' => [
        'label' => 'Total Categorías',
        'count' => $blogCategories->total(),
        'color' => 'info',
        'icon' => 'folder',
        'filter' => 'total'
    ],
    'active' => [
        'label' => 'Categorías Activas',
        'count' => \App\Models\BlogCategory::where('status', 1)->count(),
        'color' => 'success',
        'icon' => 'checkbox-circle',
        'filter' => 'active'
    ],
    'inactive' => [
        'label' => 'Categorías Inactivas',
        'count' => \App\Models\BlogCategory::where('status', 0)->count(),
        'color' => 'warning',
        'icon' => 'close-circle',
        'filter' => 'inactive'
    ]
];

$pageTitle = 'Categorías del Blog';
$module = 'Categorías';
$icon = 'folder';
$items = $blogCategories;
$createRoute = route('blog_categories.create');
$indexRoute = route('blog_categories.index');
$searchPlaceholder = 'Buscar categorías...';
@endphp

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

@section('filters')
<!-- Status Filter -->
<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' : '' }}>Activos</option>
        <option value="0" {{ Request::get('status') == '0' ? 'selected' : '' }}>Inactivos</option>
    </select>
</div>
@endsection

@section('table-headers')
<tr>
    <th width="60">ID</th>
    <th>Imagen</th>
    <th>Nombre</th>
    <th>Slug</th>
    <th>Posts</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 ($blogCategories as $category)
<tr>
    <td>{{ $category->id }}</td>
    <td>
        @if(!empty($category->image))
            <img src="{{ asset('uploads/blog_categories/thumb/'.$category->image) }}" 
                 alt="{{ $category->name }}" 
                 class="img-thumbnail" 
                 style="width: 50px; height: 40px; object-fit: cover;">
        @else
            <div class="bg-light d-flex align-items-center justify-content-center" 
                 style="width: 50px; height: 40px; border-radius: 4px;">
                <i class="ri-folder-line text-muted"></i>
            </div>
        @endif
    </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->blogs()->count() }} posts</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('blog_categories.edit', $category->id) }}"
               class="btn btn-warning btn-sm"
               title="Editar">
                <i class="ri-pencil-line"></i>
            </a>
            <button onclick="deleteBlogCategory({{ $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 deleteBlogCategory(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("blog_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;
            }
            
            url.searchParams.delete('page'); // Reset pagination
            window.location.href = url.toString();
        }
    });
});
</script>
@endpush