@extends(getTemplate('admin'))
@section('content')
    @push('custom-css')
    @endpush
    @php
        $years = range(2020, date('Y',time()));
        $current_year = $_GET['year'] ?? date('Y');
    @endphp
    <div class="gadmin-pagesidebar-width-1 gadmin-mhide">
        <div class="panel panel-default gadmin-pagesidebar-width-1-panel url">
            <!-- begin panel-heading -->
            <div class="panel-heading gadmin-pagesidebar-width-1-heading">
                <h4 class="panel-title">{{__('admin.payments_customerspayments')}}</h4>
            </div>
            <!-- end panel-heading -->
            <div class="gadmin-pagesidebar-body">
                <div class="gadmin-pagesidebar-main">
                    <ul class="nav gadmin-pagesidebar-ul">
                        <li><a href="{{url('admin/payments/sales')}}" class="">{{__('admin.payments_allpaymentorders')}}</a></li>
                        <li><a class=" active">{{__('admin.payments_allorderstats')}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="gadmin-pagesidebar-width-2">
        <!-- begin panel -->
        <div class="panel panel-default url" data-sortable-id="ui-widget-6">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {{$title}}
                    <select class="form-control m-t-10" onchange="window.location='{{url("admin/payments/stats?year=")}}' + this.value" name="year" style="width:60px;height:auto;padding:0;">
                        @foreach($years as $year)
                            <option value="{{$year}}" @if($current_year == $year) selected @endif>{{$year}}</option>
                        @endforeach
                    </select>
                </h4>
            </div>
            <div id="info-alert" class="alert" style="display:none">
                <span class="close"  onclick="$('#info-alert').fadeOut()">×</span>
                <div class="alert-container"></div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <!-- begin col-6 -->
                    <div class="col-lg-6">
                        <!-- begin panel -->
                        <div class="panel panel-inverse"  data-sortable-id="chart-js-1">
                            <div class="panel-body">
                                <h4 class="text-center">Total Subscriptions Active & Expired</h4>
                                <div>
                                    <div id="sub-loader" class="text-center" style="margin-top:60px"><p><i class="fas fa-spinner fa-spin" style="font-size:40px"></i></p><br/><h3 class="text-center">Loading..</h3></div>
                                    <canvas id="line-chart" data-render="chart-js"></canvas>
                                </div>
                            </div>
                        </div>
                        <!-- end panel -->
                    </div>
                    <!-- end col-6 -->
                    <div class="col-lg-6">
                        <!-- begin panel -->
                        <div class="panel panel-inverse" data-sortable-id="chart-js-2">
                            <div class="panel-body">
                                <h4 class="text-center">Orders/Invoices</h4>
                                <div>
                                    <div id="order-loader" class="text-center" style="margin-top:60px"><p><i class="fas fa-spinner fa-spin" style="font-size:40px"></i></p><br/><h3 class="text-center">Loading..</h3></div>
                                    <canvas id="bar-chart" data-render="chart-js"></canvas>
                                </div>
                            </div>
                        </div>
                        <!-- end panel -->
                    </div>
                    <!-- end col-6 -->
                </div>
            </div>
        </div>
    </div>
    <!-- end panel -->
    @push('custom-js')
        <script src="{{asset('assets/core/plugins/chart-js/Chart.min.js')}}" defer asunc></script>
        <script defer async>
            $(document).ready(function(){

                Chart.defaults.global.defaultFontColor = COLOR_BLACK;
                Chart.defaults.global.defaultFontFamily = FONT_FAMILY;
                Chart.defaults.global.defaultFontStyle = FONT_WEIGHT;

                $.post(site_root + 'admin/ajax/payments/get_subscription_stats',{year: {{$current_year}} }).done(function(data){

                    $('#sub-loader').fadeOut(function() {

                        var lineChartData = {
                            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            datasets: [{
                                label: 'Active',
                                borderColor: COLOR_BLUE,
                                pointBackgroundColor: COLOR_BLUE,
                                pointRadius: 2,
                                borderWidth: 2,
                                backgroundColor: COLOR_BLUE_TRANSPARENT_3,
                                data: data.active,
                            }, {
                                label: 'Expired',
                                borderColor: COLOR_BLACK,
                                pointBackgroundColor: COLOR_BLACK,
                                pointRadius: 2,
                                borderWidth: 2,
                                backgroundColor: COLOR_BLACK_TRANSPARENT_3,
                                data: data.inactive
                            }]
                        };
                        var ctx = document.getElementById('line-chart').getContext('2d');
                        var lineChart = new Chart(ctx, {
                            type: 'line',
                            data: lineChartData
                        });
                    });
                });

                $.post(site_root + 'admin/ajax/payments/get_order_stats',{year: {{$current_year}} }).done(function(data1) {

                    $('#order-loader').fadeOut(function(){

                        var barChartData = {
                            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug','Sep','Oct','Nov','Dec'],
                            datasets: [{
                                label: 'Paid',
                                borderWidth: 2,
                                borderColor: COLOR_PURPLE,
                                backgroundColor: COLOR_PURPLE_TRANSPARENT_3,
                                data: data1.paid
                            }, {
                                label: 'Outstanding',
                                borderWidth: 2,
                                borderColor: COLOR_BLACK,
                                backgroundColor: COLOR_BLACK_TRANSPARENT_3,
                                data: data1.outstanding
                            }]
                        };

                        var ctx2 = document.getElementById('bar-chart').getContext('2d');
                        var barChart = new Chart(ctx2, {
                            type: 'bar',
                            data: barChartData
                        });
                    });
                });

            });
        </script>
    @endpush
@endsection