Funcionalidad JS para el formulario QR - OV DIVI

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>

<script>
let pickr;
let currentColor = '#000000';
let qrSize = 512;

function updateColor(color) {
    currentColor = color.toHEXA().toString();
    document.getElementById('ov-color-preview').style.backgroundColor = currentColor;
    document.querySelector('.pcr-button').style.color = currentColor;
}

// Inicializar Pickr
window.addEventListener('load', () => {
    pickr = Pickr.create({
        el: '#ov-color-preview',
        theme: 'classic',
        default: currentColor,
        swatches: [
            'rgba(0, 0, 0, 1)',
            'rgba(244, 67, 54, 1)',
            'rgba(233, 30, 99, 1)',
            'rgba(156, 39, 176, 1)',
            'rgba(103, 58, 183, 1)',
            'rgba(63, 81, 181, 1)',
            'rgba(33, 150, 243, 1)',
            'rgba(3, 169, 244, 1)',
            'rgba(0, 188, 212, 1)',
            'rgba(0, 150, 136, 1)',
            'rgba(76, 175, 80, 1)'
        ],
        components: {
            preview: true,
            opacity: false,
            hue: false,
            interaction: {
                hex: true,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: true,
                save: true
            }
        },
        i18n: {
            'btn:save': 'Guardar',
            'btn:clear': 'Limpiar',
        }
    });

    pickr.on('change', updateColor);
    pickr.on('save', (color) => {
        updateColor(color);
        pickr.hide();
    });

    document.getElementById('ov-qr-type').addEventListener('change', function() {
        const whatsappInputs = document.querySelector('.ov-whatsapp-inputs');
        const vcardInputs = document.querySelector('.ov-vcard-inputs');
        const wifiInputs = document.querySelector('.ov-wifi-inputs');
        const normalInput = document.getElementById('ov-qr-text');

        whatsappInputs.style.display = 'none';
        vcardInputs.style.display = 'none';
        wifiInputs.style.display = 'none';
        normalInput.style.display = 'none';

        switch(this.value) {
            case 'whatsapp':
                whatsappInputs.style.display = 'block';
                break;
            case 'vcard':
                vcardInputs.style.display = 'block';
                break;
            case 'wifi':
                wifiInputs.style.display = 'block';
                break;
            default:
                normalInput.style.display = 'block';
        }
    });
});

function showWarning(message) {
    const warningElement = document.getElementById('ov-warning');
    warningElement.textContent = message;
    setTimeout(() => {
        warningElement.textContent = '';
    }, 3000);
}

function setQRSize(size) {
    qrSize = size;
}

function generateQR() {
    var type = document.getElementById("ov-qr-type").value;
    var text = '';
    var qrcodeContainer = document.getElementById("ov-qrcode");
    qrcodeContainer.innerHTML = '<div class="qr-watermark"></div>';

    if (type === 'whatsapp') {
        var number = document.getElementById("ov-whatsapp-number").value.trim();
        var message = document.getElementById("ov-whatsapp-message").value.trim();
        if (!number) {
            showWarning('Por favor, ingresa un número de WhatsApp.');
            return;
        }
        text = `https://wa.me/${number}?text=${encodeURIComponent(message)}`;
    } else if (type === 'vcard') {
        text = generateVCard();
        if (!text) {
            showWarning('Por favor, completa al menos el nombre en la vCard.');
            return;
        }
    } else if (type === 'wifi') {
        var ssid = document.getElementById("ov-wifi-ssid").value.trim();
        var encryption = document.getElementById("ov-wifi-encryption").value;
        var password = document.getElementById("ov-wifi-password").value.trim();

        if (!ssid) {
            showWarning('Por favor, ingresa el nombre de la red WiFi.');
            return;
        }

        if (encryption !== 'nopass' && !password) {
            showWarning('Por favor, ingresa la contraseña de la red WiFi.');
            return;
        }

        text = `WIFI:T:${encryption};S:${ssid};P:${password};H:false;;`;
    } else {
        text = document.getElementById("ov-qr-text").value.trim();
        if (text === '') {
            showWarning('Por favor, ingresa un texto antes de generar el código QR.');
            return;
        }
    }

    var finalText = text;
    switch(type) {
        case "url":
            if (!text.startsWith("http://") && !text.startsWith("https://")) {
                finalText = "https://" + text;
            }
            break;
        case "email":
            finalText = "mailto:" + text;
            break;
        case "tel":
            finalText = "tel:" + text;
            break;
        case "sms":
            finalText = "sms:" + text;
            break;
    }

    new QRCode(qrcodeContainer, {
        text: finalText,
        width: 512,
        height: 512,
        colorDark: currentColor,
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    qrcodeContainer.style.maxWidth = '280px';
    qrcodeContainer.style.maxHeight = '280px';

    qrcodeContainer.querySelector('.qr-watermark').style.display = 'none';

    var downloadButton = document.querySelector('.descargar-qr');
    downloadButton.textContent = 'Descargar QR';
}

function handleQRDownload() {
    downloadQR();
}

function downloadQR() {
    var qrCodeDiv = document.getElementById("ov-qrcode");
    var canvas = qrCodeDiv.querySelector("canvas");
    if (!canvas) {
        showWarning('Por favor, genera un código QR antes de intentar descargarlo.');
        return;
    }

    var padding = 20;
    var newCanvas = document.createElement('canvas');
    var ctx = newCanvas.getContext('2d');
    newCanvas.width = canvas.width + padding * 2;
    newCanvas.height = canvas.height + padding * 2;

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);

    ctx.drawImage(canvas, padding, padding);

    var link = document.createElement('a');
    link.download = 'ov-qrcode.png';
    link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    link.click();
}

document.querySelector('.descargar-qr').onclick = handleQRDownload;
</script>