<nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded">
  <div class="row">
  <div class="col">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cart">Cart (<span class="total-count"></span>)</button><button class="clear-cart btn btn-danger">Clear Cart</button></div>
  </div>
</nav>

<!-- Main -->
<div class="container">
  <div class="row">
  <div class="col">
  <div class="card" style="width: 20rem;">
  <img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap">
  <div class="card-block">
  <h4 class="card-title">Orange</h4>
  <p class="card-text">Price: $0.5</p>
  <a href="#" data-name="Orange" data-price="0.5" class="add-to-cart btn btn-primary">Add to cart</a>
  </div>
</div>
  </div>
  <div class="col">
  <div class="card" style="width: 20rem;">
  <img class="card-img-top" src="http://images.all-free-download.com/images/graphicthumb/vector_illustration_of_ripe_bananas_567893.jpg" alt="Card image cap">
  <div class="card-block">
  <h4 class="card-title">Banana</h4>
  <p class="card-text">Price: $1.22</p>
  <a href="#" data-name="Banana" data-price="1.22" class="add-to-cart btn btn-primary">Add to cart</a>
  </div>
</div>
  </div>
  <div class="col">
  <div class="card" style="width: 20rem;">
  <img class="card-img-top" src="https://3.imimg.com/data3/IC/JO/MY-9839190/organic-lemon-250x250.jpg" alt="Card image cap">
  <div class="card-block">
  <h4 class="card-title">Lemon</h4>
  <p class="card-text">Price: $5</p>
  <a href="#" data-name="Lemon" data-price="5" class="add-to-cart btn btn-primary">Add to cart</a>
  </div>
</div>
  </div>
  </div>
</div>

   
  <!-- Modal -->
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
  </button>
  </div>
  <div class="modal-body">
  <table class="show-cart table">
   
  </table>
  <div>Total price: $<span class="total-cart"></span></div>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Order now</button>
  </div>
  </div>
  </div>
</div>

<style>
body {
  padding-top: 80px;
}

.show-cart li {
  display: flex;
}
.card {
  margin-bottom: 20px;
}
.card-img-top {
  width: 200px;
  height: 200px;
  align-self: center;
}
</style>

<script>
// ************************************************
// Shopping Cart API
// ************************************************

var shoppingCart = (function() {
  // =============================
  // Private methods and propeties
  // =============================
  cart = [];
   
  // Constructor
  function Item(name, price, count) {
  this.name = name;
  this.price = price;
  this.count = count;
  }
   
  // Save cart
  function saveCart() {
  sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
  }
   
  // Load cart
  function loadCart() {
  cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
  }
  if (sessionStorage.getItem("shoppingCart") != null) {
  loadCart();
  }
   

  // =============================
  // Public methods and propeties
  // =============================
  var obj = {};
   
  // Add to cart
  obj.addItemToCart = function(name, price, count) {
  for(var item in cart) {
  if(cart[item].name === name) {
  cart[item].count ++;
  saveCart();
  return;
  }
  }
  var item = new Item(name, price, 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(name) {
  for(var item in cart) {
  if(cart[item].name === name) {
  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() {
  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;
  }

  // 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
$('.add-to-cart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  shoppingCart.addItemToCart(name, price, 1);
  displayCart();
});

// Clear items
$('.clear-cart').click(function() {
  shoppingCart.clearCart();
  displayCart();
});

function displayCart() {
  var cartArray = shoppingCart.listCart();
  var output = "";
  for(var i in cartArray) {
  output += "<tr>"
  + "<td>" + cartArray[i].name + "</td>"  
  + "<td>(" + cartArray[i].price + ")</td>"
  + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
  + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
  + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
  + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
  + " = "  
  + "<td>" + cartArray[i].total + "</td>"  
  + "</tr>";
  }
  $('.show-cart').html(output);
  $('.total-cart').html(shoppingCart.totalCart());
  $('.total-count').html(shoppingCart.totalCount());
}

// 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();
})

// 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();
</script>