Untitled

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page isELIgnored="false"%>

<fmt:setLocale value="bg_BUL" />
<fmt:setBundle basename="i18n.text" />

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous"></script>

<link
	href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
	rel="stylesheet">

<meta charset="UTF-8">
<title><fmt:message key="TITLE" /></title>
</head>
<header>
	<h1>
		<fmt:message key="TITLE" />
	</h1>
</header>
<body>

	<script>
                $(document).ready(function() {
                	  $(".operator").click(function(event) {
                		  var text = event.target.id;
                		  var pattern = /\d/g;
                		  var id = text.match(pattern);
                		  var subtotalOfProduct = $("#product_base_price" + id).val() * $("#number" + id).val();

                	      $("#product_total_price" + id)
                	      .text(subtotalOfProduct);

                	      var total = 0;
                	      var i = 1;
                	      var length = ${length};
                	      console.log(length);
                	      while(i <= length){
                	    	  console.log("in");
                	    	  total = total + $("#product_base_price" + ${cp.id}).val() * $("#number" + ${cp.id}).val();
                			  i++;
                	      }
                	      $("#orderCost").text(total);
                	  });
                	});

				</script>


	<div>
		<table>
			<thead>
				<tr>
					<th colspan="2"><fmt:message key="PRODUCT" /></th>
					<th><fmt:message key="PRICE" /></th>
					<th><fmt:message key="QUANTITY" /></th>
					<th><fmt:message key="SUBTOTAL" /></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${requestScope.cartProducts}" var="cp">
					<tr>
						<td>
							<div>
								<img src="http://placehold.it/100x100" class="img-responsive" />
							</div>
						</td>
						<td>
							<div>
								<h4>${cp.name}</h4>
							</div>
						</td>
						<td>${cp.price}</td>

						<td><form name="quantityForm" method="post">
								<input style="font-size: 21px;" type="button" value="-"
									id="btn${cp.id}"
									onclick='javascript: document.getElementById("number${cp.id}").value--;'
									class="operator"> <input id="number${cp.id}"
									type="number" name="quantity" min="1" max="100"
									value="${cp.quantity}"> <input id="btn${cp.id}"
									style="font-size: 21px;" type="button" value="+"
									onclick='javascript: document.getElementById("number${cp.id}").value++;'
									class="operator">

							</form> <input type="hidden" id="product_base_price${cp.id}"
							value="${cp.price}">
						<td>
							<div id="product_total_price${cp.id}">${cp.price * cp.quantity }</div>
						</td>
						<%-- 	<input type="hidden" id="orderCostHidden" value="${orderCost + cp.price * cp.quantity}"> --%>
						<c:set var="orderCostInitial" scope="session"
							value="${orderCostInitial + cp.price * cp.quantity}" />
						<td>
							<button class="btn btn-danger btn-sm">
								<i class="fa fa-trash-o"></i>
							</button>
						</td>
					</tr>
				</c:forEach>
				<c:set var="length" value = "${fn:length(cp)}"/>
			</tbody>
			<tfoot>
				<tr>
					<td align="center" class="text-center"><strong><fmt:message
								key="TOTAL" />
							<div id="orderCost">${orderCostInitial}</div> </strong></td>
				</tr>
				<tr>
					<td><a href="#" class="btn btn-warning"><i
							class="fa fa-angle-left"></i> <fmt:message
								key="CONTINUE_SHOPPING" /></a></td>
					<td colspan="2" class="hidden-xs"></td>
					<td><a href="/cmania/checkout"
						class="btn btn-success btn-block"> <fmt:message key="CHECKOUT" /><i
							class="fa fa-angle-right"></i>
					</a></td>
				</tr>

			</tfoot>

		</table>
	</div>


</body>
<footer>
	<fmt:message key="COPYRIGHT" />
</footer>
</html>