<%- include('../includes/head.ejs') %>
<link rel="stylesheet" href="/css/cart.css">
</head>

<body>
<%- include('../includes/navigation.ejs') %>

<main>
  <ul class="cart__item-list">
    <% products.forEach((product) => { %>
      <li class="cart__item">
        <h1><%= product.productId.title %></h1>
        <h2>Quantity: <%= product.quantity %></h2>
      </li>
    <% }) %>
  </ul>
  <h2 class="centered">Total Price: $<%= totalPrice %></h2>
  <div class="centered">
    <button class="btn" id="order-btn">ORDER</button>
    <script src="https://js.stripe.com/v3/"></script>
    <script>
      const stripe = Stripe('pk_test_51GsE8QKgkkR5AU1871NLWPSF3PtXLrlZpwoocM' +
        'iVRLdvcoLOYHrlPJz5PqfhfnEhiUMtHUcbfBhM4I6kTn6CWPct00vKmVYTXC');
      const orderButton = document.getElementById('order-btn');
      orderButton.addEventListener('click', () => {
        stripe.redirectToCheckout({ sessionId: '<%= sessionId %>'})
          .then(function (result) {
            // If `redirectToCheckout` fails due to a browser or network
            // error, display the localized error message to your customer
            // using `result.error.message`.
            console.log(result.error.message);
          });
      });
    </script>
  </div>
</main>

<%- include('../includes/end.ejs') %>

