@extends('layout.template')

@section('title', 'Dashboard')

@section('style')
    <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">
@endsection

@section('page_breadcrumb')
    <div class="col col-xs-12 justify-content-start d-flex align-items-center">
        <h5 class="font-weight-medium text-uppercase mb-0"> Dashboard / {{ $data['nameEta'] }} </h5>
    </div>
@endsection

@section('content')
    <!-- ============================================================== -->
    <!-- Stats Card -->
    <!-- ============================================================== -->
    <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">
                        <h2 class="mb-0 display-5"><i class="icon-calculator text-info"></i></h2>
                        <div class="ms-auto">
                            <span class="counter" style="font-size:22px"
                                id="preview_year">{{ $data['anneeAcademique']->periode }}</span>
                        </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">
                        <h2 class="mb-0 display-5"><i class="icon-people text-purple"></i></h2>
                        <div class="ms-auto">
                            <span class="counter" style="font-size:22px" id="eff_tot">{{ $data['effectif'] }}</span>
                        </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">
                        <h2 class="mb-0 display-5"><i class="icon-user-female text-danger"></i></h2>
                        <div class="ms-auto">
                            <span class="counter" style="font-size:22px" id="eff_girls">{{ $data['femme'] }}</span>
                        </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">
                        <h2 class="mb-0 display-5"><i class="icon-user text-success"></i></h2>
                        <div class="ms-auto">
                            <span class="counter" style="font-size:22px" id="eff_boys">{{ $data['homme'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Stats Graphs -->
    <!-- ============================================================== -->
    <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('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('assets/js/counter.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/toastr/toastr-init.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>
    <script>
        $("#eff_tot").counter({
            duration: 2000,
            countFrom: 0
        });

        $("#eff_girls").counter({
            duration: 2000,
            countFrom: 0
        });

        $("#eff_boys").counter({
            duration: 2000,
            countFrom: 0
        });


        toastr["info"]("La plateforme révolutionnaire de gestion des universités publiques et privée.",
            "Bienvenue dans GestStudent", {
                progressBar: true,
                timeOut: 2000
            });

        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "2000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        if("