@extends('layouts.base-refonte', ["fixedHeader" => true])

@section('title','GestStudentElearning | Details cours')

@section('css')
    <link href="{{asset('video-js/video-js.min.css')}}" rel="stylesheet" />
    <link href="{{asset('video-js/videojs-vjsdownload.css')}}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{asset('refonte/css/players.css')}}">
    <style>
        /* merged-header consequences */
        @media (max-width: 991px) {
            .courses-enroll-wrapper {
                margin-top: 64px;
            }
        }

        .courses-enroll-wrapper {
            margin-top: 82px;
        }

        /* Page content */
        .courses-video-player {
            width: 100% !important;
        }


        /* panes' styles */
        /*  Table enroll */
        .enroll-tab-content .table i {
            color: #309255;
            font-size: 20px;
        }

        /* comments box */
        .message-form .message-input textarea {
            font-family: inherit;
        }

        .answer-message-wrapper .single-message .btn {
            font-size: 15px;
            border: 1px solid #c8e6d3;
            padding: 0 20px;
            background-color: #fff;
            color: #309255;
            height: 45px;
            line-height: 41px;
            margin-top: 20px;
        }

        .answer-message-wrapper .single-message .btn:hover {
            background-color: #309255;
            border-color: #309255;
            color: #fff !important;
        }

        /* rate */
        .single-rating::before {
            content: attr(data-rate);
            margin-right: 5px;
            font-size: .85em;
            text-align: center;
        }

        .reviews-rating .rating li i {
            font-size: 1.5rem;
        }

        .courses-details-tab .details-tab-content .tab-reviews .single-review::before {
            /* top: -100px; */
            transform: rotateX(40deg);
        }

        .courses-details-tab .details-tab-content .tab-reviews .single-review {
            margin-bottom: .8em;
        }

        @media only screen and (max-width: 575px) {
            .answer-message-wrapper ul li .message-replay {
                padding-left: 70px;
            }
        }

        /* instructor */
        .team-thumb img {
            width: 135px;
            height: 135px;
            margin-left: auto;
            margin-right: auto;
            object-fit: cover;
        }

        /* Playlist style  */
        .courses-video-playlist {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 9999;
            max-width: 70%;
            transform: translate(100%, 0px);
            transition: transform .5s ease;
        }

        .courses-video-playlist.show {
            transform: none;
        }

        @media (min-width: 991px){
            .courses-video-playlist {
                width: 40%;
            }
        }

        /* layer */
        .playlist-layer {
            position: absolute;
            z-index: -1;
            height: 100%;
            width: 100vw;
            visibility: hidden;
            opacity: 0;
            background-color: #131313bf;
            transform: translate(-100%, 0px);
            transition: visibility 0.5s ease, opacity .5s;
        }

        .courses-video-playlist.show .playlist-layer {
            visibility: visible;
            opacity: 1;
        }

        /* playlist content */
        .video-playlist {
            height: calc(100vh - 80px);
            overflow-y: auto;
        }

        /* toggle playlist btn */
        .toggle-video-playlist {
            position: absolute;
            transform: translateX(-100%);
            top: 35vh;
            padding-left: 0;
            padding-right: 0;
            line-height: 3rem;
            border-radius: 30px 0px 0px 30px;
        }

        .toggle-video-playlist > .close {
            height: 100%;
            display: inline-block;
            padding-right: 8px;
            background-color: #fff6f64f;
        }

        .toggle-video-playlist > .see-content {
            display: inline-block;
            height: 100%;
            padding-right: 10px;
        }

        .toggle-video-playlist > .see-content > .text {
            font-size: 1rem;
        }

        .toggle-video-playlist > .see-content > i,
        .toggle-video-playlist.reduced > .see-content > .text,
        .toggle-video-playlist.reduced > .close {
            display: none;
        }

        .toggle-video-playlist.reduced > .see-content > i {
            display: inline;
        }

        /* Chapter UI */
        .courses-video-playlist .video-playlist .accordion-item button p {
            max-width: 98%;
        }

        .progress-bar {
            width: 100%;
            height: 3px;
            background-color: #d3ded7;
        }

        .progress-bar .progress-line {
            height: 100%;
            background-color: #309255;
        }

        /* Media item pseudo-elements */
        .courses-video-playlist .video-playlist .vids a[data-type]::before,
        .courses-video-playlist .video-playlist .vids a[data-type]::after {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            border: none;
            top: 10px;
        }

        a[data-type="video"]::before {
            content: "\f144" !important;
        }

        a[data-type="pdf"]::before {
            content: "\f1c1" !important;
        }

        a[data-type="image"]::before {
            content: "\f03e" !important;
        }

        .courses-video-playlist .video-playlist .vids a.active::before {
            background-color: inherit;
            color: #309255;
        }

        a[data-type].viewed::after {
            content: "\f046";
            position: absolute;
            right: 1em;
        }

        /* Media title */
        /* .courses-video-playlist .video-playlist .accordion-item button p,
        .courses-video-playlist .video-playlist .vids a p */
        .courses-video-playlist .video-playlist p {
            text-align: justify;
        }

        /* Quiz section */
        #quiz-div {
            min-height: 90vh;
            display: none;
        }

        .quizz {
            display: flex;
            justify-content: center;
        }

        .quizz .btn {
            line-height: 2.5;
            padding: 0 0.8rem;
            font-size: 1rem;
        }

        .form-check-input[disabled] ~ .form-check-label,
        .form-check-input:disabled ~ .form-check-label {
            opacity: 1;
        }

       /***
        ====================================================================
        Test View Section
        ====================================================================

        ***/

        .testview-section{
            position:relative;
            padding:65px 0px 85px;
        }

        .testview-section .auto-container{
            position:relative;
            max-width: 90vw;
            width: 840px;
            margin:0 auto;
        }

        .testview-section .inner-container{
            position:relative;
            padding:30px 30px;
            border-radius:5px;
            background-color:#ffffff;
        }

        .testview-section .inner-container .upper-box{
            position:relative;
        }

        .testview-section .inner-container .upper-box .column{
            position:relative;
            margin-bottom:35px;
        }

        .testview-section .inner-container .upper-box .certificate{
            position:absolute;
            right:0px;
            top:0px;
            color:#ff5773;
            font-size:14px;
            border-bottom:1px solid #ff5773;
            font-family: 'Roboto', sans-serif;
        }

        .testview-section .inner-container .upper-box .question-box{
            position:relative;
            text-align:center;
            max-width:250px;
            margin:0 auto;
        }

        .testview-section .inner-container .upper-box .question-box h6{
            position:relative;
            color:#0f0e2d;
            font-size:16px;
            font-weight:500;
            margin-bottom:15px;
        }

        .testview-section .inner-container .upper-box .question-box .question{
            position:relative;
            width:120px;
            height:120px;
            color:#ff5773;
            font-size:40px;
            margin:0 auto;
            font-weight:700;
            line-height:1.2em;
            border-radius:50px;
            padding:25px 5px;
        }

        .testview-section .inner-container .upper-box .question-box .question span{
            position:relative;
            color:#71718a;
            font-size:12px;
            display:block;
            font-weight:400;
            line-height:1em;
            margin-top:4px;
            font-family: 'Montserrat', sans-serif;
        }

        /*Sidebar Title*/
        .sidebar-title{
            position: relative;
            padding:13px 20px 11px;
            display:block;
            margin-bottom:0px;
            border-bottom:1px solid #f5fbff;
        }

        .sidebar-title h6{
            position:relative;
            color: #252841;
            font-weight: 700;
            line-height: 1.2em;
            text-transform: capitalize;
        }

        /*  Quiz part */
        .question-box h6{
            border: 0.25px #0f0e2d dashed;
            border-radius: 5px;
        }

        .scrollable-content {
            overflow-y: scroll;
            overflow-x: hidden;
            width: 100%;
            height: 75px;
            min-height:75vh;
            border: 1px;
            background-color: #0c030312;
        }

        #course-details table th {
            width: 20%;
        }

        .MathJax_SVG_Display svg, .MathJax_SVG svg {
            width: 25ex;
            height: 25ex;
        }

        .MathJax, .MathJax_Display, .math {
            font-size: 2em;
        }
    </style>
@endsection

@section('content')

    @php
        $string = [
            'class="edit_zone" align="justify" contenteditable="true" style="color: black; padding: 5px; border-radius: 5px; background: rgba(51, 122, 183, 0.12);"',
            '<i class="fa fa-trash-o"></i>',
            '-  &nbsp;&nbsp;'
        ];
    @endphp
    <!-- Courses Enroll Start -->
    <div class="section">

        <!-- Courses Enroll Wrapper Start -->
        <div class="courses-enroll-wrapper">

            <!-- Courses Player Start -->
            <div class="courses-video-player">

                <!-- Courses Container Start -->

                <!-- Media container -->
                <div id="media-box">
                    @include('partials.alert')

                    <div class="vidcontainer py-4">

                        @if ($m)
                            <!--Video Case -->
                            <div class="mcontainer flex-container" id="video-div" style="{{ mediaType($m['ext'], "video") ?'':'display: none;'}}">
                                <div class="video-content">
                                    <video-js
                                        id="my-player"
                                        class="video-js vjs-big-play-centered"
                                        data-setup='{"controls": true, "preload": "auto"}'
                                    >
                                        @if (mediaType($m['ext'], "video"))
                                            {{-- <source src="{{ mediasAsset($m['url']) }}" type="video/{{$m['ext']}}"></source> --}}
                                            <source src="{{ mediasAsset($m['url']) }}" type="application/x-mpegURL"></source>
                                        @endif
                                    </video-js>
                                </div>
                            </div>
                            <!-- End Video Case -->

                            <!--Document Case -->
                            <div class="mcontainer mb-2 h-100 w-100" id="pdf-div" style="{{  mediaType($m['ext'], "pdf") ? '' : 'display: none;'}}">
                                <div class="container-fluid w-100 h-100" id="canvas_container">
                                    <iframe
                                        id="pdf-tag"
                                        data-viewer-path= "{{asset('pdfjs/web/viewer.html')}}"
                                        src="{{ asset('pdfjs/web/viewer.html'.( mediaType($m['ext'], "pdf") ? ('?file='.mediasAsset($m['url'])) : '' ) )}}"
                                        frameborder="0"
                                        class="w-100 h-100"
                                        data-check="true"
                                    >
                                    </iframe>
                                </div>
                            </div>
                            <!-- End Document Case -->

                            <!--Image Case -->
                            <div
                                id="image-div"
                                class="mcontainer flex-container h-100 w-100"
                                style="{{ mediaType($m['ext'], "image") ? '' :'display: none;'}}"
                            >
                                <div class="z-hint">
                                    <div>Zoom <span class="zoom">100</span>%</div>
                                    <div>Angle <span class="angle">0</span>°</div>
                                </div>
                                <div class="img-content">
                                    <img
                                        id="image-tag"
                                        class="img-thumbnail"
                                        src="{{ mediaType($m['ext'], "image") ? mediasAsset($m['url']) : ''}}"
                                        alt="NO IMAGE"
                                    >
                                </div>
                                <div class="z-toolbar my-3 ">
                                    <button id="z-rotate" class="btn btn-dark" data-bs-toggle="tooltip" title="Tourner l'image">
                                        <i class="fa fa-image"></i>
                                    </button>
                                    <div class="img-zoom">
                                        <button id="zoom-down" class="btn" data-bs-toggle="tooltip" title="Zoom arrière">
                                            <i class="fa fa-search-minus"></i>
                                        </button>
                                        <input id="zoom-range" type="range" class="form-control-range mx-3"/>
                                        <button id="zoom-up" class="btn btn-primary ml-auto" data-bs-toggle="tooltip" title="Zoom avant">
                                            <i class="fa fa-search-plus"></i>
                                        </button>
                                    </div>
                                    <button id="z-reset" class="btn" data-bs-toggle="tooltip" title="Revenir à l'état initial">
                                        <i class="fa fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                            <!--End Image Case-->

                        @else
                            <!--No data Case -->
                            <div class="mcontainer mb-2 h-100 w-100">
                                <div class="container-fluid w-100 h-100">
                                    @include('partials.nodata', [
                                        "width" => "100%",
                                        "msg" => 'Aucun média disponible pour ce cours'
                                    ])
                                </div>
                            </div>
                            <!-- End No data Case -->
                        @endif
                    </div>

                </div>
                <!-- End Media container -->

                <!-- Courses Container End -->

                <!-- Courses Enroll Content Start -->
                <div class="courses-enroll-content">
                    <!-- Courses Enroll Title Start -->
                    <div class="courses-enroll-title">
                        <h2 class="title">
                            @if ($m)
                                {{$m['titre']}}
                            @elseif ($ecu)
                                EC : {{$ecu['intituleEcu']}}
                            @endif
                        </h2>
                    </div>
                    <!-- Courses Enroll Title End -->

                    <!-- Courses Enroll Tab Start -->
                    <div class="courses-enroll-tab" id="menus-content">
                        <div class="enroll-tab-menu">
                            <ul class="nav">
                                @if ($m)
                                    <li><button class="course-tab" data-bs-toggle="tab" data-bs-target="#overview">Cours</button></li>
                                    <li><button class="description-tab active" data-bs-toggle="tab" data-bs-target="#description">Média</button></li>
                                    <li><button class="" data-bs-toggle="tab" data-bs-target="#enseignant">Enseignant</button></li>
                                    <li><button class="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews">Notes et avis</button></li>
                                    <li><button class="comments-tab" data-bs-toggle="tab" data-bs-target="#comments">Commentaires</button></li>
                                @else
                                    <li><button class="course-tab active" data-bs-toggle="tab" data-bs-target="#overview">Cours</button></li>
                                    <li><button class="" data-bs-toggle="tab" data-bs-target="#enseignant">Enseignant</button></li>
                                @endif
                            </ul>
                        </div>
                    </div>
                    <!-- Courses Enroll Tab End -->

                    <!-- Courses Enroll Tab Content Start -->
                    <div class="courses-enroll-tab-content">
                        <div class="tab-content">
                            <div class="tab-pane fade {{ !($m) ? 'show active' : '' }}" id="overview">

                                <!-- Overview Start -->
                                <div class="overview">

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="enroll-tab-title">
                                                <h3 class="title">Aperçu du cours</h3>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="enroll-tab-content pt-2" id="course-details">
                                                <table class="table">
                                                    <tbody>
                                                        <tr>
                                                            <th><i class="icofont-clip-board"></i> EC <span>:</span></th>
                                                            <td>{{$ecu['intituleEcu']}}</td>
                                                        </tr>
                                                        <tr>
                                                            <th><i class="icofont-graduate-alt"></i> Niveau <span>:</span></th>
                                                            <td>{{findNiveau($ecu['niveauFormation']).' '.$ecu['annee']}}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <i class="icofont-film"></i>
                                                                <!-- <i class="icofont-book-alt" style="position: relative; top: -0.5rem; left: -2rem;"></i>
                                                                <i class="icofont-image" style="position: relative; left: -3.4rem; top: 0.8rem;"></i> -->
                                                                Médias <span>:</span>
                                                            </th>
                                                            <td class="m-total">00</td>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <i class="icofont-automation"></i>
                                                                Méthode d'enseignement <span>:</span>
                                                            </th>
                                                            <td style="text-align: justify;">{!! str_replace($string, " ", $ecu['methode']) !!}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <i class="icofont-automation"></i>
                                                                Objectifs d'apprentissage <span>:</span>
                                                            </th>
                                                            <td>{!! str_replace($string, " ", $ecu['apprentissage']) !!}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <i class="icofont-automation"></i>
                                                                Mode de composition <span>:</span>
                                                            </th>
                                                            <td>{{ $ecu['mode_compo'] }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <i class="icofont-archive"></i>
                                                                Bibliographie <span>:</span>
                                                            </th>
                                                            <td></td>
                                                            <td colspan="2">
                                                                {!! str_replace($string, " ", $ecu['reference']) !!}
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <i class="icofont-attachment"></i>
                                                                Webographie <span>:</span>
                                                            </th>
                                                            <td></td>
                                                            <td colspan="2">
                                                                {!! str_replace($string, " ", $ecu['webography']) !!}
                                                            </td>
                                                        </tr>
                                                        {{-- <tr>
                                                            <!--
                                                                TODO !? Get students enrolled for this course
                                                            -->
                                                            <th><i class="icofont-users-alt-5"></i> Étudiants <span>:</span></th>
                                                            <td>25</td>
                                                        </tr> 
                                                        <tr>
                                                            <td colspan="2">
                                                                {!! $ecu['objectif_formation'] !!}
                                                            </td>
                                                        </tr> --}}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Overview End -->

                            </div>

                            @if ($m)
                                <div class="tab-pane fade show active" id="description">
                                    <!-- Description Start -->
                                    <div class="description">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="enroll-tab-title">
                                                    <h3 class="title">Description</h3>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="enroll-tab-content pt-2">
                                                    @foreach ($chaps as $chap)
                                                        @if (!empty($medias[$chap['id_chapitre']]))
                                                            @foreach ($medias[$chap['id_chapitre']] as $mcpos => $media)
                                                                @php
                                                                    if($chap['sections']){
                                                                        $secs = array_column($chap['sections'],"intitule","id_sectionchapitre");
                                                                    } else {
                                                                        $secs = [];
                                                                    }
                                                                    $pos = array_search($m['id'], array_column($medias[$m['chap_id']],'id'));
                                                                    $date = date_create($media['published_at']);
                                                                @endphp

                                                                <table class="table" style="display : {{($media['id'] != $m['id']) ? 'none' : 'block' }};" id="table{{$media['id']}}">
                                                                    <tbody>
                                                                        <tr>
                                                                            <th><i class="icofont-tags"></i> Chapitre {{$chap['chapitrenumero']}} <span>:</span></th>
                                                                            <td>{{$chap['chapitreintitule']}}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th><i class="icofont-listing-number"></i> Section(s) <span>:</span></th>
                                                                            <td>
                                                                                @php
                                                                                    $mSecId = json_decode($media['sequences']);
                                                                                @endphp
                                                                                @if ($mSecId)
                                                                                    <ul>
                                                                                    @foreach ($mSecId as $secId)
                                                                                        <li class="d-block">
                                                                                            &diamond; {{$secs[$secId]}}
                                                                                        </li>
                                                                                    </ul>
                                                                                    @endforeach
                                                                                @else
                                                                                    <span class="text-justify font-italic text-muted ml-1 d-inline-block"> Aucune section n'a été associé au média</span>
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th><i class="icofont-learn"></i> Titre <span>:</span></th>
                                                                            <td>{{$media['titre']}}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th><i class="icofont-support-faq"></i> Description <span>:</span></th>
                                                                            <td>{{$media['description']}}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th><i class="icofont-info-circle"></i> Type <span>:</span></th>
                                                                            <td>
                                                                                @if (mediaType($media['ext'], "video"))
                                                                                    {{-- <i class="icofont-ui-video-play"></i> --}}
                                                                                    Vidéo
                                                                                @elseif (mediaType($media['ext'], "pdf"))
                                                                                    {{-- <i class="icofont-book-alt"></i> --}}
                                                                                    PDF
                                                                                @else
                                                                                    {{-- <i class="icofont-image"></i> --}}
                                                                                    Image
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                        @if (mediaType($media['ext'], "video"))
                                                                            <tr>
                                                                                <th><i class="icofont-clock-time"></i> Durée <span>:</span></th>
                                                                                <td>{{$media['duree_video']}}</td>
                                                                            </tr>
                                                                        @endif
                                                                        <tr>
                                                                            <th><i class="icofont-calendar"></i> Publié le <span>:</span></th>
                                                                            <td>{{ date_format($date,"d/m/Y \à H:i:s") }}</td>
                                                                        </tr>
                                                                        @if ($media['id'] == $m['id'])
                                                                            <tr>
                                                                                <th><i class="icofont-architecture-alt"></i> Progression <span>:</span></th>
                                                                                <td id="user-state">
                                                                                    @if ($m['evolution'] == "finished")
                                                                                        Lecture bouclée
                                                                                    @elseif ($m['evolution'] == 'started')
                                                                                        Média en cours de lecture
                                                                                    @else
                                                                                        Lecture non débutée
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                        @endif
                                                                    </tbody>
                                                                </table>
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Description End -->

                                </div>
                                <div class="tab-pane fade" id="reviews">

                                    <!-- Certificates Start -->
                                    <div class="certificates">
                                        <div class="row">
                                            <!-- <div class="enroll-tab-title">
                                                <h3 class="title">Student Reviews</h3>
                                            </div> -->
                                            <div class="enroll-tab-content pt-0">
                                                <!-- Courses Details Tab Start -->
                                                <div class="courses-details-tab pt-0">

                                                    <!-- Details Tab Content Start -->
                                                    <div class="details-tab-content pt-0">

                                                        {{-- TODO Get rate informations for this media --}}
                                                        <div class="row gx-10">
                                                            <div class="col-lg-8 mx-auto">
                                                                <div class="tab-rating-box border-0 mt-0">
                                                                    <span class="count"><span  id="total-rating">0.0 </span> <i class="icofont-star"></i></span>
                                                                    <p>Avis (<span id="nb-eval">00</span>+)</p>

                                                                    <div class="rating-box-wrapper">
                                                                        <div class="single-rating" data-rate="0">
                                                                            <!-- <span class="count-rate">0 </span> -->
                                                                            <span class="rating-star">
                                                                                <span class="rating-bar" style="width: 100%;"></span>
                                                                            </span>
                                                                            <div class="rating-progress-bar">
                                                                                <div class="rating-line" style="width: 2%;"></div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="single-rating" data-rate="0">
                                                                            <!-- <span class="count-rate">15 </span> -->
                                                                            <span class="rating-star">
                                                                                <span class="rating-bar" style="width: 80%;"></span>
                                                                            </span>
                                                                            <div class="rating-progress-bar">
                                                                                <div class="rating-line" style="width: 2%;"></div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="single-rating" data-rate="0">
                                                                            <!-- <span class="count-rate">9 </span> -->
                                                                            <span class="rating-star">
                                                                                <span class="rating-bar" style="width: 60%;"></span>
                                                                            </span>
                                                                            <div class="rating-progress-bar">
                                                                                <div class="rating-line" style="width: 2%;"></div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="single-rating" data-rate="0">
                                                                            <!-- <span class="count-rate">1 </span> -->
                                                                            <span class="rating-star">
                                                                                <span class="rating-bar" style="width: 40%;"></span>
                                                                            </span>
                                                                            <div class="rating-progress-bar">
                                                                                <div class="rating-line" style="width: 2%;"></div>
                                                                            </div>
                                                                            <!-- <div class="d-inline">
                                                                                <span class="count-rate">&nbsp; 0 (<span class="count-percent">25%</span>)</span>
                                                                            </div> -->
                                                                        </div>

                                                                        <div class="single-rating" data-rate="0">
                                                                            <!-- <span class="count-rate">11 </span> -->
                                                                            <span class="rating-star">
                                                                                <span class="rating-bar" style="width: 20%;"></span>
                                                                            </span>
                                                                            <div class="rating-progress-bar">
                                                                                <div class="rating-line" style="width: 2%;"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="mt-3">
                                                                        <h4 class="mx-auto text-center" style="display: none;" id="no-rate-text">Soyez la première personne à évaluer ce média</h4>
                                                                        <div class="reviews-btn pt-0" style="display: none;">
                                                                            <button type="button" class="btn btn-primary btn-hover-dark" data-bs-toggle="modal" data-bs-target="#reviewsModal">Evaluer</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        {{-- TODO Get reviews for this media --}}
                                                        <!-- Tab Reviews Start -->
                                                        <div class="tab-reviews">
                                                            <div class="reviews-wrapper reviews-active">
                                                                <!-- Tab Reviews Start -->

                                                            </div>

                                                            <!-- Reviews Form Modal Start -->
                                                            <div class="modal fade" id="reviewsModal" style="z-index: 9999;">
                                                                <div class="modal-dialog modal-dialog-centered">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title">Ajouter un avis</h5>
                                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                        </div>

                                                                        <!-- Reviews Form Start -->
                                                                        <div class="modal-body reviews-form">
                                                                            <form action="" class="php-review-form" method="POST">
                                                                                @csrf
                                                                                <input type="number" name="rate" value="" required hidden>
                                                                                <div class="row">
                                                                                    <div class="col-md-12">
                                                                                        <!-- Single Form Start -->
                                                                                        <div class="reviews-rating">
                                                                                            <label>Avis</label>
                                                                                            <ul id="rating" class="rating">
                                                                                                @for ($i = 1; $i < 6; $i++)
                                                                                                    <li class="star" title='Poor' data-value='{{$i}}'><i class="icofont-star"></i></li>
                                                                                                @endfor
                                                                                            </ul>
                                                                                        </div>
                                                                                        <!-- Single Form End -->
                                                                                    </div>
                                                                                    <div class="col-md-12">
                                                                                        <!-- Single Form Start -->
                                                                                        <div class="single-form">
                                                                                            <textarea name="comment_text" cols="100" rows="3" placeholder="Un petit commentaire sur l'avis ? Écrivez-le ici !" hidden></textarea>
                                                                                        </div>
                                                                                        <!-- Single Form End -->
                                                                                    </div>
                                                                                    <div class="col-md-12">
                                                                                        <!-- Single Form Start -->
                                                                                        <div class="single-form">
                                                                                            <button
                                                                                                type="submit"
                                                                                                name="rateBtn"
                                                                                                class="btn btn-primary btn-hover-dark"
                                                                                                value="1"
                                                                                            >
                                                                                                Evaluer
                                                                                            </button>
                                                                                        </div>
                                                                                        <!-- Single Form End -->
                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                        <!-- Reviews Form End -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Reviews Form Modal End -->
                                                        </div>
                                                        <!-- Tab Reviews End -->
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <!-- Certificates End -->

                                </div>
                                <div class="tab-pane fade" id="comments">

                                    <!-- Instructor Start -->
                                    <div class="instructor">
                                        <div class="row">
                                            <div class="enroll-tab-content">
                                                <div class="enroll-tab-title">
                                                    <h3 class="title">Commentaires (<span id="nb-comments">0</span>)</h3>
                                                </div>

                                                <!-- Answer Message Wrapper Start -->
                                                <div class="answer-message-wrapper" style="border-left : 0;">
                                                    <ul></ul>
                                                    <form action="" class="php-review-form" method="POST">
                                                        @csrf
                                                        <div class="message-form">
                                                            <div class="auhtor">
                                                                <img
                                                                    src="{{ Cookie::get('photo') }}"
                                                                    onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                                                    alt="Author"
                                                                    style="height: 70px; object-fit: cover;"
                                                                >
                                                            </div>
                                                            <div class="message-input">
                                                                <textarea name="comment_text" cols="100" rows="3" placeholder="Rédiger un commentaire" required></textarea>

                                                                <div class="message-btn">
                                                                    <button type="submit" name="mainCommentBtn" value="2" class="btn btn-primary btn-hover-dark">Envoyer</button>
                                                                    <!-- <button class="btn btn-secondary btn-hover-primary">Cancel</button> -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>

                                                </div>
                                                <!-- Answer Message Wrapper End -->
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Instructor End -->

                                </div>
                            @endif

                            <div class="tab-pane fade" id="enseignant">

                                <!-- Instructor Start -->
                                <div class="instructor">
                                    <div class="enroll-tab-content pt-1">
                                        <div class="single-team">
                                            <div class="team-thumb">
                                                <img src="{{$prof['pp_url']}} "onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';" alt="Author">
                                            </div>
                                            <div class="team-content">
                                                <a class="name mb-2 h4" href="{{route("profil", $ecu['matricule'])}}" >{{$prof['nom']. ' ' .$prof['prenom']}}</a>
                                                {{-- <h4 class="name mb-2">{{$prof['nom']. ' ' .$prof['prenom']}}</h4> --}}
                                                <div class="row mb-2">
                                                    <div class="col-lg-6 col-md-12 text-lg-end"><i class="icofont-ui-call text-primary"></i> ({{$prof['code_pays']}}) {{$prof['phone']}}</div>
                                                    <div class="col-lg-6 col-md-12 text-lg-start"><i class="fa fa-envelope text-primary"></i> {{$prof['email']}} </div>
                                                </div>
                                                <a href="{{route("profil", $ecu['matricule'])}}" target="_blank" class="btn btn-dark w-50">Profil <i class="fa fa-external-link"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Instructor End -->

                            </div>
                        </div>
                    </div>
                    <!-- Courses Enroll Tab Content End -->

                </div>
                <!-- Courses Enroll Content End -->
            </div>
            <!-- Courses Player End -->

            <!-- Courses Playlist Start -->
            <div class="courses-video-playlist">
                <button class="toggle-video-playlist btn btn-primary">
                    <span class="close"><i class="fa fa-times-circle"></i></span>
                    <span class="see-content">
                        <span class="text">Contenu EC</span>
                        <i class="fa fa-chevron-circle-left"></i>
                    </span>
                </button>
                <div class="playlist-layer"></div>
                <div class="playlist-title">
                    <h4 class="title w-100">Contenu du cours</h4>
                    <span> <span class="m-total">Aucun</span> média(s)</span>
                </div>

                <!-- Video Playlist Start  -->
                <div class="video-playlist">
                    @if ($chaps)
                        @php
                            $found = false;  // last media viewed by the student hasn't been found yet
                            $foundAt = -1;

                            $openNextChap = false;
                            $mIndex = 0; // temp var  to hold position of media in playlist
                        @endphp

                        <div class="accordion" id="videoPlaylist">

                            @foreach ($chaps as $chap)
                                @php
                                    if (strlen($chap['chapitrenumero']) == 1) {
                                        $chap["numero"] = '0'.$chap['chapitrenumero'];
                                    } else {
                                        $chap["numero"] = $chap['chapitrenumero'];
                                    }
                                @endphp

                                @if (!empty($medias[$chap['id_chapitre']]))
                                    @php
                                        $nbMedChap = count($medias[$chap['id_chapitre']]);  // nb of medias in the chapiter

                                        $pos = array_search($m['id'], array_column($medias[$chap['id_chapitre']],'id'));
                                        if($pos !== false){
                                            $nbMedViewed = $pos + (($m['evolution'] == 'finished') ? 1 : (($m["evolution"] == "started") ? 0.5 : 0));
                                            $found = true;
                                            $foundAt = $mIndex + $pos;

                                            $openNextChap = (($nbMedViewed === $nbMedChap) && ($m['evolution'] == "finished")) ? true : false; // Open next chapter only if he finished the last video of the current chapter
                                        } else {
                                            $nbMedViewed = $found ? 0 : $nbMedChap;
                                            $pos = -1;
                                        }

                                        $percent = $nbMedViewed*100 / $nbMedChap;

                                        // can view media list of chap ?
                                        if (
                                            ($nbMedViewed != 0) ||
                                            $openNextChap ||
                                            (($pos !== -1) && ($nbMedViewed === 0) && ($m['evolution'] === 'NONE'))
                                        ) {
                                            $slide = "true";
                                            $openNextChap = false;
                                        } else {
                                            $slide = "false";
                                        }
                                    @endphp
                                    <!-- Accordion Items Start  -->
                                    <div class="accordion-item {{ ($pos !== -1) ? 'active-block' : ''}}">
                                        <button class="{{ ($pos !== -1) ? '' : 'collapsed'}}" type="button" data-bs-toggle="collapse" data-bs-target="#chap_{{$chap['id_chapitre']}}" data-slide="{{$slide}}">
                                            <p>Chapitre {{ $chap["numero"] }} : {{$chap['chapitreintitule']}}</p>
                                            <div class="total-duration" id="progress_{{$chap['id_chapitre']}}">
                                                <span class="progress-text">{{ number_format($percent, 0) }}% Terminé</span>
                                                <div class="d-inline float-right">
                                                    <span class="progress-pos">{{$nbMedViewed}}</span>/{{$nbMedChap}}
                                                </div>
                                                <div class="progress-bar">
                                                    <div class="progress-line" style="width: {{$percent}}%;"></div>
                                                </div>
                                            </div>
                                        </button>

                                        <div id="chap_{{$chap['id_chapitre']}}" class="accordion-collapse collapse {{ ($pos !== -1) ? 'show' : ''}}" data-bs-parent="#videoPlaylist">
                                            <nav class="vids">
                                                @foreach ($medias[$chap['id_chapitre']] as $mcpos => $multimedia)
                                                    @php
                                                        $mediaPos = $mIndex + 1;
                                                        if ($mediaPos < 10) {
                                                            $mediaPos = '0'.$mediaPos;
                                                        }

                                                        // classes of item!
                                                        $class = "link";

                                                        // last viewed media ?
                                                        if ($pos === $mcpos) {
                                                            $class .= " active";
                                                        }

                                                        // already finished viewing this media ?
                                                        if (
                                                            (($mcpos == $pos) && ($m["evolution"] == "finished")) ||
                                                            ($mcpos < $pos) ||
                                                            ($nbMedViewed == $nbMedChap)
                                                        ) {
                                                            $class .= " viewed";
                                                        }

                                                        // can play this item ?
                                                        if (
                                                               (!$found)
                                                            || ($mIndex <= $foundAt)
                                                            || ($found && ($m['evolution'] == 'finished') && ($mIndex == $foundAt + 1) ) // is next to play after the last played media
                                                        ) {
                                                            $class .= " play";
                                                        }

                                                        // media type
                                                        $type = mediaType($multimedia['ext']);

                                                        // coded version of evolution of student
                                                        if($mcpos == $pos){
                                                            if ($m["evolution"] == "finished") {
                                                                $state = "1";
                                                            } else if ($m["evolution"] == "started") {
                                                                $state = "0";
                                                            } else {
                                                                $state = "-1";
                                                            }
                                                        } else if (($nbMedViewed == $nbMedChap) || ($mcpos < $pos)) {
                                                            $state =  "1";
                                                        } else {
                                                            $state =  "-1";
                                                        }
                                                    @endphp
                                                    <a
                                                        class="{{$class}}"
                                                        href="{{ mediasAsset($multimedia['url']) }}"
                                                        data-type="{{$type}}"
                                                        data-pos="{{$mIndex}}"
                                                        data-chap-pos="{{$mcpos}}"
                                                        data-all="{{$nbMedChap}}"
                                                        data-chap="{{$multimedia['chap_id']}}"
                                                        data-state='{{$state}}'
                                                        data-item='{{$multimedia["id"]}}'
                                                        data-save="{{ $multimedia['downloadable'] ? 'true' : 'false' }}"
                                                    >
                                                        <p>{{ $mediaPos.'. '. $multimedia['titre']}}</p>
                                                    </a>

                                                    @php
                                                        $mIndex++;
                                                    @endphp
                                                @endforeach
                                            </nav>
                                            <div class="quizz" id="quiz{{$multimedia['chap_id']}}" {{($nbMedViewed == $nbMedChap)? '' : 'hidden'}}>
                                                <a role="button" class="btn btn-success btn-sm btn-block text-white my-2">QCM ?</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Accordion Items End  -->
                                @else
                                    <div class="accordion-item">
                                        <button class="collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne{{$chap['id_chapitre']}}" data-slide="true">
                                            <p>Chapitre {{ $chap["numero"] }} : {{$chap['chapitreintitule']}}</p>
                                        </button>

                                        <div id="collapseOne{{$chap['id_chapitre']}}" class="accordion-collapse collapse" data-bs-parent="#videoPlaylist">
                                            <nav class="vids">
                                                <a href="javascript:void(0)" style="color: #71718a;">
                                                    Aucun média pour ce chapitre!
                                                </a>
                                            </nav>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @else
                        @include('partials.nodata', [
                            "width" => "50%",
                            "msg" => 'Aucun chapitre disponible pour cet EC'
                        ])
                    @endif
                </div>
                <!-- Video Playlist End  -->

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

            <!-- Quizz Case -->
            <div class="w-100 bg-secondary" id="quiz-div">
                <div class="testview-section p-0">
                    <div class="auto-container" style="padding: 10px 0px;">
                        <div class="inner-container p-2 my-4">
                            <div class="upper-box">
                                <div class="question-box">
                                </div>
                            </div>
                            <div class="lower-box p-2 ">
                                <div class="quiz-form ml-0">
                                    <div class="question bg-light" style="padding: 10px; border-radius: 6px;">
                                        <div class="card bg-transparent quiz-form-box border-0">
                                            {{--  --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-100 d-flex justify-content-center my-2">
                                <button class="btn" style="border-radius: 15px;" id="btnQuiz" disabled>Suivant <i class="fa fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Quizz Case-->

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

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

@endsection

@section('script')
    <!-- video js -->
    <script src="{{asset('video-js/video.min.js')}}"></script>
    <script src="{{asset('video-js/videojs-vjsdownload.min.js')}}"></script>
    <script src="{{asset('video-js/plugins/videojs-resolution-switcher.js')}}"></script>

    <!-- zoom-image.js -->
    <script src="{{ asset('zoom-image-js/dist/zoom-image.js')}}" type="text/javascript"></script>
    <script src="{{ asset('refonte/js/image-viewer.js')}}" type="text/javascript"></script>
    <!-- Block-UI -->
    <script src="{{ asset('assets/libs/block-ui/jquery.blockUI.js') }}"></script>
    {{-- include page's specific scripts here --}}
    <script type="text/javascript" src="{{ asset('lib/MathJax/MathJax.js')}}?config=TeX-AMS_HTML,{{asset('lib/MathJax/config/local/local.js')}}"></script>
    {{-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML"></script> --}}

    
    <!-- EnlighterJS -->
    <script type="text/javascript" src="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.js')}}"></script>

    <script>
        const type = @json(mediaType(), JSON_PRETTY_PRINT);

        const AWS_URL = @json( config('app.aws_url'), JSON_PRETTY_PRINT);

        // playlist items
        const list = $('.vids .link');

        let next = parseInt($('.vids .active').attr('data-pos'));
        next = {
            pos: next+1,
            el: $(list[next+1]),
        };

        // players
        let player = null;
        const zImage = new ZoomImage;

        const monthNames = ['Janvier', 'février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];

        const blockOptions = {
            message: '<i class="fa fa-refresh fa-spin text-dark"></i>',
            // timeout: 2000, //unblock after 2 seconds
            overlayCSS: {
                backgroundColor: 'rgb(0 0 0 / 21%)',
                opacity: 0.5,
                cursor: 'wait'
            },
            css: {
                border: 0,
                padding: 0,
                backgroundColor: 'transparent'
            },
        };
        const targetDiv = $('.courses-enroll-tab-content');

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

            // Set texts in DOM
            $(".m-total").text(
                list.length < 10 ? "0"+ list.length : list.length
            );
            $(".courses-enroll-title .title").text($(".vids .active").find("p").text());

            // view ecu's media list
            $(".toggle-video-playlist .close").on("click", function (){
                $(".toggle-video-playlist").addClass("reduced");
            });

            $(".toggle-video-playlist .see-content, .playlist-layer").on("click", function() {
                $(".courses-video-playlist").toggleClass("show");

                if (!$(".toggle-video-playlist").hasClass("reduced")) {
                    $(".toggle-video-playlist").addClass("reduced");
                }

                // icon state
                if ($(".courses-video-playlist").hasClass("show")) {
                    $(".toggle-video-playlist .see-content i").attr("class", "fa fa-chevron-circle-right");
                } else {
                    $(".toggle-video-playlist .see-content i").attr("class", "fa fa-chevron-circle-left");
                }
            });


            $('#rating').children('li').on('click', function() {
                console.log('here');
                let star = parseInt($(this).data('value'));
                if (star != null) {
                    $('#reviewsModal').find('textarea').attr('hidden',false);
                    $('button[name="rateBtn"]').attr("hidden",false);
                    $('input[name="rate"]').attr('value', star);
                }
            });

            // Display chap
            // $('.accordion-item button[data-slide]').on('click', function(e) {
            //     e.preventDefault();

            //     if($(this).attr('data-slide') !== "true"){
            //         showToastr("danger","Terminez les Médias précedents d'abord");
            //         return false;
            //     }
            // });

            // view media and its details
            $('.vids a.link').on("click", playListItem);

            /* video stuff*/
            if ($("#my-player").length) {
                player = videojs('my-player',  {
                    playbackRates: [.25,.5,1, 1.5, 2],
                    html5: {
                        hls: {
                            overrideNative: !videojs.browser.IS_SAFARI
                        }
                    },
                    plugins: {
                        vjsdownload:{
                            beforeElement: 'playbackRateMenuButton',
                            textControl: 'Download video',
                            name: 'downloadButton'
                        },
                        videoJsResolutionSwitcher: {
                            default: 'low',
                            dynamicLabel: true
                        }
                    }
                });

                player.on('ready', function (){
                    $('button.vjs-vjsdownload').first().attr('hidden', $('vids .link.active').parents('a').attr('data-save') === "false");
                });

                player.on('play', function(){
                    console.log("player starts");
                    updateState('video',0);
                });

                player.on('ended', function(){
                    console.log("player ends");
                    updateState('video',1);
                });
            }

            // image viewer
            if ($("#image-tag").length) {
                zImage.init("image-tag", {
                    onInit: onZImageInit,
                    onUpdated: onZImageUpdated,
                    onSetup: function(options) {
                        onZImageSetup(options);

                        console.log("Image view starts");

                        // mark current media as read !
                        if ($('#image-div').is(':visible')) {
                            updateState("image",1);
                        }
                    },
                });
            }

            // all submitted data
            $('.php-review-form').on('submit', pushReviews);

            // disp reviews tab
            $('button.reviews-tab').on('click', function () {
                const o = {
                    s: parseInt($('.vids a.active').attr('data-state')),
                    m: $('.vids a.active').attr('data-item'),
                };
                // console.log(o);

                targetDiv.block(blockOptions);

                $('.reviews-wrapper').empty();


                $.ajax({
                    url: "{{route('getReviewData',':p1')}}".replace(':p1',o.m),
                    type: 'GET',
                    data: {},
                    success: function(data) {
                        // console.log(data);
                        let stats = data.stats,
                        reviews = data.reviews,
                        totals = data.totals,
                        all_users = data.all_users,
                        rating = 0,
                        isProf = false,
                        html = ``,
                        meta = { // TODO : get meta from backend !
                            'prof_PPath' : 'https://progiciel.geststudent.net/Admin/',
                            'student_PPath' : 'https://progiciel.geststudent.net/Inscription/'
                        };

                        const url = "{{route('setMediaReviews',':p1')}}".replace(':p1',o.m);

                        $('#nb-eval').html(totals[1]);

                        $($(".single-rating").get().reverse()).each((e, ind) => {
                            let key = e+1;
                            let rate = stats[key];
                            rating += key*rate; //compte à partir de 1

                            $(ind).attr('data-rate', rate);
                            //$(ind).find('.rating-bar').css('width', key*20);
                            $(ind).find('.rating-line').css('width', ((rate*100) / ( (totals[1]) ? totals[1] : 1)).toFixed(2)+'%');

                        });

                        rating = rating/( (totals[1]) ? totals[1] : 1);  // prevent division by 0

                        $('#total-rating').html(rating.toFixed(2));

                        if(data.rated){
                            $('.reviews-btn').remove();
                            $('#no-rate-text').hide();
                        } else {
                            $('#no-rate-text').hide();
                            if (o.s === 1){
                                if (!($('.reviews-btn').length > 0)) {
                                    $(`<div class="reviews-btn pt-0" style="display: none;">
                                        <button type="button" class="btn btn-primary btn-hover-dark" data-bs-toggle="modal" data-bs-target="#reviewsModal">Evaluer</button>
                                    </div>`).insertAfter('#no-rate-text');
                                }
                                if (totals[1] == 0) {
                                    $('#no-rate-text').show();
                                }
                                $('.reviews-btn').show();
                                setupRateSystem(o);
                            } else {
                                if ($('.reviews-btn').length > 0) {
                                    $('.reviews-btn').remove();
                                }
                            }
                        }


                        if (reviews.length > 0) {
                            html = ``;
                            reviews.reverse().forEach(review => {
                                let user = {
                                            'nom'   :'inconnu',
                                            'prenom':''
                                        };

                                user = all_users[review["matricule"]] ? all_users[review["matricule"]][0] : user;

                                isProf = ( all_users[review["matricule"]] &&
                                            all_users[review["matricule"]][0]['profession'] &&
                                            (all_users[review["matricule"]][0]['profession']).toLowerCase() == "enseignant"
                                        ) ? true : false;

                                html += defineHTML(review, user, isProf, meta, 'review');
                            });

                        }

                        $('.reviews-wrapper').html(html);

                        targetDiv.unblock();
                    },
                    error: function (error) {
                        console.log(error);

                        targetDiv.unblock();
                        showToastr("danger","Erreur lors du chargement!");
                    }

                });
            });

            // disp comments tab
            $('button.comments-tab').on('click', function () {
                const o = {
                    s: parseInt($('.vids a.active').attr('data-state')),
                    m: $('.vids a.active').attr('data-item'),
                };
                // console.log(o);

                targetDiv.block(blockOptions);

                $('.answer-message-wrapper ul:first').empty();

                $.ajax({
                    url: "{{route('getReviewData',':p1')}}".replace(':p1',o.m),
                    type: 'GET',
                    data: {},
                    success: function(data) {
					    // console.log("Comments data", data);

                        let all_users = data.all_users,
                        comments = data.comments,
                        replies = data.replies,
                        isProf = false,
                        html = temp = ``,
                        nb_reply = nb_hide = 0,
                        toDisplay = 3,
                        nb_comments = comments.length,
                        meta = { // TODO : get meta from backend !
                            'prof_PPath' : 'https://progiciel.geststudent.net/Admin/',
                            'student_PPath' : 'https://progiciel.geststudent.net/Inscription/'
                        },
                        user, repUser;

                        const url = "{{route('setMediaReviews',':p1')}}".replace(':p1',o.m);


                        comments.forEach((comment, cPos) => {
                            user = {
                                'nom'   :'inconnu',
                                'prenom':''
                            };

                            user = all_users[comment["matricule"]] ? all_users[comment["matricule"]][0] : user;

                            isProf = ( all_users[comment["matricule"]] &&
                                            all_users[comment["matricule"]][0]['profession'] &&
                                            (all_users[comment["matricule"]][0]['profession']).toLowerCase() == "enseignant"
                                        ) ? true : false;

                            comment.media_id = o.m;

                            html += defineHTML(comment, user, isProf, meta, 'comment');

                            temp = '';
                            if (replies[comment['id']]) {
                                replies[comment['id']].forEach(reply => {
                                    nb_reply += 1;
                                    repUser = {
                                        'nom'   :'inconnu',
                                        'prenom':''
                                    };

                                    repUser = all_users[reply["matricule"]] ? all_users[reply["matricule"]][0] : repUser;

                                    isProf = ( all_users[reply["matricule"]] &&
                                                    all_users[reply["matricule"]][0]['profession'] &&
                                                    (all_users[reply["matricule"]][0]['profession']).toLowerCase() == "enseignant"
                                                ) ? true : false;

                                    temp += defineHTML(reply, repUser, isProf, meta, 'reply') + `</li>`;

                                });
                                temp = `<ul class="message-replay">` + temp + `</ul>`;
                            }
                            html += temp + `</li>`;
                        });

                        nb_comments = nb_comments + nb_reply;
                        nb_hide = nb_comments - toDisplay;

                        $('#nb-comments').html(nb_comments);
                        $('.loadmore').remove();
                        $('.answer-message-wrapper ul:first').html(html);

                        if (nb_hide > 0) {
                            if ($('li.main-comment').length > toDisplay) {
                                // $('li.main-comment').slice(toDisplay, nb_comments).hide();
                                $('li.main-comment:gt('+(toDisplay-1)+')').attr("hidden",true);
                                $(`<a class="loadmore closed" href="#"> Plus de commentaires (${nb_comments - $('.single-message:visible').length}) </a>`).insertBefore('.answer-message-wrapper .php-review-form');
                            }
                        }

                        //reply to a comment
                        $('.single-message').find('.collapse').on('show.bs.collapse',function(e){
                            let el = $(e.currentTarget);
                            let a = $('a[data-bs-target="#'+el.attr('id')+'"]');
                            a.attr('hidden',true);
                            el.find('button#no-rep').on('click', function(e){
                                e.preventDefault();
                                el.collapse('hide');
                                a.attr("hidden",false);
                                $(e.currentTarget).parents('form').find('textarea').first().val("");
                            });
                        });

                        //show more / less
                        $('a.loadmore').on('click', function(e){
                            e.preventDefault();
                            if($(this).hasClass('closed')){
                                $('li.main-comment:gt('+(toDisplay-1)+')').attr("hidden",false);
                                $(this).html('Voir moins <i class="fa fa-angle-double-up"></i>');
                            } else {
                                $('li.main-comment:gt('+(toDisplay-1)+')').attr("hidden",true);
                                $(this).html('Voir plus <i class="fa fa-angle-double-down"></i>');
                            }
                            $(this).toggleClass('closed');
                        });

                        $('.answer-message-wrapper').find('form').attr('action', url);

                        $('form.php-reply-form').on('submit', function(e){
                            pushReviews(e);
                        })

                        targetDiv.unblock();
                    },
                    error: function (error) {
                        console.log(error);

                        targetDiv.unblock();
                        showToastr("danger","Erreur lors du chargement!");
                    }

                });
            });

            //Start Quiz
            $('div.quizz a').on('click', function(){
                MathJax.Hub.Typeset();

                const btn = $(this);
                let c = btn.parents('div.quizz').attr('id');
                c = c.substr(4);

                btn.block(blockOptions);

                // Get quizzes
                $.ajax({
                    url: "{{route('quiz',':chapId')}}".replace(':chapId',c),
                    type: 'GET',
                    data: {},
                    success: function(data) {
                        let qcms = data.qcms;
                        console.log(data);

                        btn.unblock();

                        if(data.hadDoneQuiz){
                            showToastr("warning","Vous avez déjà testé vos connaissances pour ce chapitre !");
                            return false;
                        }

                        if(qcms.length == 0){
                            showToastr("info","Pas de QCMs disponible pour ce chapitre!");
                            return false;
                        }

                        let html = "";
                        $('.quiz-form-box').html("");
                        qcms.forEach(function (q,i){
                            let cont = "";
                            i = i+1;
                            q.reps.forEach(function (r,j){
                                cont = cont +
                                `<div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="qcm${q.many_responses ? (i+'-'+j) : i }" value="" id="q${i}check${j}" best="${r.statut}">
                                    <label class="form-check-label text-dark" for="q${i}check${j}"">
                                        ${r.proporeponse}
                                    </label>
                                </div>`;
                            });

                            html = html +
                            `<div class="lower-inner-box mb-4 w-100" style="opacity: ${ (i == 1)?'1':'0'};" id="qcm${i}" ${ (i == 1)?'':'hidden'}>
                                <h6 class="text-dark font-size-6 fw-bold mb-0">${i}. ${q.intitulequestion}</h6>
                                ${q.many_responses ? '<small class="d-block">[Plusieurs réponses possibles]</small>' : ''}
                                <fieldset class="mt-2">
                                    <div class="form-group">` +
                                        cont +
                                    `</div>
                                </fieldset>
                            </div>`	;
                        });

                        // Inits
                        $('.question-box').html(
                            `<h6 class="sidebar-title bg-light text-dark fw-bold">Question <span class="mr-1" id="nb">1</span>/<span class="ml-1">${qcms.length}</span></h6>
                            <h6 class="sidebar-title bg-light text-dark fw-bold" hidden>Résultats !</h6>`
                        );

                        $('#btnQuiz').html('Suivant <i class="fa fa-chevron-right"></i>');
                        $('#btnQuiz').removeClass("btn-success").addClass('btn-primary');
                        $('#btnQuiz').attr('hidden',false);

                        $('.quiz-form-box').html(html);

                        // nextQuiz btn state
                        $('.quiz-form-box input[type="checkbox"]').on('change', function() {
                            if ($(this).parents('fieldset').find(":checked").length > 0) {
                                $('#btnQuiz').attr('disabled',false);
                            } else {
                                $('#btnQuiz').attr('disabled',true);
                            }

                            $('input[name='+$(this).attr('name')+']').not(this).prop('checked', false);
                        });

                        // nextQuiz btn click event
                        $('#btnQuiz').on('click', function(){
                            let cq = $('div.lower-inner-box:not([hidden])');
                            let nq = cq.next();

                            $('html, body').animate({
                                scrollTop: $('.courses-video-player').offset().top - 90
                            }, 1000);

                            cq.animate({
                                opacity: 0
                            }, 500, function() {
                                cq.attr('hidden',true);
                                cq.find('input[type="checkbox"]').attr('disabled',true);

                                // check answer(s) of user
                                let checked = cq.find('input[type="checkbox"]:checked');
                                checked.each((id, el) => {
                                    if($(el).attr('best') === "F"){
                                        $(el).next().removeClass("text-dark").addClass("text-danger");
                                    } else {
                                        $(el).next().removeClass("text-dark").addClass("text-success fw-bold");
                                    }
                                });

                                // mark good answer(s)
                                cq.find('input[type="checkbox"][best="V"]').next().removeClass("text-dark").addClass("text-success fw-bold");
                            });

                            if(nq.length){
                                nq.animate({
                                    opacity: 1
                                }, 500, function() {
                                    $("#nb").text(nq.attr('id').substr(3));
                                    nq.attr('hidden',false);

                                    $('#btnQuiz').attr('disabled',true);
                                    if(nq.next().length == 0){
                                        $('#btnQuiz').text("Voir mes résultats");
                                        $('#btnQuiz').removeClass("btn-primary").addClass('btn-success');
                                    }
                                });
                            } else {
                                $('div.lower-inner-box').animate({
                                    opacity: 1
                                }, 500, function() {
                                    $('#btnQuiz').attr('hidden',true);
                                    $('#nb').parents('h6').attr('hidden',true);

                                    $('#nb').parents('h6').next().attr('hidden',false);
                                    $('div.lower-inner-box').attr('hidden',false);
                                });
                            }
                        });

                        // show quiz div
                        $('.courses-video-player').hide();
                        $('#quiz-div').show();

                        // close the ecu content list
                        $(".toggle-video-playlist .see-content").trigger("click");

                        $('html, body').animate({
                            scrollTop: $('#quiz-div').offset().top - 81
                        }, 1000);

                        MathJax.Hub.Typeset();

                        $('pre, code').enlight({
                            theme: 'bootstrap4'
                        });
                    },
                    error: function(error) {
                        console.log(error);
                        btn.unblock();
                        showToastr("danger","Petite erreur lors du chargement des QCMs de ce chapitre !");
                    }
                });

            });

            // UX : autofocus on notif-linked item
            const hash = document.location.hash.slice(1);
            if(hash.length && (hash.indexOf("item=") !== -1)) {
                let [item, action] = hash.slice(5).split(".");

                // focus on item !
                $(`[data-item="${item}"]`).trigger("click");

                // open corresponding tab ...
                if (action === "COMMENTAIRE") $(".comments-tab").trigger("click");
                else if(action === "RATE")    $(".reviews-tab").trigger("click");
                else  {
                    // nothing to do here
                }
            }
        });

        /*  Media Play stuff */
        function playListItem(e) {
            e.preventDefault();
            const item = $(e.currentTarget);

            if(item.hasClass('play')) {
                //make quiz  div visible
                $('.courses-video-player').show();
                $('#quiz-div').hide();

                $(".vids .active").removeClass('active');
                item.addClass('active');

                $(".courses-enroll-title .title").text(item.find("p").text());

                playMedia(item.attr("href"), item.attr('data-save') === "true");

                // Display media details
                if (!($('#description').hasClass('active'))) {
                    $('.enroll-tab-menu ul.nav').find('li button.active').removeClass('active');
                    $('div.tab-pane.show').removeClass('active show');
                }

                $('#description').find('table').hide();
                $('#table'+ item.attr('data-item')).show();
                $('.description-tab').addClass('active');
                $('#description').addClass('active show');

                // close the ecu content list if it was opened
                if($(".courses-video-playlist").hasClass("show")) {
                    $(".toggle-video-playlist .see-content").trigger("click");
                }

                // Update next element in playlist
                let i = parseInt(item.attr('data-pos'));

                next = { pos: i+1, el: $(list[i+1]) };
            } else {
                item.removeClass('active')
                showToastr("danger","Terminez les Médias précedents d'abord");

                return false;
            }

        }

		function playMedia(msrc, download){
            $('.vidcontainer').block(blockOptions);

            // stop previous media's stuff
            if($('#video-div:visible').length){
                player.pause();
            } else if ($('#pdf-div:visible').length) {
                if (typeof stopPDFViewerScrollListener === "function") {
                    stopPDFViewerScrollListener(); // redefined in viewer.html
                    delete stopPDFViewerScrollListener;
                }
            } else {
                // nothing to do for images !
            }

			let ext= msrc.split('/').pop().split(".").pop().toLowerCase();
			if(type[ext] === 'video'){
				// player.src({type: 'video/'+ext, src: msrc});
				player.src({type: 'application/x-mpegURL', src: msrc});
				$('button.vjs-vjsdownload').first().attr('hidden',!download);

                // updateState is called within hook of video player
			} else if (type[ext] === 'pdf') {
				$('#pdf-tag').attr(
                    'src',
                    $('#pdf-tag').data("viewer-path") + '?file='+ msrc
                );

                console.log("PDF view starts");

				updateState(type[ext], 0);
			} else {
				$('#'+(type[ext]+'-tag')).attr('src',msrc);

                // updateState is called within hook of zoom-image
			}

			$('.mcontainer').hide();
			$('#'+type[ext]+'-div').show();

            setTimeout(() => {
                $('.vidcontainer').unblock();
            }, 1000);

			// animate
			$('html, body').animate({
				scrollTop: $('#'+type[ext]+'-div').offset().top - 82
			}, 1000);
		}

        function updateState(mtype, ns){
			return new Promise((resolve, reject) => {
				let el = $('.vids .active');
				const o = {
                    s: parseInt(el.attr('data-state')),
                    m: el.attr('data-item'),
                };

				let i = parseInt(el.attr('data-pos'));

				// if((o.s < ns) && (next.pos === i || next.pos === i + 1)){
				if(o.s < ns) {
					o.s = ns;

                    // chg media status
					$.ajax({
						url: "{{route('updateMediaStatus')}}",
						type: 'POST',
						data: o,
						success: function(data) {
                            // showToastr("success","Votre progression a été enregistré !");
							el.attr('data-state', ns);

							if(o.s === 1){
                                el.addClass("viewed");

                                const pos = parseInt(el.attr('data-chap-pos')) + 1;
                                const chap = '#progress_'+el.attr('data-chap');

								const p = pos * 100 /parseInt(el.attr('data-all'));

                                $(chap + " .progress-text").text(p.toFixed(2)+'% Terminé');
                                $(chap + " .progress-pos").text(pos);
                                $(chap + " .progress-line").css('width', p+'%');;

								if(next.el.length){
									showToastr("info","Vous pouvez suivre le média suivant");
									console.log("enabled next media view");

									next.el.addClass('play');
									next.el.parents('.accordion-item').children('button[data-slide]').attr('data-slide',"true");
								}

                                // RATE
                                if($('.reviews-tab').hasClass('active')){
                                    setupRateSystem(o);
                                }

								//show quiz btn
								if (p == 100) {
									$('#quiz'+el.attr('data-chap')).attr("hidden",false);
									showToastr("success","Média terminé! Vous pouvez voir s'il y a de QCMs disponible pour ce chapitre.");
								}
							}
							resolve();
						},
						error: function(error) {
							console.log(error);
							showToastr("danger","Erreur lors de l'enregistrement de votre progression! Veuillez aller à la fin du "+mtype.toUpperCase()+" dans quelques instants.");
							reject(error);
						}
					});
				}
			});
		}

        /* Media details */
        // Rate system
        function setupRateSystem(o){
            const url = "{{route('setMediaReviews',':p1')}}".replace(':p1',o.m);

            $('#reviewsModal').find('form').attr('action', url);
            $('button[name="rateBtn"]').on ('click', function(){
                $('#reviewsModal').modal('toggle');
            });
            $('button[name="rateBtn"]').attr('hidden',true);
            $('input[name="rate"]').attr('value', 0);
            $('#reviewsModal').find('textarea').attr('hidden',true);
            $('#reviewsModal').find('textarea').val('');
            $('#rating').children('li').find('i').addClass('icofont-star').removeClass('star fa-star-o');

        }

        // register review
        function pushReviews(e){
            e.preventDefault();

            targetDiv.block(blockOptions);
            // $('.pm').addClass('active');
            // $('.pm').show();

            let div = "";
            let fdata = {};
            let form = $(e.currentTarget);

            form.find('[name]').get().forEach(function(el){
                fdata[el.name] = el.value;
            });
            // console.log(fdata);

            $.ajax({
				url: form.attr('action'),
				type: 'POST',
				data: fdata,
                success: function(data) {
                    // console.log(data);
                    let o = data.saved,
                    toDisplay = 3,
                    nb_comments = 0;

                    switch (form.find('button[name]').attr('value')) {
                        case "1": {
                            $('#no-rate-text').hide();
                            $('.reviews-btn').remove(); // prevent rating again

                            let oldSetRate = parseInt($('.single-rating:nth-last-child('+o.rate+')').attr('data-rate'));
                            let nbRate = parseInt($('#nb-eval').html());
                            let rating = parseFloat($('#total-rating').html());

                            // console.log(oldSetRate,"-",nbRate,"-",rating);

                            rating = (rating * nbRate + parseInt(o.rate))/(nbRate + 1);

                            // console.log(oldSetRate + 1,"-",nbRate + 1,"-",rating);

                            //set rate
                            nbRate += 1;
                            $('.single-rating:nth-last-child('+o.rate+')').attr('data-rate', oldSetRate + 1);
                            $('#nb-eval').html(nbRate);
                            $('#total-rating').html(rating.toFixed(2));

                            $('.single-rating').each((e, ind) => {
                                let rate = parseInt($(ind).attr('data-rate'));

                                $(ind).find('.rating-line').css('width', ((rate*100) / nbRate).toFixed(2)+'%');

                            });

                            div =  defineHTML(o, [], false, [], 'review');

                            $('.reviews-wrapper').prepend(div);

                            console.log("rated case");
                            break;
                        }
                        case "2": {
                            div = defineHTML(o, [], false, [], 'comment') + `</li>`;

                            $('.answer-message-wrapper ul:first').append(div);


                            nb_comments = parseInt($('span#nb-comments').html()) + 1;
                            $('span#nb-comments').html(nb_comments);

                            if(nb_comments > toDisplay){
                                $('li.main-comment').last().attr("hidden",false);
                                $('a.loadmore').attr('hidden',false);
                                // $('li.main-comment').last().attr("hidden", $('a.loadmore').hasClass('closed') )
                            }

                            $('.single-message').find('.collapse').last().on('show.bs.collapse',function(e){
                                let el = $(e.currentTarget);
                                let a = $('a[data-bs-target="#'+el.attr('id')+'"]');
                                a.attr('hidden',true);
                                el.find('button.norep').on('click', function(e){
                                    e.preventDefault();
                                    el.collapse('hide');
                                    a.attr("hidden",false);
                                    $(this).parents('form').find('textarea').first().val("");
                                });
                            });

                            $('.single-message').find('.collapse').last().find('form.php-reply-form').on('submit', function(e){
                                pushReviews(e);
                            })

                            form.find('textarea').first().val("");

                            console.log("main comment case");
                            break;
                        }
                        case "3":{
                            div = defineHTML(o, [], false, [], 'reply') + `</li>`;

                            let mainDiv = $('#replyForm'+fdata.comment_id).parents('div.single-message');

                            if (mainDiv.next().length) {
                                mainDiv.next().append(div);
                            } else {
                                $('#replyForm'+fdata.comment_id).parents('li.main-comment').append(`<ul class="message-replay">` + div + `</ul>`);
                            }

                            nb_comments = parseInt($('span#nb-comments').html()) + 1;
                            $('span#nb-comments').html(nb_comments);

                            form.find('textarea').first().val("");
                            $('#replyForm'+fdata.comment_id).collapse('hide');
                            $('a[data-bs-target="#replyForm'+fdata.comment_id+'"]').attr("hidden",false);

                            console.log("reply comment case");
                            break;
                        }
                        default:
                            break;
                    }

                    targetDiv.unblock();
                    // $('.pm').hide();
                    // $('.pm').removeClass('active');
					showToastr("success", data.msg);
				},
				error: function(error) {
					console.log(error);

                    targetDiv.unblock();
                    // $('.pm').hide();
                    // $('.pm').removeClass('active');
					showToastr("danger", error.msg);
				}
			});
        }


        // Unique Review, Comment and Reply Content
        function defineHTML(d, u, t, m, el) {
            // d : data (array of review, comment or reply)
            // u : user concerned by review, comment or reply
            // t : user type (is a prof [true] or a student [false] ?)
            // m : meta path linked to user type
            // e : element (review, comment or reply)
            let content = ``, len = 0;

            if (u) {
                len = (typeof(u) === 'object') ? Object.keys(u).length : u.length;
                if (len > 0) {
                    d.cheminPhoto = (t ? m.prof_PPath : m.student_PPath) + u.cheminPhoto;
                } else {
                    u = {
                        'nom' : 'moi',
                        'prenom': ''
                    };
                }
            }

            switch (el) {
                case 'review':
                    content = `
                        <div class="single-review p-4" role="group">
                            <div class="review-author">
                                <div class="author-thumb">
                                    <img
                                        src="${ AWS_URL + u.cheminPhoto }"
                                        onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                        alt="Author"
                                        style="height: 90px; object-fit: cover;"
                                    >`;
                                    if (d.comment_text != null ||
                                        d.comment_text !== ''
                                    ) {
                                        content += `<i class="icofont-quote-left"></i>`;
                                    }
                    content += `</div>
                                <div class="author-content">
                                    <h4 class="name">${ u.nom + ' ' + u.prenom }</h4>
                                    <span class="designation">${created_at(d.created_at)}</span>
                                    <span class="rating-star">
                                            <span class="rating-bar" style="width: ${( (parseInt(d.rate)* 100) / 5).toFixed(2)}%;"></span>
                                    </span>
                                </div>
                            </div>
                            <p ${ ((d.comment_text != null) || (d.comment_text !== '')) ? '' : 'd-none'}>
                                ${(d.comment_text != null) ? formatMsg($.trim(d.comment_text)) : ''}
                            </p>
                        </div>
                    `;

                    break;

                default :
                    content = `<li class="${ (el === "comment") ? 'main-comment' : '' }">
                                <!-- Single Message Start -->
                                <div class="single-message">
                                    <div class="message-author">
                                        <div class="author-images">
                                            <img
                                                src="${ AWS_URL + u.cheminPhoto }"
                                                onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                                alt="Author"
                                                style="height: 70px; object-fit: cover;"
                                            >
                                        </div>
                                        <div class="author-content">
                                            <a class="name h6" href="${'{{route("profil",":p1")}}'.replace(':p1',((u.nom === 'moi')? '' : d.matricule))}" >
                                                <strong>${u.nom + '  ' + u.prenom}</strong>
                                                <span class="instructor ${ t ? '' : 'd-none'}">${ t ? 'Enseignant' : ''}</span>
                                            </a>
                                            <span class="time">${created_at(d.created_at)}</span>
                                        </div>
                                    </div>
                                    <p>${ formatMsg($.trim(d.comment_text)) }</p>`;

                                    if (el === "comment") {
                                        content += `
                                        <a href="#" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#replyForm${d.id}" aria-expanded="false"><i class="icofont-ui-messaging"></i> Répondre</a>
                                        <div class="collapse" id="replyForm${d.id}">
                                            <!-- Comment Form Start -->
                                            <form action="${'{{route("setMediaReviews",":p1")}}'.replace(':p1',d.media_id)}" method="POST" class="php-reply-form">
                                                @csrf
                                                <input type="hidden" name="comment_id" value="${d.id}" required>
                                                <div class="message-form">
                                                    <div class="message-input">
                                                        <textarea name="comment_text" cols="100" rows="3" placeholder="Répondre à ce commentaire" required></textarea>

                                                        <div class="message-btn">
                                                            <button class="btn btn-primary btn-hover-dark" type="submit" name="replyBtn" value="3">Envoyer</button>
                                                            <button class="btn btn-secondary btn-hover-primary" id="no-rep">Annuler</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            <!-- Comment Form End -->
                                        </div>
                                        `;
                                    }

                    content += `</div>
                                <!-- Single Message End -->`;
                break;
            }

            return content;
        }
    </script>
@endsection