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

/* Estilos para SEO con IA */
.ai-generated-content {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 0.75rem;
    color: #495057;
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 45px;
}

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

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

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

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


.ai-seo-section {
    min-height: 300px;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Loading spinner para generación IA */
.ai-loading {
    display: none;
    text-align: center;
    padding: 2rem;
}

.ai-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}
</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 SubVariedad</h4>
            <div class="page-title-right">
                <a href="{{ route('subvariedades.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        @include('admin.message')
        
        <form action="{{ route('subvariedades.update', [trim($subvariedad->CO_CATEGOR), trim($subvariedad->CO_SUBCATE), trim($subvariedad->CO_VARIEDA), trim($subvariedad->CO_SUBVARI)]) }}" method="post" enctype="multipart/form-data" novalidate>
            @csrf
            @method('PUT')
            
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link {{ (!isset($activeTab) || $activeTab == 'basic') ? 'active' : '' }}" id="basic-tab" data-bs-toggle="tab" href="#basic" role="tab">Información Básica</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ (isset($activeTab) && $activeTab == 'showhome') ? 'active' : '' }}" id="showhome-tab" data-bs-toggle="tab" href="#showhome" role="tab">
                        <i class="ri-home-line tab-icon"></i>
                        Mostrar en Inicio
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ (isset($activeTab) && $activeTab == 'image') ? 'active' : '' }}" id="image-tab" data-bs-toggle="tab" href="#image" role="tab">Imagen</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ (isset($activeTab) && $activeTab == 'settings') ? 'active' : '' }}" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab">Configuración</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ (isset($activeTab) && $activeTab == 'seo') ? 'active' : '' }}" id="seo-tab" data-bs-toggle="tab" href="#seo" role="tab">
                        <i class="ri-search-line tab-icon"></i>
                        SEO
                        @if($subvariedad->ai_generated_at && ($subvariedad->ai_meta_title || $subvariedad->ai_meta_description))
                        <span class="badge bg-success badge-sm ms-1">IA</span>
                        @endif
                    </a>
                </li>
            </ul>

            <!-- Tab content -->
            <div class="tab-content" id="myTabContent">
                <!-- Basic Info Tab -->
                <div class="tab-pane fade {{ (!isset($activeTab) || $activeTab == 'basic') ? 'show active' : '' }}" id="basic" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="form-section-title">Datos Principales de la SubVariedad</h5>
                            
                            <div class="row">
                                <!-- Categoría (No editable) -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="CO_CATEGOR_display">Categoría</label>
                                        <input type="text" id="CO_CATEGOR_display" 
                                               class="form-control" 
                                               value="{{ $subvariedad->categoria ? $subvariedad->categoria->DE_CATEGOR : 'Sin categoría' }}"
                                               readonly
                                               style="background-color: #f8f9fa;">
                                        <input type="hidden" name="CO_CATEGOR" value="{{ $subvariedad->CO_CATEGOR }}">
                                        <small class="text-muted">Código: {{ $subvariedad->CO_CATEGOR }}</small>
                                    </div>
                                </div>

                                <!-- Subcategoría (No editable) -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="CO_SUBCATE_display">Subcategoría</label>
                                        <input type="text" id="CO_SUBCATE_display" 
                                               class="form-control" 
                                               value="{{ $subvariedad->subcategoria ? $subvariedad->subcategoria->DE_SUBCATE : 'Sin subcategoría' }}"
                                               readonly
                                               style="background-color: #f8f9fa;">
                                        <input type="hidden" name="CO_SUBCATE" value="{{ $subvariedad->CO_SUBCATE }}">
                                        <small class="text-muted">Código: {{ $subvariedad->CO_SUBCATE }}</small>
                                    </div>
                                </div>

                                <!-- Variedad (No editable) -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="CO_VARIEDA_display">Variedad</label>
                                        <input type="text" id="CO_VARIEDA_display" 
                                               class="form-control" 
                                               value="{{ $subvariedad->variedad ? $subvariedad->variedad->DE_VARIEDA : 'Sin variedad' }}"
                                               readonly
                                               style="background-color: #f8f9fa;">
                                        <input type="hidden" name="CO_VARIEDA" value="{{ $subvariedad->CO_VARIEDA }}">
                                        <small class="text-muted">Código: {{ $subvariedad->CO_VARIEDA }}</small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Código (readonly, ancho pequeño) -->
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="CO_SUBVARI">Código</label>
                                        <input type="text" name="CO_SUBVARI" id="CO_SUBVARI" 
                                               class="form-control" 
                                               value="{{ $subvariedad->CO_SUBVARI }}" 
                                               readonly
                                               style="background-color: #f8f9fa;">
                                    </div>
                                </div>

                                <!-- Descripción (editable) -->
                                <div class="col-md-10">
                                    <div class="mb-3">
                                        <label for="DE_SUBVARI">Descripción *</label>
                                        <input type="text" name="DE_SUBVARI" id="DE_SUBVARI" 
                                               class="form-control @error('DE_SUBVARI') is-invalid @enderror" 
                                               placeholder="Ej: Talla S, Verde Claro" 
                                               value="{{ old('DE_SUBVARI', $subvariedad->DE_SUBVARI) }}" 
                                               maxlength="50"
                                               required>
                                        @error('DE_SUBVARI')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <!-- Slug -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="slug" class="form-label">Slug <span class="text-danger">*</span></label>
                                        <input type="text" readonly name="slug" id="slug" class="form-control" 
                                               placeholder="Se genera automáticamente" 
                                               value="{{ old('slug', $subvariedad->slug) }}">
                                        <p></p>
                                        <small class="help-text">
                                            <i class="ri-links-line"></i>
                                            URL amigable que se genera automáticamente del nombre
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mostrar en Inicio Tab -->
                <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'showhome') ? 'show active' : '' }}" id="showhome" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="form-section-title">
                                <i class="ri-home-line text-primary"></i>
                                Configuración de Página de Inicio
                            </h5>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-info">
                                        <i class="ri-information-line me-2"></i>
                                        Las subvariedades marcadas para mostrar en inicio aparecerán destacadas en la página principal de la tienda.
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="showHome" class="form-label">¿Mostrar en la página de inicio?</label>
                                        <select name="showHome" id="showHome" class="form-select form-select-lg">
                                            <option value="No" {{ old('showHome', $subvariedad->showHome ?? 'No') == 'No' ? 'selected' : '' }}>No</option>
                                            <option value="Yes" {{ old('showHome', $subvariedad->showHome ?? 'No') == 'Yes' ? 'selected' : '' }}>Sí, mostrar en inicio</option>
                                        </select>
                                        <small class="help-text">
                                            <i class="ri-home-line"></i>
                                            Seleccione "Sí" para destacar esta subvariedad en la página principal
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6 class="card-title">
                                                <i class="ri-line-chart-line text-primary"></i>
                                                Estado Actual
                                            </h6>
                                            @if(($subvariedad->showHome ?? 'No') == 'Yes')
                                                <p class="mb-0">
                                                    <span class="badge bg-success">
                                                        <i class="ri-home-line me-1"></i>
                                                        Visible en Inicio
                                                    </span>
                                                </p>
                                                <small class="text-muted">Esta subvariedad está visible en la página de inicio</small>
                                            @else
                                                <p class="mb-0">
                                                    <span class="badge bg-secondary">
                                                        <i class="ri-home-line me-1"></i>
                                                        No Visible en Inicio
                                                    </span>
                                                </p>
                                                <small class="text-muted">Esta subvariedad no aparece en la página de inicio</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Image Tab -->
                <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'image') ? 'show active' : '' }}" id="image" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <!-- Imagen actual -->
                                @if($subvariedad->image)
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label>Imagen Actual</label>
                                        <div>
                                            <img src="{{ asset('uploads/subvariedad/thumb/' . $subvariedad->image) }}" 
                                                 alt="{{ $subvariedad->DE_SUBVARI }}" 
                                                 class="img-thumbnail"
                                                 style="max-height: 200px;">
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!-- Nueva imagen -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="image">{{ $subvariedad->image ? 'Cambiar Imagen' : 'Imagen' }}</label>
                                        <input type="file" name="image" id="image" 
                                               class="form-control @error('image') is-invalid @enderror" 
                                               accept="image/*">
                                        <small class="text-muted">Formatos: JPG, PNG, GIF. Tamaño máximo: 2MB</small>
                                        @error('image')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Settings Tab -->
                <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'settings') ? 'show active' : '' }}" id="settings" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <!-- Estado Web -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="WEB_VTA">Mostrar en Web</label>
                                        <select name="WEB_VTA" id="WEB_VTA" class="form-select">
                                            <option value="S" {{ old('WEB_VTA', $subvariedad->WEB_VTA) == 'S' ? 'selected' : '' }}>Sí</option>
                                            <option value="N" {{ old('WEB_VTA', $subvariedad->WEB_VTA) == 'N' ? 'selected' : '' }}>No</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Orden -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="sort_order">Orden</label>
                                        <input type="number" name="sort_order" id="sort_order" 
                                               class="form-control @error('sort_order') is-invalid @enderror" 
                                               placeholder="Orden de visualización" 
                                               value="{{ old('sort_order', $subvariedad->sort_order) }}">
                                        @error('sort_order')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- SEO Tab -->
                <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'seo') ? 'show active' : '' }}" id="seo" role="tabpanel">

                    <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>
                        <button type="button" id="generateAiSeo" class="btn btn-success btn-sm">
                            <i class="ri-brain-line me-1"></i>
                            Generar SEO con IA
                        </button>
                    </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', $subvariedad->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', $subvariedad->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', $subvariedad->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($subvariedad->ai_generated_at && ($subvariedad->ai_meta_title || $subvariedad->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($subvariedad->ai_generated_at && ($subvariedad->ai_meta_title || $subvariedad->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: {{ \Carbon\Carbon::parse($subvariedad->ai_generated_at)->format('d/m/Y H:i') }}
                                @if($subvariedad->ai_model_used)
                                <br><small>Modelo usado: {{ $subvariedad->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">{{ $subvariedad->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">{{ $subvariedad->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">{{ $subvariedad->ai_meta_description }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label>Descripción de subvariedad para SEO</label>
                                        <div class="ai-generated-content long-content">{{ $subvariedad->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">{{ $subvariedad->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" 
                                                   {{ $subvariedad->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
                            <!-- Sin contenido IA aún -->
                            <div class="text-center py-4">
                                <i class="ri-brain-line ri-3x text-muted mb-3"></i>
                                <h5>No hay contenido SEO generado por IA</h5>
                                <p class="text-muted">Haz clic en "Generar SEO con IA" para crear contenido optimizado automáticamente.</p>
                                <button type="button" id="generateAiSeoHere" class="btn btn-success">
                                    <i class="ri-brain-line me-2"></i>
                                    Generar SEO con IA
                                </button>
                            </div>
                            @endif

                        </div>
                    </div>
                </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="pb-5 pt-3">
                <button type="submit" class="btn btn-primary">Actualizar</button>
                <a href="{{ route('subvariedades.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
            </div>
        </form>

@endsection

@section('customJs')
<script>
$(document).ready(function() {
    // Generate slug automatically from DE_SUBVARI
    $('#DE_SUBVARI').on('blur', function() {
        if ($('#slug').val() == '') {
            var slug = $(this).val()
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim();
            $('#slug').val(slug);
        }
    });
    
    // Disable browser validation
    $('form').attr('novalidate', true);
    
    // Remove required attribute from select fields
    $('#CO_CATEGOR, #CO_SUBCATE, #CO_VARIEDA').removeAttr('required');
    
    // Prevent invalid events
    $('form').on('invalid', function(e) {
        e.preventDefault();
    });
    
    // Use MutationObserver to prevent required from being added dynamically
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'required') {
                $(mutation.target).removeAttr('required');
            }
        });
    });
    
    // Observe select fields for attribute changes
    $('#CO_CATEGOR, #CO_SUBCATE, #CO_VARIEDA')[0] && observer.observe($('#CO_CATEGOR')[0], { attributes: true, attributeFilter: ['required'] });
    $('#CO_SUBCATE')[0] && observer.observe($('#CO_SUBCATE')[0], { attributes: true, attributeFilter: ['required'] });
    $('#CO_VARIEDA')[0] && observer.observe($('#CO_VARIEDA')[0], { attributes: true, attributeFilter: ['required'] });
    
    // Valores actuales
    var currentSubcategoria = '{{ old('CO_SUBCATE', $subvariedad->CO_SUBCATE) }}';
    var currentVariedad = '{{ old('CO_VARIEDA', $subvariedad->CO_VARIEDA) }}';

    // Cargar subcategorías cuando se selecciona categoría
    function loadSubcategorias(categoriaId, selectedValue) {
        if (categoriaId) {
            $.ajax({
                url: '{{ route("subvariedades.get-subcategories") }}',
                type: 'GET',
                data: { category_code: categoriaId },
                success: function(data) {
                    var options = '<option value="">Seleccione Subcategoría</option>';
                    $.each(data, function(key, value) {
                        var selected = (value.CO_SUBCATE == selectedValue) ? 'selected' : '';
                        options += '<option value="' + value.CO_SUBCATE + '" ' + selected + '>' + value.DE_SUBCATE + '</option>';
                    });
                    $('#CO_SUBCATE').html(options);
                    
                    // Si hay subcategoría seleccionada, cargar variedades
                    if (selectedValue) {
                        loadVariedades(selectedValue, currentVariedad);
                    }
                }
            });
        }
    }

    // Cargar variedades cuando se selecciona subcategoría
    function loadVariedades(subcategoriaId, selectedValue) {
        if (subcategoriaId) {
            $.ajax({
                url: '{{ route("subvariedades.get-variedades") }}',
                type: 'GET',
                data: { subcategory_code: subcategoriaId },
                success: function(data) {
                    var options = '<option value="">Seleccione Variedad</option>';
                    $.each(data, function(key, value) {
                        var selected = (value.CO_VARIEDA == selectedValue) ? 'selected' : '';
                        options += '<option value="' + value.CO_VARIEDA + '" ' + selected + '>' + value.DE_VARIEDA + '</option>';
                    });
                    $('#CO_VARIEDA').html(options);
                }
            });
        }
    }

    // Cargar datos iniciales
    var initialCategoria = $('#CO_CATEGOR').val();
    if (initialCategoria) {
        loadSubcategorias(initialCategoria, currentSubcategoria);
    }

    // Eventos de cambio
    $('#CO_CATEGOR').on('change', function() {
        var categoriaId = $(this).val();
        $('#CO_VARIEDA').html('<option value="">Primero seleccione subcategoría</option>');
        
        if (categoriaId) {
            loadSubcategorias(categoriaId, null);
        } else {
            $('#CO_SUBCATE').html('<option value="">Primero seleccione categoría</option>');
        }
    });

    $('#CO_SUBCATE').on('change', function() {
        var subcategoriaId = $(this).val();
        
        if (subcategoriaId) {
            loadVariedades(subcategoriaId, null);
        } else {
            $('#CO_VARIEDA').html('<option value="">Primero seleccione subcategoría</option>');
        }
    });

    // Generar slug automáticamente
    $('#DE_SUBVARI').on('blur', function() {
        if ($('#slug').val() == '') {
            var slug = $(this).val()
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim();
            $('#slug').val(slug);
        }
    });

    // Character counters for SEO fields
    function updateCharCount(field, counterId) {
        var count = $(field).val().length;
        $(counterId).text(count);
    }

    // Initialize character counts
    updateCharCount('#meta_title', '#meta_title_count');
    updateCharCount('#meta_description', '#meta_description_count');

    // Update counts on input
    $('#meta_title').on('input', function() {
        updateCharCount(this, '#meta_title_count');
    });

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

    // Image preview
    $('#image').on('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                // You can add preview functionality here if needed
            };
            reader.readAsDataURL(file);
        }
    });

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

    // 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("subvariedades.generate-ai-seo", [trim($subvariedad->CO_CATEGOR), trim($subvariedad->CO_SUBCATE), trim($subvariedad->CO_VARIEDA), trim($subvariedad->CO_SUBVARI)]) }}',
            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'
                    });
                    
                    // Reload page to show generated content - stay on SEO tab
                    setTimeout(() => {
                        window.location.href = window.location.href.split('#')[0] + '#seo';
                        window.location.reload();
                    }, 3000);
                } else {
                    throw new Error(response.message || 'Error desconocido');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error generating AI SEO:', xhr.responseText);
                let errorMessage = 'Error al generar contenido SEO';
                let footerMessage = '';
                
                if (xhr.status === 419) {
                    errorMessage = 'Sesión expirada. Por favor, refresque la página e intente nuevamente.';
                    footerMessage = 'Recargando página...';
                    setTimeout(() => {
                        window.location.reload();
                    }, 3000);
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    // Mostrar el mensaje real de la API
                    errorMessage = xhr.responseJSON.message;
                    
                    // Determinar footer según el tipo de error
                    if (errorMessage.includes('quota') || errorMessage.includes('billing')) {
                        footerMessage = 'Verifique su plan y límites de uso en el proveedor de IA';
                    } else if (errorMessage.includes('model') && errorMessage.includes('not found')) {
                        footerMessage = 'El modelo especificado no está disponible en su plan';
                    } else if (errorMessage.includes('API key')) {
                        footerMessage = 'Verifique su API key en Integraciones > IA';
                    } else {
                        footerMessage = 'Error del proveedor de IA: ' + (xhr.responseJSON.type || 'Desconocido');
                    }
                } else if (xhr.status === 400) {
                    errorMessage = 'Servicio de IA no disponible. Verifique la configuración en Integraciones > IA.';
                    footerMessage = 'Error de configuración';
                } else if (xhr.status === 500) {
                    errorMessage = 'Error interno del servidor. Verifique la API key de IA.';
                    footerMessage = 'Error del servidor';
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error de IA',
                    html: '<p>' + errorMessage + '</p>',
                    footer: footerMessage,
                    width: 600,
                    confirmButtonText: 'Entendido'
                });
            },
            complete: function() {
                clearTimeout(retryMessageTimeout);
                generateBtn.prop('disabled', false).html('<i class="ri-brain-line me-1"></i>Generar SEO con IA');
            }
        });
    }

    // Apply AI SEO to manual fields
    function applyAiSeoToManual() {
        const aiMetaTitle = @json($subvariedad->ai_meta_title ?? '');
        const aiMetaDescription = @json($subvariedad->ai_meta_description ?? '');
        const aiKeywords = @json($subvariedad->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: 'Contenido de IA copiado a los campos SEO manuales',
                timer: 1500,
                showConfirmButton: false
            });
        } else {
            Swal.fire({
                icon: 'warning',
                title: 'Sin contenido',
                text: 'No hay contenido de IA para copiar. Genera el SEO primero.',
                timer: 2000,
                showConfirmButton: false
            });
        }
    }


    // Event handlers
    $(document).on('click', '#generateAiSeo, #generateAiSeoHere', generateAiSeo);
    $(document).on('click', '#applyAiSeo', applyAiSeoToManual);

    // Keep SEO tab active if hash is present or after AI application
    $(document).ready(function() {
        if (window.location.hash === '#seo') {
            $('#seo-tab').tab('show');
        }
        
    });
});
</script>
@endsection