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

    @endpush
      <div id="overlay">
        <div class="spinner"></div>
    </div>


    <div class="container-fluid  mt-5">
    	<x-breadcrumb  :desc="$desc" :pageTitle="$pageTitle"   :iconName="$iconName" />
        {{-- summary --}}
        <div class="row">
            {{--  --}}
            {{-- <div class="col-xl-4 col-md-6">
                <div class="card card-blue text-white">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <div class="my-2">
                                <h4 class="mb-0" id="recorded_receipt">
                                    ₦ 0 </h4>
                                <p>Commision Amount</p>
                                </div>
                                <p>( Transactions) </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
            {{--  --}}
            <div class="col-xl-4 col-md-6">
                <div class="card card-green text-white">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h5 class="mb-0" id="totalAmt">₦ 0</h5>
                                <h5 class="mb-0" id="totalInv">₦ 0<sub>Total. no of Transaction</sub></h5>
                            </div>
                        <div class="col-4 text-right py-5">
                                <i class="fas fa-cube f-30"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end of top card summary --}}
        </div>




        {{--  --}}
       <h6>Filter Results:  <small>{{$fromDate}} - {{$toDate}}</small> </h6>

       <form action="{{route('agency.transactions')}}" 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 datepickers d-flex" id="datetimepicker" data-target-input="nearest">
                        <input type="date" value="{{$fromDate}}" class="form-control datetimepicker-input"
                            name="fromDate"  autocomplete="off">
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                    <div class="form-group datepickers d-flex" id="datetimepicker2" data-target-input="nearest">
                        <input type="date"  class="form-control datetimepicker-input" value="{{$toDate}}" name="toDate" autocomplete="off">
                    </div>
                </div>
                {{--  --}}
                 <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-2 col-md-2 col-sm-6 col-xs-12 form-group">
                       <select name="channel" class="form-control">
                           <option value="all" {{$channel=='all'?'selected':''}}>All</option>
                           <option value="card"  {{$channel=='card'?'selected':''}}>Card</option>
                           <option value="bank"  {{$channel=='bank'?'selected':''}}>Bank</option>
                           <option value="wallet"  {{$channel=='wallet'?'selected':''}}>Wallet</option>
                       </select>
                  </div>

                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                       <select name="agents" class="form-control">
                           <option value="all">All </option>
                           @foreach ($agents as $item)
                            <option value="{{$item->mobile}}" {{$slc_agent== $item->mobile ? 'selected' : ''}}>{{$item->name}}</option>
                           @endforeach
                       </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">
                    <table id="mda_table" 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>{{ __('Commision Amount')}}</th>
                                <th>{{ __('Agent Name')}}</th>
                                <th>{{ __('Payment Status')}}</th>
                                <th>{{ __('Payment Date')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($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_name}}</td>
                                <td>{{$item->amount}}</td>
                                <td>{{$item->commision_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>"
                                 !!}

                                </td>
                                <td>{{$item->paid_at}}</td>
                            </tr>


                            @empty

                            @endforelse

                        </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/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/reconcilation.js') }}"></script> --}}
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        var resultData = []
        $('#overlay').hide()
        $('.resetFilters').hide();
        //
        $(document).ready(function() {
            initDataTable('datatableu')
            initializeSelect2();
            initializeDatepicker();
        })
        //
        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,4,5,6,7,8,9]
                    }
                }],
                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(5)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                    total_commision = api
                        .column(6)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                        // Total over this page
                        pageTotal = api
                            .column(0)
                            .data()
                            .reduce(function (a=0, b) {
                                return intVal(a) + intVal(1);
                            }, 0);

                        // Update footer
                    // $(api.column(4).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
                    $('#totalAmt').html(`${formatNumber(total)}<sub>Invoices</sub> `);
                    // $('#totalCommision').html(`${formatNumber(total_commision)}<sub>Commission</sub> `);
                    $('#totalInv').html(`${formatNumber(pageTotal)} <sub>Total no of Transactions</sub>`);
                },
            });
        }
    //

    // function create


    //


</script>

    @endpush
@endsection