@extends('layouts.main')
@section('title', 'Dashboard')
@section('content')
<!-- push external head elements to head -->
@push('head')
<link rel="stylesheet" href="{{ asset('plugins/weather-icons/css/weather-icons.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/owl.carousel/dist/assets/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/owl.carousel/dist/assets/owl.theme.default.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/chartist/dist/chartist.min.css') }}">
<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">
    <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName" />
    {{--card summary  col-xl-12 col-lg-12 col-md-12 col-sm-12  --}}
    <div class="row">
        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
            <div class="card card-red text-white py-4">
                <div class="card-block">
                    <div class="row align-items-center">
                        <div class="col-xl-8">
                            <small class="mb-0">{{ __('Unpaid Invoices')}}</small>
                            <h5 class="mb-0" id='unpaidInvTotal'>{{ __('0')}} </h5>
                            <small class="mb-0">Unpaid Amount</small>
                            <h5 id="unpaidInvAmount"> 0 </h5>
                        </div>
                        <div class="col-xl-4 text-right">
                            <i class="fas fa-cube f-30"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --}}
        <div class="col-xl-6 col-lg-3 col-md-3 col-sm-12">
            <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">
                                <small>Recorded Receipts</small>
                                <h5 class="mb-0" id="recorded_receipt">{{ __('0')}}</h5>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-4">
                                    <div class="mb-0">
                                        <small> Recorded Amt</small>
                                        <h5 id="recorded_amt">0</h5>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4">
                                    <div class="mb-0">
                                        <small>{{ __('Sub TSA ')}}</small>
                                        <h5 id="igrAcct">0</h5>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4">
                                    <div class="mb-0">
                                        <small>{{ __('Temp IGR acct')}}</small>
                                        <h5 id="tsaTotal">0 </h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- --}}
        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
            <div class="card card-green text-white py-5">
                <div class="card-block ">
                    <div class="row align-items-center ">
                        <div class="col-8">
                            <small class="mb-0">{{ __('Users')}}</samll>
                                <h5 class="mb-0" id="userCount">{{ __('0')}}</h5>
                        </div>
                        <div class="col-4 text-right">
                            <i class="fas fa-cube f-30"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- end of top card summary --}}
    </div>
    {{-- end of card summary --}}
    {{-- filter --}}
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card table-card">
                <div class="card-header">
                    <h3>{{ __('Select Metrics to Show')}}</h3>
                    <div class="card-header-right"></div>
                </div>
                <div class="card-block p-b-0 px-3">
                    <div class="row">
                        @if (auth()->user()->mda_id==0)
                        <div class="col-md-3 my-2">
                            <label for="">mdas</label>
                            <select class="form-control select2 " id="mda">
                                <option value="0"> Select MDA</option>
                                @foreach ($mdas as $mda)
                                <option value="{{$mda['id']}}">{{$mda['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                        @else
                        <input type="hidden" value="{{auth()->user()->mda_id}}" id="mda" />
                        @endif

                        <div class="col-md-3 my-2">
                            <label for="">from date</label>
                            <input class="form-control" type="text" id="fromDate" placeholder="dd-mm-yy" />
                        </div>

                        <div class="col-md-3 my-2">
                            <label for="">to date</label>
                            <input class="form-control" type="text" id="toDate" placeholder="dd-mm-yy" />
                        </div>

                        <div class="col-md-2 my-2">
                            <label>.</label>
                            <button class="form-control btn btn-outline-primary" type="submit" onclick="getDashboardOverview()" style="background: blue; color:white;">
                                Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- --}}
    <!-- MDA (Bar Chart) start-->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card sale-card">
                <div class="card-header">
                    <h3 class="mda_total_heading"></h3>
                </div>
                <div class="card-block text-center">
                    <div class="chart">
                        <canvas id="barChart1" style="height:400px"></canvas>
                        <div id="bar1legend"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- MDA (Bar Chart) card end -->
    {{-- --}}
    <!-- sale 2 card start -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card sale-card">
                <div class="card-header">
                    <h3>{{ __('6 Months Trends and Settlement Summary')}}</h3>
                </div>
                <div class="card-block text-center">
                    <div class="chart">
                        <canvas id="monthlyPerformance" style="height:250px"></canvas>
                        {{-- <div id="bar1legend"></div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- sale 2 card end -->
    {{-- mda / service table --}}
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="py-4 pl-2">
                    <h5 class=" mda_total_heading "> </h5>
                    <h6 id="sub_mda_total_heading"></h6>
                </div>
                <div class="">
                    <div class="">
                        <div id="firstTableDiv"> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- </div> --}}
<!-- push external js -->
@push('script')
<script src="{{ asset('plugins/owl.carousel/dist/owl.carousel.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="{{ asset('js/currency.min.js') }}"></script>
<script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
<script src="{{asset('js/dashboard.js')}}"></script>
{{-- <script src="{{asset('js/_assets/general_js.js?tx=')}}{{ strtotime('now') }}"></script> --}}
<script src="{{ asset('js/_assets/general_js.js?tx=')}}{{strtotime("now")}}"> </script>
{{-- --}}
<script>
    $('.select2').select2();
    // hide sidbar on document readey
    document.body.classList.add("sidebar-mini");
    // ::::::::::::::::::::::::::::::::::::::::::
    const url = `{{env('APP_URL')}}`
    let settlementUrl;
    let tokens;
    let accounts = ['1751087187', '1790299329'];
    //
    let name = `