// carga.js
document.addEventListener('DOMContentLoaded', function() {
    var iframe;
    var bocadillo=true;


    // Crea una nueva hoja de estilo
    const styleSheet = document.styleSheets[0] || document.styleSheets[document.styleSheets.length - 1];

    // Define la primera animación CSS
    const keyframes1 = `@keyframes miAnimacion {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }`;
    
    const destelloLuz = `@keyframes destelloLuz {
        0% {background: rgba(0, 0, 0, 0.7);}
        50% {background: rgba(0, 0, 0, 0.6);}
        100% {background: rgba(0, 0, 0, 0.7);}
    }`;
    const destelloLuz2 = `@keyframes destelloLuz2 {
        0% {background: #14d91a;}
        25% {background: #14d91a;}
        50% {background: rgb(10 236 17);}
        75% {background: #14d91a;}
        100% {background: #14d91a;}
    }`;
    
    // Agrega ambas animaciones a la hoja de estilo
    styleSheet.insertRule(keyframes1, styleSheet.cssRules.length);
    styleSheet.insertRule(destelloLuz, styleSheet.cssRules.length);
    styleSheet.insertRule(destelloLuz2, styleSheet.cssRules.length);


    var ccc_cf = document.createElement('div');
    ccc_cf.id = 'ccc_cf';
    ccc_cf.style.width = '80px';
    ccc_cf.style.height = '80px';
    ccc_cf.style.padding = '0px';
    ccc_cf.style.position = 'fixed';
    ccc_cf.style.bottom = '6px';
    ccc_cf.style.right = '6px';
    ccc_cf.style.display = 'none';
    ccc_cf.style.animation = 'miAnimacion 0.5s ease 1';
    ccc_cf.style.opacity = 0;
    ccc_cf.style.transition = 'opacity 2s ease';
    //ccc_cf.style.backgroundColor = 'white';
    //ccc_cf.style.boxShadow = '0px 0px 9px rgb(131 131 131)';
    //ccc_cf.style.border = '1px solid #c4c4c4';
    //ccc_cf.style.borderRadius = '50%';
    ccc_cf.style.overflow = 'hidden';
    ccc_cf.style.zIndex = 1000;

    document.body.appendChild(ccc_cf);



    /////////////////
    /* MOSTRAR BOCADILLO */

    var bocadillo_inicial = document.createElement('div');
    bocadillo_inicial.style.display = 'none';
    ccc_cf.appendChild(bocadillo_inicial);

    var texto_bocadillo = document.createElement('p');
    texto_bocadillo.id = 'texto_bocadillo';
    texto_bocadillo.style.width = '100%';
    texto_bocadillo.style.height = 'auto';
    texto_bocadillo.style.cursor = 'pointer';
    texto_bocadillo.style.color = 'white';
    texto_bocadillo.style.fontSize = '14px';
    texto_bocadillo.style.lineHeight = '18px';
    texto_bocadillo.style.margin = 'auto';
    bocadillo_inicial.appendChild(texto_bocadillo);

    var cc_cerrar_bocadillo = document.createElement('div');
    cc_cerrar_bocadillo.id = 'cc_cerrar_bocadillo';
    cc_cerrar_bocadillo.style.position = 'absolute';
    cc_cerrar_bocadillo.style.top = '2px';
    cc_cerrar_bocadillo.style.right = '2px';
    cc_cerrar_bocadillo.style.width = '36px';
    cc_cerrar_bocadillo.style.height = '36px';
    cc_cerrar_bocadillo.style.cursor = 'pointer';
    cc_cerrar_bocadillo.style.overflow = 'hidden';
    bocadillo_inicial.appendChild(cc_cerrar_bocadillo);

    var img_cerrar_bocadillo = document.createElement('img');
    img_cerrar_bocadillo.src = 'https://chatsform.cl/imagenes/xchats2.svg';
    img_cerrar_bocadillo.style.width = '36px';
    img_cerrar_bocadillo.style.height = '36px';
    img_cerrar_bocadillo.style.padding = '6px';
    //img_cerrar_bocadillo.style.border = '2px solid Blue';
    img_cerrar_bocadillo.style.cursor = 'pointer';

    cc_cerrar_bocadillo.appendChild(img_cerrar_bocadillo);



    var img_cargar_bocadillo = document.createElement('img');
    img_cargar_bocadillo.src = 'https://chatsform.cl/imagenes/cargar_bocadillo.svg';
    img_cargar_bocadillo.style.width = '56px';
    img_cargar_bocadillo.style.position = 'absolute';
    img_cargar_bocadillo.style.top = '11px';

    bocadillo_inicial.appendChild(img_cargar_bocadillo);
    


    function mostrar_bocadillo(mensaje) {
        //setTimeout(function() {

            if(bocadillo){
                ccc_cf.style.width = 'auto';
                ccc_cf.style.height = 'auto';
                ccc_cf.style.boxShadow = 'none';
                ccc_cf.style.borderRadius = '0px';
                ccc_cf.style.border = 'none';

                bocadillo_inicial.id = 'bocadillo_inicial';
                bocadillo_inicial.style.width = '111px';
                bocadillo_inicial.style.height = 'auto';
                bocadillo_inicial.style.padding = '33px 18px 33px 18px';
            
                

                bocadillo_inicial.style.cursor = 'pointer';
                bocadillo_inicial.style.backgroundColor = 'rgb(20, 217, 26)';
                bocadillo_inicial.style.color = 'white';
                bocadillo_inicial.style.borderRadius = '9px';
                bocadillo_inicial.style.animation = 'destelloLuz 2s ease infinite';
                
                bocadillo_inicial.style.display = 'block';
                
            }
            

       // }, 3000); 

        setTimeout(function() {
            if(bocadillo){
                bocadillo_inicial.style.width = '254px';
                img_cargar_bocadillo.remove();
                texto_bocadillo.innerHTML = mensaje;
                
            }
            
            
        }, 3000); 
        
    }

    
    function ocultar_bocadillo(event) {
        bocadillo_inicial.style.display = 'none';
        ccc_cf.style.width = '80px';
        ccc_cf.style.height = '80px';
        ccc_cf.style.borderRadius = 'none';

        event.stopPropagation();

        iframe.contentWindow.postMessage({ accion: 'activar_bocadillo' }, 'https://chatsform.cl');
    }

    cc_cerrar_bocadillo.addEventListener('click', ocultar_bocadillo);
    

    

    /////////////////
    /* BOTON MOSTRAR */

    var b_cf = document.createElement('div');
    b_cf.style.width = '70px';
    b_cf.style.height = '70px';
    b_cf.style.padding = '0px';
    //b_cf.style.border = '2px solid Blue';
    b_cf.style.borderRadius = '50%';
    b_cf.style.cursor = 'pointer';
    //b_cf.style.boxShadow = '0px 0px 9px rgb(131 131 131)';
    b_cf.style.backgroundColor = '#14d91a';
    b_cf.style.float = 'right';
    b_cf.style.position = 'relative';
    b_cf.style.marginTop = '9px';
    b_cf.style.animation = 'destelloLuz2 2s ease infinite';
    ccc_cf.appendChild(b_cf);


    var img_b_cf = document.createElement('img');
    img_b_cf.src = 'https://chatsform.cl/imagenes/chats.svg';
    img_b_cf.style.width = '70px';
    img_b_cf.style.height = '70px';
    img_b_cf.style.padding = '7px';
    //b_cf.style.border = '2px solid Blue';
    img_b_cf.style.cursor = 'pointer';
    b_cf.appendChild(img_b_cf);


    var c_numero = document.createElement('div');

    function mostrar_numero() {
        //setTimeout(function() {
            c_numero.style.width = '27px';
            c_numero.style.height = '27px';
            c_numero.style.padding = '0px';
            c_numero.style.borderRadius = '50%';
            c_numero.style.backgroundColor = 'red';
            c_numero.style.position = 'absolute';
            c_numero.style.top = '-6px';
            c_numero.style.right = '0px';
            c_numero.style.color = 'white';
            c_numero.style.fontSize = '13px';
            c_numero.style.textAlign = 'center';
            c_numero.style.fontWeight = 'bold';
            c_numero.style.paddingTop = '6px';
            c_numero.style.lineHeight = '1.2em';
            c_numero.textContent = '1';
            c_numero.style.animation = 'miAnimacion 1s ease 1';
            b_cf.appendChild(c_numero);
        //}, 1000); 
    }
    


    function mostrarChats() {
        bocadillo=false;

        bocadillo_inicial.style.display = 'none';
        b_cf.style.display = 'none';
        c_numero.style.display = 'none';

        ccc_cf.style.width = '320px';
        ccc_cf.style.height = '390px';
        ccc_cf.style.borderRadius = '18px';
        ccc_cf.style.backgroundColor = 'white';
        ccc_cf.style.boxShadow = '0px 0px 9px rgb(131 131 131)';
        ccc_cf.style.border = '1px solid #c4c4c4';
        cc_superior.style.display = 'grid';
        cc_c.style.display = 'block';

        iframe.contentWindow.postMessage({ accion: 'mantenerScrollAbajo', datos: 0 }, 'https://chatsform.cl');
        iframe.contentWindow.postMessage({ accion: 'activar_bocadillo' }, 'https://chatsform.cl');
            
    }

    function alEntrar() {
        b_cf.style.backgroundColor = '#1eff25';
    }
    
    function alSalir() {
        b_cf.style.backgroundColor = '#14d91a'; 
    }

    b_cf.addEventListener('click', mostrarChats);
    b_cf.addEventListener('mouseenter', alEntrar);
    b_cf.addEventListener('mouseleave', alSalir);

    bocadillo_inicial.addEventListener('click', function() {
        b_cf.click();
    });


    /////////////////
    /* SUPERIOR */
    
    var cc_superior = document.createElement('div');
    cc_superior.id = 'cc_superior';
    cc_superior.style.width = '100%';
    cc_superior.style.height = '50px';
    cc_superior.style.backgroundColor = 'white';
    cc_superior.style.borderBottom = '1px solid rgb(220 218 218)';
    cc_superior.style.display = 'none';
    cc_superior.style.gridTemplateColumns = '1fr 50px';
    ccc_cf.appendChild(cc_superior);

        var cc_t_tex = document.createElement('div');
        cc_t_tex.id = 'cc_t_tex';
        cc_t_tex.style.width = '100%';
        cc_t_tex.style.height = '100%';
        cc_t_tex.style.display = 'grid';
        cc_t_tex.style.gridTemplateColumns = '50px 1fr';
        cc_superior.appendChild(cc_t_tex);

        
            var cc_logo_cf = document.createElement('div');
            cc_logo_cf.id = 'cc_logo_cf';
            cc_logo_cf.style.width = '100%';
            cc_logo_cf.style.height = '100%';
            cc_logo_cf.style.display = 'flex';
            cc_logo_cf.style.alignItems = 'center';
            cc_t_tex.appendChild(cc_logo_cf);
            
            var img_logo_cf = document.createElement('img');
            img_logo_cf.src = '';
            img_logo_cf.style.width = '50px';
            img_logo_cf.style.height = 'auto';
            img_logo_cf.style.padding = '3px';
            img_logo_cf.style.borderRadius = '50%';
            //cc_logo_cf.appendChild(img_logo_cf);

            function poner_logo(ruta) {
                img_logo_cf.src = ruta;
                cc_logo_cf.appendChild(img_logo_cf);
            }


            var cc_textos_cf = document.createElement('div');
            cc_textos_cf.id = 'cc_textos_cf';
            cc_textos_cf.style.width = '100%';
            cc_textos_cf.style.height = '100%';
            cc_textos_cf.style.display = 'grid';
            cc_textos_cf.style.gridTemplateRows = '28px 18px';
            cc_t_tex.appendChild(cc_textos_cf);

                var cc_nombre_cf = document.createElement('div');
                cc_nombre_cf.id = 'cc_nombre_cf';
                cc_nombre_cf.style.width = '100%';
                cc_nombre_cf.style.height = '100%';
                cc_nombre_cf.style.padding = '11px 1px 0px 3px';
                cc_nombre_cf.style.fontSize = '12px';
                cc_nombre_cf.style.fontWeight = 'bold';
                cc_nombre_cf.style.lineHeight = 'normal';
                cc_nombre_cf.style.color = '#4b4b4b';
                cc_nombre_cf.style.textTransform = 'uppercase';
                cc_textos_cf.appendChild(cc_nombre_cf);

                function cambiar_texto_nombre(mensaje) {
                    cc_nombre_cf.textContent = mensaje;
                }

                cambiar_texto_nombre('');

                
                
                
                var cc_online_cf = document.createElement('div');
                cc_online_cf.id = 'cc_online_cf';
                cc_online_cf.style.width = '100%';
                cc_online_cf.style.height = '100%';
                cc_online_cf.style.display = 'grid';
                cc_online_cf.style.gridTemplateColumns = '12px 1fr';
                cc_online_cf.style.marginLeft = '3px';
                cc_textos_cf.appendChild(cc_online_cf);


                var cir_conec_cf = document.createElement('div');
                cir_conec_cf.style.width = '12px';
                cir_conec_cf.style.height = '12px';
                cir_conec_cf.style.padding = '0px';
                cir_conec_cf.style.borderRadius = '50%';
                cir_conec_cf.style.background = '#14d91a';

                cc_online_cf.appendChild(cir_conec_cf);

                var online_cf = document.createElement('div');
                online_cf.id = 'online_cf';
                online_cf.style.width = '100%';
                online_cf.style.height = '100%';
                online_cf.style.fontSize = '11px';
                online_cf.style.padding = '0px 0px 0px 4px';
                online_cf.style.lineHeight = 'normal';
                online_cf.style.color = '#4b4b4b';
                cc_online_cf.appendChild(online_cf);

                function cambiar_texto_online(mensaje) {
                    online_cf.textContent=mensaje;
                }

                cambiar_texto_online('Disponible ahora');


                

        var cc_cerrar = document.createElement('div');
        cc_cerrar.id = 'cc_cerrar';
        cc_cerrar.style.width = '100%';
        cc_cerrar.style.height = '100%';
        cc_cerrar.style.cursor = 'pointer';
        cc_cerrar.style.overflow = 'hidden';
        cc_superior.appendChild(cc_cerrar);

        var img_cerrar_cf = document.createElement('img');
        img_cerrar_cf.src = 'https://chatsform.cl/imagenes/xchats.svg';
        img_cerrar_cf.style.width = '50px';
        img_cerrar_cf.style.height = '50px';
        img_cerrar_cf.style.padding = '9px';
        //b_cf.style.border = '2px solid Blue';
        img_cerrar_cf.style.cursor = 'pointer';

        cc_cerrar.appendChild(img_cerrar_cf);


        
        function ocultarChats() {
            cc_superior.style.display = 'none';
            cc_c.style.display = 'none';

            ccc_cf.style.width = '80px';
            ccc_cf.style.height = '80px';
            ccc_cf.style.borderRadius = 'none';
            ccc_cf.style.backgroundColor = 'transparent';
            ccc_cf.style.boxShadow = 'none';
            ccc_cf.style.border = 'none';
            b_cf.style.display = 'block';
            
        }


        cc_cerrar.addEventListener('click', ocultarChats);



    /////////////////
    /* CONTENIDO */
    function generarTextoAleatorio(longitud) {
        const caracteres = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let textoAleatorio = '';
        
        for (let i = 0; i < longitud; i++) {
          const indice = Math.floor(Math.random() * caracteres.length);
          textoAleatorio += caracteres.charAt(indice);
        }
        return textoAleatorio;
    }

    var id=generarTextoAleatorio(24);
    if (sessionStorage.getItem('chatsform')) {
        id = sessionStorage.getItem('chatsform');
    } else {
        sessionStorage.setItem('chatsform', id);
    }


    var d = window.location.hostname;

    var cc_c = document.createElement('div');
    cc_c.id = 'cc_c';
    cc_c.style.width = '100%';
    cc_c.style.height = '340px';
    cc_c.style.border = '0px solid green';
    cc_c.style.display = 'none';
    //cc_c.style.overflow = 'auto';
    cc_c.style.background = 'yellow';
    ccc_cf.appendChild(cc_c);



    iframe = document.createElement('iframe');
    iframe.id = 'ifra';
    //iframe.src = './dominios/aelec-cl?i='+id+'&d='+d; 
    iframe.src = 'https://chatsform.cl/dominios/aelec-cl?i='+id+'&d='+d;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.padding = '0px';
    iframe.style.border = 'none';
    
    cc_c.appendChild(iframe);



    function eliminarChats() {
        ccc_cf.remove();
    }

    function activarChats() {
        
            ccc_cf.style.display = 'block';
            ccc_cf.style.opacity = 1;

            mostrar_numero();
        
    }
    


    window.addEventListener('message', function(event) {
        var data = event.data;
        switch (data.accion) {
            case 'cambiarTextoNombre':
                cambiar_texto_nombre(data.datos);
            break;
    
            case 'poner_logo':
                poner_logo(data.datos);
            break;

            case 'cambiar_texto_online':
                cambiar_texto_online(data.datos);
            break;

            case 'mostrar_bocadillo':
                mostrar_bocadillo(data.datos);
            break;

            case 'eliminarChats':
                eliminarChats();
            break;

            case 'activarChats':
                activarChats();
            break;
        }
        
    });

  
});