document.addEventListener("DOMContentLoaded", function(){
    fetchCart();
    const myOffcanvas = document.getElementById('side-cart');
    myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
        $('.item-inside-cart').html('');
        $('.loading-cart').removeClass('d-none');
        $('.footer-side-cart').addClass('d-none');
    })
    myOffcanvas.addEventListener('show.bs.offcanvas', event => {
        $('.loading-cart').addClass('d-none');
        fetchCart();
    });



});
function productCartAddToCart(elm, product_id) {

    var html = $(elm).html();
    $(elm).html('<div class="spinner-border spinner-border-sm " role="status"><span class="visually-hidden">Loading...</span></div>');

    addToCart(product_id, 1 , function () {
        $(elm).html(html);
        var bsOffcanvas = new bootstrap.Offcanvas(document.getElementById('side-cart'))
        bsOffcanvas.show()
    })
}
function addToCart(product_id, quantity, onCompleted) {

    zid.store.cart.addProduct({productId: product_id, quantity: quantity}).then(function (response) {
        if(response.status  === 'success'){
            setCartTotalAndBadge(response.data.cart);

            if(onCompleted){
                onCompleted();
            }
        }
    })
}
function setCartTotalAndBadge(cart) {
    setCartBadge(cart.products_count)
    var cartTotal = getCartTotal(cart);
    if(cartTotal){
        setCartIconTotal(cartTotal)
    }
}

function setCartIconTotal(total) {
    $('.cart-price').html(total).removeClass('d-none')
}

function setCartBadge(badge) {
    if(badge > 0){
        $('.cart-badge').removeClass('d-none').html(badge);
    }else {
        $('.cart-badge').addClass('d-none');
    }
}
function displayActivePaymentSessionBar(cart) {
    if(cart.is_reserved){
        $('.payment-session-bar').removeClass('d-none')
    }
}
/*function fetchCart() {
    zid.store.cart.fetch().then(function (response) {
        if(response.status  === 'success'){
            if(response.data) {
                setCartTotalAndBadge(response.data.cart);
                displayActivePaymentSessionBar(response.data.cart);
            }
        }
    })
}*/
function getCartTotal(cart) {
    if(cart && cart.totals && cart.totals.length > 0){
        var cartTotalItem = cart.totals.filter(function (total) {
            return (total.code === 'total')
        })

        if(cartTotalItem.length > 0){
            return cartTotalItem[0].value_string;
        }
    }

    return null;
}


function createCartProduct(product) {
    let html_item = '';
    html_item  +=`<li id="product_${product.id}">
                <div class="row align-items-center justify-content-center m-0">
                    <div class="col-3">
                        <a href="${product.url}">`;

    html_item += `<img src="${product.images[0]['thumbs']['small']}" alt="">`;
    html_item +=`        </a>
                    </div>
                    <div class="col-9 product-info">
                        <button class="remove" onclick="return removeItem('${product.id}',this)" type="button"><i class="fa-solid fa-trash"></i></button>
                        <h4 class="title-m">${product.name}</h4>
                        <div class="d-flex justify-content-between">
                            <div class="price">`;
    var new_price = product.price_string
    if (product.price_before_string) {
        var old_price = product.price_before_string
        html_item += `<span class="price-discount">
                    <del class="old">${old_price}</del>
                    <span class="price">${new_price}</span>
					</span>`;
    } else {
        html_item += `<span class="product-price">
							<span class="price">${new_price}</span>
							</span>`;
    }

    html_item += `</div>
                        </div>
		  <div class="block-p-qty" >
            <button class="button-plus btn-number" type="button" data-type="plus" data-field="quantity_${product.id}" >
            <i class="fa fa-plus"></i>
            </button>
            <input type="text" id="product-quantity" name="quantity_${product.id}" min="1" max="100" class="input-number" value="${product.quantity}" onchange="updateMiniCartProduct('${product.id}', $(this).val())" readonly>
            <button class="button-minus btn-number" data-type="minus" data-field="quantity_${product.id}" type="button" >
            <i class="fa fa-minus"></i>
            </button>
         </div>					
                    </div>
                </div>
            </li>`;
    return html_item;
}
function createCartProductBundle(item) {

    let productsHtml = '';

    item.product_x.forEach((product) => {
        productsHtml += createCartProduct(product);
    })
    item.product_y.forEach((product) => {
        productsHtml += createCartProduct(product);
    })

    return productsHtml;
}
function fetchCart (){

    $('#additional-cart').html('');
    $('.side-cart-items').removeClass('d-none');
    var empty_text = $('#side-cart').data('empty');
    zid.store.cart.fetch().then(function (response) {
        if(response.status === "success"){
            var cart = response.data.cart,
                html_item = '',
                total_html = '';
            $('.cart-count').html(cart.products_count);
            if(cart?.products && cart?.products?.length){
                cart.products.map(function (product){
                    if (product.bundle_name)
                        html_item +=  createCartProductBundle(product);
                    else
                        html_item += createCartProduct(product);
                });
                var cartTotal;
                cart.totals.map(function(total){
                    var total_curr = total['value_string'];
                    if (total['code'] === 'total') {
                        cartTotal = total['value'];
                    }
                    total_html += `<li id="${total['code']}" class="d-flex justify-content-between">
                        <span class="title">${total['title']}</span>
                        <span class="number">${total_curr}</span>
                        </li>`;
                });

                $('#cart-side-totals').html(total_html);
                $('.side-cart-items').html(html_item);
                $('.footer-side-cart').removeClass('d-none');
            }else{
                $('#additional-cart').html('<p>'+empty_text+'</p>');
                $('#cart-side-totals,.side-cart-items').html('');
                $('.footer-side-cart').addClass('d-none');
            }

            // shipping
            if(cart.discount_rules && cartTotal){
                cart.discount_rules.forEach( rule => {
                    if (rule.code === 'free_shipping') {
                        rule.conditions.forEach( condition => {
                            if(condition.field === "subtotal" && condition.operator === "between_inclusive"){
                                let free_shipping_text = window.translations.free_shipping_description;

                                let completedPercentage = 100;
                                let $free_shipping_rules = $('#side-cart .shipping-alert');
                                $free_shipping_rules.empty();

                                if( cartTotal < condition.value ){
                                    let difference = (condition.value - cartTotal).toFixed(2);
                                    completedPercentage = Math.round((cartTotal/condition.value) * 100);
                                    let shipping_text_replaced = free_shipping_text.replace("{X}",`<span class="cr fwm">${difference}</span>`);
                                    $free_shipping_rules.append('<span>'+shipping_text_replaced+'</span>');
                                } else {
                                    $free_shipping_rules.append('<span class="free-shipping">'+window.translations.free_shipping+'</span>');
                                }
                                $('#side-cart #cart-shipping').removeClass('d-none');

                                $('#side-cart .bar').css('width', completedPercentage + '%');
                                $('#side-cart .cart-shipping-notice').removeClass('d-none');
                            }
                        })

                    } else {
                        $('#side-cart .cart-shipping-notice').addClass('d-none')
                    }
                })} else {
                $('#side-cart .cart-shipping-notice').addClass('d-none')
            }

            //coupon
            var $couponBtn = $('.apply_coupon');
            var $couponCode = $('.coupon-code');

            if(cart.coupon){
                $couponBtn.text(window.translations.remove_coupon);
                $couponCode.val(cart.coupon.code);
                $couponCode.attr('disabled', true);

                $couponBtn.off().on('click', () => {
                    $couponCode.val('');
                    removeCoupon()
                });
            }
            else{
                $couponCode.attr('disabled', false);
                $couponBtn.text(window.translations.add_coupon);
                $couponBtn.off().on('click',  (e) => {
                    addCoupon($couponCode.val(), e)
                });
            }

            setCartTotalAndBadge(response.data.cart);
            displayActivePaymentSessionBar(response.data.cart);
        }else{
            alert('Error Cart');
        }
        $('.loading-cart').addClass('d-none');

    });
}

function addCoupon(coupon_code) {
    var $couponBtn = $('.apply_coupon');

    if (coupon_code.trim().length !== 0) {

        var $actions = $('.footer-side-cart');
        $actions.fadeTo('slow', 0.3);
        $couponBtn.html('<i class="fas fa-sync fa-spin"></i>');

        zid.store.cart.redeemCoupon(coupon_code).then( (response) => {
            $actions.fadeTo('slow', 1);

            if (response.status === 'success') {
                $.toast({
                    text: window.translations.coupon_added,
                    showHideTransition: 'fade',
                    allowToastClose: true,
                    hideAfter: 2000,
                    position: 'top-right',
                    textAlign: 'center',
                    bgColor: '#d4edda',
                    textColor: '#155724',
                });
                fetchCart();
            } else {
                $.toast({
                    text: response?.data?.message ?? window.translations.sorry,
                    showHideTransition: 'fade',
                    allowToastClose: true,
                    hideAfter: 2000,
                    position: 'top-right',
                    textAlign: 'center',
                    bgColor: '#d90000',
                    textColor: '#fff',
                });
                $couponBtn.html(window.translations.add_coupon);
            }

        })

    } else {
        $.toast({
            text: window.translations.coupon_discount_enter,
            showHideTransition: 'fade',
            allowToastClose: true,
            hideAfter: 2000,
            position: 'top-right',
            textAlign: 'center',
            bgColor: '#d90000',
            textColor: '#fff',
        });
    }
}

function removeCoupon() {

    var $actions = $('.footer-side-cart');
    $actions.fadeTo('slow', 0.3);

    var $couponBtn = $('.apply_coupon');
    $couponBtn.html('<i class="fas fa-sync fa-spin"></i>');

    zid.store.cart.removeCoupon().then( (response) => {
        $actions.fadeTo('slow', 1);

        if (response.status === 'success') {
            $.toast({
                text: window.translations.coupon_remove,
                showHideTransition: 'fade',
                allowToastClose: true,
                hideAfter: 2000,
                position: 'top-right',
                textAlign: 'center',
                bgColor: '#d4edda',
                textColor: '#155724',
            });
            fetchCart();
        } else {
            $.toast({
                text: response?.data?.message ?? window.translations.sorry,
                showHideTransition: 'fade',
                allowToastClose: true,
                hideAfter: 2000,
                position: 'top-right',
                textAlign: 'center',
                bgColor: '#d90000',
                textColor: '#fff',
            });
            $couponBtn.html(window.translations.remove_coupon);
        }

    })
}

function removeItem(key,item){
    $('.side-cart-items li#product_'+key+' .remove').html('<i class="cart-spinner fa-spin"></i>');
    zid.store.cart.removeProduct(key).then(function (response) {

        if(response.status ==='success'){
            fetchCart();
        }
    });
}