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

@section('title','Gestion cours')

@section('css')
    <link href="{{asset('dist/jquery-ui/jquery-ui.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('Highcharts/code/css/highcharts.css')}}">
    <link rel="stylesheet" href="{{asset('assets/extra-libs/datatables.net-bs5/datatables.css')}}">
    <link href="{{asset('video-js/video-js.min.css')}}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{asset('refonte/css/players.css')}}">
    <style type="text/css">
        .alert {
            margin: 2rem 0;
        }

        .admin-tab-menu::before {
            display: block;
            content: " ";
            height: 100%;
            width: 30%;
            background: #309255;
            position: absolute;
            left: 0;
            top: 0;
            box-shadow: 11px 0px 0px 0px rgb(0 0 0 / 15%);
        }

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

        .rating-progress-bar .rating-line {
            height: 100%;
        }


        #wrapper {
            margin-top: 82px;
        }

        @media (max-width: 991px) {
            #wrapper {
                margin-top: 64px;
            }
        }

        p {
            white-space: initial;
        }

        .ec-wrapper {
            background: transparent;
            border-radius: 10px;
            border: 1px solid #00a95d;
            margin-top: 0.625rem !important;
            width: 100%;
        }

        .table-responsive{
            overflow-x: auto;
        }

        .ui-state-highlight,
        .ui-widget-content .ui-state-highlight,
        .ui-widget-header .ui-state-highlight {
            border: 1px dashed #309255 !important;
            background: #30925570 !important;;
            height: 3em;
            margin-bottom: .5rem;
        }

        .sortable {
            width: 100%;
        }

        .sortable li {
            margin: auto;
            padding: 0.4em;
            width: 95%;
            font-size: 1.2em;
        }

        .sortable li span:first-of-type {
            position: relative;
            left: -1.5em;
            width: 1px;
        }

        .detail-content {
            font-size: 0.8em;
        }

        .widget-information i {
            color: #309255;
            margin-right: 3px;
            font-size: 16px;
        }

        /* main-content-wrapper */
        @media (min-width: 992px) {
            .main-content-wrapper {
                padding-left: 170px;
            }
        }

        /* Chapter UI */
        .courses-video-playlist .video-playlist .accordion-item {
            background: #ebebeb;
            margin-bottom: 1em;
            text-align: left;
        }

        .accordion-header {
            border: 2px solid #ebebeb;
            overflow: hidden;
        }

        .courses-video-playlist .video-playlist .accordion-item button,
        .courses-video-playlist .video-playlist .accordion-item button.collapsed {
            background: white;
            padding: 15px;
        }

        .courses-video-playlist .video-playlist .accordion-item button p {
            max-width: 96%;
            color: #121212;
        }

        .courses-video-playlist .video-playlist .accordion-item button::before {
            top: 10px;
            right: 10px;
        }

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

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

        .accordion-button:not(.section-item)::after {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            top: 0;
            left: 0.25em;
            color: #3c3f40;
            border: 8px solid;
            border-bottom-color: transparent;
            border-right-color: #009e57;
            background: none !important;
            transform: none !important;
        }

        .accordion-body {
            padding: 0.5rem 1rem;
        }

        .courses-video-playlist .video-playlist .vids a.no-media {
            padding: 8px 40px;
        }

        .courses-video-playlist .video-playlist .vids a.no-media::before {
            left: 10px;
        }

        .section-item {
            border: 4px solid #ebebeb;
        }

        /* media list */
        .media-content {
            padding-left: 0.3125rem;
            padding-bottom: 0.625rem;
            margin-bottom: 0.3125rem;
        }

        .popover-test {
            display: inline-block;
            border: 1px solid lightgrey !important;
            padding: 0.3em 0.7em !important;
            background-color: #f7f7f7;
            border-radius: 10px;
            margin-right: 1em;
        }

        .popover-test:hover {
            opacity: .8;
        }

        /* 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"] .icofont-::before {
            content: "\eca6" !important;
        }

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

        a[data-type="image"] .icofont-::before {
            content: "\ef4b" !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;
        }

        /* Graph */
        #infoEC {
            padding: 0px 0px 0px 35px;
        }

        @media only screen and (max-width: 767px) {
            .graph {
                padding: 15px;
            }
        }

        /* Flex Column */
        .flex-column a {
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 500;
            color: #212832;
        }

        .list-unstyled h6 {
            font-weight: 300;
            margin-bottom: 10px;
            color: #8898aa;
            font-size: .75rem;
        }

        .table:not(.table-bordered) th,
        .table:not(.table-bordered) td {
            /* line-height: .35rem; */
            font-size: .85rem;
            color: #212832;
            border-top: 0;
            border-bottom: 0;
        }

        table.table-bordered.dataTable tbody td {
            font-weight: 400;
        }

        .table-bordered {
            border: 1px solid rgba(120,130,140,.13);
        }

        .table-bordered thead td,
        .table-bordered thead th {
            border-bottom-width: 2px;
            font-weight: 500;
        }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid rgba(120,130,140,.13);
        }
        .table-bordered td, .table-bordered th {
            border: 1px solid rgba(120,130,140,.13);
        }
        .table td, .table th {
            font-size: 0.8rem;
            /* padding: 0.9375rem 0.4rem; */
            vertical-align: top;
            border-top: 1px solid rgba(120,130,140,.13);
            color: black;
        }

        div.dataTables_wrapper div.dataTables_length label,
        div.dataTables_wrapper div.dataTables_filter label,
        div.dataTables_wrapper div.dataTables_info,
        .page-item.disabled .page-link  {
            font-weight: 500;
            margin-bottom: 5px;
            color: black;
        }

        .students-courses {
            padding-top: 1em;
            margin-left: 1.5rem;
            padding-left: 1px;
            padding-right: 1px;
        }

        .card .card-title {
            position: relative;
            font-weight: 500;
            font-size: 16px;
            color: #212832;
        }

        .container-fluid {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .form-control {
            color: #525f7f;
            border: 1px solid #e9ecef;
            border-radius: 2px;
        }

        .form-select {
            padding: 0.375rem 2.25rem 0.375rem 0.75rem;
            background-position: right 0.75rem center;
            border: 1px solid #ced4da;
        }

        .badge-primary {
            color: #fff;
            background-color: #707cd2
        }
        .badge-secondary {
            color: #fff;
            background-color: #8898aa
        }

        .badge-success {
            color: #fff;
            background-color: #2cd07e
        }

        .badge-info {
            color: #fff;
            background-color: #2cabe3
        }
        .badge-warning {
            color: #212529;
            background-color: #ffc36d
        }

        .badge-danger {
            color: #fff;
            background-color: #ff5050
        }
        .badge-light {
            color: #212529;
            background-color: #f7fafc
        }
        .badge-dark {
            color: #fff;
            background-color: #313131
        }

        /* Accordion */
        .courses-video-playlist .video-playlist .vids a.unstyled{
            padding: 8px 80px;
            padding-right: 30px;
            border-bottom: 0;
        }

        .courses-video-playlist .video-playlist .vids a.unstyled::before {
            border: 0;
        }
    </style>
@endsection

@section('content')
    @php
        $tempChaps = array_column($chapitres,'chapitreintitule','id_chapitre');
        $chapSecs = array_column($chapitres,'sections','id_chapitre');

        $nbMedias = array_sum(array_map("count", $medias)); // nb of medias of all chapiter
    @endphp

    <!-- Courses Admin Start -->
    <div class="section overflow-hidden position-relative" id="wrapper">

        <div class="page-content-wrapper py-0" style="background: rgba(0, 0, 0, 0.03);">

            <!-- Admin Tab Menu Start -->
            <div class="nav flex-column nav-pills admin-tab-menu" style="left:0;">
                <a href="#infoEC" class="graph-nav active">Détails Cours</a>
                <a href="#etudiants" class="graph-nav">Détails étudiants</a>
                <a href="#ressources" class="graph-nav">Ressources</a>
                <a
                    href="{{route('pcourse.index')}}"
                    data-bs-toggle="tooltip"
                    title="Retour vers la liste des ECs"
                ><i class="fa fa-reply"></i> Retour </a>
            </div>
            <!-- Admin Tab Menu End -->

            <!-- Page Content Wrapper Start -->
            <div class="main-content-wrapper pt-0">
                <div class="container-fluid">
                    <!-- Overview Top Start -->
                    <div class="admin-top-bar flex-wrap">

                        <!-- Graph infoEC -->
                        <div class="graph border-0 mt-0 w-100" id="infoEC">
                            {{-- alert with content --}}
                            @include('partials.alert')

                            @include('partials.alert', [
                                "showAlert" => $errors->any(),
                                "success" => false,
                                "msg" => session('msg')
                            ])

                            <div class="widget-information mt-3 p-0 border-0" style="padding-left: 12px; background: none;">
                                <div class="card card-body ec-wrapper">
                                    <div class="row mt-2">
                                        <div class="col-sm-12 col-md-8">
                                            <div class="card mb-3">
                                                <div class="card-header">
                                                    <div class="card-title">Fiche EC</div>
                                                </div>
                                                <div class="card-body">
                                                    <table class="table">
                                                        <tbody>
                                                            <tr>
                                                                <th><span><i class="icofont-slack"></i>Code</th>
                                                                <td><span>:</span> {{$ecu['code_ecu']}}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-clip-board"></i> Intitulé</th>
                                                                <td><span>:</span> {{$ecu['intituleEcu']}}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-certificate-alt-1"></i> Filière</th>
                                                                <td><span>:</span> {{$ecu['intituleFilieres']}}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-graduate-alt"></i>Niveau</th>
                                                                <td class="m-total"><span>:</span> {{findNiveau($ecu['niveauFormation']).' '.$ecu['annee']}}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-read-book"></i>Crédit{{$ecu['credit'] > 1 ? 's' : ''}}</th>
                                                                <td><span>:</span> {{$ecu['credit']}} Cr</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-clock-time"></i>Masse horaire</th>
                                                                <td><span>:</span> {{$ecu['masse_horaire']}} h</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-tags"></i>Chapitre{{ count($chapitres) > 1 ? 's' : ''}}</th>
                                                                <td><span>:</span> {{count($chapitres)}}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="fa fa-pie-chart"></i>Section{{ $nbSecs > 1 ? 's' : ''}}</th>
                                                                <td><span>:</span> {{ $nbSecs }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span><i class="icofont-ui-video-play"></i>Média{{ $nbMedias > 1 ? 's' : ''}}</th>
                                                                <td><span>:</span> {{$nbMedias}}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-4">
                                            <div class="card mb-3">
                                                <div class="card-header">
                                                    <div class="card-title">Votre progression</div>
                                                </div>
                                                <div class="card-body">
                                                    <ul class="list-unstyled col-12 row mt-2">
                                                        <li class="col-12">
                                                            @php
                                                                $p = $nbSecUploaded * 100 / ($nbSecsExpanded ? $nbSecsExpanded : 1);
                                                            @endphp
                                                            <h6
                                                                data-bs-toggle="tooltip"
                                                                title="La progression est calculée selon les sections des chapitres ou les chapitres eux-mêmes quand ils n'ont pas de sections"
                                                            >- Cours rendu disponible
                                                                <i class="text-primary fa fa-question-circle"></i>
                                                            </h6>
                                                            <div class="col-12 mb-4">
                                                                <div class="courses-rating">
                                                                    <p style="font-size: .65rem;font-weight: 500;color: #212832;line-height: .35rem;">{{ number_format($p,2) }}%<span class="pull-right">{{ $nbSecUploaded.' sections/'.$nbSecsExpanded }}</span></p>
                                                                    <div class="rating-progress-bar"  style="height: 5px;">
                                                                        <div class="rating-line {{($p < 50)?'bg-danger': (($p < 70)?'bg-warning':(($p < 100)?'bg-info':'bg-success'))}}" style="width: {{$p}}%;"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="col-12">
                                                            @php
                                                                if ($ecu['Heures_effectuees'] > $ecu['masse_horaire']) {
                                                                    $p = 100;
                                                                } else {
                                                                    $p = $ecu['Heures_effectuees'] * 100 / ($ecu['masse_horaire'] ? $ecu['masse_horaire'] : 1);
                                                                }

                                                                $heureExec =  explode(".",number_format($ecu['Heures_effectuees'],2));
                                                            @endphp
                                                            <h6>- Heures effectuées
                                                                <i class="icofont-clock-time"></i>
                                                            </h6>
                                                            <div class="col-12 mb-4">
                                                                <div class="courses-rating">
                                                                    <p style="font-size: .65rem;font-weight: 500;color: #212832;line-height: .35rem;">{{ number_format($p,2) }}% <span class="pull-right">{{ $heureExec[0].'h'.$heureExec[1].'min /'.$ecu['masse_horaire'].'h' }}</span></p>
                                                                    <div class="rating-progress-bar" style="height: 5px;">
                                                                        <div class="rating-line {{($p < 50)?'bg-danger': (($p < 70)?'bg-warning':(($p < 100)?'bg-info':'bg-success'))}}" style="width: {{$p}}%;"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Graph Etudiants -->
                        <div class="graph border-0 mt-0 w-100"  id="etudiants" style="display: none;">
                            <div class="card my-2">
                                <div class="card-header">
                                    <div class="card-title">Progression des Etudiants</div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-4">
                                        <figure class="highcharts-figure">
                                            <div id="chart"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Tableau récapitulatif</div>
                                </div>
                                @php
                                    $mIds = [];  // currently published medias' ids !!
                                    foreach ($medias as $m) { // insure to take only medias currently visible by students !!
                                        $m = array_filter($m,function($med) use ($current_GMT_time){
                                            return ($med['published_at'] <= $current_GMT_time) ;
                                        });

                                        $mIds = array_merge($mIds,array_column($m, 'id'));
                                    }

                                    $totalMedia = count($mIds);  // visible by students : publication date has passed
                                    $totalMedia = ($totalMedia != 0)?$totalMedia:1;

                                    $stats = [0,0,0];
                                @endphp
                                <div class="card-body">
                                    <div class="table-responsive w-100">
                                        <table id="progEtu" class="table table-striped table-bordered display w-100" data-item="étudiant,étudiants">
                                            <thead>
                                                <tr>
                                                    <th colspan="5" class="bg-dark text-white text-center">Etat d'évolution des étudiants</th>
                                                </tr>
                                                <tr>
                                                    <th colspan="2" class="text-dark text-center">Informations de l'étudiant</th>
                                                    <th colspan="3" class="text-dark text-center">Suivi de la progressions</th>
                                                </tr>
                                                <tr>
                                                    <th>Nom & Prénoms</th>
                                                    <th>Contact</th>
                                                    <th>Progression</th>
                                                    {{-- <th>Statut</th> --}}
                                                    <th>Détails</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($etus as $etu)
                                                    @php
                                                        $detail = "-";
                                                        if(!empty($user_medias[$etu['matricule']])) {
                                                            
                                                            $lastViewedMedia = $user_medias[$etu['matricule']];  // last media viewed by student

                                                            if ( isset($lastViewedMedia['total_viewed']) ) {
                                                                $p = ($lastViewedMedia['total_viewed']*100) / $totalMedia; // pourcentage de media visualisé
                                                        
                                                                $p = ( fmod( ($lastViewedMedia['total_viewed']*100), $totalMedia) == 0 ) ? $p : number_format($p, 2);

                                                            } else {
                                                                // This code is not fully completed because it refers to media order which is biased
                                                                $p = array_search($lastViewedMedia['media_id'], $mIds);  // last viewed media's position
                                                                $p = ($p !== false)? $p: 0; // keep an int value to avoid errors
                                                                $p = ($lastViewedMedia['statut'] == 'finished')? ($p + 1) : $p + 0.5 ;
                                                                $p = $p*100 / $totalMedia; // pourcentage de media déjà terminé
                                                            }
                                                            

                                                            if ($p < 100 ) {
                                                                $badge_text = ($lastViewedMedia['statut'] == 'started')?'A débuté ':'A fini ';
                                                                $badge_color = ($lastViewedMedia['statut'] == 'started')?'warning':'info';
                                                                $detail = 'L\'étudiant <span class="mx-1 badge text-'. (($badge_color == 'danger') ? 'light' : 'dark') . 'fw-bold badge-'. $badge_color .'"> '. mb_strtolower($badge_text) .'</span>';

                                                                $secId = json_decode($lastViewedMedia['sequences']);  // id array of sections related to the media
                                                                if($secId) {
                                                                    $secId =  $secId[array_key_last($secId)];  // last section id
                                                                    $detail  = $detail . 'la section "'.$chapSecs[$lastViewedMedia['chap_id']][$secId].'" du chapitre intitulé "';
                                                                } else {
                                                                    $detail  = $detail.'le chapitre intitulé "';
                                                                }

                                                                $detail = $detail.$tempChaps[$lastViewedMedia['chap_id']] .'"' ;

                                                                $stats[1] += 1;
                                                            } else {
                                                                $badge_text = "À jour";
                                                                $badge_color = 'success';
                                                                // $detail = "A jour";
                                                                $detail = 'L\'étudiant est <span class="mx-1 badge text-'. (($badge_color == 'danger') ? 'light' : 'dark') . 'fw-bold badge-'. $badge_color .'"> '. mb_strtolower($badge_text) .'</span>';
                                                                $stats[2] += 1;
                                                            }
                                                        } else {
                                                            $p = 0;
                                                            if ($totalMedia == 0){
                                                                $badge_text = "À jour";
                                                                $badge_color = 'success';
                                                                // $detail = "A jour";
                                                                $stats[2] += 1;
                                                            } else {
                                                                $badge_text = "N'a rien débuté";
                                                                $badge_color = 'danger';
                                                                // $detail = "N'a rien débuté";
                                                                $stats[0] += 1;
                                                            }

                                                            $detail = 'L\'étudiant'. (($totalMedia == 0) ? ' est ' : ' ') .'<span class="mx-1 badge text-'. (($badge_color == 'danger') ? 'light' : 'dark') . 'fw-bold badge-'. $badge_color .'"> '. mb_strtolower($badge_text) .'</span>';
                                                        }
                                                    @endphp
                                                    <tr>
                                                        <td
                                                            class="detail-content"
                                                            style="max-width: 3rem !important;">
                                                            {{ $etu['nom'].' '.$etu['prenom']}}
                                                            <a href="{{route('profil',$etu['matricule'])}}"
                                                                class="ml-1 btn-light text-primary"
                                                                style="border-radius: 100%;"
                                                                data-bs-toggle="tooltip"
                                                                title="Voir le profil de l'étudiant"
                                                            >
                                                                <i class="fa fa-user-circle"></i>
                                                            </a>
                                                        </td>
                                                        <td class="detail-content">{{"(".$etu['code_pays'].") ".$etu['adresse']}}</td>
                                                        <td class="detail-content">
                                                            <span>{{ $p.'%'}}</span>
                                                            @if (!empty($user_medias[$etu['matricule']])) 
                                                                <span style="float: right;">{{ $lastViewedMedia['total_viewed'].'/'.$totalMedia}}</span>
                                                            @endif
                                                            <div class="courses-rating">
                                                                <div class="rating-progress-bar" style="height: 3px; background-color: #d3ded7;">
                                                                    <div class="rating-line {{ ($p < 50) ? 'bg-danger' : ( ($p < 70) ? 'bg-warning' : ( ($p < 100) ? 'bg-info' : 'bg-success' ) ) }}" style="width: {{$p}}%; height: 100%;"></div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        {{-- <td class="detail-content"><span class="badge text-{{($badge_color == 'danger') ? 'light' : 'dark'}} fw-bold {{'badge-'. $badge_color}}">{{$badge_text}}</span></td> --}}
                                                        <td class="fst-italic detail-content" style="max-width: 3rem !important;">{!! $detail !!}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th>Nom & Prénoms</th>
                                                    <th>Contact</th>
                                                    <th>Progression</th>
                                                    {{-- <th>Statut</th> --}}
                                                    <th>Détails</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Graph Chaps & Media -->
                        <div class="graph border-0 mt-0 w-100" id="ressources" style="display: none;">
                            @if (count($chapitres))
                                <div class="d-flex justify-content-end my-3 mx-3">
                                    <a
                                        class="btn btn-dark me-3"
                                        role="button"
                                        data-bs-toggle="tooltip"
                                        title="Voir les interactions autour des médias de l'EC"
                                        href="{{route('pcourse.view',$ecu['id_EC'])}}"
                                        target="_blank"
                                        style="
                                            line-height: 2;
                                            padding: 0.5em;
                                            font-size: 1rem;
                                            box-shadow: 4px 4px 1px 0px lightgrey;
                                        "
                                    >
                                        Commentaires & notes
                                        <i class="fa fa-comments-o ms-0"></i>
                                    </a>
                                    <a
                                        class="btn btn-primary"
                                        role="button"
                                        data-bs-toggle="tooltip"
                                        title="Ajouter un média"
                                        href="{{ route('lesson.create',['course' => $ecu['id_EC']]) }}"
                                        style="
                                            line-height: 2;
                                            padding: 0.5em;
                                            font-size: 1rem;
                                            box-shadow: 4px 4px 1px 0px lightgrey;
                                        "
                                    >
                                        Ajouter un média
                                        <i class="fa fa-paste ms-0"></i>
                                    </a>
                                </div>
                                <div class="courses-video-playlist w-100 bg-transparent">
                                    <!-- Video Playlist Start  -->
                                    <div class="video-playlist">
                                        @php
                                            $mIndex = 0; // temp var  to hold position of media in playlist
                                        @endphp

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

                                            @foreach ($chapitres as $pos => $chap)
                                                @php
                                                    // UI purposes...
                                                    if (strlen($chap['chapitrenumero']) == 1) {
                                                        $chap["numero"] = '0'.$chap['chapitrenumero'];
                                                    } else {
                                                        $chap["numero"] = $chap['chapitrenumero'];
                                                    }

                                                    // nb of medias in the chapiter
                                                    if (empty($medias[$chap['id_chapitre']])) {
                                                        $nbMedChap = 0;
                                                    } else {
                                                        $nbMedChap = count($medias[$chap['id_chapitre']]);
                                                    }

                                                    // percentage of media present in chap
                                                    if ($nbMedias) {
                                                        $percent = $nbMedChap*100 / $nbMedias;
                                                    } else {
                                                        $percent = 0;
                                                    }

                                                    // sections of chap
                                                    $nbSec = count($chap['sections']);  // nb of sections in chap
                                                    $secP = $nbSec*100 / ($nbSecs ? $nbSecs : 1) ;
                                                @endphp

                                                <!-- Accordion Items Start  -->
                                                <div class="accordion-item" >
                                                    <h2 class="accordion-header" id="{{$chap['id_chapitre']}}">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chap_{{$chap['id_chapitre']}}" aria-expanded="true" aria-controls="chap_{{$chap['id_chapitre']}}">
                                                            <p>Chapitre {{ $chap["numero"] }} : {{$chap['chapitreintitule']}}</p>
                                                            <div class="total-duration">
                                                                <span class="progress-text">
                                                                    {{ $nbMedChap ? number_format($percent, 0)."% des médias de l'EC" : "Aucune ressource" }}
                                                                </span>
                                                                <div class="d-inline float-right">
                                                                    <span class="progress-pos">{{$nbMedChap ? "$nbMedChap média(s)" : "0"  }}</span>/{{$nbMedias}}
                                                                </div>
                                                                <div class="progress-bar">
                                                                    <div class="progress-line" style="width: {{$percent}}%;"></div>
                                                                </div>
                                                            </div>
                                                        </button>
                                                    </h2>

                                                    <div id="chap_{{$chap['id_chapitre']}}" class="accordion-collapse collapse" aria-labelledby="{{$chap['id_chapitre']}}" data-bs-parent="#videoPlaylist">
                                                        <div class="accordion-body">
                                                            @if ($nbSec)
                                                                <button
                                                                    class="accordion-button section-item collapsed"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#sect_{{$chap['id_chapitre']}}"
                                                                    aria-expanded="true"
                                                                    aria-controls="sect_{{$chap['id_chapitre']}}"
                                                                    style="border: 2px solid lightgrey;"
                                                                >
                                                                    <p style="max-width: 100%;">Sections du chapitre </p>
                                                                    <div class="total-duration" style="font-weight: 500; color: #565656;">
                                                                        <span class="progress-text">{{ number_format($secP, 0) }}% des sections de l'EC</span>
                                                                        <div class="d-inline float-right">
                                                                            <span class="progress-pos">{{$nbSec}} section{{($nbSec > 1) ? 's' : ''}}</span>/{{$nbSecs}}
                                                                        </div>
                                                                        <div class="progress-bar">
                                                                            <div class="progress-line" style="width: {{$secP}}%;"></div>
                                                                        </div>
                                                                    </div>
                                                                </button>
                                                                <div class="collapse show" id="sect_{{$chap['id_chapitre']}}">
                                                                    <div class="card card-body" style="background-color: #ebebeb; border-radius: 0;">
                                                                        <ul>
                                                                            @foreach ($chap["sections"] as $sec)
                                                                                <li
                                                                                    class="d-block"
                                                                                    style="margin-bottom: 0;
                                                                                    font-size: 14px;
                                                                                    font-weight: 500;
                                                                                    color: #212832;"
                                                                                >
                                                                                    &diamond; {{$sec}}
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            @else
                                                                <button class="bg-light" type="button">
                                                                    <p>Aucune section </p>
                                                                </button>
                                                            @endif
                                                            <nav class="vids mt-2">
                                                                @if ($nbMedChap)
                                                                    <div class="card">
                                                                        <div
                                                                            class="card-header"
                                                                            style="
                                                                                display: flex;
                                                                                justify-content: space-between;
                                                                                align-items: center;
                                                                                font-size: 15px;
                                                                                font-weight: 500;
                                                                                color: black;
                                                                                border-bottom: 3px solid lightgrey;
                                                                                margin-bottom: 0;
                                                                            "
                                                                        >
                                                                            Média(s) du chapitre
                                                                            @if ((count($medias[$chap['id_chapitre']]) > 1))
                                                                                <a
                                                                                    class="btn btn-primary"
                                                                                    style="line-height: 1.3; font-size: 1rem; padding-left: 0; padding: 8px;"
                                                                                    role="button"
                                                                                    {{-- data-bs-toggle="tooltip" --}}
                                                                                    title="Réordonner les médias"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#reorderModal{{$chap['id_chapitre']}}"
                                                                                >
                                                                                    <i class="fa fa-list-ol"></i>
                                                                                    Réordonner
                                                                                </a>

                                                                                <div class="modal fade reorder-modal" id="reorderModal{{$chap['id_chapitre']}}" tabindex="-1" aria-labelledby="modReoLabel{{$chap['id_chapitre']}}" aria-hidden="true">
                                                                                    <div class="modal-dialog">
                                                                                        <div class="modal-content">
                                                                                            <div class="modal-header">
                                                                                                <h5 class="modal-title" id="myModalLabel">Réorganisation par glisser deposer</h5>
                                                                                                <a type="button" class="btn-close unstyled" data-bs-dismiss="modal" aria-label="Close" style="padding-right: 0;"></a>
                                                                                            </div>
                                                                                            <div class="modal-body">
                                                                                                <ul class="sortable" data-chap={{$chap['id_chapitre']}}>
                                                                                                    @foreach($medias[$chap['id_chapitre']] as $key => $media)
                                                                                                        <li id='{{"item_".$media["id"]}}' class='ui-state-default media my-2'>
                                                                                                            <span class='align-self-center'>&#x21F3;</span>
                                                                                                            <span>{{$media["ordre"]}} - {{$media["titre"]}}</span>
                                                                                                        </li>
                                                                                                    @endforeach
                                                                                                </ul>
                                                                                            </div>
                                                                                            <div class="modal-footer d-flex justify-content-center">
                                                                                                <a type="button" class="btn btn-secondary unstyled" data-bs-dismiss="modal"
                                                                                                    style="
                                                                                                        padding: 10px;
                                                                                                        border-bottom: 0;
                                                                                                        font-size: 1rem;
                                                                                                        line-height: 2.5em;
                                                                                                    "
                                                                                                >
                                                                                                    Annuler <i class="icofont-undo ml-2" style="font-size: 1em;"></i>
                                                                                                </a>
                                                                                                <a type="button"
                                                                                                    class="btn btn-primary unstyled"
                                                                                                    onclick="reorder(this)"
                                                                                                    id="reorder"
                                                                                                    style="
                                                                                                        padding: 10px;
                                                                                                        border-bottom: 0;
                                                                                                        font-size: 1rem;
                                                                                                        line-height: 2.5em;
                                                                                                    "
                                                                                                >
                                                                                                    Reordonner <i class="fa fa-check-square-o ms-2"></i>
                                                                                                </a>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <form action="{{ route('reorder') }}" id="formreorder" method="post" class="d-none">
                                                                                    @csrf
                                                                                    <input type="hidden" name="reord" value="" id="reord">
                                                                                </form>
                                                                            @endif
                                                                        </div>
                                                                        <div class="card-body">
                                                                            @foreach ($medias[$chap['id_chapitre']] as $mcpos => $multimedia)
                                                                                @php
                                                                                    $mediaPos = $mIndex + 1;
                                                                                    if ($mediaPos < 10) {
                                                                                        $mediaPos = '0'.$mediaPos;
                                                                                    }
                                                                                    // media type
                                                                                    $type = mediaType($multimedia['ext']);
                                                                                @endphp

                                                                                <div class="media-content"  style="{{($mcpos != count($medias[$chap['id_chapitre']]) - 1) ? 'border-bottom: 1px solid #cde9d7;' : ''}}">
                                                                                    <p class="fw-bold mb-0">{{ $mediaPos.'. '. $multimedia['titre']}}</p>
                                                                                    <div class="btn-group">
                                                                                        <!-- play media modal   -->
                                                                                        <a
                                                                                            class="text-primary popover-test unstyled"
                                                                                            data-type="{{$type}}"
                                                                                            data-title="{{$multimedia['titre']}}"
                                                                                            data-src="{{ mediasAsset($multimedia['url'])}}"
                                                                                            data-bs-tooltip="tooltip"
                                                                                            data-bs-toggle="modal"
                                                                                            data-bs-target="#playMediaModal"
                                                                                            role="button"
                                                                                            title="Visualiser le média."
                                                                                        >
                                                                                            <i class="icofont-"></i>
                                                                                        </a>

                                                                                        <!-- see details of media modal   -->
                                                                                        <a
                                                                                            class="text-primary popover-test px-0 unstyled d-inline-block"
                                                                                            role="button"
                                                                                            data-bs-toggle="modal"
                                                                                            data-bs-target="{{ '#mediapre'.$multimedia['id'] }}"
                                                                                            data-bs-tooltip="tooltip"
                                                                                            title="Détails du média."
                                                                                        >
                                                                                            <i class="fa fa-info-circle"></i>
                                                                                        </a>

                                                                                        <!-- edit media  -->
                                                                                        <a
                                                                                            class="text-primary popover-test px-0 unstyled d-inline-block"
                                                                                            role="button"
                                                                                            href="{{route('lesson.edit',$multimedia['id'])}}"
                                                                                            title="Modifier ce média."
                                                                                            data-bs-tooltip="tooltip"
                                                                                        >
                                                                                            <i class="fa fa-edit"></i>
                                                                                        </a>

                                                                                        <!-- delete media  -->
                                                                                        <a
                                                                                            class="text-primary popover-test px-0 unstyled d-inline-block"
                                                                                            data-bs-toggle="modal"
                                                                                            data-bs-target="{{ '#mediadel' . $multimedia['id'] . 'Modal' }}"
                                                                                            role="button"
                                                                                            data-bs-tooltip="tooltip"
                                                                                            title="Supprimer le média."
                                                                                        >
                                                                                            <i class="icofont-trash"></i>
                                                                                        </a>

                                                                                    </div>
                                                                                </div>

                                                                                {{-- details modal --}}
                                                                                <div class="modal fade" id="{{ 'mediapre'.$multimedia['id'] }}" tabindex="-1" aria-labelledby="label{{$multimedia['id']}}" aria-hidden="true">
                                                                                    <div class="modal-dialog">
                                                                                        <div class="modal-content">
                                                                                            <div class="modal-header">
                                                                                                <h5 class="modal-title">Détails du média</h5>
                                                                                                <a type="button" class="btn-close unstyled" data-bs-dismiss="modal" aria-label="Close" style="padding-right: 0;"></a>
                                                                                            </div>
                                                                                            <div class="modal-body">
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Titre : </span><br><span class="text-justify ml-1"> {{$multimedia['titre']}}</span></p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Description :</span><br><span class="text-justify ml-1"> {{$multimedia['description']}}</span></p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Durée : </span><span class="ml-1"> {{$multimedia['duree_video']}}</span></p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Chapitre : </span><br><span class="text-justify ml-1"> {{$tempChaps[$multimedia['chap_id']]}}</span></p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Position <span style="font-size: 0.85em;">(dans la liste des medias)</span> :</span> <span class="ml-1"> {{$multimedia['ordre']}}</span></p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Section(s) associée(s) : </span><br>
                                                                                                    @php
                                                                                                        $mSecId = json_decode($multimedia['sequences']);
                                                                                                    @endphp
                                                                                                    @if ($mSecId)
                                                                                                        @foreach ($mSecId as $secId)
                                                                                                            @if(array_key_exists($multimedia['chap_id'], $chapSecs))
                                                                                                                <span class="text-justify ml-1 d-block">&diamond; {{$chapSecs[$multimedia['chap_id']][$secId]}}</span>
                                                                                                            @endif
                                                                                                        @endforeach
                                                                                                    @else
                                                                                                        <span class="text-justify fst-italic text-muted ml-1 d-inline-block"> Aucune section n'a été associé au média</span>
                                                                                                    @endif
                                                                                                </p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> À publier le :</span><br><span class="cus-date ml-1"> {{$multimedia['published_at']}}</span></p>
                                                                                                <p><span class="fw-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right text-primary"></i> Télechargeable par les étudiants :</span><span class="ml-1"> {{($multimedia['downloadable'] == "1")?"OUI":"NON"}}</span></p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                <!-- Delete modal -->
                                                                                <div class="modal fade" id="{{ 'mediadel' . $multimedia['id'] . 'Modal' }}" tabindex="-1" aria-labelledby="{{ 'mediadel' . $multimedia['id'] . 'ModalLabel' }}" aria-hidden="true">
                                                                                    <div class="modal-dialog">
                                                                                        <div class="modal-content">
                                                                                            <div class="modal-header">
                                                                                                <h5 class="modal-title" id="{{ 'mediadel' . $multimedia['id'] . 'ModalLabel' }}">Suppression</h5>
                                                                                                <a type="button" class="btn-close unstyled" data-bs-dismiss="modal" aria-label="Close" style="padding-right: 0;"></a>
                                                                                            </div>
                                                                                            <div class="modal-body">
                                                                                                <p class="card-text">
                                                                                                    Voulez-vous vraiment supprimer la leçon : <span class="fw-bold fst-italic">{{ $multimedia['titre'] }} </span> ?
                                                                                                </p>
                                                                                                <p class="card-text text-white fst-italic bg-danger p-1" style="border-radius: 5px;font-size: 0.9em; position: relative; top: -0.5em;">
                                                                                                    <i class="fa fa-exclamation-triangle text-white"></i>
                                                                                                    Toute chose liée au média (commentaires, evaluation du média par les étudiants...) sera automatiquement supprimé!
                                                                                                </p>
                                                                                            </div>
                                                                                            <div class="modal-footer">
                                                                                                <a type="button" class="btn btn-secondary unstyled" data-bs-dismiss="modal" style="padding-left: 15px; padding-top: 1px; padding-bottom: 1px;">Annuler <i class="icofont-undo"></i></a>
                                                                                                <form  method="POST" action="{{ route('lesson.delete', ['lesson' => $multimedia['id']]) }}">
                                                                                                    @csrf
                                                                                                    <input type="hidden" name="file" value="{{ $multimedia['url']}}">
                                                                                                    <button class="btn btn-danger unstyled mr-2" type="submit" style="padding: 0 10px; border-bottom: 0; background-color: #dc3545;">Oui  <i class="icofont-trash"></i></button>
                                                                                                </form>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                @php
                                                                                    $mIndex++;
                                                                                @endphp
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <a href="javascript:void(0)" class="no-media" style="color: #71718a; border-bottom: 0;">
                                                                        Aucun média présent pour ce chapitre!
                                                                    </a>
                                                                @endif
                                                            </nav>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Accordion Items End  -->
                                            @endforeach
                                        </div>
                                    </div>
                                    <!-- Video Playlist End  -->
                                </div>
                            @else
                                @include('partials.nodata', [
                                    "height" => '60vh',
                                    "msg" => 'Aucun chapitre disponible pour cet EC'
                                ])
                                <div class="d-flex justify-content-center my-2 mx-3">
                                    <a
                                        class="btn btn-primary"
                                        role="button"
                                        data-bs-toggle="tooltip"
                                        title="Allons-y"
                                        href="#"
                                        target="_blank"
                                        style="
                                            line-height: 2;
                                            padding: 0.5em;
                                            font-size: 1rem;
                                            box-shadow: 4px 4px 1px 0px lightgrey;
                                        "
                                    >
                                        Ajouter des chapitres à L'EC sur GestBook
                                        <i class="fa fa-external-link ms-0"></i>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page Content Wrapper End -->

        </div>

        <!-- play media modal   -->
        <div class="modal fade" id="playMediaModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Visualisation du Média</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success p-1" style="font-size: 0.9em; margin: 0 0 2rem;">
                        <i class="fa fa-chevron-circle-right"></i> <b>Titre : </b> &nbsp; <span id="playMediaTitle"></span>
                     </div>
                    <div class="mb-4" style="height: 63vh; background: #edecf0; padding: 0.5rem;">
                        <!--Video Case -->
                        <div class="mcontainer h-100 w-100" id="video-div" style="display: none;">
                            <div class="video-content" style="
                                padding: 5px;
                                box-sizing:border-box;
                                background-color: #0f1010;
                                display:flex;
                                justify-content:center;
                                align-items: center;
                                height: 100%;
                                width: auto;
                            ">
                                <video-js
                                    id="my-player"
                                    class="video-js vjs-big-play-centered h-100"
                                    data-setup='{"controls": true, "preload": "auto"}'
                                ></video-js>
                            </div>
                        </div>
                        <!--Document Case -->
                        <div class="mcontainer h-100 w-100" id="pdf-div" style="display: none;">
                            <iframe
                                data-viewer-path= "{{asset('pdfjs/web/viewer.html')}}"
                                src="{{ asset('pdfjs/web/viewer.html')}}"
                                frameborder="0"
                                class="w-100 h-100"
                                id="pdf-tag"
                            ></iframe>
                        </div>
                        <!--Image Case -->
                        <div class="mcontainer flex-container h-100 w-100" id="image-div" style="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=""
                                    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>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <!-- End Page Content -->

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

@endsection

@section('script')
    <!-- Highcharts -->
    <script src="{{asset('Highcharts/code/highcharts.js')}}"></script>
    <script src="{{asset('Highcharts/code/modules/series-label.js')}}"></script>
    <!--This page plugins -->
    <script src="{{asset('dist/jquery-ui/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/extra-libs/datatables.net-bs5/datatables.js')}}"></script>
    <!-- moment.js-->
    <script src="{{asset('dist/js/moment-with-locales.min.js')}}"></script>
    <!-- video.js-->
    <script src="{{asset('video-js/video.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>
    <script>

        const type = @json(mediaType(), JSON_PRETTY_PRINT);

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

        let sortableInitialState = [];
        let sortableInitContent = "";

        $(function(){
            $('.graph-nav').on('click', function (e) {
                e.preventDefault();
                let targetGraph = $(this).attr('href');
                $('.graph-nav').removeClass('active');
                $('.graph').hide();

                $(this).addClass('active');
                $(targetGraph).show();
            });


            dateToString({
                elClass: "cus-date",
                noDateMsg: "Non renseigné",
                lang: "fr"
            });

            // dt inits
            $('.table-responsive table').each(function(ind,tab){
                let item = $(tab).attr("data-item").split(",");
                let custom = {};

                if(item[0] == "chapitre"){
                    custom = { "dom": 'Bfrtip' };
                }


                $(tab).DataTable({
                    ...custom,
                    "responsive": true,
                    "language": dtCustomLanguage({
                        name: item[0],
                        plural: item[1],
                        gender: "M",
                        lang: "fr"
                    })
                });
            });

            // $('div.dataTables_length select').addClass('form-control form-control-sm');

            // viewers
            // video player
            player = videojs('my-player',  {
                playbackRates: [.25,.5,1, 1.5, 2],
                html5: {
                        hls: {
                                overrideNative: !videojs.browser.IS_SAFARI
                        }
                    },
                plugins: {
                    videoJsResolutionSwitcher: {
                        default: 'low',
                        dynamicLabel: true
                    }
                }
            });

            // init the image viewer
            zImage.init("image-tag", {
                // default options are used + these event listeners !
                onInit: onZImageInit,
                onUpdated: onZImageUpdated,
                onSetup: onZImageSetup,
            });

            $('#playMediaModal').on('show.bs.modal', function (event) {
                const a = $(event.relatedTarget) // anchor that triggered the modal
                const msrc = a.data('src');
                const ext = msrc.split('/').pop().split(".").pop();
                $('#playMediaTitle').html( a.attr('data-title') );
                $('.mcontainer').hide();

                if(type[ext] === 'video'){
                    // player.src({type: 'video/'+ ext, src: msrc});
                    player.src({type: 'application/x-mpegURL', src: msrc});
                    $('#video-div').show();
                    player.play();
                } else if (type[ext] === 'pdf') {
                    $('#pdf-tag').attr(
                        'src',
                        $('#pdf-tag').data("viewer-path") + '?file='+ msrc
                    );
                    $('#pdf-div').show();
                } else {
                    $('#image-div').find('img').attr('src',msrc);
                    $('#image-div').show();
                    // ...
                }

            });

            $('#playMediaModal').on('hidden.bs.modal', _ => player.pause() );

            // reorder items
            $(".sortable").sortable({
                placeholder: 'ui-state-highlight',
            });

            $(".sortable").disableSelection();

            $('.reorder-modal').on('shown.bs.modal', function() {
                sortableInitContent = $(this).find('.sortable').children();
                sortableInitContent.each((ind, li) => {
                    sortableInitialState.push($(li).attr('id'));
                });
            });

            $('.reorder-modal').on('hidden.bs.modal', function() {
                $(this).find('.sortable').html(sortableInitContent);
                sortableInitContent = "";
                sortableInitialState = [];
            });
        });


        function reorder(e) {
            let sortableList = $(e).parents('.modal-content').find('.sortable').sortable("toArray");
            if (JSON.stringify(sortableInitialState) !== JSON.stringify(sortableList)) {
                $('#reord').val(sortableList);
                $("#formreorder").submit();
            } else {
                showToastr("warning","Les médias n'ont pas été réordonnés !");
            }
        }

        // Highchart
        Highcharts.chart('chart', {
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: 'Progression selon les médias rendus disponible'
            },
            xAxis: {
                categories: [''],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                text: 'Nombre Etudiant'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:2px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0">{point.y:.0f} Etudiants</td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                pointPadding: 0.2,
                borderWidth: 0
                }
            },
            series: [{
                name: "N'ayant rien débuté",
                data: [@json($stats[0], JSON_PRETTY_PRINT)],
                color: 'red'

            }, {
                name: 'En progression',
                data: [@json($stats[1], JSON_PRETTY_PRINT)]

            }, {
                name: 'A jour',
                data: [@json($stats[2], JSON_PRETTY_PRINT)],
                color: 'green'
            }]
        });
    </script>
@endsection