@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') }}"> --}}
<style>
    .card-body table {
        width: 100% !Important;
    }

    .table-actions a {
        font-size: 5px !important;
    }

    #overlay {
        background: #ffffff;
        color: #666666;
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 5000;
        top: 0;
        left: 0;
        float: left;
        text-align: center;
        padding-top: 25%;
        opacity: .80;
    }

    button {
        cursor: pointer;
    }

    .spinner {
        margin: 0 auto;
        height: 64px;
        width: 64px;
        animation: rotate 0.8s infinite linear;
        border: 5px solid firebrick;
        border-right-color: transparent;
        border-radius: 50%;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<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">
    <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName" />
    <h6>Filter Results</h6>
    <form action="{{route('agency.remittance')}}" method="POST">
        @csrf
        <div class="row">
            <!--  -->
            <!-- start and end date -->
            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                <div class="form-group d-flex">
                    <input type="date" value="{{$fromDate}}" class="form-control" name="fromDate">
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                <div class="form-group  d-flex">
                    <input type="date" name="toDate" class="form-control" value="{{$toDate}}" />
                </div>
            </div>
            {{--This is agency agent--}}
            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                <select name="status" class="form-control">
                    <option value="1" {{$status==1?'selected':''}}>Paid</option>
                    <option value="0" {{$status==0?'selected':''}}>UnPaid</option>
                </select>

            </div>

            <div class="col-lg-1 col-md-1 col-sm-6 col-xs-6 form-group">
                <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>

<!-- push external js -->
<div class="col-md-12">
    <div class="card p-3">
        <div class="card-body">
            <div id="firstTableDiv">
                <div class="table-responsive px-3">
                    <table id="mda_table" class="table datatableu" style="width:100%;">
                        <thead>
                            <tr>
                                <th>{{ __('S/N')}}</th>
                                <th>{{ __('Transaction Ref')}}</th>
                                <th>{{ __('Amount')}}</th>
                                <th>{{ __('Agent Name')}}</th>
                                <th>{{ __('Payment Status')}}</th>
                                {{-- <th></th> --}}
                                <th>{{ __('Payment Date')}}</th>
                                <th>{{ __('Action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data as $key=> $item)
                            <tr>
                                <td>{{$key+1}}</td>
                                <td>{{$item->transaction_reference}}</td>
                                <td>{{$item->amount}}</td>
                                <td>{{$item->name}}</td>
                                <td>{!! $item->payment_status==1 ? "<span class='badge badge-success'>Paid</span>":"<span class='badge badge-info'>Unpaid</span>" !!}
                                    <span id='rid_{{$key}}' class="btn btn-outline-warning" onclick="requery('{{env('APP_URL')}}/api/v1/m/callback/agency/agency-agent-wallet-remittance/{{$key}}?reference={{$item->transaction_reference}}','rid_{{$key}}','rloading_{{$key}}')">
                                        requery
                                    </span>
                                    <span style='display:none' id="rloading_{{$key}}">please wait...</span>
                                </td>

                                <td>{{$item->paid_at}}</td>
                                <td><a href="{{route('printAgencyRemittance',$item->id)}}" class='btn btn-primary btn-sm'>View</a></td>
                            </tr>


                            @empty

                            @endforelse

                        </tbody>
                        <tfoot>
                            <tr>
                                {{-- <td></td> --}}
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </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/form-picker.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/_assets/general_js.js') }}"></script>
    {{-- <script src="{{ asset('js/reconcilation.js') }}"></script> --}}
    {{-- <script src="{{ asset('js/custom.js') }}"></script> --}}
    {{-- <script src="{{ asset('js/invoices.js') }}"></script> --}}
    <script>
        document.body.classList.add("sidebar-mini");
        var resultData = []
        $('#overlay').hide()
        $('.resetFilters').hide();
        //
        $(document).ready(function() {
            initDataTable('datatableu')
        })
        //
        function formatNumber(num) {
            return new Intl.NumberFormat().format(Number(num));
        }
        //
        function initDataTable(id) {
            let Table = $(`.${id}`).DataTable({
                "ordering": true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    footer: true,
                    exportOptions: {
                        columns: [0, 1, 2, 3, 5]
                    }
                }],
                processing: true,
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api();
                    // Remove the formatting to get integer data for summation
                    var intVal = function(i) {
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    };

                    // Total over all pages
                    total = api
                        .column(2)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                    // Total over this page
                    // Update footer
                    // $(api.column(4).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
                    $(api.column(2).footer()).html('₦' + formatNumber(total));
                    // $(api.column(5).footer()).html('₦' + formatNumber(actualtotal));
                },
            });
        }
        //

        // function create
        // const requery = async (url,id,spinnerId) => {
        //          $(`#${spinnerId}`).show()
        //          $(`#${id}`).hide()
        //          const res = await getRequest(url)
        //          console.log(res)
        //          if(res==='success'){
        //             $(`#${spinnerId}`).html('successful')
        //          }else{
        //             $(`#${spinnerId}`).html(`${res}`)
        //             $(`#${id}`).show()
        //          }
        //     }
    </script>

    @endpush
    @endsection