@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 Report</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>Address</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($rows as $row)
          <tr>
            <td>{{ $row->Fname }} {{ $row->Lname }}</td>
            <td>{{ $row->Phone }}</td>
            <td>{{ $row->Validity ? date('d-M-Y', strtotime($row->Validity)) : '' }}</td>
            <td><span class="badge bg-danger">Expired</span></td>
            <td>{{ $row->Address }}</td>
          </tr>
        @endforeach
      </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