@extends('admin.layouts.app')

@section('title', 'Expired Packages Report')

@push('styles')
<style>
.badge {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
}
</style>
@endpush

@section('content')
<h4 class="font-weight-bold py-3 mb-0">Expired Packages Customers</h4>

<div class="card" style="padding-right:10px;padding-left:10px;">
<div class="card-datatable">
<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Expired On</th>
      <th>Status</th>
      <th>Renew</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    @forelse ($customers as $row)
      <tr>
        <td>{{ trim($row->Fname.' '.$row->Lname) }}</td>
        <td>{{ $row->Phone }}</td>
        <td>{{ $row->Validity ? $row->Validity->format('d-M-Y') : '' }}</td>
        <td><span class="badge bg-danger">Expired</span></td>
        <td><a href="{{ route('admin.customers.renew', $row) }}" class="badge bg-success" style="color:white;">Renew</a></td>
        <td>{{ $row->Address }}</td>
      </tr>
    @empty
      <tr><td colspan="6" class="text-center text-muted">No expired customers found.</td></tr>
    @endforelse
  </tbody>
</table>
</div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
  $('#example').DataTable({
    responsive: false,
    order: [[2, 'desc']],
    pageLength: 25,
    dom: 'Bfrtip',
    buttons: [{
      extend: 'excelHtml5',
      title: 'Expire_Package_List',
      text: '<i class="fa fa-file-excel"></i> Excel',
      className: 'btn btn-success btn-sm'
    }]
  });
});
</script>
@endpush