@extends('layouts.admin') @section('content')
<div class="col-lg-12 col-xxl-9">
  <div class="card mb-3">
    <div class="card-body">
      <div class="row">

        <div class="col-lg-4 pt-3 pt-lg-0">
          <div class="d-flex flex-between-center mb-3">
            <div class="d-flex align-items-center">
              <div class="icon-item icon-item-sm bg-soft-primary shadow-none me-2 bg-soft-success"><span class="fas fa-calendar-week text-success"></span></div>
              <h6 class="mb-0">Search Per Date</h6>
            </div>
          </div>
          <div class="d-flex">
            <div class="d-flex">
            <form class="form-material" method="POST" action="{{ url ('/search_date_arrear')}}">
                @csrf
                @if(count($errors->all()))
                @foreach ($errors->all() as $error)
                <div class="alert alert-danger alert-dismissable"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>Alert!</strong> {{ $error }} </div> @endforeach @endif

                Cover:
                <select required name="cover" class="form-control">
                  <option disabled selected>--Select Option--</option>
                  <option value="all">All</option>
                  @foreach ($covers1 as $cover1)
                  <option value="{{$cover1->id}}">{{$cover1->name}}</a></option>
                  @endforeach
                </select>

                From
                <input type="date" value="<?php echo date('Y-m-d'); ?>" required class="form-control" name="date1" id="">
                To:<input type="date" value="<?php echo date('Y-m-d'); ?>" required class="form-control" name="date2" id="">
                <br>
                <button type="submit" class="btn btn-primary btn-sm" aria-placeholder="Search"><i class="fas fa-search"></i> Preview</button>
              </form>
            

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<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">Surname</th>
              <th class="sort" data-sort="date">Name</th>
              <th class="sort" data-sort="member_id">National ID</th>
              <th class="sort" data-sort="name">Gender</th>
              <th>Amount</th>
              <th># of Arrears</th>
              <th>Payment Date</th>

            </tr>
          </thead>
          <tbody class="list">
            @foreach ($arrears as $arrear)
            <tr>
              <td class="id">{{$arrear->surname}}</td>
              <td class="date">{{$arrear->name}}</td>
              <td class="name">{{$arrear->national_id}}</td>
              <td class="name">{{$arrear->gender}}</td>
              <td class="name">{{$arrear->amount}}</td>
              <td class="name">{{$arrear->arrears}}</td>
              <td class="name">{{$arrear->payment_date}}</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