<!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>Edit 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="/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/editProduct/<%= productData._id %>"
        method="post"
        class="w-lg-50"
      >
        <h1>‚úçÔ∏èEdit 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"
            value="<%= productData.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"
            value="<%= productData.currentStock %>"
          />
        </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('/orderDashboard/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);
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const priceGroup = document.querySelector('.price-group');
        const orderDataPrices = <%- JSON.stringify(productData.prices) %>;

        // Function to populate input fields with values from the OrderData.prices object
        function populatePrices(pricesObject) {
            Object.entries(pricesObject).forEach(([key, value], index) => {
                const rowDiv = document.createElement('div');
                rowDiv.classList.add('row', 'px-0', 'mx-0');

                const priceTypeInput = document.createElement('input');
                priceTypeInput.type = 'text';
                priceTypeInput.name = `priceType${index + 1}`;
                priceTypeInput.placeholder = `Price Type ${index + 1}`;
                priceTypeInput.classList.add('form-control', 'col');
                priceTypeInput.value = key;
                rowDiv.appendChild(priceTypeInput);

                const priceValueInput = document.createElement('input');
                priceValueInput.type = 'number';
                priceValueInput.name = `priceValue${index + 1}`;
                priceValueInput.placeholder = `Price Value ${index + 1}`;
                priceValueInput.classList.add('form-control', 'col');
                priceValueInput.value = value;
                rowDiv.appendChild(priceValueInput);

                priceGroup.appendChild(rowDiv);
            });
        }

        // Call the function to populate input fields with values from OrderData.prices
        populatePrices(orderDataPrices);
    });
  </script>
</html>
