<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="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="/recipe-reports">
                  <div class="input-group" style="top: 2px;">
                  <select id="report-type" class="form-control" name="type" >
                    <option value="1" <%= type == "1" ? 'selected' : '' %>>Tagesberichte</option>
                      <option value="2" <%= type == "2" ? 'selected' : '' %>>Monatliche Reportagen</option>
                      <option value="3" <%= type == "3" ? 'selected' : '' %>>Jahresberichte</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="search" 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">
                <% if (type == 1) { %>
                  Datum
                <% } else if (type == 2) { %>
                  Month

                <% } else { %>
                  Jahr
                <% } %>
              </th>
              <% if (type != 2 && type != 3) { %>
                <th style="width: 10%; text-align: left;" data-orderable="false">
                  Tag
                </th>
              <% } %>
             
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Gesamtrezept
              </th>
              
                
            </tr>
          </thead>
          <tbody>
            <% let index=1;%>
              <% for (data of dataList){ %>
                <tr>
                  <td>
                    <%=index++%>
                  </td>
                 

                  <td>  
                    <% if (type == 1) { %>
                      <%= new Date(data.created_at).toLocaleString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(',', '') %>
                    <% } else if (type == 2) { %>
                      <% 
                        // Array of month names
                        const monthNames = ["January", "February", "March", "April", "May", "June", 
                                            "July", "August", "September", "October", "November", "December"];
                        
                        // Get the month name based on the month number (data.month)
                        let monthName = monthNames[data.month - 1]; // Subtract 1 since months are 0-indexed
                      %>
                      <%= monthName %>
                    <% } else { %>
                      <%= data.year %>
                    <% } %>
                  </td>
                  
                  
            


                  <% if (type != 2 && type != 3) { %>
                    <td style="text-align: left;">
                      <%= data.created_at && !isNaN(new Date(data.created_at)) 
                        ? new Date(data.created_at).toLocaleString('en-GB', { weekday: 'long' }) 
                        : "N/A" %>
                    </td>
                  <% } %>
                  
   
                  <td style="text-align: left;" ><%= data.total || 'N/A' %></td>
                </tr>
                <% } %>
                
                <!--  -->
          </tbody>
       
          
        </table>
      </div>
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->


<script>

document.addEventListener('DOMContentLoaded', function () {
  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-recipe-reports";  // Update this URL with your export route
    form.submit();  // Submit the form to generate the export
  });


   document.querySelector('button[name="submitBtn"][value="search"]').addEventListener('click', function(event) {
    // Ensure export does not get triggered
    event.stopImmediatePropagation(); // Prevents other submit handlers from being called
    var form = document.getElementById('filterForm');
    form.action = "/recipe-reports"; // Set action to search URL

    // Submit form for search
    form.submit();
  });

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