let activeForm = null; // Mover activeForm fuera del scope de la función

    let activeTd = null;



    document.querySelectorAll('.activate-edit').forEach(td => {

        const span = td.querySelector('span');

        const img = td.querySelector('img');

        const obj = td.querySelector('object');

        const video = td.querySelector('video');

        const form = td.querySelector('form');

        //const input = td.querySelector('input[type="text"]');

        const input = td.querySelector('input[type="text"],input[type="time"],input[type="datetime-local"],input[type="week"],input[type="date"], input[type="tel"], input[type="email"],input[type="number"], input[type="radio"], input[type="checkbox"], select, textarea');

        const fileInput = td.querySelector('input[type="file"]');



        const inputElementType = td.querySelector('input[type="hidden"][name="Type"]');

        const inputElementTypeValue=inputElementType ? inputElementType.value : null;



        // Función para mostrar el formulario

        function showForm() {

            if (activeForm && activeForm !== form) {

                

                hideForm(activeForm);

            }

            hideContent();

            form.style.display = 'flex';

            // input.focus();

            activeForm = form;

            if (input) {

                input.focus(); // Set focus to the selected input element

                const length = input.value.length; // Obtiene la longitud del texto

                input.setSelectionRange(length, length);

            }

        }



        function restoreOriginalData(td) {

            

            const inputElementType = td.querySelector('input[type="hidden"][name="Type"]');

            const inputElementTypeValue=inputElementType ? inputElementType.value : null;

            const inputElementNumero = td.querySelector('input[type="hidden"][name="Numero"]');

            const inputElementNumeroValue=inputElementNumero ? inputElementNumero.value : null;

            const inputElementField = td.querySelector('input[type="hidden"][name="Field"]');

            const inputElementFieldValue = inputElementField ? inputElementField.value : null;

            const inputElementVH = td.querySelector('input[type="hidden"][name="Value_Hidden"]');

            const inputElementVHValue = inputElementVH ? inputElementVH.value : null;

            const inputElementId = td.querySelector('input[type="hidden"][name="Id_Reg_Update_Front"]');

            const inputElementIdValue = inputElementId ? inputElementId.value : null;



            // Restaurar la imagen, video o documento original según el tipo de campo

            if (inputElementTypeValue=='imagen') {

                cancelImageEdit(inputElementIdValue, inputElementVHValue, inputElementNumeroValue);

            } else if (inputElementTypeValue=='video') {

                cancelVideoEdit(inputElementIdValue, inputElementVHValue, inputElementFieldValue);

            } else if (inputElementTypeValue=='documento') {

                cancelObjEdit(inputElementIdValue, inputElementVHValue, inputElementFieldValue);

            }



            const fileInput = td.querySelector('input[type="file"]');

            if (fileInput) {

                fileInput.value = "";

            }

        }



        // Función para ocultar el formulario

        function hideForm(formToHide = form) {

            showContent(formToHide);

            formToHide.style.display = 'none';



            if (formToHide === activeForm) {

                activeForm = null;

            }

        }



        // Función para ocultar el contenido según el tipo de elemento

        function hideContent() {

            if (span) span.style.display = 'none';

            if (video) video.style.display = 'none';

        }



        // Función para mostrar el contenido según el tipo de elemento

        function showContent(formToShow = form) {

            const associatedTd = formToShow.closest('.activate-edit');

            const associatedSpan = associatedTd.querySelector('span');

            const associatedImg = associatedTd.querySelector('img');

            const associatedObj = associatedTd.querySelector('object');

            const associatedVideo = associatedTd.querySelector('video');



            if (associatedSpan) associatedSpan.style.display = 'block';

            if (associatedImg) associatedImg.style.display = 'block';

            if (associatedObj) associatedObj.style.display = 'block';

            if (associatedVideo) associatedVideo.style.display = 'flex';

        }



        // Doble clic para alternar entre mostrar y ocultar el formulario

        td.addEventListener('dblclick', () => {

            if (activeTd && activeTd !== td) {

                restoreOriginalData(activeTd);

            }

            activeTd = td;



            if (form.style.display === 'block') {

                hideForm(activeForm);

            } else {

                showForm();

            }

        });



        // F2 para editar

        td.addEventListener('keydown', function(event) {

            if (event.key === 'F2') {

                if (activeTd && activeTd !== td) {

                    restoreOriginalData(activeTd);

                }

                activeTd = td;

                showForm();

            }

        });



        // Esc para cancelar

        td.addEventListener('keydown', function(event) {

            if (event.key === 'Escape') {

                if (activeTd) {

                    restoreOriginalData(activeTd);

                }

                activeTd = null;

                hideForm(activeForm);

            }

        });



        // Guardar cambios y ocultar el formulario al enviar el formulario

        form.addEventListener('submit', function(event) {

            event.preventDefault();



            if (!img && !video && !obj){

                if (span) {

                    const elementType = form.querySelector('input[type="hidden"][name="Type"]');

                    const elementTypeValue=elementType ? elementType.value : null;

                    if(elementTypeValue=='whatsapp'){

                        span.innerHTML = "<a href=\"https://wa.me/"+ input.value +"?text=\"  target=\"_blank\" style='display:flex;align-content: center;align-items: center;'><i class=\"fab fa-whatsapp\" style=\"font-size:18px;margin-right:0.5rem;\"></i>"+ input.value +"</a>";

                    }else if(elementTypeValue=='tel'){

                        span.innerHTML = "<a href=\"tel:"+ input.value +"\" style=\'display:flex;align-content: center;align-items: center;\'><i class=\"fa fa-phone\" style=\"font-size:18px;margin-right:0.5rem;\"></i>"+ input.value +"</a>";

                    }else if(elementTypeValue=='email'){

                        span.innerHTML = "<a href=\"mailto:"+ input.value +"?subject=\" style=\'display:flex;align-content: center;align-items: center;\'><i class=\"fas fa-envelope\" style=\"font-size:18px;margin-right:0.5rem;\"></i>"+ input.value +"</a>";

                    }else if(elementTypeValue=='moneda'){

                        span.textContent = formatCurrency(input.value);

                        //span.textContent = "$" + formatNumber(input.value);

                    }else if(elementTypeValue=='edad'){

                        span.textContent = calculateAge(input.value) + " años";

                    }else if(elementTypeValue=='number'){

                        span.textContent = formatNumber(input.value);

                    }else{

                        span.textContent = input.value;

                    }

                }

            }

            setTimeout(() => {

                form.submit(); // Submit the form normally

            }, 0);

            hideForm(form);

        });



        // Si haces clic en otro lugar en la página (fuera de los elementos con clase .activate-edit), oculta el formulario activo

        document.addEventListener('click', function(event) {

            if (activeForm && !event.target.closest('.activate-edit')) {

                hideForm(activeForm);

            }

        });

        

    });











     function updateVideoPreview(input,id,field) {

        if (input.files && input.files[0]) {

            const videoContainer = document.getElementById(field + '_vc' + id);

            // Limpia el contenido del contenedor antes de agregar el nuevo video

            videoContainer.innerHTML = '';

            

            const videoElement = document.createElement('video');

            videoElement.id = 'blah_vc' + id;

            videoElement.style.width = '100%';

            videoElement.style.height = '100%';

            videoElement.style.borderRadius = '100%';

            videoElement.autoplay = true;

            videoElement.muted = true;

            videoElement.loop = true;

            

            // Asigna la URL del archivo seleccionado al elemento de video

            videoElement.src = URL.createObjectURL(input.files[0]);

            

            // Añade el video al contenedor

            videoContainer.appendChild(videoElement);



            // Libera la URL del objeto después de cargar el video

            videoElement.onloadeddata = function() {

                URL.revokeObjectURL(videoURL); // Esto libera la memoria ocupada por la URL del objeto

            };

        }

    }



    function updateImagePreview(input, id, numero) {

        if (input.files && input.files[0]) {

            const imgElement = document.getElementById('zoomImage' + id + numero );

            // Asigna la URL del archivo seleccionado al atributo src del elemento de imagen existente

            const imgURL = URL.createObjectURL(input.files[0]);

            imgElement.src = imgURL;



            // Libera la URL del objeto después de cargar la imagen

            imgElement.onload = function() {

                URL.revokeObjectURL(imgURL); // Esto libera la memoria ocupada por la URL del objeto

            };

        }

    }





    function updatePDFPreview(input, id, field) {

    // Obtener el archivo seleccionado

    var file = input.files[0];

    

    if (file) {

        // Crear una URL de objeto para el archivo seleccionado

        var fileURL = URL.createObjectURL(file);



        // Actualizar el objeto en el HTML con la nueva URL

        var objectElement = document.getElementById(field + '_doc' + id);

        if (objectElement) {

            objectElement.data = fileURL;

        }

    }

}



function cancelVideoEdit(inputElementIdValue,inputElementVHValue,inputElementFieldValue){

    const videoContainer = document.getElementById(inputElementFieldValue + '_vc' + inputElementIdValue);

    if (videoContainer) {

        const videoElement = videoContainer.querySelector('video');

        if (videoElement) {

            //videoElement.src = inputElementVHValue;

            videoElement.src = inputElementVHValue && inputElementVHValue.trim() !== ""

                ? inputElementVHValue

                : ''; // Ruta a tu video por defecto

        }

    }

}



function cancelImageEdit(inputElementIdValue,inputElementVHValue,inputElementNumeroValue){

    const imageElement = document.getElementById('zoomImage' + inputElementIdValue + inputElementNumeroValue);

    if (imageElement) {

        //imageElement.src = inputElementVHValue;

        imageElement.src = inputElementVHValue && inputElementVHValue.trim() !== ""

            ? inputElementVHValue

            : '../../../dist/images/upload.gif'; // Ruta a tu imagen por defecto

    }

}       



function cancelObjEdit(inputElementIdValue,inputElementVHValue,inputElementFieldValue){

    const objElement = document.getElementById(inputElementFieldValue + '_doc' + inputElementIdValue);

    if (objElement) {

        objElement.data = inputElementVHValue;

    }

}



function formatCurrency(value) {

    return new Intl.NumberFormat('es-MX', {

        style: 'currency',

        currency: 'MXN' 

    }).format(value);

}



function calculateAge(birthDate) {

    const today = new Date(); 

    const birthDateObj = new Date(birthDate); 

    let age = today.getFullYear() - birthDateObj.getFullYear(); // Calcular la diferencia de años

    const monthDiff = today.getMonth() - birthDateObj.getMonth();



    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDateObj.getDate())) {

        age--;

    }



    return age;

}



function formatNumber(value) {

    const numericValue = parseFloat(value);

    

    const hasDecimals = value.includes('.');

    const formatter = new Intl.NumberFormat('en-US', {

        style: 'decimal',

        minimumFractionDigits: hasDecimals ? 2 : 0,

        maximumFractionDigits: hasDecimals ? 2 : 0,

    });

    return formatter.format(numericValue);

}





//agregarmos nuevo codigo para la funcion de eliminar archivo 

document.addEventListener("DOMContentLoaded", () => {

  document.querySelectorAll("td.activate-edit").forEach(td => {

    const inputFile = td.querySelector("input[type='file']");

    if (!inputFile) return;



    // Crear botón de eliminar

    const btn = document.createElement("button");

    btn.type = "button";

    btn.className = "delete-media-UI";

                btn.innerHTML = `

                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 

                       fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 

                       stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2">

                    <path d="M10 11v6"/>

                    <path d="M14 11v6"/>

                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>

                    <path d="M3 6h18"/>

                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>

                  </svg>

                `;



    btn.style.clear = "both";

    btn.style.display = "none";

    btn.style.borderRadius = "5px";

    inputFile.parentNode.appendChild(btn);



    inputFile.addEventListener("change", () => {

      btn.style.display = inputFile.files.length ? "inline-block" : "none";

    });



    btn.addEventListener("click", () => {

      inputFile.value = "";

      btn.style.display = "none";



      // Restaurar vista previa según el tipo (imagen, video o documento)

      const type = td.querySelector("input[name='Type']").value;

      const valueHiddenInput = td.querySelector("input[name='Value_Hidden']");

      const valueHidden = td.querySelector("input[name='Value_Hidden']").value;

      if (type === "imagen") {

        const img = td.querySelector("img");

        //img.src = valueHidden || "../../../dist/images/upload.gif";

        img.src = "../../../dist/images/upload.gif";

        valueHiddenInput.value='';

      } else if (type === "video") {

        const video = td.querySelector("video");

        //video.src = valueHidden || "";

        video.src = "";

        valueHiddenInput.value='';

      } else if (type === "documento") {

        const obj = td.querySelector("object");

        //obj.data = valueHidden || "";

        obj.data = "";

        valueHiddenInput.value='';

      }

      // limpia campo hidden si es necesario

      td.querySelector("input[name='Value_Hidden']").value = "";

      //showToast("Archivo eliminado correctamente.");



        /**/

        inputFile.removeAttribute("required");

        const form = td.closest("form");

        if (form) form.submit();

        /**/

    });



    // Mostrar el botón si ya hay contenido al iniciar

    const vh = td.querySelector("input[name='Value_Hidden']").value;

    if (vh && vh.trim() !== "") btn.style.display = "inline-block";

    

  });

});

