@php
    ['requestYear' => $requestYear, 'requestMonthName' => $requestMonthName, 'shortNote' => $shortNote, 'presentDay' => $presentDay, 'firstDayOfTheYear' => $firstDayOfTheYear,
    'lastDayOfTheYear' => $lastDayOfTheYear, 'firstDayOfTheMonth' => $firstDayOfTheMonth, 'lastDayOfTheMonth' => $lastDayOfTheMonth]
    = monthYearFilterForDashboard($monthsInYear, $yearsToConsider);
@endphp

@extends('layouts.main', [
    'pageTitle' => 'Department Dashboard : '. $authUser->department->display_name,
    'pageShortNote' => $shortNote
])

@section('more-styles')
    <link rel="stylesheet" href="{{ assetWithVersion('css/pages/dashboard.css') }}">
    <script src="{{ asset('vendors/highchart/highcharts.js') }}"></script>
    <script src="{{ asset('vendors/highchart/modules/exporting.js') }}"></script>
    <script src="{{ asset('vendors/highchart/modules/export-data.js') }}"></script>
    <script src="{{ asset('vendors/highchart/modules/accessibility.js') }}"></script>
@endsection

@section('main-content')
    <div class="nk-content-inner">
        <section id="general-statistics-wrapper">

            @include('components.dashboard.dashboard-aggregate-cards')

            <section id="reports-filter-results" class="">
                <div class="card col-md-12 p-2 light-box-shadow">
                    <div class="card-header page-title-row">
                        <h5 class="nk-block-title">Payments Breakdown by Departments</h5>
                    </div>
                    @include('components.dashboard.dashboard-charts')
                </div>
            </section>
        </section>
    </div>

@endsection

@section('more-scripts')
    <script>
        $(document).ready( function () {
            const currentYear = "{{ $requestYear }}";
            const selectedYear = $('#yearSelection').val();
            const selectedMonth = $('#monthSelection').val();

            $('#filterRevenueMonthAndYear').click(function ({target}) {
                let mth = $('#monthSelection').val();
                let yr = $('#yearSelection').val();
                let acctPrd = $('#accountPeriodSelection').val();
                location.href = `{{ Request::url() }}?revenue_year=${yr}&revenue_month=${mth}&account_period=${acctPrd}`;
            });

            $.get(`dashboard/revenue-statistics?revenue_year=${selectedYear}&revenue_month=${selectedMonth}`, function(res){
                let revenueStatistics = res.data;
                $('.lds-ellipsis').hide();

                $('#revenue-today').text(BaseHelper.number_format(revenueStatistics.today.revenueGenerated));
                $('#revenue-today-count').text(
                    BaseHelper.number_format(revenueStatistics.today.transactionsCount, 0)
                );

                $('#raised-assessment-today').text(BaseHelper.number_format(revenueStatistics.today.raisedAssessments));
                $('#raised-assessment-today-count').text(
                    BaseHelper.number_format(revenueStatistics.today.raisedAssessmentsCount, 0)
                );

                $('#revenue-recieved').text(BaseHelper.number_format(revenueStatistics.revenue_month.revenueGenerated));
                $('#revenue-recieved-count').text(
                    BaseHelper.number_format(revenueStatistics.revenue_month.transactionsCount, 0)
                );

                $('#raised-assessment').text(BaseHelper.number_format(revenueStatistics.revenue_month.raisedAssessments));
                $('#raised-assessment-count').text(
                    BaseHelper.number_format(revenueStatistics.revenue_month.raisedAssessmentsCount, 0)
                );

                $('#total-revenue-recieved').text(BaseHelper.number_format(revenueStatistics.revenue_year.revenueGenerated));
                $('#total-revenue-recieved-count').text(
                    BaseHelper.number_format(revenueStatistics.revenue_year.transactionsCount, 0)
                );

                $('#total-assessment-raised').text(BaseHelper.number_format(revenueStatistics.revenue_year.raisedAssessments));
                $('#total-assessment-raised-count').text(
                    BaseHelper.number_format(revenueStatistics.revenue_year.raisedAssessmentsCount, 0)
                );

                $('#card-initial-loader').hide();
                $('#card-with-stat').removeClass('d-none');
            });

            $.get(`dashboard/pie-chart-data?revenue_year=${selectedYear}&revenue_month=${selectedMonth}`, function(res){
                const pieChartData = res.data;
                Highcharts.chart('pieChartData', {
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Revenue Breakdown by Services'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>₦{point.y:,.2f}</b>'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%',
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            showInLegend: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: `<a href="{{ route('payment.list_all') }}?ministry={point.ministry_id}&department={point.department_id}&service={point.service_id}&revenue_year=${selectedYear}&deep_link=1"><b>{point.name}</b>: {point.percentage:.1f} %</a>`
                            }
                        }
                    },
                    colors: ['#ffe66d', '#00943c', '#e84783', '#2b55a7', '#50B432', '#24CBE5', '#FF9655', '#FFF263', '#6AF9C4'],
                    series: [{
                        name: 'Revenue',
                        colorByPoint: true,
                        data: pieChartData.map(item => {
                            return {
                                service_id: item.service_id,
                                department_id: item.department_id,
                                ministry_id: item.ministry_id,
                                name: item.service_name,
                                y: Number(item.revenueGenerated)
                            }
                        })
                    }]
                });

                Highcharts.chart('expectedRevChart', {
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Expected Revenue Breakdown by Services'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>₦{point.y:,.2f}</b>'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%',
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            showInLegend: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: `<a href="{{ route('payment.list_all') }}?ministry={point.ministry_id}&department={point.department_id}&service={point.service_id}&revenue_year=${selectedYear}&deep_link=1"><b>{point.name}</b>: {point.percentage:.1f} %</a>`
                            }
                        }
                    },
                    colors: ['#ffe66d', '#00943c', '#e84783', '#2b55a7', '#50B432', '#24CBE5', '#FF9655', '#FFF263', '#6AF9C4'],
                    series: [{
                        name: 'Revenue',
                        colorByPoint: true,
                        data: pieChartData.map(item => {
                            return {
                                service_id: item.service_id,
                                department_id: item.department_id,
                                ministry_id: item.ministry_id,
                                name: item.service_name,
                                y: Number(item.expectedRevenue)
                            }
                        })
                    }]
                });

                $('.pick-date').datepicker({
                    dateFormat: 'yy-mm-dd',
                    maxDate: '0d'
                });
            });

            $.get(`dashboard/area-chart-data?revenue_year=${selectedYear}&revenue_month=${selectedMonth}`, function(res){
                const areaChartData = res.data;
                const monthsInYear = areaChartData.monthsInYear.map(x => x.name);

                Highcharts.chart('areaChartSection', {
                    chart: {
                        type: 'area'
                    },
                    title: {
                        text: 'Expected Revenue versus Received Revenue'
                    },
                    colors: ['#ffe66d', '#00943c'],
                    xAxis: {
                        title: {
                            text: 'Months'
                        },
                        allowDecimals: false,
                        labels: {
                            formatter: function () {
                                return monthsInYear[this.value - 1];
                            }
                        },
                        accessibility: {
                            rangeDescription: 'Range: Jan to DEC.'
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Revenue'
                        },
                        labels: {
                            formatter: function () {
                                return `₦${BaseHelper.number_format(this.value)}`;
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>₦{point.y:,.2f}</b>'
                    },
                    plotOptions: {
                        area: {
                            pointStart: 1,
                            marker: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 2,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'Expected Revenue',
                        data: areaChartData.expected.map(x => {
                            return {
                                name: x.name,
                                y: Number(x.amount)
                            }
                        })
                    }, {
                        name: 'Received Revenue',
                        data: areaChartData.generated.map(x => {
                            return {
                                name: x.name,
                                y: Number(x.amount)
                            }
                        })
                    }]
                });
            });

            $.get(`dashboard/payment-providers-chart-data?revenue_year=${selectedYear}&revenue_month=${selectedMonth}`, function(res){
                const paymentProvidersChartData = res.data;

                Highcharts.chart('paymentProvidersChart', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Revenue Breakdown by Payment Providers'
                    },
                    tooltip: {
                        pointFormat: '<b>₦{point.y:,.2f}</b>'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%',
                        }
                    },
                    xAxis: {
                        title: {
                            text: 'Payment Providers'
                        },
                        categories: paymentProvidersChartData.map(item => {
                            return item.name.replace('_', ' ').toUpperCase();
                        })
                    },
                    yAxis: {
                        title: {
                            text: 'Revenue',
                        },
                        labels: {
                            formatter: function () {
                                return `₦${BaseHelper.number_format(this.value)}`;
                            }
                        }
                    },
                    plotOptions: {
                        column: {
                            allowPointSelect: true,
                            showInLegend: false,
                            cursor: 'pointer'
                        }
                    },
                    colors: ['#ffe66d', '#00943c', '#e84783', '#2b55a7', '#50B432', '#24CBE5', '#FF9655', '#FFF263', '#6AF9C4'],
                    series: [{
                        colorByPoint: true,
                        data: paymentProvidersChartData.map(item => {
                            return {
                                payment_provider_id: item.id,
                                name: item.name.toUpperCase(),
                                y: Number(item.revenue)
                            };
                        })
                    }]
                });
            });

            $.get(`dashboard/payment-channels-chart-data?revenue_year=${selectedYear}&revenue_month=${selectedMonth}`, function(res){
                const paymentChannelsChartData = res.data;

                Highcharts.chart('paymentChannelsChart', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Revenue Breakdown by Payment Channels'
                    },
                    tooltip: {
                        pointFormat: '<b>₦{point.y:,.2f}</b>'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%',
                        }
                    },
                    xAxis: {
                        title: {
                            text: 'Payment Channels'
                        },
                        categories: paymentChannelsChartData.map(item => {
                            return item.name.replace('_', ' ').toUpperCase();
                        })
                    },
                    yAxis: {
                        title: {
                            text: 'Revenue',
                        },
                        showInLegend:false,
                        labels: {
                            formatter: function () {
                                return `₦${BaseHelper.number_format(this.value)}`;
                            }
                        }
                    },
                    plotOptions: {
                        column: {
                            allowPointSelect: true,
                            showInLegend: false,
                            cursor: 'pointer'
                        }
                    },
                    colors: ['#ffe66d', '#00943c', '#e84783', '#2b55a7', '#50B432', '#24CBE5', '#FF9655', '#FFF263', '#6AF9C4'],
                    series: [{
                        colorByPoint: true,
                        data: paymentChannelsChartData.map(item => {
                            return {
                                payment_channel_id: item.id,
                                name: item.name.toUpperCase(),
                                y: Number(item.revenue)
                            }
                        })
                    }]
                });
            });

        })
    </script>
@endsection