<div class="row">
  <div class="col-md-12 mt-2">
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <% if (menuPermission?.create_status) { %>
          <a href="/manage-material/add" class="btn btn-sm btn-info m-1 p-2 w-100 float-right mb-2">
            <i class="fas fa-plus"></i> Material hinzufügen
          </a>
          <% } %>
      </div>
    </div>

    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">
          <%= page_title %>
        </h3>
      </div>

      <div class="card-body table-responsive">
        <table id="materialTable" class="table table-hover table-head-fixed">
          <thead>
            <tr>
              <th>#</th>
              <th>Bild</th> <!-- new image column -->
              <th>Materialname</th>
              <th>Beschreibung</th>
              <th>Einheit</th>
              <th>Menge</th>
              <th data-orderable="false">Aktionen</th>
            </tr>
          </thead>

          <tbody>
            <% if (materials.length> 0) { %>
              <% let index=((page - 1) * limit) + 1; %>

                <% materials.forEach(function(data) { %>
                  <tr>
                    <td>
                      <%= index++ %>
                    </td>

                    <!-- Image -->
                    <td>
                      <% if (data.image) { %>
                        <img src="/uploads/manage-material/<%= data.image %>" alt="Material Image"
                          style="max-width: 100px; object-fit:cover;border-radius:5px;">
                        <% } else { %>
                          <span>--</span>
                          <% } %>
                    </td>

                    <!-- Material name -->
                    <td style="word-break: break-word; max-width: 200px;">
                      <%= data.material_name %>
                    </td>

                    <!-- Description (strip HTML) -->
                    <td style="word-break: break-word; max-width: 200px;">
                      <%- data.description ? data.description : '' %>
                    </td>

                    <!-- UNIT in German -->
                    <td>
                      <% if (data.unit==='pcs' ) { %> Stück
                        <% } else if (data.unit==='kg' ) { %> Kilogramm
                          <% } else if (data.unit==='meter' ) { %> Meter
                            <% } else if (data.unit==='litre' ) { %> Liter
                              <% } else { %> - <% } %>
                    </td>

                    <!-- Quantity without decimals -->
                    <td>
                      <%= Number(data.quantity) %>
                    </td>

                    <!-- Buttons -->
                    <td>
                      <% if (menuPermission?.read_status) { %>
                        <a class="btn btn-info btn-sm mr-2" href="/manage-material/details/<%= data.id %>"
                          title="Details anzeigen">
                          <i class="far fa-eye"></i>
                        </a>
                        <% } %>

                          <% if (menuPermission?.update_status) { %>
                            <a class="btn btn-primary btn-sm mr-2" href="/manage-material/edit/<%= data.id %>"
                              title="Bearbeiten">
                              <i class="fas fa-pencil-alt"></i>
                            </a>
                            <% } %>

                              <!-- <% if (menuPermission?.delete_status) { %>
                                <a class="btn btn-danger btn-sm"
                                  onclick="deleteDataFunc('<%= data.id %>', 'manage-material/delete/<%= data.id %>')"
                                  title="Löschen">
                                  <i class="fas fa-trash"></i>
                                </a>
                                <% } %> -->
                    </td>
                  </tr>
                  <% }) %>

                    <% } else { %>
                      <tr>
                        <td colspan="7" class="text-center">Keine Daten gefunden</td>
                      </tr>
                      <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- DATATABLE SCRIPT -->
<script>
  $(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('#materialTable')) {
      $('#materialTable').DataTable({
        paging: true,
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        language: {
          decimal: ",",
          thousands: ".",
          emptyTable: "Keine Daten in der Tabelle vorhanden",
          info: "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
          infoEmpty: "Keine Einträge verfügbar",
          infoFiltered: "(gefiltert von _MAX_ Einträgen insgesamt)",
          lengthMenu: "_MENU_ Einträge anzeigen",
          loadingRecords: "Lade...",
          processing: "Verarbeite...",
          search: "Suche:",
          zeroRecords: "Keine passenden Einträge gefunden",
          paginate: {
            first: "Erste",
            last: "Letzte",
            next: "Nächste",
            previous: "Zurück"
          },
          aria: {
            sortAscending: ": aktivieren für aufsteigend",
            sortDescending: ": aktivieren für absteigend"
          }
        }
      });
    }
  });
</script>