@extends('layouts.app')

@section('title')
    Dashboard
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <x-page-bar title="Dashboard" />
            <!-- start widget -->
            @hasanyrole('admin|admissions|finance')
                <div class="state-overview">
                    <div class="row">
                        <div class="col-xl-3 col-md-6 col-12">
                            <div class="info-box bg-b-green">
                                <span class="info-box-icon push-bottom"><i class="material-icons">group</i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Programs</span>
                                    <span class="info-box-number">{{ $num_programs }}</span>
                                    {{-- <div class="progress">
                                <div class="progress-bar" style="width: 45%"></div>
                            </div> --}}
                                    {{-- <span class="progress-description">
                                45% Increase in 28 Days
                            </span> --}}
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                        <div class="col-xl-3 col-md-6 col-12">
                            <div class="info-box bg-b-yellow">
                                <span class="info-box-icon push-bottom"><i class="material-icons">person</i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Registered Students</span>
                                    <span class="info-box-number">{{ $num_registered_students }}</span>

                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                        <div class="col-xl-3 col-md-6 col-12">
                            <div class="info-box bg-b-blue">
                                <span class="info-box-icon push-bottom"><i class="material-icons">school</i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Course</span>
                                    <span class="info-box-number">{{ $num_courses }}</span>

                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                        <div class="col-xl-3 col-md-6 col-12">
                            <div class="info-box bg-b-pink">
                                <span class="info-box-icon push-bottom"><i class="material-icons">monetization_on</i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Fees Collected</span>
                                    <span class="info-box-number">ZMW{{ number_format($fees_collected) }}</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                    </div>
                </div>

                <!-- chart start -->
                <div class="row clearfix">
                    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 col-9">
                        <div class="card">
                            <div class="card-head">
                                <header>Bar Chart</header>
                                <div class="tools">
                                    <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="recent-report__chart">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endhasanyrole


            <!-- end new student list -->

        </div>
    </div>
@endsection
@push('custom-js')
    <script>
        let reg_students_per_year = {!! json_encode($reg_students_per_year) !!}
        let students_per_year = [];
        let years = [];
        let num_students_applied_per_year = {!! json_encode($num_students_applied_per_year) !!}
        let applicants_per_year = [];
        reg_students_per_year.forEach(std_per_year => {
            years.push(std_per_year.year)
            students_per_year.push(std_per_year.total_reg_students)
        })
        num_students_applied_per_year.forEach(appl_per_year => {
            years.push(appl_per_year.year)
            applicants_per_year.push(appl_per_year.total_applied_students)
        })
        console.log(students_per_year, applicants_per_year, years);
        years.push(2025);

        function chart1() {
            var options = {
                chart: {
                    height: 350,
                    type: "bar",
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        endingShape: "rounded",
                        columnWidth: "55%",
                    },
                },
                dataLabels: {
                    enabled: false,
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ["transparent"],
                },
                series: [{
                        name: "Registered Students",
                        data: students_per_year,
                    },
                    {
                        name: "Student Applications",
                        data: applicants_per_year,
                    },

                ],
                xaxis: {
                    categories: [
                        years[0],
                    ],
                    labels: {
                        style: {
                            colors: "#9aa0ac",
                        },
                    },
                },
                yaxis: {
                    title: {
                        text: "No of Students",
                    },
                    labels: {
                        style: {
                            color: "#9aa0ac",
                        },
                    },
                },
                fill: {
                    opacity: 1,
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + "Student(s)";
                        },
                    },
                },
            };

            var chart = new ApexCharts(document.querySelector("#chart1"), options);

            chart.render();
        }
    </script>
@endpush