@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>
                                            <!--end col-->
                                            {{-- <div class="col-auto">
                                                <button type="button" class="btn btn-soft-primary"><i class="ri-add-circle-line align-middle me-1"></i>
                                                    {{translate('Add Shcool')}}</button>
                                            </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 School')}}</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_school->count()}}">0</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 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 Teachers')}}</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}}">0</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 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}}">0</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 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}}"></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> <!-- 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="st_and_teacher_chart" data-colors='["--vz-warning", "--vz-primary", "--vz-success"]' 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 mb-5">
                            <div class="card h-100">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Latest 10 Students</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div class="table-responsive table-card">
                                        <table class="table table-hover table-centered align-middle table-nowrap mb-0">
                                            <tbody>
                                                @if($latest_st->isNotEmpty())
                                                    @foreach($latest_st as $st)
                                                        <tr>
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="avatar-sm bg-light rounded p-1 me-2">
                                                                        <img src="{{uploaded_asset($st->image)}}" alt="" class="img-fluid d-block" onerror="this.onerror=null; this.src='{{asset('assets/backend/images/users/avatar.jpg')}}';" />
                                                                    </div>
                                                                    <div>
                                                                        <h5 class="fs-14 my-1"><a href="#" class="text-reset">{{ $st->name }}</a></h5>
                                                                        <span class="text-muted">{{ $st->unique_id }}</span>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <h5 class="fs-14 my-1 fw-normal">Grade</h5>
                                                                <span class="text-muted">{{$st->grade->name}}</span>
                                                            </td>
                                                            <td>
                                                                <h5 class="fs-14 my-1 fw-normal">Section</h5>
                                                                <span class="text-muted">{{$st->section->name}}</span>
                                                            </td>
                                                            
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 mb-5">
                            <div class="card h-100">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Latest 10 Teachers</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div class="table-responsive table-card">
                                        <table class="table table-hover table-centered align-middle table-nowrap mb-0">
                                            <tbody>
                                                @if($latest_teacher->isNotEmpty())
                                                    @foreach($latest_teacher as $teacher)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <div class="avatar-sm bg-light rounded p-1 me-2">
                                                                    <img src="{{uploaded_asset($teacher->image)}}" alt="" class="img-fluid d-block" onerror="this.onerror=null; this.src='{{asset('assets/backend/images/users/avatar.jpg')}}';" />
                                                                </div>
                                                                <div>
                                                                    <h5 class="fs-14 my-1"><a href="#" class="text-reset">{{ $teacher->name }}</a></h5>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <h5 class="fs-14 my-1 fw-normal">{{$teacher->unique_id ?? '#'}}</h5>
                                                            <span class="text-muted">Id No.</span>
                                                        </td>
                                                        <td>
                                                            <h5 class="fs-14 my-1 fw-normal">{{ !is_null($teacher->school) ? $teacher->school->name : 'N/A' }}</h5>
                                                            <span class="text-muted">School Name</span>
                                                        </td>
                                                        
                                                    </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end row-->

                    <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 Shcool</h4>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="student_by_school" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]' 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" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]' 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>
        function getChartColorsArray(chartId) {
            if (document.getElementById(chartId) !== null) {
                var colors = document.getElementById(chartId).getAttribute("data-colors");
                if (colors) {
                    colors = JSON.parse(colors);
                    return colors.map(function (value) {
                        var newValue = value.replace(" ", "");
                        if (newValue.indexOf(",") === -1) {
                            var color = getComputedStyle(document.documentElement).getPropertyValue(
                                newValue
                            );
                            if (color) return color;
                            else return newValue;
                        } else {
                            var val = value.split(",");
                            if (val.length == 2) {
                                var rgbaColor = getComputedStyle(
                                    document.documentElement
                                ).getPropertyValue(val[0]);
                                rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
                                return rgbaColor;
                            } else {
                                return newValue;
                            }
                        }
                    });
                } else {
                    console.warn('data-colors atributes not found on', chartId);
                }
            }
        }
        
        var linechartcustomerColors = getChartColorsArray("st_and_teacher_chart");
        if (linechartcustomerColors) {
            var options = {
                series: [{
                        name: "Teachers",
                        type: "area",
                        data: [
                            @if($total_school->isNotEmpty())
                                @foreach ($total_school as $schools)
                                    parseInt('{{ $schools->teachers->count() }}'),
                                @endforeach
                            @endif
                        ],
                    },
                    {
                        name: "Students",
                        type: "bar",
                        data: [
                            @if($total_school->isNotEmpty())
                                @foreach ($total_school as $schools)
                                    parseInt('{{ $schools->students->count() }}'),
                                @endforeach
                            @endif
                        ],
                    },
                    
                ],
                chart: {
                    height: 370,
                    type: "line",
                    toolbar: {
                        show: false,
                    },
                },
                stroke: {
                    curve: "straight",
                    dashArray: [0, 0, 8],
                    width: [2, 0, 2.2],
                },
                fill: {
                    opacity: [0.1, 0.9, 1],
                },
                markers: {
                    size: [0, 0, 0],
                    strokeWidth: 2,
                    hover: {
                        size: 4,
                    },
                },
                xaxis: {
                    categories: [
                        @if($total_school->isNotEmpty())
                            @foreach ($total_school as $schools)
                                '{{ $schools->name }}',
                            @endforeach
                        @endif
                    ],
                    axisTicks: {
                        show: false,
                    },
                    axisBorder: {
                        show: false,
                    },
                },
                grid: {
                    show: true,
                    xaxis: {
                        lines: {
                            show: true,
                        },
                    },
                    yaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    padding: {
                        top: 0,
                        right: -2,
                        bottom: 15,
                        left: 10,
                    },
                },
                legend: {
                    show: true,
                    horizontalAlign: "center",
                    offsetX: 0,
                    offsetY: -5,
                    markers: {
                        width: 9,
                        height: 9,
                        radius: 6,
                    },
                    itemMargin: {
                        horizontal: 10,
                        vertical: 0,
                    },
                },
                plotOptions: {
                    bar: {
                        columnWidth: "30%",
                        barHeight: "70%",
                    },
                },
                colors: linechartcustomerColors,
                tooltip: {
                    shared: true,
                    y: [{
                            formatter: function (y) {
                                if (typeof y !== "undefined") {
                                    return y.toFixed(0);
                                }
                                return y;
                            },
                        },
                        {
                            formatter: function (y) {
                                if (typeof y !== "undefined") {
                                    return y.toFixed(0);
                                }
                                return y;
                            },
                        },
                        {
                            formatter: function (y) {
                                if (typeof y !== "undefined") {
                                    return y.toFixed(0);
                                }
                                return y;
                            },
                        },
                    ],
                },
            };
            var chart = new ApexCharts(
                document.querySelector("#st_and_teacher_chart"),
                options
            );
            chart.render();
        }

        /**Donut Chart */
        var chartDonutBasicColors = getChartColorsArray("student_by_school");
        if (chartDonutBasicColors) {
            var options = {
                series: [
                    @if($total_school->isNotEmpty())
                        @foreach ($total_school as $schools)
                            parseInt('{{ $schools->students->count() }}'),
                        @endforeach
                    @endif
                ],
                labels: [
                    @if($total_school->isNotEmpty())
                        @foreach ($total_school as $schools)
                            '{{ $schools->name }}',
                        @endforeach
                    @endif
                ],
                chart: {
                    height: 333,
                    type: "donut",
                },
                legend: {
                    position: "bottom",
                },
                stroke: {
                    show: false
                },
                dataLabels: {
                    dropShadow: {
                        enabled: false,
                    },
                },
                colors: chartDonutBasicColors,
            };

            var chart = new ApexCharts(
                document.querySelector("#student_by_school"),
                options
            );
            chart.render();
        }

        var areachartSalesColors = getChartColorsArray("student_by_subject");
if (areachartSalesColors) {
    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',
          events: {
            click: function(chart, w, e) {
              // console.log(chart, w, e)
            }
          }
        },
        colors: areachartSalesColors,
        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
          ],
          labels: {
            style: {
              colors: areachartSalesColors,
              fontSize: '12px'
            }
          }
        },
        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();
}
    </script>
    {{-- <script src="{{asset('assets/backend/js/pages/dashboard-ecommerce.init.js')}}"></script> --}}

    
    </script>
@endsection