document.addEventListener("DOMContentLoaded", function () {
    console.log("inicia")
    const urlParams = new URLSearchParams(window.location.search);
    const URL_API_ALYMENTE = "https://us-east1-alymente.cloudfunctions.net"
    console.log("pega id")
    const id = urlParams.get('id')
    var contact = null;
    console.log("pegou id")
    const url = window.location.pathname;
    const page = url.substring(url.lastIndexOf('/') + 1)
    console.log("page")
    const openError = (msg) => {
        $("#msg-error").html(msg)
        $("#msg-error").parent().show()
        $("#msg-success").parent().hide()
    }

    const openSuccess = (id) => {
        $("#msg-success p").hide()
        $("#msg-success #" + id).show()
        $('#email-form').hide()
        $("#msg-success").parent().show()
        $("#msg-error").parent().hide()
    }

    const verifyChecked = () => {
        let checked = document.querySelector('[name="representante"]:checked')

        if (checked && checked.value == "sim") {
            $('.not-legal-company').hide();
            $('.legal-company').show();
            $("#button-finish").prop("value", "Aceitar")
        }
        else {
            $('.not-legal-company').show();
            $('.legal-company').hide();
            $("#button-finish").prop("value", "Enviar ao Representante")
        }
    }

    const els = document.querySelectorAll('.representante-legal');
    els.forEach((el) => {
        el.addEventListener('change', () => verifyChecked());
    });
    console.log("elementos")

    $("[name='cnpj']").on("keyup", function (e) {
        $(this).val($(this).val().replace(/\D/g, '').replace(/^(\d{2})(\d{3})?(\d{3})?(\d{4})?(\d{2})?/, "$1.$2.$3/$4-$5"));
    });

    function cpf(v) {
        v = v.replace(/\D/g, "")
        v = v.replace(/(\d{3})(\d)/, "$1.$2")
        v = v.replace(/(\d{3})(\d)/, "$1.$2")
        v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2")
        return v
    }

    $("[name='cpf']").on("keyup", function (e) {
        $(this).val(cpf($(this).val()));
    });

    const requestAlymente = (url, type, data, success, error) => {
        $.ajax({
            beforeSend: function (request) {
                request.setRequestHeader("Content-Type", "application/json");
                request.setRequestHeader("Access-Control-Allow-Origin", "*");
            },
            url: URL_API_ALYMENTE + url,
            type: type,
            dataType: "json",
            data: data ? JSON.stringify(data) : null,
            success: (e, status, request) => success(e, status, request),
            error: (e, status, request) => {
                error(e, status, request);
            }
        });
    };

    const getOutbound = () => {
        return (page == "fiesp" || page == "simefre" || page == "fcdl" || page == "cdl")
    }

    const getUrlOrigin = () => {
        const urlStorage = sessionStorage.getItem('originUrl');
        return urlStorage ? urlStorage : window.location.href
    }

    const validationFields = () => {
        if ($("#email-form [name=vidas]").val() == "" || $("#email-form [name=vidas]").val() == null) {
            openError("Número de vidas é um campo obrigatório.")
            return false
        }
        if ($("#email-form [name=vidas]").val() < 1 || $("#email-form [name=vidas]").val() > 200000) {
            openError("O campo número de vidas está com valor inválido.")
            return false
        }

        return true
    }

    const disabledButton = (labelButton) => {
        $("#email-form input[type=submit]").prop("value", labelButton)
        $("#email-form input[type=submit]").prop("disabled", false)
    }

    const saveOriginUrl = () => {
        const utm = urlParams.get('utm_campaign')
        const urlStorage = sessionStorage.getItem('originUrl')

        if (utm || !urlStorage) {
            sessionStorage.setItem('originUrl', window.location.href);
        }
    }

    const validLead = (vidas, email) => {
        if (!email.includes('gmail.com') && vidas > 5) {
            gtag(
                'event', 'createLead',
                {
                    'company': $("#email-form [name=company]").val(),
                    'name': $("#email-form [name=name]").val(),
                    'email': $("#email-form [name=email]").val(),
                    'phone': $("#email-form [name=phone]").val().replace(/[^\d]/g, ""),
                    'employees': $("#email-form [name=vidas]").val(),
                    'event_category': "lead"
                }
            )
        }
    }

    console.log("call webflow push")
    console.log("webflow push")
    const $input = document.querySelector('[name=phone]')
    if ($input) {
        $input.addEventListener('input', handleInput, false)
        function handleInput(e) {
            e.target.value = phoneMask(e.target.value)
        }
        function phoneMask(phone) {
            return phone.replace(/\D/g, '')
                .replace(/^(\d)/, '($1')
                .replace(/^(\(\d{2})(\d)/, '$1) $2')
                .replace(phone.length >= 15 ? /(\d{5})(\d{1,5})/ : /(\d{4})(\d{1,5})/, '$1-$2')
                .replace(/(-\d{5})\d+?$/, '$1');
        }
    }
    console.log("save origin")
    saveOriginUrl()

    $('#email-form').submit(function () {
        console.log("envia dados")
        if (!validationFields())
            return false
        let labelButton = $("#email-form input[type=submit]").attr("value")
        $("#email-form input[type=submit]").prop("disabled", true)
        $("#email-form input[type=submit]").prop("value", "Enviando Dados...")

        requestAlymente("/ploomesCreate", 'POST', {
            "company": $("#email-form [name=company]").val(),
            "name": $("#email-form [name=name]").val(),
            "email": $("#email-form [name=email]").val(),
            "phone": $("#email-form [name=phone]").val().replace(/[^\d]/g, ""),
            "employees": $("#email-form [name=vidas]").val(),
            "originUrl": getUrlOrigin(),
            "sendUrl": window.location.href,
            //"experiment": getRastreio(),
            "outbound": getOutbound(),
            "cnpj": $("#email-form [name=cf_cnpj_mkt]").length > 0 ? $("#email-form [name=cf_cnpj_mkt]").val().replace(/[^\d]/g, "") : null,
            "product": $("#email-form [name=product]").val(),
        },
            (e1) => {
                disabledButton(labelButton)
                if ($("#email-form [name=vidas]").val() >= 20)
                    openSuccess("msg-not-email")
                else
                    openSuccess("msg-email")

                gtag(
                    'event', 'leadSuspect',
                    {
                        'company': $("#email-form [name=company]").val(),
                        'name': $("#email-form [name=name]").val(),
                        'email': $("#email-form [name=email]").val(),
                        'phone': $("#email-form [name=phone]").val().replace(/[^\d]/g, ""),
                        'employees': $("#email-form [name=vidas]").val(),
                        'event_category': "lead"
                    }
                )

                dataLayer.push({
                    'event': 'leadSuspect',
                    'company': $("#email-form [name=company]").val(),
                    'name': $("#email-form [name=name]").val(),
                    'email': $("#email-form [name=email]").val(),
                    'phone': $("#email-form [name=phone]").val().replace(/[^\d]/g, ""),
                    'employees': $("#email-form [name=vidas]").val()
                });

                validLead($("#email-form [name=vidas]").val(), $("#form [name=email]").val())

                if ($("#email-form").hasClass("form-benefit")) {
                    window.location.replace('https://beneficios.alymente.com.br/agradecimento-alymente')
                }
            },
            (error) => {
                disabledButton(labelButton)
                if (error.responseJSON && error.responseJSON.errorMessage != "") {
                    openError(error.responseJSON.errorMessage)
                } else {
                    openError("Erro ao enviar dados!")
                }
            })

        return false;
    });

    $('#form-indicacao').submit(function () {
        if (!validationFields())
            return false

        let labelButton = $("#form-indicacao input[type=submit]").attr("value")
        $("#form-indicacao input[type=submit]").prop("disable", true)
        $("#form-indicacao input[type=submit]").prop("value", "Enviando Dados...")

        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const identifier = urlParams.get('identifier')

        requestAlymente("/staging-ploomesCreateIndication", 'POST', {
            "company": $("#form-indicacao [name=company]").val(),
            "name": $("#form-indicacao [name=name]").val(),
            "email": $("#form-indicacao [name=email]").val(),
            "phone": $("#form-indicacao [name=phone]").val().replace(/[^\d]/g, ""),
            "originUrl": getUrlOrigin(),
            "sendUrl": window.location.href,
            "identifier": identifier
        },
            (e1) => {
                $('#form-indicacao').hide()
                openSuccess("msg-not-email")

                gtag(
                    'event', 'createIndication',
                    {
                        'company': $("#form-indicacao [name=company]").val(),
                        'name': $("#form-indicacao [name=name]").val(),
                        'email': $("#form-indicacao [name=email]").val(),
                        'phone': $("#form-indicacao [name=phone]").val().replace(/[^\d]/g, ""),
                        "identifier": identifier,
                        'event_category': "lead"
                    }
                )

                dataLayer.push({
                    'event': 'createIndication',
                    'company': $("#form-indicacao [name=company]").val(),
                    'name': $("#form-indicacao [name=name]").val(),
                    'email': $("#form-indicacao [name=email]").val(),
                    'phone': $("#form-indicacao [name=phone]").val().replace(/[^\d]/g, ""),
                    "identifier": identifier
                });
            },
            () => {
                $("#form-indicacao input[type=submit]").prop("value", labelButton)
                $("#form-indicacao input[type=submit]").prop("disabled", false)
                openError("Erro ao enviar dados!")
            })

        return false;
    })
})