jQuery( "form.webform-submission-form" ).on( "submit", function( event ) {
  let btn = jQuery("input.webform-button--submit");
  btn.addClass('form-btn-disable');
});
const formulario = document.querySelector('form[id^="webform-submission-formulario-otras-consultas"]');
if (formulario) {
    let selectEditTemaHasChanged = false; // Bandera para controlar la validación del select tema luego del primer cambio
    let selectEditTipoHasChanged = false; // Bandera para controlar la validación del select tipo de documento luego del primer cambio
    let inputTHasChanged = false; // Bandera para controlar la validación
    let inputTfHasChanged = false; // Bandera para controlar la validación

    const targetNode = document.querySelector('#block-mainpagecontent');// Selecciona el elemento que quieres observar usando querySelector
    // Configura las opciones del observador (qué tipos de cambios observar)
    const config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true,
        attributeOldValue: true,
    };

    // Callback que se ejecuta cuando se detecta un cambio
    const callback = function (mutationsList, observer) {
        for (const mutation of mutationsList) {
            const form = document.querySelector('form[id^="webform-submission-formulario-otras-consultas"]');
            if (mutation.target === form) {
                const pasoUno = document.querySelector('[id^="edit-paso-1"]');
                if (pasoUno) {
                    addTextInputFile();
                    let inputMensaje = document.querySelector('textarea[name="motivo"]');
                    let value = inputMensaje.value;
                    if (value.length > 0) {
                        inputMensaje.classList.remove('error');
                        removeError(inputMensaje);
                    }
                    eventInputs();
                    errorInputUpload();
                } else {
                    eventInputs();
                }
                initializeProgress();

                // Modal - cierra el modal que se abre automatico para que se vea solo al cargar la página la primera vez 
                const modal = document.querySelector("#js-modal-page-show-modal.modal-webform-alert.show");
                if (modal) {
                    cerrarModal();
                }
            } else {
                const pasoUno = document.querySelector('[id^="edit-paso-1"]');
                if (pasoUno) {
                    // input file eliminar individual
                    const wrapperUpload = document.querySelector('.form-item-documento-adjunto .form-managed-file');
                    var uploadWrapper = document.querySelector('[id^="edit-flexbox-05"] [id^="ajax-wrapper"]').parentElement;
                    var wrapper = document.querySelector('[id^="edit-flexbox-05"] [id^="ajax-wrapper"]').parentElement.parentElement;
                    if (mutation.target === wrapperUpload || mutation.target === uploadWrapper || mutation.target === wrapper) {
                        eventInputs();
                        errorInputUpload();
                    }

                    const spanElement = document.querySelector('[id^="select2-edit-tema"]');
                    // Verificar si el cambio fue en el atributo 'title' del select tema
                    if (mutation.type === 'attributes' && mutation.attributeName === 'title' && mutation.target === spanElement) {
                        const newTitleValue = spanElement.getAttribute('title');
                        if (newTitleValue !== '- Seleccionar -') {
                            spanElement.closest('.select2').classList.remove('error');
                            spanElement.closest('.select2').parentElement.querySelector('select').classList.remove('error');
                            var description = spanElement.closest('.select2').parentElement.querySelector('.description-error');
                            if (description) {
                                description.remove();
                            }
                        }
                    }
                    addTextInputFile();
                } else {
                    const spanElement = document.querySelector('[id^="select2-edit-tipo-de-documento"]');
                    // Verificar si el cambio fue en el atributo 'title' del select tipo de documento
                    if (mutation.type === 'attributes' && mutation.attributeName === 'title' && mutation.target === spanElement) {
                        validateDocumento();
                        const newTitleValue = spanElement.getAttribute('title');
                        if (newTitleValue !== '- Seleccionar -') {
                            spanElement.closest('.select2').classList.remove('error');
                            spanElement.closest('.select2').parentElement.querySelector('select').classList.remove('error');
                            var description = spanElement.closest('.select2').parentElement.querySelector('.description-error');
                            if (description) {
                                description.remove();
                            }
                        }
                    }
                }
            }
        }
    };

    // Crea una instancia de MutationObserver y pasa el callback
    const observer = new MutationObserver(callback);

    // Crea la barra de progreso
    function addProgressBar() {
        if (!document.querySelector('.progress')) {
            var trackerElement = document.querySelector('.webform-progress-tracker');
            if (!trackerElement) return;
            var progressDiv = document.createElement('div');
            progressDiv.className = 'progress';
            var progressBarDiv = document.createElement('div');
            progressBarDiv.className = 'progress-bar';
            progressDiv.appendChild(progressBarDiv);
            trackerElement.parentNode.insertBefore(progressDiv, trackerElement.nextSibling);
            // Crear el elemento <p> para mostrar el número de paso
            var numStepsParagraph = document.createElement('p');
            numStepsParagraph.className = 'num-steps';
            progressDiv.parentNode.insertBefore(numStepsParagraph, progressDiv);
        }
    }

    // Actualiza la barra de progreso y el numSteps actual
    function updateProgress() {
        const progressListItems = document.querySelectorAll(".webform-progress-tracker li");
        const progressBar = document.querySelector(".progress-bar");
        const numStepsParagraph = document.querySelector(".num-steps");
        let totalSteps = progressListItems.length;
        let completedSteps = 0;
        let currentStep = 0;
        progressListItems.forEach((item) => {
            if (item.classList.contains("is-complete") || item.classList.contains("is-active")) {
                completedSteps++;
                currentStep++;
            }
        });
        numStepsParagraph.textContent = 'Paso ' + currentStep + ' de ' + totalSteps;
        let percent = (completedSteps / totalSteps) * 100;
        if (completedSteps === totalSteps) {
            percent = 95;
        }
        progressBar.style.width = percent + "%";
    }

    function initializeProgress() {
        addProgressBar();
        updateProgress();
        // Desactiva el observador temporalmente para evitar bucles infinitos
        observer.disconnect();
        const nextStepButtons = document.querySelectorAll(".webform-button--next");
        nextStepButtons.forEach((button) => {
            button.addEventListener("click", () => {
                observer.observe(targetNode, config);
            });
        });
        const prevStepButtons = document.querySelectorAll(".webform-button--previous");
        prevStepButtons.forEach((button) => {
            button.addEventListener("click", () => {
                observer.observe(targetNode, config);
            });
        });
        // Reactiva el observador
        observer.observe(targetNode, config);
    }

    // añade texto al input file
    function addTextInputFile() {
        const pasoUno = document.querySelector('[id^="edit-paso-1"]');
        if (pasoUno) {
            // Verificar el inputfile ya no se haya añadido
            const inputFile = document.querySelector('.form-file.form__input');
            const A = document.querySelector('.form-card .form-item-documento-adjunto .description+.form-text-upload');
            const formInput = document.querySelector('.form-card .form-item-documento-adjunto .description');
            if (inputFile && !A) {
                var before = document.querySelector('.form-card .form-item-documento-adjunto .form-managed-file');
                before.classList.add('input-before');
                const div = document.createElement('div');
                div.classList.add('form-text-upload');
                div.innerHTML = '<p class="form-text-prefix">Arrastra aquí tus archivos o </p><span class="form-link">busca aquí</span><p class="form-link">Subir archivos</p>';
                formInput.parentNode.insertBefore(div, formInput.nextSibling);
            }
            if (!inputFile && formInput) {
                formInput.style.display = "none";
            }
        }
    }

    function errorInputUpload() {
        const pasoUno = document.querySelector('[id^="edit-paso-1"]');
        if (pasoUno) {
            let inputFile = document.querySelector('.form-item.form-type-managed-file');
            let error = inputFile.parentElement.querySelector('.site__messages');
            let wrapper = inputFile.parentElement;
            let inputFile2 = document.querySelector('.form-item.form-type-managed-file .form-managed-file');
            let error2 = inputFile2.querySelector('.messages--error');  // error
            if (error && !wrapper.classList.contains('flex-column') && !error2) {
                wrapper.classList.add('d-flex');
                wrapper.classList.add('flex-column');
                error.innerHTML = '<div class="description-error">Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.</div>';
                error.style.marginTop = "16px";
                error.style.order = "1";
            } else if (!error && wrapper.classList.contains('flex-column')) {
                wrapper.classList.remove('d-flex');
                wrapper.classList.remove('flex-column');
            }
            if (error2 && !inputFile2.classList.contains('flex-column') && !error) {
                inputFile2.classList.add('d-flex');
                inputFile2.classList.add('flex-column');
                error2.innerHTML = '<div class="description-error">Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.</div>';
                error2.style.marginTop = "16px";
                error2.style.order = "1";
            } else if (!error2 && inputFile2.classList.contains('flex-column')) {
                inputFile2.classList.remove('d-flex');
                inputFile2.classList.remove('flex-column');
            }
            if (error && error2 && !error2.classList.contains('d-none')) {
                wrapper.classList.add('d-flex');
                wrapper.classList.add('flex-column');
                error2.classList.add('d-none');
                error.innerHTML = '<div class="description-error">Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.</div>';
                error.style.marginTop = "16px";
                error.style.order = "1";
            }
            if (error && error.textContent !== "Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.") {
                error.innerHTML = '<div class="description-error">Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.</div>';
                error.style.marginTop = "16px";
                error.style.order = "1";
            }
            if (error2 && error2.textContent !== "Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.") {
                error2.innerHTML = '<div class="description-error">Asegúrate de no adjuntar más de 3 archivos, de que su formato sea jpg, pdf o png y de que ninguno supere los 4 MB.</div>';
                error2.style.marginTop = "16px";
                error2.style.order = "1";
            }
        }
    }

    // valida los inputs 
    function validateInput(inputElement, errorMessage) {
        const value = inputElement.value.trim();
        let regex;

        if (inputElement.id.startsWith('edit-nombre') || inputElement.id.startsWith('edit-apellidos-razon-social')) {
            regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s']+$/i;
        } else if (inputElement.id.startsWith('edit-email')) {
            regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/i;
        } else if (inputElement.id.startsWith('edit-telefono-movil')) {
            regex = /^\+34\s?[67](\s?\d){8}$|^\+(?!34)[1-9](?:\s?\d){7,14}$/;
        } else if (inputElement.id.startsWith('edit-telefono-fijo')) {
            regex = /^\+34\s?[89](\s?\d){8}$|^\+(?!34)[1-9](?:\s?\d){7,14}$/;
        } else {
            regex = null;
        }

        if (!regex || value.startsWith(' ') || !regex.test(value)) {
            if (inputElement.id.startsWith('edit-telefono') && value.length > 3) {
                inputElement.classList.add('error');
                showError(inputElement, errorMessage);
            } else if (!inputElement.id.startsWith('edit-telefono') && value.length > 0) {
                inputElement.classList.add('error');
                showError(inputElement, errorMessage);
            }
        } else {
            inputElement.classList.remove('error');
            removeError(inputElement);
        }
        if (value === "") {
            inputElement.classList.remove('error');
            removeError(inputElement);
        }
    }

    // añade eneventos a los inputs
    function eventInputs() {
        const pasoUno = document.querySelector('[id^="edit-paso-1"]');
        const pasoDos = document.querySelector('[id^="edit-paso-2"]');
        if (pasoUno) {
            var inputlist = document.querySelectorAll('.form-item-documento-adjunto .form-managed-file .form-type-checkbox input');
            inputlist.forEach((item) => {
                item.addEventListener('click', () => {
                    item.checked = true;
                    let removeButton = document.querySelector('input[name="documento_adjunto_remove_button"]');
                    if (removeButton) {
                        // Crea un nuevo evento de tipo 'mousedown'
                        var evento = new MouseEvent('mousedown', {
                            'view': window,
                            'bubbles': true,
                            'cancelable': true
                        });
                        removeButton.dispatchEvent(evento);
                    }
                });
                item.addEventListener('keydown', (event) => {
                    if (event.key === ' ' || (event.key === 'Enter')) {
                        item.checked = true;
                        let removeButton = document.querySelector('input[name="documento_adjunto_remove_button"]');
                        if (removeButton) {
                            // Crea un nuevo evento de tipo 'mousedown'
                            var evento = new MouseEvent('mousedown', {
                                'view': window,
                                'bubbles': true,
                                'cancelable': true
                            });
                            removeButton.dispatchEvent(evento);
                        }
                    }
                });
            });
        }
        if (pasoDos) {
            const inputNombre = document.querySelector('input[name="nombre"]');
            const inputApellidosRazonSocial = document.querySelector('input[name="apellidos_razon_social"]');
            const inputEmail = document.querySelector('input[name="email"]');
            const inputTelefonoMovil = document.querySelector('input[name="telefono_movil"]');
            const inputTelefonoFijo = document.querySelector('input[name="telefono_fijo"]');
            const inputDocumento = document.querySelector('input[name="numero_documento"]');

            // Añadir event listeners a los inputs
            inputNombre.addEventListener('input', function () {
                validateInput(inputNombre, 'Formato incorrecto.');
            });
            inputApellidosRazonSocial.addEventListener('input', function () {
                validateInput(inputApellidosRazonSocial, 'Formato incorrecto.');
            });
            inputEmail.addEventListener('blur', function () {
                validateInput(inputEmail, 'Email incorrecto. El formato correcto es tucorreo@tucorreo.com');
            });
            inputTelefonoMovil.addEventListener('blur', function () {
                inputTHasChanged = true;
                validateInput(inputTelefonoMovil, 'Teléfono incorrecto. El formato debe contener 9 dígitos y el prefijo del país.');
            });
            inputTelefonoFijo.addEventListener('blur', function () {
                inputTfHasChanged = true;
                validateInput(inputTelefonoFijo, 'Teléfono incorrecto. El formato debe contener 9 dígitos y el prefijo del país.');
            });
            inputDocumento.addEventListener('input', validateDocumento);

            // Añadir los event listeners
            inputTelefonoMovil.addEventListener('focus', handleFocus);
            inputTelefonoMovil.addEventListener('blur', handleBlur);

            inputTelefonoFijo.addEventListener('focus', handleFocus);
            inputTelefonoFijo.addEventListener('blur', handleBlur);
        }
    }

    // valida el input tipo de documento en función de la selección en tipo de documento 
    function validateDocumento() {
        const spanElement = document.querySelector('[id^="select2-edit-tipo-de-documento"]');
        const selectedValue = spanElement.getAttribute('title');
        const inputDocumento = document.querySelector('input[name="numero_documento"]');
        const value = inputDocumento.value.trim();
        if (value.length > 8) {
            let isValid = false;
            switch (selectedValue) {
                case 'NIF':
                    isValid = validateNIF(value);
                    break;
                case 'CIF':
                    isValid = validateCIF(value);
                    break;
                case 'Tarjeta de Residente':
                    isValid = validateNIE(value);
                    break;
                case 'Pasaporte':
                    isValid = validatePasaporte(value);
                    break;
                default:
                    isValid = false;
            }

            if (!isValid) {
                inputDocumento.classList.add('error');
                showError(inputDocumento, 'Documento incorrecto. Debe contener todos los números y la letra.');
                // Añadir la clase 'd-none' al hermano con clase 'description'
                const siblingDescription = inputDocumento.parentElement.querySelector('.description');
                if (siblingDescription) {
                    siblingDescription.classList.add('d-none');
                }
            } else {
                inputDocumento.classList.remove('error');
                removeError(inputDocumento);
            }
        }
    }

    // validación NIF (9 caracteres)
    function validateNIF(nif) {
        const nifPattern = /^[0-9]{8}[a-z]$/i;
        if (!nifPattern.test(nif)) return false;

        const letras = 'TRWAGMYFPDXBNJZSQVHLCKE';
        const numero = nif.substr(0, 8);
        const letra = nif.substr(8, 1).toUpperCase();
        const expectedLetter = letras.charAt(parseInt(numero, 10) % 23);

        return letra === expectedLetter;
    }

    // validación CIF (9 caracteres)
    function validateCIF(cif) {
        const cifPattern = /^[A-HJ-NP-SUVW][0-9]{7}[0-9A-J]$/i;
        if (!cifPattern.test(cif)) return false;

        const letter = cif.charAt(0).toUpperCase();
        const numbers = cif.substr(1, 7);
        const control = cif.substr(8, 1).toUpperCase();

        let sumA = 0, sumB = 0;

        for (let i = 0; i < 7; i++) {
            const digit = parseInt(numbers[i], 10);
            if (i % 2 === 0) {
                const prod = digit * 2;
                sumB += Math.floor(prod / 10) + (prod % 10);
            } else {
                sumA += digit;
            }
        }

        const totalSum = sumA + sumB;
        const controlDigit = (10 - (totalSum % 10)) % 10;
        const controlLetter = 'JABCDEFGHI'.charAt(controlDigit);

        if (/[ABEH]/.test(letter)) {
            return control === controlDigit.toString();
        } else if (/[KPQS]/.test(letter)) {
            return control === controlLetter;
        } else {
            return control === controlDigit.toString() || control === controlLetter;
        }
    }

    // validación NIE - Tarjeta de residente (9 caracteres)
    function validateNIE(nie) {
        const niePattern = /^[xyz][0-9]{7}[a-z]$/i;
        if (!niePattern.test(nie)) return false;

        let niePrefix = nie.charAt(0).toUpperCase();
        if (niePrefix === 'X') {
            niePrefix = '0';
        } else if (niePrefix === 'Y') {
            niePrefix = '1';
        } else if (niePrefix === 'Z') {
            niePrefix = '2';
        }

        const nifEquivalent = niePrefix + nie.substr(1);
        return validateNIF(nifEquivalent);
    }

    // validación pasaporte (10 caracteres)
    function validatePasaporte(pasaporte) {
        const pasaportePattern = /^[a-z0-9]{10}$/i;
        return pasaportePattern.test(pasaporte);
    }

    // Función que añade +34 en focus y quita +34 en blur si está vacío
    function handleFocus(event) {
        if (event.target.value === '') {
            var bandera = event.target.parentElement.querySelector('.iti__flag-container .iti__selected-flag');
            var titleText = bandera.getAttribute('title');
            var prefix = titleText.match(/:\s(\+\d+)/)[1];
            event.target.value = prefix;
            var inputElement = event.target;
            inputElement.classList.remove('error');
            removeError(inputElement);
        }
    }

    function handleBlur(event) {
        if (/^\+\d{0,3}$/.test(event.target.value) || /^.{0,3}$/.test(event.target.value)) {
            event.target.value = '';
            var inputElement = event.target;
            inputElement.classList.remove('error');
            removeError(inputElement);
        }
    }

    // añade un mensaje de error
    function showError(inputElement, errorMessage) {
        let description = inputElement.nextElementSibling;
        if (inputElement.id.startsWith('edit-telefono-movil') || inputElement.id.startsWith('edit-telefono-fijo')) {
            description = inputElement.parentElement.nextElementSibling;
        }

        if (!description || !description.classList.contains('description-error')) {
            description = document.createElement('div');
            description.classList.add('description-error');
            if (inputElement.id.startsWith('edit-telefono-movil') || inputElement.id.startsWith('edit-telefono-fijo')) {
                inputElement.parentElement.parentNode.insertBefore(description, inputElement.parentElement.nextElementSibling);
            } else {
                inputElement.parentNode.insertBefore(description, inputElement.nextSibling);
            }
        }
        description.innerHTML = errorMessage;
        // Añadir la clase 'd-none' al hermano con clase 'description'
        const siblingDescription = inputElement.parentElement.querySelector('.description');
        if (siblingDescription) {
            siblingDescription.classList.add('d-none');
        }
    }

    // remueve el mensaje de error
    function removeError(inputElement) {
        let description = inputElement.nextElementSibling;
        if (inputElement.id.startsWith('edit-telefono-movil') || inputElement.id.startsWith('edit-telefono-fijo')) {
            description = inputElement.parentElement.nextElementSibling;
        }

        if (description && description.classList.contains('description-error')) {
            description.parentNode.removeChild(description);
        }
        const siblingDescription = inputElement.parentElement.querySelector('.description');
        if (siblingDescription) {
            siblingDescription.classList.remove('d-none');
        }
    }

    // cierra el modal para que no se abra en los siguientes steps
    function cerrarModal() {
        const modal = document.querySelector('#js-modal-page-show-modal.show');
        if (modal) {
            const modalButton = modal.querySelector('button.js-modal-page-ok-button');
            const modalBackdrop = document.querySelector('.modal-backdrop');
            const body = document.querySelector('body.modal-open');
            if (modalBackdrop) {
                modalBackdrop.classList.remove('modal-backdrop', 'fade');
            }
            modal.style.display = "none";
            modal.classList.remove('show');
            if (body) {
                body.style.overflow = "";
                body.style.paddingRight = "";
                body.classList.remove('modal-open');
            }
            if (modalButton) {
                modalButton.click();
                setTimeout(() => {
                    modalButton.click();
                }, 2);
            }
        }
    }

    // agregar el evento a la x del modal de apertura automatica
    function removeBackdropOnButtonClick() {
        const modalButton = document.querySelector('#js-modal-page-show-modal.modal-webform-alert button.js-modal-page-ok-button');
        if (modalButton) {
            modalButton.addEventListener('click', function () {
                modalButton.click();
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.classList.remove('modal-backdrop', 'fade');
                    document.querySelector("body").style.overflow = "";
                    document.querySelector("body").style.paddingRight = "0";
                }
            });
        }
    }
    removeBackdropOnButtonClick();

    addTextInputFile();
    initializeProgress();
}

// función collapsible para el accodeon del input file
function aCollapsible(event) {
    event.preventDefault();
    const href = event.currentTarget.getAttribute('href').substring(1); // Obtener el href sin el #
    const targetElement = document.querySelector(`[id^="${href}"]`);
    if (targetElement) {
        targetElement.classList.toggle('show');
    }
}

/* ------------------------ DATALAYER OTRAS CONSULTAS ------------------------------ */

// Función para recopilar datos del formulario
function collectFormData(form) {
    const formElements = form.elements;
    const formData = {};

    for (let element of formElements) {
        if (element.name) {
            if (element.tagName.toLowerCase() === 'select') {
                // Verificar que haya una opción seleccionada
                const selectedOption = element.options[element.selectedIndex];
                if (selectedOption) {
                    formData[element.name] = selectedOption.text;
                } else {
                    formData[element.name] = '';
                }
            } else {
                formData[element.name] = element.value;
            }
        }
    }

    return formData;
}

// Función para actualizar datos del formulario
function updateFormData(existingData, newData) {
    return { ...existingData, ...newData };
}

// Función para inicializar el objeto dataLayer con valores por defecto
function initializeDataLayer() {
    return {
        process_name: 'form_otras_consultas',
        process_type: 'formulario',
        process_step: 'step0 - Inicio proceso',
        process_status: 'null',
        process_selected: 'page_view',
        error_name: 'null',
        error_description: 'null',
        process_option_1: 'null',
        process_option_2: 'null',
    };
}

// Función para enviar datos al dataLayer
function sendDataToDataLayer(data) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: 'formulario',
        dimensions: data
    });
}

// Función de envio de datos al datalayer
Drupal.behaviors.webFormTracker = {
    attached: false,
    lastStep: null,
    confirmationShown: false,
    formData: {},

    attach: function (context) {
        let dataLayerObj = initializeDataLayer();

        const formWrapper = context.querySelector('.form-wrapper[data-webform-key]'); // Envoltorio de Formulario
        const confirmation = context.querySelector('.webform-confirmation'); // Confirmación de formulario enviado
        const btnSubmit = context.querySelector('input.webform-button--submit');
        const btnNext = context.querySelector('input.webform-button--next');
        const btnPrev = context.querySelector('input.webform-button--previous');

        if (btnNext && !btnNext.dataset.listenerAttached) {
            btnNext.dataset.listenerAttached = true; // Evita adjuntar el listener más de una vez

            const form = formWrapper.closest('form');
            btnNext.addEventListener("click", (event) => {
                event.preventDefault();
                this.formData = updateFormData(this.formData, collectFormData(form));
                const step = formWrapper.getAttribute('data-webform-key');
                if (step === 'paso_1' && this.lastStep !== step) {
                    if (!form.checkValidity()) {
                        let dataLayerObj = initializeDataLayer();
                        var numStep = step.replace(/[^\d]/g, '');
                        dataLayerObj.process_step = 'step' + numStep + ' - Motivo de consulta';
                        dataLayerObj.process_selected = 'continuar';
                        dataLayerObj.process_status = 'KO';
                        if (this.formData.tema) {
                            dataLayerObj.process_option_1 = this.formData.tema;
                        }
                        sendDataToDataLayer(dataLayerObj);
                    } else {
                        this.lastStep = step;
                        let dataLayerObj = initializeDataLayer();
                        var numStep = step.replace(/[^\d]/g, '');
                        dataLayerObj.process_step = 'step' + numStep + ' - Motivo de consulta';
                        dataLayerObj.process_selected = 'continuar';
                        dataLayerObj.process_status = 'OK';
                        if (this.formData.tema) {
                            dataLayerObj.process_option_1 = this.formData.tema;
                        }
                        sendDataToDataLayer(dataLayerObj);
                    }
                }
            });
        }

        if (btnSubmit && !btnSubmit.dataset.listenerAttached) {
            btnSubmit.dataset.listenerAttached = true; // Evita adjuntar el listener más de una vez

            const form = formWrapper.closest('form');
            btnSubmit.addEventListener("click", async (event) => {
                event.preventDefault();
                this.formData = updateFormData(this.formData, collectFormData(form));
                const step = formWrapper.getAttribute('data-webform-key');
                if (step === 'paso_2') {
                    let error = form.querySelector('.form__input.error');
                    if (!form.checkValidity() || error) {
                        dataLayerObj = initializeDataLayer();
                        var numStep = step.replace(/[^\d]/g, '');
                        dataLayerObj.process_step = 'step' + numStep + ' - Tus datos';
                        dataLayerObj.process_status = 'KO';
                        dataLayerObj.process_selected = 'enviar';
                        if (this.formData.tema) {
                            localStorage.setItem('formTema', this.formData.tema);
                            dataLayerObj.process_option_1 = this.formData.tema;
                        }
                        sendDataToDataLayer(dataLayerObj);
                    } else {
                        dataLayerObj = initializeDataLayer();
                        var numStep = step.replace(/[^\d]/g, '');
                        dataLayerObj.process_step = 'step' + numStep + ' - Tus datos';
                        dataLayerObj.process_status = 'OK';
                        dataLayerObj.process_selected = 'enviar';
                        if (this.formData.tema) {
                            localStorage.setItem('formTema', this.formData.tema);
                            dataLayerObj.process_option_1 = this.formData.tema;
                        }
                        sendDataToDataLayer(dataLayerObj);
                    }
                }
            });
        }

        // Inicializar dataLayer al cargar el formulario
        if (!this.attached && formWrapper) {
            this.attached = true;
            dataLayerObj = initializeDataLayer();
            dataLayerObj.process_step = 'step0 - Inicio proceso';
            sendDataToDataLayer(dataLayerObj);
        }

        // Envia información al cargar el step 2
        if (formWrapper) {
            const step = formWrapper.getAttribute('data-webform-key');
            if (step === 'paso_2' && this.lastStep !== step) {
                this.lastStep = step;
                let dataLayerObj = initializeDataLayer();
                var numStep = step.replace(/[^\d]/g, '');
                dataLayerObj.process_step = 'step' + numStep + ' - Tus datos';
                if (this.formData.tema) {
                    dataLayerObj.process_option_1 = this.formData.tema;
                }
                sendDataToDataLayer(dataLayerObj);
            }
        } else if (confirmation && !this.confirmationShown) {
            this.confirmationShown = true;
            dataLayerObj = initializeDataLayer();
            dataLayerObj.process_step = 'stepN - Proceso OK';
            dataLayerObj.process_status = 'OK';
            dataLayerObj.process_selected = 'page_view';
            const savedTema = localStorage.getItem('formTema'); // Recuperar de localStorage
            if (savedTema) {
                dataLayerObj.process_option_1 = savedTema;
            }
            sendDataToDataLayer(dataLayerObj);
        }
    }
};