@extends('layout.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  -->
        <!-- ============================================================== -->
        <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=" p-4 table-responsive">
                        <table class="table table-striped table-bordered zero_config text-center" role="grid"
                            aria-describedby="examtable_info">
                            <thead class="bg-info text-white">
                                <tr role="row">
                                    <th>#</th>
                                    <th>PHOTO</th>
                                    <th>Matricule</th>
                                    <th>NOM & PRENOM</th>
                                    <th>USERNAME</th>
                                    <th>EMAIL</th>
                                    <th>TELEPHONE</th>
                                    <th>CATEGORIE</th>
                                    <th>MANAGE</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="ps-4">1</td>
                                    <td>
                                        <img src="{{ config('app.aws_url') . $data['photo'] }}" class="rounded-circle"
                                            width="35">
                                    </td>
                                    <td>
                                        {{ $data['matricule'] }}
                                    </td>
                                    <td>
                                        {{ $data['nom_prenom'] }}
                                    </td>
                                    <td>
                                        {{ Session::get('RESULTAT_USERNAME') }}
                                    </td>
                                    <td>
                                        {{ $data['email'] }}
                                    </td>
                                    <td>
                                        {{ $data['tel'] }}
                                    </td>
                                    <td>
                                        <select class="form-select category-select" id="exampleFormControlSelect1">
                                            <option>
                                                {{ App\Http\Helpers\UserHelpers::userRole(Session::get('RESULTAT_TYPE_USER')) }}
                                            </option>
                                        </select>
                                    </td>
                                    <td>

                                        <button type="button" onclick="sweet()"
                                            class="btn btn-info btn-outline btn-circle btn-lg m-r-5 editer"
                                            data-toggle="modal" data-target="#add-contact">

                                            <i class="ti-pencil-alt"></i>
                                        </button>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endsection



    <template id="info">
        <swal-title>
            Changer d'etablissement...
        </swal-title>
        <swal-html>
            <form class="form-material" style="display: block; overflow-x: hidden;"
                action="{{ route('change_etablissement') }}" method="POST">
                @csrf
                <div class="row">
                    <label class="col-sm-5 mt-2 text-end fs-5" style="font-weight: bold;" for="matricule">
                        <strong>Matricule:</strong></label>
                    <div class="col-sm-5">
                        <input required type="text" class="form-control form-control-line fs-5"
                            value="{{ $data['matricule'] }}" readonly id="matricule" name="matricule">
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-5 mt-2 text-end fs-5" style="font-weight: bold;" for="name">Nom:</label>
                    <div class="col-sm-5">
                        <input required type="text" class="form-control form-control-line fs-5" placeholder=""
                            value="{{ $data['nom'] }}" readonly id="name" name="name">

                    </div>
                </div>
                <div class="row">
                    <label class="col-sm-5 mt-2 text-end fs-5" style="font-weight: bold;"
                        for="prenom">Prénom:</label>
                    <div class="col-sm-5">
                        <input required type="text" class="form-control form-control-line fs-5" placeholder=""
                            value="{{ $data['prenom'] }}" readonly id="prenom" name="prenom">
                    </div>

                </div>
                <div class="row">
                    <label class="col-sm-5 mt-2 text-end fs-5" style="font-weight: bold;"
                        for="DateNaissance">Email:</label>
                    <div class="col-sm-5">
                        <input required type="text" class="form-control fs-5" placeholder="{{ $data['email'] }}"
                            value="{{ $data['email'] }}" name="email">
                    </div>

                </div>

                <div class="row">
                    <label class="col-sm-5 mt-2 text-end fs-5" style="font-weight: bold;"
                        for="LieuNaissance">Phone</label>
                    <div class="col-sm-5">
                        <input required type="text" class="form-control fs-5" placeholder="{{ $data['tel'] }}"
                            id="Phone" name="phone" value="{{ $data['tel'] }}">
                    </div>

                </div>

                <div class="row">

                    <label class="col-sm-5 mt-2 text-end fs-5" for="DValidation"
                        class=" col-form-label fw-bold">Catégorie:</label>

                    <div class="col-lg-6 col-12  input-modal">
                        <select style="border-style: none" class="form-control fs-5">
                            <option value='1' selected>
                                {{ App\Http\Helpers\UserHelpers::userRole(Session::get('RESULTAT_TYPE_USER')) }}
                            </option>
                        </select>
                    </div>


                </div>
                <div class="row">

                    <label class="col-sm-5 mt-2 text-end fs-5" for="Nationalité"
                        class=" col-form-label fw-bold">Etablissement :</label>
                    <div class="col-lg-6 col-12  input-modal">
                        <select style="border-style: none" class="form-control fs-5" name="etablissement">
                            @if (intval(Session('RESULTAT_TYPE_USER')) == 3)
                                @php
                                    $etablissements = App\Http\Helpers\UserHelpers::getUserEta();
                                @endphp
                                @foreach ($etablissements as $eta)
                                    <option value='{{ $eta['idEtablissement'] }}'
                                        {{ Session::get('RESULTAT_DATA')['RESULTAT_ID_ETA'] == $eta['idEtablissement'] ? 'selected' : '' }}>
                                        {{ $eta['sigle'] }}
                                    </option>
                                @endforeach
                            @else
                                <option value='{{ Session::get('RESULTAT_DATA')['RESULTAT_ID_ETA'] }}' selected>
                                    {{ Session::get('RESULTAT_DATA')['RESULTAT_SIGLE'] }}
                                </option>
                            @endif
                        </select>
                    </div>

                </div>
            </form>
        </swal-html>
        <swal-button type="confirm" color="#2cd07e">
            Sauvegarder
        </swal-button>
        <swal-button type="cancel">
            Annuler
        </swal-button>

        <swal-param name="allowEscapeKey" value="true" />
        <swal-param name="customClass" value='{ "popup": "my-popup", "title": "my-title text-start" }' />
    </template>




    @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',
                    dataLabels: false,
                    lineColors: ['{{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_ETAB2'] }}'],
                    pointFillColors: ['{{ Session::get('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::get('RESULTAT_DATA')['firstLight'] }}'],
                    hideHover: 'auto',
                    // gridLineColor: '{{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_ETAB1'] }}',
                    grid: false,
                    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,
            });

            let sweet = function() {
                Swal.fire({
                    template: '#info'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('.form-material').submit();
                    }
                })
            }
        </script>
    @endsection