<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="/membership-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">
                Paketnamen  
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Preis
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Gesamtabonnement
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Aktives Abonnement	
              </th>
           
              <th style="width: 10%;" data-orderable="false">
                Gesamtmenge
              </th>
          
            </tr>
          </thead>
          <tbody>
            <% let index=1;%>
              <% for (data of dataList){ %>
                <tr>
                  <td>
                    <%=index++%>
                  </td>
                  <td><%= data.package_name ? data.package_name : "N/A" %></td>

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


                  <td style="text-align: left;">
                    <%= data.total_subscription  %>

                  </td>

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

                
                  <td style="text-align: left;"> € <%= data.total_price || 0 %></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-membership-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')%>