@extends('layout.template')

@section('title', 'Liste des étudiants')

@section('style')
    <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>
        .page-item.active .page-link {
            z-index: 3;
            color: var(--gs-text-primary-light);
            background-color: var(--gs-primary-light);
            border-color: var(--gs-primary-light);
        }

        .page-link {
            color: var(--gs-primary);
            background-color: var(--gs-text-primary);
        }

        .bulleAide {
            position: relative;
            display: inline-block;
        }

        .bulleAide .bulleAide_text {
            content: "";
            visibility: hidden;
            width: 20em;
            background-color: #dfffb1;
            //color: #fff;
            font-size: 0.8em;
            text-align: center;
            border-radius: 6px;
            //padding: 5px 0;
            margin-left: 5px;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
        }

        .bulleAide:hover .bulleAide_text {
            visibility: visible;
        }
    </style>
@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"> Liste des étudiants </h5>
    </div>
@endsection

@section('content')
    <div>
        <div class="container-fluid page-content">
            <!-- -------------------------------------------------------------- -->
            <!-- Start Page Content -->
            <!-- -------------------------------------------------------------- -->
            <!-- basic table -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="card card-body" style="background-color: transparent;">
                        <div class="text-center">
                            <div class="alert customize-alert alert-dismissible text-primary border border-primary fade show"
                                role="alert" style="background-color: white;">
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                                <div class="d-flex align-items-center font-weight-medium">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-info text-primary feather-sm me-2 flex-shrink-0">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="16" x2="12" y2="12"></line>
                                        <line x1="12" y1="8" x2="12" y2="8"></line>
                                    </svg>
                                    <span class="text-dark">
                                        Cette page vous permet de consulter la liste des étudiants du
                                        système ayant validé leur inscription ou pas.
                                        Vous pouvez les classez par nom, prénom, date de validation...
                                    </span>
                                </div>
                                <a class="excel-list" href="{{ route('genererListeEtudiants') }}">
                                    <button type="button"
                                        class="swalGenList btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto"
                                        style="background: var(--gs-primary); color: var(--gs-text-primary);">
                                        <i class="fas fa-download"></i>&nbsp; Générer la liste
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <h3 class="box-title m-b-0">Data Export</h3>
                                <p class="text-muted m-b-30">Export data to Excel, PDF &amp; Print</p>
                                <table id="file_export" class="table table-striped table-bordered display nowrap"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Matricule</th>
                                            <th>Nom</th>
                                            <th>Prénoms</th>
                                            <th>Date Naissance</th>
                                            <th>Lieu Naissance</th>
                                            <th>Statut</th>
                                            <th>Filière</th>
                                            <th>Sexe</th>
                                            <th>Nationalité</th>
                                            <th>Niveau</th>
                                            <th>Date Validation</th>
                                            <th class="js-not-exportable">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $i = 0;
                                        @endphp
                                        @foreach ($etudiantInfos as $etudiantInfo)
                                            <tr>
                                                <td>{{ $i + 1 }}</td>
                                                <td>{{ $etudiantInfo->matricule }}</td>
                                                <td>{{ $etudiantInfo->nom }}</td>
                                                <td>{{ $etudiantInfo->prenom }}</td>
                                                <td>{{ $etudiantInfo->date_nais }}</td>
                                                <td>{{ $etudiantInfo->lieu_nais }}</td>
                                                <td>{{ $etudiantInfo->statut }}</td>
                                                <td>{{ $etudiantInfo->sigleFilieres }} {{ $etudiantInfo->annee }}</td>
                                                <td>{{ $etudiantInfo->sexe }}</td>
                                                <td>{{ $etudiantInfo->nationalite }}</td>
                                                <td>{{ $etudiantInfo->niveauFormation }}</td>
                                                <td>{{ $etudiantInfo->dateValidation }}</td>
                                                <td>
                                                    <button type="button"
                                                        class="btn btn-outline btn-circle btn-lg m-r-5 modifier"
                                                        style="background-color: var(--gs-primary);"
                                                        data-swal-template="#info-template-{{ $i }}">
                                                        <i class="ti-pencil-alt" style="color: var(--gs-text-primary);"></i>
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-info btn-outline btn-circle btn-lg m-r-5 modifier"
                                                        style="background-color: var(--gs-primary);"
                                                        data-swal-template="#printReleve{{ $i }}">
                                                        <i class="ti-printer" style="color: var(--gs-text-primary);"></i>
                                                    </button>
                                                    <template id="info-template-{{ $i }}">
                                                        <swal-title>
                                                            Info de l'étudiant
                                                        </swal-title>
                                                        <swal-html>
                                                            <form class="form-material"
                                                                style="display: block; overflow-x: hidden;" 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="{{ $etudiantInfo->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"
                                                                            value="{{ $etudiantInfo->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"
                                                                            value="{{ $etudiantInfo->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">Date de
                                                                        naissance:</label>
                                                                    <div class="col-sm-5">
                                                                        <input required type="text" id="birth"
                                                                            name="birth" class="form-control fs-5"
                                                                            placeholder="Birth" readonly
                                                                            value="{{ $etudiantInfo->date_nais }}">
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <label class="col-sm-5 mt-2 text-end fs-5"
                                                                        style="font-weight: bold;"
                                                                        for="LieuNaissance">Lieu de
                                                                        naissance:</label>
                                                                    <div class="col-sm-5">
                                                                        <input required type="text"
                                                                            class="form-control fs-5"
                                                                            placeholder="birthplace" id="birthplace"
                                                                            name="birthplace" readonly
                                                                            value="{{ $etudiantInfo->lieu_nais }}">
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <label class="col-sm-5 mt-2 text-end fs-5"
                                                                        for="DValidation"
                                                                        class=" col-form-label fw-bold">Date de
                                                                        validation:</label>
                                                                    <div class="col-lg-6 col-12  input-modal">
                                                                        <input required type="text"
                                                                            class="form-control fs-5"
                                                                            placeholder="validation_date"
                                                                            id="validation_date" name="validation_date"
                                                                            value="{{ $etudiantInfo->dateValidation }}"
                                                                            readonly>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <label class="col-sm-5 mt-2 text-end fs-5"
                                                                        for="Nationalité"
                                                                        class=" col-form-label fw-bold">Nationalité:</label>
                                                                    <div class="col-lg-6 col-12 input-modal">
                                                                        <input type="text" class="form-control fs-5"
                                                                            id="Nationality" name="nationality"
                                                                            value="{{ $etudiantInfo->nationalite }}"
                                                                            readonly>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <label class="col-sm-5 mt-2 text-end fs-5"
                                                                        for="Etablissement"
                                                                        class=" col-form-label fw-bold">Status:</label>
                                                                    <div class="col-lg-6 col-12 input-modal">
                                                                        <input type="text" class="form-control fs-5"
                                                                            id="status" name="status" readonly
                                                                            value="{{ $etudiantInfo->statut }}">
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </swal-html>
                                                        <swal-param name="backdrop" value="rgba(0,0,200,0.4)" />
                                                        <swal-button type="confirm" color="#484848">
                                                            Fermer
                                                        </swal-button>
                                                        <swal-param name="allowEscapeKey" value="true" />
                                                        <swal-param name="customClass" value='{ "popup": "my-popup" }' />
                                                    </template>

                                                    <template id="printReleve{{ $i }}">
                                                        <swal-title>
                                                            Relevé {{ $etudiantInfo->matricule }}
                                                        </swal-title>
                                                        <swal-html>
                                                            <h4>Étape 1</h4>
                                                            <form id="formPart1" action="#" method="post"
                                                                class="tab-wizard wizard-circle"
                                                                style="display: block; overflow-x: hidden; overflow-y: hidden;">
                                                                <section>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end"><label
                                                                                        for="format_imp"
                                                                                        style="font-weight: bold;">
                                                                                        Format du relevé: </label>
                                                                                </div>
                                                                                <div class="col-7">
                                                                                    <select class="form-select required"
                                                                                        id="format_imp" name="format_imp"
                                                                                        onchange="valider(this);">
                                                                                        <option value>Selectionner un format
                                                                                            de relevé</option>
                                                                                        <option value="1">Annuel
                                                                                        </option>
                                                                                        <option value="2">Semestriel
                                                                                        </option>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start m-3"
                                                                        style="display: none">
                                                                        <div class="col-md-7">
                                                                            <div class="row mb-3">
                                                                                <div class="col-4 text-center"><label
                                                                                        for="matricule"
                                                                                        style="font-weight: bold;">
                                                                                        Matricule </label></div>
                                                                                <div class="col-8"><input type="text"
                                                                                        name="matricule" id="matricule"
                                                                                        class="form-control"
                                                                                        placeholder="m1-m2 ou m1;m2;m3..."
                                                                                        value="{{ $etudiantInfo->matricule }}"
                                                                                        readonly oninput="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start m-3"
                                                                        style="display: none">
                                                                        <div class="col-md-7">
                                                                            <div class="row mb-3">
                                                                                <div class="col-4 text-center"><label
                                                                                        for="filiere"
                                                                                        style="font-weight: bold;">
                                                                                        Filière </label></div>
                                                                                <div class="col-8">
                                                                                    <input type="text" name="filiere"
                                                                                        id="filiere"
                                                                                        value="{{ $etudiantInfo->idFiliere }}"
                                                                                        readonly onchange="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start"
                                                                        style="display: none">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end"><label
                                                                                        for="aca_year"
                                                                                        style="font-weight: bold;">
                                                                                        Année Académique: </label>
                                                                                </div>
                                                                                <div class="col-7">
                                                                                    <input type="text" name="aca_year"
                                                                                        id="aca_year"
                                                                                        value={{ Session::get('infos')['anneeAcademique'] }}
                                                                                        onchange="valider(this);" readonly>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start m-3"
                                                                        style="display: none">
                                                                        <div class="col-md-7">
                                                                            <div class="row mb-3">
                                                                                <div class="col-4 text-center"><label
                                                                                        for="niv_etude"
                                                                                        style="font-weight: bold;">
                                                                                        Niveau Relevé </label>
                                                                                </div>
                                                                                <div class="col-8">
                                                                                    <input type="text" name="niv_etude"
                                                                                        id="niv_etude"
                                                                                        value={{ $etudiantInfo->id }}
                                                                                        readonly onchange="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start m-3"
                                                                        style="display: none">
                                                                        <div class="col-md-7">
                                                                            <div class="row mb-3">
                                                                                <div class="col-4 text-center">
                                                                                    <label for="etude_year" id="y_e"
                                                                                        style="font-weight: bold;"> Année
                                                                                        d'étude </label>
                                                                                    <label for="semestre"
                                                                                        style="display:none"
                                                                                        id="s_m"
                                                                                        style="font-weight: bold;">
                                                                                        Semestre </label>
                                                                                </div>
                                                                                <div class="col-8">
                                                                                    <input type="text"
                                                                                        name="etude_year" id="etude_year"
                                                                                        value="{{ $etudiantInfo->annee }}"
                                                                                        readonly onchange="valider(this);">
                                                                                    <input type="text"
                                                                                        style="display:none"
                                                                                        name="semestre" id="semestre"
                                                                                        value="{{ $etudiantInfo->annee * 2 - 1 }}"
                                                                                        readonly onchange="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end">
                                                                                    <label for="fonc_sign1"
                                                                                        style="font-weight: bold;">
                                                                                        Fonction Signature 1:
                                                                                    </label>
                                                                                </div>
                                                                                <div class="col-7">
                                                                                    <select class="form-select"
                                                                                        name="fonc_sign1" id="fonc_sign1"
                                                                                        onchange="valider(this);">
                                                                                        <option value=""> Choisir une
                                                                                            fonction...</option>
                                                                                        @foreach ($fonctions as $fonction)
                                                                                            <option
                                                                                                value="{{ $fonction->nomFonction }}">
                                                                                                {{ $fonction->nomFonction }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end">
                                                                                    <label for="nom_sign1"
                                                                                        style="font-weight: bold;">
                                                                                        Nom Signature 1:
                                                                                    </label>
                                                                                </div>
                                                                                <div class="col-7">
                                                                                    <select class="form-select"
                                                                                        name="nom_sign1" id="nom_sign1"
                                                                                        onchange="valider(this);">
                                                                                        <option value="">Ce champ est
                                                                                            optionnel
                                                                                            (Signatuire à gauche du relevé)
                                                                                        </option>
                                                                                        @foreach ($nomSignatures as $nomSignature)
                                                                                            <option
                                                                                                value="{{ $nomSignature->sigleGrade }} {{ $nomSignature->prenom }} {{ $nomSignature->nom }}">
                                                                                                {{ $nomSignature->sigleGrade }}
                                                                                                {{ $nomSignature->prenom }}
                                                                                                {{ $nomSignature->nom }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end">
                                                                                    <label for="fonc_sign2"
                                                                                        style="font-weight: bold;">
                                                                                        Fonction Signature 2:
                                                                                    </label>
                                                                                </div>
                                                                                <div class="col-7">
                                                                                    <select class="form-select required"
                                                                                        name="fonc_sign2" id="fonc_sign2"
                                                                                        onchange="valider(this);">
                                                                                        <option value="">
                                                                                            Choisir une fonction...
                                                                                        </option>
                                                                                        @foreach ($fonctions as $fonction)
                                                                                            <option
                                                                                                value="{{ $fonction->nomFonction }}">
                                                                                                {{ $fonction->nomFonction }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end">
                                                                                    <label for="nom_sign2"
                                                                                        style="font-weight: bold;">
                                                                                        Nom Signature 2:
                                                                                    </label>
                                                                                </div>
                                                                                <div class="col-7">
                                                                                    <select class="form-select required"
                                                                                        name="nom_sign2" id="nom_sign2"
                                                                                        onchange="valider(this);">
                                                                                        <option value="">
                                                                                            Ce champ est obligatoire
                                                                                        </option>
                                                                                        @foreach ($nomSignatures as $nomSignature)
                                                                                            <option
                                                                                                value="{{ $nomSignature->sigleGrade }} {{ $nomSignature->prenom }} {{ $nomSignature->nom }}">
                                                                                                {{ $nomSignature->sigleGrade }}
                                                                                                {{ $nomSignature->prenom }}
                                                                                                {{ $nomSignature->nom }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </section>
                                                            </form>
                                                            <button type="button"
                                                                class="swal2-confirm swal2-styled swal2-default-outline"
                                                                onclick="validerStep(0, {{ $i }})"
                                                                style="display: inline-block; background-color: rgb(140, 212, 245);">
                                                                Suite
                                                            </button>
                                                            <button type="button" class="swal2-cancel swal2-styled"
                                                                aria-label="" onclick="Swal.close()"
                                                                style="display: inline-block;">
                                                                Annuler
                                                            </button>
                                                        </swal-html>
                                                        <swal-param name="showConfirmButton" value="false" />
                                                    </template>

                                                    <template id="printReleveSuite{{ $i }}">
                                                        <swal-title>
                                                            Imprimer le relevé
                                                        </swal-title>
                                                        <swal-html>
                                                            <h4>Étape 2 (Optionnelle)</h4>
                                                            <form id="formPart2" target="_blank" method="POST"
                                                                action="{{ route('genPDFMode1') }}"
                                                                enctype="multipart/form-data"
                                                                style="display: block; overflow-x: hidden;">
                                                                @csrf
                                                                <!-- Step 2 -->
                                                                <section>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end"><label
                                                                                        for="comp_ue"
                                                                                        style="font-weight: bold;">
                                                                                        Complément UE </label>
                                                                                    <i
                                                                                        class="bulleAide mdi mdi-help-circle-outline">:
                                                                                        <span
                                                                                            class="bulleAide_text">Concerne
                                                                                            uniquement les étudiants
                                                                                            inscrits
                                                                                            directement en L2 ou L3 ou
                                                                                            M2</span>
                                                                                    </i>

                                                                                </div>
                                                                                <div class="col-7"><input type="number"
                                                                                        class="form-control"
                                                                                        id="comp_ue" name="comp_ue"
                                                                                        placeholder="Complèter mécaniquement la validation des UEs...."
                                                                                        oninput="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end"><label
                                                                                        for="credit_cap"
                                                                                        style="font-weight: bold;">
                                                                                        Crédit capitalisé UE
                                                                                        <!--/ L2 & L3 / M2-->
                                                                                    </label>
                                                                                    <i
                                                                                        class="bulleAide mdi mdi-help-circle-outline">:
                                                                                        <span
                                                                                            class="bulleAide_text">Concerne
                                                                                            uniquement les étudiants
                                                                                            inscrits
                                                                                            directement en L2 ou L3 ou
                                                                                            M2</span>
                                                                                    </i>
                                                                                </div>
                                                                                <div class="col-7"><input type="number"
                                                                                        class="form-control"
                                                                                        id="credit_cap" name="credit_cap"
                                                                                        placeholder="Crédit capitalisé pour les années antérieures...."
                                                                                        oninput="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row justify-content-center text-start">
                                                                        <div>
                                                                            <div class="row mb-3">
                                                                                <div class="col-5 text-end"><label
                                                                                        for="ue_restant"
                                                                                        style="font-weight: bold;"> UE
                                                                                        restant à
                                                                                        valider:
                                                                                        <!--/ L2 & L3 / M2-->
                                                                                    </label>
                                                                                    <i
                                                                                        class="bulleAide mdi mdi-help-circle-outline">:
                                                                                        <span
                                                                                            class="bulleAide_text">Concerne
                                                                                            uniquement les étudiants
                                                                                            inscrits
                                                                                            directement en L2 ou L3 ou
                                                                                            M2</span>
                                                                                    </i>
                                                                                </div>
                                                                                <div class="col-7"><input type="number"
                                                                                        class="form-control"
                                                                                        id="ue_restant" name="ue_restant"
                                                                                        placeholder="Le nombre total d'UEs restants à valider...."
                                                                                        oninput="valider(this);">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </section>
                                                            </form>
                                                            <button type="submit"
                                                                class="swal2-confirm swal2-styled swal2-default-outline"
                                                                onclick="validerStep(1, {{ $i }})"
                                                                style="display: inline-block; background-color: #4ff067;">Imprimer
                                                            </button>
                                                            <button type="button" class="swal2-cancel swal2-styled"
                                                                aria-label="" onclick="Swal.close()"
                                                                style="display: inline-block;">Annuler
                                                            </button>
                                                        </swal-html>
                                                        <swal-param name="showConfirmButton" value="false" />
                                                    </template>

                                                </td>
                                            </tr>
                                            @php
                                                $i++;
                                            @endphp
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>#</th>
                                            <th>Matricule</th>
                                            <th>Nom</th>
                                            <th>Prénoms</th>
                                            <th>Date Naissance</th>
                                            <th>Lieu Naissance</th>
                                            <th>Statut</th>
                                            <th>Filière</th>
                                            <th>Sexe</th>
                                            <th>Nationalité</th>
                                            <th>Niveau</th>
                                            <th>Date Validation</th>
                                            <th class="js-not-exportable">Actions</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card card-body" style="background-color: transparent;">
                        <div class="text-center">
                            <div class="alert customize-alert alert-dismissible text-primary border border-primary fade show"
                                role="alert" style="background-color: white;">
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                                <div class="d-flex align-items-center font-weight-medium">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-info text-primary feather-sm me-2 flex-shrink-0">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="16" x2="12" y2="12"></line>
                                        <line x1="12" y1="8" x2="12" y2="8"></line>
                                    </svg>
                                    <span class="text-dark">
                                        Cette page vous permet de consulter la liste des étudiants du
                                        système ayant validé leur inscription ou pas.
                                        Vous pouvez les classez par nom, prénom, date de validation...
                                    </span>
                                </div>
                                <a class="excel-list" href="{{ route('genererListeEtudiants') }}">
                                    <button type="button"
                                        class="swalGenList btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto"
                                        style="background: var(--gs-primary); color: var(--gs-text-primary);">
                                        <i class="fas fa-download"></i>&nbsp; Générer la liste
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('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('assets/js/pages/datatable/datatable-basic.init.js') }}"></script> --}}
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('assets/js/pages/datatable/datatable-advanced.init.js') }}"></script>

    <!--Sweet alert de la liste d'étudiants-->
    <script>
        var f1 = 0;
        Swal.bindClickHandler();

        $(".swalGenList").click(function() {
            Swal.fire({
                title: 'Downloading...',
                timer: 2000,
                timerProgressBar: true,
                text: 'La liste est en cours de génération. Vérifiez votre dossier de téléchargement!',
                icon: 'info',
                showConfirmButton: false,
                //confirmButtonColor: '#8cd4f5',
                backdrop: `rgba(0,0,200,0.4)`
            });
        });

        // $('#file_export').DataTable({
        //     dom: 'Bfltip',//frtip
        //     buttons: [
        //         'excel', 'pdf', 'print'
        //     ]
        // });
        // $('.buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-info mr-1');

        let studentsList =
            initDT({
                table: "#file_export",
                cLang: {
                    name: "étudiant",
                    plural: "étudiants",
                    gender: "M",
                    lang: "fr"
                },
                tbTitle: "Liste des étudiants"
            });

        function validerStep(index, num) {
            let valid = true;
            let x = document.getElementsByClassName("required");
            for (let i = 0; i < x.length; i++) {
                if (!x[i].value.length) {
                    if (valid) {
                        valid = false;
                    }
                    x[i].classList.remove("is-valid");
                    x[i].classList.add("is-invalid");
                } else {
                    x[i].classList.remove("is-invalid")
                    x[i].classList.add("is-valid")
                }
            }
            if (valid && !index) {
                f1 = document.getElementById("formPart1");
                document.getElementsByClassName("swal2-confirm")[index].setAttribute("data-swal-template",
                    "#printReleveSuite" +
                    num);
            }

            if (valid && index) {
                f2 = document.getElementById("formPart2");
                f2.append(f1.children[0]);
                f2.submit();
                f1 = 0;
                f2 = 0;
                Swal.close();
                Swal.fire({
                    title: 'Impression',
                    text: 'réalisée avec succès. Cliquer sur OK pour continuer...',
                    icon: 'success',
                    confirmButtonColor: '#8cd4f5',
                    backdrop: `rgba(0,0,200,0.4)`
                })
            }
            return valid;
        }

        function valider(champ) {
            if (champ.value.length) {
                champ.classList.remove("is-invalid")
                champ.classList.add("is-valid")
            } else {
                champ.classList.remove("is-valid")
                champ.classList.add("is-invalid")
            }
        }
    </script>
@endsection