<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;width:100%;max-width: 70%;">   
          <form id="filterForm" method="get" style="display:inline-block;width: 100%;" action="/customer-order-reports">

            <div class="input-group" style="top: 2px;">
                <select id="report-type" class="form-control" name="month" onchange="this.form.submit()">
                  <option value="">Monatlich</option>
                  <% 
                    const months = [
                      "January", "February", "March", "April", "May", "June", 
                      "July", "August", "September", "October", "November", "December"
                    ];
                    for (let i = 0; i < months.length; i++) { 
                  %>
                    <option value="<%= i + 1 %>" <%= month == (i + 1).toString() ? 'selected' : '' %>>
                      <%= months[i] %>
                    </option>
                  <% } %>
                </select>
                
                <select id="year-type" class="form-control" name="year" onchange="this.form.submit()">
                  <option value="">Jährlich</option>
                  <% 
                    for (let i = 2023; i <= 2050; i++) { 
                  %>
                    <option value="<%= i %>" <%= year == i.toString() ? 'selected' : '' %>>
                      <%= i %>
                    </option>
                  <% } %>
                </select>
                

                  <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">
                Name
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Email
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Telefonnummer
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Bestellmenge
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Auftragssumme (€)
              </th>

            </tr>
          </thead>
          <tbody>
            <% let index=1;%>
              <% for (data of dataList){ %>
                <tr>
                  <td>
                    <%=index++%>
                  </td>


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


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

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

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

                  <td style="text-align: left;"> 
                    € <%= data.order_total_amt || 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-customer-order-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 = '';
    document.getElementById('report-type').selectedIndex = 0;
    document.getElementById('year-type').selectedIndex = 0;

    // 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')%>