@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.image-preview {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 5px;
    background: #f8f9fa;
}

.character-counter {
    font-size: 0.75rem;
    color: #6c757d;
}

.character-counter.warning {
    color: #856404;
}

.character-counter.danger {
    color: #721c24;
}

.ai-coming-soon {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #dee2e6;
    border-radius: 0.5rem;
    margin-top: 2rem;
}
</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">Crear Slider</h4>
            <div class="page-title-right">
                <a href="{{ route('sliders.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="sliderForm" name="sliderForm" enctype="multipart/form-data">
            
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="sliderTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" 
                                    type="button" role="tab" aria-controls="basic" aria-selected="true">
                                <i class="ri-information-line tab-icon"></i>
                                Información Básica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" 
                                    type="button" role="tab" aria-controls="content" aria-selected="false">
                                <i class="ri-pencil-line tab-icon"></i>
                                Contenido
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="image-tab" data-bs-toggle="tab" data-bs-target="#image" 
                                    type="button" role="tab" aria-controls="image" aria-selected="false">
                                <i class="ri-image-line tab-icon"></i>
                                Imagen
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" 
                                    type="button" role="tab" aria-controls="settings" aria-selected="false">
                                <i class="ri-settings-3-line tab-icon"></i>
                                Configuración
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo" 
                                    type="button" role="tab" aria-controls="seo" aria-selected="false">
                                <i class="ri-search-line tab-icon"></i>
                                SEO
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="sliderTabContent">
                        
                        <!-- Información Básica -->
                        <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                            <h5 class="form-section-title">
                                <i class="ri-image-2-line text-primary"></i>
                                Datos Principales del Slider
                            </h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-lightbulb-line"></i> 
                                <strong>Flexibilidad total:</strong> Si tu cliente diseña todo en la imagen (texto, botones, etc.), 
                                solo completa el Nombre Interno para identificar el slider. Los demás campos son opcionales.
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="internal_name" class="form-label">
                                            Nombre Interno 
                                            <small class="text-muted">(Para identificar en el admin)</small>
                                        </label>
                                        <input type="text" name="internal_name" id="internal_name" class="form-control" placeholder="Ej: Slider Principal Verano 2025">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">
                                            <i class="ri-information-line"></i>
                                            Usa este campo para identificar el slider cuando no uses título HTML
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">
                                            Nombre 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text" name="name" id="name" class="form-control" placeholder="Nombre del slider">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">Nombre técnico del slider (no se muestra al público)</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="slug" class="form-label">
                                            Slug
                                        </label>
                                        <input type="text" readonly name="slug" id="slug" class="form-control" placeholder="nombre-del-slider">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">URL amigable generada automáticamente</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contenido -->
                        <div class="tab-pane fade" id="content" role="tabpanel" aria-labelledby="content-tab">
                            <h5 class="form-section-title">
                                <i class="ri-align-left text-success"></i>
                                Contenido del Slider
                            </h5>
                            
                            <div class="alert alert-warning">
                                <i class="ri-error-warning-line"></i>
                                <strong>Importante:</strong> Estos campos son opcionales. 
                                Si el texto está incluido en la imagen, déjalos vacíos.
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">
                                            Título 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <textarea name="title" id="title" class="form-control summernote" rows="3" placeholder="Título principal del slider"></textarea>
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">
                                            Título HTML superpuesto. Usa las herramientas de formato para resaltar palabras. 
                                            Dejar vacío si el texto está en la imagen.
                                        </small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="subtitle" class="form-label">
                                            Subtítulo 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text" name="subtitle" id="subtitle" class="form-control" placeholder="Subtítulo del slider">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">Texto secundario que aparece debajo del título</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="description" class="form-label">
                                            Descripción 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <textarea name="description" id="description" class="form-control summernote" rows="3" placeholder="Descripción del slider"></textarea>
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">Descripción detallada del contenido del slider</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="button_text" class="form-label">
                                            Texto del Botón 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text" name="button_text" id="button_text" class="form-control" placeholder="Ej: Ver más">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">Texto que aparecerá en el botón del slider</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="button_link" class="form-label">
                                            Enlace del Botón 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text" name="button_link" id="button_link" class="form-control" placeholder="https://ejemplo.com o /ruta/interna">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">URL a la que redirigirá el botón</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Imagen -->
                        <div class="tab-pane fade" id="image" role="tabpanel" aria-labelledby="image-tab">
                            <h5 class="form-section-title">
                                <i class="ri-image-line text-info"></i>
                                Imagen del Slider
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <input type="hidden" name="image_id" id="image_id" value="">
                                        <label for="image" class="form-label">
                                            Imagen <span class="text-danger">*</span>
                                            <small class="text-muted">(Recomendado: 1920x617px)</small>
                                        </label>
                                        <div id="image" class="dropzone dz-clickable">
                                            <div class="dz-message needsclick">
                                                <br>Arrastra y suelta archivos aquí o haz clic para cargar.<br><br>
                                            </div>
                                        </div>
                                        <small class="help-text">
                                            <i class="ri-information-line"></i>
                                            La imagen es el único campo obligatorio. Se optimizará automáticamente.
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div id="imagePreview" style="display: none;">
                                        <label>Vista previa</label>
                                        <div id="uploadedImagePreview"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Configuración -->
                        <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                            <h5 class="form-section-title">
                                <i class="ri-settings-3-line text-warning"></i>
                                Configuración del Slider
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="order" class="form-label">Orden</label>
                                        <input type="number" name="order" id="order" class="form-control" value="0" min="0">
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">Orden de aparición (0 = automático)</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="field_status" class="form-label">Estado</label>
                                        <select name="status" id="field_status" class="form-select">
                                            <option value="1">Activo</option>
                                            <option value="0">Inactivo</option>
                                        </select>
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">Estado de publicación del slider</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="showHome" class="form-label">Mostrar en Home</label>
                                        <select name="showHome" id="showHome" class="form-select">
                                            <option value="1">Sí</option>
                                            <option value="0">No</option>
                                        </select>
                                        <p class="invalid-feedback"></p>
                                        <small class="help-text">¿Mostrar en la página principal?</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SEO -->
                        <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
                            <h5 class="form-section-title">
                                <i class="ri-search-line text-success"></i>
                                Optimización para Motores de Búsqueda (SEO)
                            </h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-lightbulb-line"></i> <strong>Consejo:</strong> Optimiza estos campos para mejorar la visibilidad de tu slider en buscadores como Google.
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_title" class="form-label">Meta Título</label>
                                        <input type="text" name="meta_title" id="meta_title" class="form-control" 
                                               placeholder="Ejemplo: Compra los mejores productos en nuestra tienda" 
                                               maxlength="60" value="{{ old('meta_title') }}">
                                        <div class="d-flex justify-content-between">
                                            <small class="help-text">
                                                <i class="ri-heading"></i>
                                                Este título aparecerá en los resultados de búsqueda
                                            </small>
                                            <small class="character-counter" id="title-counter">0/60</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_keywords" class="form-label">Meta Palabras Clave</label>
                                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" 
                                               placeholder="Ejemplo: slider, ofertas, homepage, productos" value="{{ old('meta_keywords') }}">
                                        <small class="help-text">
                                            <i class="ri-price-tag-lines"></i>
                                            Palabras clave separadas por comas, que describen el contenido de la página
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="meta_description" class="form-label">Meta Descripción</label>
                                        <textarea name="meta_description" id="meta_description" class="form-control" 
                                                  rows="3" placeholder="Ejemplo: Descubre increíbles ofertas en nuestro slider principal. Productos de calidad, precios únicos y envío gratis." 
                                                  maxlength="160">{{ old('meta_description') }}</textarea>
                                        <div class="d-flex justify-content-between">
                                            <small class="help-text">
                                                <i class="ri-align-left"></i>
                                                Esta descripción aparecerá en los resultados de búsqueda
                                            </small>
                                            <small class="character-counter" id="description-counter">0/160</small>
                                        </div>
                                    </div>
                                </div>
                            </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 el slider!</h6>
                                <p class="text-muted mb-0">
                                    Una vez que crees el slider, podrás usar la inteligencia artificial para generar automáticamente contenido SEO optimizado.
                                    <br><small>Ve a "Editar" el slider para acceder a esta funcionalidad.</small>
                                </p>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="ri-save-line me-2"></i>Crear Slider
                            </button>
                            <a href="{{ route('sliders.index') }}" class="btn btn-outline-secondary btn-lg ms-3">
                                <i class="ri-close-line me-2"></i>Cancelar
                            </a>
                        </div>
                        
                    </div>
                </div>
            </div>
        </form>


@endsection

@section('customJs')
<script>
    $("#sliderForm").submit(function(event){
        event.preventDefault();
        
        // Ensure Summernote content is synced
        $('.summernote').each(function() {
            var content = $(this).summernote('code');
            $(this).val(content);
        });
        
        var element = $(this);
        $("button[type=submit]").prop('disabled', true);
        $.ajax({
            url: '{{ route("sliders.store") }}',
            type: 'post',
            data: element.serializeArray(),
            dataType: 'json',
            success: function(response){
                $("button[type=submit]").prop('disabled', false);

                if (response["status"] == true) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: 'Slider creado exitosamente',
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        window.location.href = "{{ route('sliders.index')}}";
                    });

                    // Clear validation errors
                    $(".form-control").removeClass('is-invalid');
                    $(".invalid-feedback").html("");

                } else {
                    var errors = response['errors'];

                    // Clear previous errors
                    $(".form-control").removeClass('is-invalid');
                    $(".invalid-feedback").html("");

                    // Show new errors
                    $.each(errors, function(field, messages) {
                        $("#" + field).addClass('is-invalid').siblings('.invalid-feedback').html(messages[0]);
                    });
                }

            }, error: function(jqXHR, exception){
                $("button[type=submit]").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Algo salió mal. Inténtelo de nuevo.'
                });
            }
        });
    });

    // Generate slug from internal_name
    $("#internal_name").change(function(){
        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"]);
                }
            }
        });
    });

    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,image/webp",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }, success: function(file, response){
            $("#image_id").val(response.image_id);
            $("#imagePreview").show();
            $("#uploadedImagePreview").html('<img src="' + response.imagePath + '" class="image-preview" />');
        }
    });

    // Summernote initialization
    $(document).ready(function() {
        $('.summernote').summernote({
            height: 200,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onBlur: function() {
                    var content = $(this).summernote('code');
                    $(this).val(content);
                },
                onChange: function(contents, $editable) {
                    $(this).val(contents);
                }
            }
        });
    });

    // Character counters for SEO fields
    function updateTitleCounter() {
        const title = $('#meta_title').val();
        const counter = $('#title-counter');
        const length = title.length;
        counter.text(length + '/60 caracteres');
        
        if (length > 60) {
            counter.removeClass('warning').addClass('danger');
        } else if (length > 50) {
            counter.removeClass('danger').addClass('warning');
        } else {
            counter.removeClass('warning danger');
        }
    }

    function updateDescriptionCounter() {
        const description = $('#meta_description').val();
        const counter = $('#description-counter');
        const length = description.length;
        counter.text(length + '/160 caracteres');
        
        if (length > 160) {
            counter.removeClass('warning').addClass('danger');
        } else if (length > 140) {
            counter.removeClass('danger').addClass('warning');
        } else {
            counter.removeClass('warning danger');
        }
    }

    // Initialize counters
    $('#meta_title').on('input', updateTitleCounter);
    $('#meta_description').on('input', updateDescriptionCounter);
    updateTitleCounter();
    updateDescriptionCounter();
</script>
@endsection