document.addEventListener("DOMContentLoaded", function () {
    const urlParams = new URLSearchParams(window.location.search);
    const URL_API_ALYMENTE = "https://us-east1-alymente.cloudfunctions.net"

    const id = urlParams.get('id')
    var contact = null;

    const url = window.location.pathname;
    const page = url.substring(url.lastIndexOf('/') + 1)

    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()
        $('#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());
    });

    $("[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);
            }
        });
    };

    if (page == "aceite" || page == "proposta" || page == "qualificacao") {
        requestAlymente(`/ploomesDeal`, 'POST', { id: id },
        (e1) => {
            let res = e1.data
            contact = res.contact

            if (page == "aceite" || page == "proposta") {
                if (res.legalName) {
                    $("#form [name=company]").val(res.legalName)
                    $("#form [name=company]").prop("disabled", true)
                }
                if (res.cnpj) {
                    $("#form [name=cnpj]").val(
                        res.cnpj
                            .replace(/\D/g, '')
                            .replace(/^(\d{2})(\d{3})?(\d{3})?(\d{4})?(\d{2})?/, "$1.$2.$3/$4-$5")
                    )
                    $("#form [name=cnpj]").prop("disabled", true)
                }
            }
        },
        () => {
        })
    }

    const getRastreio = () => {
        let ret = {}
        for (let experiment of experiments){
            ret[experiment.id] = experiment.variant
        }
        return Object.values(ret).length > 0 ? JSON.stringify(ret) : null;
    }

    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 (page == "proposta") {
            if ($('[name="representante"]:checked').val() == "nao" && $('[name="email"]').val() == "") {
                openError("Digite o email do representante legal da empresa.")
                return false
            }
            if ($('[name="representante"]:checked').val() == "sim" && !$('[name="aceite"]').is(":checked")) {
                openError("O campo de aceitação de Contrato e Licença de Uso é obrigatório.")
                return false
            }
            if ($('[name="representante"]:checked').val() == "sim" && $('[name="name"]').val() == "") {
                openError("O campo Nome é obrigatório.")
                return false
            }
            if ($('[name="representante"]:checked').val() == "sim" && $('[name="cpf"]').val() == "") {
                openError("O campo CPF é obrigatório.")
                return false
            }
        }
        else if (page == "qualificacao") {
            if ($('[name=alimentacao]').val() == "" &&
                $('[name=refeicao]').val() == "" &&
                $('[name=transporte]').val() == "") {
                openError("Digite o valor de carga para pelo menos um benefício.")
                return false
            }
        }
        else if (page == 'indicacao'){
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const identifier = urlParams.get('identifier')
            if (!identifier || identifier == "") {
                openError("Colaborador sem identificação.")
                return false
            }
        }

        if (page != "aceite" && page != "proposta" && page != "qualificacao" && page != "indicacao") {
            if ($("#form [name=vidas]").val() == "" || $("#form [name=vidas]").val() == null) {
                openError("Número de vidas é um campo obrigatório.")
                return false
            }
            if ($("#form [name=vidas]").val() < 1 || $("#form [name=vidas]").val() > 200000) {
                openError("O campo número de vidas está com valor inválido.")
                return false
            }
        }

        return true
    }

    const disabledButton = (labelButton) => {
        $("#form input[type=submit]").prop("value", labelButton)
        $("#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': $("#form [name=company]").val(),
                    'name': $("#form [name=name]").val(),
                    'email': $("#form [name=email]").val(),
                    'phone': $("#form [name=phone]").val().replace(/[^\d]/g, ""),
                    'employees': $("#form [name=vidas]").val(),
                    'event_category': "lead"
                }
            )
        }
    }

    Webflow.push(function () {
        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');
            }
        }

        saveOriginUrl()

        $('#form').submit(function () {
            if (!validationFields())
                return false
            let labelButton = $("#form input[type=submit]").attr("value")
            $("#form input[type=submit]").prop("disabled", true)
            $("#form input[type=submit]").prop("value", "Enviando Dados...")
            if (page == "aceite" || page == "proposta") {
                requestAlymente('/ploomesAccept', 'POST', {
                    deal: id,
                    company: $("#form [name=company]").val(),
                    cnpj: $("#form [name=cnpj]").val().replace(/\D/g, ''),
                    page: page,
                    representanteName: $("#form [name=name]").val(),
                    representanteCpf: $("#form [name=cpf]").val().replace(/\D/g, ''),
                    representanteEmail: $("#form [name=email]").val(),
                    representante: $('[name="representante"]:checked').val() == "sim"
                },
                (e1) => {
                    $("#form input[type=submit]").prop("disabled", false)
                    $("#form input[type=submit]").prop("value", labelButton)

                    if (page == "proposta" && $('[name="representante"]:checked').val() == "nao") {
                        openSuccess("msg-not-is-representante")
                    }
                    else {
                        openSuccess("msg-is-representante")
                    }
                },
                () => {
                    disabledButton(labelButton)
                    openError("Erro ao enviar dados!")
                })
            }
            else if (page == "qualificacao") {
                requestAlymente("/ploomesQualification", 'POST', {
                    deal: id,
                    refeicaoCarga: $("#form [name=refeicao]").val() != "" ? $("#form [name=refeicao]").val() : 0,
                    alimentacaoCarga: $("#form [name=alimentacao]").val() != "" ? $("#form [name=alimentacao]").val() : 0,
                    transporteCarga: $("#form [name=transporte]").val() != "" ? $("#form [name=transporte]").val() : 0
                },
                (e1) => {
                    disabledButton(labelButton)
                    openSuccess("msg-qualificacao")
                    window.location.href = 'proposta?id=' + id;
                },
                () => {
                    disabledButton(labelButton)
                    openError("Erro ao enviar dados!")
                })
            }
            else {
                requestAlymente("/ploomesCreate", 'POST', {
                    "company": $("#form [name=company]").val(),
                    "name": $("#form [name=name]").val(),
                    "email": $("#form [name=email]").val(),
                    "phone": $("#form [name=phone]").val().replace(/[^\d]/g, ""),
                    "employees": $("#form [name=vidas]").val(),
                    "originUrl": getUrlOrigin(),
                    "sendUrl": window.location.href,
                    "experiment": getRastreio(),
                    "outbound": getOutbound()
                },
                (e1) => {
                    disabledButton(labelButton)
                    if ($("#form [name=vidas]").val() >= 20)
                        openSuccess("msg-not-email")
                    else
                        openSuccess("msg-email")

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

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

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

                    if($( "#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;
        })
    });
})