<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="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="/orders/list">

              <div class="input-group">
                  <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="submit" value="submit" 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">
                Auftragsnummer
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Kundendetails
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Gesamt
              </th>
              <th style="width: 20%; text-align: left;" data-orderable="false">
                Bestellung aufgegeben	
              </th>
              <th style="width: 10%; text-align: left;" data-orderable="false">
                Bestellstatus	
              </th>

              <th style="width: 10%; text-align: center;" data-orderable="false">
                Zahlungsstatus
              </th>    

              <th style="width: 10%" data-orderable="false">
                Aktion
              </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.name ? (data.name.length> 50 ? data.name.slice(0,50) + '...' :
                      data.name) : 'N/A' %>
                      <br>
                      <%= data.contact_no %>
                      <br>
                      <%= data.email %>

                  </td>

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

                  <td style="text-align: left;">  <% if(data.order_date) { %>
                    <%= new Date(data.order_date).toLocaleString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(',', '') %>
                  <% } else { %>
                    N/A
                  <% } %>


                  <td style="text-align: center;">  
                    <% if (data?.order_status_id == 1) { %>
                      <span class="badge bg-warning">Pending</span>
                    <% } else if (data?.order_status_id == 2) { %>
                      <span class="badge bg-primary">Processing</span>
                    <% } else if (data?.order_status_id == 5) { %>
                      <span class="badge badge-danger">Cancelled</span>
                    <% } else if (data?.order_status_id == 4) { %>
                      <span class="badge badge-success">Completed</span>
                    <% } else { %>
                      <span class="badge bg-warning">Processing</span>
                    <% } %>
                  </td>
                  

                  <td><%= data.payment_status %>
                  
                  </td>
               
                  <td>

                    <a class="btn btn-info btn-sm mr-2" href="/orders/detail/<%= data.orders_id %>?return_url=/orders/list" data-toggle="tooltip"
                      title="Edit">
                      <i class="fa fa-eye">
                      </i>
                    </a>

            

                    <!-- <a class="btn btn-danger btn-sm" id="delete_<%=data.id%>"
                      onclick="deleteDataFunc(`<%=data.id%>`,`cms/delete/<%=data.id%>`)" data-toggle="tooltip"
                      title="Delete">
                      <i class="fas fa-trash">
                      </i>
                    </a> -->
                  </td>
                </tr>
                <% } %>
          </tbody>
        </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 = '';
    
    // 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')%>