<!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>Add Product</title>
  </head>
  <body>
    <!-- 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/addProduct" method="post" class="w-lg-50">
        <h1>‚ûïAdd Productüç™</h1>
        <br />
        <div class="form-group">
          <label for="name">Product Name</label>
          <input
            type="text"
            name="name"
            id="name"
            class="form-control"
            placeholder="Enter product name"
            required
          />
        </div>
        <br />

        <div class="form-group">
          <label for="currentStock">Current Stock</label>
          <input
            type="number"
            min="0"
            name="currentStock"
            id="currentStock"
            class="form-control"
            placeholder="Enter current stock"
          />
        </div>
        <br />

        <div class="form-group price-group">
          <label for="prices">Prices</label>
          <div class="row px-0 mx-0" id="prices">
            <input
              type="text"
              name="priceType1"
              placeholder="Price Type 1"
              class="form-control col"
              required
            />
            <input
              type="number"
              name="priceValue1"
              placeholder="Price Value 1"
              class="form-control col"
              required
            />
          </div>
        </div>

        <br />
        <button
          class="btn btn-secondary form-btn"
          onclick="addPrice()"
          type="button"
        >
          Add Price
        </button>
        <button
          class="btn btn-secondary form-btn"
          onclick="removePrice()"
          type="button"
        >
          Remove Price
        </button>
        <br />
        <br />
        <div class="container w-100 d-flex justify-content-end p-0">
          <button type="submit" class="btn btn-primary form-btn">Submit</button>
          <button
            type="button"
            class="btn btn-primary form-btn ms-2"
            onclick="redirect('/invoiceDashboard/products')"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  </body>
  <script>
    function redirect(domain) {
      window.location.href = domain;
    }
    function addPrice() {
      const pricesContainer = document.querySelector(".price-group");
      const existingPairs =
        pricesContainer.querySelectorAll(".row.px-0.mx-0").length;
      const newPricePair = document.createElement("div");
      newPricePair.classList.add("row", "px-0", "mx-0");
      newPricePair.innerHTML = `
                <input type="text" name="priceType${
                  existingPairs + 1
                }" placeholder="Price Type ${
        existingPairs + 1
      }" class="form-control col" required>
                <input type="number" name="priceValue${
                  existingPairs + 1
                }" placeholder="Price Value ${
        existingPairs + 1
      }" class="form-control col" required>
            `;
      pricesContainer.appendChild(newPricePair);
    }

    function removePrice() {
      const pricesContainer = document.querySelector(".price-group");
      const existingPairs =
        pricesContainer.querySelectorAll(".row.px-0.mx-0").length;
      if (existingPairs > 1) {
        pricesContainer.removeChild(pricesContainer.lastChild);
      }
    }
  </script>
</html>
