@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">

    {{-- @include('components.breadcrumb') --}}
    <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName" />
    {{-- --}}


    {{-- summary card --}}
    <div class="row">
        {{-- --}}
        <div class="col-xl-3">
            <div class="card card-blue text-white" style="height: 170px;">
                <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">
                            <small class="mb-3">Non Cash Invoices</small>
                            <h5 class="mb-0" id='totalInvAmount'> {{number_format($total_inv,2)}}</h5>
                            <small style="font-size:16px;" class="mb-0">no of trans</small>
                            <h5 class="mb-0" id='totalNumberOfInv'>{{number_format($total_inv_count)}}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --}}
        <div class="col-xl-3">
            <div class="card card-purple text-blue" style="height: 170px;">
                <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">
                            <small class="mb-3">Wallet</small>
                            <h5 class="mb-0" id='totalInvAmount'> {{number_format($totalWalletAmount)}}</h5>
                            <small class="mb-0"> no of Transactions </small>
                            <h5 class="mb-0" id='totalNumberOfInv'>{{number_format($totalWalletCount)}}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --}}
        <div class="col-xl-3">
            <div class="card card-green text-white" style="height: 170px;">
                <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">
                            <small class="mb-3">Amount Remitted</small>
                            <h5 class="mb-0" id='totalRemitAmount'>{{number_format($total_rem)}}</h5>
                            <small class="mb-0">no of Transactions</small>
                            <h5 class="mb-0" id='totalNumberOfremit'>{{number_format($total_rem_count)}}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --}}
        <div class="col-xl-3">
            <div class="card card-red text-white" style="height: 170px;">
                <div class="card-block p-0 m-0">
                    <div class="row align-items-center p-0 m-0">
                        {{--<div class="col-8">
                            <small class="mb-3">Total Notified Amount</small>
                            <h5 class="mb-0" id='totalAmount'> {{number_format($overall_total_with_notification)}}</h5>

                            <small class="mb-0"> no of Transactions</small>
                            <h5 class="mb-0" id='totalNumber'>{{number_format($overall_total_count)}}</h5>

                            <small class="mb-0">Total Amount: {{number_format($overall_total)}}</small>

                        </div>--}}
                        <div class="col-12 p-0 m-0">
                            <p class="mb-1">Total Amount</p>
                            <h5 class="mb-0" id='totalAmount'> {{number_format($overall_total_with_notification)}}</h5>
                            <div><small class="mb-3 font-italic">Received Notifications</small> | <small class="mb-3 font-italic"><span  id='totalNumber'>{{number_format($overall_total_count_notification)}}</span> transactions</small></div>

                            <!-- <hr class="bg-white"> -->
                            <div class="bg-white my-2" style="height: 0.2px; width: 100%;"></div>

                            <h6>{{number_format($overall_total)}}</h6>
                            <div><small class="mb-3 font-italic">Actual Paid</small> | <small class="mb-3 font-italic"><span  id='totalNumber'>{{number_format($overall_total_count)}}</span> transactions</small></div>

                        </div>
                        {{--<div class="col-4 text-right">
                            <i class="fas fa-cube f-30"></i>
                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- summary card --}}

    {{-- page title ends here --}}
    {{-- Fitlering --}}
    <div class="card">
        <div class="py-xl-4 px-xl-3">
            <h6>Filter Results</h6>
            <form action="{{route('invoiceListing')}}" method="GET">
                <div class="row">
                    <!-- MDA ::auth()->user()->mda_id==0  -->
                    @if (
                    auth()->user()->roleId ==1 ||
                    (auth()->user()->roleId==7 && auth()->user()->mda_id==0) ||
                    (auth()->user()->roleId==5 & 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">
                            <label for="">mdas</label>
                            <select class="select2 form-control" id="mda_id" onchange="getServices(this.value)" name="mda">
                                <option value="all">All Mda</option>
                                @foreach ($mdas as $mda)
                                @if ($mda['id'] == $mda_id)
                                <option value="{{$mda['id']}}" selected> {{ $mda['name']}} </option>
                                @else
                                <option value="{{$mda['id']}}"> {{ $mda['name']}} </option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @else
                    <input type="hidden" name="mda" 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">
                            <label for="">services</label>
                            <div class="loading_service" id="loading_service" style="display: none">loading...</div>
                            @if (isset($_GET['services']))
                            <input type="hidden" id="selected_service" value="{{$_GET['services']}}" />
                            @else
                            <input type="hidden" id="selected_service" value="all" />

                            @endif


                            <select class="select2 form-control" name="services" id="service_id">
                                {{-- service_id --}}
                                <option value="all">Select Service </option>
                            </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">
                            <label for="">invoice grouping</label>
                            <select class="select2 form-control" id="transaction_group" name="groupBy">
                                {{-- <option value="0">Change Transaction Grouping </option> --}}

                                <option value="0" selected>Group by Transaction Reference </option>
                                <option value="1">Group by Invoice Number </option>
                            </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" name="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" name="toDate" />
                        </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" name="payment_status">

                                <option value="0" selected>Paid(All) </option>
                                <option value="1" {{ isset($_GET['payment_status']) && $_GET['payment_status'] == "1" ? 'selected' : ''  }}>Paid(Card) </option>
                                <option value="2" {{ isset($_GET['payment_status']) && $_GET['payment_status'] == "2" ? 'selected' : ''  }}>Paid(Bank) </option>
                                <option value="3" {{ isset($_GET['payment_status']) && $_GET['payment_status'] == "3" ? 'selected' : ''  }}>Paid(Cheque) </option>
                                <option value="6" {{ isset($_GET['payment_status']) && $_GET['payment_status'] == "6" ? 'selected' : ''  }}> Paid & Unremitted </option>
                                <option value="4" {{ isset($_GET['payment_status']) && $_GET['payment_status'] == "4" ? 'selected' : ''  }}>Unpaid </option>
                                <option value="5" {{ isset($_GET['payment_status']) && $_GET['payment_status'] == "5" ? 'selected' : ''  }}>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" name="bankName">
                                @foreach (allBanks() as $bank)
                                <option {{ isset($_GET['bankName']) && $_GET['bankName'] == $bank ? 'selected' : ''  }} 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>
                        {{-- onclick="search()" --}}
                        <button id="submit" class="btn btn-md btn-primary btn-block searchList pull-right">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- push external js -->
<div class="col-md-12">
    <div class="card mb-5">
        <div class="py-xl-4 px-xl-3">
            <div class="card-header">
                <div>
                    <h2 style="display: block;">Non Cash Invoice</h2>
                    <p style="display: block; margin-bottom: 0">Filter Result: {{$fromDate}} to {{$toDate}}</p>
                </div>
            </div>
            <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">
                                                        @foreach ($data as $key=>$item)
                            <tr>
                                <td>{{$key+1}} </td>
                                <td>{{$item->transaction_reference}}</td>
                                <td>{{ $item->fname }} {!! $item->lname !!}</td>
                                <td>{{$item->service_name}}</td>
                                <td>{{$item->mda_name}}</td>
                                <td>{{number_format($item->amount,2)}}</td>
                                <td>{{$item->paid_at ? date('d-m-Y',strtotime($item->paid_at)) : '-'}}</td>
                                <td>
                                    {{
                                        paymentChannel($item->bankbranch,$item->payment_type)

                                        }}
                                </td>
                                <td>{{$item->invoice_no}}</td>
                                <td>{{$item->creator_name}}</td>
                                <td>
                                    {!!
                                    $item->payment_status==1
                                    ?
                                    "<span class='badge badge-success'>Paid</span>"
                                    :
                                    "<span class='badge badge-danger'>UnPaid</span>"
                                    !!}
                                </td>
                                <td style="min-width:95px;">
                                                                            <span>N/A</span>
                                    
                                </td>
                            </tr>

                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
            {{-- --}}
            @if ($data->links())
            <div class="card-footer d-flex justify-content-center">
                {!! $data->links() !!}
            </div>

            @endif
        </div>
    </div>
    {{-- --}}
    <div class="card">
        <div class="card-header">
                <div>
                    <h2 style="display: block;">Remittance(s)</h2>
                    <p style="display: block; margin-bottom: 0">Filter Result: {{$fromDate}} to {{$toDate}}</p>
                </div>
            </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">
                    @foreach ($remsdata as $item)
                    <tr>
                        {{-- <td> </td> --}}
                        <td> {{$item->amount}} </td>
                        <td> {{$item->transaction_id}} </td>
                        <td> {!!
                            $item->payment_status=='Paid'?
                            "<span class='badge badge-success'>Paid</span>"
                            :
                            "<span class='badge badge-danger'>UnPaid</span>"
                            !!}
                        </td>
                        <td>{{ Str::ucfirst($item->channel)}} </td>
                        <td> {{ Str::ucfirst($item->bank)}} </td>
                        <td>{{$item->agent_name}}</td>
                        <td>{{$item->month}}</td>
                        <td>{{$item->mda_name}}</td>
                        <td>{{$item->createdDtm}}</td>
                        <td> <a href='{{route('printRemittance',$item->rem_id)}}' class='btn btn-primary btn-sm'>View</a> </td>
                    </tr>

                    @endforeach


                </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 = `