<div class="row">
  <div class="col-md-12 mt-2">
    <!-- <div class="row">
      <div class="col-md-3 offset-md-9">
        <div class="card w-50 float-right mb-2"><a href="/packages/add" class="btn btn-sm btn-info m-1"><i
              class="fas fa-plus"></i> Daten hinzufügen</a></div>
      </div>
    </div> -->

    <div class="row">
      <div class="col-md-3 offset-md-9">
        <div class="card w-50 float-right mb-2">
          <a
            href="javascript:void(0);"
            id="exportBtn"
            class="btn btn-sm btn-info m-1"
            ><i class="fa fa-download"></i> Export</a
          >
        </div>
      </div>
    </div>
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title"><%=sectionTitle%></h3>
      </div>

      <div class="card-body table-responsive">
        <div
          class="box-tools pull-right"
          style="position: relative; margin-top: -5px; margin-right: -10px"
        >
          <form
            id="filterForm"
            method="get"
            style="display: inline-block"
            action="/sales-reports"
          >
            <div class="input-group" style="top: 2px">
              <input
                type="date"
                name="date_from"
                class="form-control"
                placeholder="Date From"
                value="<%= date_from || '' %>"
              />
              <input
                type="date"
                name="date_to"
                class="form-control"
                placeholder="Date To"
                value="<%= date_to || '' %>"
              />

              <div class="input-group-btn">
                <button
                  type="submit"
                  name="submitBtn"
                  value="submitBtn"
                  class="btn rounded-0 btn-primary me-2"
                >
                  <i class="fa fa-search"></i>
                </button>
                <button
                  type="button"
                  onclick="clearFilters()"
                  class="btn rounded-0 btn-primary me-2"
                >
                  <i class="fa fa-refresh"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
        <table class="table table-hover table-head-fixed datatable">
          <thead>
            <tr>
              <th style="width: 1%">#</th>
              <th style="width: 10%; text-align: center" data-orderable="false">
                Auftragsnummer
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Datum
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Produktname
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Kategorie
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Produktpreis
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Bestellstatus
              </th>
            </tr>
          </thead>
          <tbody>
            <% let index=1;%> <% for (data of dataList){ %>
            <tr>
              <td><%=index++%></td>
              <td><%= data.order_uid %></td>

              <td style="text-align: left">
                <% if(data.order_date) { %> <%= new
                Date(data.order_date).toLocaleString('en-GB', { year: 'numeric',
                month: '2-digit', day: '2-digit', }).replace(',', '') %> <% }
                else { %> N/A <% } %>
              </td>

              <td style="text-align: left">
                <%= data.product_title ? data.product_title : "N/A" %>
              </td>

              <td style="text-align: left"><%= data.category_name %></td>

              <td style="text-align: left">€ <%= data.grand_total %></td>

              <td style="text-align: left"><%= data.order_status %></td>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Function to handle the export button click
    document.getElementById("exportBtn").addEventListener("click", function () {
      // Get the form data
      var form = document.getElementById("filterForm");

      // We need to change the form's action to the export route for the export function
      form.action = "/generate-sales-reports"; // Update this URL with your export route
      form.submit(); // Submit the form to generate the export
    });

    // Function to clear filters
    function clearFilters() {
      document.querySelector('input[name="date_from"]').value = "";
      document.querySelector('input[name="date_to"]').value = "";
      var form = document.getElementById("filterForm");
      form.submit(); // Submit the form to reload the data without filters
    }

    // Expose clearFilters globally
    window.clearFilters = clearFilters;
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    function clearFilters() {
      // Clear the date fields
      document.querySelector('input[name="date_from"]').value = "";
      document.querySelector('input[name="date_to"]').value = "";

      // Find the form by ID
      var form = document.getElementById("filterForm");
      console.log("Form:", form); // Log the form to see if it's selected correctly

      // Check if the form is found
      if (form && form.nodeName === "FORM") {
        // Explicitly call the native submit method
        HTMLFormElement.prototype.submit.call(form);
      } else {
        console.error("Form not found or not a valid form element.");
      }
    }

    // Assign the function to the window object
    window.clearFilters = clearFilters;
  });
</script>

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