@extends('dashboard.layouts.master')
@section('aside')
    @include('dashboard.includes.aside')
@endsection
@section('content')
    <div class="row">
        <div class="col-xl-4 col-md-4 col-sm-6">
            <a href="{{route('admins.index')}}" class="card bg">
                <div class="after-box bg-3">
                    <div class="card-body">
                        <div class="media static-widget">
                            <div class="media-body">
                                <h6 class="font-roboto">المشرفين</h6>
                                <h4 class="mb-0 counter">{{$admins_count}}</h4>
                            </div>
                            <img src="{{asset('assets/dashboard/assets')}}/images/icons/employees.svg" alt="">
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-md-4 col-sm-6">
            <a href="{{route('students.index')}}" class="card bg">
                <div class="after-box bg-6">
                    <div class="card-body">
                        <div class="media static-widget">
                            <div class="media-body">
                                <h6 class="font-roboto">الطلاب</h6>
                                <h4 class="mb-0 counter">{{$students_count}}</h4>
                            </div>
                            <img src="{{asset('assets/dashboard/assets')}}/images/icons/student.svg" alt="">
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-md-4 col-sm-6">
            <a href="{{ route('subjects.index','aside')}}" class="card bg">
                <div class="after-box bg-5">
                    <div class="card-body">
                        <div class="media static-widget">
                            <div class="media-body">
                                <h6 class="font-roboto">المواد</h6>
                                <h4 class="mb-0 counter">{{$subjects_count}}</h4>
                            </div>
                            <img src="{{asset('assets/dashboard/assets')}}/images/icons/books.svg" alt="">
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-md-4 col-sm-6">
            <a href="{{route('levels.index')}}" class="card bg">
                <div class="after-box bg-4">
                    <div class="card-body">
                        <div class="media static-widget">
                            <div class="media-body">
                                <h6 class="font-roboto">المستويات
                                    <span></span>
                                </h6>
                                <h4 class="mb-0 counter">{{$levels_count}}</h4>
                            </div>
                            <img src="{{asset('assets/dashboard/assets')}}/images/icons/level.svg" alt="">
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-md-4 col-sm-6">
            <a href="{{route('skills.index')}}" class="card bg">
                <div class="after-box bg-2">
                    <div class="card-body">
                        <div class="media static-widget">
                            <div class="media-body">
                                <h6 class="font-roboto">المهارات
                                    <span></span>
                                </h6>
                                <h4 class="mb-0 counter">{{$skills_count}}</h4>
                            </div>
                            <img src="{{asset('assets/dashboard/assets')}}/images/icons/selfconfident.svg" alt="">
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-md-4 col-sm-6">
            <a href="{{route('information.index')}}" class="card bg">
                <div class="after-box bg-1">
                    <div class="card-body">
                        <div class="media static-widget">
                            <div class="media-body">
                                <h6 class="font-roboto">المعلومات
                                    <span></span>
                                </h6>
                                <h4 class="mb-0 counter">{{$information_count}}</h4>
                            </div>
                            <img src="{{asset('assets/dashboard/assets')}}/images/icons/book.svg" alt="">
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-bottom-0">
            <h3>الاحصائيات</h3>
        </div>
        <div class="card-body pt-0">
            <div class="row">
                <h3>الطلاب / المشرفين</h3>
                <div class="col-md-12">
                    <div id="chart2" class="chart"></div>
                </div>
                <h3>المستويات / المواد / الدروس</h3>
                <div class="col-md-12">
                    <div id="chart1" class="chart"></div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        var myChart = echarts.init(document.getElementById('chart1'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    fontFamily: 'Bahij_Plain'
                }
            },
            grid: {
                top: "9%",
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                data: {!! $months !!},
                axisLabel: {
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'Bahij_Plain'
                    }
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'المستويات',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: {!! $levels !!},
                color: '#0d9488'
            },
                {
                    name: 'المواد',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {!! $subjects !!},
                    color: '#1587b0'
                },
                {
                    name: 'الدروس',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {!! $lessons !!},
                    color: '#B05338'
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script>
        var myChart = echarts.init(document.getElementById('chart2'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    fontFamily: 'Bahij_Plain'
                }
            },
            legend: {
                textStyle: {
                    fontSize: 14,
                    fontFamily: 'Bahij_Plain'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: {!! $months !!},
                axisLabel: {
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'Bahij_Plain'
                    }
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'المشرفين',
                type: 'line',
                smooth: true,
                data: {!! $admins !!},
                color: '#0d9488'
            },
                {
                    name: 'الطلاب',
                    type: 'line',
                    smooth: true,
                    data: {!! $students !!},
                    color: '#1587b0'
                },

            ]
        };

        myChart.setOption(option);
    </script>
@endpush