let live_template_html={"frontend_shopping_cart":"<div class=\"header_account_list  mini_cart_wrapper\">\r\n    <a href=\"javascript:return%20false;\" id=\"btnCart\">\r\n        <span class=\"lnr lnr-cart\"><\/span>\r\n        <span class=\"item_count\" id=\"cartQuantity\">0<\/span>\r\n    <\/a>\r\n\r\n    <!--mini cart-->\r\n    <div class=\"mini_cart\" style=\"overflow-y: auto;\">\r\n        <div class=\"cart_gallery\">\r\n            <div class=\"cart_close\">\r\n                <div class=\"cart_text\">\r\n                    <h3>cart (<b id=\"cartTotal\" style=\"font-size: 15px\"><\/b>)<\/h3>\r\n                <\/div>\r\n                <div class=\"mini_cart_close\">\r\n                    <a href=\"javascript:void(0)\" id=\"cartClose\"><i class=\"icon-x\"><\/i><\/a>\r\n                <\/div>\r\n            <\/div>\r\n            <div id=\"cartInfo\"><\/div>\r\n        <\/div>\r\n        <div class=\"mini_cart_table\">\r\n            <div class=\"cart_table_border\">\r\n                <div class=\"cart_total mt-10\">\r\n                    <span>Total:<\/span>\r\n                    <span class=\"price\" id=\"grandTotal\">0.00<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"mini_cart_footer\">\r\n            <div class=\"cart_button\">\r\n                <a href=\"\/cart\/\" id=\"viewCartLink\"><i class=\"fa fa-shopping-cart\"><\/i> View cart<\/a>\r\n            <\/div>\r\n            <!--<div class=\"cart_button\">\r\n                <a href=\"#\" id=\"addToCheckOut\"><i class=\"fa fa-sign-in\"><\/i> Checkout<\/a>\r\n            <\/div>-->\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n    <!--mini cart end-->\r\n<\/div>"};

    function ltShoppingCart() {
        function getCartData($template) {
            //--Collect Cart Info
            $.post('/cart/info/json/', function (data) {
                let htmlTable = "";
                let cartQuantity = data['productInfoAr'].length;
                let productImage = data['productInfo_ar'];
                let total=0;
                $.each(data['productInfoAr'], function (i, item) {
                    total = total + item['quantity'];
                    htmlTable += `
                    <div class="cart_item">
                        <input class="mt-4 select-checkbox check-${item['sl']}" data-balance="${item['price'] * item['quantity']}" type="checkbox" name="select_sl[${item['sl']}]" value="${item['sl']}" checked>

                        <div class="cart_img" style="width: 50px;height: 50px">
                            <a href="#"><img src="${productImage[item['product_sl']]['product_image1']}" alt=""><\/a>
                        <\/div>
                        <div class="cart_info">
                            <a href="#">${item['product_title']}<\/a>
                            <p>${item['quantity']} x <span> ${item['price']}<\/span><\/p>
                        <\/div>
                        <div class="cart_remove">
                            <a href="#" class="cart-update" data-id="${item['sl']}"><i class="icon-x"><\/i><\/a>
                        <\/div>
                    <\/div>
                    `;
                });


                $template.find('#cartTotal').html(total);
                $template.find('#cartQuantity').html(total);
                $template.find('#cartInfo').html(htmlTable);
                $template.find('#grandTotal').html(data['grandTotal']);
                $template.find('#viewCartLink').html("View cart");

                $('#wishList').after($template);

                $template.find('#btnCart').on('click', function () {
                    $('.mini_cart, .off_canvars_overlay').addClass('active')
                });

                $template.find('.cart-update').on('click', function () {
                    let id = $(this).attr('data-id');
                    $.post('/cart/remove/', {sl: id}, function (data) {
                        if (data['error'] === 0) {
                            //location.reload();
                            getCartData($template);
                        } else {
                            console.log("Cart Update Failed.");
                        }
                    }, "json");

                    return false;
                });

                $template.find('#cartClose').on('click', function (data) {
                    $('.mini_cart,.off_canvars_overlay').removeClass('active')
                });

            }, 'json');
        }


        $("<div/>").liveTemplate('frontend_shopping_cart', function ($template) {
            getCartData($template);

            $('.addCart').on('click', function () {
                let id = $(this).attr('data-id');
                let qty = $('#cartQty').val()?$('#cartQty').val():1;
                $.post('/cart/add/', {sl: id,qty:qty}, function (data) {
                    if (data['error'] === 0) {
                        getCartData($template);
                        Lobibox.notify('success', {
                            title: 'Message',
                            continueDelayOnInactiveTab: true,
                            msg: data.message,
                            icon: "simple-icon-info",
                            delay: 1000,
                            position: 'center bottom'
                        });
                    } else {
                        Lobibox.notify('error', {
                            title: 'Warning',
                            continueDelayOnInactiveTab: true,
                            msg: data.message,
                            icon: "simple-icon-info",
                            delay: 5000,
                            position: 'center bottom'
                        });
                    }
                }, "json");

                return false;
            });
            $(document).on('click', '.addCart', function () {
                let id = $(this).attr('data-id');
                let qty = 1;
                $.post('/cart/add/', {sl: id,qty:qty}, function (data) {
                    if (data['error'] === 0) {
                        getCartData($template);
                        Lobibox.notify('success', {
                            title: 'Message',
                            continueDelayOnInactiveTab: true,
                            msg: data.message,
                            icon: "simple-icon-info",
                            delay: 1000,
                            position: 'center bottom'
                        });
                    } else {
                        Lobibox.notify('error', {
                            title: 'Warning',
                            continueDelayOnInactiveTab: true,
                            msg: data.message,
                            icon: "simple-icon-info",
                            delay: 5000,
                            position: 'center bottom'
                        });
                    }
                }, "json");

                return false;
            });

        });
    }