text: // ************************************************
  // Shopping Cart API
  // ************************************************
  
  var shoppingCart = (function() {
      // =============================
      // Private methods and propeties
      // =============================
      cart = [];
  
      // Constructor
      function Item(name, id, count) {
        this.name = name;
        this.id = id;
        this.count = count;
      }
  
      // Save cart
      function saveCart() {
        localStorage.setItem('shoppingCart', JSON.stringify(cart));
      }
  
        // Load cart
      function loadCart() {
        cart = JSON.parse(localStorage.getItem('shoppingCart'));
      }
      if (localStorage.getItem("shoppingCart") != null) {
        loadCart();
      }
  
  
  
  
      // =============================
      // Public methods and propeties
      // =============================
      var obj = {};
  
      // Add to cart
      obj.addItemToCart = function( id,name, count) {
        for(var item in cart) {
          if(cart[item].id === id) {
            cart[item].count ++;
            saveCart();
            return;
          }
        }
        var item = new Item(name, id, count);
        cart.push(item);
        saveCart();
      }
      // Set count from item
      obj.setCountForItem = function(name, count) {
        for(var i in cart) {
          if (cart[i].name === name) {
            cart[i].count = count;
            break;
          }
        }
      };
      // Remove item from cart
      obj.removeItemFromCart = function(id) {
          for(var item in cart) {
            if(cart[item].id === id) {
              cart[item].count --;
              if(cart[item].count === 0) {
                cart.splice(item, 1);
              }
              break;
            }
        }
        saveCart();
      }
  
      // Remove all items from cart
      obj.removeItemFromCartAll = function(name) {
        for(var item in cart) {
          if(cart[item].name === name) {
            cart.splice(item, 1);
            break;
          }
        }
        saveCart();
      }
  
      // Clear cart
      obj.clearCart = function() {
        cart = [];
        saveCart();
      }
  
      // Count cart
      obj.totalCount = function() {
        var totalCount = 0;
        for(var item in cart) {
          totalCount += cart[item].count;
        }
        return totalCount;
      }
  
      // Total cart
      // obj.totalCart = function() {
      //   var totalCart = 0;
      //   for(var item in cart) {
      //     totalCart += cart[item].price * cart[item].count;
      //   }
      //   return Number(totalCart.toFixed(2));
      // }
  
      // List cart
      obj.listCart = function() {
          return cart;
      //   var cartCopy = [];
      //   for(i in cart) {
      //     item = cart[i];
      //     itemCopy = {};
      //     for(p in item) {
      //       itemCopy[p] = item[p];
      //     }
      //     itemCopy.total = Number(item.price * item.count).toFixed(2);
      //     cartCopy.push(itemCopy)
      //   }
      //   return cartCopy;
      }
      obj.cart = function(itemId) {
          // return cart;
        var CartItem = [];
        for(i in cart) {
          let item = cart[i];
  
          if (item.id == itemId) {
              CartItem.push(item)
              break;
          }
  
        }
        return CartItem;
      }
      obj.subtotal = async function() {
          let subTotal =0;
        for(i in cart) {
          let item = cart[i];
  
          let price = await new Promise(resolve=>{
              fetch(`/product-price/${item.id}`, {
                  method: 'get',
                  headers: {
                      'Content-Type': 'application/json',
                      'Accept': 'application/json',
                      'url': '/product-price',
                      // "X-CSRF-Token": document.querySelector('input[name=_token]').value
                  },
              }).then(res=>res.json())
                .then(data=>resolve(data));
          })
  
  
              subTotal +=  price
  
  
        }
  
        return subTotal;
      }
  
      // cart : Array
      // Item : Object/Class
      // addItemToCart : Function
      // removeItemFromCart : Function
      // removeItemFromCartAll : Function
      // clearCart : Function
      // countCart : Function
      // totalCart : Function
      // listCart : Function
      // saveCart : Function
      // loadCart : Function
      return obj;
    })();
  
  
  
    // *****************************************
    // Triggers / Events
    // *****************************************
    // Add item
  
  
    let gettingPrice =  function(itemId){
  
      return new Promise(resolve=>{
          fetch(`/product-price/${itemId}`, {
              method: 'get',
              headers: {
                  'Content-Type': 'application/json',
                  'Accept': 'application/json',
                  'url': '/product-price',
                  // "X-CSRF-Token": document.querySelector('input[name=_token]').value
              },
          }).then(res=>res.json())
            .then(data=>resolve(data));
      })
  
    }
  
    let gettingPrices =  function(data){
  
      return new Promise(resolve=>{
          fetch(`/product-price`, {
              method: 'POST',
              body: JSON.stringify(data),
              headers: {
                  'Content-Type': 'application/json',
                  'Accept': 'application/json',
                  'url': '/product-price',
                  "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
          }).then(res=>res.json())
            .then(data=>resolve(data));
      })
  
    }
  
    let gettingSubtotal= function (prices) {
        console.log(prices);
    }
  
  
    let displayCart2= async function (id) {
  
  
  
        let cart =shoppingCart.cart(id);
  
        if (cart[0].count >1) {
            let basketItem = document.getElementById(`${id}_basket`);
            let quantityDiv = basketItem.querySelector('.cart-item-quantity strong').innerHTML = cart[0].count;
            let priceDiv = basketItem.querySelector('.basket-product-details .basket-item-price');
            let price = await gettingPrice(id);
            let totalPrice = price * cart[0].count;
            priceDiv.innerHTML = `&euro;${totalPrice.toFixed(2)}`
  
        }else{
              let price = await gettingPrice(id);
              let newBasketItem = `<div id="${id}_basket" class="basket-product py-3" style="border-bottom:1px solid gray"><div class="basket-product-wrapper" style="position: relative;min-height: 65px;margin-bottom:10px"><div class="cart-item-quantity" style="position: absolute;top:0;left:0"><strong >${cart[0].count}</strong></div><div style="position: absolute;top:0; left:25px;width:calc(100% - 25px);"><div class="basket-product-details" style="display: flex;justify-content:space-between;align-items:center;font-size:14px"><strong class="basket-product-name" style="font-size: 14px">${cart[0].name}</strong><span ><span class="basket-item-price" style="font-size: 14px">&euro;${price}</span></span></div><div class="add-note-cart-item-amount" style="display: flex;justify-content:space-between;align-items:center;margin-top:10px"><div class="add-note"><a href="#" style="font-size: 14px">Add note</a></div><div class="cart-item-amount" style="display: flex;justify-content:space-between;align-items:center;gap:8px"><div class="cart-item-add plus-item" style="border:1px solid gray;padding:5px"><svg class="plus-item"  xmlns="http://www.w3.org/2000/svg" width="20" height="20"  fill="blue" class="bi bi-plus" viewBox="0 0 16 16"><path class="plus-item" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path></svg></div><div class="cart-item-remove minus-item" style="border:1px solid gray;padding:5px"><svg class="minus-item" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="blue" class="bi bi-dash" viewBox="0 0 16 16"><path class="minus-item" fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/></svg></div></div></div><div class="S4td4 d-none" data-qa="cart-item-comment"><textarea name="" id="" cols="30" rows="10"></textarea><button>Add</button><button>Cancel</button></div></div></div></div>`;
              let container =document.querySelector('#full-basket .basket-products');
              if (container.childElementCount > 0) {
                  container.insertAdjacentHTML('afterbegin', newBasketItem);
                  console.log('added insert')
              }else{
                  document.getElementById('empty-basket').style.display = 'none';
                  document.querySelector('#full-basket').style.display = 'block';
                  container.innerHTML = newBasketItem;
              }
        }
  
      let cartArray = shoppingCart.listCart();
  
      let productPrices = await gettingPrices(cartArray)
  
      // let subtotal =0;
  
      productPrices.forEach(elem=>{
  
          
      })
  
      // document.querySelector('.subtotal-cost').innerHTML=`&euro;${subtotal.toFixed(2)}`;
      // document.querySelector('.total-cost').innerHTML=`&euro;${subtotal.toFixed(2)}`;
      // document.querySelector('.mobile-basket').innerHTML=`&euro;${subtotal.toFixed(2)}`;
      // if (document.querySelector('.checkout-cost')) {
      //     document.querySelector('.checkout-cost').innerHTML=`&euro;${subtotal.toFixed(2)}`;
      // }
  
  
  
    }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    let items = document.querySelectorAll('.item-container');
  
    items.forEach(elem=>{
        elem.addEventListener("click",e=>{
            let parent = e.target.closest('.item-container');
            let itemId = parent.getAttribute('id');
            let itemName =parent.querySelector('.item-title').innerText;
            shoppingCart.addItemToCart(itemId, itemName,  1);
          //     displayCart();
          displayCart2(itemId);
  
        })
    })
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  //   shoppingCart.addItemToCart('Banana', 12.5, 1);
  //   shoppingCart.addItemToCart('Banana', 12.5, 3);
  //   shoppingCart.removeItemFromCartAll('Banana');
    // Clear items
  //   $('.clear-cart').click(function() {
  //     shoppingCart.clearCart();
  //     displayCart();
  //   });
  
      // shoppingCart.clearCart();
  
    function displayCart() {
      var cartArray = shoppingCart.listCart();
      // console.log(cartArray)
      if (cartArray.length <= 0) {
          document.getElementById('empty-basket').style.display = 'block';
          document.getElementById('full-basket').style.display = 'none';
          return true;
      }
  
      document.getElementById('empty-basket').style.display = 'none';
      document.querySelector('#full-basket').style.display = 'block';
      document.querySelector('#full-basket .basket-products').innerHTML = " ";
  
      let subtotal =0;
      cartArray.forEach(elem=>{
  
          let parent =document.getElementById(elem.id);
          // let priceText = parent.querySelector('.item-price').innerText;
          // let price = priceText.match(/\d+/g)[0];
  
          fetch(`/product-price/${elem.id}`, {
              method: 'get',
              headers: {
                  'Content-Type': 'application/json',
                  'Accept': 'application/json',
                  'url': '/product-price',
                  // "X-CSRF-Token": document.querySelector('input[name=_token]').value
              },
          }).then(res=>res.json())
            .then(data=>{
              let price = data;
              let totalPrice = price * elem.count;
              subtotal= subtotal+totalPrice;
              document.querySelector('#full-basket .basket-products').innerHTML +=`<div id="${elem.id}_basket" class="basket-product py-3" style="border-bottom:1px solid gray"><div class="basket-product-wrapper" style="position: relative;min-height: 65px;margin-bottom:10px"><div class="cart-item-quantity" style="position: absolute;top:0;left:0"><strong >${elem.count}</strong></div><div style="position: absolute;top:0; left:25px;width:calc(100% - 25px);"><div class="basket-product-details" style="display: flex;justify-content:space-between;align-items:center;font-size:14px"><strong class="basket-product-name" style="font-size: 14px">${elem.name}</strong><span ><span class="basket-item-price" style="font-size: 14px">&euro;${totalPrice}</span></span></div><div class="add-note-cart-item-amount" style="display: flex;justify-content:space-between;align-items:center;margin-top:10px"><div class="add-note"><a href="#" style="font-size: 14px">Add note</a></div><div class="cart-item-amount" style="display: flex;justify-content:space-between;align-items:center;gap:8px"><div class="cart-item-add plus-item" style="border:1px solid gray;padding:5px"><svg class="plus-item"  xmlns="http://www.w3.org/2000/svg" width="20" height="20"  fill="blue" class="bi bi-plus" viewBox="0 0 16 16"><path class="plus-item" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path></svg></div><div class="cart-item-remove minus-item" style="border:1px solid gray;padding:5px"><svg class="minus-item" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="blue" class="bi bi-dash" viewBox="0 0 16 16"><path class="minus-item" fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/></svg></div></div></div><div class="S4td4 d-none" data-qa="cart-item-comment"><textarea name="" id="" cols="30" rows="10"></textarea><button>Add</button><button>Cancel</button></div></div></div></div>`;
  
  
              document.querySelector('.subtotal-cost').innerHTML=`&euro;${subtotal}`;
              document.querySelector('.total-cost').innerHTML=`&euro;${subtotal}`;
              document.querySelector('.mobile-basket').innerHTML=`&euro;${subtotal}`;
              if (document.querySelector('.checkout-cost')) {
                  document.querySelector('.checkout-cost').innerHTML=`&euro;${subtotal}`;
              }
            });
      })
  
  
  
  
    }
  
    // Delete item button
  
  //   $('.show-cart').on("click", ".delete-item", function(event) {
  //     var name = $(this).data('name')
      // shoppingCart.removeItemFromCartAll(name);
  //     displayCart();
  //   })
  
  
    // -1
  //   $('.show-cart').on("click", ".minus-item", function(event) {
  //     var name = $(this).data('name')
  //     shoppingCart.removeItemFromCart(name);
  //     displayCart();
  //   })
    // +1
  //   $('.show-cart').on("click", ".plus-item", function(event) {
  //     var name = $(this).data('name')
  //     shoppingCart.addItemToCart(name);
  //     displayCart();
  //   })
  
  document.querySelector('#full-basket .basket-products').addEventListener('click',e=>{
      // console.log(e.target.className['baseVal'])
  
      // if (e.target.className !== "plus-item" || e.target.className !== "minus-item" || e.target.className['baseVal'] !== "plus-item") return false;
  
  
      if (e.target.className == "plus-item" || e.target.className['baseVal'] == "plus-item") {
          let parentId = e.target.closest('.basket-product').id.replace("_basket","");
          shoppingCart.addItemToCart(parentId);
          // displayCart();
          // displayCart2(parentId);
      }
  
      if (e.target.className == "minus-item" || e.target.className['baseVal'] == "minus-item") {
          let parentId = e.target.closest('.basket-product').id.replace("_basket","");
          shoppingCart.removeItemFromCart(parentId);
          displayCart();
      }
  
  
  
  })
  
    // Item count input
  //   $('.show-cart').on("change", ".item-count", function(event) {
  //      var name = $(this).data('name');
  //      var count = Number($(this).val());
  //     shoppingCart.setCountForItem(name, count);
  //     displayCart();
  //   });
  
    displayCart();
  