<div class="row">
  <div class="col-md-12 mt-2">
    <form
      id="cmsForm"
      method="post"
      action="/packages/update"
      enctype="multipart/form-data"
      novalidate
    >
      <div class="card card-info">
        <div class="card-header">
          <h4 class="card-title"><%= sectionTitle %></h4>
        </div>
        <div class="card-body">
          <div class="form-row">

            <!-- Produkt -->
            <div class="form-group col-md-6">
              <label class="required" for="product_id">Produkt</label>
              <select id="product_id" name="product_id" class="form-control" required>
                <option disabled>Produkt wählen</option>
                <% products.forEach(product => { %>
                  <option value="<%= product.id %>" <%= dataInfo.product_id === product.id ? "selected" : "" %>>
                    <%= product.model_name %>
                  </option>
                <% }) %>
              </select>
            </div>

            <!-- Paketnummer -->
            <div class="form-group col-md-6">
              <label class="required" for="package_number">Artikel-Nr</label>
              <input
                type="text"
                id="package_number"
                name="package_number"
                class="form-control"
                value="<%= dataInfo.package_number || '' %>"
                required
                onkeypress="return /[a-zA-Z0-9 ]/i.test(event.key)"
  oninput="this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '')"
              />
            </div>

            <!-- Lieferant -->
            <div class="form-group col-md-6">
              <label class="required" for="supplier">Lieferant</label>
              <input
                type="text"
                id="supplier"
                name="supplier"
                class="form-control"
                value="<%= dataInfo.supplier || '' %>"
                required
                onkeypress="return /[a-zA-Z0-9 ]/i.test(event.key)"
  oninput="this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '')"
              />
            </div>

            <input type="hidden" name="id" value="<%= dataInfo.id %>">
          </div>

          <!-- MATERIALS SECTION -->
          <div class="form-group mt-4 p-2">
            <label class="required">Materialien verwenden</label>

            <% 
              let usedMaterials = [];
              if (dataInfo.materials_used) {
                if (typeof dataInfo.materials_used === "string") {
                  try { usedMaterials = JSON.parse(dataInfo.materials_used); }
                  catch(e) { usedMaterials = []; }
                } else {
                  usedMaterials = dataInfo.materials_used;
                }
              }
            %>

            <table class="table table-bordered" id="materialsTable">
              <thead>
                <tr>
                  <th>Material</th>
                  <th>Verwendete Menge</th>
                  <th>Aktion</th>
                </tr>
              </thead>
              <tbody>

                <% usedMaterials.forEach((um, idx) => { 
                  const selectedMaterial = materials.find(m => m.id == um.material_id);
                %>
                  <tr class="material-row">
                    <td>
                      <select name="materials[<%= idx %>][material_id]" class="form-control material-select" required>
                        <option disabled>Material wählen</option>
                        <% materials.forEach(mat => { %>
                          <option 
                            value="<%= mat.id %>"
                            <%= mat.id == um.material_id ? "selected" : "" %>>
                            <%= mat.material_name %> (<%= mat.quantity %> <%= mat.unit %> verfügbar)
                          </option>
                        <% }) %>
                      </select>
                    </td>

                    <td>
                      <input
                        type="number"
                        name="materials[<%= idx %>][quantity]"
                        class="form-control"
                        min="1"
                        value="<%= um.quantity %>"
                        required
                      >
                    </td>

                    <td><button type="button" class="btn btn-danger remove-material">-</button></td>
                  </tr>
                <% }) %>

                <% if (usedMaterials.length === 0) { %>
                <!-- Default empty row -->
                <tr class="material-row">
                  <td>
                    <select name="materials[0][material_id]" class="form-control material-select" required>
                      <option selected disabled>Material wählen</option>
                      <% materials.forEach(mat => { %>
                        <option value="<%= mat.id %>">
                          <%= mat.material_name %> (<%= mat.quantity %> <%= mat.unit %> verfügbar)
                        </option>
                      <% }) %>
                    </select>
                  </td>

                  <td>
                    <input type="number" name="materials[0][quantity]" class="form-control" min="1" required>
                  </td>

                  <td><button type="button" class="btn btn-danger remove-material">-</button></td>
                </tr>
                <% } %>

              </tbody>
            </table>

            <button type="button" class="btn btn-primary" id="addMaterialRow">Weitere Material hinzufügen</button>
          </div>
        </div>

        <div class="card-footer">
          <button type="submit" id="savebtn" class="btn btn-info">Speichern</button>
          <a href="/packages/list" class="btn btn-default">Zurück</a>
        </div>
      </div>
    </form>
  </div>
</div>

<script>
$(document).ready(function () {
  let materialIndex = <%= usedMaterials.length || 1 %>;

  function refreshMaterialDropdowns() {
    let selectedIds = [];

    $(".material-select").each(function () {
      if ($(this).val()) selectedIds.push($(this).val());
    });

    $(".material-select").each(function () {
      let currentSelect = $(this);
      currentSelect.find("option").show();

      currentSelect.find("option").each(function () {
        if (selectedIds.includes($(this).val()) && currentSelect.val() !== $(this).val()) {
          $(this).hide();
        }
      });
    });
  }

  $("#addMaterialRow").click(function () {
    let newRow = `
      <tr class="material-row">
        <td>
          <select name="materials[${materialIndex}][material_id]" class="form-control material-select" required>
            <option selected disabled>Material wählen</option>
            <% materials.forEach(mat => { %>
              <option value="<%= mat.id %>">
                <%= mat.material_name %> (<%= mat.quantity %> <%= mat.unit %> verfügbar)
              </option>
            <% }) %>
          </select>
        </td>

        <td>
          <input type="number" name="materials[${materialIndex}][quantity]" class="form-control" min="1" required>
        </td>

        <td>
          <button type="button" class="btn btn-danger remove-material">-</button>
        </td>
      </tr>
    `;

    $("#materialsTable tbody").append(newRow);
    materialIndex++;
    refreshMaterialDropdowns();
  });

  $(document).on("click", ".remove-material", function () {
    $(this).closest("tr").remove();
    refreshMaterialDropdowns();
  });

  $(document).on("change", ".material-select", function () {
    refreshMaterialDropdowns();
  });

  refreshMaterialDropdowns();
});
</script>
