@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" => route('print.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;
        }

        /* Student profil image */
        .profil-content {
            width: 3rem;
            height: 3rem;
            /* object-fit: cover; */
            border-radius: 50% !important;
            /* border: transparent; */
            background: rgb(245, 245, 245);
            border : 1px solid rgb(0 0 0 / 20%);
            background-position: center center;
            background-size: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
@endsection

@section('content')
@php
    $etudiants = $data['etudiants'];
    $etat_carte = $data['etat_carte'];
    $hasCarte = $data['hasCarte'];
    $status = $data['status'];
    $annee_acad = $data['annee_acad'];
@endphp

{{-- 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 correspondant à la sélection de filtre précédente ....
                            <!-- TODO: Custom message from filter selection -->
                        </span>
                    </div>
                </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> <!-- TODO: Custom message from filter selection -->
            </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="15" class="text-center">Liste des étudiants </th><!-- TODO: Get university name -->
                            </tr>
                            <tr style="text-align:center">
                                <th>#</th>
                                <th class="js-not-exportable">Photo</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 inscription</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">
                                        @if ( ( $etat_carte == "ALL" ) ||
                                              ( ($etat_carte != "ALL") &&  ((count($hasCarte) == 0) || count($hasCarte)) )
                                            )
                                            <td> {{ $i + 1 }}</td>
                                            <td>
                                                @if ($etudiant['cheminPhoto'])
                                                    <div class="icon" id="profile">
                                                        <img
                                                            src="{{ getImgPath('PROFIL', $etudiant['cheminPhoto'], 0)}}"
                                                            alt="etudiant"
                                                            class="profil-content"
                                                            onerror="this.onerror=null;this.src='{{ asset('/assets/images/avatar.png') }}';"
                                                        >
                                                    </div>
                                                @else
                                                    <svg
                                                        width="50px"
                                                        height="50px"
                                                        viewBox="0 0 18 18"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                    >
                                                        <path
                                                            fill="#494c4e"
                                                            d="M9 0a9 9 0 0 0-9 9 8.654 8.654 0 0 0 .05.92 9 9 0 0 0 17.9 0A8.654 8.654 0 0 0 18 9a9 9 0 0 0-9-9zm5.42 13.42c-.01 0-.06.08-.07.08a6.975 6.975 0 0 1-10.7 0c-.01 0-.06-.08-.07-.08a.512.512 0 0 1-.09-.27.522.522 0 0 1 .34-.48c.74-.25 1.45-.49 1.65-.54a.16.16 0 0 1 .03-.13.49.49 0 0 1 .43-.36l1.27-.1a2.077 2.077 0 0 0-.19-.79v-.01a2.814 2.814 0 0 0-.45-.78 3.83 3.83 0 0 1-.79-2.38A3.38 3.38 0 0 1 8.88 4h.24a3.38 3.38 0 0 1 3.1 3.58 3.83 3.83 0 0 1-.79 2.38 2.814 2.814 0 0 0-.45.78v.01a2.077 2.077 0 0 0-.19.79l1.27.1a.49.49 0 0 1 .43.36.16.16 0 0 1 .03.13c.2.05.91.29 1.65.54a.49.49 0 0 1 .25.75z"
                                                        />
                                                    </svg>
                                                @endif
                                            </td>
                                            <td scope="row">
                                                {{ $etudiant['matricule'] }}
                                                @if ( isset( $hasCarte[$etudiant['matricule']] ) )
                                                    @if ( mb_strtolower ($hasCarte[$etudiant['matricule']]) == "imprimée")
                                                        <span class='badge rounded-pill fw-bold bg-light-info text-dark'> Carte imprimée </span>
                                                    @else
                                                        <span class='badge rounded-pill fw-bold bg-light-danger text-dark'> Duplicata </span>
                                                    @endif
                                                @endif
                                            </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('niveauFormationFusion')[$etudiant['niveauFormation'] - 1] . ' ' . $etudiant['annee'] }}</td> --}}
                                            <td>{{ session('formationBase', 'Niveau inconnu') . ' ' . $etudiant['annee'] }}</td>
                                            <td>{{ dateFormat($etudiant['dateInscription']) }}</td>
                                            <td>{{ dateFormat($etudiant['dateValidation']) }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <a href="{{ route('print.card', ['matricule' => $etudiant['matricule'], 'annee_acad' => $annee_acad]) }}" target="_blank" style="color:  {{ session('couleurs.textColor2') }}">
                                                        <button
                                                            type="button"
                                                            class="btn btn-theme btn-circle btn-lg d-inline-block me-2"
                                                        >
                                                            <i class="fas fa-print"></i>
                                                        </button>
                                                    </a>
                                                    <a href="{{ route('student-image.view', ["matricule" => $etudiant['matricule']]) }}" target = "_blank" style="color:  {{ session('couleurs.textColor2') }}">
                                                   

                                                        <button
                                                            type="button"
                                                            class="btn btn-theme btn-circle btn-lg d-inline-block"
                                                        >
                                                            <i class="icon-camera"></i>
                                                        </button>
                                                    </a>
                                                </div>
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                        <tfoot class="d-none">
                            <tr style="text-align:center">
                                <th>#</th>
                                <th class="js-not-exportable">Photo</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 inscription</th>
                                <th>Date validation</th>
                                <th class="js-not-exportable">Actions</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </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(){
            $('#sidebarnav > .sidebar-item:nth-child(3)').addClass('selected');

            $.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,
                }
            });

        }());
    </script>
@endsection