function upgrade(why, what) {
    var exists = $('#__ug_modal');
    if (exists.length) exists.remove();

    $('body').append("<div class=\"modal fade\" id=\"__ug_modal\">\n    <div class=\"modal-dialog modal-lg\" role=\"document\">\n        <div class=\"modal-content px-8 pb-8\" id=\"__ug_step1\">\n            <div class=\"modal-header pb-0\"><h1 class=\"text-xl ml-0 text-center\">Level up your Deck<\/h1><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span><\/button> <\/div>\n            <p class=\"why mx-10\" id=\"__ug_why\"><\/p>\n            <div class=\"p-4\">\n                <form id=\"__ug_pay-form\" class=\"rounded\">\n\t            <fieldset>\n\t\t        <div class=\"toggle\">\n\t\t\t    <input type=\"radio\" name=\"plan\" value=\"10\" id=\"tier10\" checked=\"checked\" \/>\n\t\t\t    <label class=\"text-left row\" for=\"tier10\">\n\t\t\t        <div class=\"title col-12\">\n\t\t\t            <h3>Monthly Deck<\/h3>\n\t\t\t            <!-- <p>Cohorts, events, and programs<\/p> -->\n\t\t\t            <div class=\"line\"><\/div>\n\t\t\t        <\/div>\n\t\t\t        <div class=\"price col-12\">\n\t\t\t            <h4 class=\"mt-5\"><span id=\"__ug_price10\">$ 149<span class=\"text-sm\"> \/ month<\/span><\/span><\/h4>\n\t\t\t            <p class=\"text-xs\">Billed monthly<\/p>\n\t\t\t        <\/div>\n\t\t\t    <\/label>\n\t\t\t\t\t\t\t    \n\t\t\t    <input type=\"radio\" name=\"plan\" value=\"11\" id=\"tier11\"  \/>\n\t\t\t    <label class=\"text-left row single_price_plan\" for=\"tier11\">\n\t\t\t\t    <div class=\"title col-12\">\n\t\t\t\t    <span class=\"pricetag\" id=\"__ug_pricetag\">Equals $99\/mo!<\/span>\n\t\t\t\t    <h3>Yearly Deck<\/h3>\n\t\t\t\t    <!-- <p>Ongoing impact and community<\/p> -->\n\t\t\t\t    <div class=\"line\"><\/div>\n\t\t\t\t    <\/div>\n\t\t\t\t    <div class=\"price col-12\">\n\t\t\t\t\t    <h4><span id=\"__ug_price11\" >$ 1188<span class=\"text-sm\"> \/ year<\/span><\/span><\/h4>\n\t\t\t\t\t\t<!--  id=\"__ug_price11\"\n\t\t\t\t\t\t\t$<span id=\"__ug_price11b\">1,188<\/span> 99 -->\n\t\t\t\t\t    <p class=\"text-xs\">Billed yearly<\/p>\n\t\t\t\t    <\/div>\n\t\t\t\t\t\t\t\t\t    \n\t\t\t    <\/label>\n\t\t        <\/div>\n\t\t    <\/fieldset>\n\t\t                \n                    <input type=\"hidden\" name=\"token\" id=\"__ug_token\" \/>\n\t\t    <div class=\"col-md-10 offset-1 mt-3 rounded pb-4\">\n\t\t        <h2 class=\"text-base\">Enter Payment Details:<\/h2>\t\n                        <div id=\"__ug_stripe\" class=\"stripe_card\"><\/div>\n                        <div id=\"__ug_stripe-error\" style=\"color: red;\"><\/div>\n\t\t    <\/div>\n    \n\t            <div class=\"row\">\n\t\t\t\t\t<div class=\"col-md-10 offset-1\">\t    \n\t\t\t\t\t\t<h3 class=\"mb-3 text-base mt-0\" >Have a Promo Code?<\/h3>\n\t\t\t\t\t\t<div class=\"w-100 row mb-10\">\n\t\t\t\t\t\t\t<input class=\"col-9 border rounded form-control\" type=\"text\" id=\"__ug_promocode\" name=\"promocode\" placeholder=\"Enter promo code here...\"\/>\n\t\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-outline rounded-pill text-sm col-3 d-block\" id=\"__ug_apply\">Apply<\/a>\n\t\t\t\t\t\t\t<div id=\"__ug_priceinfo\"><\/div>\n\t\t\t\t\t\t\t<div id=\"__ug_promoinfo\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t            <div class=\"row\">\t    \n\t\t\t\t\t<div class=\"text-center pb-5 col-md-12\">\n\t\t\t\t\t\t\t<button class=\"btn rounded-pill shadow deckpaid px-10\" id=\"__ug_pay_button\">\n\t\t\t\t\t\t\t\tSubscribe & Go\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"btn rounded-pill shadow\" style=\"display: none\"  id=\"__ug_spinner\">\n\t\t\t\t\t\t\t\t<div class=\"spinner-border\" role=\"status\">\n\t\t\t\t\t\t\t\t\t<span class=\"sr-only\">Loading...<\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/button>\n\t\t\n\t\t\t\t\t<p class=\"text-xs mt-5\"><span class=\"lni lni-lock-alt mr-2\"><\/span>Secured proudly by Stripe.<\/p>\n                <\/div> \n\t        <\/form>\n            \n\t\t                \n\t        <div class=\"row single_price_plan mb-0 px-5 py-0 pt-3 tipCard\">\n\t\t\t\t<h3 class=\"col-12 mb-5 heading mt-5\">Plans include <u>all<\/u> features. Cancel Anytime.<\/h3> \n\t\t\t\t<div class=\"col-6 description\">\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Unlimited Meetings<\/p>  \n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Meeting Ratings<\/p>\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Deck Analytics<\/p>\n\t\t\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Booking Analytics<\/p>\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Card Tagging<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"col-6 description\">\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Custom Logo<\/p>\n\t\t\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Custom Tags<\/p>\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Data Export<\/p>\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Mentee\/Visitor Data<\/p>\n\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Automatic Reminders<\/p>\n\t\t\t\t<\/div>\n\t        <\/div>\n\t    <\/div>\n        <\/div>\n    <\/div>\n\t\t        \n    <div class=\"modal-content px-5\" id=\"__ug_step2\" style=\"display: none\">\n        <div class=\"modal-header\">\n\t\t\t<h1 class=\"text-xl ml-2 text-center\">Your Deck is Upgraded!<\/h1>\n\t\t\t<button type=\"button\" onClick=\"document.location.reload()\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span>\n\t\t\t<\/button>\n\t\t<\/div>    \n\n\t\t<div class=\"row single_price_plan mb-0 px-5 py-0 pt-1 tipCard\">\n\t\t\t<h3 class=\"col-12 mb-5 heading mt-5\">All features are unlocked with this subscription<\/h3> \n\t\t\t<div class=\"col-6 description\">\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Unlimited Meetings<\/p>  \n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Meeting Ratings<\/p>\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Deck Analytics<\/p>\n\t\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Booking Analytics<\/p>\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Card Tagging<\/p>\n\t\t\t<\/div>\n\t\t\t<div class=\"col-6 description\">\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Custom Logo<\/p>\n\t\t\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Custom Tags<\/p>\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Data Export<\/p>\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Mentee\/Visitor Data<\/p>\n\t\t\t\t<p><i class=\"lni lni-checkmark-circle\"><\/i>Automatic Reminders<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div class=\"text-center\">\n\t\t\t<a href=\"\/admin\" class=\"btn shadow rounded-pill my-5\">Ok, let's go!<\/a>\n\t\t<\/div>\n        \n    <\/div>\n<\/div>\n");
    $('#__ug_why').text(why);
    var stripe = Stripe('pk_live_nYXSnmxlEmBldgJ0JHFT59ot');
    var elements = stripe.elements();
    var style = {
        base: {
            fontWeight: 400,
            fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
            fontSize: '16px',
            lineHeight: '1.4',
            color: '#555',
            backgroundColor: '#fff',
            '::placeholder': {
                color: '#888',
            },
        },
        invalid: {
            color: '#eb1c26',
        },
        base: {
            fontWeight: 400,
            fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
            fontSize: '16px',
            lineHeight: '1.4',
            color: '#555',
            backgroundColor: '#fff',
            '::placeholder': {
                color: '#888',
            },
        },
        invalid: {
            color: '#eb1c26',
        }
    };

    var cardElement = elements.create('card', {
        style: style
    });
    cardElement.mount('#__ug_stripe');
    var resultContainer = document.getElementById('__ug_stripe-error');
    cardElement.addEventListener('change', function(event) {
        if (event.error) {
            resultContainer.innerHTML = event.error.message;
        } else {
            resultContainer.innerHTML = '';
        }
    });
    $('input[name="plan"]').change(function () {
        $('#__ug_promoinfo').text('');
        $('#__ug_price10').text('$149');
        $('#__ug_price11').text('$1188');
        $('#__ug_price11b').text('$1188');
        $('#__ug_pricetag').show();
    });
    document.getElementById('__ug_apply').addEventListener('click', function (e) {
        try {
            e.preventDefault();
            var promocode = document.getElementById('__ug_promocode');
            var code = promocode.value;

            var price = document.getElementById('__ug_price'+ $('[name="plan"]:checked').val());
            var info = document.getElementById('__ug_priceinfo');
            var promoinfo = document.getElementById('__ug_promoinfo');
            promoinfo.classList.remove('alert');
            promoinfo.classList.remove('alert-danger');

            if (!code) {
                alert('You must enter a promo code.');
                return;
            }

            fetch ('/pay/code/'+code+'/'+$('[name="plan"]:checked').val())
                .then(function (res) { return res.json(); })
                .then(function (data) {
                    promoinfo.innerHTML = '';
                    info.innerHTML = '';
                    if (data.invalid) {
                        promoinfo.classList.add('alert');
                        promoinfo.classList.add('alert-danger');
                        promoinfo.innerHTML = 'Invalid promo code.';
                        promocode.value = '';
                    } else {
                        price.innerHTML = '$'+parseFloat(data.price).toLocaleString(undefined, {'minimumFractionDigits':2,'maximumFractionDigits':2});
                        var baseprice  = parseFloat(data.baseprice).toLocaleString(undefined, {'minimumFractionDigits':2,'maximumFractionDigits':2});
                        $('#__ug_price'+$('[name="plan"]:checked').val()+'b').text(parseFloat(data.price).toLocaleString(undefined, {'minimumFractionDigits':2,'maximumFractionDigits':2}));
                        if (data.cycles == -1) {
                            info.innerHTML = 'Promotional price applies forever.';
                    
                        } else if (data.cycles == 1) {
                            info.innerHTML = 'Promotional price applies for first month, then ' + baseprice + ' / month';
                        } else {
                            info.innerHTML = 'Promotional price applies for '+data.cycles+' months, then ' + baseprice + ' / month';
                        }
                        $('#__ug_pricetag').hide()
                
                    }
                });
            } catch (e) { 
                alert(e);
            }
        });
    var form = document.getElementById('__ug_pay-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        document.getElementById('__ug_pay_button').style.display='none';
        document.getElementById('__ug_spinner').style.display='';
        stripe.createToken(cardElement).then(function(result) {
            if (result.error) {
                // Inform the user if there was an error
                resultContainer.innerHTML = result.error.message;
                document.getElementById('__ug_pay_button').style.display='';
                document.getElementById('__ug_spinner').style.display='none';
            } else {
                document.getElementById('__ug_token').value = result.token.id
                $.post('/upgrade-deck', {token: result.token.id, tier: $('[name="plan"]:checked').val(), promocode: $('#__ug_promocode').val() }, function (errors) {
                    if (errors.length) {
                        document.getElementById('__ug_pay_button').style.display='';
                        document.getElementById('__ug_spinner').style.display='none';
                        resultContainer.innerHTML = errors.join("<br>");
                        //alert(errors.join("\n"));
                    } else {
                       $('#__ug_step1').hide(); 
                       $('#__ug_step2').fadeIn(); 
                    }
                    gtag("event", "deck_upgrade_complete", {
			        "event_category" : "deck_pay",
			        "event_label" : "added_payment",
			    });
                },'json');
            }
        });
    });


    // scroll to top of page
    $('html, body').animate({ scrollTop: 0 }, 'fast');
    $('#__ug_modal').modal('show');
}
document.write('<script src="https://js.stripe.com/v3/"></script>');