@extends('admin.layouts.app')

@push('css')
<!-- Dropzone CSS -->
<link rel="stylesheet" href="{{ asset('velzon-assets/libs/dropzone/dropzone.css') }}">
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
.tab-modern {
    border: none;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-right: 5px;
}

.tab-modern.active {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 10px 10px 0 0;
    margin-right: 5px;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    border: none;
    transform: translateY(-2px);
}

.nav-tabs .nav-link.active {
    border: none;
    background: #007bff;
    color: white;
}

.card-modern {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.ai-coming-soon {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0"><i class="ri-add-line text-primary"></i> Crear Categoría de Blog</h4>
            <div class="page-title-right">
                <a href="{{ route('blog_categories.index') }}" class="btn btn-secondary">
                <i class="ri-arrow-left-line"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>
    <form action="" method="post" id="blogCategoryForm" name="blogCategoryForm" enctype="multipart/form-data">
            
            <!-- Nav tabs -->
            <div class="card card-modern">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="custom-tabs-category-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-category-basic-tab" data-bs-toggle="pill" href="#custom-tabs-category-basic" role="tab" aria-controls="custom-tabs-category-basic" aria-selected="true">
                                <i class="ri-information-line"></i> Información Básica
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-category-media-tab" data-bs-toggle="pill" href="#custom-tabs-category-media" role="tab" aria-controls="custom-tabs-category-media" aria-selected="false">
                                <i class="ri-image-line"></i> Imagen
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-category-settings-tab" data-bs-toggle="pill" href="#custom-tabs-category-settings" role="tab" aria-controls="custom-tabs-category-settings" aria-selected="false">
                                <i class="ri-settings-3-line"></i> Configuración
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-category-seo-tab" data-bs-toggle="pill" href="#custom-tabs-category-seo" role="tab" aria-controls="custom-tabs-category-seo" aria-selected="false">
                                <i class="ri-search-line"></i> SEO
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-category-tabContent">
                        
                        <!-- Tab 1: Información Básica -->
                        <div class="tab-pane fade show active" id="custom-tabs-category-basic" role="tabpanel" aria-labelledby="custom-tabs-category-basic-tab">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card card-modern">
                                        <div class="card-header">
                                            <h3 class="card-title">Detalles de la Categoría</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="name">Nombre *</label>
                                                <input type="text" name="name" id="name" class="form-control" placeholder="Nombre de la categoría">
                                                <p class="error"></p>
                                            </div>
                                            <div class="mb-3">
                                                <label for="slug">Slug</label>
                                                <input type="text" readonly name="slug" id="slug" class="form-control" placeholder="URL amigable (se genera automáticamente)">
                                                <p class="error"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Imagen -->
                        <div class="tab-pane fade" id="custom-tabs-category-media" role="tabpanel" aria-labelledby="custom-tabs-category-media-tab">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card card-modern">
                                        <div class="card-header">
                                            <h3 class="card-title">Imagen de la Categoría</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="alert alert-info">
                                                <i class="ri-information-line"></i> <strong>Recomendación:</strong> Usa una imagen de al menos 300x200 píxeles para mejor calidad. Formatos: JPG, PNG, GIF.
                                            </div>
                                            <div id="image" class="dropzone dz-clickable">
                                                <div class="dz-message needsclick">
                                                    <br>Suelta la imagen aquí o haz clic para subirla.<br><br>
                                                    <span class="note">Esta imagen representará la categoría en el blog</span>
                                                </div>
                                            </div>
                                            <input type="hidden" id="image_id" name="image_id" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 3: Configuración -->
                        <div class="tab-pane fade" id="custom-tabs-category-settings" role="tabpanel" aria-labelledby="custom-tabs-category-settings-tab">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card card-modern">
                                        <div class="card-header">
                                            <h3 class="card-title">Configuración y Visibilidad</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="field_status" class="form-label">Estado <span class="text-danger">*</span></label>
                                                        <select name="status" id="field_status" class="form-select">
                                                            <option {{ old('status', '1') == '1' ? 'selected' : '' }} value="1">Activo</option>
                                                            <option {{ old('status', '1') == '0' ? 'selected' : '' }} value="0">Inactivo</option>
                                                        </select>
                                                        <p></p>
                                                        <small class="text-muted">
                                                            <i class="ri-eye-line"></i>
                                                            Las categorías activas son visibles en el blog
                                                        </small>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="order" class="form-label">Orden de Visualización</label>
                                                        <input type="number" name="order" id="order" class="form-control"
                                                               placeholder="0" value="{{ old('order', 0) }}">
                                                        <small class="text-muted">
                                                            <i class="ri-sort-asc"></i>
                                                            Menor número = aparece primero
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 4: SEO -->
                        <div class="tab-pane fade" id="custom-tabs-category-seo" role="tabpanel" aria-labelledby="custom-tabs-category-seo-tab">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card card-modern">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h3 class="card-title">Optimización para Motores de Búsqueda</h3>
                                            @if(aiIntegrationEnabled())
                                            <button type="button" class="btn btn-sm btn-info" id="generateAiSeo" style="display: none;">
                                                <i class="ri-robot-line"></i> Generar con IA
                                            </button>
                                            @endif
                                        </div>
                                        <div class="card-body">
                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i> <strong>Tip SEO:</strong> Completa estos campos para mejorar el posicionamiento de la categoría en buscadores como Google.
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="meta_title">Meta Título</label>
                                                <input type="text" name="meta_title" id="meta_title" class="form-control" 
                                                       placeholder="Título optimizado para SEO (máx. 60 caracteres)" 
                                                       maxlength="60">
                                                <small class="text-muted">
                                                    Caracteres: <span id="meta_title_count">0</span>/60
                                                </small>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="meta_description">Meta Descripción</label>
                                                <textarea name="meta_description" id="meta_description" class="form-control" 
                                                          rows="3" placeholder="Descripción que aparecerá en resultados de búsqueda (máx. 160 caracteres)" 
                                                          maxlength="160"></textarea>
                                                <small class="text-muted">
                                                    Caracteres: <span id="meta_description_count">0</span>/160
                                                </small>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="meta_keywords">Palabras Clave</label>
                                                <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" 
                                                       placeholder="Palabras clave separadas por comas">
                                                <small class="text-muted">Ej: tecnología, desarrollo web, programación</small>
                                            </div>
                                            
                                            <!-- AI Coming Soon Notice -->
                                            <div class="ai-coming-soon">
                                                <i class="ri-brain-line ri-2x text-primary mb-2"></i>
                                                <h6 class="text-primary">¡Generación SEO con IA disponible después de crear la categoría!</h6>
                                                <p class="text-muted mb-0">
                                                    Una vez que crees la categoría, podrás usar la inteligencia artificial para generar automáticamente contenido SEO optimizado.
                                                    <br><small>Ve a "Editar" la categoría para acceder a esta funcionalidad.</small>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                
                <!-- Botones de acción -->
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('blog_categories.index') }}" class="btn btn-secondary">
                                <i class="ri-close-line"></i> Cancelar
                            </a>
                        </div>
                        <div class="col-md-6 text-end">
                            <button type="submit" class="btn btn-success">
                                <i class="ri-save-line"></i> Crear Categoría
                            </button>
                        </div>
                    </div>
                </div>
            </div>
    </form>

@endsection

@section('customJs')
<!-- Dropzone JS -->
<script src="{{ asset('velzon-assets/libs/dropzone/dropzone-min.js') }}"></script>

<script>
$(document).ready(function() {
    // Contador de caracteres para SEO
    $('#meta_title').on('input', function() {
        $('#meta_title_count').text($(this).val().length);
    });

    $('#meta_description').on('input', function() {
        $('#meta_description_count').text($(this).val().length);
    });
});

// Configurar Dropzone
Dropzone.autoDiscover = false;
const dropzone = $("#image").dropzone({
    init: function() {
        this.on('addedfile', function(file) {
            if (this.files.length > 1) {
                this.removeFile(this.files[0]);
            }
        });
    },
    url: "{{ route('temp-images.create') }}",
    maxFiles: 1,
    paramName: 'image',
    addRemoveLinks: true,
    acceptedFiles: "image/jpeg,image/png,image/gif",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(file, response) {
        $("#image_id").val(response.image_id);
    }
});

// Generar slug automáticamente
$("#name").change(function() {
    const element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("getSlug") }}',
        type: 'get',
        data: {title: element.val()},
        dataType: 'json',
        success: function(response) {
            $("button[type=submit]").prop('disabled', false);
            if(response["status"] == true) {
                $("#slug").val(response["slug"]);
            }
        }
    });
});

// Manejo del envío del formulario
$("#blogCategoryForm").submit(function(event) {
    event.preventDefault();
    const element = $(this);
    
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("blog_categories.store") }}',
        type: 'post',
        data: element.serializeArray(),
        dataType: 'json',
        success: function(response) {
            $("button[type=submit]").prop('disabled', false);
            
            if (response["status"] == true) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: response["message"],
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = "{{ route('blog_categories.index') }}";
                });
            } else {
                // Verificar si hay errores de validación o mensaje de error general
                if (response['errors']) {
                    // Mostrar errores de validación
                    $(".error").removeClass('invalid-feedback').html('');
                    $("input[type='text'], select, textarea").removeClass('is-invalid');
                    
                    $.each(response['errors'], function(key, value) {
                        $(`[name='${key}']`).addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(value);
                    });
                } else if (response['message']) {
                    // Mostrar mensaje de error específico
                    Swal.fire({
                        icon: 'error',
                        title: 'Error al crear categoría',
                        text: response['message'],
                        confirmButtonText: 'Entendido'
                    });
                } else {
                    // Error genérico
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Algo salió mal. Inténtalo de nuevo.',
                        confirmButtonText: 'Entendido'
                    });
                }
            }
        },
        error: function(jqXHR, exception) {
            $("button[type=submit]").prop('disabled', false);
            Swal.fire('Error', 'Algo salió mal. Inténtalo de nuevo.', 'error');
        }
    });
});
</script>
@endsection