@extends('layouts.template')
@section('nom', 'LISTE DES ETUDIANTS')
@section('name', 'Liste des étudiants')
@section('bottom-header')
    @include('partials.bottom-header')
@endsection

@section('css')
    <link href=" {{ asset('assets/sweetalert2.min.css') }} " rel="stylesheet">

    <style>
        .my-popup {
            width: 700px !important;
        }

        .my-title {
            color: #ff7676 !important;
        }
    </style>
@endsection
@section('contenu')
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">


                    <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 fs-4 ">
                                        <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('GenererExcel') }}">
                                        <button type="button" class="btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto" style="background:  {{ session('etablissementCouleur1')}};  color: {{ session('couleurText1')}};">
                                            <i class="fas fa-download"></i>&nbsp; Générer la liste
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card mt-5">

                                <h2 class="">Export de données</h2>
                                <h4 class="card-subtitle"> Exportez la liste en format Excel, Pdf, CSV ou imprimez directement</h4>

                                <div class="card-body">

                                    <div class="table-responsive fs-5">
                                        <table id="table-list"
                                            class="table table-striped table-bordered display"style="width: 150%">
                                            <thead style="background-color: {{ session('etablissementCouleur1')}};">
                                                <tr style="text-align:center;  background-color: {{ session('etablissementCouleur1')}}; color: {{ session('couleurText1')}};">

                                                    <th>#</th>
                                                    <th>Matricule</th>
                                                    <th>Nom</th>
                                                    <th>Prénom</th>
                                                    <th>Date Naissance</th>
                                                    <th>lieu Naissance</th>
                                                    <th>Statut</th>

                                                    <th>Filière</th>
                                                    <th>idFilière</th>
                                                    <th>Sexe</th>
                                                    <th>Nationalité</th>
                                                    <th>Niveau</th>
                                                    <th>Date inscription</th>
                                                    <th>Date validation</th>
                                                    <th class="js-not-exportable">Actions</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                @php
                                                    $i = 0;
                                                @endphp

                                                @foreach ($etudiants as $etudiant)
                                                    <tr style="text-align:center">

                                                        <td> {{ $loop->iteration }}</td>
                                                        <td scope="row"> {{ $etudiant->matricule }}</td>
                                                        <td>{{ $etudiant->nom }}</td>
                                                        <td>{{ $etudiant->prenom }}</td>
                                                        <td>{{ $etudiant->date_nais }}</td>
                                                        <td>{{ $etudiant->lieu_nais }}</td>
                                                        <td>{{ $etudiant->statut }}</td>
                                                        <td>{{ $etudiant->sigleFilieres }} {{ $etudiant->annee }}</td>

                                                        <td>{{ $etudiant->idFiliere }}</td>
                                                        <td>{{ $etudiant->sexe }}</td>
                                                        <td>{{ $etudiant->nationalite }}</td>
                                                        <td>{{ $etudiant->niveauFormation }}</td>
                                                        <td>{{ $etudiant->dateInscription }}</td>
                                                        <td>{{ $etudiant->dateValidation }}</td>
                                                        <td class="d-flex" style="font-size: 20px">

                                                            {{-- <div class="row ms-1" style="width: 100px"> --}}
                                                            <a
                                                                href="{{ route('modifphoto', ['matricule' => $etudiant->matricule]) }}">
                                                                <button type="button"
                                                                    class="btn btn-circle btn-lg m-r-5 col-6" style="background-color: {{ session('etablissementCouleur1')}};">
                                                                    <i class="icon-camera" style=" color: {{ session('couleurText1')}}"></i>
                                                                </button>
                                                            </a>

                                                            <button type="button"
                                                            class="btn btn-circle btn-lg m-r-5 col-6"
                                                            data-swal-template="#info-template-{{ $i }}" style="background-color: {{ session('etablissementCouleur1')}};">
                                                            <i class="ti-pencil-alt" style=" color: {{ session('couleurText1')}}"></i>
                                                        </button>

                                                            <template id="info-template-{{ $i }}">
                                                                <swal-title class="text-start">
                                                                    Info etudiant
                                                                </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="idFiliere">IdFilière:</label>
                                                                            <div class="col-sm-5">
                                                                                <input readonly required type="text"
                                                                                    id="idFiliere" name="idFiliere"
                                                                                    class="form-control fs-5" placeholder=""
                                                                                    value="{{ $etudiant->idFiliere }}"
                                                                                    name="email">
                                                                            </div>

                                                                        </div>
                                                                        <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="{{ $etudiant->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="{{ $etudiant->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="{{ $etudiant->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 Naissance</label>
                                                                            <div class="col-sm-5">
                                                                                <input readonly required type="text"
                                                                                    class="form-control fs-5" placeholder=""
                                                                                    id="DateNaissance" name="date_nais"
                                                                                    value="{{ $etudiant->date_nais }}">
                                                                            </div>

                                                                        </div>



                                                                        <div class="row">
                                                                            <label class="col-sm-5 mt-2 text-end fs-5"
                                                                                style="font-weight: bold;"
                                                                                for="DateValidation">Date
                                                                                Validation</label>
                                                                            <div class="col-sm-5">
                                                                                <input required type="text"
                                                                                    class="form-control fs-5"
                                                                                    placeholder="" id="DateValidation"
                                                                                    name="" readonly
                                                                                    value="{{ $etudiant->dateValidation }}">
                                                                            </div>

                                                                        </div>
                                                                        <div class="row">
                                                                            <label class="col-sm-5 mt-2 text-end fs-5"
                                                                                style="font-weight: bold;"
                                                                                for="Nationalite">Nationalité</label>
                                                                            <div class="col-sm-5">
                                                                                <input required type="text"
                                                                                    class="form-control fs-5"
                                                                                    placeholder="" id="Nationalite"
                                                                                    name="" readonly
                                                                                    value="{{ $etudiant->nationalite }}">
                                                                            </div>

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

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

                                                                            <div class="col-sm-5  input-modal">
                                                                                <select style="border-style: none"
                                                                                    class="form-control fs-5">
                                                                                    <option value='1' selected>
                                                                                        {{ $etudiant->statut }}
                                                                                    </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"  }' />
                                                            </template>
                                                        </td>
                                                    </tr>
                                                    @php
                                                        $i++;
                                                    @endphp
                                                @endforeach


                                            </tbody>

                                            <tfoot>
                                                <tr style="text-align:center">

                                                    <th>#</th>
                                                    <th>Matricule</th>
                                                    <th>Nom</th>
                                                    <th>Prénom</th>
                                                    <th>Date Naissance</th>
                                                    <th>lieu Naissance</th>
                                                    <th>Statut</th>
                                                    <th>Filière</th>

                                                    <th>idFilière</th>
                                                    <th>Sexe</th>
                                                    <th>Nationalité</th>
                                                    <th>Niveau</th>
                                                    <th>Date inscription</th>
                                                    <th>Date validation</th>
                                                    <th class="js-not-exportable" >Actions</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </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 fs-4 ">
                                        <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('GenererExcel') }}">
                                        <button type="button" class="btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto" style="background:  {{ session('etablissementCouleur1')}};  color: {{ session('couleurText1')}};">
                                            <i class="fas fa-download"></i>&nbsp; Générer la liste
                                        </button>
                                    </a>
                                </div>
                            </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('https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js') }} "></script>
    {{-- <script src=" {{ asset('dist/js/pages/datatable/datatable-advanced.init.js') }} "></script> --}}
    <script src=" {{ asset('dist/js/app.min.js') }} "></script>


    <script src=" {{ asset('assets/sweetalert2.all.min.js') }}"></script>
    <script>
        Swal.bindClickHandler();

        // $("#show-profile").on("click", function() {
        //     $("#show-profile").addClass("show");
        // })
    </script>
@endsection