<!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>Archive Invoice</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="/invoiceDashboard" class="nav-link">Invoices</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/products" class="nav-link">Products</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/hampers" class="nav-link">Hampers</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/customers" class="nav-link">Customers</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/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">Invoice 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="/invoiceDashboard/archiveInvoice/<%= invoice._id %>"
        method="post"
        class="w-lg-50"
      >
        <h1>üóÉÔ∏èConfirm Archive Invoice</h1>
        <input type="hidden" name="chosenOrder" value="<%= invoice.oldProductId %>">
        <br />
        <p>
          Are you sure you want to archive this invoice? This cannot be undone. <br>
          <strong>You will NOT be able to modify this invoice after archiving it.</strong>
        </p>
        <% if(invoice.oldProductId !== '' && invoice.oldProductId) {%>
          Invoice Type: Taken from order sent on <%= invoice.updatedAt.split('T')[0] %><br>
          <% if(invoice.modified) {%>
            <strong>This invoice does NOT match the original order.</strong> <br>
          <% } %>
        <% } else { %>
          Invoice Type: Created from Scratch <br>
        <% } %>
        <br>

        Customer Name: <%= invoice.customerName %> <br>
        Customer Address: <%= invoice.customerAddress %> <br>
        Customer Note: <%= invoice.customerNote %> <br> <br>

        Delivery Date: <%= invoice.deliveryDate %> <br>
        Invoice Note: <%= invoice.details %> <br>

        <div hidden id="customerName"><%= invoice.customerName %></div>
        <div hidden id="deliveryDate"><%= invoice.deliveryDateOld.split('T')[0] %></div>

        <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; %>
              <% invoice.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>
              <% }) %>
              <% invoice.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(invoice.invoiceDiscount !== 0) { %>
                <tr>
                  <td colspan="3" style="text-align: right;"><strong>Discount (<%= invoice.invoiceDiscount %>%)</strong></td>
                  <td><%= formatRupiah(parseInt(invoice.invoiceDiscount * total / 100)) %></td>
                </tr>
                <tr>
                  <td colspan="3" style="text-align: right;"><strong>Final Total</strong></td>
                  <td><%= formatRupiah(total - parseInt(invoice.invoiceDiscount * 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">
            Archive Invoice
          </button>
          <button
            type="button"
            class="btn btn-primary form-btn ms-2"
            onclick="redirect('/invoiceDashboard')"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  </body>
  <script>
    function redirect(domain) {
      window.location.href = domain;
    }
  </script>
</html>
