jQuery(document).ready(function($) {
    const $openBtn =$('#ss-open-preview-btn');
    const $modal =$('#ss-quote-modal');
    const $closeBtn =$('#ss-close-modal');
    const $downloadBtn =$('#ss-download-png');
    const $canvasContainer =$('#ss-canvas-container');

    function getFeaturedImageUrl() {
        if (window.wp && wp.data && wp.data.select('core/editor')) {
            const mediaId = wp.data.select('core/editor').getEditedPostAttribute('featured_media');
            if (mediaId) {
                const media = wp.data.select('core').getMedia(mediaId);
                if (media && media.source_url) return media.source_url;
            }
        }
        return $('#ss-featured-image-url').val();
    }

    function urlToBase64(url) {
        return new Promise((resolve) => {
            if (!url) resolve('');
            let img = new Image();
            img.crossOrigin = 'Anonymous';
            let timer = setTimeout(() => resolve(url), 4000);

            img.onload = function() {
                clearTimeout(timer);
                let canvas = document.createElement('canvas');
                canvas.width = this.naturalWidth;
                canvas.height = this.naturalHeight;
                let ctx = canvas.getContext('2d');
                ctx.drawImage(this, 0, 0);
                resolve(canvas.toDataURL('image/png'));
            };
            img.onerror = function() {
                clearTimeout(timer);
                resolve(url);
            };
            img.src = url;
        });
    }

    function formatHighlightedText(text) {
        return text.replace(/\*(.*?)\*/g, '<span style="color:#c8232c;">$1</span>');
    }

    $openBtn.on('click', async function() {
        const rawText = $('#ss-quote-text').val().trim();
        const templateStyle = $('#ss-template-style').val(); 
        const useImage = $('#ss-use-image').is(':checked');
        const format = $('#ss-quote-format').val();
        const rawImgUrl = getFeaturedImageUrl();
        const rawLogoUrl = $('#ss-logo-url').val();
        
        const rawCategory = $('#ss-post-category').val().trim();
        const category = rawCategory ? rawCategory.toUpperCase() : 'PROVINCIALES';

        if (!rawText) {
            alert('Por favor, ingresá el título o texto de la placa.');
            return;
        }

        $openBtn.prop('disabled', true).text('⏳ Renderizando...');

        const base64Img = (useImage && rawImgUrl) ? await urlToBase64(rawImgUrl) : '';
        const base64Logo = rawLogoUrl ? await urlToBase64(rawLogoUrl) : '';

        $openBtn.prop('disabled', false).text('🖼️ Vista Previa y Exportar');

        let width = 1080;
        let height = (format === 'story') ? 1920 : 1080;

        $canvasContainer.empty();

        // Estilo global de la fuente Gotham Black para el contenedor
        const fontStyle = `font-family: 'Gotham Black', 'Gotham', 'Montserrat', sans-serif; font-weight: 900;`;

        let templateHtml = '';

        if (templateStyle === 'card-white') {
            // --- PLANTILLA 1: TARJETA BLANCA ---
            const formattedText = formatHighlightedText(rawText);
            const imgHeight = format === 'story' ? '62%' : '58%';

            templateHtml = `
            <div id="ss-quote-render-target" style="
                width: ${width}px; height: ${height}px; 
                background: #ffffff; position: relative; 
                box-sizing: border-box; ${fontStyle} 
                overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;">
                
                <div style="width: 100%; height: ${imgHeight}; position: relative; overflow: hidden;">
                    <div style="width: 100%; height: 100%; background-image: url('${base64Img}'); background-size: cover; background-position: center; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);"></div>
                    
                    ${base64Logo ? `<img src="${base64Logo}" style="position: absolute; top: 40px; right: 40px; width: 110px; height: 110px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3);" />` : ''}
                    
                    <div style="position: absolute; bottom: 10px; left: 50px; background: #c8232c; color: #ffffff; font-size: 28px; padding: 12px 28px; border-radius: 16px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 10;">
                        ${category}
                    </div>
                </div>

                <div style="padding: 20px 50px 30px 50px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
                    <h1 style="font-size: ${format === 'story' ? '54px' : '48px'}; color: #555555; line-height: 1.15; margin: 0; text-align: left; ${fontStyle}">
                        ${formattedText}
                    </h1>
                </div>

                <div style="padding: 0 50px 40px 50px; display: flex; align-items: center; justify-content: center; gap: 15px;">
                    <span style="font-size: 26px; color: #000000;">www.saltasur.com.ar</span>
                    <div style="height: 4px; background: #c8232c; flex-grow: 1; max-width: 350px; border-radius: 2px;"></div>
                </div>
            </div>`;

        } else {
            // --- PLANTILLA 2: BLOQUE ROJO SÓLIDO ---
            const imgHeight = format === 'story' ? '55%' : '52%';

            templateHtml = `
            <div id="ss-quote-render-target" style="
                width: ${width}px; height: ${height}px; 
                background: #c8232c; position: relative; 
                box-sizing: border-box; ${fontStyle} 
                overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;">
                
                <div style="width: 100%; height: ${imgHeight}; position: relative; overflow: hidden;">
                    <div style="width: 100%; height: 100%; background-image: url('${base64Img}'); background-size: cover; background-position: center;"></div>
                    
                    ${base64Logo ? `<img src="${base64Logo}" style="position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.4);" />` : ''}
                    
                    <div style="position: absolute; bottom: 0; left: 40px; background: #ffffff; color: #000000; font-size: 28px; padding: 10px 24px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 10;">
                        ${category}
                    </div>
                </div>

                <div style="padding: 40px 50px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; background: #c8232c;">
                    <h1 style="font-size: ${format === 'story' ? '56px' : '50px'}; color: #ffffff; line-height: 1.15; margin: 0; text-align: left; ${fontStyle}">
                        ${rawText}
                    </h1>
                </div>

                <div style="padding: 0 50px 35px 50px; display: flex; align-items: center; justify-content: center; gap: 15px; background: #c8232c;">
                    <span style="font-size: 26px; color: #ffffff;">www.saltasur.com.ar</span>
                    <div style="height: 4px; background: #000000; flex-grow: 1; max-width: 320px;"></div>
                </div>
            </div>`;
        }

        let scale = format === 'story' ? 0.25 : 0.38;
        
        let previewContainer = $('<div></div>').css({
            'width': `${width * scale}px`,
            'height': `${height * scale}px`,
            'overflow': 'hidden',
            'margin': '0 auto',
            'box-shadow': '0 4px 20px rgba(0,0,0,0.3)',
            'border-radius': '6px',
            'position': 'relative'
        });

        let scaledWrapper = $('<div></div>').css({
            'transform': `scale(${scale})`,
            'transform-origin': 'top left',
            'width': `${width}px`,
            'height': `${height}px`
        }).html(templateHtml);

        previewContainer.append(scaledWrapper);
        $canvasContainer.append(previewContainer);$modal.css('display', 'flex');
    });

    $closeBtn.on('click', function() {$modal.hide();
    });

    $downloadBtn.on('click', function() {
        const sourceNode = document.getElementById('ss-quote-render-target');
        if (!sourceNode) return;

        $downloadBtn.text('⏳ Generando PNG...').prop('disabled', true);

        const clone = sourceNode.cloneNode(true);
        clone.id = 'ss-quote-export-clone';
        clone.style.position = 'fixed';
        clone.style.left = '-9999px';
        clone.style.top = '-9999px';
        document.body.appendChild(clone);

        setTimeout(() => {
            html2canvas(clone, {
                scale: 1,
                width: clone.offsetWidth,
                height: clone.offsetHeight,
                useCORS: true,
                allowTaint: true,
                logging: false
            }).then(function(canvas) {
                const link = document.createElement('a');
                const format = $('#ss-quote-format').val();
                
                link.download = `placa-salta-sur-${format}-${Date.now()}.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();

                document.body.removeChild(clone);
                $downloadBtn.text('📥 Descargar PNG').prop('disabled', false);
            }).catch(function(err) {
                alert('Ocurrió un error al generar la imagen.');
                console.error(err);
                if (document.getElementById('ss-quote-export-clone')) {
                    document.body.removeChild(clone);
                }
                $downloadBtn.text('📥 Descargar PNG').prop('disabled', false);
            });
        }, 150);
    });
});<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//saltasur.com.ar/wp-content/plugins/wordpress-seo/css/main-sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap.xml</loc>
		<lastmod>2026-10-17T12:30:56+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap2.xml</loc>
		<lastmod>2022-12-27T14:50:43+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap3.xml</loc>
		<lastmod>2023-12-11T19:41:07+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap4.xml</loc>
		<lastmod>2024-05-31T18:14:17+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap5.xml</loc>
		<lastmod>2025-02-10T14:03:30+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap6.xml</loc>
		<lastmod>2025-07-30T21:44:45+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap7.xml</loc>
		<lastmod>2026-04-10T12:29:25+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap8.xml</loc>
		<lastmod>2026-10-02T19:32:34+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post-sitemap9.xml</loc>
		<lastmod>2026-10-17T12:30:56+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/page-sitemap.xml</loc>
		<lastmod>2026-10-16T19:26:04+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/category-sitemap.xml</loc>
		<lastmod>2026-10-17T12:30:56+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post_tag-sitemap.xml</loc>
		<lastmod>2026-10-17T12:30:56+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post_tag-sitemap2.xml</loc>
		<lastmod>2026-10-17T12:30:56+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post_tag-sitemap3.xml</loc>
		<lastmod>2026-10-17T12:30:56+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/post_tag-sitemap4.xml</loc>
		<lastmod>2026-10-17T12:23:20+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://saltasur.com.ar/author-sitemap.xml</loc>
		<lastmod>2026-08-25T10:52:16+00:00</lastmod>
	</sitemap>
<sitemap>
<loc>https://saltasur.com.ar/news-sitemap.xml</loc>
<lastmod>2026-10-17T12:30:56+00:00</lastmod>
</sitemap>
</sitemapindex>
<!-- XML Sitemap generated by Yoast SEO -->