window.onload = function() {
    // Crear el nuevo elemento div
    var nuevoDiv = document.createElement("div");

    // Añadir contenido HTML al div
    nuevoDiv.innerHTML = '<div id="div-chat-goleads" style="position: fixed; bottom: 8px; right: 20px; z-index: 2147483647; box-sizing: content-box; overflow: hidden; min-width: 318px; min-height: 135px;">    <div id="open-chat-goleads" class="desktop-closed-message-avatar" style="background: #92f519; display: flex; justify-content: center; position: absolute; bottom: 10px; right: 10px; height: 60px; width: 60px; border: 0px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; cursor: pointer; z-index: 1;">        <img id="img-chat-goleads" src="https://chatbot.goleads.ec/img/chat/chat-3.png" style="width: 100%; height: auto; border-radius: 999px; outline-offset: 0px; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);">    </div>    <div id="open-chat-whatsapp" class="desktop-closed-message-avatar" style="background: #57d163; display: none; justify-content: center; position: absolute; bottom: 10px; right: 10px; height: 60px; width: 60px; border: 0px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; cursor: pointer; z-index: 1;">        <a style="width: 100%" href="https://api.whatsapp.com/send/?phone=&text=&type=phone_number&app_absent=0" target="_blank">            <img id="img-wa-goleads" src="https://chatbot.goleads.ec/img/chat/whatsapp.svg" style="width: 100%; height: auto; border-radius: 999px; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);">                        </a>                    </div>    <div id="open-chat-goleads-options" class="desktop-closed-message-avatar" style="background: #92f519; display: none; justify-content: center; position: absolute; bottom: 10px; right: 10px; height: 60px; width: 60px; border: 0px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; cursor: pointer; z-index: 2;">        <img id="img-options-goleads" src="https://chatbot.goleads.ec/img/chat/chat-3.png" style="width: 100%; height: auto; border-radius: 999px; outline-offset: 0px; outline-color: #92f519; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);">    </div>                <div id="iframe-chat-goleads" style="display: none; z-index:2; position: relative; height: 40vh;">        <section style="height: 100%; background: none; padding: 0;">            <header style="display: flex; justify-content: space-between; padding: 10px; border-bottom: var(--border); background: #92f519; color: #FFFFFF; font-family: Lato, sans-serif; border-radius: 10px 10px 0 0; width: auto; height: auto; position: relative; z-index: 0;">                <div class="msger-header-title">                                                    <span class="chatWith">Camila</span>                </div>                <div id="close-iframe-goleads" class="msger-header-options">                    <img src="https://chatbot.goleads.ec/img/chat/close-icon.svg" style="width: 16px;">                </div>            </header>            <iframe id="iframe-goleads" src="" width="100%" frameborder="0" allowtransparency="true" style="background-color: transparent; height: calc(100% - 45px);" data-origwidth="100%" data-origheight="100%"></iframe>        </section>    </div></div>';


    // Añadir un id al div
    nuevoDiv.id = "chatGoleads";

    // Obtener una referencia al elemento del cuerpo (body)
    var body = document.body;

    // Añadir el nuevo div al final del cuerpo
    body.appendChild(nuevoDiv);

    // Mostrar las opciones
    var goleadsBan = 0;
    document.getElementById("open-chat-goleads-options").addEventListener("click", function(){
        if(goleadsBan){
            if (esDispositivoMovil()) {
                
                
            }else{
                
                
            }

            document.getElementById("open-chat-goleads").style.right = "10px";
            
            goleadsBan = 0;
            document.getElementById("img-options-goleads").src = "https://chatbot.goleads.ec/img/chat/chat-3.png";
            document.getElementById("img-options-goleads").style.width = "100%";                        
        }else{                        
            document.getElementById("open-chat-goleads").style.right = "74px";
            
            goleadsBan = 1;
            
            document.getElementById("img-options-goleads").src = "https://chatbot.goleads.ec/img/chat/close-icon.svg";
            document.getElementById("img-options-goleads").style.width = "60%";
            document.getElementById("img-options-goleads").style.outlineOffset = "-3px";
        }
        
    });

    // Mostrar el chat
    document.getElementById("open-chat-goleads").addEventListener("click", function(){
        document.getElementById("open-chat-goleads").style.display = "none";
        document.getElementById("iframe-chat-goleads").style.display = "block";
        
    });

    // Cerrar el chat
    document.getElementById("close-iframe-goleads").addEventListener("click", function(){
        document.getElementById("iframe-chat-goleads").style.display = "none";
        document.getElementById("open-chat-goleads").style.display = "block";
        
    });

    

    function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        let expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        let name = cname + "=";
        let ca = document.cookie.split(";");
        for(let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) == " ") {
            c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    if(getCookie("originWeb")==""){
        if(document.referrer==""){
            setCookie("originWeb", "pagina web", 1);
        }else{
            setCookie("originWeb", document.referrer, 1);
        }

    }

    // Seleccione el iframe por su id
    var iframe = document.getElementById("iframe-goleads");

    // Cambia la URL del iframe
    iframe.src = "https://chatbot.goleads.ec/chat/6234c685c2dc744469?origin="+encodeURIComponent(getCookie("originWeb"));

    if (esDispositivoMovil()) {

        
            // Mostrar el chat desde movil
    document.getElementById("open-chat-goleads").addEventListener("click", function(){                    
        document.getElementById("div-chat-goleads").style.bottom = "0";
        document.getElementById("div-chat-goleads").style.left = "0";
        document.getElementById("div-chat-goleads").style.right = "0";                    
    });

    document.getElementById("close-iframe-goleads").addEventListener("click", function(){
                            
        document.getElementById("div-chat-goleads").style.right = "20px";
        
    });
        
        document.getElementById("div-chat-goleads").style.bottom = "0";
        document.getElementById("open-chat-goleads").style.bottom = "10px";
        document.getElementById("open-chat-goleads-options").style.bottom = "10px";
        document.getElementById("open-chat-whatsapp").style.bottom = "10px";
        
        
        

    }else{
        setTimeout(function(){
    document.getElementById("open-chat-goleads").style.display = "none";
    document.getElementById("iframe-chat-goleads").style.display = "block";
    
}, 2*1000);
    }

    // Movimiento del botón
        document.getElementById("img-chat-goleads").style.outline = "2px solid #92f519";
        const imgChatGoleads = document.getElementById("img-chat-goleads");
        var imgSize = '6px';

        let intervalId;

        // Función para cambiar el estilo del botón
        function cambiarEstilo() {
            if(!goleadsBan){                            
                imgChatGoleads.style.outlineOffset = imgSize;
                imgSize = imgSize=='6px' ? '0px' : '6px';
            }
        }

        // Iniciar el cambio de estilo cada 1000 milisegundos (1 segundo)
        intervalId = setInterval(cambiarEstilo, 3000);

        // Detener el cambio de estilo después de 5 segundos
        setTimeout(() => {
            //clearInterval(intervalId);                    
            //setInterval(cambiarEstilo, 1000);
        }, 3000);

    // Función para detectar si se está ejecutando en un dispositivo móvil
    function esDispositivoMovil() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

}