<html
        xmlns:th="http://www.thymeleaf.org"
>

<head>
  <title>My Cart</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
  .badge-notify{
    background:red;
    position:relative;
    top: -20px;
    right: 10px;
  }
  .my-cart-icon-affix {
    position: fixed;
    z-index: 999;
  }
  /**
 * Print stylesheet for yourwebsite.com
* @version         1.0
* @lastmodified    16.06.2016
*/

@media print {
    .hide_product{
      display: none!important;
    }
    body {
 line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}
.box{
  margin-bottom: 100px;
}
}


</style>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{css/style.css}">
</head>

<body class="container">

  <div class="page-header hide_product">
    <h1>Products
      <div style="float: right; cursor: pointer; ">
         <a th:href="@{/login}"><span class="glyphicon glyphicon-user "></span></a>
      </div>
      <div style="float: right; cursor: pointer;">
        <span class="glyphicon glyphicon-shopping-cart my-cart-icon"><span class="badge badge-notify my-cart-badge"></span></span>
      </div>
    </h1>
  </div>

  <!-- <button type="addNewProduct" class="hide_product" name="addNewProduct" id="addNewProduct">Add New Product</button> -->
  <div class="row card">

    <div class="col-md-3 text-center box hide_product" th:each="product:${products}">
      <img th:src="'img/'+${product.img}" width="150px" height="150px">
      <h3><span th:text="${product.name}"></span></h3>
      <h4><strong th:text="${#numbers.formatCurrency(product.price)}"></strong></h4>

      <button style="margin-bottom: 15px;" class="btn btn-primary my-cart-btn" th:attr="data-id=${product.id},data-name=${product.name},data-summary=${product.des},data-price=${product.price},data-image='img/'+${product.img}"     data-quantity="1" >Add to Cart</button>

    </div>








  </div>

  <script th:src="@{js/jquery-2.2.3.min.js}"></script>
  <script type='text/javascript' th:src="@{js/bootstrap.min.js}"></script>
  <script type='text/javascript' th:src="@{js/jquery.mycart.js}"></script>
  <script type="text/javascript">
  $(function () {

    var goToCartIcon = function($addTocartBtn){
      var $cartIcon = $(".my-cart-icon");
       var $image = $('<img width="30px" height="30px" src="' + $addTocartBtn.data("image") + '"/>').css({"position": "fixed", "z-index": "999"});
      $addTocartBtn.prepend($image);
       var position = $cartIcon.position();
      $image.animate({
        top: position.top,
        left: position.left
      }, 500 , "linear", function() {
        $image.remove();
      });
    }

    $('.my-cart-btn').myCart({
      currencySymbol: '$',
      classCartIcon: 'my-cart-icon',
      classCartBadge: 'my-cart-badge',
      classProductQuantity: 'my-product-quantity',
      classProductRemove: 'my-product-remove',
      classCheckoutCart: 'my-cart-checkout',
      affixCartIcon: true,
      showCheckoutModal: true,
      numberOfDecimals: 2,


      clickOnAddToCart: function($addTocart){
        goToCartIcon($addTocart);
      },
      afterAddOnCart: function(products, totalPrice, totalQuantity) {
        console.log("afterAddOnCart", products, totalPrice, totalQuantity);
      },
      clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) {
        console.log("cart icon clicked", $cartIcon, products, totalPrice, totalQuantity);
      },
      checkoutCart: function(products, totalPrice, totalQuantity) {
        var checkoutString = "Total Price: " + totalPrice + "\nTotal Quantity: " + totalQuantity;
        checkoutString += "\n\n id \t name \t summary \t price \t quantity \t image path";
        $.each(products, function(){
          checkoutString += ("\n " + this.id + " \t " + this.name + " \t " + this.summary + " \t " + this.price + " \t " + this.quantity + " \t " + this.image);
          
        });
        alert(checkoutString)
        console.log("checking out", products, totalPrice, totalQuantity);
      },
      getDiscountPrice: function(products, totalPrice, totalQuantity) {
        console.log("calculating discount", products, totalPrice, totalQuantity);
        return totalPrice * 0.5;
      }
    });

    $("#addNewProduct").click(function(event) {
      var currentElementNo = $(".row").children().length + 1;
      $(".row").append('<div class="col-md-3 text-center"><img src="images/img_empty.png" width="150px" height="150px"><br>product ' + currentElementNo + ' - <strong>$' + currentElementNo + '</strong><br><button class="btn btn-danger my-cart-btn" data-id="' + currentElementNo + '" data-name="product ' + currentElementNo + '" data-summary="summary ' + currentElementNo + '" data-price="' + currentElementNo + '" data-quantity="1" data-image="images/img_empty.png">Add to Cart</button><a href="#" class="btn btn-info">Details</a></div>')
    });
  });
  </script>

</body>

</html>
