@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') }}">
        <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  mt-5">
        <div class="row">
            {{--  --}}
            <div class="col-xl-4">
                <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:16px;" class="mb-3">Non Cash Invoices
                                    <br/>
                                    <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='totalInvAmount'></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 class="col-xl-4">
                <div class="card card-green text-white">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p style="font-size:16px;" class="mb-3">Total Amount Remitted
                                    <br/>
                                    <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='totalRemitAmount'></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='totalNumberOfremit'>
                                        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 class="col-xl-4">
                <div class="card card-red text-white">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p style="font-size:16px;" class="mb-3">Total Amount
                                    <br/>
                                    <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='totalAmount'></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='totalNumber'>
                                        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="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{__('Payment Report') }} </h5>
                            {{-- <span>{{ __('Listing of all Cash collections')}}</span> --}}
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">{{ __('Dashboard')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        {{-- page title ends here --}}
        {{-- Fitlering --}}
       <h6>Filter Results</h6>
        <div class="row">
            <!-- MDA  -->
            @if (auth()->user()->mda_id==0)
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 form-group">
                <div class="input-group">
                    <select class="select2 form-control" id="mda_id" 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

            <!-- SERVICES  -->
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 form-group">
                <div class="input-group">
                    <select class="select2 form-control" name="services" id="service_id">
                        <option value="all">Select Service </option>
                        {{-- @foreach ($mdas as $mda)
                            <option value="{{$mda['id']}}">{{ $mda['name']}}</option>
                        @endforeach --}}
                    </select>
                </div>
            </div>
            <!-- Transaction Grouping  -->
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 form-group">
                <div class="input-group">
                    <select class="select2 form-control"  id="transaction_group">
                        {{-- <option value="0">Change Transaction Grouping </option> --}}
                        <option value="0" selected>Group by Transaction Reference </option>
                        <option value="1">Group by Invoice Number </option>
                        {{-- @foreach ($mdas as $mda)
                            <option value="{{$mda['id']}}">{{ $mda['name']}}</option>
                        @endforeach --}}
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                <div class="form-group">
                    <label>From Date</label>
                    <input type="text"placeholder="dd-mm-yy" value="{{$fromDate}}"  class="form-control" id="fromDate" />
                </div>
            </div>
            <!-- toDate -->
            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                <div class="form-group">
                    <label>to Date</label>
                    <input type="text" class="form-control" id="toDate"  value="{{$toDate}}" placeholder="dd-mm-yy" />
                </div>
            </div>
            <!-- payment status -->
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 form-group">
                <label>Payment Status</label>
                <div class="input-group">
                    <select class="select2 form-control"  id="payment_status">
                        <option value="0" selected>Paid(All) </option>
                        <option value="1">Paid(Card) </option>
                        <option value="2">Paid(Bank) </option>
                        <option value="3">Paid(Cheque) </option>
                        <option value="6"> Paid & Unremitted </option>
                        <option value="4">Unpaid </option>
                        <option value="5">Uncleared Cheque </option>
                    </select>
                </div>
            </div>
            <!-- bank -->
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 form-group">
                <label>Bank</label>
                <div class="input-group">
                    <select class="select2 form-control"  id="bank_id">
                        @foreach (allBanks() as  $bank)
                            <option value="{{$bank}}">{{$bank}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <!-- search -->
            <div class="col-lg-1 col-md-1 col-sm-6 col-xs-6 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>

    <!-- push external js -->
    <div class="col-md-12">
        <div class="card p-3">
            <div class="card-body">
                 <div id="firstTableDiv">
                    <table id="mda_table" class="table table-responsive table-condensed invoice_table" style="width:100%;">
                        <thead>
                            <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 Number</th>
                                <th>Created By</th>
                                <th>Payment Status</th>
                                <th class="text-center"> Action </th>
                                <th>  </th>
                            </tr>
                        </thead>
                        <tbody id="invoice_table_body">

                        </tbody>
                    </table>
                 </div>

                <div id="secondTableDiv">
                    <table  class="table remittance_table" style="width:100%;">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Amount(₦)</th>
                                <th>Transaction Reference</th>
                                <th>Payment Status</th>
                                <th>Payment Channel</th>
                                <th>Bank</th>
                                <th>User</th>
                                <th>Month</th>
                                <th>MDA</th>
                                <th>Created on</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="remittance_table_body"></tbody>
                    </table>
                </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="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>
        var resultData = []
        var overallTotal = 0
        var overallTotalRem = 0
        let name = `