@extends('layouts.base-refonte')

@section('title','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 */
        header {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 9999;
            background: #fff;
            -webkit-box-shadow: 0px 13px 35px -12px rgb(0 0 0 / 15%);
            box-shadow: 0px 13px 35px -12px rgb(0 0 0 / 15%);
        }

        @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;
        }

        #course-details table th {
            width: 20%;
        }
    </style>
@endsection

@section('content')
    @php
        $nbMed = array_sum(array_map("count", $medias)); // total of EC's media
        $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="false"
                                    >
                                    </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>{{$nbMed}}</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>
                                                                    </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">Aucun avis recueillis pour ce média</h4>
                                                                    </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>
                                                        </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>{{ $nbMed }}</span> média{{ ($nbMed > 1) ? 's' : '' }}</span>
                </div>

                <!-- Video Playlist Start  -->
                <div class="video-playlist">
                    @if ($chaps)
                        @php
                            $mIndex = 0; // temp var  to hold position of media in playlist
                            $nbMed = array_sum(array_map("count", $medias)); // total of EC's media
                        @endphp

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

                            @foreach ($chaps as $ind => $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
                                        $percent = $nbMedChap*100 / $nbMed;
                                    @endphp
                                    <!-- Accordion Items Start  -->
                                    <div class="accordion-item {{ ($ind == 0) ? 'active-block' : ''}}">
                                        <button class="{{ ($ind == 0) ? '' : 'collapsed'}}" type="button" data-bs-toggle="collapse" data-bs-target="#chap_{{$chap['id_chapitre']}}">
                                            <p>Chapitre {{ $chap["numero"] }} : {{$chap['chapitreintitule']}}</p>
                                            <div class="total-duration" id="progress_{{$chap['id_chapitre']}}">
                                                <span class="progress-text">{{ number_format($percent, 0) }}% des média(s) de l'Ec</span>
                                                <div class="d-inline float-right">
                                                    <span class="progress-pos">{{$nbMedChap}}</span>/{{$nbMed}}
                                                </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 {{ ($ind == 0) ? '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 play";

                                                        // media type
                                                        $type = mediaType($multimedia['ext']);
                                                    @endphp
                                                    <a
                                                        class="link play {{($mediaPos == 1) ? 'active' : ''}}"
                                                        href="{{ mediasAsset($multimedia['url']) }}"
                                                        data-type="{{$type}}"
                                                        data-pos="{{$mIndex}}"
                                                        data-chap-pos="{{$mcpos}}"
                                                        data-all="{{$nbMedChap}}"
                                                        data-chap="{{$multimedia['chap_id']}}"
                                                        data-item='{{$multimedia["id"]}}'
                                                    >
                                                        <p>{{ $mediaPos.'. '. $multimedia['titre']}}</p>
                                                    </a>

                                                    @php
                                                        $mIndex++;
                                                    @endphp
                                                @endforeach
                                            </nav>
                                        </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']}}">
                                            <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 -->

        </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>
    {{-- <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls.js@3.2.0/dist/videojs-contrib-hlsjs.min.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>

    <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');

        // 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() {
            // Set texts in DOM
            $(".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");
                }
            });

            // 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', false);
                });
            }

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

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

            // disp reviews tab
            $('button.reviews-tab').on('click', function () {
                const med = $('.vids a.active').attr('data-item');

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

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


                $.ajax({
                    url: "{{route('getReviewData',':p1')}}".replace(':p1',med),
                    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 = {
                            'prof_PPath' : 'https://progiciel.geststudent.net/Admin/',
                            'student_PPath' : 'https://progiciel.geststudent.net/Inscription/'
                        };

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

                        $('#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 (totals[1] == 0) {
                            $('#no-rate-text').show();
                        } else {
                            $('#no-rate-text').hide();
                        }


                        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();
                        // $('.pm').hide();
                        // $('.pm').removeClass('active');
                    },
                    error: function (error) {
                        console.log(error);

                        targetDiv.unblock();
                        // $('.pm').hide();
                        // $('.pm').removeClass('active');
                        showToastr("danger","Erreur lors du chargement!");
                    }

                });
            })

            // disp comments tab
            $('button.comments-tab').on('click', function () {
                const med = $('.vids a.active').attr('data-item');

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

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

                $.ajax({
                    url: "{{route('getReviewData',':p1')}}".replace(':p1',med),
                    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 = {
                            'prof_PPath' : 'https://progiciel.geststudent.net/Admin/',
                            'student_PPath' : 'https://progiciel.geststudent.net/Inscription/'
                        },
                        user, repUser;

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


                        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 = med;

                            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();
                        // $('.pm').hide();
                        // $('.pm').removeClass('active');
                    },
                    error: function (error) {
                        console.log(error);

                        targetDiv.unblock();
                        // $('.pm').hide();
                        // $('.pm').removeClass('active');
                        showToastr("danger","Erreur lors du chargement!");
                    }

                });
            });

            // 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();

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

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

                playMedia(item.attr("href"), 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'));

            } 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) {
                // stopPDFViewerScrollListener(); // defined 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',false);

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

        /* Media details */
        // 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 "2": {
                            div = defineHTML(o, [], true, [], '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, [], true, [], '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