<div class="row">
  <div class="col-md-12 mt-2">

    <!-- Action Button -->
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <% if(menuPermission?.create_status){ %>
          <a href="/product-series/add" class="btn btn-sm btn-info m-1 p-2 w-100 float-right mb-2">
            <i class="fas fa-plus"></i> Warehouse Item hinzufügen
          </a>
          <% } %>
      </div>
    </div>

    <!-- Product Filter Dropdown + Highlight Box -->
    <!-- <div class="row mb-3 align-items-center">
      <div class="col-md-4">
        <label for="productFilter"><b>Produkt wählen</b></label>
        <select id="productFilter" class="form-control">
          <option value="">Alle Produkte</option>
          <% products.forEach(function(prod) { %>
            <option value="<%= prod.id %>">
              <%= prod.model_name %>
            </option>
            <% }) %>
        </select>
      </div>
      <div class="col-md-4 align-items-center">
        <div id="selectedProductBox" class="p-2 rounded"
          style="display:none; background-color: rgb(224, 149, 10); color: white; font-weight: bold; margin-top: 25px !important;">
        </div>
      </div>
    </div> -->

    <div class="row mb-3 align-items-center">
      <!-- Product filter -->
      <div class="col-md-4">
        <label for="productFilter"><b>Produkt wählen</b></label>
        <select id="productFilter" class="form-control">
          <option value="">Alle Produkte</option>
          <% products.forEach(function(prod) { %>
            <option value="<%= prod.id %>">
              <%= prod.model_name %>
            </option>
            <% }) %>
        </select>
      </div>

      <!-- Verpackung filter (hidden by default) -->
      <!-- <div class="col-md-4" id="packagingContainer" style="display:none;">
        <label for="packagingFilter"><b>Artikelauswählen</b></label>
        <select id="packagingFilter" class="form-control">
          <option value="">Alle Verpackungen</option>
        </select>
      </div> -->

      <!-- Highlight box -->
      <div class="col-md-4 align-items-center">
        <div id="selectedProductBox" class="p-2 rounded"
          style="display:none; background-color: rgb(224, 149, 10); color: white; font-weight: bold; margin-top: 25px !important;">
        </div>
      </div>
    </div>




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

      <div class="card-body table-responsive">
        <table id="warehouseTable" class="table table-hover table-head-fixed">
          <thead>
            <tr>
              <th style="text-align: left;">Produkt</th>
              <th style="text-align: left;">Seriennummer</th>
              <th style="text-align: left;">Artikel-Nr</th>
              <th style="text-align: left;">Edmonds Lieferung</th>
              <th style="text-align: left;">Herstellungsdatum</th>
              <th style="text-align: left;">Lager</th>
              <th style="text-align: left;">Ausgeführt von</th>
              <th style="text-align: left;">Montageort</th>
              <th style="text-align: left;">Lager Ort</th>
              <th style="text-align: center; width: 250px;" data-orderable="false">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            <% dataList.forEach(function(data) { %>
              <tr>
                <td style="text-align: left;">
                  <%= data.model_name %>
                </td>
                <td style="text-align: left; word-break: break-all; white-space: normal;">
                  <%= data.serial_number %>
                </td>
                <td style="text-align: left;">
                  <%= data.package_number || '---' %>
                </td>
                <td style="text-align: left;">
                  <% if (data.edmonds_delivery) { let d=new Date(data.edmonds_delivery); let formatted=("0" +
                    d.getDate()).slice(-2) + "." + ("0" + (d.getMonth() + 1)).slice(-2) + "." + d.getFullYear(); %>
                    <%= formatted %>
                      <% } %>
                </td>


                <td style="text-align: left;">
                  <%= data.date_of_manufacture || '---' %>
                </td>
                <td style="text-align: left;">
                  <%= data.warehouse_name || data.warehouse_id %>
                </td>
                <td style="text-align: left;">
                  <%= data.executed_by || '---' %>
                </td>
                <td style="text-align: left;">
                  <%= data.warehouse_location ? data.warehouse_location : '---' %>
                </td>
                <td style="text-align: left;">
                  <%= data.warehouse_location ? '---' : (data.location || '---' ) %>
                </td>

                <td>
                  <% if(menuPermission?.read_status){ %>
                    <a class="btn btn-info btn-sm mr-1" href="/product-series/details/<%= data.item_id %>">
                      <i class="fa fa-eye"></i>
                    </a>
                    <% } %>
                      <% if(menuPermission?.update_status){ %>
                        <a class="btn btn-primary btn-sm mr-1" href="/product-series/edit/<%= data.item_id %>">
                          <i class="fas fa-pencil-alt"></i>
                        </a>
                        <% } %>
                          <% if(menuPermission?.delete_status){ %>
                            <a class="btn btn-danger btn-sm" href="#"
                              onclick="deleteDataFunc('<%= data.item_id %>', 'product-series/delete/<%= data.item_id %>')">
                              <i class="fas fa-trash"></i>
                            </a>
                            <% } %>
                </td>
              </tr>
              <% }) %>
          </tbody>
        </table>

      </div>
    </div>
  </div>
</div>

<!-- DataTable + Filter Script -->
<script>
  $(document).ready(function () {
    const table = $('#warehouseTable').DataTable({
      paging: true,
      lengthChange: true,
      searching: true,
      ordering: true,
      info: true,
      autoWidth: false,
      columnDefs: [{ targets: [6, 7, 8], visible: false }]
    });

    const packagingFilter = $("#packagingFilter");

    // Custom filter for product + packaging
    $.fn.dataTable.ext.search.push(function (settings, data) {
      const selectedProduct = $("#productFilter option:selected").text().trim();
      const selectedProductId = $("#productFilter").val();
      const selectedPackaging = packagingFilter.val()?.trim() || "";

      const rowProduct = data[0].trim(); // Produkt column
      const rowPackaging = data[3].trim(); // Artikel-Nr column

      if (selectedProductId && rowProduct !== selectedProduct) {
        return false;
      }
      if (selectedPackaging && rowPackaging !== selectedPackaging) {
        return false;
      }
      return true;
    });

    // Product filter
    $('#productFilter').on('change', function () {
      const productId = $(this).val();
      const productName = $("#productFilter option:selected").text().trim();
      const packagingContainer = $("#packagingContainer");

      if (productId) {
        packagingContainer.show();
        packagingFilter.html('<option value="">Artikelauswählen</option>');

        // Reset columns back to product view when product changes
        // table.columns([0, 5, 9]).visible(true);
        // table.columns([6, 7, 8]).visible(false);

        table.columns([0, 5, 6, 7, 8]).visible(true);
        table.columns([9]).visible(false);


        // Populate packaging dropdown
        fetch(`/product-series/get-packagings/${productId}`)
          .then(res => res.json())
          .then(data => {
            data.forEach(pk => {
              packagingFilter.append(
                `<option value="${pk.package_number}">${pk.package_number}</option>`
              );
            });
          })
          .catch(() => {
            packagingFilter.html('<option value="">Fehler beim Laden</option>');
          });

        $("#selectedProductBox").text(productName).show();
      } else {
        packagingContainer.hide();
        packagingFilter.html('<option value="">Alle Verpackungen</option>');
        $("#selectedProductBox").hide();
      }

      table.draw(); // redraw table (updates pagination/info)
    });

    // ***************** I commeneted out as client dont need this filter option ****************************** //

    // Packaging filter
    // packagingFilter.on('change', function () {
    //   const packagingValue = $(this).val()?.trim();
    //   const productName = $("#productFilter option:selected").text().trim();

    //   if (productName) {
    //     const text = packagingValue ? `${productName} / ${packagingValue}` : productName;
    //     $("#selectedProductBox").text(text).show();
    //   } else {
    //     $("#selectedProductBox").hide();
    //   }

    //   // Toggle columns depending on packaging
    //   if (packagingValue) {
    //     // When Artikelis selected → show extra columns (6,7,8), hide Produkt/Lager/Aktionen
    //     table.columns([0, 5, 9]).visible(false);
    //     table.columns([6, 7, 8]).visible(true);
    //   } else {
    //     // When only product is selected → show Produkt/Lager/Aktionen, hide extra
    //     table.columns([0, 5, 9]).visible(true);
    //     table.columns([6, 7, 8]).visible(false);
    //   }

    //   table.draw();
    // });

  });
</script>