@extends('reachassuree_agent_sub/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
  .scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
  }

  .dropdown-checklist{
    padding: 0px 12px;
    line-height: 0px; 
  }

  .dropdown-checklist input{
    margin-left: 3px;
  }

  ::-webkit-scrollbar {
    width: 20px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 4px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .pos-middle{
    vertical-align: middle;
  }

  #datatable tbody td:nth-child(20) {
    white-space: normal;
    word-wrap: break-word;
  }
</style>

<div class="page-content">
    <div class="container-fluid">
        @if(session()->has('message'))
          <p class="alert alert-danger">{{session('message')}}</p>
        @endif

        <!-- start page title -->
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
          <h4 class="mb-sm-0 font-size-18">
            <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm" title="Back Button" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
          </h4>
        </div>
        <!-- end page title -->
       
        <div class="row" id="card">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-8">
                    <div class="row">
                      <div class="col-md-4">
                        <div class="mb-3">
                            <label for="date_type" class="form-label">Select date type</label>
                            <select class="form-control" name="date_type" id="date_type">
                              <option value="Transaction Date">Transaction Date</option>
                              <option value="Document Date">Document Date</option>
                              <option value="Payment Start Date">Payment Start Date</option>
                              <option value="Payment To Date">Payment To Date</option>
                              <option value="Mature Date">Mature Date</option>
                              <option value="Created Date">Created Date</option>
                              <option value="Modified Date">Modified Date</option>
                            </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="mb-3">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="text" class="form-control" name="start_date" id="start_date" placeholder="Start date" value="{{date('d-m-Y')}}" autocomplete="off">
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="mb-3">
                          <label for="end_date" class="form-label">End Date</label>
                          <input type="text" class="form-control" name="end_date" id="end_date" placeholder="End date" value="" autocomplete="off">
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="mb-3">
                          <label  class="form-label extra_space">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                          <button type="button" onclick="clearFilterFields();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 float-end">
                    <div class="float-end">
                      <input type="hidden" name="token" value='