@extends('layouts.base-refonte')

@section('title','Accueil')

@section('css')
    <link rel="stylesheet" href="{{ asset('css/autocomplete.css')}}">
    <style>
        .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .features-section {
            padding: 22px 0;
            background-color: #309255;
        }

        .features-item {
            display: flex;
            align-items: center;
            max-width: 230px;
        }

        .features-icon {
            flex-shrink: 0;
        }

        .features-caption {
            flex-grow: 1;
            padding-left: 20px;
        }

        .features-title {
            font-size: 16px;
            line-height: 1.8;
            color: #FFFFFF;
        }

        .swiper-slide .btn {
            border: 1px solid #309255;
            width: 100%;
            height: 60px;
            border-radius: 10px;
            background-color: #fff;
        }

        .single-blog .blog-content .title i,
        .single-courses .courses-content .title i {
            color: #309255;
            margin-right: 5px;
            font-size: 20px;
            display: inline-block;
            line-height: 1;
        }

        .single-courses .courses-content .courses-meta span i {
            color: #309255;
            margin-right: 5px;
            font-size: 20px;
            display: inline-block;
            line-height: 1;
        }

        .line-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 5.6rem;
            overflow: hidden;
        }

        .single-courses .courses-images a img {
            height: 205px;
            object-fit: cover;
        }

        .single-blog .blog-image a img {
            height: 205px;
            object-fit: cover;
        }

        .single-courses .courses-content .courses-author .author .author-thumb a img,
        .blog-content .blog-author .author .author-thumb a img {
            height: 50px;
            object-fit: cover;
        }
    </style>
@endsection

@section('content')

    <!--
    =============================================
        Theme Inner Banner
    ==============================================
    -->
    <div class="inner-banner">
        <div class="opacity">
            <div class="container">
                <h2>Accueil</h2>
                <ul>
                    <li><a href="{{route('/')}}" class="tran3s">GestElearning</a></li>
                    <li>|</li>
                    <li><a href="{{route('home_e')}}">Accueil</a></li>
                </ul>
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.inner-banner -->

    <div class="features-section">
        <div class="container">
            <div class="row g-6">
                <div class="col-lg-3 col-sm-6">
                    <!-- Features Item Start -->
                    <div class="features-item aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
                        <div class="features-icon">
                            {{-- <i class="icofont-unique-idea icofont-5x" style="color: white;"></i> --}}
                            <i class="icofont-brainstorming icofont-5x" style="color: white;"></i>
                        </div>
                        <div class="features-caption">
                            <h3 class="features-title">Compétences essentielles</h3>
                        </div>
                    </div>
                    <!-- Features Item End -->
                </div>
                <div class="col-lg-3 col-sm-6">
                    <!-- Features Item Start -->
                    <div class="features-item aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
                        <div class="features-icon">
                            <i class="icofont-license icofont-5x" style="color: white;"></i>
                        </div>
                        <div class="features-caption">
                            <h3 class="features-title">Formations qualifiantes</h3>
                        </div>
                    </div>
                    <!-- Features Item End -->
                </div>
                <div class="col-lg-3 col-sm-6">
                    <!-- Features Item Start -->
                    <div class="features-item aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
                        <div class="features-icon">
                            <i class="icofont-architecture-alt icofont-5x" style="color: white;"></i>
                        </div>
                        <div class="features-caption">
                            <h3 class="features-title">Formations à distance</h3>
                        </div>
                    </div>
                    <!-- Features Item End -->
                </div>
                <div class="col-lg-3 col-sm-6">
                    <!-- Features Item Start -->
                    <div class="features-item aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
                        <div class="features-icon">
                            <i class="icofont-group-students icofont-5x" style="color: white;"></i>
                        </div>
                        <div class="features-caption">
                            <h3 class="features-title">Soutien pédagogique</h3>
                        </div>
                    </div>
                    <!-- Features Item End -->
                </div>
            </div>
        </div>
    </div>

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

    <!-- All Courses Start -->
    <div class="section section-padding-02 mb-3">
        <div class="container">

            <!-- All Courses Top Start -->
            <div class="courses-top">

                <!-- Section Title Start -->
                <div class="section-title shape-01">
                    <!-- <h2 class="main-title">All <span>Courses</span> of Edule</h2> -->
                    <h2 class="main-title">Quelques <span>Cours</span> ...</h2>
                </div>
                <!-- Section Title End -->

                <!-- Courses Search Start -->
                <div class="courses-search d-none">
                    <form action="javascript:void(0);">
                        <!-- <input type="text" placeholder="Search your course"> -->
                        <input type="text" id="search" placeholder="Rechercher un cours">
                        <button><i class="icofont-search-2"></i></button>
                    </form>
                </div>
                <!-- Courses Search End -->

            </div>
            <!-- All Courses Top End -->

            <!-- All Courses Tabs Menu Start -->
            <div class="courses-tabs-menu courses-active">
                <div class="swiper-container">
                    <ul class="swiper-wrapper nav">
                        <!-- Prendre une liste de 7 UEs en session normal ou en Reprise -->
                        @php
                            $first_key = current(array_keys($intitule_ues));
                            $id = 0;
                        @endphp
                        @if (count($intitule_ues))
                            @foreach ($intitule_ues as $key => $item)
                                <li class="swiper-slide"><button class="ellipsis {{($key == $first_key) ? 'active' : ''}}" data-bs-toggle="tab" data-bs-target="#{{$key}}">{{ mb_strtoupper($item) }}</button></li>
                            @endforeach
                        @endif
                        <li class="swiper-slide"><a href="{{route('mes_cours')}}" class="btn btn-secondary btn-hover-primary ellipsis">Voir +</a></li>
                    </ul>
                </div>

                <!-- Add Pagination -->
                <div class="swiper-button-next"><i class="icofont-rounded-right"></i></div>
                <div class="swiper-button-prev"><i class="icofont-rounded-left"></i></div>
            </div>
            <!-- All Courses Tabs Menu End -->

            <!-- All Courses tab content Start -->
            <div class="tab-content courses-tab-content">
                @if (count($intitule_ues))
                    @foreach ($intitule_ues as $j => $ue)
                        @if (count($all_ues_group[$j]))
                            <div class="tab-pane fade show {{($j == $first_key) ? 'active' : ''}}" id="{{$j}}">
                                <!-- All Courses Wrapper Start -->
                                <div class="courses-wrapper">
                                    <div class="row">
                                        @foreach ($all_ues_group[$j] as $k => $ecu)
                                        <div class="col-lg-4 col-md-6 searched">
                                            <!-- Single Courses Start -->
                                            <div class="single-courses">
                                                <div class="courses-images">
                                                    <a href="javascript:void(0);"><img src="{{asset('edule/images/courses/courses-0'.( $k%5).'.jpg')}}" alt="Courses"></a>
                                                </div>
                                                <div class="courses-content">
                                                    <div class="courses-author">
                                                        <div class="author">
                                                            <div class="author-thumb">
                                                                <a href="{{route("profil", $ecu['matricule'])}}">
                                                                    <img
                                                                        src="{{'https://progiciel.geststudent.net/Admin/'.$all_profs[$ecu['matricule']][0]['cheminPhoto']}}"
                                                                        alt="Author"
                                                                        onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                                                    >
                                                                </a>
                                                            </div>
                                                            <div class="author-name">
                                                                <a class="name" href="{{route("profil", $ecu['matricule'])}}">
                                                                    @if (!empty($all_profs[$ecu['matricule']]))
                                                                        <span class="searched-text" style="height: 4.2rem;">{{$all_profs[$ecu['matricule']][0]['nom']. '  ' .$all_profs[$ecu['matricule']][0]['prenom']}}</span>
                                                                    @else
                                                                        <span>Non attribué</span>
                                                                    @endif
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="tag">
                                                            <a href="javascript:void(0);"><span class="searched-text">{{findNiveau($ecu['niveauFormation']).' '.$ecu['annee']}}</span></a>
                                                        </div>
                                                    </div>

                                                    <h4 class="title line-2"><a class="searched-text" href="{{route('details_cours',["course" => $ecu['id_EC'] ])}}">{{$ecu['intituleEcu']}}</a></h4>
                                                    <div class="courses-meta">
                                                        <span class="searched-text"> <i class="icofont-ui-calendar"></i> Semestre : {{$ecu['semestre']}}</span>
                                                        <span class="searched-text"> <i class="icofont-tags"></i> Crédit : {{$ecu['credit']}} </span>
                                                    </div>
                                                    <!-- <div class="courses-price-review">
                                                        <div class="courses-price">
                                                            <span class="sale-parice">$385.00</span>
                                                            <span class="old-parice">$440.00</span>
                                                        </div>
                                                        <div class="courses-review">
                                                            <span class="rating-count">4.9</span>
                                                            <span class="rating-star">
                                                                    <span class="rating-bar" style="width: 80%;"></span>
                                                            </span>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- Single Courses End -->
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                <!-- All Courses Wrapper End -->
                            </div>
                        @endif
                    @endforeach
                @else
                    <div class="tab-pane fade show active">
                        <!-- All Courses Wrapper Start -->
                        <div class="courses-wrapper">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- Single Courses Start -->
                                    <div class="d-flex single-courses" style="padding-bottom: 45px;">
                                        <div class="courses-content mx-auto">
                                            <h6 class="title"> Aucune donnée disponible</h4>
                                        </div>
                                    </div>
                                    <!-- Single Courses End -->
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <!-- All Courses tab content End -->

            <!-- All Courses BUtton Start -->
            <div class="courses-btn text-center">
                <a href="{{route('mes_cours')}}" class="btn btn-secondary btn-hover-primary mb-3">Voir +</a>
            </div>
            <!-- All Courses BUtton End -->

        </div>
    </div>
    <!-- All Courses End -->

    <!-- Blog Start -->
    <div class="section section-padding mt-3" style="background-color: #e7f8ee;">
        <div class="container">

            <!-- Section Title Start -->
            <div class="section-title shape-03 text-center">
                <h5 class="sub-title">Médias récents</h5>
                <h2 class="main-title">Derniers médias <span> publiés</span></h2>
            </div>
            <!-- Section Title End -->

            <!-- Blog Wrapper Start -->
            <div class="blog-wrapper">
                <div class="row">
                    @if (count($recents_medias))
                        @foreach ($recents_medias as $ky => $media)
                            @php
                                $ecu  = $ecus[$media['ecu_id']][0];
                                $chapitre = $chapitres[$media['chap_id']][0];
                                $prof = $all_profs[$ecu['matricule']][0];
                                $date = date_create($media['published_at']);
                                $url = route('details_cours',["course" => $ecu['id_EC'] ]);
                                $mUrl = $url.'#item='. $media['id']. '.MEDIA';
                            @endphp
                            <div class="col-lg-4 col-md-6 mb-3 {{ ($ky > 2) ? 'd-none' : '' }}">

                                <!-- Single Blog Start -->
                                <div class="single-blog bg-white h-100">
                                    <div class="blog-image">
                                        <a href="javascript:void(0);"><img src="{{asset('edule/images/blog/blog-0'.( $ky%5 + 1).'.jpg')}}" alt="Blog"></a>
                                    </div>
                                    <div class="blog-content">
                                        <div class="blog-author">
                                            <div class="author">
                                                <div class="author-thumb">
                                                    <a href="{{route("profil", $ecu['matricule'])}}">
                                                        <img
                                                            src="{{'https://progiciel.geststudent.net/Admin/'.$prof['cheminPhoto']}}"
                                                            onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                                            alt="Author"
                                                        >
                                                    </a>
                                                </div>
                                                <div class="author-name">
                                                    <a class="name" href="{{route("profil", $ecu['matricule'])}}">
                                                        <span>{{$prof['nom']. '  ' .$prof['prenom']}}</span>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="tag">
                                                <a href="javascript:void(0);"><span>{{findNiveau($ecu['niveauFormation']).' '.$ecu['annee']}}</span></a>
                                            </div>
                                        </div>

                                        <h4 class="title"><a href="{{$url}}"><i class="icofont-book"></i> {{$ecu['intituleEcu']}}</a></h4>

                                        <h6 class="title"><a href="{{$url}}"><i class="icofont-book-mark"></i> {{ 'Chapitre '.$chapitre['chapitrenumero'].' : '.$chapitre['chapitreintitule'] }}</a></h4>

                                        <h6 class="title"><a href="{{$mUrl}}"><i class="icofont-learn"></i> {{ $media['titre'] }}</a></h4>

                                        <div class="blog-meta">
                                            <span> <i class="icofont-calendar"></i>
                                                {{ date_format($date,"d/m/Y \à H:i:s") }}
                                            </span>

                                            @if (array_search($media["ext"], ["mov","mp4","avi","mp3"]) !== false)
                                                <span> <i class="icofont-video-alt"></i> </span>
                                            @elseif ($media['ext'] =="pdf")
                                                <span> <i class="icofont-book-alt"></i> </span>
                                            @else
                                                <span> <i class="icofont-image"></i> </span>
                                            @endif
                                        </div>

                                        <a href="{{$mUrl}}" class="btn btn-secondary btn-hover-primary">Accéder</a>
                                    </div>
                                </div>
                                <!-- Single Blog End -->

                            </div>
                        @endforeach
                    @else
                        <div class="col-lg-12">
                            <!-- Single Courses Start -->
                            <div class="d-flex single-blog bg-white" style="padding-bottom: 25px;">
                                <div class="blog-content mx-auto">
                                    <h6 class="title"> Aucun média récemment mis en ligne</h4>
                                </div>
                            </div>
                            <!-- Single Courses End -->
                        </div>
                    @endif
                </div>
            </div>
            <!-- Blog Wrapper End -->

            <!-- All Courses BUtton Start -->
            @if (count($recents_medias) > 3)
                <div class="courses-btn text-center">
                    <a class="btn btn-secondary btn-hover-primary mb-3" onclick="moreMedias(this);">Voir +</a>
                </div>
            @endif
            <!-- All Courses BUtton End -->
        </div>
    </div>
    <!-- Blog End -->

    <!-- Courses Start -->
    <div class="section section-padding">
        <div class="container">

            <!-- Section Title Start -->
            <div class="section-title shape-03 text-center">
                <h5 class="sub-title">Médias récents</h5>
                <h2 class="main-title">Derniers médias<span> vus</span></h2>
            </div>
            <!-- Section Title End -->

            <!-- Courses Category Wrapper Start  -->
            <div class="courses-category-wrapper">
                <div class="courses-search search-2">
                    {{-- <input type="text" placeholder="Search here">
                    <button><i class="icofont-search"></i></button> --}}
                </div>

                <ul class="category-menu">
                    <li><a class="active" data-action="all" onclick="filter_data(this);">Tous</a></li>
                    <li><a data-action="video" onclick="filter_data(this);">Vidéos</a></li>
                    <li><a data-action="pdf" onclick="filter_data(this);">PDF</a></li>
                    <li><a data-action="img" onclick="filter_data(this);">Images</a></li>
                </ul>
            </div>
            <!-- Courses Category Wrapper End  -->

            <!-- Courses Wrapper Start  -->
            <div class="courses-wrapper-02">
                <div class="row">
                    @if (count($medias_visualized))
                        @foreach ($medias_visualized as $ky => $media)
                            @php
                                $ecu  = $ecus[$media['ecu_id']][0];
                                // $chapitre = $chapitres[$media['chap_id']][0];
                                $prof = $all_profs[$ecu['matricule']][0];
                                $date = date_create($media['published_at']);
                                $url = route('details_cours',["course" => $ecu['id_EC'] ]);
                                $mUrl = $url.'#item='. $media['id']. '.MEDIA';
                            @endphp
                            <div class="recents-media col-lg-4 col-md-6 mb-3" data-media={{$media["ext"]}}>
                                <!-- Single Courses Start -->
                                <div class="single-courses h-100">
                                    <div class="courses-images">
                                        <a href="javascript:void(0);"><img src="{{asset('edule/images/courses/courses-0'.( $ky%5 ).'.jpg')}}" alt="Courses"></a>
                                    </div>
                                    <div class="courses-content">
                                        <div class="courses-author">
                                            <div class="author">
                                                <div class="author-thumb">
                                                    <a href="{{route("profil", $ecu['matricule'])}}">
                                                        <img
                                                            src="{{'https://progiciel.geststudent.net/Admin/'.$prof['cheminPhoto']}}"
                                                            onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                                            alt="Author"
                                                        >
                                                    </a>
                                                </div>
                                                <div class="author-name">
                                                    <a class="name" href="{{route("profil", $ecu['matricule'])}}">
                                                        <span>{{$prof['nom']. '  ' .$prof['prenom']}}</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

                                        <h4 class="title"><a href="{{$url}}"><i class="icofont-book"></i> {{$ecu['intituleEcu']}}</a></h4>

                                        <h6 class="title"><a href="{{$mUrl}}"><i class="icofont-learn"></i> {{ $media['titre'] }}</a></h4>

                                        <div class="courses-meta" style="display: flex; -ms-flex-pack: justify; justify-content: space-between; padding-top: 10px;">
                                            <span> <i class="icofont-calendar"></i>
                                                {{ date_format($date,"d/m/Y \à H:i:s") }}
                                            </span>

                                            @if (array_search($media["ext"], ["mov","mp4","avi","mp3"]) !== false)
                                                <span> <i class="icofont-video-alt"></i> </span>
                                            @elseif ($media['ext'] =="pdf")
                                                <span> <i class="icofont-book-alt"></i> </span>
                                            @else
                                                <span> <i class="icofont-image"></i> </span>
                                            @endif
                                        </div>

                                        <div class="courses-rating mt-5">
                                                                                        <p>Progression {{$percent}}%  </p>

                                            <div class="rating-progress-bar">
                                                <div class="rating-line" style="width: {{$percent}}%;"></div>
                                            </div>

                                            <div class="rating-meta d-none">
                                                <span class="rating-star">
                                                        <span class="rating-bar" style="width: 80%;"></span>
                                                </span>
                                                <p>Your rating</p>
                                            </div>
                                        </div>

                                        <a
                                            href="{{$mUrl}}"
                                            class="btn btn-secondary btn-hover-primary mt-5"
                                            style="line-height: 2.5; padding: 0 0.8rem; font-size: 1rem;"
                                            target="_blank"
                                        >
                                            Accéder
                                        </a>
                                    </div>
                                </div>
                                <!-- Single Courses End -->
                            </div>
                        @endforeach
                    @else
                        <div class="col-lg-12">
                            <!-- Single Courses Start -->
                            <div class="d-flex single-courses bg-white" style="padding-bottom: 45px;">
                                <div class="courses-content mx-auto">
                                    <h6 class="title"> Aucun média récemment visualisé</h4>
                                </div>
                            </div>
                            <!-- Single Courses End -->
                        </div>
                    @endif

                </div>
            </div>
            <!-- Courses Wrapper End  -->

            <!-- All Courses BUtton Start -->
            {{-- <div class="courses-btn text-center d-none">
                <a class="btn btn-secondary btn-hover-primary mb-3">Voir +</a>
            </div> --}}
            <!-- All Courses BUtton End -->

        </div>
    </div>
    <!-- Courses End -->

@endsection

@section('script')
    <script src="{{asset('js/autocomplete.js')}}"></script>
    <script>
        $(function() {
            autocomplete({
                inp        : "search", // input id
                sClass     : "searched",
                sTextClass : "searched-text", // should be in sClass elmts
            });
        });

        function filter_data(e) {
            const type = {
                "mp4": 'video', "avi": 'video', "mp3": 'video', "mov": 'video',
                "pdf": 'pdf',
                "png": 'img', "jpg": 'img', "jpeg": 'img'
            };

            let media_type = $(e).attr('data-action');

            $('#no-media').remove();
            $('.courses-wrapper-02').find('div.row').show();

            $('.category-menu').find('a.active').removeClass('active');

            $(e).addClass("active");

            $('.recents-media').each((id, el) => {
                $(el).show();

                if (media_type != 'all') {
                    if(type[$(el).attr('data-media')] != media_type){
                        $(el).hide();
                    }
                }
            });

            if ($('div.recents-media:visible').length == 0) {
                $('.courses-wrapper-02').find('div.row').hide();

                let html = `
                    <div class="row" id="no-media">
                        <div class="col-lg-12">
                            <div class="d-flex single-courses bg-white" style="padding-bottom: 45px;">
                                <div class="courses-content mx-auto">
                                    <h6 class="title"> Aucune donnée disponible</h4>
                                </div>
                            </div>
                        </div>
                    </div>`;

                $('.courses-wrapper-02').append(html);
            }
        }

        function moreMedias(e) {
            $(e).parents('div.container').find('.blog-wrapper .row').children('div').removeClass('d-none');
            $(e).remove();
        }
    </script>
@endsection