<div class="row">
  <div class="col-lg-12 mt-3">
    <p>
      <a title="Main Module" href="/manage-project/list" style="color: black">
        <i class="fa fa-chevron-circle-left"></i> &nbsp; Zurück zur Liste der Projekte
      </a>
    </p>

    <div class="card card-info mt-3">
      <div class="card-header align-items-center d-flex">
        <h4 class="card-title mb-0 flex-grow-1">
          <%= sectionTitle %>
        </h4>
      </div>

      <div class="card-body">
        <div class="row g-3">
          <div class="table-responsive">
            <table id="table-detail" class="table table-striped">
              <tbody>
                <tr>
                  <td width="20%">Projektname</td>
                  <td>
                    <%= dataInfo.project_name || '---' %>
                  </td>
                </tr>

                <tr>
                  <td width="20%">Projektbild</td>
                  <td>
                    <% if (dataInfo.project_image) { %>
                      <img src="/<%= dataInfo.project_image %>" alt="Projektbild"
                        style="max-width: 100px; border-radius: 8px; border: 1px solid #ccc;" />
                      <% } else { %>
                        ---
                        <% } %>
                  </td>
                </tr>

                <tr>
                  <td>Standort</td>
                  <td>
                    <%= dataInfo.location || '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Standort-ID</td>
                  <td>
                    <%= dataInfo.location_id || '---' %>
                  </td>
                </tr>

                <tr>
                  <td>PLZ / Ort</td>
                  <td>
                    <%= dataInfo.location_postcode_city || '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Straße / Hausnr.</td>
                  <td>
                    <%= dataInfo.location_street_house_no || '---' %>
                  </td>
                </tr>


                <tr>
                  <td>Kunde</td>
                  <td>
                    <%= dataInfo.client || '---' %>
                  </td>
                </tr>


                <tr>
                  <td>Eigentümerzustimmung</td>
                  <td>
                    <%= dataInfo.is_owner_approval_needed==1 ? 'Ja' : 'Nein' %>
                  </td>
                </tr>

                <tr>
                  <td>Neuer Status</td>
                  <td>
                    <%= dataInfo.owner_status_name || '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Auftragsart</td>
                  <td>
                    <%= dataInfo.order_type_name || '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Status (Aktuelle Aufgabe)</td>
                  <td>
                    <%= dataInfo.status_current_task_name || '---' %>
                  </td>
                </tr>


                <tr>
                  <td>Wie</td>
                  <td>
                    <% if (dataInfo.wie_array.length) { %>
                      <%= dataInfo.wie_array.join(', ') %>
                       <% } else { %>
                          ---
                    <% } %>
                  </td>
                </tr>

                <tr>
                  <td>Letzte</td>
                  <td>
                    <%= dataInfo.final_date ? new Date(dataInfo.final_date).toLocaleDateString('de-DE') : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Eingang
                    <small>(optional automatisch wenn Status auf Erhalten wechselt)</small>
                  </td>
                  <td>
                    <%= dataInfo.status_change_date ? new Date(dataInfo.status_change_date).toLocaleDateString('de-DE')
                      : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Zeitraum</td>
                  <td>
                    <%= dataInfo.timeframe || ' ---' %>
                  </td>
                </tr>

                <tr>
                  <td>Ticket</td>
                  <td>
                    <%= dataInfo.ticket || ' ---' %>
                  </td>
                </tr>

                <tr>
                  <td>Beschreibung</td>
                  <td class="text-wrap text-break">
                    <%- dataInfo.project_description || '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Zugewiesener Auftragnehmer</td>
                  <td>
                    <%= dataInfo.contractor_name || 'Nicht zugewiesen' %>
                  </td>
                </tr>

                <tr>
                  <td>Verwendete Teile</td>
                  <td>
                    <% if (partsList.length> 0) { %>
                      <div class="d-flex flex-wrap">
                        <% partsList.forEach(part=> { %>
                          <div class="card p-3 m-2" style="width: 200px;"> <!-- m-2 adds margin -->

                            <!-- Serial Numbers -->
                            <% if (part.serial_numbers && part.serial_numbers.length> 0) { %>
                              <div class="d-flex flex-wrap mb-2">
                                <% part.serial_numbers.forEach(sn=> {
                                  const [packageNumber, serial] = sn.split(' - '); // separate values
                                  %>
                                  <div style="font-size:12px; padding:2px 4px; word-break: break-word;">
                                    <strong>Teil:</strong>
                                    <%= packageNumber %><br />
                                      <strong>Seriennummer:</strong>
                                      <%= serial %>
                                  </div>
                                  <% }) %>
                              </div>
                              <% } %>

                                <!-- Image -->
                                <% if (part.image) { %>
                                  <div class="text-center">
                                    <img src="/<%= part.image %>" class="img-fluid rounded"
                                      style="max-height:120px; object-fit:contain;" />
                                  </div>
                                  <% } %>
                          </div>
                          <% }) %>
                      </div>

                      <% } else { %>
                        <p class="text-muted">Keine Teile vorhanden.</p>
                        <% } %>
                  </td>
                </tr>

                <tr>
                  <td>Notizen</td>
                  <td>
                    <% let note=partsList.find(p=> p.notes)?.notes;
                      %>

                      <% if (note) { %>
                        <p style="font-size:12px; margin-bottom:5px;">
                          <%= note %>
                        </p>
                        <% } else { %>
                          <p class="text-muted">Keine Notizen vorhanden.</p>
                          <% } %>
                  </td>

                </tr>

                <tr>
                  <td>Anzahl</td>
                  <td>
                    <%= dataInfo.number || '---' %>
                  </td>
                </tr>              

                <tr>
                  <td>Inbetriebnahme</td>
                  <td>
                    <%= dataInfo.commisioning_date ? new Date(dataInfo.commisioning_date).toLocaleDateString('de-DE')
                      : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Fertigstellung</td>
                  <td>
                    <%= dataInfo.completion_date ? new Date(dataInfo.completion_date).toLocaleDateString('de-DE')
                      : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Abgerechnet</td>
                  <td>
                    <%= dataInfo.billed_date ? new Date(dataInfo.billed_date).toLocaleDateString('de-DE') : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Rechnung Sub</td>
                  <td>
                    <%= dataInfo.account_sub_date ? new Date(dataInfo.account_sub_date).toLocaleDateString('de-DE')
                      : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Gewährleistung</td>
                  <td>
                    <%= dataInfo.warrenty_date ? new Date(dataInfo.warrenty_date).toLocaleDateString('de-DE') : '---' %>
                  </td>
                </tr>

                <tr>
                  <td>Status</td>
                  <td>
                    <% if (dataInfo.status===1 || dataInfo.status==='1' ) { %>
                      <span class="badge bg-success">Aktiv</span>
                      <% } else if (dataInfo.status===2 || dataInfo.status==='2' ) { %>
                        <span class="badge bg-info">Abgeschlossen</span>
                        <% } else { %>
                          <span class="badge bg-danger">Inaktiv</span>
                          <% } %>
                  </td>
                </tr>

                <tr>
                  <td>Erstellt am</td>
                  <td>
                    <%= new Date(dataInfo.created_at).toLocaleDateString('de-DE') %>
                  </td>
                </tr>

                <tr>
                  <td>Aktualisiert am</td>
                  <td>
                    <%= new Date(dataInfo.updated_at).toLocaleDateString('de-DE') %>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>