<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-product/add" class="btn btn-sm btn-info m-1 p-2 w-100 float-right mb-2">
            <i class="fas fa-plus"></i> Produkt 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 class="table table-hover table-head-fixed datatable123">
          <thead>
            <tr>
              <th>#</th>
              <th>Produktname</th>
              <th>Edmond’s Lieferung</th>
              <th>Modell</th>
              <th>Verpackung</th>
              <th>Herstellungsdatum</th>
              <th>Seriennummer</th>
              <th>Lagerbestand</th>
              <th>Status</th>
              <th data-orderable="false">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            <% if (products.length> 0) { let index = ((page - 1) * limit) + 1; %>
              <% products.forEach(function(data) { %>
                <tr>
                  <td>
                    <%= index++ %>
                  </td>
                  <td>
                    <%= data?.product_name || '' %>
                  </td>
                  <td>
                    <%= data?.edmonds_delivery ? new Date(data.edmonds_delivery).toLocaleDateString('de-DE') : '' %>
                  </td>
                  <td>
                    <%= data?.model_name || '' %>
                  </td>
                  <td>
                    <%= data?.package_name || '' %>
                  </td>
                  <td>
                    <%= data?.manufacture_date ? new Date(data.manufacture_date).toLocaleDateString('de-DE') : '' %>
                  </td>
                  <td>
                    <%= data?.serial_number || '' %>
                  </td>
                  <td>
                    <%= data?.stock || 0 %>
                  </td>
                  <td>
                    <% if (data?.status===1 || data?.status==='1' ) { %>
                      <span class="badge bg-success">Aktiv</span>
                      <% } else { %>
                        <span class="badge bg-danger">Inaktiv</span>
                        <% } %>
                  </td>
                  <td>
                    <%if(menuPermission?.read_status){%>
                      <a class="btn btn-info btn-sm" href="/manage-product/details/<%= data.id %>" data-toggle="tooltip"
                        title="Details">
                        <i class="far fa-eye"></i>
                      </a>
                      <%}%>

                        <%if(menuPermission?.update_status){%>
                          <a class="btn btn-primary btn-sm" href="/manage-product/edit/<%= data.id %>"
                            data-toggle="tooltip" 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-product/delete/<%= data.id %>')"
                                data-toggle="tooltip" title="Löschen">
                                <i class="fas fa-trash"></i>
                              </a>
                              <%}%>


                  </td>
                </tr>
                <% }); %>
                  <% } else { %>
                    <tr>
                      <td colspan="10" class="text-center text-danger">Keine Produkte gefunden.</td>
                    </tr>
                    <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- DataTable Initialization with German Language -->
<script>
  $(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('.datatable123')) {
      $('.datatable123').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_ gesamten Einträgen)",
          lengthMenu: "_MENU_ Einträge Zeige",
          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, um Spalte aufsteigend zu sortieren",
            sortDescending: ": aktivieren, um Spalte absteigend zu sortieren"
          }
        }
      });
    }
  });
</script>