@extends('layouts.template')

@section('intitule')
    <htext-uppercase class="mb-0">Dashboard / {{ $data['schoolName'] }} </h5>
    @endsection

    @section('breadcrumb')
        <li class="breadcrumb-item active" aria-current="page">Dashboard GestStudent</li>
    @endsection

    @section('styles')
        <link rel="stylesheet" href="{{ asset('assets/libs/apexcharts/dist/apexcharts.css') }}">
        <link href="{{ asset('assets/libs/morris.js/morris.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
        <link rel="stylesheet" type="text/css"
            href="{{ asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css') }}">
    @endsection

    @section('main')
        <!-- ============================================================== -->
        <!-- First Cards Row  -->
        <!-- ============================================================== -->


        <input type="text" value="30" id="notif" style="display: none">

        <div class="row">
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">ANNÉE-ACADÉMIQUE</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h3 class="mb-0 display-5"><i class="icon-calculator text-info"></i></h3>
                            <div class="ms-auto">
                                <h4 class="mb-0"><span class="fw-normal">{{ $data['year']->periode }}</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">EFFECTIF TOTAL</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h3 class="mb-0 display-5"><i class="icon-people text-purple"></i></h3>
                            <div class="ms-auto">
                                <h4 class="mb-0"><span class="fw-normal" id="total_number">{{ $data['effectif'] }}</span>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">FILLES</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h3 class="mb-0 display-5"><i class="icon-user-female text-danger"></i></h3>
                            <div class="ms-auto">
                                <h4 class="mb-0"><span class="fw-normal" id="number_girls">{{ $data['femme'] }}</span>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">GARÇONS</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h3 class="mb-0 display-5"><i class="icon-user text-success"></i></h3>
                            <div class="ms-auto">
                                <h4 class="mb-0 "><span class="fw-normal" id="number_boys">{{ $data['homme'] }}</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- Country and Visit, Traffic cards Row  -->
        <!-- ============================================================== -->
        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="title-part-padding border-bottom">
                        <h4 class="card-title mb-0">STATISTIQUE : REPRÉSENTATION LINÉAIRE</h4>
                    </div>
                    <div class="card-body">
                        <div id="linearGS"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="title-part-padding border-bottom">
                        <h4 class="card-title mb-0">STATISTIQUE : REPRÉSENTATION EN DIAGRAMME</h4>
                    </div>
                    <div class="card-body">
                        <div id="diagramGS"></div>
                    </div>
                </div>
            </div>
        </div>


        <!-- ============================================================== -->
        <!-- Table Row  -->
        <!-- ============================================================== -->
        
    @endsection

    @section('scripts')
        <script src="{{ asset('assets/libs/jquery/dist/jquery.easing.js') }}"></script>
        <script src="{{ asset('assets/libs/jquery/dist/counter.js') }}"></script>
        <script src="{{ asset('assets/libs/raphael/raphael.min.js') }}"></script>

        <script src="{{ asset('assets/libs/morris.js/morris.min.js') }}"></script>

        <script src="{{ asset('dist/js/pages/morris/morris-dataGS.js') }}"></script>

        <script src="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>

        <script src="{{ asset('assets/extra-libs/toastr/toastr-init.js') }}"></script>
        <script src="{{ asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>

        <script src="{{ asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js') }}"></script>

        <script src="{{ asset('dist/js/pages/datatable/datatable-basic.init.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.29/dist/sweetalert2.all.min.js"></script>


        <script>
            // Dashboard 1 Morris-chart
            $(function() {
                //LinearGS
                Morris.Area({
                    element: 'linearGS',
                    data: @json($data['chartData'], JSON_PRETTY_PRINT),
                    animate: true,
                    xkey: ['sigleFilieres'],
                    ykeys: ['effectif'],
                    labels: [''],
                    pointSize: 0,
                    fillOpacity: 0.4,
                    ymin: 0,
                    grid: false,
                    behaveLikeLine: true,
                    smooth: false,
                    parseTime: false,
                    hideHover: 'auto',
                    resize: true,
                    xLabelAngle: 40,
                    gridTextSize: 10.5,
                    gridTextWeight: 'bold',
                    pointFillColors: ['#ffffff'],
                    pointStrokeColors: ['black'],
                    // lineColors: ['{{ Session::get('RESULTAT_DATA')['RESULTAT_SECONDLIGHT'] }},{{ Session::get('RESULTAT_DATA')['RESULTAT_FIRSTLIGHT'] }}'],
                    lineColors: ['{{ session('RESULTAT_DATA')['RESULTAT_COULEUR_ETAB2'] }}'],
                });


                //DiagramGS
                Morris.Bar({
                    element: 'diagramGS',
                    data: @json($data['chartData'], JSON_PRETTY_PRINT),
                    animate: true,
                    xkey: 'sigleFilieres',
                    ykeys: ['effectif'],
                    labels: [''],
                    barColors: ['{{ session('RESULTAT_DATA')['RESULTAT_FIRSTLIGHT'] }}'],
                    // barColors: ['{{ Session::get('RESULTAT_DATA')['RESULTAT_FIRSTLIGHT'] }},{{ Session::get('RESULTAT_DATA')['RESULTAT_SECONDLIGHT'] }}'],
                    hideHover: 'auto',
                    gridLineColor: '#eef0f2',
                    resize: true,
                    xLabelAngle: 40,
                    gridTextSize: 10.5,
                    gridTextWeight: 'bold',
                });
            });


            if ($("#notif").val() == "30") {
                toastr["info"]("La plateforme révolutionnaire de gestion des universités publiques et privée.",
                    "Bienvenue dans GestStudent", {
                        progressBar: true
                    })

                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "150",
                    "hideDuration": "1000",
                    "timeOut": "1000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
            }
            $("#preview_year").counter({
                duration: 1000,
                countFrom: 0,
            });
            $("#total_number").counter({
                duration: 2000,
                countFrom: 0,
            });
            $("#number_girls").counter({
                duration: 2000,
                countFrom: 0,
            });
            $("#number_boys").counter({
                duration: 2000,
                countFrom: 0,
            });

            Swal.bindClickHandler()

            Swal.mixin({
                toast: true,
            }).bindClickHandler('data-swal-toast-template')
        </script>
    @endsection