@extends('layouts.main') 
@section('title', 'Payment Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.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>
    @endpush
    
    <x-loader/>
    <div class="container-fluid">
        <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc"  :iconName="$iconName"  />
        {{--  --}}
        <div class="row">
            <div class="col-xl-3">
                <div class="card card-blue text-white">
                    <div class="card-block p-0 m-0">
                        <div class="row align-items-center p-0 m-0">
                        <div class="col-12 p-0 m-0">
                            <p class="mb-1">Payment Summary</p>
                            <h5 class="mb-0" id='totalNotifiedInvAmount'>0</h5>
                            <div><small class="mb-3 font-italic">Received Notifications</small> | <small class="mb-3 font-italic"><span id='totalNotifiedTXN'>0</span> transactions</small></div>

                            <hr class="bg-white">
                            <h6 id='totalInvAmount'>0</h6>
                            <div><small class="mb-3 font-italic">Actual Paid</small> | <small class="mb-3 font-italic"><span  id='totalTXN'>0</span> transactions</small></div>

                        </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        {{-- Filter begins here --}}
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card py-3"> </div>
                    <div class="card-header d-flex justify-content-between">
                        <h3>Filters: </h3>
                    </div>
                    <div class="card-body">
                        <div class="row"> 
                            <div class="col-sm-3 form-group">
                                <div class="form-group">
                                    <label>from date</label>
                                    <input type="text" class="form-control" value="{{$from_date}}"  id="fromDate" placeholder="dd-mm-yy" />
                                </div>
                            </div>
    
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label> to date </label>
                                    <input type="text" value="{{$to_date}}" class="form-control" id="toDate" placeholder="dd-mm-yy"/>
                                </div>
                            </div>
    
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label> group by </label>
                                    <select class="select2 form-control"  id="grouping">
                                        <option selected value="a">Payments By Bank</option>
                                        <option value="b">Payments By MDA</option>
                                        <option value="c">Payments By Revenue Items</option>
                                        @forelse ($mdas as $mda_id => $mdaName)
                                            <option value="{{ $mda_id }}">{{ $mdaName }}</option>
                                        @empty
                                            <option>No MDA Available</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
    
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label> - </label>
                                    <button id="submit" class="btn btn-md btn-primary btn-block searchList pull-right" onclick="search()">
                                        <i class="fa fa-search" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- end of filter --}}

        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                     <div id="firstTableDiv">
                       
                     </div>
                </div>
        </div>
    </div>
   






        {{--  --}}
        @push('script')
        <script>
           document.body.classList.add("sidebar-mini");
        </script> 
       <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
       <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
       <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
       {{-- <script src="{{ asset('js/payment-summary.js') }}"></script> --}}
       <script src="{{ asset('js/_assets/general_js.js') }}"></script>

       <script>
           var resultData = []
           let rowsExported = [0,1,2,3,4,5,6,7,8,9]
           let name = `