@extends('layout.template')

   
    @section('intitule')
    <htext-uppercase class="mb-0">Dashboard / {{session('sigle')}} </h5> {{-- $data['schoolName'] --}}
    @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 count" id="preview_year">{{ session('year') - 1 }}</span>
                                    <span>-</span>
                                    <span class="fw-normal count" id="next_year">{{ session('year')}}-</span>
                                </h4> {{-- $data['year']->periode --}}
                            </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 count" id="total_number">{{ session('effectifFille') + session('effectifGarcon') }} </span> {{-- $data['effectif'] --}}
                                </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 count" id="number_girls">{{ session('effectifFille') }}</span> {{-- $data['femme'] --}}
                                </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 count" id="number_boys">{{ session('effectifGarcon') }} </span>
                                </h4> {{-- $data['homme'] --}}
                            </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>


        
        
    @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>
         //  let chart_data =                  30 
            // Dashboard 1 Morris-chart
            $(function() {

                //LinearGS
                Morris.Area({
                    element: 'linearGS',
                    data: @json($allFil, 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',
                    dataLabels: false,
                    lineColors: ['{{ session("etablissementCouleur2") }}'],
                    pointFillColors: ['{{ session("etablissementCouleur2") }}']
                });


                //DiagramGS
                Morris.Bar({
                    element: 'diagramGS',
                    data: @json($allFil, JSON_PRETTY_PRINT),
                    animate: true,
                    xkey: 'sigleFilieres',
                    ykeys: ['effectif'],
                    labels: [''],
                    fillOpacity: 0.4,
                    barColors: ['{{ session("etablissementCouleur1") }}'],
                    hideHover: 'auto',
                    gridLineColor: '{{ session("etablissementCouleur1") }}',
                    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"
                }
            }

            $(".count").counter({
                duration: 1000,
                countFrom: 0,
            });
            // $("#preview_year").counter({
            //     duration: 1000,
            //     countFrom: 0,
            // });
            // $("#next_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