<div class="row">
  <div class="col-md-12 mt-2">
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title"><%= sectionTitle %></h3>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-hover table-head-fixed datatable123">
          <thead>
            <tr>
              <th style="width: 1%">#</th>
              <th style="width: 10%; text-align: left">Gutscheincode</th>
              <th style="width: 10%; text-align: left">Auftragsnummer</th>
              <th style="width: 10%; text-align: left">Coupon-Rabatt</th>
              <th style="width: 10%; text-align: left">Benutzt von</th>
              <th style="width: 10%; text-align: left">Gesamtmenge</th>
              <th style="width: 10%; text-align: left">Datum</th>
              <!-- <th style="width: 10%">Aktion</th> -->
            </tr>
          </thead>
          <tbody>
            <% if (dataList.length > 0) { %>
              <% let index = ((page - 1) * limit) + 1; %>
              <% dataList.forEach((data) => { %>
                <tr>
                  <td><%= index++ %></td>
                  <td style="text-align: left"><%= data?.coupon_code %></td>
                  <td style="text-align: left">OD-<%= data?.order_id %></td>
                  <td style="text-align: left"><%= data.coupon_discount ? Math.round(data.coupon_discount) + '%' : 'N/A' %></td>
                  <td style="text-align: left"><%= data?.user_name %></td>
                  <td style="text-align: left"><%= data?.user_name %></td>
                  <td style="text-align: left"><%= new Date(data.created_at).toLocaleDateString('en-GB') %></td>
                  <!-- <td>
                 
                    <a class="btn btn-info btn-sm mr-2" href="/coupon/details/<%= data.id %>" data-toggle="tooltip" title="Detaildaten">
                      <i class="fa fa-eye"></i>
                    </a>
                  
                  </td> -->
                </tr>
              <% }); %>
            <% } else { %>
              
            <% } %>
          </tbody>
          
        </table>

        <% if (dataList.length > 0) { %>
          <div class="col-sm-12 col-md-7 pl-0">
            <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
              <ul class="pagination">
                <!-- Previous Button -->
                <li class="paginate_button page-item previous <%= currentPage === 1 ? 'disabled' : '' %>" id="DataTables_Table_0_previous">
                  <a href="?page=<%= currentPage > 1 ? currentPage - 1 : 1 %>&limit=<%= limit %>" aria-controls="DataTables_Table_0" aria-disabled="<%= currentPage === 1 %>" role="link" tabindex="0" class="page-link">Previous</a>
                </li>

                <!-- Page Numbers -->
                <% for (let i = 1; i <= totalPages; i++) { %>
                  <li class="paginate_button page-item <%= i === currentPage ? 'active' : '' %>">
                    <a href="?page=<%= i %>&limit=<%= limit %>" aria-controls="DataTables_Table_0" role="link" aria-current="<%= i === currentPage ? 'page' : '' %>" tabindex="0" class="page-link"><%= i %></a>
                  </li>
                <% } %>

                <!-- Next Button -->
                <li class="paginate_button page-item next <%= currentPage === totalPages ? 'disabled' : '' %>" id="DataTables_Table_0_next">
                  <a href="?page=<%= currentPage < totalPages ? currentPage + 1 : totalPages %>&limit=<%= limit %>" aria-controls="DataTables_Table_0" role="link" aria-disabled="<%= currentPage === totalPages %>" tabindex="0" class="page-link">Next</a>
                </li>
              </ul>
            </div>
          </div>
        <% } %>
        
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $('.datatable123').DataTable({
      
      paging: false, // Pagination handled by server
      lengthChange: false,
      searching: true,
      ordering: true,
      info: false,
      autoWidth: false,
      columns: [
        { orderable: true },  // # column
        { orderable: false },  // Gutscheincode
        { orderable: false },  // Auftragsnummer
        { orderable: false },  // Coupon-Rabatt
        { orderable: false }, // Benutzt von
        { orderable: false }, // Gesamtmenge
        { orderable: false }, // Datum
        // { orderable: false }   // Aktion
      ]
    });
  });
</script>

<%- contentFor('pageModalSection') %>
<%- contentFor('pageScriptsSection') %>
