<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="../styles/orderDashboard.css" />
    <link rel="shortcut icon" href="../icon.png" type="image/x-icon" />
    <title>Product Dashboard</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 active">
            <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>

    <!-- Title -->
    <h1 class="w-100 text-center mt-5 mb-4">Product Dashboardüç™</h1>

    <!-- Add Invoice Button Container -->
    <div class="container mt-4 d-flex justify-content-center">
      <button
        class="btn btn-primary text-center px-5"
        onclick="redirect('/invoiceDashboard/addProduct')"
      >
        Add Product
      </button>
    </div>

    <!-- Product Container -->
    <div class="container w-md-75 mb-5">
      <!-- Filter -->
      <div class="row d-flex mx-auto mt-5 mb-3 w-md-75">
        <div class="col-md-6 input-group mx-auto">
          <span class="input-group-text">
            <i class="fa-solid fa-filter"></i>
          </span>
          <input
            type="text"
            class="form-control form-floating"
            id="productNameFilter"
            placeholder="Filter by Product Name"
          />
        </div>
      </div>
      <div class="row d-flex mx-auto w-md-75">
        <div class="col-md-12">
          <div class="table-responsive mt-3 flipped-container">
            <table class="table flipped">
              <thead>
                <tr>
                  <th>Product Name</th>
                  <th>Product Prices</th>
                  <th class="text-center">Current Stock</th>
                  <th class="text-center">Options</th>
                </tr>
              </thead>
              <tbody>
                <% slicedData.forEach(product => { %>
                <tr>
                  <td class="col-4"><%= product.name %></td>
                  <td class="col-3">
                    <% Object.entries(product.prices).forEach(([key, value]) =>
                    { %>
                    <strong><%= key %>:</strong> <%= formatRupiah(value) %>
                    <br />
                    <% }) %>
                  </td>
                  <td class="col-3 text-center"><%= product.currentStock %></td>
                  <td class="col-2 text-center">
                    <div class="product-options">
                      <button
                        class="btn btn-primary order-button btn-sm position-sticky end-0"
                        onclick="redirect('/invoiceDashboard/editProduct/<%= product._id %>')"
                      >
                        <i class="fa-solid fa-pen-to-square"></i>
                      </button>
                      <button
                        class="btn btn-danger order-button btn-sm position-sticky end-0"
                        onclick="redirect('/invoiceDashboard/deleteProduct/<%= product._id %>')"
                      >
                        <i class="fa-solid fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"
  ></script>
  <script>
    function redirect(domain) {
      window.location.href = domain;
    }

    document
      .getElementById("productNameFilter")
      .addEventListener("input", function () {
        const filterValue = this.value.toLowerCase();
        const tableRows = document.querySelectorAll(".table tbody tr");
        tableRows.forEach((row) => {
          const productName = row
            .querySelector("td:first-child")
            .textContent.toLowerCase();
          if (productName.includes(filterValue)) {
            row.style.display = "";
          } else {
            row.style.display = "none";
          }
        });
      });
  </script>
</html>
