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

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

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

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

.character-counter.danger {
    color: #dc3545;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Crear Subvariedad</h4>
            <div class="page-title-right">
                <a href="{{ route('subvariedades.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="subvariedadForm" name="subvariedadForm" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="subvariedadTabs" 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="showhome-tab" data-bs-toggle="tab" data-bs-target="#showhome"
                                    type="button" role="tab" aria-controls="showhome" aria-selected="false">
                                <i class="ri-home-line tab-icon"></i>
                                Mostrar en Inicio
                            </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="subvariedadTabContent">
                        
                        <!-- 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-price-tag-lines text-primary"></i>
                                Datos Principales de la Subvariedad
                            </h5>
                            
                            <div class="row">
                                <!-- Categoría -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="CO_CATEGOR" class="form-label">Categoría <span class="text-danger">*</span></label>
                                        <select name="CO_CATEGOR" id="CO_CATEGOR" 
                                                class="form-control @error('CO_CATEGOR') is-invalid @enderror">
                                            <option value="">Seleccione Categoría</option>
                                            @foreach($categories as $categoria)
                                                <option value="{{ $categoria->CO_CATEGOR }}" 
                                                        {{ old('CO_CATEGOR') == $categoria->CO_CATEGOR ? 'selected' : '' }}>
                                                    {{ $categoria->DE_CATEGOR }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('CO_CATEGOR')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-stack-line"></i>
                                            Seleccione la categoría principal
                                        </small>
                                    </div>
                                </div>

                                <!-- Subcategoría -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="CO_SUBCATE" class="form-label">Subcategoría <span class="text-danger">*</span></label>
                                        <select name="CO_SUBCATE" id="CO_SUBCATE" 
                                                class="form-control @error('CO_SUBCATE') is-invalid @enderror">
                                            <option value="">Primero seleccione categoría</option>
                                        </select>
                                        @error('CO_SUBCATE')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-organization-chart"></i>
                                            Se cargarán las subcategorías según la categoría seleccionada
                                        </small>
                                    </div>
                                </div>

                                <!-- Variedad -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="CO_VARIEDA" class="form-label">Variedad <span class="text-danger">*</span></label>
                                        <select name="CO_VARIEDA" id="CO_VARIEDA" 
                                                class="form-control @error('CO_VARIEDA') is-invalid @enderror">
                                            <option value="">Primero seleccione subcategoría</option>
                                        </select>
                                        @error('CO_VARIEDA')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-price-tag-lines"></i>
                                            Se cargarán las variedades según la subcategoría seleccionada
                                        </small>
                                    </div>
                                </div>

                                <!-- Código de Subvariedad -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="CO_SUBVARI" class="form-label">Código <span class="text-danger">*</span></label>
                                        <input type="text" name="CO_SUBVARI" id="CO_SUBVARI" 
                                               class="form-control @error('CO_SUBVARI') is-invalid @enderror" 
                                               value="{{ old('CO_SUBVARI') }}" 
                                               maxlength="5" required
                                               placeholder="Ej: SUB01">
                                        @error('CO_SUBVARI')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-barcode-line"></i>
                                            Código único de hasta 5 caracteres
                                        </small>
                                    </div>
                                </div>

                                <!-- Descripción de Subvariedad -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="DE_SUBVARI" class="form-label">Descripción <span class="text-danger">*</span></label>
                                        <input type="text" name="DE_SUBVARI" id="DE_SUBVARI" 
                                               class="form-control @error('DE_SUBVARI') is-invalid @enderror" 
                                               value="{{ old('DE_SUBVARI') }}" 
                                               maxlength="50" required
                                               placeholder="Ej: Talla S, 500ml, Verde Claro">
                                        @error('DE_SUBVARI')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-information-line"></i>
                                            Nombre descriptivo de la subvariedad (máx. 50 caracteres)
                                        </small>
                                    </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') }}">
                                        <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>

                        <!-- Mostrar en Inicio -->
                        <div class="tab-pane fade" id="showhome" role="tabpanel" aria-labelledby="showhome-tab">
                            <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', 'No') == 'No' ? 'selected' : '' }}>No</option>
                                            <option value="Yes" {{ old('showHome') == '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>
                        </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 de la Subvariedad
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <input type="hidden" name="image_id" id="image_id" value="">
                                        <label for="image" class="form-label">Imagen Principal</label>
                                        <div id="image" class="dropzone dz-clickable">
                                            <div class="dz-message needsclick">
                                                <br>Suelta los archivos aquí o haz clic para subirlos.<br><br>
                                            </div>
                                        </div>
                                        <small class="help-text">
                                            <i class="ri-camera-line"></i>
                                            Tamaño recomendado: 450x600 píxeles. Formatos: JPG, PNG, GIF
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <label class="form-label">Vista Previa</label>
                                    <div class="border rounded p-3 text-center bg-light">
                                        <img src="{{ asset('front-assets/images/no_image.jpg') }}" 
                                             alt="Vista previa" style="max-width: 100%; max-height: 150px;">
                                        <br><small class="text-muted mt-2">No hay imagen seleccionada</small>
                                    </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 y Visibilidad
                            </h5>
                            
                            <div class="row">
                                <!-- Activo en Web -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="WEB_VTA" class="form-label">Activo en Web <span class="text-danger">*</span></label>
                                        <select name="WEB_VTA" id="WEB_VTA" class="form-select @error('WEB_VTA') is-invalid @enderror" required>
                                            <option value="S" {{ old('WEB_VTA', 'S') == 'S' ? 'selected' : '' }}>Sí</option>
                                            <option value="N" {{ old('WEB_VTA') == 'N' ? 'selected' : '' }}>No</option>
                                        </select>
                                        @error('WEB_VTA')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-global-line"></i>
                                            Determina si la subvariedad es visible en el sitio web
                                        </small>
                                    </div>
                                </div>

                                <!-- Orden -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="OR_SUBVARI" class="form-label">Orden de Visualización</label>
                                        <input type="number" name="OR_SUBVARI" id="OR_SUBVARI" 
                                               class="form-control @error('OR_VARIEDA') is-invalid @enderror" 
                                               value="{{ old('OR_SUBVARI', 0) }}" 
                                               min="0"
                                               placeholder="0">
                                        @error('OR_SUBVARI')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-sort-asc-numeric-up"></i>
                                            Orden de aparición (menor número = mayor prioridad)
                                        </small>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- SEO -->
                        <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
                            <h5 class="form-section-title">
                                <i class="ri-search-line text-success"></i>
                                Optimización para Motores de Búsqueda (SEO)
                            </h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-lightbulb-line"></i> <strong>Consejo:</strong> Optimiza estos campos para mejorar la visibilidad en buscadores como Google.
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_title" class="form-label">Meta Título</label>
                                        <input type="text" name="meta_title" id="meta_title" 
                                               class="form-control @error('meta_title') is-invalid @enderror" 
                                               value="{{ old('meta_title') }}" 
                                               maxlength="60"
                                               placeholder="Ej: Subvariedad Talla S - Productos de Calidad">
                                        @error('meta_title')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <div class="d-flex justify-content-between">
                                            <small class="help-text">
                                                <i class="ri-heading"></i>
                                                Título que aparece en los resultados de búsqueda
                                            </small>
                                            <small class="character-counter" id="title-counter">0/60</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_keywords" class="form-label">Meta Palabras Clave</label>
                                        <input type="text" name="meta_keywords" id="meta_keywords" 
                                               class="form-control @error('meta_keywords') is-invalid @enderror" 
                                               value="{{ old('meta_keywords') }}" 
                                               maxlength="255"
                                               placeholder="Ej: subvariedad, talla s, producto, calidad">
                                        @error('meta_keywords')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <small class="help-text">
                                            <i class="ri-price-tag-lines"></i>
                                            Palabras clave separadas por comas
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="meta_description" class="form-label">Meta Descripción</label>
                                        <textarea name="meta_description" id="meta_description" 
                                                  class="form-control @error('meta_description') is-invalid @enderror" 
                                                  rows="3" 
                                                  maxlength="160"
                                                  placeholder="Ej: Descubre nuestra subvariedad en talla S, perfecta para...">{{ old('meta_description') }}</textarea>
                                        @error('meta_description')
                                        <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                        <div class="d-flex justify-content-between">
                                            <small class="help-text">
                                                <i class="ri-align-left"></i>
                                                Descripción que aparece en los resultados de búsqueda
                                            </small>
                                            <small class="character-counter" id="description-counter">0/160</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- AI Coming Soon Notice -->
                            <div class="ai-coming-soon">
                                <i class="ri-brain-line ri-2x text-primary mb-2"></i>
                                <h6 class="text-primary">¡Generación SEO con IA disponible después de crear!</h6>
                                <p class="text-muted mb-0">
                                    Una vez que crees la subvariedad, podrás usar inteligencia artificial para generar automáticamente contenido SEO optimizado.
                                    <br><small>Ve a "Editar" la subvariedad para acceder a esta funcionalidad.</small>
                                </p>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="button" onclick="forceSubmit()" class="btn btn-primary btn-lg">
                                <i class="ri-save-line me-2"></i>Crear Subvariedad
                            </button>
                            <a href="{{ route('subvariedades.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>
    // 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);
        }
    });
    
    // Función para forzar el submit sin validación
    function forceSubmit() {
        console.log('=== ANTES DE ENVIAR ===');
        console.log('CO_CATEGOR:', {
            value: $('#CO_CATEGOR').val(),
            selectedIndex: $('#CO_CATEGOR')[0].selectedIndex,
            selectedText: $('#CO_CATEGOR option:selected').text(),
            optionsCount: $('#CO_CATEGOR option').length
        });
        console.log('CO_SUBCATE:', {
            value: $('#CO_SUBCATE').val(),
            selectedIndex: $('#CO_SUBCATE')[0].selectedIndex,
            selectedText: $('#CO_SUBCATE option:selected').text(),
            optionsCount: $('#CO_SUBCATE option').length
        });
        console.log('CO_VARIEDA:', {
            value: $('#CO_VARIEDA').val(),
            selectedIndex: $('#CO_VARIEDA')[0].selectedIndex,
            selectedText: $('#CO_VARIEDA option:selected').text(),
            optionsCount: $('#CO_VARIEDA option').length
        });
        
        // Eliminar todos los required antes de enviar
        $('#CO_CATEGOR, #CO_SUBCATE, #CO_VARIEDA').each(function() {
            this.required = false;
            $(this).removeAttr('required').prop('required', false);
        });
        
        // Forzar el submit del formulario sin validación
        const form = document.getElementById('subvariedadForm');
        form.noValidate = true;
        
        // Disparar el evento submit de jQuery directamente
        $('#subvariedadForm').trigger('submit');
    }
    
    // Hacer la función global
    window.forceSubmit = forceSubmit;
    
    // Desactivar validación del navegador completamente
    $(document).ready(function() {
        // Forzar novalidate en el formulario
        $('#subvariedadForm')[0].noValidate = true;
        $('#subvariedadForm').attr('novalidate', 'novalidate');
        
        // Función para limpiar todos los required
        function removeAllRequired() {
            $('#CO_CATEGOR, #CO_SUBCATE, #CO_VARIEDA').each(function() {
                this.required = false;
                $(this).removeAttr('required').prop('required', false);
                // Eliminar el atributo del DOM completamente
                if (this.hasAttribute('required')) {
                    this.removeAttribute('required');
                }
            });
        }
        
        // Ejecutar inmediatamente
        removeAllRequired();
        
        // Ejecutar después de un pequeño delay para asegurar
        setTimeout(removeAllRequired, 100);
        setTimeout(removeAllRequired, 500);
        
        // Prevenir validación en cualquier intento de submit
        $('#subvariedadForm').on('submit', function(e) {
            // Remover required antes del submit
            removeAllRequired();
            // No permitir validación HTML5
            this.noValidate = true;
        });
        
        // Interceptar el evento invalid globalmente
        document.addEventListener('invalid', function(e) {
            if (e.target.id === 'CO_CATEGOR' || e.target.id === 'CO_SUBCATE' || e.target.id === 'CO_VARIEDA') {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        }, true);
        
        // Asegurar que no se agregue required dinámicamente
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'required') {
                    removeAllRequired();
                }
            });
        });
        
        // Observar cambios en los atributos de los selects
        ['CO_CATEGOR', 'CO_SUBCATE', 'CO_VARIEDA'].forEach(function(id) {
            const elem = document.getElementById(id);
            if (elem) observer.observe(elem, { attributes: true });
        });
    });
    
    // Character counters
    $('#meta_title').on('input', function() {
        var length = $(this).val().length;
        var counter = $('#title-counter');
        counter.text(length + '/60');
        
        if (length > 60) {
            counter.removeClass('warning').addClass('danger');
        } else if (length > 50) {
            counter.removeClass('danger').addClass('warning');
        } else {
            counter.removeClass('danger warning');
        }
    });

    $('#meta_description').on('input', function() {
        var length = $(this).val().length;
        var counter = $('#description-counter');
        counter.text(length + '/160');
        
        if (length > 160) {
            counter.removeClass('warning').addClass('danger');
        } else if (length > 150) {
            counter.removeClass('danger').addClass('warning');
        } else {
            counter.removeClass('danger warning');
        }
    });

    // Initialize counters
    $('#meta_title').trigger('input');
    $('#meta_description').trigger('input');

    // Form submission
    $("#subvariedadForm").submit(function(event) {
        event.preventDefault();
        var element = $(this);
        $("button[type=submit]").prop('disabled', true);
        
        // Debug: Ver qué datos se están enviando
        var formData = element.serializeArray();
        console.log('========== DEBUG FORMULARIO ==========');
        console.log('Datos del formulario:', formData);
        console.log('CO_CATEGOR valor:', $('#CO_CATEGOR').val());
        console.log('CO_SUBCATE valor:', $('#CO_SUBCATE').val());
        console.log('CO_VARIEDA valor:', $('#CO_VARIEDA').val());
        
        // Verificar si los campos están en el formData
        var hasCategor = formData.some(field => field.name === 'CO_CATEGOR');
        var hasSubcate = formData.some(field => field.name === 'CO_SUBCATE');
        var hasVarieda = formData.some(field => field.name === 'CO_VARIEDA');
        
        console.log('¿CO_CATEGOR está en formData?', hasCategor);
        console.log('¿CO_SUBCATE está en formData?', hasSubcate);
        console.log('¿CO_VARIEDA está en formData?', hasVarieda);
        console.log('======================================');
        
        $.ajax({
            url: '{{ route("subvariedades.store") }}',
            type: 'post',
            data: formData,
            dataType: 'json',
            success: function(response) {
                console.log('=== RESPUESTA DEL SERVIDOR ===');
                console.log('Response completo:', response);
                console.log('Status:', response.status);
                console.log('Errors:', response.errors);
                
                // Mostrar cada error específicamente
                if (response.errors) {
                    console.log('=== ERRORES DETALLADOS ===');
                    $.each(response.errors, function(field, messages) {
                        console.log(field + ':', messages);
                    });
                }
                
                $("button[type=submit]").prop('disabled', false);
                
                if (response["status"] == true) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response["message"],
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        window.location.href = "{{ route('subvariedades.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("Error en AJAX:");
                console.log("Status:", jqXHR.status);
                console.log("Response:", jqXHR.responseJSON);
                console.log("Response Text:", jqXHR.responseText);
                $("button[type=submit]").prop('disabled', false);
                
                if (jqXHR.status === 422) {
                    console.log("Error de validación. Campos faltantes o inválidos:");
                    if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                        console.log(jqXHR.responseJSON.errors);
                    }
                }
            }
        });
    });

    // Load subcategories when category changes
    $('#CO_CATEGOR').change(function() {
        var categoriaId = $(this).val();
        $('#CO_SUBCATE').html('<option value="">Cargando...</option>');
        $('#CO_VARIEDA').html('<option value="">Primero seleccione subcategoría</option>');
        
        if (categoriaId) {
            $.ajax({
                url: '{{ route("subvariedades.get-subcategories") }}',
                type: 'GET',
                data: { category_code: categoriaId },
                success: function(data) {
                    // Limpiar y reconstruir el select
                    $('#CO_SUBCATE').empty();
                    $('#CO_SUBCATE').append($('<option>', {
                        value: '',
                        text: 'Seleccione Subcategoría'
                    }));
                    
                    if (data.subcategories) {
                        $.each(data.subcategories, function(key, value) {
                            $('#CO_SUBCATE').append($('<option>', {
                                value: value.CO_SUBCATE,
                                text: value.DE_SUBCATE
                            }));
                        });
                    }
                    
                    
                    // Asegurar que no tenga required después de cargar
                    $('#CO_SUBCATE')[0].required = false;
                    $('#CO_SUBCATE').removeAttr('required').prop('required', false);
                },
                error: function() {
                    $('#CO_SUBCATE').html('<option value="">Error al cargar subcategorías</option>');
                }
            });
        } else {
            $('#CO_SUBCATE').html('<option value="">Primero seleccione categoría</option>');
            $('#CO_VARIEDA').html('<option value="">Primero seleccione subcategoría</option>');
        }
    });
    
    // Load varieties when subcategory changes
    $('#CO_SUBCATE').change(function() {
        var subcategoriaId = $(this).val();
        $('#CO_VARIEDA').html('<option value="">Cargando...</option>');
        
        if (subcategoriaId) {
            $.ajax({
                url: '{{ route("subvariedades.get-variedades") }}',
                type: 'GET',
                data: { subcategory_code: subcategoriaId },
                success: function(data) {
                    // Limpiar y reconstruir el select
                    $('#CO_VARIEDA').empty();
                    $('#CO_VARIEDA').append($('<option>', {
                        value: '',
                        text: 'Seleccione Variedad'
                    }));
                    
                    if (data.varieties) {
                        $.each(data.varieties, function(key, value) {
                            $('#CO_VARIEDA').append($('<option>', {
                                value: value.CO_VARIEDA,
                                text: value.DE_VARIEDA
                            }));
                        });
                    }
                    
                    
                    // Asegurar que no tenga required después de cargar
                    $('#CO_VARIEDA')[0].required = false;
                    $('#CO_VARIEDA').removeAttr('required').prop('required', false);
                },
                error: function() {
                    $('#CO_VARIEDA').html('<option value="">Error al cargar variedades</option>');
                }
            });
        } else {
            $('#CO_VARIEDA').html('<option value="">Primero seleccione subcategoría</option>');
        }
    });

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