@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">
    	<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>{{__('Agency Transaction Dashboard') }} </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 class="row">
                <!-- page statustic chart start -->
                <div class="col-xl-4 col-md-6">
                    <div class="card card-red text-white">
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h6 class="">{{ __(' Active')}}</h6>
                                    <h5 class="mb-2" id='unpaidInvTotal'>{{ $activeUser}} </h5>

                                    <h6 class="">Inactive </h6>
                                    <h5 id="unpaidInvAmount">{{$inactiveUser}} </h5>
                                </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 col-md-6">
                    <div class="card card-blue text-white">
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <h6 class="">Commision Amount</h6>
                                    <h5 class="mb-2" id="recorded_receipt">
                                        ₦{{ number_format($paidInv[0]->total_commision_amount,2)}}</h5>
                                    
                                    <h6>Transactions</h6>
                                    <h5>{{$paidInv[0]->num_of_paid_tran}}</h5>
                                </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>Paid</h5>
                                    <h6 class="mb-2" id="userCount">₦{{ number_format($paidInv[0]->amount,2)}}</h6>
                                    <h6>Unpaid</h6>
                                    <h5 class="mb-0" id="userCount">₦{{ number_format($unPaidInv[0]->amount,)}}</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>
    </div>
    
    <!-- push external js -->
        <div class="col-md-12">
            <div class="row"> 
                <!-- mda_performace -->
                <div class="col-12">
                    <div class="card p-5">
                    <div class="chart">
                        <canvas id="barChart1" style="height:400px; width:100%;"></canvas>
                    </div> 
                    </div>
                </div>
                {{-- monthly performac --}}
                <div class="col-12">
                    <div class="card p-5">
                    <div class="chart">
                        <canvas id="monthlyPerformance" style="height:400px; width:100%;"></canvas>
                    </div> 
                    </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/currency.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    {{-- <script src="{{ asset('js/reconcilation.js') }}"></script> --}}
    <script src="{{ asset('js/custom.js') }}"></script>
    <script src="{{ asset('js/agency_dashboard.js') }}"></script>
    <script>
        var resultData = []
        $(document).ready(function() {
           $('#overlay').hide()
        //    console.log(``)
           var  monthly_performance
           var agent_performance
           monthly_performance = null;
           agent_performance =   null;
           oldCahartInit(monthly_performance.labels,monthly_performance.data,agent_performance.labels,agent_performance.data);
        })
</script>
     
    @endpush
@endsection