<!-- Daterangepicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<% const isLimitedUser=[2, 5].includes(loginUserRole); // subcontractor, technician %>
  <% const canEdit=[1, 3, 4].includes(loginUserRole); %>
    <% 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 <%=isLimitedUser
                      ? 'readonly' : '' %>/>
                  </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 <%=isLimitedUser
                      ? 'readonly' : '' %>/>
                  </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, '')" <%=isLimitedUser
                      ? 'readonly' : '' %>>
                  </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, '')" <%=isLimitedUser
                      ? 'readonly' : '' %>>
                  </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, '')" <%=isLimitedUser
                      ? 'readonly' : '' %>>
                  </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, '')" <%=isLimitedUser
                      ? 'readonly' : '' %>>
                  </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>
                    <% if(isLimitedUser){ %>
                      <input type="text" class="form-control"
                        value="<%= contractors.find(c => c.id === dataInfo.assigned_contractor_id)?.name || '' %>"
                        readonly>

                      <input type="hidden" name="assigned_contractor_id" value="<%= dataInfo.assigned_contractor_id %>">
                      <% } else { %>

                        <select id="assigned_contractor_id" name="assigned_contractor_id" class="form-control">
                          <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' : '' %>
                    <%= canEdit ? '' : 'disabled' %>
                      >
                      <% if (!canEdit) { %>
                        <input type="hidden" name="is_owner_approval_needed"
                          value="<%= dataInfo.is_owner_approval_needed %>">
                        <% } %>
                  </div>

                  <div id="ownerApprovalFields" class="row">
                    <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>

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

                    <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>

                    <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, '')" <%=isLimitedUser
                      ? 'readonly' : '' %>>
                  </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>

                            <% if (!canEdit) { %>
                              <input type="hidden" name="project_model_id[]" value="<%= part.project_model_id %>">
                              <% } %>

                                <select name="project_model_id[]" class="form-control modelSelect" required <%=canEdit
                                  ? '' : 'disabled' %>>
                                  <option value="">Product wählen</option>

                                  <% productModels.forEach(function(model) { %>
                                    <option value="<%= model.id %>" <%=Number(model.id)===Number(part.project_model_id)
                                      ? 'selected' : '' %>>
                                      <%= model.model_name %>
                                    </option>
                                    <% }) %>
                                </select>
                          </div>

                          <!-- Package -->
                          <div class="form-group col-md-3">
                            <label class="required">Teil</label>

                            <% if (!canEdit) { %>
                              <input type="hidden" name="package_id[]" value="<%= part.package_id %>">
                              <% } %>

                                <select name="package_id[]" class="form-control packageSelect" required <%=canEdit ? ''
                                  : 'disabled' %>>
                                  <option value="">Artikel wählen</option>

                                  <% part.packages.forEach(function(pkg) { %>
                                    <option value="<%= pkg.id %>" <%=Number(pkg.id)===Number(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' : '' %>
                                  <%= canEdit ? '' : 'disabled' %>>

                                    <% if (!canEdit && item.selected) { %>
                                      <input type="hidden" name="warehouse_items[<%= idx %>][]"
                                        value="<%= 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" <%=canEdit ? '' : 'disabled' %>>
                              +
                            </button>

                            <button type="button" class="btn btn-danger removeProductBtn" <%=canEdit ? '' : 'disabled'
                              %>>
                              -
                            </button>
                          </div>

                        </div>

                        <% }); %>

                          <% } else { %>

                            <div class="product-section row col-md-12" data-index="0">

                              <!-- Model -->
                              <div class="form-group col-md-3">
                                <label class="required">Produkt</label>

                                <select name="project_model_id[]" class="form-control modelSelect" required <%=canEdit
                                  ? '' : 'disabled' %>>

                                  <option value="">Product wählen</option>

                                  <% productModels.forEach(function(model) { %>
                                    <option value="<%= model.id %>">
                                      <%= 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" disabled required
                                  <%=canEdit ? '' : 'disabled' %>>
                                  <option value="">Artikel wählen</option>
                                </select>
                              </div>

                              <!-- Warehouse -->
                              <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 & Artikel auswählen
                                  </small>

                                </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" <%=canEdit ? '' : 'disabled'
                                  %>>
                                  +
                                </button>

                                <button type="button" class="btn btn-danger removeProductBtn" <%=canEdit ? ''
                                  : 'disabled' %>>
                                  -
                                </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" <%=isLimitedUser
                      ? 'readonly' : '' %>><%= 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>