<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <!-- <link rel="stylesheet" href="../styles/main.css" /> -->
    <link rel="stylesheet" href="../../styles/orderDashboard.css" />
    <link rel="shortcut icon" href="../../icon.png" type="image/x-icon" />
    <title>Delete Order</title>
  </head>
  <body>
    <% function formatRupiah(number) { return number.toLocaleString('id-ID', {
    style: 'currency', currency: 'IDR' }); } %>
    <!-- Header -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
      <button
        class="navbar-toggler ms-3"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto px-3">
          <li class="nav-item">
            <a href="/orderDashboard" class="nav-link">Orders</a>
          </li>
          <li class="nav-item">
            <a href="/orderDashboard/products" class="nav-link">Products</a>
          </li>
          <li class="nav-item">
            <a href="/orderDashboard/hampers" class="nav-link">Hampers</a>
          </li>
          <li class="nav-item">
            <a href="/orderDashboard/customers" class="nav-link">Customers</a>
          </li>
          <li class="nav-item">
            <a href="/orderDashboard/statistics" class="nav-link">Statistics</a>
          </li>
        </ul>
      </div>
      <div class="logout-container d-flex flex-row">
        <p class="text-light m-0 me-3 align-middle py-2">Order Account </p>
        <button class="btn btn-light me-3" onclick="redirect('/logout')">Logout</button>
      </div>
    </nav>

    <!-- Form -->
    <div class="container mx-auto mt-5 d-flex flex-row justify-content-center">
      <form
        action="/orderDashboard/deleteOrder/<%= order._id %>"
        method="post"
        class="w-lg-50"
      >
        <h1>‚ùåConfirm Delete Orderüßæ</h1>
        <br />
        <p>
          Are you sure you want to delete this order? This cannot be undone.
        </p>
        Customer Name: <%= order.customerName %> <br />
        Customer Address: <%= order.customerAddress %> <br />
        Customer Note: <%= order.customerNote %> <br />
        <br />

        Delivery Date: <%= order.deliveryDate %> <br />
        Order Note: <%= order.details %> <br />
        <br />
        <div class="table-responsive flipped-container">
          <table class="table table-borderless align-middle text-star flipped">
            <thead>
              <tr>
                <th class="col-4">Name</th>
                <th class="col-4">Price</th>
                <th class="col-2">Quantity</th>
                <th class="col-2">Subtotal</th>
              </tr>
            </thead>
            <tbody class="table-group-divider">
              <% var total = 0; %> <% order.productContent.forEach(product => {
              %>
              <tr>
                <td><%= product.name %></td>
                <% if(product.discount === 0) { %>
                <td>
                  <%= formatRupiah(product.priceValue) %> (<%= product.priceType
                  %>)
                </td>
                <% var subtotal = product.priceValue; %> <% } else { %> <% var
                discountValue = parseInt(product.priceValue * product.discount /
                100); %> <% var subtotal = product.priceValue - discountValue;
                %>
                <td>
                  <%= formatRupiah(product.priceValue) %> (<%= product.priceType
                  %>) <br />
                  - <%= formatRupiah(discountValue) %> (<%= product.discount
                  %>%) <br />
                  = <%= formatRupiah(subtotal) %>
                </td>
                <% } %>
                <td>x <%= product.quantity %></td>
                <td><%= formatRupiah(subtotal * product.quantity) %></td>
                <% total += subtotal * product.quantity; %>
              </tr>
              <% }) %> <% order.hamperContent.forEach(hamper => { %>
              <tr>
                <td><%= hamper.name %></td>
                <% if(hamper.discount === 0) { %>
                <td>
                  <%= formatRupiah(hamper.priceValue) %> (<%= hamper.priceType
                  %>)
                </td>
                <% var subtotal = hamper.priceValue; %> <% } else { %> <% var
                discountValue = parseInt(hamper.priceValue * hamper.discount /
                100); %> <% var subtotal = hamper.priceValue - discountValue; %>
                <td>
                  <%= formatRupiah(hamper.priceValue) %> (<%= hamper.priceType
                  %>) <br />
                  - <%= formatRupiah(discountValue) %> (<%= hamper.discount %>%)
                  <br />
                  = <%= subtotal %>
                </td>
                <% } %>
                <td>x <%= hamper.quantity %></td>
                <td><%= formatRupiah(subtotal * hamper.quantity) %></td>
                <% total += subtotal * hamper.quantity; %>
              </tr>
              <% }) %>

              <tr>
                <td colspan="3" style="text-align: right">
                  <strong>Total</strong>
                </td>
                <td><%= formatRupiah(total) %></td>
              </tr>

              <% if(order.orderDiscount !== 0) { %>
              <tr>
                <td colspan="3" style="text-align: right">
                  <strong>Discount (<%= order.orderDiscount %>%)</strong>
                </td>
                <td>
                  <%= formatRupiah(parseInt(order.orderDiscount * total / 100))
                  %>
                </td>
              </tr>
              <tr>
                <td colspan="3" style="text-align: right">
                  <strong>Final Total</strong>
                </td>
                <td>
                  <%= formatRupiah(total - parseInt(order.orderDiscount * total
                  / 100)) %>
                </td>
              </tr>
              <% } %>
            </tbody>
            <tfoot></tfoot>
          </table>
        </div>
        <br />
        <div class="container w-100 d-flex justify-content-end p-0 mb-5">
          <button type="submit" class="btn btn-danger form-btn">
            Delete Order
          </button>
          <button
            type="button"
            class="btn btn-primary form-btn ms-2"
            onclick="redirect('/orderDashboard')"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  </body>
  <script>
    function redirect(domain) {
      window.location.href = domain;
    }
  </script>
</html>
