@extends('layouts.admin') @section('content')

<div class="card mb-3">
  <div class="card-header">
    <div class="row flex-between-end">
      <div class="col-auto align-self-center">
        
        <form class="form-material" method="POST" action="{{ url ('/search_arrear')}}">
          @csrf
          <input type="text" class="form-control" name="search" id="search">
          <br><button type="submit" class="btn btn-primary btn-sm" aria-placeholder="Search"><i class="fas fa-search"></i> Search</button>
           <br><br>
           <h5 class="mb-0" data-anchor="data-anchor">List of arrears</h5>        
        </form>
      </div>
    </div>
  </div>
  <div class="card-body pt-0">

    <div id="tableExample2" data-list='{"valueNames":["id", "date", "member_id","name","amount", "method"],"page":10,"pagination":true}'>
      <div class="table-responsive scrollbar">
        <table class="table table-bordered table-striped fs--1 mb-0">
          <thead class="bg-200 text-900">
            <tr>              
            <th class="sort" data-sort="date">ID</th>
            <th class="sort" data-sort="date">Date</th>
            <th class="sort" data-sort="member_id">Payment ID</th>
            
             
            </tr>
          </thead>
          <tbody class="list">
            @foreach ($arrears as $arrear)
            <tr>
            <td class="id">{{$arrear->id}}</td>  
            <td class="date">{{$arrear->months}}</td>
            <td class="name">{{$arrear->payment_id}}</td>  
                   
           </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="d-flex justify-content-center mt-3"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
        <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"> </span></button>
      </div>
    </div>
  </div>

</div>
@endsection