//   <script id="happypay_script" async src="https://widgets.happypay.co.za/integrations/shopify_widget.js?amount={{ product.price | money_without_currency | remove: ',' }}" type="application/javascript"></script> 
var happypayloaded = false;
if (typeof jQuery == 'undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'https://code.jquery.com/jquery-3.7.0.min.js';
    jqTag.onload = loadHappyPay;
    headTag.appendChild(jqTag);
} else {
    loadHappyPay();
}
function loadHappyPay() {
    jQuery('#happy-pay-wrapper').remove();
    if (jQuery("#happy-pay-wrapper").length === 0) {
        var $script = jQuery('#happypay_script');
        var html = '<div id="happy-pay-wrapper" class="happy-pay-wrapper" style="display: block;"> <div class="happy-pay-body"> <div class="happy-pay-button" id="happy-pay-button" onclick="show_happy_modal()"> <img src="https://happypay.co.za/img/button-happypay.svg" alt="Happy Pay Button"> </div> <div class="happy-pay-text"> <b>No Deposit.</b> Only <span class="hppypayButtonPrice" ><span class="woocommerce-Price-amount amount" ><bdi style="font-weight:bold;"><span class="woocommerce-Price-currencySymbol">R</span><span id="happy_price">0.00</span></bdi></span ></span > on your next two paycheques. Interest free. <span class="hpptext_link" onclick="show_happy_modal()">Learn More.</span> </div> </div></div></div>';
        var css = "@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap);.happy-pay-wrapper{color:#000;margin-top:10px;margin-bottom:20px;font-family:Quicksand,sans-serif}.happy-pay-body,.happy-pay-caption{font-family:Poppins,sans-serif!important}.happy-pay-body{margin-top:5px;display:flex;align-items:center;color:#8d8d8d}.happy-pay-caption{font-size:15px;letter-spacing:0}.happy-pay-button{width:105px!important;height:42px!important;flex-shrink:0;margin-right:10px;cursor:pointer}.happy-pay-text{font-size:14px;line-height:16px;letter-spacing:0;color: #000}.hpptext_link{text-decoration:underline;cursor:pointer}.hpptext_link:hover{text-decoration:none}.happy-button-modal{display:none;position:fixed;z-index:1000000;padding-top:48px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0 0 0 / 37%);box-sizing:border-box}.hppbtn-modal-content{max-width:540px;background-color:#fefefe;margin:auto;padding:20px 20px 40px;border:2px solid #ffe05d;width:100%;box-sizing:border-box;color:#000;font-family:Quicksand,sans-serif}.hppbtn-modal-close{color:#ffe05d;float:right;height:44.8px!important;font-weight:700;cursor:pointer}.hppbtn-modal-sub-title,.hppbtn-modal-title{color:#161c21;text-align:left;font-family:Poppins,sans-serif!important}.hppbtn-modal-content p{margin:0 0 1em;padding:10px;font-size:18px}.hppbtn-modal-logo{display:flex;padding-bottom:40px;justify-content:center;padding-top:20px;margin-top:0;margin-bottom:0}.hppbtn-modal-logo img{width:35%}.hppbtn-modal-title{letter-spacing:0;font-weight:600;font-size:24px;margin:0;line-height:1.2}.hppbtn-all-padding{padding-left:32px;padding-right:32px}.hppbtn-modal-sub-title{font-size:18px;font-weight:400;margin:0 0 0 -.4em}.hppbtn-modal-content p.hppbtn-modal-sub-title{margin-left:-7.2px;line-height:29px;letter-spacing:0}.hppbtn-block{width:100%;position:relative;padding:0 50px 0 0;clear:both}.hppbtn-fr{box-sizing:border-box;padding:17px 0 0 120px}.hppbtn-fr .hppbtn-circle{float:left;margin-left:-4.2em}.hppbtn-circle:after,.hppbtn-circle:before{position:relative;content:''}.hppbtn-circle,.hppbtn-circle:after,.hppbtn-circle:before{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:block}.hppbtn-circle:before{max-width:40%;max-height:40%;min-width:40%;min-height:40%;top:30%;left:30%;background:#ffe05d}.hppbtn-circle{float:right;margin-right:-85px;margin-top:-.3em;position:relative;z-index:2;max-width:25px;max-height:25px;width:35px;height:35px;min-width:35px;min-height:35px;background:#fff;border:3.5px solid #ffe05d;box-sizing:border-box}.hppbtn-block .text-title{font-family:Poppins,sans-serif!important}.hppbtn-steps-block{width:100%;position:relative;clear:both;margin-top:0;margin-bottom:0}.hppbtn-steps-block p{letter-spacing:0;margin:0;padding:10px;font-size:16px;line-height:26px;color:#000}.hppbtn-steps>li{margin-bottom:0}.hppbtn-steps>li::marker{font-weight:700;font-size:16px;letter-spacing:0}.hppbtn-steps{padding-left:18px;margin:0;display:flex;flex-direction:column;gap:14px}.payment-step-2 img{transform:translate(0,28px);margin-left:5px;margin-right:5px;margin-top:-46px;display:inline;height:auto;max-width:100%}.text-inline-logo{padding-top:1em;width:7em}.hppbtn-sign-up{padding-left:64px;padding-right:64px}.hppbtn-sign-up-button{display:flex;justify-content:center;align-items:center;background-color:#ffe05d!important;border:0 solid #ffe05d;border-radius:12px;margin-top:20px;font-size:16px;font-weight:700;padding-left:16px;padding-right:16px;height:48px;text-decoration:none;color:#000;outline:0!important;letter-spacing:0}a.hppbtn-sign-up-button:visited{color:#000}.hppbtn-sign-up a.hppbtn-sign-up-button:hover{color:#000;text-decoration:none}.happypay_payment_img{height:26px;display:inline-block;vertical-align:middle;margin-left:10px}@media (max-width:1600px){.hppbtn-fr{padding:17px 0 0 92px}}@media (max-width:1300px){.hppbtn-modal-content{width:90%}}@media (max-width:768px){.hppbtn-modal-logo img{width:70%}}";
        var modal = '<div id="happy-button-modal" class="happy-button-modal" style="display:none"> <div class="hppbtn-modal-content"> <img src="https://happypay.co.za/img/close-icon.svg" class="hppbtn-modal-close" onclick="hide_happy_modal()"> <div class="hppbtn-all-padding"> <div class="hppbtn-modal-logo"> <img src="https://happypay.co.za/img/happy-pay-logo.svg" class="modal-button-image"> </div> <div class="hppbtn-title"> <h2 class="hppbtn-modal-title">BUY THE THINGS YOU LOVE & PAY FOR THEM OVER TWO MONTHS.</h2> <p class="hppbtn-modal-sub-title">PAYMENTS ARE INTEREST-FREE WITH NO DEPOSIT REQUIRED. #CHOOSEHAPPY</p> </div> </div> <div class="hppbtn-all-padding"> <div class="hppbtn-row-cf"> <ol class="hppbtn-steps"> <li> <div class="hppbtn-steps-block"> <p>Add items to your cart.</p> </div> </li> <li class="payment-step-2"> <div class="hppbtn-steps-block"> <p> Choose <span> <img src="https://happypay.co.za/img/happy-pay-logo.svg" class="text-inline-logo"> </span> at checkout. </p> </div> </li> <li> <div class="hppbtn-steps-block"> <p>Enter your payment details &amp; payday.</p> </div> </li> <li> <div class="hppbtn-steps-block"> <p> Your first payment (50%) is made on your first payday post-purchase and the second payment (50%) is made on your next payday thereafter. </p> </div> </li> </ol> </div> </div> <div class="hppbtn-sign-up"> <a class="hppbtn-sign-up-button" href="https://happypay.co.za/login?source=new" target="_blank" rel="noopener">Sign up</a> </div> </div>';
        jQuery('body').append(modal);
        

        var $widget = jQuery(html);
        $widget.prepend('<style type="text/css">' + css + '</style>')

        var $widgetb = jQuery(html);
        $widgetb.prepend('<style type="text/css">' + css + '</style>')

        var amount = parseAmount(getParam($script.attr('src'), 'amount'));
        //var installmentAmount = 'R' + getInstallmentAmount(amount);

        // Get the modal
        var modal = document.getElementById("happy-button-modal");
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        var happytimer = setInterval(
            function () {
                if (happypayloaded == false) {
                    jQuery('#happypay_script').after($widget);
                    jQuery('.happypay_additional_widget').html($widgetb);

                    var currentPrice = amount;
                    jQuery('#happy_price').html((currentPrice / 2).toFixed(2));

                    updateWidgetPrice();


                    //if (happypayloaded) { clearInterval(happytimer); addHappyEvents(); }
                    if (jQuery('#happy-pay-wrapper')) { clearInterval(happytimer); addHappyEvents(); happypayloaded = true; }
                }
            }, 1000);
    }


    function parseAmount(value) {
        if (!value) {
            return 0;
        }
        value = value.replace('R', '');
        var amount = parseFloat(value).toFixed(2);

        if (isNaN(amount) || amount < 0) {
            return 0;
        }
        return amount;
    }

    function getParam(url, name) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(url);
        return results && results.length > 1 ? results[1] : '';
    }
    var variants;
    function updateWidgetPrice() {
        if (window.Shopify) {
            var url = window.location.search === "" || window.location.href.indexOf("?") === -1 ? window.location.href : window.location.href.split("?")[0];
            jQuery.getJSON(url + '.json', function (data) {
                let variantId = 0;
                variants = data.product.variants;
                variantId = window.location.search.split("=")[1];
                if (window.location.search === '') {
                    variantId = data.product.variants[0].id;
                }
                var currentVariant = variants.filter(function (obj) { return obj.id == variantId });
                if (currentVariant.length != 0) {
                    if (currentVariant[0].price > 10000) {
                        jQuery('#happy_price').html((currentVariant[0].price / 2).toFixed(2));

                    } else {
                        jQuery('#happy_price').html((currentVariant[0].price / 2).toFixed(2));
                    }
                }
            });
        }
    }

    function addHappyEvents() {

        var selection = document.querySelectorAll('select') !== null;
        var selection2 = document.querySelectorAll("input[type='radio") !== null;
        var selection3 = document.querySelectorAll(".product-option-item[data-option-type='button']") !== null;
        var selection4 = document.getElementsByTagName("a") !== null;
        var selection5 = document.getElementsByClassName("gf_swatch") !== null;

        var selection6 = document.getElementsByClassName("swatch-element") !== null;
        var selection7 = document.getElementsByClassName("Popover__Value") !== null;
        var selection8 = document.getElementsByClassName("options-selection__option-swatch") !== null;
        if (selection) {
            document.querySelectorAll("select").forEach(box => {
                box.addEventListener("change", () => updateWidgetPrice())
            })
        }
        if (selection2) {
            document.querySelectorAll("input[type='radio'").forEach(box => {
                box.addEventListener("change", () => updateWidgetPrice())
            })
        }
        if (selection3) {
            document.querySelectorAll(".product-option-item[data-option-type='button']").forEach(box =>
                box.addEventListener("click", () => updateWidgetPrice())
            )
        }
        if (selection5) {
            document.querySelectorAll(".gf_swatch").forEach(box =>
                box.addEventListener("click", () => updateWidgetPrice())
            )
        }

        if (selection6) {
            document.querySelectorAll(".swatch-element").forEach(box =>
                box.addEventListener("click", () => updateWidgetPrice())
            )
        }
        if (selection7) {
            document.querySelectorAll(".Popover__Value").forEach(box => {
                box.addEventListener("click", () => { updateWidgetPrice() })
            })
        }
        if (selection8) {
            document.querySelectorAll(".options-selection__option-swatch").forEach(box =>
                box.addEventListener("click", () => updateWidgetPrice())
            )
        }
        // for mobile
        document.addEventListener('touchstart', function (e) {
            var anchor = e.target.closest('a');
            if (anchor !== null) {
                updateWidgetPrice();
            }
        });
        document.addEventListener('click', function (e) {
            var anchor = e.target.closest('a');
            if (anchor !== null) {
                updateWidgetPrice();
            }
        });
    }
}


function show_happy_modal() {
    var modal = document.getElementById("happy-button-modal");
    modal.style.display = "block";
    jQuery('body').animate({ scrollTop: 0 }, 'fast');
}
function hide_happy_modal() {
    var modal = document.getElementById("happy-button-modal");
    modal.style.display = "none";
}