@extends('layouts.base')

@section('title', 'Geststudent')

@section('css')
    {{-- include page's specific styles here  --}}
    <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') }}">
    <style>
        #option_automatique,
        #option_manuelle {
            display: inline-block;
            vertical-align: top;
            width: 100%;
            height: 500px;
            background-color: #f4f4f4;
            border: 1px solid #fff;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 3px #aaa;
            -webkit-box-shadow: 0px 0px 3px #aaa;
            box-shadow: 0px 0px 3px #aaa;
            text-align: center;
            margin: auto;
            margin-top: 20px;
            opacity: 1.5;
        }

        #option_automatique img,
        #option_manuelle img {
            width: 98%;
            height: 98%;
        }

        #option_automatique a,
        #option_manuelle a {
            background-color: black;
            display: inline-block;
            vertical-align: top;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            border: 1px solid #fff;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 3px #aaa;
            -webkit-box-shadow: 0px 0px 3px #aaa;
            box-shadow: 0px 0px 3px #aaa;
            text-align: center;
            padding-top: 10px;

        }

        #option_automatique a:hover,
        #option_manuelle a:hover {
            background: #f4f4f4;
            color: #666;
            text-shadow: 1px 1px 1px #fff;
        }

        #option_automatique a p,
        #option_manuelle a p {
            float: bottom;
            background-color: #f4f4f4;
            border: 1px solid #fff;
            width: 96%;
            padding: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 3px #aaa;
            -webkit-box-shadow: 0px 0px 3px #aaa;
            box-shadow: 0px 0px 3px #aaa;
            height: 50px;
            margin-top: 10px;
            text-shadow: 0 1px 1px #777;
            font-weight: bold;
            font-family: "Century Gothic", Helvetica, sans-serif;
            font-size: 1.6em;
            color: #777;


        }

        #option_automatique {
            margin-right: 20px;
        }
    </style>
@endsection

@section('content')
    <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>
    <div class="row">
        <div class="col-sm-6 white-box" style>
            <div class="card w-100">
                <div class="card-body">
                    <h3 class=" card-title">Option Automatique de numérisation</h3>

                    <div id="option_automatique" align="center">
                        <a href="{{ route('qrnew') }}" target="_blank" style="text-decoration: none;"><img
                                src="{{ asset('assets/images/po1.png') }}"
                                title="Scanner la zone QR de la fiche de préinscription de l'étudiant. Suivez les étapes puis scanner le dossier physique de l'étudiant.">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 white-box">
            <div class="card w-100">
                <div class="card-body">
                    <h3 class="card-title">Option Semi-Automatique de numérisation</h3>
                    <div id="option_manuelle" style="" align="center">
                        <a href="{{ route('semi') }}" target="_blank" style="text-decoration: none;"><img
                                src="{{ asset('assets/images/po2.png') }}"
                                title="Saisissez les informations relatives à l'étudiant. Suivez les étapes puis scanner le dossier physique de l'étudiant.">

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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="/assets/images/users/1.jpg" 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>Admin</option>
                                    </select>
                                </td>
                                <td>

                                    <button type="button" data-swal-template="#info"
                                        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!important; overflow-x: hidden;">
            <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" id="birth" name="birth" class="form-control fs-5"
                        placeholder="{{ $data['email'] }}" value="" 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="">
                </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>Admin</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">
                        <option value='1' selected>
                        </option>
                    </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 mt-3 mx-auto" }' />
</template>
@section('script')
    {{-- include page's specific scripts here --}}
    <script src="{{ asset('assets/libs/jquery/dist/counter.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>
        $(() => {
            $("#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();
    </script>

@endsection