@extends('layout.template')
@section('intitule')
    <h5 class="font-weight-medium text-uppercase mb-0">LISTE DES ÉTUDIANTS</h5>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Liste des étudiants</li>
@endsection

@section('styles')
    <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')
    <div class="row justify-content-center mt-4" style="min-height: calc(85vh - 60px)">
        <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('operation.exportExcel') }}">
                            <button type="button" class="btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto"
                                style="background: {{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_ETAB1'] }}; color: {{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_TEXT1'] }} !important;">
                                <i class="fas fa-download"></i>&nbsp; Générer la liste
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <table id="file_export" cellpadding="5px" class="table table-striped table-bordered display"
                        role="grid" 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>
                                                        @foreach ($data['studentsData'] as $studentData)
                                <tr>
                                    <td>{{ $counter }}</td>
                                    <td>{{ $studentData->matricule }}</td>
                                    <td>{{ $studentData->nom }}</td>
                                    <td>{{ $studentData->prenom }}</td>
                                    <td>{{ $studentData->date_nais }}</td>
                                    <td>{{ $studentData->lieu_nais }}</td>
                                    <td>{{ $studentData->statut }}</td>
                                    <td>{{ $studentData->sigleFilieres . '' . $studentData->annee }}</td>
                                    <td>{{ $studentData->sexe }}</td>
                                    <td>{{ $studentData->nationalite }}</td>
                                    <td>{{ $studentData->niveauFormation }}</td>
                                    <td>{{ $studentData->dateValidation }}</td>
                                    <td>
                                        <button type="button" class="btn btn-outline btn-circle btn-lg m-r-5"
                                            data-swal-template="#info-template-{{ $counter }}">
                                            <i class="ti-pencil-alt"></i>
                                        </button>
                                        <template id="info-template-{{ $counter }}">
                                            <swal-title>
                                                Info de l'étudiant
                                            </swal-title>
                                            <swal-html>
                                                <form class="form-material" style="display: block; 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="{{ $studentData->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="{{ $studentData->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="{{ $studentData->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="{{ $studentData->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="{{ $studentData->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="{{ $studentData->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="{{ $studentData->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="{{ $studentData->statut }}">
                                                        </div>
                                                    </div>
                                                </form>
                                            </swal-html>
                                            <swal-button type="confirm" color="#484848">
                                                Fermer
                                            </swal-button>
                                            <swal-param name="allowEscapeKey" value="true" />
                                            <swal-param name="customClass" value='{ "popup": "my-popup" }' />
                                        </template>
                                    </td>
                                </tr>

                                                            @endforeach
                        </tbody>

                    </table>
                </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('operation.exportExcel') }}">
                            <button type="button" class="btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto"
                                style="background: {{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_ETAB1'] }}; color: {{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_TEXT1'] }} !important;">
                                <i class="fas fa-download"></i>&nbsp; Générer la liste
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <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.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('dist/js/pages/datatable/datatable-advanced.init.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.29/dist/sweetalert2.all.min.js"></script>
    <script>
        let studentsList =
            initDT({
                table: "#file_export",
                cLang: {
                    name: "étudiant",
                    plural: "étudiants",
                    gender: "M",
                    lang: "fr"
                },
                tbTitle: "Liste des étudiants"
            });

        $(() => {
            Swal.bindClickHandler();
        })

        $(".swalGenList").click(function() {
            Swal.fire({
                title: 'Downloading...',
                timer: 5000,
                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,100,0.4)`
            });
        });
    </script>
@endsection