<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="/coupon-availed-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" id="dt">
          <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">
                Kundin
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Gutscheincode
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Gesamtmenge
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Coupon-Rabatt
              </th>
              <th style="width: 10%; text-align: left" data-orderable="false">
                Datum
              </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">
                <%= data.user_name %>
                <br />
                <%= data.user_email %>
              </td>

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

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

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

              <td style="text-align: left">
                <%= new Date(data.used_at).toLocaleDateString('en-GB') %>
              </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-coupon-availed-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>

<script>
  $(document).ready(function() {
      // Check if the table is already initialized and destroy it if necessary
      if ($.fn.dataTable.isDataTable('#dt')) {
          $('#dt').DataTable().destroy();  // This removes DataTable instance
      }
      
      // Reinitialize DataTable to display the data again
      $('#dt').DataTable({
          "searching": false,  // Disable search functionality
          "paging": true,      // Enable pagination (optional)
          "info": true         // Show pagination info (optional)
      });
  });
  
  
  </script>

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