<!-- Daterangepicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<%
function formatDate(date) {
  if (!date) return '';

  const d = new Date(date);

  if (isNaN(d)) return '';

  return d.toLocaleDateString('en-GB');
}
%>
  <div class="row">
    <div class="col-md-12 mt-2">
      <form id="projectForm" method="post" action="/manage-project/update" enctype="multipart/form-data" novalidate>
        <input type="hidden" name="project_id" value="<%= dataInfo.id %>" />
        <div class="card card-info">
          <div class="card-header">
            <h4 class="card-title">
              <%= sectionTitle %>
            </h4>
          </div>
          <div class="card-body">
            <div class="form-row">
              <!-- Project Name -->
              <div class="form-group col-md-7">
                <label class="required" for="project_name">Projektname</label>
                <input type="text" id="project_name" name="project_name" class="form-control"
                  value="<%= dataInfo.project_name %>" onkeypress="return /[a-zA-Z0-9äöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-Z0-9äöüÄÖÜß ]/g, '')"required />
              </div>

              <!-- Project Image -->
              <div class="form-group col-md-5">
                <label for="image">Projektbild</label>
                <input type="file" class="form-control" style="padding: 4px 4px" name="image" id="image"
                  accept="image/*" />
                <input type="hidden" name="existing_image" value="<%= dataInfo.project_image %>">
                <div class="mt-2" id="imagePreviewContainer">
                  <% if (dataInfo.project_image) { %>
                    <strong>Aktuelles Bild:</strong><br />
                    <img id="imagePreview" src="/<%= dataInfo.project_image %>"
                      style="max-width: 100px; border-radius: 8px;">
                    <% } else { %>
                      <img id="imagePreview" src="#" style="display:none; max-width:100px; border-radius: 8px;">
                      <% } %>
                </div>
              </div>

              <!-- Location -->
              <div class="form-group col-md-3">
                <label class="required" for="location">Standort</label>
                <input type="text" id="location" name="location" class="form-control" value="<%= dataInfo.location %>" onkeypress="return /[a-zA-ZäöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-ZäöüÄÖÜß ]/g, '')"
                  required />
              </div>



              <div class="form-group col-md-3">
                <label class="required">Standort-ID</label>
                <input type="text" name="location_id" class="form-control" value="<%= dataInfo.location_id || '' %>" onkeypress="return /[a-zA-Z0-9äöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-Z0-9äöüÄÖÜß ]/g, '')">
              </div>

              <div class="form-group col-md-3">
                <label class="required">PLZ / Ort</label>
                <input type="text" name="location_postcode_city" class="form-control"
                  value="<%= dataInfo.location_postcode_city || '' %>" onkeypress="return /[a-zA-Z0-9äöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-Z0-9äöüÄÖÜß ]/g, '')">
              </div>

              <div class="form-group col-md-3">
                <label class="required">Straße / Hausnr.</label>
                <input type="text" name="location_street_house_no" class="form-control"
                  value="<%= dataInfo.location_street_house_no || '' %>" onkeypress="return /[a-zA-Z0-9äöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-Z0-9äöüÄÖÜß ]/g, '')">
              </div>


              <div class="form-group col-md-3">
                <label class="required">Kunde</label>
                <input type="text" name="client" class="form-control" value="<%= dataInfo.client || '' %>" onkeypress="return /[a-zA-Z0-9äöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-Z0-9äöüÄÖÜß ]/g, '')">
              </div>

              <div class="form-group col-md-3">
                <label class="required">Auftragsart</label>
                <select name="order_type" class="form-control">
                  <option value="">Bitte wählen</option>
                  <% orderTypes.forEach(o=> { %>
                    <option value="<%= o.id %>" <%=dataInfo.order_type==o.id ? 'selected' : '' %>>
                      <%= o.order_type %>
                    </option>
                    <% }) %>
                </select>
              </div>

              <div class="form-group col-md-3">
                <label class="required">Status (Aktuelle Aufgabe)</label>
                <select name="status_current_task" class="form-control">
                  <option value="">Bitte wählen</option>
                  <% taskStatuses.forEach(s=> { %>
                    <option value="<%= s.id %>" <%=dataInfo.status_current_task==s.id ? 'selected' : '' %>>
                      <%= s.status_name %>
                    </option>
                    <% }) %>
                </select>
              </div>

              <!-- Contractor -->
              <div class="form-group col-md-3">
                <label class="required" for="assigned_contractor_id">Zugewiesen</label>
                <select id="assigned_contractor_id" name="assigned_contractor_id" class="form-control" required>
                  <option selected disabled>Bitte wählen</option>
                  <% contractors.forEach(function(user) { %>
                    <option value="<%= user.id %>" <%=dataInfo.assigned_contractor_id===user.id ? 'selected' : '' %>><%=
                        user.name %>
                    </option>
                    <% }); %>
                </select>
              </div>

              <div class="form-group col-md-11 d-flex align-items-center">
                <label class="me-2 mb-0 mr-2">Eigentümerzustimmung benötigt:</label>
                <input type="hidden" name="is_owner_approval_needed" value="0">
                <input type="checkbox" id="is_owner_approval_needed" name="is_owner_approval_needed" value="1"
                  <%=dataInfo.is_owner_approval_needed==1 ? 'checked' : '' %>>
              </div>

              <div id="ownerApprovalFields" class="row">
                <!-- New Status -->
                <div class="form-group col-md-2">
                  <label class="required">Status (new status)</label>
                  <select name="new_status" class="form-control">
                    <option value="">Bitte wählen</option>
                    <% ownerApprovalStatuses.forEach(s=> { %>
                      <option value="<%= s.id %>" <%=dataInfo.new_status==s.id ? 'selected' : '' %>>
                        <%= s.status_name %>
                      </option>
                      <% }) %>
                  </select>
                </div>

                <div class="form-group col-md-3">
                  <label>Wie</label><br>
                  <% const wieArr=dataInfo.wie ? dataInfo.wie.split(',') : []; %>

                    <label><input type="checkbox" name="contact_mail" value="1" <%=wieArr.includes('Mail') ? 'checked'
                        : '' %>> Mail</label>
                    <label><input type="checkbox" name="contact_atc" value="1" <%=wieArr.includes('ATC') ? 'checked'
                        : '' %>> ATC</label>
                    <label><input type="checkbox" name="contact_post" value="1" <%=wieArr.includes('Post') ? 'checked'
                        : '' %>> Post</label>
                    <label><input type="checkbox" name="contact_phone" value="1" <%=wieArr.includes('Telefon')
                        ? 'checked' : '' %>> Telefon</label>
                </div>

                <!-- Anzahl (Number) -->
                <div class="form-group col-md-1">
                  <label>Anzahl</label>
                  <input type="number" name="number" class="form-control" value="<%= dataInfo.number || '' %>">
                </div>


                <!-- Final Date -->
                <div class="form-group col-md-2">
                  <label>Letzte</label>
                  <input type="text" id="final_date" name="final_date" class="form-control"
                    value="<%= formatDate(dataInfo.final_date) %>">
                </div>

                <!-- Status Change -->
                <div class="form-group col-md-4">
                  <label>Eingang
                    <small>(optional automatisch wenn Status auf Erhalten wechselt)</small>
                  </label>
                  <input type="text" id="status_change_date" name="status_change_date" class="form-control"
                    value="<%= formatDate(dataInfo.status_change_date) %>">

                </div>
              </div>
              <div class="form-group col-md-5">
                <label class="required" for="timeframe">Zeitrahmen</label>
                <input type="text" id="timeframe" name="timeframe" class="form-control"
                  value="<%= dataInfo.timeframe %>" autocomplete="off" />
              </div>

              <div class="form-group col-md-3">
                <label for="ticket">Ticket</label>
                <input type="text" id="ticket" name="ticket" class="form-control" value="<%= dataInfo.ticket || '' %>"
                  placeholder="Eg CQR 1234" onkeypress="return /[a-zA-Z0-9äöüÄÖÜß ]/i.test(event.key)"
oninput="this.value = this.value.replace(/[^a-zA-Z0-9äöüÄÖÜß ]/g, '')">
              </div>

              <!-- Dynamic Product Sections -->
              <div class="form-group col-md-12">
                <h6 style="color: rgb(0,153,51); font-weight:500; text-decoration: underline; margin-top:10px;">Auswahl
                  der Produktartikelnummer</h6>
              </div>

              <div id="productSectionsContainer" class="row col-md-12">
                <% if (dataInfo.project_parts && dataInfo.project_parts.length> 0) { %>
                  <% dataInfo.project_parts.forEach(function(part, idx) { %>
                    <div class="product-section row col-md-12" data-index="<%= idx %>">
                      <!-- Model -->
                      <div class="form-group col-md-3">
                        <label class="required">Produkt</label>
                        <select name="project_model_id[]" class="form-control modelSelect" required>
                          <option value="">Product wählen</option>
                          <% productModels.forEach(function(model) { %>
                            <option value="<%= model.id %>" <%=model.id===part.project_model_id ? 'selected' : '' %>><%=
                                model.model_name %>
                            </option>
                            <% }); %>
                        </select>
                      </div>

                      <!-- Package -->
                      <div class="form-group col-md-3">
                        <label class="required">Teil</label>
                        <select name="package_id[]" class="form-control packageSelect" required>
                          <option value="">Artikelwählen</option>
                          <% part.packages.forEach(function(pkg) { %>
                            <option value="<%= pkg.id %>" <%=pkg.id===part.package_id ? 'selected' : '' %>>Artikel<%=
                                pkg.package_number %> (<%= pkg.supplier %>)</option>
                            <% }); %>
                        </select>
                      </div>

                      <!-- Warehouse Items -->
                      <div class="form-group col-md-4">
                        <label class="required">Seriennummern auswählen</label>
                        <div class="warehouseItemsContainer"
                          style="max-height:200px; overflow-y:auto; border:1px solid #ccc; border-radius:6px; padding:10px; background:#fafafa;">
                          <% part.warehouse_items.forEach(function(item) { %>
                            <div class="form-check">
                              <input type="checkbox" class="form-check-input" name="warehouse_items[<%= idx %>][]"
                                value="<%= item.item_id %>" <%=item.selected ? 'checked' : '' %> id="item_<%= idx %>_<%=
                                  item.item_id %>">
                                  <label class="form-check-label" for="item_<%= idx %>_<%= item.item_id %>">
                                    <%= item.serial_number %>
                                  </label>
                            </div>
                            <% }); %>
                        </div>
                      </div>

                      <!-- Actions -->
                      <div class="form-group col-md-2">
                        <label class="d-block visually-hidden">Aktion</label>
                        <button type="button" class="btn btn-success addProductBtn">+</button>
                        <button type="button" class="btn btn-danger removeProductBtn">-</button>
                      </div>
                    </div>
                    <% }); %>
                      <% } else { %>
                        <div class="product-section row col-md-12" data-index="0">
                          <!-- empty template, same as create -->
                          <div class="form-group col-md-3">
                            <label class="required">Produkt</label>
                            <select name="project_model_id[]" class="form-control modelSelect" required>
                              <option value="">Product wählen</option>
                              <% productModels.forEach(function(model) { %>
                                <option value="<%= model.id %>">
                                  <%= model.model_name %>
                                </option>
                                <% }); %>
                            </select>
                          </div>
                          <div class="form-group col-md-3">
                            <label class="required">Teil</label>
                            <select name="package_id[]" class="form-control packageSelect" disabled required>
                              <option value="">Artikelwählen</option>
                            </select>
                          </div>
                          <div class="form-group col-md-4">
                            <label class="required">Seriennummern auswählen</label>
                            <div class="warehouseItemsContainer"
                              style="max-height:200px; overflow-y:auto; border:1px solid #ccc; border-radius:6px; padding:10px; background:#fafafa;">
                              <small class="text-muted">Bitte Modell & Artikelauswählen</small>
                            </div>
                          </div>
                          <div class="form-group col-md-2">
                            <label class="d-block visually-hidden">Aktion</label>
                            <button type="button" class="btn btn-success addProductBtn">+</button>
                            <button type="button" class="btn btn-danger removeProductBtn">-</button>
                          </div>
                        </div>
                        <% } %>
              </div>

              <!-- Description -->
              <div class="form-group col-md-6">
                <label for="project_description">Beschreibung</label>
                <textarea id="description" name="project_description" class="form-control"
                  rows="3"><%= dataInfo.project_description || '' %></textarea>
              </div>

              <!-- Status -->
              <div class="form-group col-md-6">
                <label class="required" for="status">Status</label>
                <select id="status" name="status" class="form-control" required>
                  <option value="1" <%=dataInfo.status==1 ? 'selected' : '' %>>Aktiv</option>
                  <option value="0" <%=dataInfo.status==0 ? 'selected' : '' %>>Inaktiv</option>
                  <option value="2" <%=dataInfo.status==2 ? 'selected' : '' %>>Abgeschlossen</option>
                </select>
              </div>



              <!-- Commissioning -->
              <div class="form-group col-md-2">
                <label>Inbetriebnahme Datum:</label>
                <input type="text" id="commision_date" name="commisioning_date" class="form-control"
                  value="<%= formatDate(dataInfo.commisioning_date) %>">
              </div>

              <!-- Completion -->
              <div class="form-group col-md-2">
                <label>Fertigmeldung Datum</label>
                <input type="text" id="completion_date" name="completion_date" class="form-control"
                  value="<%= formatDate(dataInfo.completion_date) %>">
              </div>

              <!-- Billed -->
              <div class="form-group col-md-2">
                <label>Abgerechnet GACS:</label>
                <input type="text" id="billed_date" name="billed_date" class="form-control"
                  value="<%= formatDate(dataInfo.billed_date) %>">
              </div>

              <!-- Account Sub -->
              <div class="form-group col-md-2">
                <label>Rechnung Sub:​ </label>
                <input type="text" id="account_sub_date" name="account_sub_date" class="form-control"
                  value="<%= formatDate(dataInfo.account_sub_date) %>">
              </div>

              <!-- Warranty -->
              <div class="form-group col-md-2">
                <label>Gewährleistung Datum:​</label>
                <input type="text" id="warrenty_date" name="warrenty_date" class="form-control"
                  value="<%= formatDate(dataInfo.warrenty_date) %>">
              </div>

            </div>
          </div>

          <div class="card-footer">
            <button type="submit" class="btn btn-info">Aktualisieren</button>
            <a href="/manage-project/list" class="btn btn-secondary">Zurück</a>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- Load moment with locales -->
  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment-with-locales.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">

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

    // Image preview
    $("#image").on("change", function () {
      const file = this.files[0];
      const preview = $("#imagePreview");
      const container = $("#imagePreviewContainer");

      if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
          preview.attr("src", e.target.result).show();
          container.show();
        };
        reader.readAsDataURL(file);
      } else {
        preview.attr("src", "#").hide();
        container.hide();
      }
    });


    $("#timeframe").daterangepicker({
      autoUpdateInput: true,
      minDate: moment(),
      locale: {
        format: "D MMMM YYYY",
        separator: " - ",
        applyLabel: "Anwenden",
        cancelLabel: "Abbrechen",
        fromLabel: "Von",
        toLabel: "Bis",
        customRangeLabel: "Benutzerdefiniert",
        weekLabel: "W",
        daysOfWeek: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
        monthNames: [
          "Januar", "Februar", "März", "April", "Mai", "Juni",
          "Juli", "August", "September", "Oktober", "November", "Dezember"
        ],
        firstDay: 1
      }
    });

    // Restore from DB (German text)
    const dbVal = $("#timeframe").val();
    if (dbVal) {
      const parts = dbVal.split(" - ");
      if (parts.length === 2) {
        const start = moment(parts[0].trim(), "D MMMM YYYY", true).locale("de");
        const end = moment(parts[1].trim(), "D MMMM YYYY", true).locale("de");

        if (start.isValid() && end.isValid()) {
          $("#timeframe").data("daterangepicker").setStartDate(start);
          $("#timeframe").data("daterangepicker").setEndDate(end);
        } else {
          console.error("Invalid German date:", parts);
        }
      }
    }
    let sectionIndex = $("#productSectionsContainer .product-section").length;

    // Helper to get all selected package IDs (avoid duplicates)
    function getSelectedPackages() {
      const selected = [];
      $(".packageSelect").each(function () {
        if ($(this).val()) selected.push($(this).val());
      });
      return selected;
    }

    // Add new product section
    $(document).on("click", ".addProductBtn", function () {
      sectionIndex++;
      const newSection = $(".product-section:first").clone();

      newSection.attr("data-index", sectionIndex);
      newSection.find("select.modelSelect").val("");
      newSection.find("select.packageSelect").html('<option value="">Artikelwählen</option>').prop("disabled", true);
      newSection.find(".warehouseItemsContainer").html('<small class="text-muted">Bitte Modell & Artikelauswählen</small>');
      newSection.find(".warehouseItemsContainer").attr("data-index", sectionIndex);

      $("#productSectionsContainer").append(newSection);
    });

    // Remove product section
    $(document).on("click", ".removeProductBtn", function () {
      if ($("#productSectionsContainer .product-section").length > 1) {
        $(this).closest(".product-section").remove();
      } else {
        alert("Mindestens eine Produktsektion erforderlich.");
      }
    });

    // Load packages when a model is selected
    $(document).on("change", ".modelSelect", function () {
      const modelId = $(this).val();
      const section = $(this).closest(".product-section");
      const packageSelect = section.find(".packageSelect");
      const itemsContainer = section.find(".warehouseItemsContainer");
      const index = section.attr("data-index") || 0;

      packageSelect.prop("disabled", true).html("<option>Lädt...</option>");
      itemsContainer.html("<small class='text-muted'>Bitte Artikelauswählen</small>");

      if (!modelId) {
        packageSelect.prop("disabled", true).html('<option value="">Artikelwählen</option>');
        return;
      }

      $.get("/manage-project/packages/" + modelId, function (res) {
        packageSelect.prop("disabled", false).html('<option value="">Artikelwählen</option>');

        if (!res || res.length === 0) {
          packageSelect.append('<option disabled>Keine Artikelgefunden</option>');
          return;
        }

        const selectedPackages = getSelectedPackages();
        res.forEach(pkg => {
          if (!selectedPackages.includes(pkg.id.toString())) {
            packageSelect.append(`<option value="${pkg.id}"> ${pkg.package_number}</option>`);
          }
        });
      });
    });

    // Load warehouse items when a package is selected
    $(document).on("change", ".packageSelect", function () {
      const packageId = $(this).val();
      const section = $(this).closest(".product-section");
      const itemsContainer = section.find(".warehouseItemsContainer");
      const index = section.attr("data-index") || 0;

      itemsContainer.html("<em>Lädt...</em>");

      if (!packageId) {
        itemsContainer.html('<small class="text-muted">Bitte Modell & Artikelauswählen</small>');
        return;
      }

      $.get("/manage-project/warehouse-items/" + packageId, function (res) {
        itemsContainer.html("");
        if (!res || res.length === 0) {
          itemsContainer.html('<div class="text-muted"><em>Keine Daten gefunden</em></div>');
          return;
        }

        res.forEach(item => {
          const isChecked = item.selected ? 'checked' : '';
          itemsContainer.append(`
        <div class="form-check">
          <input class="form-check-input" type="checkbox"
            name="warehouse_items[${index}][]" value="${item.item_id}" id="item_${index}_${item.item_id}" ${isChecked}>
          <label class="form-check-label" for="item_${index}_${item.item_id}">${item.serial_number}</label>
        </div>
      `);
        });
      });
    });
    $(document).ready(function () {
      const checkbox = $("#is_owner_approval_needed");
      const fields = $("#ownerApprovalFields");

      function toggleFields() {
        if (checkbox.is(":checked")) {
          fields.show();   // show fields
        } else {
          fields.hide();   // hide fields
        }
      }

      // Run when page loads (this handles DB value)
      toggleFields();

      // Run when user clicks checkbox
      checkbox.on("change", toggleFields);
    });
  </script>
  <script>
const dateFields = [
  "#final_date",
  "#status_change_date",
  "#commision_date",
  "#completion_date",
  "#billed_date",
  "#account_sub_date",
  "#warrenty_date"
];

dateFields.forEach(field => {
  $(field).daterangepicker({
    singleDatePicker: true,
    autoUpdateInput: true,
    showDropdowns: true,
    opens: "center",
    locale: {
      format: "DD/MM/YYYY",
      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>