<!-- Daterangepicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div class="row">
  <div class="col-md-12 mt-2">
    <div class="card card-info">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title">
          <%= sectionTitle %>
        </h3>
      </div>
      <div class="card-body">
        <form action="/product-series/add" method="POST">
          <!-- Produkt Dropdown -->
          <div class="row">
            <div class="col-md-4 mb-3">
              <label>Produkt</label>
              <select id="productSelect" name="product_id" class="form-control" required>
                <option value="">Wählen Sie Produkt</option>
                <% products.forEach(p=> { %>
                  <option value="<%= p.id %>"><%= p.model_name %></option>
                <% }) %>
              </select>
            </div>

            <!-- Verpackung (loads dynamically) -->
            <div class="col-md-4 mb-3">
              <label>Artikel-Nr</label>
              <select id="packagingSelect" name="packaging_id" class="form-control" required>
                <option value="">Wählen Sie Artikel-Nr</option>
              </select>
            </div>
          </div>

          <!-- Container for dynamic fields -->
          <div id="warehouseFields" style="display: none;">
            <div id="fieldsContainer">
              <div class="row warehouse-group mb-3">
                <div class="col-md-2">
                  <label>Seriennummer</label>
                  <input type="text" name="serial_number[]" class="form-control">
                </div>
                <div class="col-md-2">
                  <label>Edmonds Lieferung</label>
                  <input type="text" name="edmonds_delivery[]" class="form-control datepicker" placeholder="Datum wählen">
                </div>
                <div class="col-md-2">
                  <label>Herstellungsdatum</label>
                  <input type="text" name="date_of_manufacture[]" class="form-control datepicker" placeholder="Datum wählen">
                </div>
                <div class="col-md-2">
                  <label>Ausgeführt von</label>
                  <input type="text" name="executed_by[]" class="form-control">
                </div>
                <div class="col-md-2">
                  <label>Lager</label>
                  <select name="warehouse_id[]" class="form-control" required>
                    <option value="">Wählen Sie Lager</option>
                    <% warehouses.forEach(w=> { %>
                      <option value="<%= w.warehouse_id %>"><%= w.warehouse_name %></option>
                    <% }) %>
                  </select>
                </div>
                <div class="col-md-1 mt-4">
                  <button type="button" class="btn btn-success btn-sm addRow mt-1 mr-1 p-2">+</button>
                  <button type="button" class="btn btn-danger btn-sm removeRow mt-1 p-2">-</button>
                </div>
              </div>
            </div>
          </div>

          <div class="mt-3">
            <button type="submit" class="btn btn-success">Speichern</button>
            <a href="/product-series/list" class="btn btn-secondary">Zurück</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/locale/de.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
  moment.locale("de");

  // Show form after selecting product & load packaging
  document.getElementById("productSelect").addEventListener("change", function () {
    let productId = this.value;
    let packagingSelect = document.getElementById("packagingSelect");
    packagingSelect.innerHTML = '<option value=""></option>';

    if (productId) {
      document.getElementById("warehouseFields").style.display = "block";

      fetch(`/product-series/get-packagings/${productId}`)
        .then(res => res.json())
        .then(data => {
          packagingSelect.innerHTML = '<option value="">Wählen Sie Verpackung</option>';
          data.forEach(pk => {
            let opt = document.createElement("option");
            opt.value = pk.id;
            opt.textContent = pk.package_number;
            packagingSelect.appendChild(opt);
          });
        })
        .catch(() => {
          packagingSelect.innerHTML = '<option value="">Fehler beim Laden</option>';
        });
    } else {
      packagingSelect.innerHTML = '<option value="">Wählen Sie Verpackung</option>';
      document.getElementById("warehouseFields").style.display = "none";
    }
  });

  // Add / Remove row dynamically
  document.addEventListener("click", function (e) {
    if (e.target.classList.contains("addRow")) {
      let group = e.target.closest(".warehouse-group");
      let clone = group.cloneNode(true);
      clone.querySelectorAll("input").forEach(i => i.value = "");
      clone.querySelectorAll("select").forEach(s => s.value = "");
      group.parentNode.appendChild(clone);

      // Re-init datepickers in new row
      $(clone).find(".datepicker").daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: true,
        locale: {
          format: "YYYY-MM-DD",
          applyLabel: "Anwenden",
          cancelLabel: "Abbrechen",
          daysOfWeek: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
          monthNames: [
            "Januar","Februar","März","April","Mai","Juni",
            "Juli","August","September","Oktober","November","Dezember"
          ],
          firstDay: 1
        }
      });
    }
    if (e.target.classList.contains("removeRow")) {
      let groups = document.querySelectorAll(".warehouse-group");
      if (groups.length > 1) {
        e.target.closest(".warehouse-group").remove();
      }
    }
  });

  // Init datepickers on page load
  $(function () {
    $(".datepicker").daterangepicker({
      singleDatePicker: true,
      autoUpdateInput: true,
      locale: {
        format: "YYYY-MM-DD", // ✅ ensures value same as <input type="date">
        applyLabel: "Anwenden",
        cancelLabel: "Abbrechen",
        daysOfWeek: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
        monthNames: [
          "Januar","Februar","März","April","Mai","Juni",
          "Juli","August","September","Oktober","November","Dezember"
        ],
        firstDay: 1
      }
    });
  });
</script>
<script>
  // When product changes
  document.getElementById("productSelect").addEventListener("change", function () {
    let productId = this.value;
    let packagingSelect = document.getElementById("packagingSelect");
    packagingSelect.innerHTML = '<option value="">Wählen Sie Artikel-Nr</option>';

    document.getElementById("warehouseFields").style.display = "none"; // hide

    if (productId) {
      fetch(`/product-series/get-packagings/${productId}`)
        .then(res => res.json())
        .then(data => {
          packagingSelect.innerHTML = '<option value="">Wählen Sie Artikel-Nr</option>';
          data.forEach(pk => {
            let opt = document.createElement("option");
            opt.value = pk.id;
            opt.textContent = pk.package_number;
            packagingSelect.appendChild(opt);
          });
        });
    }
  });

  // When packaging is selected → NOW SHOW SERIAL NUMBER FIELDS
  document.getElementById("packagingSelect").addEventListener("change", function () {
    if (this.value) {
      document.getElementById("warehouseFields").style.display = "block";  
    } else {
      document.getElementById("warehouseFields").style.display = "none";
    }
  });
</script>
