<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="/generate-sales-reports" 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="/daily-reports">

            <div class="input-group" style="top: 2px;">                  <select id="report-type" class="form-control" name="type" onchange="this.form.submit()">
                    <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">
          <thead>
            <tr>
              <th style="width: 1%">
                #
              </th>
              <th style="width: 2%; 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: 2%; text-align: left;" data-orderable="false">
                  Tag
                </th>
              <% } %>
              <th style="width:2%; text-align: left;" data-orderable="false"  >
                Gesamtbestellungen
              </th>
              <th style="width: 2%; text-align: left;" data-orderable="false">
                Gesamtmenge
              </th>
                
            </tr>
          </thead>
          <tbody>
            <% let index=1;%>
              <% for (data of dataList){ %>
                <tr>
                  <td>
                    <%=index++%>
                  </td>
                 

                  <td>  
                    <% if (type == "1") { %>
                      <%= new Date(data.Datum).toLocaleString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(',', '') %>
                    <% } else if (type == '2') { %>
                      <%= data.Datum ? new Date(data.Datum).toLocaleString('en-GB', { month: 'long' }).replace(',', '') : "N/A" %> 

                    <% } else if (type == '3') { %>
                      <%= data.Datum  %>
                    <% }
                    
                    else { %>
                      <%= new Date(data.Datum).toLocaleString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(',', '') %>
                      
                    <% } %>
                  </td>
                  
                  
            


                  <% if (type != '2' && type != '3') { %>
                    <td style="text-align: left;" ><%= data.Tag || 'N/A' %></td>
                  <% } %>
   
                  <td style="text-align: left;" > 
                    <%= data.Gesamtbestellungen ? data.Gesamtbestellungen : "N/A" %></td>

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

                         

                </tr>
                <% } %>
                
                <!--  -->
          </tbody>
          <tfoot>
            <tr class="active">
              <% if (type == '2' || type == '3') { %>
                <td colspan="3" class="text-left">Zwischensumme</td> <!-- Adjusted colspan to 3 -->
              <% } else { %>
                <td colspan="4" class="text-left">Zwischensumme</td> <!-- Original colspan -->
              <% } %>
              <td><%= Zwischensumme %></td>
            </tr>
          </tfoot>
          
        </table>
      </div>
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->


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