let style = "position: fixed; bottom: 10px; right: 10px; z-index: 1000; font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal;";
let open = false;
const font = `.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#vendafacilcrm input {
    width: 95%;
    border: 1px solid grey;
    border-radius: 8px;
    padding: 4px;
}
`

let html = `
    <div style="${style}" id="vendafacilcrm">
        <style>${font}</style>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <div id="card" style="display: none;">
            <div style="background-color: #01a682; padding: 16px; border-radius: 16px 16px 0 0; color: white; font-size: 18px">
                Enviar mensagem pelo WhatsApp
            </div>
            <div style="border-radius: 0 0 8px 8px; background-color: rgba(239, 234, 226, 1); background-image: url(https://firebasestorage.googleapis.com/v0/b/venda-facil-crm.appspot.com/o/bg.png?alt=media&token=3d610d74-1fbd-4c33-b1b0-87eb1ab18403); padding: 16px">
                <div style="">
                    <div>Seu nome</div>
                    <input id="name-form" type="text">
                </div>
                <div style="margin: 8px 0"></div>
                <div style="">
                    <div>Seu email</div>
                    <input id="email-form" type="email">
                </div>
                <div style="margin: 8px 0"></div>
                <div style="">
                    <div>Seu telefone</div>
                    <input id="phone-form" type="tel">
                </div>
                <div style="margin: 8px 0"></div>
                <div style="font-size: 12px; width: 268px">
                    Os dados coletados serão utilizados única e exclusivamente para contato.</br>
                    Seguimos as diretrizes de coleta e armazenamento reguladas pela lei 13.709/18 (LGPD).
                </div>
                <div style="margin: 8px 0"></div>
                <button style="border: none; border-radius: 8px; background-color: #01a682; padding: 8px; font-size: 14px; font-family: inherit; color: white; display: flex; align-items: center" id="send-form">
                    Enviar mensagem
                    <svg style="padding-left: 4px" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 535.5 535.5" xml:space="preserve">
                        <g>
                            <g id="send">
                                <polygon fill="white" points="0,497.25 535.5,267.75 0,38.25 0,216.75 382.5,267.75 0,318.75   "/>
                            </g>
                        </g>
                    </svg>
                </button>
                <button style="border: none; border-radius: 8px; background-color: #01a682; padding: 8px; font-size: 14px; font-family: inherit; color: white; display: none; align-items: center" id="loading">
                    Carregando...
                </button>
            </div>
        </div>
        <a id="button" style="float: right; cursor: pointer; height: 75px; width: 75px" aria-label=\"Chat on WhatsApp\">
            <svg height="75" width="75" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                    <path style="fill:#ffffff;" d="M0,512l35.31-128C12.359,344.276,0,300.138,0,254.234C0,114.759,114.759,0,255.117,0 S512,114.759,512,254.234S395.476,512,255.117,512c-44.138,0-86.51-14.124-124.469-35.31L0,512z"></path>
                    <path style="fill:#55CD6C;" d="M137.71,430.786l7.945,4.414c32.662,20.303,70.621,32.662,110.345,32.662 c115.641,0,211.862-96.221,211.862-213.628S371.641,44.138,255.117,44.138S44.138,137.71,44.138,254.234 c0,40.607,11.476,80.331,32.662,113.876l5.297,7.945l-20.303,74.152L137.71,430.786z"></path>
                    <path style="fill:#ffffff;" d="M187.145,135.945l-16.772-0.883c-5.297,0-10.593,1.766-14.124,5.297 c-7.945,7.062-21.186,20.303-24.717,37.959c-6.179,26.483,3.531,58.262,26.483,90.041s67.09,82.979,144.772,105.048 c24.717,7.062,44.138,2.648,60.028-7.062c12.359-7.945,20.303-20.303,22.952-33.545l2.648-12.359 c0.883-3.531-0.883-7.945-4.414-9.71l-55.614-25.6c-3.531-1.766-7.945-0.883-10.593,2.648l-22.069,28.248 c-1.766,1.766-4.414,2.648-7.062,1.766c-15.007-5.297-65.324-26.483-92.69-79.448c-0.883-2.648-0.883-5.297,0.883-7.062 l21.186-23.834c1.766-2.648,2.648-6.179,1.766-8.828l-25.6-57.379C193.324,138.593,190.676,135.945,187.145,135.945"></path>
                </g>
            </svg>
        </a>
    </div>
`;
let element = document.createElement('div');
element.innerHTML = html;
document.body.appendChild(element);
document.querySelector('#button').addEventListener('click', click);
document.querySelector('#send-form').addEventListener('click', sendForm);

function click() {
    if (open) {
        open = false;
        document.querySelector('#card').style.display = "none";
    } else {
        open = true;
        document.querySelector('#card').style.display = "block";
    }
}

async function sendForm() {
    let sendFormButton = document.querySelector('#send-form');
    sendFormButton.style.display = 'none';
    let loading = document.querySelector('#loading');
    loading.style.display = 'flex';
    loading.disabled = true;
    let nome = document.querySelector('#name-form');
    let email = document.querySelector('#email-form');
    let telefone = document.querySelector('#phone-form');
    nome.disabled = true;
    email.disabled = true;
    telefone.disabled = true;
    let headers = new Headers();
    // Dev
    // const baseUrl = 'https://dev.vendafacilcrm.com.br';
    // Prod
    const baseUrl = 'https://vendafacilcrm.com.br';
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjpudWxsLCJlbXByZXNhIjoiZW1wcmVzYXMvcjlDZ3hzaHdFbVZhUTlNcWpjYnYiLCJpYXQiOjE3NDI0NzMxNDMsImV4cCI6MjA1ODA0OTE0M30.1Xj1DbkWYhfh_1ByZLGlYWTVTn6Dg9Pzf0UzFbtTzE0`);
    headers.append('Access-Control-Allow-Origin', '*');
    await fetch(`${baseUrl}/lead`, {
        method: 'POST',
        headers,
        body: JSON.stringify(
            {
                nome: nome.value,
                email: email.value,
                telefone: telefone.value
            }
        ),
        mode: 'cors',
    })
    window.open(`https://wa.me/send?phone=5541991141365&text=Olá! Meu nome é ${nome.value} gostaria de saber mais informações.`, "_blank");
    document.querySelector('#name-form').value = '';
    document.querySelector('#email-form').value = '';
    document.querySelector('#phone-form').value = '';
    open = false;
    loading.style.display = 'none';
    loading.disabled = false;
    sendFormButton.style.display = 'flex';
    nome.disabled = false;
    email.disabled = false;
    telefone.disabled = false;
    document.querySelector('#card').style.display = "none";
}