function loadImages() {
    var cartImages = document.getElementsByName("cartImages")
    for (let i = 0; i < cartImages; i++) {
        cartImages[i].src = cartImages[i].dataset.src
    }
}

function removeFromCart(item) {
    console.log('removeFromCart')
    try {
        if (!window.location.host.includes('localhost')) {
            dataLayer.push({ ecommerce: null });
            dataLayer.push({
                'event': 'removeFromCart',
                'ecommerce': {
                    'remove': { // 'remove' actionFieldObject measures.
                        'products': [{ //  removing a product to a shopping cart.
                            'name': item.dataset.name,
                            'id': item.dataset.sku,
                            'price': item.dataset.price,
                            'brand': 'TeeShirtpalace',
                            'category': 'Apparel',
                            'variant': item.dataset.color,
                            'quantity': item.dataset.qty
                        }]
                    }
                }
            });
        }
    } catch (err) {
        console.log(err);
    }
    document.getElementById(item.dataset.id).remove()
    var price = item.dataset.price
    var total = parseFloat(document.getElementById("cartTotal").innerHTML)
    total = (parseFloat(total) - parseFloat(price)).toFixed(2)
    var number = parseInt(document.getElementById("bagNumber").innerHTML)
    number = parseInt(number) - 1
    document.getElementById("bagNumber").innerHTML = number
    if (number == 0) {
        document.getElementById("bagNumber").classList.toggle("d-none")
    }
    document.getElementById("cartTotal").innerHTML = total
    let cart = document.getElementById("cart").value
    var posting = $.post("/remove", { id: item.dataset.id, cart })
    posting.done((data) => {
        var numberofitems = 0
        data.array.forEach(item => {
            numberofitems = parseInt(numberofitems) + parseInt(item.quantity)
        })
        document.getElementById("cartNumber1").innerHTML = "(" + numberofitems + ")"
        if (data.array.length != 0) {
            if (document.getElementById("bagNumber").classList.contains("d-none")) {
                document.getElementById("bagNumber").innerHTML = numberofitems
                document.getElementById("bagNumber").classList.toggle("d-none")
            } else {
                document.getElementById("bagNumber").innerHTML = numberofitems
            }
        } else {
            if (!document.getElementById("bagNumber").classList.contains("d-none")) {
                document.getElementById("bagNumber").classList.toggle("d-none")
            }
        }
        if (data.cart.discount != undefined && data.cart.discount != 0) {
            if (document.getElementById("cartdiscount").classList.contains("d-none")) {
                document.getElementById("cartdiscount").classList.toggle("d-none")
            }
            document.getElementById("cartdiscounthtml").innerHTML = data.cart.discount
        } else {
            if (!document.getElementById("cartdiscount").classList.contains("d-none")) {
                document.getElementById("cartdiscount").classList.toggle("d-none")
            }
        }
        if (data.cart.bulk_discount != undefined && data.cart.bulk_discount != 0) {
            if (document.getElementById("cartbulkdiscount").classList.contains("d-none")) {
                document.getElementById("cartbulkdiscount").classList.toggle("d-none")
            }
            document.getElementById("cartbulkdiscounthtml").innerHTML = data.cart.bulk_discount
        } else {
            if (!document.getElementById("cartbulkdiscount").classList.contains("d-none")) {
                document.getElementById("cartbulkdiscount").classList.toggle("d-none")
            }
        }
        console.log(data.cart.totalCost)
        document.getElementById("cartTotal").innerHTML = data.cart.totalCost
        let freeshipping = document.getElementById("freeshipping")
        if (99 - data.cart.totalCost > 0) {
            freeshipping.innerHTML = `Note: Add <strong>$ ${parseFloat(99 - data.cart.totalCost).toFixed(2)}</strong> to be eligible for <stong>free delivery!</stong>`
        } else {
            freeshipping.innerHTML = `Note: <strong>You Have Earned Free Shipping</strong>`
        }

        if (updateSaveMoreSpan !== undefined) {
            updateSaveMoreSpan(data.cart.totalQuantity);
        }
    })
}


// Event snippet for Add to cart conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button.
function gtag_report_conversion(url, sku, qty) { gtag("event", "add_to_cart",{ "event": "add_to_cart", "sku": sku, quantity:  qty}); return false; }
let addToWishList = (product) =>{
    let posting = $.post("/add-to-wishlist", {product})
    posting.done(data=>{
        console.log(data)
        if(data.error != 500){  
            document.getElementById("wishlist").style.color = "#E71568"
        }else{
            alert(data.message)
        }
    })
}

function uet_report_conversion() {
    window.uetq = window.uetq || [];
    window.uetq.push('event', 'add_to_cart', {});
}
async function addToBag(product) {
    let originalBtnHtml = $('.product-page_checkout-btn').html();
    $('.product-page_checkout-btn').html(`<span class="spinner-border"></span>`)

    // if (window.innerWidth <= 767) {
    //     window.scrollTo({ top: 0, behavior: 'smooth' });
    // }
    let size = $('.product-page_size-btn.active').attr('data-id');
    let color = $('.product-page_color-btn.active').attr('data-id');
    let cart = document.getElementById("cart").value
    let quantity;
    if ($('#quantity').is(':visible')) {
        quantity = $('#quantity').val();
    } else {
        quantity = $('#customQuantity').val();
    }
    if (!size || size == 'Select Size') {
        if(window.innerWidth <= 767){
            return toggleMobileSizeSelector();
        }else{
            $('.product-page_checkout-btn').html(originalBtnHtml)
            alert('Please select a size');
            return;
        }
    }
    if (size == "") {
        $('.product-page_checkout-btn').html(originalBtnHtml)
        alert("You Must Select A Size!")
    } else {

        if (isCustom) {
            //custom product (edit text)
            await uploadDesign();
            return;
        }
        console.log({ product: product, size: size, color: color, quantity: quantity, cart })
        var posting = $.post("/addtobag", { product: product, size: size, color: color, quantity: quantity, cart })
        posting.done(data => {
            try{
                $('#attentive_overlay').css('z-index', 999);
            }catch(err){
                console.log(err)
            }
            try {
                console.log(data);
                displayAddedToCart(data);
                $('.product-page_checkout-btn').html(originalBtnHtml)
                attentive_addToCart(product, data.varient, quantity, data.cart._id)
                gtag_report_conversion(null, data.varient.sku, quantity)
                uet_report_conversion();
                console.log(data.varient.price)

                
                // console.log("going to call criteo")
                // criteo(data, product, size, color, quantity)
            } catch (err) {
                console.log(err);
            }
        })
    }
}

function displayAddedToCart(data) {
    console.log(data);
    let additional = data.additional ? data.additional : 0;
    let v = data.varient;
    let image = v.images.product_image;
    if (!image) {
        image = v.images.garment_image;
    }
    if (!image) {
        image = v.images.front_image;
    }
    if (!image) {
        image = v.images.back_image;
    }
    let html = `
    <div class="added-to-cart_backdrop"></div>
    <div class="added-to-cart slide-out-bck-bottom">
    <div class="d-flex justify-content-between align-items-center">
    <img class="added-to-cart_image" src="${image}?width=200" alt="${v.name}" class="added-to-cart_image">
    <div class="added-to-cart_details">
        <h1 class="added-to-cart_details_title">Added to cart</h1>
        <span class="added-to-cart_details_product-title">${v.name}</span>
        <span class="added-to-cart_details_size">Size: ${v.size_name} Color: ${v.color_name}</span>
        ${additional > 1 ? `<div class="d-flex bg-light p-1 rounded justify-content-center">+${additional - 1} additional items...</div>` : ``}
    </div>
    <div class="added-to-cart_close" onclick="closeAddedToCart()">
        <ion-icon name="close-outline"></ion-icon>
    </div>
    </div>
    <div class="d-flex mt-3">
    <a class="btn added-to-cart_view-cart mt-0 mr-2 w-100" href="/cart"><i class="icon-cart-fill"></i> View Cart</a>
    <a class="btn added-to-cart_view-cart mt-0 w-100" href="/checkout"><svg style="margin-right:4px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path d="M14.5 2h-13C.675 2 0 2.675 0 3.5v9c0 .825.675 1.5 1.5 1.5h13c.825 0 1.5-.675 1.5-1.5v-9c0-.825-.675-1.5-1.5-1.5zm-13 1h13c.271 0 .5.229.5.5V5H1V3.5c0-.271.229-.5.5-.5zm13 10h-13a.507.507 0 0 1-.5-.5V8h14v4.5c0 .271-.229.5-.5.5zM2 10h1v2H2zm2 0h1v2H4zm2 0h1v2H6z" fill="currentColor"/></svg> Pay Now</a>
    </div>

    <div id="paypal-button"></div>
    </div>
    `
    $('.added-to-cart').remove();
    $('main').append(html);
    try {
        setupPaypalButtons();
    } catch (e) {
        console.log(e)
    }
    openAddedToCart();
    $('.navigation_cart_quantity').show();
    $('.navigation_cart_quantity').text(data.cart.totalQuantity > 0 ? data.cart.totalQuantity : '')
    $('.added-to-cart_backdrop').addClass('show')
    const onClickOutside = (e) => {
        if (!e.target.className.includes('added-to-cart')) {
            closeAddedToCart();
            window.removeEventListener("click", onClickOutside);
        }
    };
    window.addEventListener("click", onClickOutside);
}

function closeAddedToCart() {
    $('.added-to-cart_backdrop').removeClass('show')
    setTimeout(() => {
        $('.added-to-cart_backdrop').remove();
    }, 300);
    $(".added-to-cart").removeClass('slide-in-bck-bottom').addClass('slide-out-bck-bottom')
}
let closeAddedToCartTimeout;
function openAddedToCart() {
    $(".added-to-cart").removeClass('slide-out-bck-bottom').addClass('slide-in-bck-bottom')
    clearTimeout(closeAddedToCartTimeout);
    // closeAddedToCartTimeout = setTimeout(() => {
    //     closeAddedToCart();
    // },7000)
}

///OLD STUFF///

function displayCart(data) {
    var numberofitems = 0
    data.array.forEach(item => {
        numberofitems = numberofitems + item.quantity
    })
    if (data.array.length != 0) {
        if (document.getElementById("bagNumber").classList.contains("d-none")) {
            document.getElementById("bagNumber").innerHTML = numberofitems
            document.getElementById("bagNumber").classList.toggle("d-none")
        } else {
            document.getElementById("bagNumber").innerHTML = numberofitems
        }
    } else {
        if (!document.getElementById("bagNumber").classList.contains("d-none")) {
            document.getElementById("bagNumber").classList.toggle("d-none")
        }
    }
    if (data.cart.discount != undefined && data.cart.discount != 0) {
        if (document.getElementById("cartdiscount").classList.contains("d-none")) {
            document.getElementById("cartdiscount").classList.toggle("d-none")
        }
        document.getElementById("cartdiscounthtml").innerHTML = data.cart.discount
    } else {
        if (!document.getElementById("cartdiscount").classList.contains("d-none")) {
            document.getElementById("cartdiscount").classList.toggle("d-none")
        }
    }
    if (data.cart.bulk_discount != undefined && data.cart.bulk_discount != 0) {
        if (document.getElementById("cartbulkdiscount").classList.contains("d-none")) {
            document.getElementById("cartbulkdiscount").classList.toggle("d-none")
        }
        document.getElementById("cartbulkdiscounthtml").innerHTML = data.cart.bulk_discount
    } else {
        if (!document.getElementById("cartbulkdiscount").classList.contains("d-none")) {
            document.getElementById("cartbulkdiscount").classList.toggle("d-none")
        }
    }
    document.getElementById("cartNumber1").innerHTML = "(" + numberofitems + ")"
    var items = document.getElementsByName("itemsInCart")
    var items2 = []
    items.forEach(item => {
        items2.push(item)
    })
    for (var i = 0; i < items2.length; i++) {
        console.log("i: " + i)
        items2[i].parentNode.removeChild(items2[i])
    }

    data.array.forEach(item => {
        var li = document.createElement("li")
        li.id = item.item._id
        li.setAttribute("name", "itemsInCart")
        var divImg = document.createElement("div")
        divImg.classList = "cart-dropdown__img-box"
        var picture = document.createElement("picture")
        if (item.item.vendor != "Trevco" && !item.item.name.includes("custom") && !item.item.name.includes("edittext")) {
            var sourceWep = document.createElement("source")
            sourceWep.srcset = item.item.images.product_image.replace(".jpg", ".webp")
            sourceWep.type = "image/webp"
            picture.appendChild(sourceWep)
        }
        var sourceJpg = document.createElement("source")
        sourceJpg.srcset = typeof item.item.images.garment_image != 'undefined' ? item.item.images.garment_image : typeof item.item.images.product_image != 'undefined' ? item.item.images.product_image : item.item.images.back_image
        sourceJpg.type = "image/jpeg"
        // picture.appendChild(sourceJpg)
        var img = new Image()
        img.src = typeof item.item.images.garment_image != 'undefined' ? item.item.images.garment_image : typeof item.item.images.product_image != 'undefined' ? item.item.images.product_image : item.item.images.back_image
        img.classList = "img-fluid product-box__front-img"
        img.alt = item.item.name
        img.onerror = function () {
            img.onerror = '';
            img.src = backImage;
        }
        picture.appendChild(img)
        divImg.appendChild(picture)
        if (item.item.name.includes('custom')) {
            try {
                if (typeof item.item.images.back_image != 'undefined') {
                    var back_image = new Image();
                    back_image.src = item.item.images.back_image;
                    back_image.classList = 'img-fluid product-box__back-img';
                    divImg.appendChild(back_image)
                }
            } catch (e) { }
        }
        li.appendChild(divImg)
        var divproduct = document.createElement("div")
        divproduct.classList = "cart-dropdown__product-info"
        var aname = document.createElement("a")
        aname.href = "/products/" + item.item.slug
        if (item.item.name.includes('custom')) {
            aname.href = `/ create - your - own ? sku = ${item.item.name}& color=${item.item.color_name} `
        }
        aname.onclick = function () { return false }
        aname.classList = "cart-dropdown__product-name"
        aname.innerHTML = item.item.name
        divproduct.appendChild(aname)
        var divcolor = document.createElement("div")
        divcolor.classList = "cart-dropdown__product-info-line"
        divcolor.innerHTML = "Color : " + item.item.color_name
        divproduct.appendChild(divcolor)
        var divproductinfo = document.createElement("div")
        divproductinfo.classList = "cart-dropdown__product-info-line"
        var spansize = document.createElement("span")
        spansize.innerHTML = "Size : " + item.item.size_name
        divproductinfo.appendChild(spansize)
        var spanqty = document.createElement("span")
        spanqty.innerHTML = " Qty: " + item.quantity
        divproductinfo.appendChild(spanqty)
        divproduct.appendChild(divproductinfo)
        li.appendChild(divproduct)
        var divprice = document.createElement("div")
        divprice.classList = "cart-dropdown__price"
        divprice.innerHTML = (parseInt(item.quantity) * parseFloat(item.item.price)).toFixed(2)
        li.appendChild(divprice)
        var adelete = document.createElement("a")
        adelete.href = "javascript:void(0);"
        adelete.classList = "cart-dropdown__delete-item"
        adelete.dataset.id = item.item._id
        adelete.dataset.price = item.item.price
        adelete.dataset.total = (parseInt(item.quantity) * parseFloat(item.item.price) + parseFloat(document.getElementById("cartTotal").innerHTML)).toFixed(2)
        //console.log(parseFloat(document.getElementById("cartTotal").innerHTML))
        adelete.dataset.number = data.length
        adelete.setAttribute("onclick", "removeFromCart(this)")
        var i = document.createElement("i")
        i.classList = "icon-delete-line"
        adelete.appendChild(i)
        li.appendChild(adelete)
        document.getElementById("cartItems").appendChild(li)
        document.getElementById("cartTotal").innerHTML = parseFloat(data.cart.totalCost - data.cart.discount - data.cart.bulk_discount).toFixed(2)
    })
    console.log("done")
    document.getElementById("shoppingbag").click()
}