@extends('layouts.main')
@section('title', 'Cheque Status Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
    <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    {{-- date --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
    integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        {{-- <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}"> --}}
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
        </style>
    @endpush
    <x-loader/>
    {{-- lan --}}
    <div class="container-fluid">
        <x-breadcrumb  :desc="$desc" :pageTitle="$pageTitle"   :iconName="$iconName" />

        {{--  --}}
        <div class="row">
            <div class="col-xl-5">
                <div class="card card-blue text-white">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p style="font-size:15px;" class="mb-3">Cheque Status
                                    <br/>
                                    <sub style="font-size:15px; font-weight:bold;" class="mb-0" id='totalInvAmount'> 0</sub>
                                </p>
                                    <p  style="font-size:16px;"  class="mb-0">
                                     Total no of Transactions
                                     <br/>
                                     <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='totalNumberOfInv'>
                                        0
                                    </sub>
                                    </p>
                            </div>
                            <div class="col-4 text-right py-5">
                                <i class="fas fa-cube f-30"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--  --}}
        <div class="row">
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                        <h3>Filters: </h3>
                    </div>
                    <div class="card-body">
                         <div class="row">
                            @if (auth()->user()->mda_id==0)
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 form-group">
                                <div class="input-group">
                                    <label for="">mdas</label>
                                    <select class="select2 form-control" id="mda" onchange="getServices(this.value)">
                                        <option value="all">All Mda</option>
                                        @foreach ($mdas as $mda)
                                            <option value="{{$mda['id']}}"> {{ $mda['name']}} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @else
                                <input type="hidden" value="{{auth()->user()->mda_id}}" id="mda_id"/>
                            @endif

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="">services</label>
                                    <select class="select2 form-control"  id="service_id">
                                        <option value="all">Select Service </option>

                                    </select>
                                </div>
                            </div>
                            {{--  --}}

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="">payment status</label>
                                    <select class="select2 form-control"  id="payment_status">
                                        <option value="2">Uncleared</option>
                                        <option value="1" selected>Paid </option>

                                    </select>
                                </div>
                            </div>
                        </div>

                        <div  class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>from date</label>
                                    <input type="text" placeholder="dd-mm-yyyy"  class="form-control" id="fromDate"/>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>to date</label>
                                    <input type="text" class="form-control" placeholder="dd-mm-yyyy"  id="toDate">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>.</label>
                                    <button id="submit" class="btn btn-md btn-primary btn-block  pull-right" onclick="getCashInv()">
                                        <i class="fa fa-search" aria-hidden="true"></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



       <div class="row">
        <div class="col-md-12">
             <div class="card p-3">
                 <div class="card-header d-flex justify-content-between">
                    <div>
                         <h3 class="mb-2"><strong>Cheque Status</strong></h3>
                         <div class="d-flex" id="filter-wrapper"></div>
                    </div>
                 </div>
                 <div class="card-body table-responsive" id="chequeTableWrapper">
                     <table class="table table-striped  cheque" style="width:100%;">
                         <thead>
                             <tr>
                                 <tr>
                                    <th>S/N</th>
                                    <th>Transaction Reference</th>
                                    <th>Payer</th>
                                    <th>Service(s)</th>
                                    <th>MDA</th>
                                    <th>Amount(₦)</th>
                                    <th>Payment Date</th>
                                    <th>Payment Method</th>
                                    <th>Invoice No.</th>
                                    <th>Created By</th>
                                    <th>Payment Status</th>
                                    <th>Actions</th>
                             </tr>
                         </thead>
                         <tbody id="cheque_table_body"> </tbody>
                     </table>
                 </div>
             </div>
         </div>

    </div>
    </div>








    <!-- push external js -->
    @push('script')

    <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
    {{-- <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script> --}}
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js" integrity="sha512-RCgrAvvoLpP7KVgTkTctrUdv7C6t7Un3p1iaoPr1++3pybCyCsCZZN7QEHMZTcJTmcJ7jzexTO+eFpHk4OCFAg==" crossorigin="anonymous" referrerpolicy="no-referrer">
    </script> --}}
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('js/invoices.js') }}"></script>
    <script src="{{ asset('js/moment.js') }}"></script>
    <script src="{{ asset('js/_assets/general_js.js?tx=')}}{{strtotime("now")}}"> </script>


        <script>
            // hide sidbar on document readey
            document.body.classList.add("sidebar-mini");
            // ::::::::::::::::::::::::::::::::::::::::::
            let rowsExported = [0,1,2,3,4,5,6,7,8,9]
            let name = `