<div class="row">
  <div class="col-md-12 mt-2">
    <!-- Add Button -->
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <% if(menuPermission?.create_status){ %>
          <a href="/products/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>

    <!-- Card with Table -->
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">
          <%= sectionTitle %>
        </h3>
      </div>

      <div class="card-body table-responsive">
        <table id="modelsTable" class="table table-hover table-head-fixed">
          <thead>
            <tr>
              <!-- <th>#</th> -->
              <th style="text-align: left;">Produktname</th>
              <th style="text-align: left;">Kategorie</th>
              <!-- <th style="text-align: center;">Artikelnummer</th>
              <th style="text-align: center;">Lieferant</th> -->
              <!-- <% warehouses.forEach(function(wh) { %>
                <th style="text-align: center;">
                  <%= wh.warehouse_name %>
                </th>
                <% }) %> -->
                  <!-- <th style="text-align: center;">Gesamt</th> -->
                  <th data-orderable="false">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            <% if (dataList.length> 0) { let index = 1; %>
              <% dataList.forEach(function(data) { %>
                <tr>
                  <!-- <td>
                    <%= index++ %>
                  </td> -->
                  <td style="text-align: left;">
                    <%= data.model_name %>
                  </td>
                  <td style="text-align: left;">
                    <%= data.category_name %>
                  </td>
                  <!-- <td style="text-align: center;">
                    <%= data.item_number || '---' %>
                  </td>
                  <td style="text-align: center;">
                    <%= data.supplier || '---' %>
                  </td> -->

                  <!-- <% warehouses.forEach(function(wh) { %>
                    <td style="text-align: center;">
                      <%= data['wh_' + wh.warehouse_id] || 0 %>
                    </td>
                    <% }) %> -->

                      <!-- <td>
                        <%= data.total_count %>
                      </td> -->

                      <td>
                        <% if(menuPermission?.read_status){ %>
                          <a class="btn btn-info btn-sm mr-1" href="/products/details/<%= data.product_id %>"
                            data-toggle="tooltip" title="Details">
                            <i class="fa fa-eye"></i>
                          </a>
                          <% } %>
                            <% if(menuPermission?.update_status){ %>
                              <a class="btn btn-primary btn-sm mr-1" href="/products/edit/<%= data.product_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" href="#"
                                    onclick="deleteDataFunc('<%= data.product_id %>', 'products/delete/<%= data.product_id%>')"
                                    data-toggle="tooltip" title="Löschen">
                                    <i class="fas fa-trash"></i>
                                  </a>
                                  <% } %>
                      </td>
                </tr>
                <% }) %>
                  <% } else { %>
                    <tr>
                      <td colspan="<%= 4 + warehouses.length + 1 %>" class="text-center">Keine Daten gefunden</td>
                    </tr>
                    <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Optional DataTable Script Section -->
<script>
  // $(document).ready(function () {
  //   if (!$.fn.DataTable.isDataTable('#modelsTable')) {
  //     $('#modelsTable').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"
  //         }
  //       }
  //     });
  //   }
  // });
  $(document).ready(function () {

  if (!$.fn.DataTable.isDataTable('#modelsTable')) {

    var table = $('#modelsTable').DataTable({
      paging: true,
      lengthChange: true,
      searching: true,
      ordering: true,
      info: true,
      autoWidth: false,

      columnDefs: [
        {
          targets: [2], // Aktionen column
          searchable: 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"
        }
      }
    });

    // Search only from beginning of text
    $('#modelsTable_filter input')
      .off()
      .on('keyup', function () {

        let value = this.value.trim();

        if (value) {
          table.search('^' + value, true, false).draw();
        } else {
          table.search('').draw();
        }

      });

  }

});
</script>

<%- contentFor('pageModalSection') %>
  <%- contentFor('pageScriptsSection') %>