@extends('layouts.home')

@section('title','GestStudentElearning | Accueil')

@section('css')
    <style>
        .registration-form textarea {
            border: none;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
            height: 10rem;
            margin-bottom: 30px;
            color: rgba(0,0,0,0.4);
        }

        .d-none {
            display: none;
        }

        .ellipsis {
            /* line-height: 1.6em; */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .ellipsis-line-1 {
            /* line-height: 1.6em; */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 1;
        }

        .wrap-text {
            height: 8rem;
            overflow-y: hidden;
        }

        .alert-container {
            margin-top: 5rem;
            position: initial;
        }

        .bootstrap-select > .dropdown-toggle {
            overflow: hidden;
        }

        .load-panel{
            content: ' ';
            position: absolute;
            /* top: 0.5em; */
            left: 50%;
            margin-left: -1em;
            width: 3em;
            height: 3em;
            border: 2px solid var(--gs-primary-color);
            border-right-color: transparent;
            border-radius: 50%;
        }

        .btn-disabled {
            color: #fff;
            background-color: #8898aa;
            border-color: #8898aa;
            opacity: 0.5;
            pointer-events: none;
        }
    </style>
@endsection

@section('content')

    <!--
    =============================================
        Theme Main Banner
    ==============================================
    -->
    <div id="theme-main-banner" class="banner-one">
        <div data-src="{{ asset('gestel/images/home/slide-1.jpeg')}}">
            <div class="camera_caption">
                <div class="container text-center">
                    <h3 class="wow fadeInUp animated">GestStudent Elearning ... </h3>
                    <h1 class="wow fadeInUp animated" data-wow-delay="0.2s">la plateforme dédiée <span class="s-color"> aux cours en ligne </span></h1>
                    <!-- <a href="#" class="tran3s wow fadeInLeft animated banner-button" data-wow-delay="0.3s">Commencer !</a> -->
                    <a href="{{route('auth')}}" class="tran3s wow fadeInRight animated button-one banner-button hvr-trim" data-wow-delay="0.3s">Commencer !</a>
                </div> <!-- /.container -->
            </div> <!-- /.camera_caption -->
        </div>
        <div data-src="{{ asset('gestel/images/home/slide-2.jpeg')}}">
            <div class="camera_caption">
                <div class="container text-center">
                    <h3 class="wow fadeInUp animated">GestStudent Elearning ... </h3>
                    <h1 class="wow fadeInUp animated" data-wow-delay="0.2s">conçue pour <span class="s-color">l'apprentissage en ligne</span></h1>
                    <!-- <a href="#" class="tran3s wow fadeInLeft animated banner-button" data-wow-delay="0.3s">Commencer !</a> -->
                    <a href="{{route('auth')}}" class="tran3s wow fadeInRight animated button-one banner-button hvr-trim" data-wow-delay="0.3s">Débuter !</a>
                </div> <!-- /.container -->
            </div> <!-- /.camera_caption -->
        </div>
    </div> <!-- /#theme-main-banner -->



    <!--
    =============================================
        Find Course Form
    ==============================================
    -->
    <div class="find-course">
        <div class="opacity color-one">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-xs-6">
                    </div>
                </div>
                <!-- Search an option from department, field and mention -->
                <form action="" method="get" id="field-filters">
                    @csrf
                    <div class="row">
                        <div class="col-md-3 col-xs-6">
                            <div class="single-input">
                                <select class="selectpicker" name="departement" data-mdb-option-height="100">
                                    <option value="all">Tous les départements</option>
                                    @foreach ($departements as $i => $dp)
                                        <option value="{{$dp['idDepartement']}}">{{$dp['desrdept']}}</option>
                                    @endforeach
                                </select>
                            </div> <!-- /.single-input -->
                        </div> <!-- /.col -->
                        <div class="col-md-3 col-xs-6">
                            <div class="single-input">
                                <select class="selectpicker" name="domaine" onchange="updateMention(this);">
                                    <option value="all">Tous les domaines</option>
                                    @foreach ($domaines as $dm)
                                        <option value="{{$dm['idDomaine']}}">{{$dm['sigleDomaine']}}</option>
                                    @endforeach
                                </select>
                            </div> <!-- /.single-input -->
                        </div> <!-- /.col -->
                        <div class="col-md-4 col-sm-8 col-xs-12">
                            <div class="single-input">
                                <select class="selectpicker" name="mention">
                                    <option value="all">Toutes les mentions</option>
                                    @foreach ($domaines as $dm)
                                        @if (!empty($mentions[$dm['idDomaine']]))
                                            <optgroup label="{{$dm['sigleDomaine']}}">
                                                @foreach ($mentions[$dm['idDomaine']] as $mnt)
                                                    <option value="{{$mnt['idMention']}}">{{$mnt['sigleMention']}}</option>
                                                @endforeach
                                            </optgroup>
                                        @endif
                                    @endforeach
                                </select>
                            </div> <!-- /.single-input -->
                        </div> <!-- /.col -->
                        <div class="col-md-2 col-sm-4 col-xs-12"><button class="action-button tran3s">Rechercher <i class="fa fa-search" aria-hidden="true"></i></button></div>
                    </div> <!-- /.row -->
                </form>
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.find-course -->


    <!-- Alert with content -->
    @if(session()->has('success'))
        <div class="container alert-container">
            <div class="alert alert-{{session('success')?'success':'danger'}}">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <i class="fa fa-{{session('success')?'check':'times'}}-circle"></i> {{session('msg')}}
            </div>
        </div>
    @endisset

    <!--
    =============================================
        Find Course Block
    ==============================================
    -->
    <div class="find-course-block">
        <div class="container">
            <div class="theme-title text-center">
                <h6>Formation professionnelle</h6>
                <h2>Des métiers d'avenir dans plusieurs filières</h2>
            </div> <!-- /.theme-title -->
            <div class="clearfix">
                @if ($filieres)
                    @foreach ($filieres as $i => $filiere)
                        <div class="single-block float-left tran3s">
                            <i class="{{$class[$i%6]}}"></i>
                            <h5 style="height: 4.5rem;" class="ellipsis">{{$filiere['intituleFilieres']}}</h5>
                            <p style="height:4em;" class="ellipsis">
                                @isset($filiere['conditionInscription'])
                                    {!! $filiere['conditionInscription'] !!}
                                @else
                                    Aucune description définie pour cette filière de formation professionnelle
                                @endisset
                            </p>
                            <!-- Login page -->
                            <a href="{{route('auth')}}" class="tran3s"><i class="flaticon-arrows"></i></a>
                        </div> <!-- /.single-block -->
                    @endforeach
                @else
                    <div class="row" style="display: flex;">
                        <div class="single-block float-left tran3s col-12" style="margin: auto;">
                            <i class="flaticon-bookmark"></i>
                            <h5 style="height:6rem;" class="ellipsis">Aucune donnée ne correspond à votre recherche</h5>
                            <p style="height:10rem;" class="ellipsis">...</p>
                            <!-- Login page -->
                        </div> <!-- /.single-block -->
                    </div>
                @endif
            </div>
        </div> <!-- /.container -->
    </div> <!-- /.find-course-block -->


    <!--
    =============================================
        Registration Banner
    ==============================================
    -->
    <div class="registration-banner">
        <div class="opacity">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-xs-12">
                        <div class="registration-form">
                            <form action="{{route('sendEmail')}}" method="POST" autocomplete="off">
                                @csrf
                                <input type="hidden" name="sendee" value="IITECH">
                                <h2>Nous contacter </h2>
                                <p>Remplissez ce formulaire pour entrer en contact avec nous.</p>
                                <div class="form-wrapper">
                                    <h6>Nom & prénoms</h6>
                                    <input type="text" placeholder="Ex : Codjo BC" name="name" value="{{old('name') ? old('name') : ''}}" required>
                                    <h6>Email</h6>
                                    <input type="email" placeholder="votremail@gmail.com" name="email" value="{{old('email') ? old('email') : ''}}" required>
                                    <h6>Contact</h6>
                                    <input type="text" placeholder="+229 95959595" name="phone" value="{{old('phone') ? old('phone') : ''}}">
                                    <h6>Message</h6>
                                    <textarea placeholder="Votre message" name="message" required>{{old('message') ? old('message') : ''}}</textarea>
                                    <button class="tran3s hvr-trim">Envoyer</button>
                                </div> <!-- /.form-wrapper -->
                            </form>
                        </div> <!-- /.registration-form -->
                    </div>

                    <div class="col-md-7 col-xs-12">
                        <div class="text-wrapper">
                            <!-- Nombre total d'étudiants de l'école depuis la création de l'école-->
                            {{-- <h2>Plus de<br> <span class="p-color">{{ $stats['nb_etu'] }} étudiants</span> utilisent GestStudent Elearning</h2> --}}
                            <h2>Cette année, plus de <br> <span class="p-color">{{ $stats['nb_etu'] }} étudiants</span>  utilisent GestStudent Elearning chez nous</h2>

                            <ul class="clearfix">
                                <li class="float-left">
                                    <!-- Nombre d'étudiants connectés pour l'année en cours-->
                                    <div class="single-box">
                                        <h3>
                                            <span class="counter">{{$stats['nb_etu']}}</span>
                                            {{-- M --}}
                                        </h3>
                                        <p>Étudiants</p>
                                    </div> <!-- /.single-box -->
                                </li>
                                <li class="float-left">
                                    <!-- Nombre de professeurs connectés pour l'année en cours-->
                                    <div class="single-box">
                                        <h3><span class="counter">{{$stats['nb_enseignant']}}</span></h3>
                                        <p>Professeurs</p>
                                    </div> <!-- /.single-box -->
                                </li>
                                <li class="float-left">
                                    <!-- Nombre de cours à dispenser pour l'année en cours-->
                                    <div class="single-box">
                                        <h3><span class="counter">{{$stats['nb_ecs']}}</span></h3>
                                        <p>Cours dispensés</p>
                                    </div> <!-- /.single-box -->
                                </li>
                            </ul>
                        </div>
                    </div>
                </div> <!-- /.row -->
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.registration-banner -->


    <!--
    =============================================
        Popular Course
    ==============================================
    -->
    <div class="popular-course">
        <div class="container">
            <div class="theme-title">
                <h6>Cours dispensés</h6>
                <h2>Quelques cours</h2>
                <!-- Go to login page -->
                <a href="{{route('auth')}}" class="tran3s">Voir +</a>
            </div> <!-- /.theme-title -->

            <div class="row">
                <!-- Choix aléatoire de 3 cours -->
                @foreach ($ecs as $k => $ec)
                    <div class="col-md-4 col-xs-6 wow fadeInLeft {{($k == 3) ? 'hidden-sm' : ''}}">
                        <div class="single-course">
                            <div class="image-box"><img src="{{ asset('gestel/images/course/'.($k +1).'.jpeg')}}" alt="" style="height: 24rem;"></div>
                            <div class="text">
                                {{-- {{ asset('gestel/images/course/4.jpg')}} --}}
                                <div class="image">
                                    <img src="{{ $ec['prof']['pp_url'] }}" alt="X" onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';">
                                </div>
                                <div class="name clearfix">
                                    <!-- Nom de l'enseignant -->
                                    <h6 class="float-left ellipsis-line-1" style="max-width: 78%;">{{ $ec['prof']['nom']." ".$ec['prof']["prenom"] }}</h6>
                                    <!-- Put in year of course -->
                                    <span class="p-bg-color float-right">{{ $ec["credit"] }} Cr</span>
                                </div>
                                <!-- Intitulé de l'UE -->
                                <h5 style="height: 7rem; margin-bottom: 1rem;" class="ellipsis">
                                    <a href="{{route('auth')}}" class="tran3s">{{ $ec['intituleEcu'] }}</a>
                                </h5>
                                <!-- Description de l'EC -->
                                <p class="ellipsis" style="height: 7.6rem; -webkit-line-clamp: 3;">{{$ec["description"]}}</p>
                                <ul class="clearfix">
                                    <li class="float-left">
                                        <i class="flaticon-people"></i>
                                        <a href="javascript:void(0);" class="tran3s">{{$ec["total_etu"]}}</a>
                                    </li>
                                    <li class="float-right">
                                        {{findNiveau($ec['niveauFormation']).' '.$ec['annee']}}
                                    </li>
                                    <!-- <li class="float-left">
                                        <i class="flaticon-comments"></i>
                                        <a href="#" class="tran3s">13</a>
                                    </li>
                                    <li class="float-right">
                                        <i class="flaticon-heart"></i>
                                        <a href="#" class="tran3s">3</a>
                                    </li> -->
                                </ul>
                            </div>
                        </div> <!-- /.single-course -->
                    </div> <!-- /.col- -->
                @endforeach
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /.popular-course -->



    <!--
    =============================================
        Theme Counter Section
    ==============================================
    -->
    <div class="theme-counter">
        <div class="count-particles">
            <span class="js-count-particles">--</span>
        </div>
        <div id="particles-js"></div>
        <div class="opacity">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 col-xs-6">
                        <h3><span class="counter">{{$stats["nb_filieres"]}}</span>+</h3>
                        <p>Filières</p>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <h3><span class="counter">{{$stats["nb_ues"]}}</span>+</h3>
                        <p>Unités d'Enseignement</p>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <h3><span class="counter">{{$stats["nb_ecs"]}}</span>+</h3>
                        <p>Eléments Constititufs de l'UE</p>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <h3><span class="counter">{{$stats["nb_media"]}}</span>+</h3>
                        <p>Ressources pédagogiques</p>
                    </div>
                </div>
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.theme-counter -->



    <!--
    =============================================
        Our Pricing Plan
    ==============================================
    -->
    <div class="our-pricing-plan">
        <div class="container">
            <div class="theme-title text-center">
                <h2>Cours temporaires <span></span></h2>
                <p>Inscrivez-vous de façon temporaire pour renforcer vos compétences sur l'un des modules de cours.</p>
            </div> <!-- /.theme-title -->

            <div class="clearfix">
                @foreach ($temp_ecs as $k => $ec)
                    @php
                        $montant = explode(".", $ec["montant_cours"]);
                    @endphp
                    <div class="single-plan-table tran3s">
                        <h6 style="height: 5rem;">{{ $ec['intituleEcu'] }}</h6>
                        <strong><sub>$</sub> {{ $montant[0] }} <sup>{{ $montant[1] }} <span>/ Mo.</span></sup></strong>
                        <ul style="height: 25rem;">
                            <!-- <li>100 Free Classes</li>
                            <li><del>960 Premium Classes</del></li>
                            <li>Expert Community (iOS, Android)</li>
                            <li><del>Cross Platforms Apps</del></li>
                            <li><del>Offline Access</del></li>
                            <li>Support Teachers</li> -->
                            <li><b>Niveau :</b> {{findNiveau($ec['niveauFormation']).' '.$ec['annee']}}</li>
                            <li><b>UE :</b> {{ $ec['intituleUnite'] }} </li>
                            <li><b>Masse horaire :</b> {{ $ec["masse_horaire"] }} heures</li>
                            <li><b>Contenus :</b> {{ $ec["total_chapitre"] }} Chapitres</li>
                            <li><b>Inscrits :</b> {{$ec["total_etu"]}} étudiants</li>
                            <li><b>Enseignant :</b> {{ $ec['prof']['nom']." ".$ec['prof']["prenom"] }}</li>
                        </ul>
                        <!-- Go to login Page -->
                        <a href="javascript:void(0);" class="tran3s hvr-trim" style="margin-top: 10px;">S'inscrire </a>
                    </div> <!-- /.single-plan-table -->
                @endforeach
                {{-- <div class="single-plan-table tran3s fix">
                    <h6 style="height: 5rem;">Stage en entreprise et/ou dans un laboratoire de recherche</h6>
                    <strong><sub>$</sub> 5 <sup>00 <span>/ H.</span></sup></strong>
                    <ul style="height: 25rem;">
                        <!-- <li>100 Free Classes</li>
                        <li>960 Premium Classes</li>
                        <li>Expert Community (iOS, Android)</li>
                        <li>Cross Platforms Apps</li>
                        <li>Offline Access</li>
                        <li>Support Teachers</li> -->
                        <li><b>Niveau :</b> MASTER 2</li>
                        <li><b>UE :</b> STAGE DE FIN FORMATION</li>
                        <li><b>Masse horaire :</b> 15.3 heures</li>
                        <li><b>Contenus :</b> 5 Chapitres</li>
                        <li><b>Inscrits :</b> 25 étudiants</li>
                        <li><b>Enseignant :</b> DJARA Tahirou</li>
                    </ul>
                    <a href="javascript:void(0)" class="tran3s hvr-trim">S'inscrire </a>
                </div> <!-- /.single-plan-table --> --}}
            </div>
        </div> <!-- /.container -->
    </div> <!-- /.our-pricing-plan -->



    <!--
    =============================================
        Testimonial Style One
    ==============================================
    -->
    <div class="testimonial-styleOne">
        <div class="container">
            <div class="theme-title text-center">
                <h2>Nos enseignants</h2>
                <p>Des enseignants qualifiés pour des enseignements de qualité</p>
            </div> <!-- /.theme-title -->

            <div id="testimonial-carousel-one" class="carousel slide" data-ride="carousel" data-interval="5000">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    @foreach ($profs as $p => $prof)
                        <li data-target="#testimonial-carousel-one" data-slide-to="{{$p}}" class="{{($p == 0) ? 'active' : ''}} tran3s" title="{{$prof['nom']. ' ' .$prof['prenom']}}">
                            <img src="{{$prof['pp_url']}}" alt="" onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';">
                        </li>
                    @endforeach
                </ol>

                <div class="main-wrapper">
                    <div class="shadow"></div>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <!-- We can get teachers with comments or not -->
                        @foreach ($profs as $p => $prof)
                            <div class="item {{($p == 0) ? 'active' : ''}}">
                                <img src="{{$prof['pp_url']}}" alt="" onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';">
                                <h6>{{$prof['nom']. ' ' .$prof['prenom']}}</h6>
                                <!-- <span>Dropbox</span> -->
                                <span>{{$prof['grade']}}</span>
                                <!-- <p>As we passed, I remarked a beautiful church-spire rising above some old elms in the park; and before them, in the midst of a lawn, and some outhouses, an old red house with tall chimneys covered with ivy, and the windows shining in the sun.</p> -->
                            </div>
                        @endforeach
                    </div> <!-- /.carousel-inner -->

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#testimonial-carousel-one" data-slide="prev">
                        <i class="fa fa-chevron-left" aria-hidden="true"></i>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#testimonial-carousel-one" data-slide="next">
                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        <span class="sr-only">Next</span>
                    </a>
                </div> <!-- /.main-wrapper -->
            </div> <!-- /#testimonial-carousel-one -->
        </div> <!-- /.container -->
    </div> <!-- /.testimonial-styleOne -->


    <!--
    =============================================
        Our Blog
    ==============================================
    -->
    <div class="our-blog">
        <div class="container">
            <div class="theme-title">
                <h2>Quelques domaines de formation</h2>
                <a href="{{route('auth')}}" class="tran3s">Voir +</a>
            </div> <!-- /.theme-title -->
            <div class="row">
                @foreach (array_slice($domaines, 0, 3) as $k => $domaine)
                    <div class="col-md-4 col-sm-6">
                        <div class="single-blog">
                            <div class="image"><img src="{{ asset('gestel/images/blog/'.($k+1).'.jpeg')}}" alt="" style="height: 24.438rem;"></div>
                            <!-- <ul>
                                <li>
                                    <i class="flaticon-comments"></i>
                                    <a href="#" class="tran3s">13</a>
                                </li>
                                <li>
                                    <i class="flaticon-heart"></i>
                                    <a href="#" class="tran3s">3</a>
                                </li>
                            </ul> -->
                            <h4 class="ellipsis" style="height:6rem;"><a href="{{route('auth')}}" class="tran3s">{{$domaine['sigleDomaine']}}</a></h4>
                            <p class="ellipsis" class="height:4rem;">Aucune description définie pour ce domaine de formation professionnelle</p>
                            <a href="{{route('auth')}}" class="tran3s">En savoir plus</a>
                        </div> <!-- /.single-blog -->
                    </div> <!-- /.col- -->
                @endforeach
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /.our-blog -->


    <!--
    =============================================
        Instructor Banner
    ==============================================
    -->
    <div class="instructor-banner">
        <div class="opacity opacity-one">
            <div class="container">
                <h4>Avez-vous des préoccupations ?</h4>
                <h2>Consulter notre foire aux questions </h2>
                <a href="{{ route('faq')}}" class="tran3s hvr-trim">FAQs</a>
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.instructor-banner -->


    <!--
    =============================================
        Partner Logo
    ==============================================
    -->
    <div class="partent-logo-section">
        <div class="container">
            <div id="partner-logo">
                <!-- <div class="item"><img src="images/logo/p-1.png" alt="logo"></div>
                <div class="item"><img src="images/logo/p-2.png" alt="logo"></div>
                <div class="item"><img src="images/logo/p-3.png" alt="logo"></div>
                <div class="item"><img src="images/logo/p-4.png" alt="logo"></div> -->
                @for ($i = 0; $i < 16; $i++)
                    <div class="item" style="padding: 1rem;"><img src="{{ asset('gestel/images/logo/'.($i + 1).'.png')}}" alt="logo"></div>
                @endfor
            </div>
        </div>
    </div> <!-- /.partent-logo-section -->

@endsection

@section('script')
    <!-- partical Js -->
    <script type="text/javascript" src="{{asset('gestel/vendor/particles.js-master/particles.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('gestel/vendor/particles.js-master/demo/js/lib/stats.js')}}"></script>
    <script type="text/javascript">
        let icons = @json($class, JSON_PRETTY_PRINT);
        let mentions = @json($mentions, JSON_PRETTY_PRINT);

        let formData;

        $(function(){
            // ajax to get data
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            formData =  $('#field-filters').serializeArray();
            // console.log('formData', formData);

            $("#field-filters").on('submit', applyFilters);
        });

        function applyFilters(e) {
            e.preventDefault();
            $('.action-button').unbind('mouseenter mouseleave');
            $('.action-button').addClass('btn-disabled');
            let data = {};
            let content = ``;

            $("#field-filters").find('.selectpicker').each((ind, el) => {
                data[$(el).attr('name')] = $(el).val();
            });

            // console.log('On Submit formData', data);

            content += `
                <div class="row" style="display: flex;">
                    <div class="single-block float-left tran3s col-12" style="margin: auto;">
                        <div class="load-panel animation-round"></div>
                        <h5 style="height:6rem; padding:7rem;" class="ellipsis">Recherche...</h5>
                    </div>
                </div>
            `;

            $(".find-course-block").get(0).scrollIntoView(true);
            $(".find-course-block").find('.clearfix').empty();
            $(".find-course-block").find('.clearfix').html(content);

            if (data.domaine != 'all') {
                if (typeof(mentions[data.domaine]) == 'undefined') {
                    let html = `<div class="row" style="display: flex;">
                                <div class="single-block float-left tran3s col-12" style="margin: auto;">
                                    <i class="flaticon-bookmark"></i>
                                    <h5 style="height:6rem;" class="ellipsis">Aucune donnée ne correspond à votre recherche</h5>
                                    <p style="height: 10rem;" class="ellipsis">...</p>
                                </div>
                            </div>`;

                    $(".find-course-block").find('.clearfix').empty();
                    $(".find-course-block").find('.clearfix').html(html);
                    $(".find-course-block").get(0).scrollIntoView(true);

                    $('.action-button').removeClass('btn-disabled');

                } else {
                    fetchData(data);
                }
            } else {
                fetchData(data);
            }

        }

        function fetchData(dt) {
            $.ajax({
                url: "{{ route('index.filters') }}",
                type: 'GET',
                data: dt,
                success: function (resp) {
                    // console.log(resp);

                    let filters = resp.data;
                    let html = ``;

                    if (filters.length > 0) {
                        filters.forEach((el, ind) => {
                            html += `<div class="single-block float-left tran3s">
                                        <i class="${icons[ind%6]}"></i>
                                        <h5 style="height: 4.5rem;" class="ellipsis">${el['intituleFilieres']}</h5>
                                        <p style="height: 4em;" class="ellipsis">`
                                            if (el['conditionInscription']) {
                                                html += `${el['conditionInscription']}`
                                            } else {
                                                html += `Aucune description définie pour cette filière de formation professionnelle`
                                            }
                                            html += `</p>
                                        <a href="{{route('auth')}}" class="tran3s"><i class="flaticon-arrows"></i></a>
                                    </div>`;
                        });
                    } else {
                        html += `<div class="row" style="display: flex;">
                            <div class="single-block float-left tran3s col-12" style="margin: auto;">
                                <i class="flaticon-bookmark"></i>
                                <h5 style="height:6rem; line-height: 1.5;" class="ellipsis">Aucune donnée ne correspond à votre recherche</h5>
                                <!-- <p style="height:10rem;" class="ellipsis">...</p> -->
                            </div>
                        </div>`;

                    }

                    $(".find-course-block").find('.clearfix').empty();
                    $(".find-course-block").find('.clearfix').html(html);
                    $(".find-course-block").get(0).scrollIntoView(true);

                    $('.action-button').removeClass('btn-disabled');

                },
                error: function(error) {
                    console.error(error);
                    ajaxError();
                }
            });
        }

        function updateMention(e) {
            // debugger;
            let selectedDom = $(e).val();
            let content = ``;


            if (selectedDom == "all") {
                content += `<option value="all">Toutes les mentions</option>`;
                $(e).find("option").each(function(){
                    content += `<optgroup label="${$(this).text()}">`;
                    if (typeof(mentions[$(this).val()]) != 'undefined') {
                        mentions[$(this).val()].forEach((mention, id) => {
                            content += `<option value="${mention.idMention}">${mention.sigleMention}</option>`;
                        });
                    }
                    content += `</optgroup>`;
                });
            } else {
                content += `<option value="all">Toutes les mentions</option>`;
                if (typeof(mentions[selectedDom]) != 'undefined') {
                    Object.keys(mentions[selectedDom]).forEach(el => {
                        let mention = mentions[selectedDom][el];
                        content += `<option value="${mention.idMention}">${mention.sigleMention}</option>`;
                    });
                }
            }

            $('select[name="mention"]').empty();
            $('select[name="mention"]').html(content);
            $('select[name="mention"]').selectpicker('refresh');;

        }

        function ajaxError() {
            let content = `
            <div class="row" style="display: flex;">
                <div class="single-block float-left tran3s col-12" style="margin: auto;">
                    <i class="flaticon-delete" style="color: orangered;"></i>
                    <h5 style="height: 6rem; line-height: 1.5;" class="ellipsis">Petit souci lors de la recherche. Veuillez réessayer svp!</h5>
                    <!-- <p style="height:10rem;" class="ellipsis">...</p> -->
                    <!-- Login page -->
                </div> <!-- /.single-block -->
            </div>
            `;

            $(".find-course-block").get(0).scrollIntoView(true);
            $(".find-course-block").find('.clearfix').empty();
            $(".find-course-block").find('.clearfix').html(content);

            $('.action-button').removeClass('btn-disabled');
        }
    </script>
@endsection