@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
      <div id="overlay">
        <div class="spinner"></div>
    </div>

    
    <div class="container-fluid  mt-5">
    	<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>{{__('Search Result') }} </h5>
                        </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>
    </div>
    
    <!-- push external js -->
        <div class="col-md-12">
        <div class="card p-3">
            <div class="card-body">
                 <div id="firstTableDiv">
                    <div class="mb-5"> 
                        <h2>Invoice</h2>
                        <table id="datatableu" class="table datatableu" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>{{ __('S/N')}}</th>
                                    <th>{{ __('Transaction Ref')}}</th>
                                    <th>{{ __("Payer's Name")}}</th>
                                    <th>{{ __("MDA")}}</th>
                                    <th>{{ __("Service")}}</th>
                                    <th>{{ __('Amount')}}</th>
                                    <th>{{ __('Payment Status')}}</th>
                                    <th>{{ __('Payment Date')}}</th>    
                                    <th>{{ __('Action')}}</th>    
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data as $key=> $item)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$item->transaction_reference}}</td>
                                    <td>{{$item->fname}} {{$item->lname}}</td>
                                    <td>{{$item->mda->name}}</td>
                                    <td>{{$item->service ? $item->service->name : 'N/A'}}</td>
                                    <td>₦{{number_format($item->amount,2)}}</td>
                                    <td>
                                    {!! 
                                        $item->payment_status==1 ?
                                        "<span class='badge badge-success'>Paid</span>":
                                        "<span class='badge badge-info'>Unpaid</span>"
                                     !!}
    
                                    <span class='btn btn-outline-info' id='id_{{$key}}' 
                                        onclick="requery('{{$item->requeryUrl}}','id_{{$key}}','loading_{{$key}}')">
                                        requery
                                    </span>
                                    <span style='display:none' id="loading_{{$key}}">please wait...</span>
                                   
                                    
                                    </td>
                                    <td>{{$item->paid_at}}</td>
                                    <td> 
                                        <a href="{{route('printInvoice',$item->invoice_no)}}" class="btn btn-danger"> print </a> 
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    
                    
                
                    {{-- 292 --}}
                    <hr/>
                    <div class=""> 
                        <h2>Remittance </h2>
                        <table id="rems_table" class="table datatableu_rems" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>{{ __('S/N')}}</th>
                                    <th>{{ __('Transaction Ref')}}</th>
                                    <th>{{ __("Payer's Name")}}</th>
                                    <th>{{ __("MDA")}}</th>
                                    {{-- <th>{{ __("Service")}}</th> --}}
                                    <th>{{ __('Amount')}}</th>
                                    <th>{{ __('Payment Status')}}</th>
                                    <th>{{ __('Payment Date')}}</th>    
                                    <th>{{ __('Action')}}</th>    
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rems as $key=> $item)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$item->transaction_id}}</td>
                                    <td>{{$item->user->name}}</td>
                                    <td>{{$item->mda->name}}</td>
                                    {{-- <td>{{$item->service->name}}</td> --}}
                                    
                                    <td>₦{{number_format($item->amount,2)}}</td>
                                    
                                    <td>{!! $item->payment_status=='Paid' ?
                                        "<span class='badge badge-success'>Paid</span>":
                                        "<span class='badge badge-info'>Unpaid</span>"
                                     !!}
                                        <span class='btn btn-outline-info' id='rid_{{$key}}' 
                                        onclick="requery('{{$item->requeryUrl}}','rid_{{$key}}','rloading_{{$key}}')">
                                        requery
                                        </span>
                                        <span style='display:none' id="rloading_{{$key}}">please wait...</span>
                                    </td>
                                    
                                    <td>{{$item->updatedDtm}}</td>
                                    
                                    <td> 
                                        <a href="{{route('printRemittance',$item->rem_id)}}" class="btn btn-danger">
                                        print 
                                       </a> 
                                    </td>
                                    
                                </tr>      
                                @endforeach
                            </tbody>
                        </table>
                    </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('js/_assets/general_js.js') }}"></script>
    <script>
        var resultData = []
        var overallTotal = 0
        var overallTotalRem = 0
        let name = `