var Plans = {

    get: () => {

        let planInfo = Dashboard.info?.company?.plan;

        if(!planInfo) return false;

        return planInfo;

    },    
    
    period: 'yearly',

    updateTableValue(plan) {

        let { totalValue, planQuota, totalDiscount, frequency } = Plans.getPlanValues(plan);

        let priceElm = $('.plan-price[data-plan="' + plan.name + '"]');
        let quotaElm = $('.plan-quota.plan-' + plan.name.toLowerCase());

        let discountElm    = '<br><br><small class="nowrap">Plano mensal</small><br>';
        let installmentElm = '';

        // Os elementos visuais que mostram parcelas e descontos apenas são exibidos nos planos semestrais e anuais.
        if (plan.period != 'monthly') {
            discountElm = `<br><br><small class="nowrap">Plano anual</small><br>`;
            installmentElm = '<small class="nowrap discount-msg">Economize ' + (totalDiscount === 0 ? 'muito' : Helpers.formatPrice(totalDiscount)) + '</small>';
        }

        priceElm.html(`<span class="nowrap"><span class="pricing">${totalValue === 0 ? 'Consulte' : Helpers.formatPrice(totalValue)}</span><small>${totalValue === 0 ? '' : '/' + frequency}</small></span> ${discountElm + installmentElm}`);
        quotaElm.html('<p><b>' + planQuota.toLocaleString('pt-BR') + '</b> / '+ frequency + '</p>');

        if(Plans.isCurrentPlan(plan)) {

            $('.plan-head.plan-'+ plan.name.toLowerCase() + ' button').hide();
            $('.plan-head.plan-'+ plan.name.toLowerCase()).append($('<p class="plan-current">Plano atual</p>'))

        } else {

            $('.plan-head.plan-'+ plan.name.toLowerCase() + ' button').show();
            $('.plan-head.plan-'+ plan.name.toLowerCase() + ' .plan-current').hide();

        }
  
    },

    async togglePeriod(period){

        // Reformata todos os botões de período para class secondary
        $('.plan-period-button').removeClass('active');
        $('.plan-period-button').addClass('secondary');

        // Adiciona a class active apenas no periodo selecionado
        $(`.plan-period-button.${period}-period`).removeClass('secondary');
        $(`.plan-period-button.${period}-period`).addClass('active');

        Plans.period = period;

        let plans = await Plans.getPlans();

        plans.forEach((plan) => {

            // Adicionamos no obj de plano o periodo selecionado
            plan.period = period;

            // Atualiza os valores da tabela exibida, de acordo com o obj
            Plans.updateTableValue(plan);

        });

    },

    getPackages(){

        return Api.get('/api/packages');

    },

    cachePlans: null,

    getPlans(){

        if(Plans.cachePlans) return Promise.resolve(Plans.cachePlans);

        return Api.get('/api/plans').then((plans) => {
            plans = plans.map((plan) => {
                plan.features = JSON.parse(plan.features);
                return plan;
            });

            Plans.cachePlans = plans;

            return plans;

        });

    },

    getFeatures() {

        return Api.get('/api/features');

    },

    getPlanFeatures(id) {

        return Api.get(`/api/features/${id}`);

    },

    searchPlanFeatures(id, name) {

        return Api.get(`/api/features/${id}/${name}`);

    },

    calculateBonusCredit(quantity) {

        return Api.get(`/api/plan/bonus/${quantity}`);

    },

    askedForPlan: true,

    askForPlan(){

        if(Plans.askedForPlan) return;

        Plans.askedForPlan = true;

        let name = Session.jwt().name;

        let modal = $(Alerts.ok('Olá ' + name, 'Esperamos que esteja gostando da sua experiência na IndexaAI. Que tal conhecer o melhor plano para já iniciar o seu projeto?<br>'));

        modal.find('button').text('Conhecer planos');

        modal.find('button').addClass('blackish');

        modal.find('button').off('click');
        modal.find('button').on('click', () => {

            $('.plan-button').click();

        });

        // Add another button
        modal.find('.btns').prepend('<button class="continue-test">Lembre-me depois</button>');

        modal.find('.continue-test').on('click', () => {

            modal.get(0).close();

        });

    },

    afterPlanBtnClick(){

        if(Plans.get()){

            Plans.chooseUpgrade();

        } else{

            Nav.to('/planos/listagem');

        }

    },

    loadPlan(){
      
        let msg = I18n.get('Ative seu plano!');

        if(Plans.get()){

            msg = I18n.get('Aprimore seu plano!');

        }

        $('.plan-button').text(msg);

        $('.plan-button').show();
    
        $('.plan-button').off('click');
        $('.plan-button').on('click', Plans.afterPlanBtnClick);

    },

    // Handler de mudanças no select de parcelamento
    handleInstallmentChange() {

        // A cada mudança de parcelamento, alteramos o dia da cobrança no card de total do pedido
        Plans.calcDueDate();
        
        let installmentValue = $('.payment-form select[name="installments"]').find(":selected").text();

        if(!installmentValue) return $('.installments-total').hide();

        // A cada mudança no select de parcelamento, adicionamos o valor de parcelas no card de total do pedido
        Helpers.type($('.installments-total'), "Em " + installmentValue);

    },

    // Função para popular o [name="installments"] com as opções de parcelamento
    calcInstallments(maxInstallments, totalValue) {

        let installments = $('.payment-form select[name="installments"]');

        installments.empty();

        
        for(let i = 0; i < maxInstallments; i++) {
            let option = $('<option></option>');
            let val = (totalValue / (i + 1)).toFixed(2);

            if (i === 11) {
                option.attr('selected', 'selected');
            }

            option.attr('value', i + 1);
            option.attr('installment-value', val);

            option.text((i + 1) + 'x de R$ ' + val);

            installments.append(option);

        };

        if(maxInstallments > 1) $('.installments').show();
        else $('.installments').hide();
        
    },

    // Função para alterar o texto de data de cobrança caso exista mais de uma parcela 
    calcDueDate(){
            
        let dueDate = new Date();
        
        let installments = $('.payment-form select[name="installments"]').val();
        
        if(installments > 1) {
            
            Helpers.type($('.due-text'), I18n.get('A primeira parcela será cobrada hoje e as demais no dia ') + dueDate.getDate() + I18n.get(' de cada mês.'), {
                startChar: '&nbsp;'
            });
            
        } else {
            
            Helpers.type($('.due-text'), I18n.get('A cobrança será realizada hoje.'), {
                startChar: '&nbsp;'
            });
            
        }

    },

    check(){

        let plan = Plans.get();

        if(!plan){
            plan = {
                name: 'Free'
            }
        }

        $('nav .plan-name').text(plan.name);
        $('nav .plan').show();

        let info = Dashboard.info;

        if(!info) return;

        let usage = info.company.totalCredits - info.company.credits;

        let usedPercentage = (usage * 100) / info.company.totalCredits;

        if(isNaN(usedPercentage)) usedPercentage = 0;

        if(usedPercentage > 100) usedPercentage = 100;

        $('nav .quota .used').css('width', usedPercentage + '%');

        let usedText = usedPercentage.toFixed(2) + I18n.get('% usado (') + usage + '/' + info.company.totalCredits + ')';

        // if(info.company.plan?.quota === 0){

        //     // Vamos dizer apenas que X créditos foram usados
        //     usedText = usage + I18n.get(' créditos usados');

        // }

        $('nav .total-used').text(usedText);

    },

    async loadPackages(){

        let packages = await Plans.getPackages();

        $('.packages-container').empty();

        packages.forEach((package) => {

            let value = package.value == 0 ? 'A definir' : `R$ ${package.value.toFixed(2)}`;
            let quota = package.quota == 'Personalizado' ? 'Personalizado' : `${package.quota} créditos`;

            let packageCard = $('<div class="round-card package-card area"></div>');

            let packageIcon = $('<img src="img/icons/packages-yellow.svg" alt="Pacote" title="Pacote" height="10">');
            packageCard.append(packageIcon);

            let packageQuota = $(`<p class="nowrap">${quota}</p>`);

            packageCard.append(packageQuota);

            let packageValue = $(`<p class="nowrap bold">${value}</p>`);

            packageCard.append(packageValue);

            let packageButton = $('<button>Comprar</button>');

            packageButton.on('click', () => {

                Plans.createPayment({
                    type: 'package',
                    name:  package.name
                });

            });

            packageCard.append(packageButton);

            $('.packages-container').append(packageCard);

        });

    },

    async loadPlans(){

        let plans = await Plans.getPlans();
        let currentPlan = await Plans.get();
        let idealPlan;
        let showPlans = [];

        if(currentPlan) {

            let value = 'R$ ' + currentPlan.value.toFixed(2) + '/mês';

            if(currentPlan.value == 0) value = 'A calcular';

            $('.plan-info .name').text('Plano ' + currentPlan.name);
            $('.payment-info .value').text(value);

        }

        // if(localStorage.getItem('idealQuota')) {

            let quota = localStorage.getItem('idealQuota') || currentPlan.quota || 700;

            // O que mais chegar perto da quota
            idealPlan = plans.reduce((prev, curr) => Math.abs(curr.quota - quota) < Math.abs(prev.quota - quota) ? curr : prev);

        // }

        if(currentPlan.id == 1){

            $('.cancel-plan').hide();

        } else{

            $('.cancel-plan').show();

        }

        if(idealPlan) {
            
            let anotherSameQuota = plans.filter((plan) => plan.quota == idealPlan.quota);

            showPlans.push(idealPlan);

            anotherSameQuota.forEach((plan) => {

                if(plan.id != idealPlan.id) showPlans.push(plan);
                if(currentPlan.id == idealPlan.id) idealPlan = plan;

            });

        }

        // 50 quota plan
        let fiftyQuotaPlan = plans.filter((plan) => plan.quota == 50)[0];

        if(fiftyQuotaPlan) {

            showPlans.push(fiftyQuotaPlan);

        }

        showPlans.sort((b, a) => a.value - b.value);

        showPlans.forEach((plan) => {

            let planElm = Plans.buildPlanCard(plan, currentPlan);

            if(plan.id == idealPlan?.id) planElm.addClass('center-plan');

            $('.plans-container').prepend(planElm);

        });

    },

    agreeToCancel(){

        let checked = $('.cancel-it').is(':checked');

        console.log(checked);

        if(checked) $('.cancel-btn').removeAttr('disabled');
        else $('.cancel-btn').attr('disabled', 'true');

    },

    toggleUserAgreement(){

        let checkTerms = this;

        // Save the date of the time the user agreed to the terms, on this button
        let date = new Date().getTime();

        $(this).attr('data-agreed', date);

    },

    confirmPayment(){

        let modal = $(Alerts.blank('Agradecemos sua compra!'));

    },

    createPayment(package){

        let pay = {}

        pay[package.type] = package.name ? package.name : 'bonus';
        pay.period = package.period;
        pay.quota = package.quota;

        Nav.to('/pagamento?' + $.param(pay));

    },

    info: null,

    resetCard(){
        $('.card.selected').click();
    },

    // Function para popular a tabela de planos
    async buildPlanTable() {

        $('table.pricing-table').html('<tbody><tr class="header-row"><th class="plan-head empty-white"></th></tr><tr class="quota"><td>Limite de Requisições</td></tr></tbody>');

        let plans = await Plans.getPlans();
        let period = Plans.period;

        $('plan-period-button').removeClass('active');
        $('plan-period-button').addClass('secondary');

        let periodButton = $(`.plan-period-button.${period}-period`);

        periodButton.addClass('active');
        periodButton.removeClass('secondary');
        plans.sort((a, b) => a.order - b.order);

        await Plans.buildFeaturesList();

        for (let i = 0; i < plans.length; i++) {

            let plan = plans[i];
            let planName = plan.name.toLowerCase();
            
            // Pra cada plano, criamos o card header dele
            let tableHead = Plans.buildPlanHeader(plan);
            $('.pricing-table .header-row').append(tableHead);

            // Pra cada plano, criamos a row para suas reqs por mês
            let quotaContainer = Plans.buildPlanQuota(plan);

            // let quotaContainer = Plans.buildPlanQuota(plan.quota * periodMultiplier[period], planName);
            $('.pricing-table .quota').append(quotaContainer);
            
            // Pra cada plano, criamos um botao pra navegação mobile (que fica invisivel no desktop)
            // Passamos o plan.name ao inves de planName para manter a formatação com letra maiuscula no inicio
            let mobileNavigation = Plans.buildPlanMobileNavigation(plan.name);
            $('.plan-navigation').append(mobileNavigation);
            
            // Pra cada plano, construimos quais features estão disponiveis
            Plans.buildPlanFeatures(plan);
    
        }

        // Por padrão, na navegação mobile, o primeiro botão deverá estar com estilo selecionado.
        $('.plan-navigation button:first-child()').removeClass('secondary')
    },

    // Cria o check de quais features o plano apresenta e não apresenta
    async buildPlanFeatures(plan) {

        let planName = plan.name.toLowerCase();

        let planFeaturesNames = plan.plan_features.split(',');

        // Passa por cada feature
        $('.pricing-table .feature').each(function(_, feature) {

            feature = $(feature);

            let featureName = feature.find('td p').text()

            let hasFeature = planFeaturesNames.includes(featureName);

            featureAvailable = '<div class="unavailable"><img src="/img/included-false-2.webp" height="20"></div>';

            if(hasFeature) {
                featureAvailable = '<img src="/img/included-true.webp" height="20">';
            }

            featureAvailable = $(featureAvailable);

            featureAvailable.addClass(`feature-avaiability plan-${planName}`);

            let featureContainer = $(`<td class="feature-avaiability plan-${planName}"></td>`)

            featureContainer.append(featureAvailable);

            feature.append(featureContainer);

        });

    },

    // Cria a lista de todas a features
    async buildFeaturesList() {

        let features = await Plans.getFeatures();

        for (let i = 0; i < features.length; i++) {

            let feature = features[i];

            let tableRow = $(`<tr class="feature" name="${feature.name}"></tr>`);
            let featureContainer = $('<td></td>');
            let featureText = $(`<p>${feature.name}</p>`);

            featureContainer.append(featureText);

            tableRow.append(featureContainer);
            $('.pricing-table').append(tableRow);

        }

    },

    buildPlanQuota(plan) {

        let { planQuota } = Plans.getPlanValues(plan);

        let quotaContainer = $(`<td class="plan-quota plan-${plan.name.toLowerCase()}"></td>`);
        let quotaText = $(plan.name === 'On Demand' ? '<p><b>Consulte</b></p>' : `<p><b>${planQuota.toLocaleString('pt-BR')}</b> / mês</p>`);
        
        quotaContainer.append(quotaText);
        
        return quotaContainer;

    },

    getPlanValues(plan, period) {

        // Valores padrões para o plano mensal
        let planValue = plan.montly_value;
        let totalMultiplier = 1;
        let maxInstallments = 1;
        let frequency = 'mês';

        period = period || plan.period;

        if (period === 'semiannually') {
            planValue = plan.semianual_value;
            totalMultiplier = 6;
            maxInstallments = 3;
            frequency = 'semestre';
        } 
        
        if (period === 'yearly') {
            planValue = plan.value;
            totalMultiplier = 1;
            maxInstallments = 6;
            frequency = 'mês';
        }

        let discount = Plans.getPartnerDiscount() / 100;

        let partnerDiscount = (planValue * totalMultiplier) * discount;
        let montlyPartnerDiscount = (plan.montly_value * totalMultiplier) * discount;

        let partnerMultiplierQuota = 1 + (Plans.getPartnerAdditionalCredits() / 100);

        let totalValue = planValue  * totalMultiplier - partnerDiscount;

        let totalMontlyValue = (plan.montly_value * totalMultiplier) - montlyPartnerDiscount;

        let planQuota  = plan.quota * totalMultiplier * partnerMultiplierQuota;

        let totalDiscount = (totalMontlyValue - totalValue) * 12;
        let installmentsValue = totalValue / maxInstallments;

        return {
            totalValue,
            planQuota,
            totalDiscount,
            installmentsValue,
            maxInstallments,
            frequency
        };

    },

    // Cria a header com todos os planos visible do banco, por ordem de preço ASC
    buildPlanHeader(plan) {

        let { totalValue, totalDiscount, frequency } = Plans.getPlanValues(plan, Plans.period);

        let name = plan.name.toLowerCase();

        let tableHead = $(`<th class="plan-head plan-${name}"></th>`)
        let planName = $(`<span>${plan.name}<span>`);

        let priceString = `
            <span class="nowrap">
                <span class="pricing">${totalValue === 0 ? 'Consulte' : Helpers.formatPrice(totalValue)}</span>
                <small>${totalValue === 0 ? '' : '/' + frequency}</small>
            </span>
        `;

        if(Plans.period != 'monthly') {
            priceString += `
                <br/>
                <br>
                <small class="nowrap">Plano anual</small>
                <br>
                <small class="nowrap discount-msg">Economize ${totalDiscount === 0 ? ' muito' : Helpers.formatPrice(totalDiscount)}</small>
            `;
        }

        let planPrice = $(`<span class="plan-price" data-plan="${plan.name}">${priceString}<span>`);

        // let signPlan = totalDiscount === 0 ? $('<a href="https://wa.link/4tjc8i" target="__blank" rel="norrefer">Consultar</a>') : $('<button>Assinar</button>');

        let signPlan = $('<button>Assinar</button>');

        // if (totalDiscount !== 0) {

            signPlan.on('click', () => {

                let activePeriodBtn = $('.plan-period-button.active');
    
                let period;
    
                if(activePeriodBtn.hasClass('monthly-period'))      period = 'monthly';
                if(activePeriodBtn.hasClass('yearly-period'))       period = 'yearly';
                if(activePeriodBtn.hasClass('semiannually-period')) period = 'semiannually';
    
                Plans.createPayment({
                    type: 'plan',
                    name:  plan.name,
                    period: period
                });
                
            });

        // }

        tableHead.append(planName);
        tableHead.append($('<br><br>'));
        tableHead.append(planPrice);
        tableHead.append($('<br>'));
        tableHead.append($('<br>'));

        tableHead.append(signPlan);

        if(Plans.isCurrentPlan(plan)) {

            tableHead.append('<p class="plan-current">Plano atual</p>');
            signPlan.hide();

        }

        return tableHead;

    },
    
    // Cria os botões necessários para a visualização mobile
    buildPlanMobileNavigation(planName) {

        let planButton = $(`<button class="plan-${planName.toLowerCase()}-mobile secondary">${planName}</button>`)

        planButton.on('click', function(evt) {

            Plans.selectPlanView(planName.toLowerCase(), evt)

        })

        return planButton;

    },

    isCurrentPlan(plan) {

        let currentPlan = Plans.get();

        if (currentPlan && currentPlan.plan_id == plan.id && currentPlan.period == Plans.period) {
            return true;
        }

        return false;

    },

    selectPlanView(planName, evt) {

        // Função responsável por esconder todos os elementos que nao sao do plano selecionado
        Plans.hidePlansNotSelected(planName);
        
        // Função responsável por exibir todos os elementos do plano selecionado
        Plans.showPlansSelected(planName)
        
        // Adiciona secondary para todos os botoes, exceto o da acao
        $('.plan-navigation button').addClass('secondary')
        $(evt.target).removeClass('secondary')

    },  
    
    // Função responsável por esconder todos os elementos que nao sao do plano selecionado no mobile
    hidePlansNotSelected(planName) {
        
        let unselectedHead = $(`.plan-head:not(.plan-${planName})`);
        let unselectedQuota = $(`.plan-quota:not(.plan-${planName})`);
        let unselectedFeatures = $(`.feature-avaiability:not(.plan-${planName})`);
        
        unselectedHead.hide();
        unselectedQuota.hide();
        unselectedFeatures.hide();
        
    },
    
    // Função responsável por exibir todos os elementos do plano selecionado
    showPlansSelected(planName) {

        let planHead = $(`.plan-head.plan-${planName}`);
        let planQuota = $(`.plan-quota.plan-${planName}`);
        let planFeatures = $(`.feature-avaiability.plan-${planName}`);
        
        planHead.show();
        planQuota.show();
        planFeatures.show();

    },

    buildPlanCard(plan, currentPlan){

        let planCard  = $('<div class="round-card plan-card"></div>');
        let planInfos = $('<div class="plan-infos"></div>');
        let planIcon  = $('<img src="img/icons/desktop-mobile-yellow.svg" alt="Desktop e mobile" height="30" title="Desktop e mobile">');

        let featuresContainer = $('<div class="features-container">' + plan.description + '</div>');

        planInfos.append(planIcon);

        let planTitle = $('<h3></h3>');

        planTitle.text(plan.name);

        planInfos.append(planTitle);

        let priceText = $('<h3></h3>');

        priceText.text('R$ ' + plan.value.toFixed(2).replaceAll('.', ',') + '/mês');

        planInfos.append(priceText);

        let planButton = $('<button class="sign-up-plan">Assinar</button>');

        if(plan.id == currentPlan.id){

            planButton.text('Atual');

            planButton.css({
                opacity: 0.5
            });
            
        }

        planButton.on('click', () => {

            Plans.createPayment({
                type: 'plan',
                name:  plan.name
            });

        });

        
        planCard.append(planInfos);
        planCard.append(planButton);

        planCard.append(featuresContainer);

        return planCard;

    },
    
    buildCard(card){

        let date = Helpers.getBeautifulDate(card.created_at) + ' às ' + Helpers.getSimpleHour(card.created_at, false);

        let cardElm = $(`
            <div class="round-card card area">
                <div class="card-brand">${card.card_brand}</div>
                <br>
                <div class="card-number">****&nbsp;&nbsp;****&nbsp;&nbsp;****&nbsp;&nbsp;${card.last_four_digits}</div>
                <div><span class="time">${date}</span></div>
                <img class="remove" src="img/icons/trash-white.png" alt="Remover" title="Remover" height="20">
            </div>
        `);

        cardElm.data('card', card);

        cardElm.on('click', () => {

            if(cardElm.hasClass('selected')){

                $('.hide-on-card').show();
                $('.show-on-card').hide();

                cardElm.removeClass('selected');

            } else{

                $('.hide-on-card').hide();
                $('.show-on-card').show();

                $('.card.selected').removeClass('selected');
                cardElm.addClass('selected');

            }

            Plans.tickPaymentForm();

        });

        cardElm.find('.remove').on('click', (event) => {

            event.stopPropagation();

            Alerts.confirm('Remover cartão', 'Você confirma a remoção deste cartão?').then(() => {

                Api.delete('/api/card/' + card.id).then(() => {

                    if(cardElm.hasClass('selected')) cardElm.click();

                    cardElm.remove();

                    Plans.tickPaymentForm();

                }).catch((err) => {

                    Alerts.ok('Ocorreu um erro', err);

                });

            });

        });

        return cardElm;

    },

    buildAddress(address){

        address.address_line2 = address.address_line2 || '';

        let date = Helpers.getBeautifulDate(address.created_at) + ' às ' + Helpers.getSimpleHour(address.created_at, false);

        let addressElm = $(`
            <div class="round-card address area">
                <div class="address-line1">${address.address_line1} ${address.address_line2}, ${address.city} - ${address.state}</div>
                <div class="zipcode">CEP: ${address.postal_code}</div>
                <div><span class="time">${date}</span></div>
                <img class="remove" src="img/icons/trash-white.png" alt="Remover" title="Remover" height="20">
            </div>
        `);

        addressElm.data('address', address);

        addressElm.find('.remove').on('click', (event) => {

            event.stopPropagation();

            Plans.askRemoveAddress(address.id, addressElm);

        });

        addressElm.on('click', () => {

            if(addressElm.hasClass('selected')){

                addressElm.removeClass('selected'); 

                // Reset the inputs
                $('.addresses-inputs input').val('');

                $('.addresses-inputs input').removeAttr('readonly');

                $('.addresses-inputs input').css({
                    cursor: 'text'
                });

            } else{

                Plans.selectAddress(address, addressElm);

            }

            Plans.tickPaymentForm();

        });

        return addressElm;

    },

    async loadSavedInfo(){

        let savedInfo = await Api.get('/api/saved/infos');

        if(!savedInfo) return;

        if(savedInfo.name){

            $('[name=name_or_company]').val(savedInfo.name);

        }

        if(savedInfo.doc){

            $('[name=cpfcnpj]').val(savedInfo.doc);

        }

        // savedInfo.addresses.reverse().forEach((address) => {

        //     $('.billing-addresses').append(Plans.buildAddress(address));

        // });

        // savedInfo.cards.reverse().forEach((card) => {

        //     $('.billing-cards').append(Plans.buildCard(card));

        // });

    },

    showOnDemandModal(){

        let modal = Alerts.blank('Plano sob demanda', `Para solicitar um orçamento, entre em contato através do seguinte número:<br><br><a><img style="vertical-align: middle" width="18" src="/img/wpp-inverted.png">(11) 93618-4399</a>`);

        $(modal).append('<div class="dialog-btns"><br></div>');

        let wppBtn = $('<button>Abrir WhatsApp</button>');

        wppBtn.on('click', () => {

            Default.whatsapp('5511936184399', 'Olá, gostaria de um orçamento para um plano sob demanda.');

        });

        $(modal).find('.dialog-btns').append(wppBtn);

    },

    openModalTerms() {

        let modal = Alerts.ok('Termos de assinatura', `<p>Nossa assinatura é estruturada em planos, cada um oferecendo um número definido de cadastros. Estes cadastros são acumulativos, mas somente enquanto sua assinatura permanecer ativa e em dia com os pagamentos mensais.

        <br><br>Ao adquirir um plano, você terá acesso a um determinado número de cadastros para aproveitar todas as funcionalidades oferecidas. Porém, é essencial notar que os cadastros acumulados estarão disponíveis apenas enquanto sua assinatura estiver ativa e os pagamentos forem realizados regularmente.O valor da assinatura é cobrado mensalmente com base no plano escolhido. Em caso de cancelamento voluntário da assinatura ou falta de pagamento da fatura, os cadastros acumulados serão perdidos, não sendo possível transferi-los nem recuperá-los após o término da assinatura.
        
        <br><br>Portanto, é fundamental considerar que o não pagamento ou cancelamento da assinatura resultará na perda dos cadastros acumulados até o momento.</p>`);

    },

    async loadPayment(){

        window.scrollTo(0, 0);

        let urlParams = new URLSearchParams(window.location.search);

        let type = urlParams.get('bonus') ? 'bonus' : 'plan';

        let name = urlParams.get(type);
        let period = urlParams.get('period');

        let info;

        if(type == 'plan') {
            info = await Api.get(`/api/plan/${name}`);
        } else {
            info = {
                name: name,
                quota: urlParams.get('quota'),
                value: await Plans.calculateBonusCredit(urlParams.get('quota'))
            }
        }

        Plans.info = info;
        
        Plans.loadSavedInfo();

        // if(localStorage.getItem('partnercode')) {

        //     // $('[name="partnercode"]').val(localStorage.getItem('partnercode'));

        // }

        let termsOfPayment = $('.payment-form .order-resume .total-card .terms-payment')

        termsOfPayment.on('click', () => {
            Plans.openModalTerms();
        });

        // Oculta parcelamento por padrão
        $('.installments').hide();

        let typeElm = $('.payment-form .order-resume .total-card .order .title-type');
        let descriptionElm = $('.payment-form .order-resume .total-card .order .line .payment-description');
        let totalValueElm = $('.payment-form .order-resume .total-card .order .line .value');
        let typeValueElm = $('.payment-form .order-resume .total-card .total .total-value');

        switch(type) {

            case 'bonus':

                let bonusTotalCredits = info.quota * (1 + (Plans.getPartnerAdditionalCredits() / 100));

                Helpers.type(typeElm, 'Créditos bônus');
                Helpers.type(descriptionElm, 'Pacote com ' + bonusTotalCredits + ' créditos');
                Helpers.type(totalValueElm, 'R$ ' + info.value.toFixed(2));
                Helpers.type(typeValueElm, 'R$ ' + info.value.toFixed(2));

                if(info.value > 250) {
                    Plans.calcInstallments(3, info.value);
                } else {
                    Plans.calcInstallments(1, info.value);
                };

            break;
            case 'plan':

                let periodNames = {
                    monthly: 'Pacote Mensal',
                    yearly: 'Pacote Anual',
                    semiannually: 'Pacote Semestral'
                }

                let periodMultiplier = {
                    monthly: 1,
                    yearly: 12,
                    semiannually: 6
                }

                let periodMaxInstallments = {
                    yearly: 12,
                    semiannually: 3
                }

                let totalCredits = (info.quota * periodMultiplier[period]) * (1 + (Plans.getPartnerAdditionalCredits() / 100));

                let creditText = totalCredits + ' créditos';

                Helpers.type(typeElm, periodNames[period]);
                Helpers.type(descriptionElm, 'Plano ' + info.name + '<br><small class="nowrap">' + creditText + '</small>');

                let periodValue = period == 'monthly' ? info.montly_value : period == 'yearly' ? info.value : info.semianual_value;

                // Aplica o desconto de parceiro
                periodValue = periodValue - (periodValue * (Plans.getPartnerDiscount() / 100));

                let value = periodValue.toFixed(2).replaceAll('.', ',');

                let total = 'R$ ' + (periodValue * periodMultiplier[period]).toFixed(2).replaceAll('.', ',');

                Helpers.type(totalValueElm, 'R$ ' + value + ' x ' + periodMultiplier[period]);
                Helpers.type(typeValueElm, total);

                // @todo: Quando atualizarmos as tables no banco, atualizar esses parametros de acordo
                Plans.calcInstallments(periodMaxInstallments[period], (periodValue * periodMultiplier[period]));

            break;

        }

        Plans.handleInstallmentChange();

        $('.payment-form input').on('input', Plans.tickPaymentForm);

        $('.payment-form input[type="checkbox"]').on('change', Plans.tickPaymentForm);

        // Ao clicar em confirmar pagamento, vamos chamar Plans.pay()
        $('.confirm-payment').on('click', () => {

            Plans.pay(type, info, period);

        });

    },

    getPartnerDiscount(){

        return Dashboard.info?.company?.info?.partner_discount || 0;

    },

    getPartnerAdditionalCredits(){

        return Dashboard.info?.company?.info?.additional_credits || 0;

    },

    createCreditBonusModal() {

        let modal = $(Alerts.blank('Solicite créditos bônus'));

        let body = $('.modal-buy-credits').outerHtml();

        modal.find('.dialog-body').append(body);

        let creditsInput = modal.find('input[name=creditsQuantity]');

        function calcValue(){

            let creditsQtd = creditsInput.val();

            let customContainer = modal.find('.custom-credits-container');

            // A cada clique no botão, resetamos a mensagem de erro e escondemos o card novamente
            customContainer.hide();

            $('.error-msg').text("");

            // Se não cumprir as quantidades mínimas, para o fluxo da função
            if (creditsQtd < 100) {

                return Helpers.type($('.error-msg'), 'A quantidade mínima para compras é 100 créditos.');

            }

            customContainer.show();

            let customCard = customContainer.find('.custom-credits');

            customCard.addClass('loading');

            let creditMsg = `${creditsQtd} créditos`;

            if(Plans.getPartnerAdditionalCredits() > 0){

                let bonusQtd = Math.ceil(creditsQtd * (Plans.getPartnerAdditionalCredits() / 100));

                creditMsg += ` + (${bonusQtd} bonus)`;

            }

            customCard.find('.text .credits').text(creditMsg);

            Plans.calculateBonusCredit(creditsQtd).then(creditsTotal => {

                customCard.find('.text .value').text(`R$ ${creditsTotal.toFixed(2).replaceAll('.', ',')}`);

                customCard.removeClass('loading');

            }).catch(err => {

                customCard.find('.text .value').text(err);
                
                customCard.removeClass('loading');

            });

            customCard.find('.buy-credits').off('click');

            customCard.find('.buy-credits').on('click', async () => {

                modal.get(0).close();

                Plans.createPayment({
                    type: 'bonus',
                    quota: creditsQtd,
                });

            });

        }

        modal.find('.calculate-price').off('click');
        modal.find('.calculate-price').on('click', calcValue);

        // Listener para, cada vez que o usuário inserir algo na input, removermos se o caracter não for numérico
        creditsInput.on('input', () => {

            creditsInput.val(creditsInput.val().replace(/[^\d]/g, ''));

        });

        // Creditsinput on enter
        creditsInput.on('keyup', (event) => {

            if(event.key == 'Enter') {

                calcValue();

            }

        });

        creditsInput.focus();

    },

    selectAddress(address, elm){

        Helpers.type($('[name="zipcode"]'), address.postal_code, {
            speed: 100
        });

        Helpers.type($('[name="address"]'), address.address_line1, {
            speed: 10
        });

        Helpers.type($('[name="number"]'), address.address_line2);

        Helpers.type($('[name="city"]'), address.city, {
            speed: 40
        });

        Helpers.type($('[name="state"]'), address.state, {
            speed: 40
        });

        let elms = $('[name="zipcode"], [name="address"], [name="number"], [name="city"], [name="state"]');

        elms.attr('readonly', 'readonly');
        elms.css({
            cursor: 'default'
        });

        elms.off('click');

        // Unselect the address and enable the inputs again
        elms.on('click', () => {

            elms.removeAttr('readonly');

            elms.css({
                cursor: 'text'
            });

            elms.off('click');

            elm.removeClass('selected');

            Plans.tickPaymentForm();

        });

        $('.address.selected').removeClass('selected');
        elm.addClass('selected');

        Plans.tickPaymentForm();

    },

    askRemoveAddress(id, addressElm){

        Alerts.confirm('Remover endereço', 'Você confirma a remoção deste endereço?').then(() => {

            Api.delete('/api/address/' + id).then(() => {

                if(addressElm.hasClass('selected')) addressElm.click();

                addressElm.remove();

                Plans.tickPaymentForm();

            }).catch((err) => {

                Alerts.ok('Ocorreu um erro', err);

            });

        });

    },

    getPaymentFormValues(){

        let paymentForm = $('.payment-form');

        let paymentFormInputs = paymentForm.find('input');

        let values = {};

        paymentFormInputs.each((i, input) => {

            let inputName = $(input).attr('name');

            let inputValue = $(input).val();

            if(inputName) values[inputName] = inputValue;

        });

        let terms = $('.payment-form .agreed-terms').is(':checked');

        let installmentCount = $('.payment-form select[name="installments"]').val();
        let installmentValue = $('.payment-form select[name="installments"] option:selected').attr('installment-value');

        let addressSelected = false;
        let cardSelected = false;

        if($('.billing-addresses .address.selected').length){
            addressSelected = $('.billing-addresses .address.selected').data('address'); 
        }

        if($('.billing-cards .card.selected').length){
            cardSelected = $('.billing-cards .card.selected').data('card'); 
        }

        let retObj = {
            values: values,
            terms:  terms,
            installmentCount: installmentCount,
            installmentValue: installmentValue,
            addressSelected: addressSelected,
            cardSelected:    cardSelected
        };

        if(!cardSelected) delete retObj.cardSelected;
        if(!addressSelected) delete retObj.addressSelected;

        return retObj;

    },

    tickPaymentForm(){

        let formValues = Plans.getPaymentFormValues();

        let values = formValues.values;
        let terms = formValues.terms;

        if(formValues.cardSelected) {

            values.cardnumber = true;
            values.cardholdername = true;
            values.cardexpiration = true;
            values.cardcvv = true;
            values.cardholdercpfcnpj = true;
            values.phone = true;
            values.email = true;

        }

    },

    pay(type, info, period){

        let formValues = Plans.getPaymentFormValues();

        let values = formValues.values;

        let paymentInfo = values;

        paymentInfo.type = $('.payment-form input[name="type"]').val();
        paymentInfo.termAgreedAt = $('.payment-form .agreed-terms').attr('data-agreed');

        paymentInfo.info = info;
        paymentInfo.type = type;
        paymentInfo.period = period;

        paymentInfo.installmentCount = formValues.installmentCount;
        paymentInfo.installmentValue = formValues.installmentValue;

        paymentInfo.addressSelected = formValues.addressSelected;
        paymentInfo.cardSelected    = formValues.cardSelected;

        let loading = Styles.loading('Confirmando Pagamento');

        paymentInfo.paymentType = 'CREDIT_CARD';

        Api.post('/api/payment', paymentInfo).then((response) => {

            if(!response || !response.payment) throw 'Pagamento não identificado';

            // @dry
            if(response.payment.status == 'ACTIVE' || response.payment.status == 'CONFIRMED') {

                loading.close();

                if(type == 'plan') {
                    Alerts.ok('Pagamento confirmado!', 'Agradecemos sua assinatura!');
                }

                if(type == 'bonus') {
                    Alerts.ok('Pagamento confirmado!', 'Agradecemos sua compra!');
                }

                Nav.to('/dashboard');

                Dashboard.loadInfo();

            }

        }).catch((err) => {

            loading.close();

            Alerts.ok(err);

        });

    },

    updateSliderValue: (event) => {
        
        let elementName = event.target.name;
        let elementValue = event.target.value; 
        console.log(elementName)
        console.log(elementValue)
        
        let targetType = event.target.type == 'range' ? 'input' : 'slider';
        let targetClass = `.${targetType}-${elementName}`;
        console.log(targetClass)
        let targetElement = $(targetClass);
        console.log(targetElement)

        $(targetElement).val(elementValue);
        $(targetElement).text(elementValue);

    },

    caculatePlan(){

        let modal = $(Alerts.blank('Nos conte sobre você...'));

        modal.addClass('calculate-plan-modal')

        let body = $('.modal-plans').outerHtml();

        modal.find('.dialog-body').append(body);

        modal.find('.search-plans').on('click', () => {

            let cadastros = Number($('dialog .modal-plans .input-cadastros').val());
            let produtos  = Number($('dialog .modal-plans .input-produtos').val());

            if(!cadastros && !produtos) return Alerts.ok('Você precisa preencher ao menos um dos campos.');

            Plans.calculatePlan(cadastros, produtos);

            modal.get(0).close();

        });

        Styles.parse(modal);

    },
    
    calculatePlan(cadastros, produtos){

        let calc = ((cadastros * 6) + produtos) / 6;

        localStorage.idealQuota = calc;

        Nav.to('/upgrade/planos')

    },

    chooseUpgrade(){

        let modal = $(Alerts.blank('O que você deseja?'));
        
        let body = $('.modal-choose-upgrade').outerHtml();
        
        modal.find('.dialog-body').append(body);
        
        modal.find('.pacotes-card').on('click', () => {

            modal.get(0).close();
            Plans.createCreditBonusModal();

        });

        modal.find('.planos-card').on('click', () => {

            Nav.to('/planos/listagem');
            modal.get(0).close();

        });

    },

    createBonusCreditCard(qtdCredits, totalValue) {

        let bonusCreditCard = $('<div class="round-card"><div>')
        let bonusCreditsContainer = $('<div class="values-container"></div>')
        let bonusCreditQtd = $(`<p>${qtdCredits} créditos</p>`)
        let bonusCreditValue = $(`<p>R$ ${totalValue}</p>`)
        let buyBtn = $(`<button>Comprar</button>`)

        bonusCreditsContainer.append(bonusCreditQtd)
        bonusCreditsContainer.append(bonusCreditValue)
        bonusCreditCard.append(bonusCreditsContainer)
        bonusCreditCard.append(buyBtn)

        buyBtn.on('click', function() {

        })

        return bonusCreditCard;

    },

    cancelPlan(){

        let modal = $(Alerts.blank('Confirmar cancelamento'));

        let body = $('<div class="modal-cancel-plan"></div>');

        let plan = Plans.get();

        let remainingCredits = Dashboard.info?.company?.credits || 0;

        let modalDesc = $('<p class="modal-desc">Você confirma o cancelamento do seu plano <span class="bold">' + plan.name + '</span>? Você ainda tem <span class="bold">' + remainingCredits + '</span> créditos.</p>');
        body.append(modalDesc).append($('<br>'));

        let creditsAlert = $('<p>Sua mudança entrará em vigor imediatamente</span><br>Tenha em mente que todos os seus créditos restantes serão <span class="bold">descartados</span>.</p>');
        body.append(creditsAlert);
        body.append('<br>');
        
        let confirmBtn = $('<button><a>Confirmar</a></button>');

        confirmBtn.on('click', () => {

            Api.post('/api/cancel').then((response) => {

                Dashboard.loadInfo();

                Alerts.ok('Assinatura cancelada.', '<p>Por aqui, continuaremos disponíveis em caso de dúvidas ou auxílio.</p>');
                Nav.to('/dashboard');
                modal.get(0).close();

            }).catch((err) => {
    
                Alerts.ok('Ocorreu um erro', err);
    
            });

        });
        
        body.append(confirmBtn)

        modal.find('.dialog-body').append(body);

    },

    changePlan(){

        let modal = $(Alerts.blank('Mudar plano'));

        let body = $('<div class="modal-change-plan"></div>');
        
        let modalDesc = $('<p class="modal-desc">Você confirma a alteração do seu plano <span class="bold">Start FULL</span> para o plano <span class="bold">Flex FULL</span>?</p>');
        body.append(modalDesc).append($('<br>'));

        let creditsAlert = $('<p>Sua mudança entrará em vigor dia <span class="bold">Dia de Mês de Ano.</span></p>');
        body.append(creditsAlert);
        body.append('<br>');
        
        let confirmBtn = $('<button><a>Confirmar</a></button>');

        body.append(confirmBtn)

        modal.find('.dialog-body').append(body);

    },

    confirmChangePlan(){

        let modal = $(Alerts.blank('Plano alterado com sucesso.'));

        let body = $('<div class="modal-confirm-change"></div>');
        body.append('<p>Seus créditos serão atualizados em <span class="bold">Dia do Mês do Ano</span>.</p>');
        body.append($('<p>Por aqui, continuaremos disponíveis em caso de dúvidas ou auxílio.</p>'));

        body.append('<br>');
        
        body.append('<button><a href="dashboard/">Confirmar</a></button>');
        body.append('<br>');

        modal.find('.dialog-body').append(body);

    },

    toggleUserIdentifier(event) {
        let radioBtn = event.target; 
        console.log(radioBtn)

        if ($(radioBtn).val() === 'cpf') {
            // Se selecionado CPF, mostra o input de CPF e esconde o de CNPJ
            $('#cpfInput').css('display', 'block');
            $('#cnpjInput').css('display', 'none');
          } else if ($(radioBtn).val() === 'cnpj') {
            // Se selecionado CNPJ, mostra o input de CNPJ e esconde o de CPF
            $('#cnpjInput').css('display', 'block');
            $('#cpfInput').css('display', 'none');
          }
      
    }

}

Nav.addTrigger('/upgrade/pacotes', async () => {

    Plans.loadPackages();

});

Nav.addTrigger('/pagamento', async () => {

    Plans.loadPayment();

    // Máscara de cartao

    
    $('.credit-card [name="cardnumber"]').on('input', function() {

        let cardNumber = $(this).val();

        let cardNumberMask = cardNumber.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');

        $('.credit-card [name="cardnumber"]').val(cardNumberMask);

    });

    $('.credit-card [name="cardexpiration"]').on('input', function() {

        let cardExpiration = $(this).val();

        let cardExpirationMask = cardExpiration.replace(/\s/g, '').replace(/(\d{2})(?=\d)/g, '$1/');

        $('.credit-card [name="cardexpiration"]').val(cardExpirationMask);

    });

    // $('.credit-card').on('click', function() {
        $('.credit-card .option-container .option-title label input').prop('checked', true)
        $('.credit-card .option-content').css('display', 'flex');
    // })

});


Nav.addTrigger('/upgrade/planos', async () => {

    Plans.loadPlans();

});

Nav.addTrigger('/planos/listagem', async () => {

    Plans.buildPlanTable();

    $('.plan-on-demand button').off('click');
    $('.plan-on-demand button').on('click', Plans.showOnDemandModal)

});

$(function(){
    setTimeout(Plans.getPlans, 2000);

});