@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: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
    min-height: 2.5rem;
}

.ai-generated-content.long-content {
    min-height: 4rem;
    white-space: pre-wrap;
}

.ai-generated-content:empty:before {
    content: "No generado aún";
    color: #6c757d;
    font-style: italic;
}

#generateAiSeo {
    position: relative;
}

#generateAiSeo:disabled {
    cursor: not-allowed;
}

.ai-seo-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 2rem;
}

.ai-toggle-group {
    background: white;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}
</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 Category Slider</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.category-sliders.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('admin.category-sliders.update', $slider->id) }}" method="post" id="categorySliderForm" name="categorySliderForm" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <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-stack-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 @error('internal_name') is-invalid @enderror" 
                                               placeholder="Ej: Slider Verano 2025"
                                               value="{{ old('internal_name', $slider->internal_name) }}">
                                        @error('internal_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <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="small_tag" class="form-label">
                                            Tag Pequeño 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text" 
                                               name="small_tag" 
                                               id="small_tag" 
                                               class="form-control @error('small_tag') is-invalid @enderror" 
                                               placeholder="Ej: Season 2025"
                                               value="{{ old('small_tag', $slider->small_tag) }}">
                                        @error('small_tag')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">Etiqueta pequeña que aparece arriba del título</small>
                                    </div>
                                </div>
                            </div>

                            <!-- AI Generated Content Toggles -->
                            @if($slider->ai_generated)
                            <div class="ai-toggle-group">
                                <h6 class="text-info mb-3">
                                    <i class="ri-brain-line"></i> Contenido generado por IA disponible
                                </h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" 
                                                   class="custom-control-input" 
                                                   id="use_ai_title" 
                                                   name="use_ai_title" 
                                                   value="1"
                                                   {{ old('use_ai_title', $slider->use_ai_title) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="use_ai_title">
                                                Usar título generado por IA
                                            </label>
                                        </div>
                                        @if($slider->ai_title)
                                        <div class="ai-generated-content mt-2">{{ $slider->ai_title }}</div>
                                        @endif
                                    </div>
                                    <div class="col-md-6">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" 
                                                   class="custom-control-input" 
                                                   id="use_ai_description" 
                                                   name="use_ai_description" 
                                                   value="1"
                                                   {{ old('use_ai_description', $slider->use_ai_description) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="use_ai_description">
                                                Usar descripción generada por IA
                                            </label>
                                        </div>
                                        @if($slider->ai_description)
                                        <div class="ai-generated-content mt-2">{{ $slider->ai_description }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @endif
                        </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-6">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">
                                            Título 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text" 
                                               name="title" 
                                               id="title" 
                                               class="form-control @error('title') is-invalid @enderror" 
                                               placeholder="Ej: Organic World"
                                               value="{{ old('title', $slider->title) }}">
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">
                                            Título HTML superpuesto. Usa &lt;span&gt; para resaltar palabras. 
                                            Dejar vacío si el texto está en la imagen.
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <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 @error('description') is-invalid @enderror" 
                                                  rows="3"
                                                  placeholder="Ej: GET 40% OFF • Free Delivery">{{ old('description', $slider->description) }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">Descripción que aparece debajo del título</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 @error('button_text') is-invalid @enderror" 
                                               placeholder="Ej: Ver más"
                                               value="{{ old('button_text', $slider->button_text) }}">
                                        @error('button_text')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <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="link" class="form-label">
                                            Enlace (URL) 
                                            <span class="badge bg-secondary">Opcional</span>
                                        </label>
                                        <input type="text"
                                               name="link"
                                               id="link"
                                               class="form-control @error('link') is-invalid @enderror"
                                               placeholder="/muebles  ó  https://sitio-externo.com"
                                               value="{{ old('link', $slider->link) }}">
                                        @error('link')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">Enlace interno (ej: /muebles) o URL externa (https://...) al que redirige el slider</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">
                                        <label for="image" class="form-label">
                                            Nueva Imagen 
                                            <small class="text-muted">(Recomendado: 918x420px)</small>
                                        </label>
                                        <input type="file" 
                                               name="image" 
                                               id="image" 
                                               class="form-control @error('image') is-invalid @enderror" 
                                               accept="image/*"
                                               onchange="previewImage(this)">
                                        @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-information-line"></i>
                                            Selecciona una nueva imagen solo si deseas cambiar la actual
                                        </small>
                                    </div>
                                    
                                    <div id="imagePreview" style="display: none;">
                                        <label class="form-label">Vista previa de nueva imagen</label>
                                        <img id="preview" src="" alt="Vista previa" class="image-preview">
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Imagen actual</label>
                                        @if($slider->image)
                                            <img src="{{ $slider->image_url }}" 
                                                 alt="{{ $slider->display_name }}" 
                                                 class="current-image">
                                        @else
                                            <div class="bg-light d-flex align-items-center justify-content-center" 
                                                 style="width: 300px; height: 200px; border-radius: 4px;">
                                                <i class="ri-image-line text-muted ri-3x"></i>
                                            </div>
                                        @endif
                                    </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="category_id" class="form-label">Categoría</label>
                                        <select name="category_id" 
                                                id="category_id" 
                                                class="form-control @error('category_id') is-invalid @enderror">
                                            <option value="">-- Todas las categorías --</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->CO_CATEGOR }}" 
                                                        {{ old('category_id', $slider->category_id) == $category->CO_CATEGOR ? 'selected' : '' }}>
                                                    {{ $category->DE_CATEGOR }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">Mostrar solo en esta categoría (opcional)</small>
                                    </div>
                                </div>
                                
                                <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 @error('order') is-invalid @enderror" 
                                               value="{{ old('order', $slider->order) }}"
                                               min="0">
                                        @error('order')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <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="is_active" class="form-label">Estado</label>
                                        <select name="is_active" 
                                                id="is_active" 
                                                class="form-control @error('is_active') is-invalid @enderror">
                                            <option value="1" {{ old('is_active', $slider->is_active) == '1' ? 'selected' : '' }}>Activo</option>
                                            <option value="0" {{ old('is_active', $slider->is_active) == '0' ? 'selected' : '' }}>Inactivo</option>
                                        </select>
                                        @error('is_active')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="help-text">Seleccione si este slider estará activo o inactivo</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 && $slider->ai_generated_at)
                                    <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 && $slider->ai_generated_at)
                                    <!-- 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') }}
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Título SEO generado por IA</label>
                                                <div class="ai-generated-content">{{ $slider->ai_title }}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Alt Text para imagen</label>
                                                <div class="ai-generated-content">{{ data_get($slider->ai_metadata, 'alt_text') }}</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">{{ data_get($slider->ai_metadata, '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>
                                                <small class="text-muted">
                                                    Para mostrar el contenido IA en el frontend, activá los switches
                                                    <strong>"Usar título/descripción generada por IA"</strong> en la pestaña de contenido.
                                                </small>
                                            </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 -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="ri-save-line me-2"></i>Actualizar Slider
                            </button>
                            <a href="{{ route('admin.category-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>
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            document.getElementById('imagePreview').style.display = 'block';
        }
        reader.readAsDataURL(input.files[0]);
    }
}

// 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();

// AI SEO Generation
$('#generateAiSeo').on('click', function() {
    const button = $(this);
    const originalText = button.html();
    
    button.prop('disabled', true);
    button.html('<i class="ri-loader-line fa-spin me-1"></i> Generando...');
    
    $.ajax({
        url: '{{ route("admin.category-sliders.generate-ai-seo", $slider->id) }}',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                // Update form fields with AI generated content
                $('#meta_title').val(response.data.meta_title || '');
                $('#meta_description').val(response.data.meta_description || '');
                $('#meta_keywords').val(response.data.meta_keywords || '');
                
                // Update counters
                updateTitleCounter();
                updateDescriptionCounter();
                
                // Update AI generated content display if exists
                $('.ai-generated-content').each(function() {
                    const label = $(this).prev('label').text().toLowerCase();
                    if (label.includes('título')) {
                        $(this).text(response.data.ai_title || 'No generado');
                    } else if (label.includes('palabras')) {
                        $(this).text(response.data.ai_keywords || 'No generado');
                    } else if (label.includes('descripción')) {
                        $(this).text(response.data.ai_description || 'No generado');
                    }
                });
                
                // Show success message
                Swal.fire({
                    icon: 'success',
                    title: '¡SEO Generado!',
                    text: 'El contenido SEO ha sido generado exitosamente con IA',
                    timer: 3000,
                    showConfirmButton: false
                });
                
                // If there's a section for AI content, make it visible
                if (!$('.ai-seo-section').find('.ai-generated-content').length) {
                    location.reload(); // Reload to show the new AI section
                }
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'No se pudo generar el contenido SEO'
                });
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Ocurrió un error al generar el contenido SEO'
            });
        },
        complete: function() {
            button.prop('disabled', false);
            button.html(originalText);
        }
    });
});

// Form validation
$("#categorySliderForm").submit(function(event) {
    // Check if either title or internal_name is provided
    if (!$('#title').val() && !$('#internal_name').val()) {
        Swal.fire({
            icon: 'warning',
            title: 'Atención',
            text: 'Debes proporcionar un Título o un Nombre Interno para identificar el slider'
        });
        event.preventDefault();
        return false;
    }
});
</script>
@endsection