<script>
    let vienorLoteImagenes = [];
    let vienorIndexActivo = -1;
    const CANVAS_ANCHO = 600;
    const CANVAS_ALTO = 400;
    let canvas, ctx;
    let imagenRender = new Image();
    let imgX = CANVAS_ANCHO / 2;
    let imgY = CANVAS_ALTO / 2;
    let imgEscala = 1.0;
    let imgRotacion = 0;
    let estaArrastrando = false;
    let startX, startY;

    document.addEventListener('DOMContentLoaded', function() {
        canvas = document.getElementById('canvas_editor');
        if (canvas) {
            ctx = canvas.getContext('2d');
            configurarEventosMouseCanvas();
        }
    });

    function cambiarPestanaVienor(pestana) {
        const vistaSincro = document.getElementById('vista-sincronizar');
        const vistaImg = document.getElementById('vista-imagenes');
        const tabSincro = document.getElementById('btn-tab-sincronizar');
        const tabImg = document.getElementById('btn-tab-imagenes');
        const btnTienda = document.getElementById('contenedor-btn-tienda-top');

        if (pestana === 'sincronizar') {
            vistaSincro.style.display = 'block';
            vistaImg.style.display = 'none';
            tabSincro.style.background = 'rgba(255,255,255,0.45)';
            tabSincro.style.borderLeft = '4px solid #27ae60';
            tabImg.style.background = 'rgba(255,255,255,0.15)';
            tabImg.style.borderLeft = '4px solid transparent';
            btnTienda.style.display = 'none';
        } else {
            vistaSincro.style.display = 'none';
            vistaImg.style.display = 'block';
            tabSincro.style.background = 'rgba(255,255,255,0.15)';
            tabSincro.style.borderLeft = '4px solid transparent';
            tabImg.style.background = 'rgba(255,255,255,0.45)';
            tabImg.style.borderLeft = '4px solid #1378BB';
            btnTienda.style.display = 'inline-flex';
            setTimeout(redibujarLienzoEstricto, 100);
        }
    }

    function procesarArchivosSeleccionados(input) {
        if (!input.files || input.files.length === 0) return;
        const archivos = Array.from(input.files);
        let archivosRechazados = 0;

        archivos.forEach((archivo) => {
            if (archivo.size > 4 * 1024 * 1024) {
                archivosRechazados++;
                return;
            }
            const lector = new FileReader();
            lector.onload = function(evento) {
                vienorLoteImagenes.push({
                    srcOriginal: evento.target.result,
                    sku: '',
                    escala: 100,
                    rotacion: 0,
                    posX: CANVAS_ANCHO / 2,
                    posY: CANVAS_ALTO / 2,
                    nombreArchivo: archivo.name
                });
                if (vienorLoteImagenes.length === 1) { vienorIndexActivo = 0; }
                actualizarGridLoteUI();
            };
            lector.readAsDataURL(archivo);
        });

        if (archivosRechazados > 0) {
            alert(`⚠️ Se omitieron ${archivosRechazados} imágenes por superar los 4MB.`);
        }
        input.value = '';
    }

    function actualizarGridLoteUI() {
        const grid = document.getElementById('vienor_grid_lote');
        const contador = document.getElementById('vienor_contador_lote');
        const zonaEditor = document.getElementById('vienor_zona_editor');

        if (vienorLoteImagenes.length === 0) {
            grid.innerHTML = '<div id="grid_vacia_msg" style="grid-column: 1/-1; text-align: center; color: #94a3b8; padding: 20px; font-size: 13px;">No hay imágenes cargadas en el lote todavía. Se permiten archivos JPG, PNG y WebP de hasta 4MB.</div>';
            contador.innerText = '(Lote vacío)';
            zonaEditor.style.opacity = '0.4';
            zonaEditor.style.pointerEvents = 'none';
            vienorIndexActivo = -1;
            limpiarCanvasBlanco();
            return;
        }

        contador.innerText = `(Lote de ${vienorLoteImagenes.length} subidas)`;
        zonaEditor.style.opacity = '1';
        zonaEditor.style.pointerEvents = 'auto';
        grid.innerHTML = '';

        vienorLoteImagenes.forEach((item, index) => {
            const esActivo = index === vienorIndexActivo;
            const srcAMostrar = item.srcOriginal;

            const thumbCard = document.createElement('div');
            thumbCard.className = `thumb-wrap ${esActivo ? 'active' : ''}`;
            thumbCard.setAttribute('onclick', `cambiarFocoImagenLote(${index}, event)`);

            const btnEliminar = document.createElement('button');
            btnEliminar.type = 'button';
            btnEliminar.className = 'thumb-btn-del';
            btnEliminar.innerText = '×';
            btnEliminar.setAttribute('onclick', `eliminarImagenIndividualLote(${index}, event)`);

            const imgElement = document.createElement('img');
            imgElement.src = srcAMostrar;

            thumbCard.appendChild(btnEliminar);
            thumbCard.appendChild(imgElement);
            grid.appendChild(thumbCard);
        });

        cargarImagenEnEditorActivo();
    }

    function cambiarFocoImagenLote(index, evento) {
        if (evento && evento.target.classList.contains('thumb-btn-del')) return;
        guardarEstadoGeometriaActual();
        vienorIndexActivo = index;
        actualizarGridLoteUI();
    }

    function guardarEstadoGeometriaActual() {
        if (vienorIndexActivo >= 0 && vienorLoteImagenes[vienorIndexActivo]) {
            const item = vienorLoteImagenes[vienorIndexActivo];
            item.sku = document.getElementById('vienor_sku_input').value.trim();
            item.escala = parseInt(document.getElementById('control_escala').value, 10);
            item.rotacion = parseInt(document.getElementById('control_rotacion').value, 10);
            item.posX = imgX;
            item.posY = imgY;
        }
    }

    function eliminarImagenIndividualLote(index, evento) {
        if (evento) evento.stopPropagation();
        vienorLoteImagenes.splice(index, 1);

        if (vienorIndexActivo === index) {
            vienorIndexActivo = vienorLoteImagenes.length > 0 ? Math.max(0, index - 1) : -1;
        } else if (vienorIndexActivo > index) {
            vienorIndexActivo--;
        }

        if (vienorIndexActivo >= 0 && vienorLoteImagenes[vienorIndexActivo]) {
            const itemSiguiente = vienorLoteImagenes[vienorIndexActivo];
            document.getElementById('vienor_sku_input').value = itemSiguiente.sku;
            document.getElementById('control_escala').value = itemSiguiente.escala;
            document.getElementById('control_rotacion').value = itemSiguiente.rotacion;
            imgX = itemSiguiente.posX;
            imgY = itemSiguiente.posY;
        }
        actualizarGridLoteUI();
    }

    function cargarImagenEnEditorActivo() {
        if (vienorIndexActivo < 0 || !vienorLoteImagenes[vienorIndexActivo]) return;
        const item = vienorLoteImagenes[vienorIndexActivo];

        document.getElementById('indicador_index').innerText = `(Editando imagen ${vienorIndexActivo + 1} de ${vienorLoteImagenes.length})`;
        document.getElementById('vienor_sku_input').value = item.sku;
        document.getElementById('control_escala').value = item.escala;
        document.getElementById('control_rotacion').value = item.rotacion;
        document.getElementById('val_escala').innerText = item.escala + '%';
        document.getElementById('val_rotacion').innerText = item.rotacion + '°';
        document.getElementById('sku_error_msg').style.display = 'none';

        imgX = item.posX;
        imgY = item.posY;
        imgEscala = item.escala / 100;
        imgRotacion = item.rotacion;

        imagenRender.onload = function() { redibujarLienzoEstricto(); };
        imagenRender.src = item.srcOriginal;
    }

    function redibujarLienzoEstricto() {
        if (!ctx || !imagenRender.src) return;
        // Fondo blanco mate asegurado para la conversión limpia de transparencias a JPEG
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, CANVAS_ANCHO, CANVAS_ALTO);
        ctx.save();
        ctx.translate(imgX, imgY);
        ctx.rotate((imgRotacion * Math.PI) / 180);
        const ratio = Math.min(CANVAS_ANCHO / imagenRender.width, CANVAS_ALTO / imagenRender.height);
        const anchoDibujo = imagenRender.width * ratio * imgEscala;
        const altoDibujo = imagenRender.height * ratio * imgEscala;
        ctx.drawImage(imagenRender, -anchoDibujo / 2, -altoDibujo / 2, anchoDibujo, altoDibujo);
        ctx.restore();
        document.getElementById('val_pos_x').innerText = Math.round(imgX);
        document.getElementById('val_pos_y').innerText = Math.round(imgY);
    }

    function actualizarTransformacion() {
        imgRotacion = parseInt(document.getElementById('control_rotacion').value, 10);
        const escalaRaw = parseInt(document.getElementById('control_escala').value, 10);
        imgEscala = escalaRaw / 100;
        document.getElementById('val_rotacion').innerText = imgRotacion + '°';
        document.getElementById('val_escala').innerText = escalaRaw + '%';
        redibujarLienzoEstricto();
    }

    function resetearTransformacion() {
        imgX = CANVAS_ANCHO / 2;
        imgY = CANVAS_ALTO / 2;
        imgEscala = 1.0;
        imgRotacion = 0;
        document.getElementById('control_rotacion').value = 0;
        document.getElementById('control_escala').value = 100;
        document.getElementById('val_rotacion').innerText = '0°';
        document.getElementById('val_escala').innerText = '100%';
        redibujarLienzoEstricto();
    }

    function limpiarCanvasBlanco() {
        if (!ctx) return;
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, CANVAS_ANCHO, CANVAS_ALTO);
        document.getElementById('indicador_index').innerText = '';
        document.getElementById('vienor_sku_input').value = '';
    }

    function configurarEventosMouseCanvas() {
        canvas.addEventListener('mousedown', function(e) {
            if (vienorIndexActivo < 0) return;
            estaArrastrando = true;
            const rect = canvas.getBoundingClientRect();
            startX = e.clientX - rect.left;
            startY = e.clientY - rect.top;
        });
        canvas.addEventListener('mousemove', function(e) {
            if (!estaArrastrando) return;
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            const dx = mouseX - startX;
            const dy = mouseY - startY;
            imgX += dx;
            imgY += dy;
            startX = mouseX;
            startY = mouseY;
            redibujarLienzoEstricto();
        });
        window.addEventListener('mouseup', function() { estaArrastrando = false; });
    }

    function guardarImagenActual() {
        if (vienorIndexActivo < 0 || !vienorLoteImagenes[vienorIndexActivo]) {
            alert('❌ No hay imagen seleccionada.');
            return;
        }
        const item = vienorLoteImagenes[vienorIndexActivo];
        const skuValor = document.getElementById('vienor_sku_input').value.trim();
        if (!skuValor) {
            document.getElementById('sku_error_msg').style.display = 'inline-flex';
            document.getElementById('vienor_sku_input').focus();
            return;
        }
        document.getElementById('sku_error_msg').style.display = 'none';
        item.sku = skuValor;

        document.getElementById('editor_status_loading').style.display = 'block';
        document.getElementById('editor_status_loading').innerText = '🚀 Subiendo y vinculando...';
        document.getElementById('btn_guardar_vinculo').disabled = true;

        // EXPORTACIÓN ESTRICTA: Renderiza los pixeles del canvas forzando JPG nativo
        const datosImagenBase64 = canvas.toDataURL('image/jpeg', 0.92);
        
        // FORZADO DE NOMBRE EXTENSIÓN: Forzamos la extensión .jpg final en base al SKU saneado
        const nombreSaneadoSku = item.sku.replace(/[^a-zA-Z0-9-_]/g, '') + '.jpg';

        // CAPTURA DINÁMICA DEL TOKEN UNIFICADO EN V9.5
        const nonceElement = document.getElementsByName('vienor_importador_nonce')[0];
        const nonceValor = nonceElement ? nonceElement.value : '';

        const formData = new FormData();
        formData.append('action', 'guardar_imagen_sku_vienor');
        formData.append('nonce', nonceValor);
        formData.append('sku', item.sku);
        formData.append('imagen_base64', datosImagenBase64);
        formData.append('nombre_archivo', nombreSaneadoSku);

        fetch(vienor_ajax_obj.ajax_url, { method: 'POST', body: formData })
        .then(res => { 
            if (!res.ok) throw new Error('Error en respuesta del servidor.'); 
            return res.json(); 
        })
        .then(datos => {
            document.getElementById('editor_status_loading').style.display = 'none';
            document.getElementById('btn_guardar_vinculo').disabled = false;
            if (datos.success) {
                alert(`✅ Vinculado con éxito al SKU: ${item.sku}`);
                eliminarImagenIndividualLote(vienorIndexActivo, null);
            } else {
                alert('❌ Servidor: ' + (datos.data && datos.data.message ? datos.data.message : 'Error desconocido.'));
            }
        })
        .catch(err => {
            console.error(err);
            alert('❌ Error al intentar guardar. Revisa la consola o los logs del servidor.');
            document.getElementById('editor_status_loading').style.display = 'none';
            document.getElementById('btn_guardar_vinculo').disabled = false;
        });
    }
</script>
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//vienor.digitaltechnology.com.ar/wp-content/plugins/wordpress-seo/css/main-sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://vienor.digitaltechnology.com.ar/page-sitemap.xml</loc>
		<lastmod>2026-05-29T12:27:48+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://vienor.digitaltechnology.com.ar/product-sitemap.xml</loc>
		<lastmod>2026-05-30T18:36:13+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://vienor.digitaltechnology.com.ar/product_brand-sitemap.xml</loc>
		<lastmod>2026-05-30T18:36:13+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://vienor.digitaltechnology.com.ar/product_cat-sitemap.xml</loc>
		<lastmod>2026-05-30T18:36:13+00:00</lastmod>
	</sitemap>
</sitemapindex>
<!-- XML Sitemap generated by Yoast SEO -->