<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./parcials/cssLinks') %>
</head>
<body>
<%- include('./parcials/header') %>
<main>
<section class="register">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12">
<% if(user.cart.length > 0){ %>
<div>
<h2 class="theme-h2">Cart</h2>
<div class="table-responsive">
<table class="table table-striped cart-table mb-0">
<thead>
<tr>
<th></th>
<th></th>
<th>Products</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<% let totalPrice = 0 %>
<% user.cart.forEach((item,index)=>{ %>
<tr>
<td>
<form action="/api/user/remove-from-cart" method="post">
<input type="hidden" value="<%= index %>" />
<button class="delete-item" type="submit"><i class="fa-solid fa-trash"></i></button>
</form>
</td>
<td><img class="img-fluid" src="/images/dashboard-logo.png"></td>
<td><%= item.message %></td>
<td>$<%= item.price %></td>
<td><%= item.credits %> Credits</td>
<td>$<%= item.price * item.quantity %></td>
<% totalPrice += (item.price * item.quantity) %>
</tr>
<% }) %>
</tbody>
</table>
</div>
<!--<div class="table-footer">-->
<!-- <div class="coupon-code">-->
<!-- <input type="text" placeholder="Coupon Code..." >-->
<!-- <button>Apply Coupon</button>-->
<!-- </div>-->
<!-- <button class="update-card">Update Cart</button>-->
<!--</div>-->
</div>
<div class="row justify-content-end mt-lg-5">
<div class="col-lg-3 col-12">
<h4 class="theme-h4">Cart Total</h4>
<ul class="cart-pricing">
<li class="theme-p paypal-p m-0"><strong>Subtotal</strong><span>$<%= totalPrice.toFixed(2) %></span></li>
<li class="theme-p paypal-p m-0"><strong>Total</strong><span>$<%= totalPrice.toFixed(2) %></span></li>
</ul>
<p class="theme-p paypal-p"><img class="paypal-img img-fluid" src="/images/paypal.png"> Pay in 4 interest fee-payments on purchases of $30 to $1,500</p>
<form action="/api/payment/create-payment" method="POST">
<button class="paypal-btn">Place Order</button>
</form>
</div>
</div>
<% } else { %>
<div class="no-cart text-center">
<h2 class="theme-h2">Your cart is currently empty.</h2>
<p class="theme-p">Before proceed to checkout you must add some packages to your cart. You will find a lot of interesting packages on our "Packages" page.</p>
<a class="theme-btn mx-auto" href="/packages">Packages</a>
</div>
<% } %>
</div>
</div>
</div>
</section>
</main>
<%- include('./parcials/footer') %>
<%- include('./parcials/scriptLinks') %>
</body>
</html>