@extends('layouts.base',
    $breadcrumb = [
        "title" => "DASHBOARD / ".session('sigle'),
        "nav" => [ // "text to show" => "link",
            "Dashboard GestStudent" => "javascript:void(0);", // Current page is last item
            "Dashboard" => route('home'),
        ],
    ]
)

@section('title', 'Dashboard')

@section('css')
    <!-- Chart JavaScript -->
    <link href=" {{ asset('assets/libs/apexcharts/dist/apexcharts.css') }} " rel="stylesheet">
    <link href=" {{ asset('assets/libs/morris.js/morris.css') }}" rel="stylesheet">
    <!-- DataTables -->
    <link href=" {{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
    <link href=" {{ asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css')}}" rel="stylesheet">
    <!-- Select2 -->
    <link rel="stylesheet" type="text/css" href=" {{ asset('assets/libs/select2/dist/css/select2.min.css') }} ">


    <style>

        /* Top Card */
        .card-info .card .card-body h2 span {
            font-size: smaller;
            font-family: 'Courier New', Courier, monospace;
        }

        /* Sweet Alert */
        #user-info swal-title {
            padding: 0.5em;
            font-weight: 500;
        }


        .profil-content {
            width: 3rem;
            height: 3rem;
            object-fit: cover;
            border-radius: 50% !important;
            background: rgb(245, 245, 245);
            border : 1px solid rgb(0 0 0 / 20%);
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%),
                        0 2px 10px 0 rgb(0 0 0 / 10%);
            background-position: center center;
            background-size: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .select2-container {
            text-align-last: left;
        }
    </style>
@endsection

@section('content')

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

{{-- alert with content --}}
@include('partials.alert')

<div class="row card-info">
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Année-academique en cours</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">
                        <h2 class="mb-0 display-6"><span class="counter fw-normal">{{ session('annee_acad') - 1}}</span>-<span class="counter fw-normal">{{ session('annee_acad') }}</span></h2>
                    </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-pulpe"></i></h2>
                    <div class="ms-auto">
                        <h2 class="mb-0 display-6"><span class="counter fw-normal">{{$data['stats']['total_boys'] + $data['stats']['total_girls']}}</span></h2>
                    </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-primary"></i></h2>
                    <div class="ms-auto">
                        <h2 class="mb-0 display-6"><span class="counter fw-normal">{{$data['stats']['total_girls']}}</span></h2>
                    </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">
                        <h2 class="mb-0 display-6"><span class="counter fw-normal">{{$data['stats']['total_boys']}}</span></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- row -->
<div class="row">
    <!-- column -->
    <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="linear-chart" style="height:100%;"></div>
            </div>
        </div>
    </div>
    <!-- column -->
    <!-- column -->
    <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="bar-chart"></div>
            </div>
        </div>
    </div>
</div>

@php
    $user = $data['user_infos'];
@endphp
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-0">METTRE A JOUR VOTRE COMPTE</h5>
            </div>
            <div class="table-responsive mx-1">
                <table class="table-condensed table-hover table-striped table table-bordered">
                    <thead class="bg-theme-light">
                        <tr style="color:  {{ session('couleurs.textColor2') }}">
                            <th scope="col" class="border-0 font-weight-medium text-center">#</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">PHOTO</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">MATRICULE</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">NOM & PRENOM(S)</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">USERNAME</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">EMAIL</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">TÉLÉPHONE</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">CATÉGORIE</th>
                            <th scope="col" class="border-0 font-weight-medium text-center">ACTION(S)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center">1</td>
                            <td class="text-center">
                                @if (session('cheminPhoto'))
                                    <div class="icon" id="profile">
                                        <img
                                            src="{{ getImgPath('PROFIL', session('cheminPhoto'), session('type_user'))}}"
                                            alt="{{ session('username') }}"
                                            class="profil-content"
                                            onerror="this.onerror=null;this.src='{{ asset('/assets/images/avatar.png') }}';"
                                        >
                                    </div>
                                @else
                                    <svg
                                        width="50px"
                                        height="50px"
                                        viewBox="0 0 18 18"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            fill="#494c4e"
                                            d="M9 0a9 9 0 0 0-9 9 8.654 8.654 0 0 0 .05.92 9 9 0 0 0 17.9 0A8.654 8.654 0 0 0 18 9a9 9 0 0 0-9-9zm5.42 13.42c-.01 0-.06.08-.07.08a6.975 6.975 0 0 1-10.7 0c-.01 0-.06-.08-.07-.08a.512.512 0 0 1-.09-.27.522.522 0 0 1 .34-.48c.74-.25 1.45-.49 1.65-.54a.16.16 0 0 1 .03-.13.49.49 0 0 1 .43-.36l1.27-.1a2.077 2.077 0 0 0-.19-.79v-.01a2.814 2.814 0 0 0-.45-.78 3.83 3.83 0 0 1-.79-2.38A3.38 3.38 0 0 1 8.88 4h.24a3.38 3.38 0 0 1 3.1 3.58 3.83 3.83 0 0 1-.79 2.38 2.814 2.814 0 0 0-.45.78v.01a2.077 2.077 0 0 0-.19.79l1.27.1a.49.49 0 0 1 .43.36.16.16 0 0 1 .03.13c.2.05.91.29 1.65.54a.49.49 0 0 1 .25.75z"
                                        />
                                    </svg>
                                @endif
                            </td>
                            <td class="text-center">{{ $user['matricule']}}</td>
                            <td class="font-medium">{{ $user['nom'] . ' ' .$user['prenom'] }}</td>
                            <td class="text-center">{{ session('username') }} </td>
                            <td class="text-center">{{ $user['email']}} </td>
                            <td class="text-center">{{'('.$user['country_code'].') '. $user['phone']}} </td>
                            <td class="text-center">
                                <select class="form-control fs-5 border-info custom-select2"
                                        name="role"
                                        data-border-color="info"
                                        data-border-variation="darken-2"
                                        data-text-color="info"
                                        data-text-variation="darken-3"
                                        style="width: 100%;height: 36px;"
                                    >
                                    @php
                                        $role = userRole( session('type_user'), false );
                                    @endphp
                                    @foreach ($role as $ind => $tile)
                                        <option value='{{ $ind }}' {{ (session('type_user') == $ind ) ? 'selected' : '' }}>{{ $tile }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="text-center">
                                <div class="button">
                                    <button type="button" onclick="sweet(this)" data-target="#user-info"
                                        class="btn btn-theme btn-outline btn-circle btn-lg m-r-5 editer">
                                        <i class="ti-pencil-alt" style="color:  {{ session('couleurs.textColor2') }}"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@include('partials.sweeter')


@endsection

@section('script')
    <!-- counter up JavaScript -->
    <script src=" {{ asset('assets/libs/jquery.easing-master/jquery.easing.js') }} "></script>
    <script src=" {{ asset('assets/libs/counter.js/js/counter.js') }} "></script>

     <!-- datatables.net -->
    <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>

    <!--Morris JavaScript -->
    <script src="{{ asset('/assets/libs/raphael/raphael.min.js')}}"></script>
    <script src="{{ asset('/assets/libs/morris.js/morris.min.js')}}"></script>

    <!--ApexCharts JavaScript -->
    {{-- <script src="{{ asset('/assets/libs/apexcharts/dist/apexcharts.min.js')}}"></script> --}}

    <!--Select2 -->
    <script src="{{ asset('/assets/libs/select2/dist/js/select2.full.min.js')}}"></script>
    <script src="{{ asset('/assets/libs/select2/dist/js/select2.min.js')}}"></script>

    <script type="text/javascript">
        let morrisData = {};

        // Push plot data in array
        let plotData = @json($data['plotData'], JSON_PRETTY_PRINT);
        let intitules = @json(array_column($data['plotData'], "intituleFilieres"), JSON_PRETTY_PRINT);
        let type_user = @json(session('type_user'), JSON_PRETTY_PRINT);
        let etablissement = @json(session('sigle'), JSON_PRETTY_PRINT);
        let couleurs = @json(session('couleurs'), JSON_PRETTY_PRINT);

        function sweet (e) {
            Swal.fire({
                title: "Changer d'etablissement......",
                template: $(e).attr('data-target'),
                didOpen: function () {
                    $(".custom-select2").select2({
                        minimumResultsForSearch: Infinity,
                        // theme: "classic",
                        dropdownParent: $('#swal2-html-container')
                    });
                },

            }).then((result) => {

                if (result.isConfirmed) {
                    formData = $('#contact-form').serializeArray();

                    console.log("formValues", formData);

                    let form = $('#contact-form');
                    console.log('form', form)

                    // if ( $.inArray(type_user, [2, 3]) !== -1) {
                    if ( type_user == 3) {
                        form.submit();

                        swalWithBootstrapButtons.fire(
                            'Choix enregistré!',
                            'Redirection vers le dashbord de <strong>' + $('select[name="etablissement"]').find('option:selected').html() + '</strong>',
                            'success'
                        )
                    }

                    // window.location = "{{ route('home') }}";

                } else if ( result.dismiss === Swal.DismissReason.cancel ) {
                    /*
                        swalWithBootstrapButtons.fire(
                            'Choix annulé',
                            'Vos données sont intactes.',
                            'error'
                        )
                    */
                }
            })
        }


        $(function(){
            /* Chart content */
            // Morris bar chart
            Morris.Bar ({
                element: 'bar-chart',
                data: plotData,
                xkey: 'sigleFilieres',
                ykeys: ['effectif'],
                labels: intitules,
                // barColors:['#fc4b6c', '#00acc1', '#1e88e5'],
                barColors:[ couleurs['firstLight'], couleurs['secondLight']],
                hideHover: 'auto',
                gridLineColor: '#eef0f2',
                xLabelAngle: 40,
                resize: true,
                gridTextSize: 10.5,
                gridTextWeight: 'bold'
            });

            //LinearGS
            Morris.Area({
                element: 'linear-chart',
                data: plotData,
                animate: true,
                xkey: ['sigleFilieres'],
                ykeys: ['effectif'],
                labels: intitules,
                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: [ couleurs['secondColor'], couleurs['firstColor']],
            });


            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": "300",
                    "hideDuration": "1000",
                    "timeOut": "1000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
            }


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

            $(".custom-select2").select2({
                minimumResultsForSearch: Infinity,
                // theme: "classic",
            });

        }());
    </script>
@endsection