@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;
}

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

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

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

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

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

/* AI SEO Styles */
.ai-generated-content {
    background-color: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 0.25rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    color: #0c4a6e;
    font-size: 0.95rem;
}

.ai-generated-content.long-content {
    max-height: 150px;
    overflow-y: auto;
}

.ai-seo-section .mb-3 label {
    font-weight: 600;
    color: #0c4a6e;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
</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">Editar 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">
            
            <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"
                                               value="{{ $slider->internal_name }}">
                                        <p class="error"></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"
                                               value="{{ $slider->name }}">
                                        <p class="error"></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"
                                               value="{{ $slider->slug }}">
                                        <p class="error"></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">{{ $slider->title }}</textarea>
                                        <p class="error"></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"
                                               value="{{ $slider->subtitle }}">
                                        <p class="error"></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">{{ $slider->description }}</textarea>
                                        <p class="error"></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"
                                               value="{{ $slider->button_text }}">
                                        <p class="error"></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"
                                               value="{{ $slider->button_link }}">
                                        <p class="error"></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">
                                            Cambiar Imagen
                                            <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>
                                            Sube una nueva imagen para reemplazar la actual. Si no subes una nueva, se mantendrá la imagen actual.
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    @if(!empty($slider->image))
                                    <div class="mb-3">
                                        <label class="form-label">Imagen Actual</label>
                                        <img src="{{ asset('uploads/slider/'.$slider->image) }}" alt="Imagen actual" class="current-image">
                                        <small class="d-block mt-2 text-muted">
                                            <i class="ri-checkbox-circle-line text-success"></i> Imagen actual guardada
                                        </small>
                                    </div>
                                    @else
                                    <div class="mb-3">
                                        <div class="alert alert-warning">
                                            <i class="ri-error-warning-line"></i>
                                            No hay imagen cargada actualmente
                                        </div>
                                    </div>
                                    @endif
                                    
                                    <div id="imagePreview" style="display: none;">
                                        <label class="form-label">Nueva imagen a cargar</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="{{ $slider->order }}"
                                               min="0">
                                        <p class="error"></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" {{ $slider->status == 1 ? 'selected' : '' }}>Activo</option>
                                            <option value="0" {{ $slider->status == 0 ? 'selected' : '' }}>Inactivo</option>
                                        </select>
                                        <p class="error"></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" {{ $slider->showHome == 'Yes' ? 'selected' : '' }}>Sí</option>
                                            <option value="0" {{ $slider->showHome == 'No' ? 'selected' : '' }}>No</option>
                                        </select>
                                        <p class="error"></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">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="form-section-title mb-0">
                                    <i class="ri-search-line text-success"></i>
                                    Optimización para Motores de Búsqueda
                                </h5>
                                @if(aiIntegrationEnabled())
                                <button type="button" id="generateAiSeo" class="btn btn-success btn-sm">
                                    <i class="ri-brain-line me-1"></i>
                                    Generar SEO con IA
                                </button>
                                @endif
                            </div>
                        
                        <!-- SEO Manual Section -->
                        <div class="mb-4">
                            <h6 class="text-primary">
                                <i class="ri-pencil-line me-1"></i>
                                Campos SEO Manuales
                            </h6>
                            <div class="row">
                                <!-- Meta Título -->
                                <div class="col-md-6">
                                    <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="Ejemplo: Compra los mejores productos en nuestra tienda" 
                                               value="{{ old('meta_title', $slider->meta_title) }}" maxlength="60">
                                        <div class="d-flex justify-content-between">
                                            <small class="form-text text-muted">
                                                Este título aparecerá en los resultados de búsqueda.
                                            </small>
                                            <small class="character-counter" id="title-counter">0/60</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Meta Palabras Clave -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_keywords">Meta Palabras Clave</label>
                                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" 
                                               placeholder="Ejemplo: tienda online, productos, calidad, envío rápido" 
                                               value="{{ old('meta_keywords', $slider->meta_keywords) }}">
                                        <small class="form-text text-muted">
                                            Palabras clave separadas por comas, que describen el contenido de la página.
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Meta Descripción -->
                                <div class="col-md-12">
                                    <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="Ejemplo: Encuentra una amplia selección de productos de alta calidad en nuestra tienda online. Envío rápido y precios competitivos." 
                                                  maxlength="160">{{ old('meta_description', $slider->meta_description) }}</textarea>
                                        <div class="d-flex justify-content-between">
                                            <small class="form-text text-muted">
                                                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>
                        </div>

                        <!-- SEO con IA Section -->
                        <div class="card">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">
                                    <i class="ri-brain-line text-success me-2"></i>
                                    Generación de SEO con Inteligencia Artificial
                                    @if($slider->ai_generated_at && ($slider->ai_meta_title || $slider->ai_meta_description))
                                    <span class="badge bg-success ms-2">Generado</span>
                                    @endif
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="ai-seo-section">
                                    
                                    @if($slider->ai_generated_at && ($slider->ai_meta_title || $slider->ai_meta_description))
                                    <!-- Contenido generado por IA -->
                                    <div class="alert alert-success">
                                        <i class="ri-checkbox-circle-line me-2"></i>
                                        <strong>SEO generado con IA</strong> - 
                                        Última generación: {{ $slider->ai_generated_at->format('d/m/Y H:i') }}
                                        @if($slider->ai_model_used)
                                        <br><small>Modelo usado: {{ $slider->ai_model_used }}</small>
                                        @endif
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Meta Título generado por IA</label>
                                                <div class="ai-generated-content">{{ $slider->ai_meta_title }}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Alt Text para imagen</label>
                                                <div class="ai-generated-content">{{ $slider->ai_alt_text }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Meta Descripción generada por IA</label>
                                                <div class="ai-generated-content">{{ $slider->ai_meta_description }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Descripción de slider para SEO</label>
                                                <div class="ai-generated-content long-content">{{ $slider->ai_description }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Palabras clave sugeridas</label>
                                                <div class="ai-generated-content">{{ $slider->ai_keywords }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap">
                                                <div class="mb-2">
                                                    <button type="button" class="btn btn-primary" id="applyAiSeo">
                                                        <i class="ri-file-copy-line me-1"></i>
                                                        Copiar a campos SEO manuales
                                                    </button>
                                                </div>
                                                <div class="form-check">
                                                    <input type="checkbox" name="ai_seo_enabled" id="ai_seo_enabled" class="form-check-input" 
                                                           {{ $slider->ai_seo_enabled ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="ai_seo_enabled">
                                                        <strong>Usar SEO generado por IA en el frontend</strong>
                                                        <br><small class="text-muted">Cuando esté activado, se mostrará el contenido IA en lugar del manual</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @else
                                    <!-- Mostrar cuando no hay contenido generado -->
                                    <div class="alert alert-info">
                                        <i class="ri-information-line me-2"></i>
                                        <strong>Sin contenido SEO generado</strong><br>
                                        Haz clic en el botón "Generar SEO con IA" para crear automáticamente contenido optimizado.
                                    </div>

                                    <div class="text-center">
                                        <button type="button" id="generateAiSeoHere" class="btn btn-success btn-lg">
                                            <i class="ri-brain-line me-1"></i>
                                            Generar SEO con Inteligencia Artificial
                                        </button>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Form Actions (fuera del tab-content) -->
                    <div class="form-actions mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar 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>
        </form>
    </div>

@endsection

@section('customJs')
<script>
// 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 configuration
Dropzone.autoDiscover = false;    
const dropzone = new Dropzone("#image", {
    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);
            }
        }
    });
});

// Form submission
$("#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.update", $slider->id) }}',
        type: 'put',
        data: element.serializeArray(),
        dataType: 'json',
        success: function(response){
            $("button[type=submit]").prop('disabled',false);
            
            if(response["status"] == true){
                $(".error").removeClass('invalid-feedback').html('');
                $("input[type='text'], select, input[type='number']").removeClass('is-invalid');
                
                Swal.fire({
                    icon: 'success',
                    title: '¡Éxito!',
                    text: response.message,
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    window.location.href="{{ route('sliders.index') }}";
                });
            } else {
                var errors = response['errors'];
                $(".error").removeClass('invalid-feedback').html('');
                $("input[type='text'], select, input[type='number']").removeClass('is-invalid');
                
                $.each(errors, function(key, value){
                    $('#'+key).addClass('is-invalid')
                        .siblings('p')
                        .addClass('invalid-feedback')
                        .html(value);
                });
            }
        },
        error: function(jqXHR, exception){
            console.log("Algo salió mal");
            $("button[type=submit]").prop('disabled',false);
        }
    });
});

// AI SEO Generation
    function generateAiSeo() {
        const generateBtn = $('#generateAiSeo, #generateAiSeoHere');

        // Show loading state
        generateBtn.prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Generando...');

        // Show extended loading message if it takes too long
        let retryMessageTimeout = setTimeout(() => {
            generateBtn.html('<i class="ri-loader-line fa-spin me-1"></i>Generando... (reintentando con modelos alternativos)');
        }, 5000);

        $.ajax({
            url: '{{ route("sliders.generate-ai-seo", $slider->id) }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status || response.success) {
                    // Check if fallback was used
                    let title = '¡Éxito!';
                    let text = response.message || 'Contenido SEO generado exitosamente';
                    let icon = 'success';
                    let footer = '';
                    
                    if (response.model_used && response.model_used === 'fallback/local') {
                        title = 'Contenido Generado Localmente';
                        icon = 'warning';
                        
                        if (response.ai_error === 'quota_exceeded') {
                            text = 'Se generó contenido usando el sistema local porque se excedió la cuota de Gemini.';
                            footer = '<a href="https://ai.google.dev/pricing" target="_blank">Ver planes de Gemini</a> | <a href="/admin/integrations/ai/edit">Cambiar proveedor de IA</a>';
                        } else if (response.ai_error === 'invalid_api_key') {
                            text = 'Se generó contenido localmente. Verifica tu API key en Integraciones > IA.';
                            footer = '<a href="/admin/integrations/ai/edit">Configurar IA</a>';
                        } else {
                            text = 'Se generó contenido usando el sistema local debido a un error con el servicio de IA.';
                        }
                    }
                    
                    // Update form fields with generated content
                    if (response.data) {
                        $('#meta_title').val(response.data.meta_title);
                        $('#meta_description').val(response.data.meta_description);
                        $('#meta_keywords').val(response.data.meta_keywords);
                        
                        // Update character counters
                        updateTitleCounter();
                        updateDescriptionCounter();
                    }
                    
                    Swal.fire({
                        icon: icon,
                        title: title,
                        html: text,
                        footer: footer,
                        timer: footer ? 5000 : 3000,
                        showConfirmButton: footer ? true : false,
                        confirmButtonText: 'Entendido'
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error al generar contenido SEO',
                        confirmButtonText: 'Entendido'
                    });
                }
            },
            error: function(xhr) {
                clearTimeout(retryMessageTimeout);
                generateBtn.prop('disabled', false).html('<i class="ri-brain-line me-1"></i>Generar SEO con IA');
                
                let errorMessage = 'Error al conectar con el servicio de IA';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.status === 500) {
                    errorMessage = 'Error interno del servidor. Por favor, intenta de nuevo más tarde.';
                } else if (xhr.status === 0) {
                    errorMessage = 'No se pudo conectar con el servidor. Verifica tu conexión a internet.';
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error al generar SEO',
                    text: errorMessage,
                    confirmButtonText: 'Entendido'
                });
            },
            complete: function() {
                clearTimeout(retryMessageTimeout);
            }
        });
    }
    
    // Bind generateAiSeo to buttons
    $('#generateAiSeo, #generateAiSeoHere').click(generateAiSeo);
    
    // Apply AI SEO to Manual fields
    function applyAiSeoToManual() {
        const aiMetaTitle = @json($slider->ai_meta_title ?? '');
        const aiMetaDescription = @json($slider->ai_meta_description ?? '');
        const aiKeywords = @json($slider->ai_keywords ?? '');
        
        console.log('AI Data:', { aiMetaTitle, aiMetaDescription, aiKeywords }); // Debug
        
        if (aiMetaTitle) {
            $('#meta_title').val(aiMetaTitle);
            updateTitleCounter();
        }
        
        if (aiMetaDescription) {
            $('#meta_description').val(aiMetaDescription);
            updateDescriptionCounter();
        }
        
        if (aiKeywords) {
            $('#meta_keywords').val(aiKeywords);
        }
        
        // Verificar si realmente se copiaron
        const copiedTitle = $('#meta_title').val();
        const copiedDescription = $('#meta_description').val();
        const copiedKeywords = $('#meta_keywords').val();
        
        console.log('Copied values:', { copiedTitle, copiedDescription, copiedKeywords }); // Debug
        
        if (aiMetaTitle || aiMetaDescription || aiKeywords) {
            Swal.fire({
                icon: 'success',
                title: '¡Copiado!',
                text: 'El contenido SEO generado por IA se ha copiado a los campos manuales.',
                timer: 2000,
                showConfirmButton: false
            });
        } else {
            Swal.fire({
                icon: 'warning',
                title: 'Sin contenido',
                text: 'No hay contenido generado por IA para copiar. Primero genera el contenido.',
                confirmButtonText: 'Entendido'
            });
        }
    }
    
    // Bind applyAiSeoToManual to button
    $('#applyAiSeo').click(applyAiSeoToManual);

// 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');
    
    counter.removeClass('warning danger');
    if (length > 60) {
        counter.addClass('danger');
    } else if (length > 50) {
        counter.addClass('warning');
    }
}

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

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