<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="/coupon/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">
        <table class="table table-hover table-head-fixed datatable">
          <thead>
            <tr>
              <th style="width: 1%">#</th>
              <th style="width: 10%; text-align: left">Title</th>
              <th style="width: 10%; text-align: left" data-orderable="false">Gutscheincode</th>
              <th style="width: 10%; text-align: left" data-orderable="false">Coupon-Rabatt</th>
              <th style="width: 10%; text-align: left" data-orderable="false">Gültig ab</th>
              <th style="width: 10%; text-align: left" data-orderable="false">Gültig bis</th>
              <th style="width: 5%; text-align: center" data-orderable="false">Status</th>
              <th style="width: 20%">Aktion</th>
            </tr>
          </thead>
          <tbody>
            <% if (dataList.length > 0) { %>
            <% let index = ((currentPage - 1) * limit) + 1; %>
            <% for (let data of dataList) { %>
              <tr>
                <td><%= index++ %></td>
                <td style="text-align: left"><%= data?.title %></td>
                <td style="text-align: left"><%= data?.coupon_code %></td>
                <td style="text-align: left">
                  <% if (data?.coupon_type === 1) { %>
                    € <%= data?.coupon_discount %>
                  <% } else if (data?.coupon_type === 2) { %>
                    <%= Math.round(data?.coupon_discount) %> %
                  <% } %>
                </td>
                
                <td style="text-align: left"><%= new Date(data.valid_from).toLocaleDateString('en-GB') %></td>
                <td style="text-align: left"><%= new Date(data.valid_to).toLocaleDateString('en-GB') %></td>
                <td>
                  <% if (data?.status === 1) { %>
                    <span class="badge bg-success">Aktiv</span>
                  <% } else { %>
                    <span class="badge badge-danger">Inaktiv</span>
                  <% } %>
                </td>
                <td>
                  <a class="btn btn-info btn-sm mr-2" href="/coupon/history/?coupon_id=<%= data.id %>" data-toggle="tooltip" title="Detaildaten">
                    <i class="fa fa-history"></i>
                  </a>
                  <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>
                  <a class="btn btn-info btn-sm mr-2" href="/coupon/edit/<%= data.id %>" data-toggle="tooltip" title="Daten bearbeiten">
                    <i class="fas fa-pencil-alt"></i>
                  </a>
                  <a class="btn btn-danger btn-sm" id="delete_<%= data.id %>" onclick="deleteDataFunc(`<%= data.id %>`, `coupon/delete/<%= data.id %>`)" data-toggle="tooltip" title="Delete">
                    <i class="fas fa-trash"></i>
                  </a>
                </td>
              </tr>
              
            <% } %>
            <% }else{ %>
            
              <% } %>
          </tbody>
        </table>

    
        
      </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: true },  // Title
        { orderable: false }, // Gutscheincode (make this non-orderable)
        { orderable: false },  // Coupon-Rabatt
        { orderable: false },  // Gültig ab
        { orderable: false },  // Gültig bis
        { orderable: false },  // Status
        { orderable: false }   // Aktion
      ]
    });
  });
</script>

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