var loadPaymentOptionsBox = function()
{
    if (window.jQuery) {
        console.log('loading it now');
        var monthsAvailable = 12;
            
        console.log('ma', monthsAvailable);
        var product = {"id":6134,"shopify_id":6933117108339,"deposit":40,"quarter_available":"1","year_available":2023,"preorder_quantity":0,"created_at":"2022-08-02T20:44:51.000000Z","updated_at":"2022-08-02T20:44:51.000000Z","deposit_variant":"40323337748595","full_prepayment_variant":"40323337715827","prepurchase_nonphysical_product":"6933122613363","full_preorder_amount":"329.00","installment_variant":"40323337781363","offer_payment_plan":1,"offer_prepay_in_full":1,"title":"Wonders of the Wild: Spinosaurus (Deluxe Version)","thumbnail":"https:\/\/cdn.shopify.com\/s\/files\/1\/0153\/7422\/1412\/products\/spinosaurus-deluxe-version_pre-historic-creatures_gallery_62e951fc4d678.jpg?v=1659472412","sku":"911650","vendor":"Star Ace and X Plus","archived_at":null,"received_at":null};
        var paymentPlans = {"paymentPlans":{"2":{"monthlyPayment":14450,"extraFirstMonth":0},"3":{"monthlyPayment":9633,"extraFirstMonth":1},"4":{"monthlyPayment":7225,"extraFirstMonth":0},"5":{"monthlyPayment":5780,"extraFirstMonth":0},"6":{"monthlyPayment":4816,"extraFirstMonth":4},"7":{"monthlyPayment":4128,"extraFirstMonth":4},"8":{"monthlyPayment":3612,"extraFirstMonth":4},"9":{"monthlyPayment":3211,"extraFirstMonth":1},"10":{"monthlyPayment":2890,"extraFirstMonth":0},"11":{"monthlyPayment":2627,"extraFirstMonth":3},"12":{"monthlyPayment":2408,"extraFirstMonth":4}},"amountFinanced":289,"amountFinancedInCents":28900,"lowestPayment":2408};
        var monthAbbrevs = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var deposit = 40;

        function setPaymentPlanDetails(numberOfPayments, plan, monthDay) {
            var now = new Date();
            var thisMonth = now.getMonth();
            var nextMonth = (thisMonth + 1) % 12;
            var currentYear = now.getFullYear();
            var tableHTML = '<table class="table table-condensed"><tbody>';
            tableHTML += '<tr><td>Non-Refundable Deposit</td><td class="text-right"><span>$' + deposit.toFixed(2) + '</span></td></tr>';

            for (var loopCount = 1; loopCount <= numberOfPayments; loopCount++) {
                nextMonth = (thisMonth + loopCount) % 12;
                if (nextMonth == 0) {
                    currentYear++;
                }
                paymentAmount = (loopCount === 1) ? (plan.monthlyPayment + plan.extraFirstMonth) : plan.monthlyPayment;
                tableHTML += '<tr><td>' + monthAbbrevs[nextMonth] + ' ' + monthDay + 'th, ' + currentYear +
                            '</td><td class="text-right"><span>$' +
                            (paymentAmount / 100).toFixed(2) +
                            '</span></td></tr>';
            }
            tableHTML += '</tbody></table>';
            jQuery('#payment-table-target').html('');
            jQuery('#payment-table-target').append(tableHTML);
        }

        function updatedBox() {
            if(paymentPlans) {
                var monthDay = jQuery('#payment_day_prepay').val();
                var numberOfPayments = jQuery('#num_payments_prepay').val();
                console.log('num payments', numberOfPayments);
                var plan = paymentPlans.paymentPlans[numberOfPayments];
                console.log(paymentPlans);
                setPaymentPlanDetails(numberOfPayments, plan, monthDay);
            }
        }

        jQuery('#lowest-monthly-payment').html((paymentPlans.lowestPayment/100).toFixed(2));
        var $numPaymentsInput = jQuery('#num_payments_prepay');
        for (var i = 2; i <= monthsAvailable; i++) {
            $numPaymentsInput.append($("<option>", { value: i, html: i, selected: (i == monthsAvailable)}));
        }
        updatedBox();
        jQuery(document).on('change', '#num_payments_prepay, #payment_day_prepay', function(e){updatedBox();e.target.blur();});
        jQuery(document).on('click', 'div.payment-plan-box-wrapper .header-bar', function(){
            if (jQuery('div.payment-plan-box-wrapper .header-bar').hasClass('open')) {
                jQuery('div.payment-plan-box-wrapper .header-bar').removeClass('open')
                jQuery('div.payment-plan-box-wrapper .payment-plan-details-form').removeClass('open');
            } else {
                jQuery('div.payment-plan-box-wrapper .header-bar').addClass('open')
                jQuery('div.payment-plan-box-wrapper .payment-plan-details-form').addClass('open');
            }
        });
        jQuery(document).on('click', '#prepay_apply_pan_btn', function(e){
            var monthDay = jQuery('#payment_day_prepay').val();
            var numberOfPayments = jQuery('#num_payments_prepay').val();
            e.preventDefault();
            $atcButton = jQuery('#prepay_apply_pan_btn');
            window.addToCartFlyout._secretCompassUpdateCart({
                quantity: 1,
                id: product.installment_variant,
                properties: {
                    payment_plan__is_preorder: true,
                    payment_plan__has_payment_plan: 1,
                    payment_plan__deposit_only: true,
                    payment_plan__payment_day: monthDay,
                    payment_plan__number_of_payments: numberOfPayments
                }
            }, $atcButton);
        });
        jQuery(document).on('click', '#prepay_deposit_only_btn', function(e){
            e.preventDefault();
            $atcButton = jQuery('#prepay_deposit_only_btn');
            window.addToCartFlyout._secretCompassUpdateCart({
                quantity: 1,
                id: product.deposit_variant,
                properties: {
                    payment_plan__is_preorder: true,
                    payment_plan__has_payment_plan: 0,
                    payment_plan__deposit_only: true,
                }
            }, $atcButton);
        });
        jQuery(document).on('click', '#prepay_full_payment_btn', function(e){
            e.preventDefault();
            $atcButton = jQuery('#prepay_full_payment_btn');
            window.addToCartFlyout._secretCompassUpdateCart({
                quantity: 1,
                id: product.full_prepayment_variant,
                properties: {
                    payment_plan__is_preorder: true,
                    payment_plan__has_payment_plan: 0,
                    payment_plan__paid_in_full: true,
                }
            }, $atcButton);
        });
        jQuery('#prepay_deposit_only_btn span.atc-button--text').text('Deposit ($' + deposit.toFixed(2) + ')');
        jQuery('div.payment-plan-box-wrapper').addClass('loaded');
        if (!product.offer_payment_plan || !paymentPlans) {
            jQuery('div.payment-plan-box-wrapper').hide();
        }
        if (!!product.offer_prepay_in_full) {
            jQuery('#prepay_full_payment_btn').text('Full Payment ($' + product.full_preorder_amount + ')');
            jQuery('#prepay_full_payment_btn').show();
        }
    } else {
        window.setTimeout(loadPaymentOptionsBox, 300);
        console.log('not yet');
    }
}

loadPaymentOptionsBox();