// Desactivar autodetección de Dropzone
Dropzone.autoDiscover = false;

// Variables globales
let imagenes = [];
let imagenPrincipal = '';
let myDropzone;
let fichaTecnicaPDF = '';
let fichaSeguridad = '';
let coloresDisponibles = [];
let coloresSeleccionados = [];

$(document).ready(function () {
    // Inicializar editor para descripción
    if ($("#descripcion").length) {
        $("#descripcion").summernote({
            height: 150,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            placeholder: 'Escribe la descripción del producto aquí...'
        });
    }

    // Cargar categorías, marcas y colores
    loadCategorias();
    loadMarcas();
    loadColores();

    // MANEJO de selección de colores
    $("#tiene_colores").change(function() {
        const tieneColores = $(this).val();
        
        console.log('Cambio en tiene_colores:', tieneColores);
        
        if (tieneColores === "1") {
            // Mostrar secciones de colores
            $("#coloresSection").show();
            $("#imagenesSection").hide();
            $("#imagenesColorSection").show();
            
            // Limpiar dropzone existente
            if (myDropzone) {
                myDropzone.destroy();
                myDropzone = null;
            }
            
            // Limpiar variables de imágenes normales
            imagenes = [];
            imagenPrincipal = '';
            $("#imagenes").val('');
            $("#imagen_principal").val('');
            $("#imagenesCarousel").hide();
            
        } else if (tieneColores === "0") {
            // Mostrar sección de imágenes normales
            $("#coloresSection").hide();
            $("#imagenesColorSection").hide();
            $("#imagenesSection").show();
            
            // Limpiar colores
            coloresSeleccionados = [];
            $("#selectedColors").empty();
            $("#colorImagesContainer").empty();
            $("#colores_data").val('');
            
            // Inicializar dropzone normal
            setTimeout(() => {
                initializeDropzone();
            }, 100);
            
        } else {
            // Ocultar todas las secciones
            $("#coloresSection").hide();
            $("#imagenesSection").hide();
            $("#imagenesColorSection").hide();
            
            // Limpiar dropzone
            if (myDropzone) {
                myDropzone.destroy();
                myDropzone = null;
            }
            
            // Limpiar todo
            imagenes = [];
            imagenPrincipal = '';
            coloresSeleccionados = [];
            $("#selectedColors").empty();
            $("#colorImagesContainer").empty();
        }
    });

    // AGREGAR color seleccionado
    $("#addColorBtn").click(function() {
        const colorId = $("#colorSelect").val();
        
        console.log('Color seleccionado:', colorId);
        
        if (!colorId) {
            Swal.fire({
                icon: 'warning',
                title: 'Selecciona un color',
                text: 'Debes seleccionar un color antes de agregarlo'
            });
            return;
        }

        // Verificar si ya está seleccionado
        if (coloresSeleccionados.find(c => c.id == colorId)) {
            Swal.fire({
                icon: 'warning',
                title: 'Color ya seleccionado',
                text: 'Este color ya ha sido agregado'
            });
            return;
        }

        // Encontrar el color en la lista disponible
        const color = coloresDisponibles.find(c => c.id == colorId);
        if (!color) {
            console.error('Color no encontrado:', colorId);
            return;
        }

        console.log('Agregando color:', color);

        // Agregar a la lista de seleccionados
        coloresSeleccionados.push({
            id: color.id,
            nombre: color.nombre,
            codigo_hex: color.codigo_hex,
            imagenes: [],
            imagen_preview: null
        });

        // Actualizar interfaz
        updateSelectedColors();
        $("#colorSelect").val("");
        
        console.log('Colores seleccionados:', coloresSeleccionados);
    });

    // FUNCIÓN para actualizar colores seleccionados
    function updateSelectedColors() {
        console.log('Actualizando colores seleccionados');
        
        let html = '';
        
        coloresSeleccionados.forEach((color, index) => {
            html += `
                <div class="color-item" data-color-id="${color.id}">
                    <div class="color-header">
                        <div>
                            <span class="color-preview" style="background-color: ${color.codigo_hex}"></span>
                            <strong>${color.nombre}</strong>
                        </div>
                        <button type="button" class="btn btn-sm btn-danger remove-color" data-color-id="${color.id}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="color-images">
                        <div class="dropzone-color" data-color-id="${color.id}">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt fa-2x mb-2"></i>
                                <p>Arrastra imágenes aquí o haz clic<br>
                                <small>Máximo 10 imágenes por color</small></p>
                            </div>
                        </div>
                        <div class="image-preview-container" id="preview-${color.id}">
                            <!-- Imágenes preview se cargarán aquí -->
                        </div>
                    </div>
                </div>
            `;
        });

        $("#selectedColors").html(html);
        updateColorImagesContainer();
        
        // Usar setTimeout para asegurar que el HTML esté renderizado
        setTimeout(() => {
            attachColorImageEvents();
        }, 100);
    }

    // FUNCIÓN para actualizar el container de imágenes por color
    function updateColorImagesContainer() {
        let html = '';
        
        coloresSeleccionados.forEach((color) => {
            html += `
                <div class="color-section mb-3" data-color-id="${color.id}">
                    <h6><span class="color-preview" style="background-color: ${color.codigo_hex}"></span>${color.nombre}</h6>
                    <div class="image-preview-container" id="container-${color.id}">
                        <!-- Imágenes se mostrarán aquí -->
                    </div>
                </div>
            `;
        });

        $("#colorImagesContainer").html(html);
    }

    // FUNCIÓN para adjuntar eventos a imágenes por color
    function attachColorImageEvents() {
        console.log('Adjuntando eventos a elementos de color');
        
        // Eventos de drag and drop y click
        $(".dropzone-color").each(function() {
            const $element = $(this);
            const colorId = $element.data('color-id');
            
            console.log('Configurando dropzone para color:', colorId);
            
            // Remover eventos anteriores
            $element.off('dragover dragenter dragleave drop click');
            
            // Eventos de drag and drop
            $element.on({
                'dragover': function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).addClass('dragover');
                },
                'dragenter': function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).addClass('dragover');
                },
                'dragleave': function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).removeClass('dragover');
                },
                'drop': function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).removeClass('dragover');
                    
                    const colorId = $(this).data('color-id');
                    const files = e.originalEvent.dataTransfer.files;
                    
                    console.log('Drop en color:', colorId, 'archivos:', files.length);
                    
                    handleColorImageUpload(files, colorId);
                },
                'click': function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const colorId = $(this).data('color-id');
                    console.log('Click en dropzone color:', colorId);
                    
                    const input = document.createElement('input');
                    input.type = 'file';
                    input.multiple = true;
                    input.accept = 'image/*';
                    
                    input.onchange = function(e) {
                        console.log('Archivos seleccionados:', e.target.files.length);
                        handleColorImageUpload(e.target.files, colorId);
                    };
                    
                    input.click();
                }
            });
        });

        // Evento para remover color
        $(".remove-color").off('click').on('click', function() {
            const colorId = $(this).data('color-id');
            
            Swal.fire({
                title: '¿Eliminar color?',
                text: '¿Estás seguro de querer eliminar este color y todas sus imágenes?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    removeColor(colorId);
                }
            });
        });
    }

    // FUNCIÓN para manejar subida de imágenes por color
    function handleColorImageUpload(files, colorId) {
        console.log('Procesando archivos para color:', colorId);
        
        const color = coloresSeleccionados.find(c => c.id == colorId);
        if (!color) {
            console.error('Color no encontrado:', colorId);
            return;
        }

        // Validar límite de imágenes
        if (color.imagenes.length + files.length > 10) {
            Swal.fire({
                icon: 'warning',
                title: 'Límite de imágenes',
                text: 'Máximo 10 imágenes por color'
            });
            return;
        }

        // Procesar cada archivo
        Array.from(files).forEach(file => {
            if (!file.type.startsWith('image/')) {
                Swal.fire({
                    icon: 'error',
                    title: 'Archivo no válido',
                    text: 'Solo se permiten imágenes'
                });
                return;
            }

            console.log('Subiendo archivo:', file.name, 'para color:', colorId);
            
            // Subir archivo
            uploadColorImage(file, colorId);
        });
    }

    // FUNCIÓN para subir imagen por color
    function uploadColorImage(file, colorId) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('color_id', colorId);

        $.ajax({
            url: 'php/uploadImageColor.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                console.log('Respuesta upload:', response);
                
                if (response.status === 'success') {
                    const color = coloresSeleccionados.find(c => c.id == colorId);
                    if (color) {
                        color.imagenes.push({
                            filename: response.filename,
                            preview: response.preview
                        });

                        // Si es la primera imagen, establecer como preview
                        if (!color.imagen_preview) {
                            color.imagen_preview = response.preview;
                        }

                        updateColorImagePreview(colorId);
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('Error upload:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al subir la imagen'
                });
            }
        });
    }

    // FUNCIÓN para actualizar preview de imágenes por color
    function updateColorImagePreview(colorId) {
        const color = coloresSeleccionados.find(c => c.id == colorId);
        if (!color) return;

        let html = '';
        color.imagenes.forEach((img, index) => {
            const isPreview = img.preview === color.imagen_preview;
            html += `
                <div class="image-preview-item ${isPreview ? 'is-preview' : ''}" data-filename="${img.filename}">
                    <img src="img/productos/${img.filename}" alt="Imagen ${index + 1}">
                    <button class="remove-btn" data-color-id="${colorId}" data-filename="${img.filename}">
                        <i class="fas fa-times"></i>
                    </button>
                    <button class="preview-btn" data-color-id="${colorId}" data-preview="${img.preview}">
                        ${isPreview ? 'Preview' : 'Hacer Preview'}
                    </button>
                </div>
            `;
        });

        $(`#preview-${colorId}`).html(html);
        $(`#container-${colorId}`).html(html);

        // Eventos para botones
        $(`#preview-${colorId} .remove-btn`).off('click').on('click', function() {
            const colorId = $(this).data('color-id');
            const filename = $(this).data('filename');
            removeColorImage(colorId, filename);
        });

        $(`#preview-${colorId} .preview-btn`).off('click').on('click', function() {
            const colorId = $(this).data('color-id');
            const preview = $(this).data('preview');
            setColorPreview(colorId, preview);
        });
    }

    // FUNCIÓN para remover imagen por color
    function removeColorImage(colorId, filename) {
        const color = coloresSeleccionados.find(c => c.id == colorId);
        if (!color) return;

        color.imagenes = color.imagenes.filter(img => img.filename !== filename);

        // Si era la imagen preview, asignar otra
        if (color.imagen_preview && color.imagenes.length > 0) {
            const previewImg = color.imagenes.find(img => img.preview === color.imagen_preview);
            if (!previewImg) {
                color.imagen_preview = color.imagenes[0].preview;
            }
        } else if (color.imagenes.length === 0) {
            color.imagen_preview = null;
        }

        updateColorImagePreview(colorId);
    }

    // FUNCIÓN para establecer imagen preview
    function setColorPreview(colorId, preview) {
        const color = coloresSeleccionados.find(c => c.id == colorId);
        if (!color) return;

        color.imagen_preview = preview;
        updateColorImagePreview(colorId);
    }

    // FUNCIÓN para remover color
    function removeColor(colorId) {
        coloresSeleccionados = coloresSeleccionados.filter(c => c.id != colorId);
        updateSelectedColors();
    }

    // FUNCIÓN para inicializar dropzone normal
    function initializeDropzone() {
        console.log('Inicializando dropzone normal');
        
        // Verificar si ya existe un dropzone
        if (myDropzone) {
            console.log('Dropzone ya existe, destruyendo...');
            myDropzone.destroy();
            myDropzone = null;
        }

        // Verificar si el elemento existe
        if (!$("#dropzoneProducto").length) {
            console.error('Elemento #dropzoneProducto no encontrado');
            return;
        }

        try {
            myDropzone = new Dropzone("#dropzoneProducto", {
                url: "php/uploadImageProducto.php",
                paramName: "file",
                maxFilesize: 2,
                acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
                maxFiles: 10,
                addRemoveLinks: false,
                dictDefaultMessage: "Arrastra imágenes aquí o haz clic para seleccionar<br><span class='note needsclick'>Máximo 5 imágenes. La primera imagen será la principal.</span>",
                dictFileTooBig: "El archivo es demasiado grande ({{filesize}}MB). Tamaño máximo: {{maxFilesize}}MB",
                dictInvalidFileType: "Solo se permiten imágenes",
                previewsContainer: false,
                init: function () {
                    this.on("success", function (file, response) {
                        try {
                            let result = typeof response === 'string' ? JSON.parse(response) : response;
                            
                            if (result.status === 'success') {
                                imagenes.push(result.filename);
                                
                                if (imagenes.length === 1) {
                                    imagenPrincipal = result.filename;
                                    $("#imagen_principal").val(imagenPrincipal);
                                }
                                
                                $("#imagenes").val(imagenes.join(','));
                                updateCarousel();
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: result.message
                                });
                            }
                        } catch (e) {
                            console.error('Error al procesar respuesta:', e);
                        }
                    });

                    this.on("error", function (file, errorMessage) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage
                        });
                    });

                    this.on("maxfilesexceeded", function (file) {
                        this.removeFile(file);
                        Swal.fire({
                            icon: 'warning',
                            title: 'Límite excedido',
                            text: 'Máximo 5 imágenes permitidas'
                        });
                    });
                }
            });
            
            console.log('Dropzone inicializado correctamente');
        } catch (error) {
            console.error("Error al inicializar Dropzone:", error);
        }
    }

    // FUNCIÓN para actualizar el carrusel
    function updateCarousel() {
        if (imagenes.length > 0) {
            let carouselInner = '';
            let indicators = '';

            $("#imagenesCarousel").hide();

            imagenes.forEach((img, index) => {
                const isActive = img === imagenPrincipal ? 'active' : '';
                const isPrincipal = img === imagenPrincipal;

                carouselInner += `
                <div class="carousel-item ${isActive}">
                    <img src="img/productos/${img}" class="d-block mx-auto" alt="Imagen producto">
                    <div class="carousel-caption d-flex justify-content-between carousel-div-btns">
                        <span class="imagen-info">Imagen ${index + 1}${isPrincipal ? ' (Principal)' : ''}</span>
                        <div>
                            <button type="button" class="btn btn-sm ${isPrincipal ? 'btn-success' : 'btn-primary'} me-2 set-principal" 
                                    data-imagen="${img}" ${isPrincipal ? 'disabled' : ''}>
                                <i class="fas fa-star"></i> ${isPrincipal ? 'Principal' : 'Hacer principal'}
                            </button>
                            <button type="button" class="btn btn-sm btn-danger remove-image" data-imagen="${img}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>`;

                indicators += `
                <button type="button" data-bs-target="#imagenesCarousel" data-bs-slide-to="${index}" 
                        class="${isActive}" aria-current="${isActive === 'active'}" aria-label="Slide ${index + 1}"></button>`;
            });

            $(".carousel-inner").html(carouselInner);
            $(".carousel-indicators").html(indicators);

            $("#imagenesCarousel").fadeIn(300);

            var carousel = new bootstrap.Carousel(document.getElementById('imagenesCarousel'), {
                interval: false
            });

            $(".set-principal").off('click').on('click', function () {
                const imagen = $(this).data('imagen');
                imagenPrincipal = imagen;
                $("#imagen_principal").val(imagenPrincipal);
                updateCarousel();
            });

            $(".remove-image").off('click').on('click', function () {
                const imagen = $(this).data('imagen');

                Swal.fire({
                    title: "¿Eliminar imagen?",
                    text: "¿Estás seguro de querer eliminar esta imagen?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Sí, eliminar",
                    cancelButtonText: "Cancelar"
                }).then((result) => {
                    if (result.isConfirmed) {
                        imagenes = imagenes.filter(img => img !== imagen);
                        
                        if (imagenPrincipal === imagen) {
                            imagenPrincipal = imagenes.length > 0 ? imagenes[0] : '';
                        }
                        
                        $("#imagenes").val(imagenes.join(','));
                        $("#imagen_principal").val(imagenPrincipal);
                        updateCarousel();
                    }
                });
            });
        } else {
            $("#imagenesCarousel").fadeOut(300);
        }
    }

    // FUNCIÓN para mostrar preview del PDF
    function showPDFPreview(field, filename, originalName) {
        const previewContainer = $(`#${field}_preview`);
        const uploadInput = $(`#${field}_upload`);

        uploadInput.hide();
        previewContainer.show();
        previewContainer.find('.pdf-name').text(originalName);
    }

    // MANEJO de uploads de PDF
    $('.pdf-upload').on('change', function () {
        const file = this.files[0];
        const field = $(this).data('field');

        if (file) {
            if (file.type !== 'application/pdf') {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Solo se permiten archivos PDF'
                });
                this.value = '';
                return;
            }

            if (file.size > 10 * 1024 * 1024) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'El archivo es demasiado grande. Máximo 10MB'
                });
                this.value = '';
                return;
            }

            uploadPDF(file, field);
        }
    });

    // FUNCIÓN para subir PDF
    function uploadPDF(file, field) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('field', field);

        Swal.fire({
            title: 'Subiendo PDF...',
            text: 'Por favor espera',
            allowOutsideClick: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: 'php/uploadPDF.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                if (response && response.status === 'success') {
                    if (field === 'ficha_tecnica') {
                        fichaTecnicaPDF = response.filename;
                        $("#ficha_tecnica_pdf").val(fichaTecnicaPDF);
                    } else if (field === 'ficha_seguridad') {
                        fichaSeguridad = response.filename;
                        $("#ficha_seguridad_pdf").val(fichaSeguridad);
                    }

                    showPDFPreview(field, response.filename, response.original_name);

                    Swal.fire({
                        icon: 'success',
                        title: 'PDF subido correctamente',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error desconocido al subir PDF'
                    });
                }
            },
            error: function (xhr, status, error) {
                let errorMessage = 'Error de conexión al servidor';
                
                try {
                    let response = typeof xhr.responseText === 'string' ? JSON.parse(xhr.responseText) : xhr.responseText;
                    if (response && response.message) {
                        errorMessage = response.message;
                    }
                } catch (e) {
                    if (xhr.status === 404) {
                        errorMessage = 'Archivo uploadPDF.php no encontrado';
                    } else if (xhr.status === 500) {
                        errorMessage = 'Error interno del servidor';
                    }
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Error de conexión',
                    text: errorMessage,
                    footer: `Código de error: ${xhr.status}`
                });
            }
        });
    }

    // FUNCIÓN para eliminar PDF
    function deletePDF(field, filename) {
        $.ajax({
            url: 'php/deletePDF.php',
            type: 'POST',
            data: { filename: filename },
            dataType: 'json',
            success: function (response) {
                if (response && response.status === 'success') {
                    if (field === 'ficha_tecnica') {
                        fichaTecnicaPDF = '';
                        $("#ficha_tecnica_pdf").val('');
                    } else if (field === 'ficha_seguridad') {
                        fichaSeguridad = '';
                        $("#ficha_seguridad_pdf").val('');
                    }

                    const previewContainer = $(`#${field}_preview`);
                    const uploadInput = $(`#${field}_upload`);

                    previewContainer.hide();
                    uploadInput.show();
                    uploadInput.val('');

                    Swal.fire({
                        icon: 'success',
                        title: 'PDF eliminado',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error al eliminar PDF'
                    });
                }
            },
            error: function (xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error de conexión al servidor'
                });
            }
        });
    }

    // MANEJO de eliminación de PDFs
    $(document).on('click', '.remove-pdf', function() {
        const field = $(this).data('field');
        const filename = field === 'ficha_tecnica' ? fichaTecnicaPDF : fichaSeguridad;

        Swal.fire({
            title: '¿Eliminar PDF?',
            text: '¿Estás seguro de querer eliminar este archivo?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                deletePDF(field, filename);
            }
        });
    });

    // ENVÍO del formulario
    $("#productoForm").submit(function (e) {
        e.preventDefault();

        const descripcion = $("#descripcion").summernote('code');
        const formData = new FormData(this);
        formData.append('action', 'createProducto');
        formData.set('descripcion', descripcion);

        const tieneColores = $("#tiene_colores").val();

        // Validaciones según el tipo de producto
        if (tieneColores === "1") {
            // Validar colores
            if (coloresSeleccionados.length === 0) {
                Swal.fire({
                    icon: "warning",
                    title: "Colores requeridos",
                    text: "Debes seleccionar al menos un color"
                });
                return;
            }

            // Validar que cada color tenga al menos una imagen
            const coloresSinImagenes = coloresSeleccionados.filter(c => c.imagenes.length === 0);
            if (coloresSinImagenes.length > 0) {
                Swal.fire({
                    icon: "warning",
                    title: "Imágenes requeridas",
                    text: "Cada color debe tener al menos una imagen"
                });
                return;
            }

            // Preparar datos de colores
            formData.append('colores_data', JSON.stringify(coloresSeleccionados));
        } else if (tieneColores === "0") {
            // Validar imágenes normales
            if (imagenes.length === 0) {
                Swal.fire({
                    icon: "warning",
                    title: "Imágenes requeridas",
                    text: "Debes subir al menos una imagen del producto"
                });
                return;
            }
        }

        $.ajax({
            url: "database/model/productos.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                if (response && response.status === "success") {
                    Swal.fire({
                        icon: "success",
                        title: "¡Éxito!",
                        text: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        window.location.href = "productos.php";
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: response.message || "Error al crear producto"
                    });
                }
            },
            error: function (xhr, status, error) {
                let errorMessage = 'Error de conexión al servidor';
                try {
                    let response = typeof xhr.responseText === 'string' ? JSON.parse(xhr.responseText) : xhr.responseText;
                    if (response && response.message) {
                        errorMessage = response.message;
                    }
                } catch (e) {
                    // Usar mensaje genérico
                }
                
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: errorMessage
                });
            }
        });
    });
});

// FUNCIÓN para cargar categorías
function loadCategorias() {
    $.ajax({
        url: 'database/model/categorias.php',
        type: 'POST',
        data: { "action": "getCategorias" },
        dataType: 'json',
        success: function (response) {
            try {
                let categorias = response;
                let options = '<option value="">Selecciona una categoría</option>';

                if (Array.isArray(categorias)) {
                    categorias.forEach(categoria => {
                        options += `<option value="${categoria.id}">${categoria.nombre}</option>`;
                    });
                }

                $("#id_categoria").html(options);
            } catch (e) {
                console.error("Error al procesar categorías:", e);
            }
        },
        error: function(xhr, status, error) {
            console.error("Error cargar categorías:", error);
        }
    });
}

// FUNCIÓN para cargar marcas
function loadMarcas() {
    $.ajax({
        url: 'database/model/marcas.php',
        type: 'POST',
        data: { "action": "getMarcas" },
        dataType: 'json',
        success: function (response) {
            try {
                let marcas = response;
                let options = '<option value="">Selecciona una marca</option>';

                if (Array.isArray(marcas)) {
                    marcas.forEach(marca => {
                        options += `<option value="${marca.id}">${marca.nombre}</option>`;
                    });
                }

                $("#id_marca").html(options);
            } catch (e) {
                console.error("Error al procesar marcas:", e);
            }
        },
        error: function(xhr, status, error) {
            console.error("Error cargar marcas:", error);
        }
    });
}

// FUNCIÓN para cargar colores
function loadColores() {
    $.ajax({
        url: 'database/model/colores.php',
        type: 'POST',
        data: { "action": "getColores" },
        dataType: 'json',
        success: function (response) {
            try {
                console.log('Colores cargados:', response);
                coloresDisponibles = response;
                let options = '<option value="">Selecciona un color</option>';

                if (Array.isArray(coloresDisponibles)) {
                    coloresDisponibles.forEach(color => {
                        options += `<option value="${color.id}">${color.nombre}</option>`;
                    });
                }

                $("#colorSelect").html(options);
            } catch (e) {
                console.error("Error al procesar colores:", e);
            }
        },
        error: function(xhr, status, error) {
            console.error("Error cargar colores:", error);
        }
    });
}