@extends('layouts.base',
    $breadcrumb = [
        "title" => "LISTE DES ÉTUDIANTS / ".session('sigle'),
        "nav" => [ // "text to show" => "link",
            "Dashboard" => route('home'), // Current page is last item
            "Liste des étudiants" => ('students.list'),
        ],
    ]
)

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

@section('css')
    <!-- DataTables -->
    <link href=" {{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
    <link href=" {{ asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css')}}" rel="stylesheet">
    <!-- Select2 -->
    <link rel="stylesheet" type="text/css" href=" {{ asset('assets/libs/select2/dist/css/select2.min.css') }} ">

    <style>
        p {
            white-space: initial;
        }

        .table-responsive{
            overflow-x: auto;
        }

        .table-responsive tbody tr td {
            font-size: 0.8em;
            font-weight: 400;
        }

        table.table-bordered.dataTable th {
            font-size: 0.8em;
            font-weight: bold;
        }

        .swal2-popup .swal2-styled.swal2-confirm {
            color: var(--gs-text-primary);
            background-color: var(--gs-primary);
        }
    </style>
@endsection

@section('content')
    {{-- alert with content --}}
    @include('partials.alert')

    <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">
                            <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i>
                            <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 classer par nom, prénom,date de validation...
                            </span>
                        </div>
                        <a class="excel-list" href="{{ route('excel.generate') }}">
                            <button type="button" class="btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto" style="color:  {{ session('couleurs.textColor2') }}">
                                <i class="fas fa-download"></i>&nbsp; Générer la liste
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Liste des étudiants </h4> <!-- TODO: Get university name -->
                    <h6 class="card-subtitle">Liste complète des étudiants ayant validés ou non leur inscription</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive fs-5">
                        <table id="students-list" class="table table-striped table-bordered display w-100">
                            <thead>
                                <tr class="bg-dark text-white">
                                    <th colspan="13" class="text-center">Liste des étudiants </th><!-- TODO: Get university name -->
                                </tr>
                                <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>Sexe</th>
                                    <th>Nationalité</th>
                                    <th>Niveau</th>
                                    <th>Date validation</th>
                                    <th class="js-not-exportable">Actions</th>
                                </tr>
                            </thead>

                            <tbody>
                                @if (count($etudiants))
                                    @foreach ($etudiants as $i => $etudiant)
                                        <tr style="text-align:center">
                                            <td> {{ $i + 1 }}</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>{{ $status[$etudiant['statut']][0]['statut'] }}</td>
                                            <td>{{ $etudiant['sigleFilieres'] }}</td>
                                            <td>{{ $etudiant['sexe'] }}</td>
                                            <td>{{ $etudiant['nationalite'] }}</td>
                                            {{-- <td>{{ findNiveau($etudiant['niveauFormation']).' '.$etudiant['annee'] }}</td> --}}
                                            <td>{{ session('formationBase', 'Niveau inconnu') . ' ' . $etudiant['annee'] }} </td>

                                            <td>{{ dateFormat($etudiant['dateValidation']) }}</td>
                                            <td>
                                                <button
                                                    type="button"
                                                    class="btn btn-theme btn-outline btn-circle btn-lg m-r-5 col-6"
                                                    data-swal-template="#info-template-{{ $i }}"
                                                    style="color:  {{ session('couleurs.textColor2') }}"
                                                >
                                                    <i class="icon-note"></i>
                                                </button>

                                                <template id="info-template-{{ $i }}">
                                                    {{-- Matricule:
                                                    Nom:
                                                    Prénom:
                                                    Date de naissance:
                                                    Lieu de naissance:
                                                    Date de validation:
                                                    Nationalité:
                                                    Statut:  --}}
                                                    <div class="d-flex justify-content-center text-center">
                                                        <swal-title class="text-start">
                                                            Informations de l'étudiant
                                                        </swal-title>
                                                    </div>
                                                    <swal-html>
                                                        <div class="contact-form create-form">
                                                            <div class="form-wrapper pt-0">
                                                                <form id="contact-form" style="display: block; overflow-x: hidden;" class="mx-2">
                                                                    @csrf
                                                                    <div class="row single-form">
                                                                        <label
                                                                            class="col-sm-5 mt-2 text-end fs-5 form-label"
                                                                            style="font-weight: bold;"
                                                                            for="matricule"
                                                                        >
                                                                            <strong>Matricule:</strong>
                                                                        </label>

                                                                        <div class="col-sm-7">
                                                                            <input
                                                                                required
                                                                                readonly
                                                                                id="matricule"
                                                                                name="matricule"
                                                                                type="text"
                                                                                class="form-control form-control-line fs-5"
                                                                                value="{{$etudiant['matricule']}}"
                                                                            >
                                                                        </div>
                                                                    </div>

                                                                    <div class="row single-form">
                                                                        <label
                                                                            class="col-sm-5 mt-2 text-end fs-5 form-label"
                                                                            style="font-weight: bold;"
                                                                            for="nom">Nom:
                                                                        </label>

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

                                                                    <div class="row single-form">
                                                                        <label
                                                                            class="col-sm-5 mt-2 text-end fs-5 form-label"
                                                                            style="font-weight: bold;"
                                                                            for="birthday"
                                                                        >
                                                                            Date de naissance:
                                                                        </label>

                                                                        <div class="col-sm-7">
                                                                            <input
                                                                                required
                                                                                readonly
                                                                                id="birthday"
                                                                                name="birthday"
                                                                                type="text"
                                                                                class="form-control fs-5"
                                                                                placeholder=""
                                                                                value="{{$etudiant['date_nais']}}"
                                                                            >
                                                                        </div>

                                                                    </div>

                                                                    <div class="row single-form">
                                                                        <label
                                                                            class="col-sm-5 mt-2 text-end fs-5 form-label"
                                                                            style="font-weight: bold;"
                                                                            for="validateDate"
                                                                        >
                                                                            Date de validation:
                                                                        </label>

                                                                        <div class="col-sm-7">
                                                                            <input
                                                                                required
                                                                                readonly
                                                                                id="validateDate"
                                                                                name="validateDate"
                                                                                type="text"
                                                                                class="form-control fs-5"
                                                                                placeholder=""
                                                                                value="{{ dateFormat($etudiant['dateValidation']) }}"
                                                                            >
                                                                        </div>

                                                                    </div>

                                                                    <div class="row single-form">
                                                                        <label
                                                                            class="col-sm-5 mt-2 text-end fs-5 form-label"
                                                                            style="font-weight: bold;"
                                                                            for="nationalite"
                                                                        >
                                                                            Nationalité:
                                                                        </label>

                                                                        <div class="col-sm-7">
                                                                            <input
                                                                                required
                                                                                readonly
                                                                                id="nationalite"
                                                                                name="nationalite"
                                                                                type="text"
                                                                                class="form-control fs-5"
                                                                                placeholder=""
                                                                                value="{{$etudiant['nationalite']}}"
                                                                            >
                                                                        </div>

                                                                    </div>

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

                                                                        <div class="col-sm-7  input-modal">
                                                                            <select class="form-control custom-select2 fs-5" name="role">
                                                                                <option value='{{ $etudiant['statut'] }}' selected>
                                                                                    {{$status[$etudiant['statut']][0]['statut']}}
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </swal-html>

                                                    {{-- <swal-button type="confirm">Sauvegarder</swal-button> --}}
                                                    {{-- <swal-button type="cancel">Fermer</swal-button> --}}

                                                    <swal-param name="allowEscapeKey" value="true" />
                                                    <swal-param name="customClass" value='{ "popup": "my-popup", "title": "my-title text-start"  }'/>
                                                    {{-- <swal-param name="customClass" value='{ "title": "my-title text-start" }'/> --}}
                                                </template>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                            <tfoot class="d-none">
                                <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>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 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">
                            <i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i>
                            <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 classer par nom, prénom,date de validation...
                            </span>
                        </div>
                        <a class="excel-list" href="{{ route('excel.generate') }}">
                            <button type="button" class="btn waves-effect waves-light btn-theme fs-6 mt-2 mx-auto" style="color:  {{ session('couleurs.textColor2') }}">
                                <i class="fas fa-download"></i>&nbsp; Générer la liste
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- datatables.net -->
    <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/extra-libs/datatables-rowsgroup/dataTables.rowsGroup.js')}}"></script> --}}

    <!-- datatable export functionality only -->
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.flash.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/jszip-3.1.3.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/pdfmake-0.1.32.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/vfs_fonts-0.1.32.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.html5.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.print.min.js')}}"></script>

    <!-- moment JS -->
    <script src="{{asset('dist/js/moment-with-locales.min.js')}}"></script>


    <script type="text/javascript">
        $(function(){
            $.fn.dataTable.ext.errMode = "throw";

            Swal.bindClickHandler();

            customOption =  {};

            let studentsList = initDT({
                table: "#students-list",
                cLang: {
                    name: "étudiant",
                    plural: "étudiants",
                    gender: "M",
                    lang: "fr"
                },
                cOptions: {
                    retrieve: true,
                    ...customOption,
                }
            });

            getLocation()

            $('.excel-list').on('click', function (e) {
                // e.preventDefault();

                // $('button.dt-button.buttons-excel').click();

                swalWithBootstrapButtons.fire(
                    'Fichier excel téléchargé avec succès!',
                    'Consultez votre liste de téléchargement.',
                    'success'
                )
            })
        }());

        function getLocation() {
            console.log('ok11')
            if (navigator.geolocation) {
                console.log('ok22')
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.")
            }
        }

        function showPosition(position) {
            console.log('ok3')
            console.log('localisation: '+ position.coords.longitude+ ',  '+position.coords.latitude)
            $('.longitude, #longitude_input').val(position.coords.longitude)
            $('.latitude, #latitude_input').val(position.coords.latitude)
            alert(position.coords.longitude+'  '+position.coords.latitude)
        }
    </script>
@endsection
