@extends('backend.layouts.app')
@section('content')
@if(env('MAIL_USERNAME') == null && env('MAIL_PASSWORD') == null)
    <div class="">
        <div class="alert alert-danger d-flex align-items-center">
            {{translate('Please Configure SMTP Setting to work all email sending functionality')}},
            <a class="alert-link ml-2" href="{{ route('website.smtp') }}">{{ translate('Configure Now') }}</a>
        </div>
    </div>
@endif
<div class="row">
            <div class="col">
                <div class="h-100">
                    <div class="row mb-3 pb-1">
                        <div class="col-12">
                            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                <div class="flex-grow-1">
                                    <h4 class="fs-16 mb-1">Good Morning, {{auth()->user()->name}}</h4>
                                    <p class="text-muted mb-0">Here's what's happening with your store
                                        today.</p>
                                </div>
                                <div class="mt-3 mt-lg-0">
                                    <form action="javascript:void(0);">
                                        <div class="row g-3 mb-0 align-items-center">
                                            <div class="col-sm-auto">
                                                <div class="input-group">
                                                    <input type="text" class="form-control border-0 fs-13 dash-filter-picker shadow" data-provider="flatpickr" data-range-date="true" data-date-format="d M, Y" data-deafult-date="01 Jan 2022">
                                                    <div class="input-group-text bg-secondary border-secondary text-white">
                                                        <i class="ri-calendar-2-line"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                        <!--end row-->
                                    </form>
                                </div>
                            </div><!-- end card header -->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->

                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                {{translate('Total Students')}}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="{{$total_student}}">{{$total_student}}</span></h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-success rounded fs-3">
                                                <i class="bx bx-user-circle text-primary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                {{translate('Total Techers')}}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="{{$total_teacher}}">{{$total_teacher}}</span></h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-success rounded fs-3">
                                                <i class="bx bx-user-circle text-warning"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                {{translate('Total Sections')}}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="{{$total_sections->count()}}">{{$total_sections->count()}}</span></h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-success rounded fs-3">
                                                <i class="bx bx-intersect text-secondary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                {{translate('Total Grade')}}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="{{$total_grades->count()}}">{{$total_grades->count()}}</span></h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-soft-success rounded fs-3">
                                                <i class="bx bxs-school text-success"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->
                    </div> <!-- end row-->

                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header border-0 align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Teacher and Students By School</h4>
                                </div><!-- end card header -->

                                <div class="card-body p-0 pb-2">
                                    <div class="w-100">
                                        <div id="section_by_student" class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->
                    </div>
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card card-height-100">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Student By Grade</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="student_by_grade" class="apex-charts" dir="ltr"></div>
                                </div>
                            </div> <!-- .card-->
                        </div> <!-- .col-->

                        <div class="col-xl-6">
                            <div class="card card-height-100">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Student By Subjects</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="student_by_subject" class="apex-charts" dir="ltr"></div>
                                </div>
                            </div> <!-- .card-->
                        </div> <!-- .col-->
                    </div> <!-- end row-->
                </div> <!-- end .h-100-->
            </div> <!-- end col -->
        </div>
@endsection
@section('script')
    <!-- apexcharts -->
    <script src="{{asset('assets/backend/libs/apexcharts/apexcharts.min.js')}}"></script>
    <script src="{{asset('assets/backend/libs/swiper/swiper-bundle.min.js')}}"></script>
    <script src="{{asset('assets/backend/js/pages/dashboard-ecommerce.init.js')}}"></script>


    <script>

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Function to generate an array of random colors
        function getRandomColors(count) {
            let colors = [];
            for (let i = 0; i < count; i++) {
                colors.push(getRandomColor());
            }
            return colors;
        }


        var section_by_st_colour =  getRandomColors("{{count($subject_by_st)}}");
        var options = {
          series: [{
            name: 'Student Count',
            data: [
                @if($total_sections->isNotEmpty()) 
                    @foreach ($total_sections as $sec)
                        parseInt('{{ $sec->students->where('school_id', \Auth::user()->id)->count() }}'),
                    @endforeach
                @endif
                ]
            }],
            chart: {
                height: 350,
                type: 'bar',
            },
            colors: section_by_st_colour,
                plotOptions: {
                bar: {
                    columnWidth: '45%',
                    distributed: true,
                }
            },
            dataLabels: {
                enabled: true, // Enable data labels
                formatter: function(val) {
                    return val.toFixed(0); // Format the data label
                },
                style: {
                    fontSize: '12px',
                    colors: ['#fff'] // Set color for the data labels
                }
            },
            legend: {
                show: false
            },
            xaxis: {
            categories: [
                @if(!empty($total_sections))
                    @foreach ($total_sections as $sec)
                        '{{ $sec->name }}',
                    @endforeach
                @endif
                ],
            },
            tooltip: {
                y: [
                    {
                        formatter: function (y) {
                            if (typeof y !== "undefined") {
                                return y.toFixed(0);
                            }
                            return y;
                        },
                    },
                    
                ],
            },
        };
        var chart = new ApexCharts(document.querySelector("#section_by_student"), options);
        chart.render();

        var sunject_by_st_colour = getRandomColors("{{count($subject_by_st)}}");
        var options = {
          series: [{
            name: 'Student Count',
            data: [
                    @if(!empty($subject_by_st))
                        @foreach ($subject_by_st as $st)
                            parseInt('{{ $st['count'] }}'),
                        @endforeach
                    @endif
                ]
            }],
            chart: {
                height: 350,
                type: 'bar',
            },
            colors: sunject_by_st_colour,
                plotOptions: {
                bar: {
                    columnWidth: '45%',
                    distributed: true,
                }
            },
            dataLabels: {
                enabled: true, // Enable data labels
                formatter: function(val) {
                    return val.toFixed(0); // Format the data label
                },
                style: {
                    fontSize: '12px',
                    colors: ['#fff'] // Set color for the data labels
                }
            },
            legend: {
                show: false
            },
            xaxis: {
                categories: [
                    @if(!empty($subject_by_st))
                        @foreach ($subject_by_st as $st)
                            '{{ $st['name'] }}',
                        @endforeach
                    @endif
                ],
            },
            tooltip: {
                y: [
                    {
                        formatter: function (y) {
                            if (typeof y !== "undefined") {
                                return y.toFixed(0);
                            }
                            return y;
                        },
                    },
                    
                ],
            },
        };
        var chart = new ApexCharts(document.querySelector("#student_by_subject"), options);
        chart.render();

    // Donought chart
    var grade_by_st_colour = getRandomColors("{{$total_grades->count()}}");
    var options = {
            series: [
                @if($total_grades->isNotEmpty())
                    @foreach ($total_grades as $grade)
                        parseInt('{{ $grade->students->where('school_id', \Auth::user()->id)->count() }}'),
                    @endforeach
                @endif
            ],
            labels: [
                @if($total_grades->isNotEmpty())
                    @foreach ($total_grades as $grade)
                        '{{ $grade->name }}',
                    @endforeach
                @endif
            ],
            chart: {
                height: 333,
                type: "donut",
            },
            legend: {
                position: "bottom",
            },
            stroke: {
                show: false
            },
            dataLabels: {
                dropShadow: {
                    enabled: false,
                },
            },
            colors: grade_by_st_colour,
        };

        var chart = new ApexCharts(
            document.querySelector("#student_by_grade"),
            options
        );
        chart.render();
    
</script>
@endsection