@extends('layouts.baseprof')

@section('titre','Cours')

@section('css')
    <link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css')}}">
    <link href="{{asset('dist/jquery-ui/jquery-ui.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('Highcharts/code/css/highcharts.css')}}">
    <link href="{{asset('video-js/video-js.min.css')}}" rel="stylesheet" />
    <style type="text/css">
        p {
            white-space: initial;
        }

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

        .ui-state-highlight,
        .ui-widget-content .ui-state-highlight,
        .ui-widget-header .ui-state-highlight {
            border: 1px dashed var(--bg-color-light) !important;;
            background: var(--bg-color-light) !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;
        }
    </style>

@endsection


@section('content')
<div >

    <!-- Bread crumb and right sidebar toggle -->
    <div class="page-breadcrumb border-bottom">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-xs-12 align-self-center">
            </div>
            <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                <button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Déconnexion</button>
                <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                    <ol class="breadcrumb mb-0 justify-content-end p-0">
                        <li class="breadcrumb-item"><a href="{{ route('pcourse.index')}}">ECs</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Leçon</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- End Bread crumb and right sidebar toggle -->

    <!-- Container fluid  -->
    <div class="page-content container-fluid" style="margin-top: 2%">

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

        <!-- Progression part -->
        <div class="row">
            <div class="col-md-4">
                <div class="card-header text-dark d-flex align-items-center" style="border: 3px solid white;">
                    <b>FICHE EC</b>
                    <a class="btn btn-theme btn-sm ml-auto" href="{{route('pcourse.view',$ecu['id_EC'])}}">commentaires et notes <i class="fa fa-external-link-alt"></i></a>
                    <a class="btn btn-success btn-sm ml-auto" href="#gestMedia">Gérer médias</a>
                </div>
                <div class="card card-body printableArea" style="border-radius: 0px;">
                    <ul class="list-unstyled mb-0">
                        <li class="row mb-2">
                            <div class="col-4">
                                <b>Code EC :</b>
                            </div>
                            <div class="col-8">
                                {{$ecu['code_ecu']}}
                            </div>
                        </li>
                        <li class="row mb-2">
                            <div class="col-4">
                                <b >Intitule :</b>
                            </div>
                            <div class="col-8">
                                {{$ecu['intituleEcu']}}
                            </div>
                        </li>
                        <li class="row mb-2">
                            <div class="col-4">
                                <b>Crédit :</b>
                            </div>
                            <div class="col-8">
                                {{$ecu['credit']}}
                            </div>
                        </li>
                        <li class="row mb-2">
                            <div class="col-4">
                                <b>Filiere :</b>
                            </div>
                            <div class="col-8">
                                {{$ecu['intituleFilieres']}}
                            </div>
                        </li>
                        <li class="row">
                            <div class="col-4">
                                <b>Niveau :</b>
                            </div>
                            <div class="col-8">
                                {{findNiveau($ecu['niveauFormation']).' '.$ecu['annee']}}
                            </div>
                        </li>
                    </ul>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <h5 class="font-weight-bold">Votre Progression : </h5>
                        </div>
                        <ul class="list-unstyled col-12 row mt-2">
                            <li class="col-12">
                                <h6 class="card-subtitle" data-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-info fa fa-question-circle"></i> </h6>
                                @php
                                    $p = $nbSecUploaded * 100 / (($nbSecs)?$nbSecs:1);
                                @endphp
                                <div class="col-12 mb-4">
                                    {{ $nbSecUploaded.' sections/'.$nbSecs }} <span class="pull-right">{{ number_format($p,2) }}%</span>
                                    <div class="progress" style="height: 10px;">
                                        <div class="progress-bar progress-bar-striped {{($p < 50)?'bg-danger': (($p < 70)?'bg-warning':(($p < 100)?'bg-info':'bg-success'))}}" role="progressbar" style="width: {{$p}}%; height: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </li>
                            <li class="col-12">
                                <h6 class="card-subtitle">- Heures effectuées</h6>
                                <div 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
                                    {{ $heureExec[0].'h'.$heureExec[1].'min /'.$ecu['masse_horaire'].'h' }} <span class="pull-right">{{ number_format($p,2) }}%</span>
                                    <div class="progress" style="height: 10px;">
                                        <div class="progress-bar progress-bar-striped {{($p < 50)?'bg-danger': (($p < 70)?'bg-warning':(($p < 100)?'bg-info':'bg-success'))}}" role="progressbar" style="width: {{$p}}%; height: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <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>
            <div class="col-12">
                <div class="card card-body">
                    <div class="card-title mt-4">
                        <span data-toggle="tooltip" title="La progression est calculée selon les médias visibles par ces derniers">
                            Liste des Etudiants et leurs progression <i class="text-info fa fa-question-circle"></i>
                        </span>
                        <a class="btn btn-theme btn-sm ml-2 mt-2" href="{{route('pcourse.view',$ecu['id_EC'])}}">voir les commentaires et notes des étudiants <i class="fa fa-external-link-alt"></i></a>
                    </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;

                        $tempChaps = array_column($chapitres,'chapitreintitule','id_chapitre');
                        $chapSecs = array_column($chapitres,'sections','id_chapitre');

                        $stats = [0,0,0];
                    @endphp
                    <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
                                            $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':'success';
                                                // $detail = ($lastViewedMedia['statut'] == 'started')?'A débuté ':'A fini ';
                                                $detail = "L'étudiant ".strtolower($badge_text);

                                                $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 = 'info';
                                                // $detail = "A jour";
                                                $detail = "L'étudiant est ".strtolower($badge_text);
                                                $stats[2] += 1;
                                            }
                                        } else {
                                            $p = 0;
                                            if($totalMedia == 0){
                                                $badge_text = "À jour";
                                                $badge_color = 'info';
                                                // $detail = "A jour";
                                                $detail = "L'étudiant est ".strtolower($badge_text);
                                                $stats[2] += 1;
                                            } else {
                                                $badge_text = "N'a rien débuté";
                                                $detail = "L'étudiant ".strtolower($badge_text);
                                                $badge_color = 'danger';
                                                // $detail = "N'a rien débuté";
                                                $stats[0] += 1;
                                            }
                                        }
                                    @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" style="border-radius: 100%;" data-toggle="tooltip" title="Voir le profil de l'étudiant"><i class="fa fa-user-circle"></i></a></td>
                                        {{-- <td>{{$etu['contact']}}</td> --}}
                                        <td class="detail-content">{{$etu['code_pays']." ".$etu['adresse']}}</td>
                                        <td class="detail-content">{{ number_format($p,2).'%'}}</td>
                                        <td class="detail-content"><span class="badge text-{{($badge_color == 'danger') ? 'light' : 'dark'}} font-weight-bold {{'badge-'. $badge_color}}">{{$badge_text}}</span></td>
                                        <td class="font-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>

        <!-- table responsive -->
        <div class="card" id="gestMedia">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 col-sm-12 mb-3" style="border-right: 1px solid #e5e5e5;">
                        <h4 class="card-title font-weight-bold">Ajouter un Média à un chapitre</h4>
                        <div class="table-responsive m-t-40">
                            <table id="zero_config2" class="table display table-bordered table-striped no-wrap" data-item="chapitre,chapitres">
                                <thead>
                                    <tr>
                                        <th >Chapitre</th>
                                        <th class="nosort" style="text-align:center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($chapitres as $key => $chapitre)
                                        <tr>
                                            <td>{{$chapitre['chapitreintitule']}}</td>
                                            <td class="text-center">
                                                <a href="{{ route('lesson.create',['course' => $ecu['id_EC'], 'chapId' => $chapitre['id_chapitre'] ]) }}" role="button"><i class="fas fa-plus-circle"></i> </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <hr class="d-md-none" style="border: 2px solid #b5b5b5;">
                    </div>
                    <div class="col-md-8 col-sm-12">
                        <h4 class="card-header font-weight-bold" style="border:none !important;">Liste des médias pour l'EC</h4>
                        <div class="pull-right mb-2">
                            @if ($medias)
                                <!-- Reorder modal   -->
                                <a class="btn btn-info m-2" data-toggle="modal" data-target="#reorderModal" role="button"><i class="fas fa-list-ol"></i> </a>
                                <div class="modal fade text-left pd-20 card-box mb-30" id="reorderModal" tabindex="-1" aria-labelledby="modReoLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header bg-theme px-3 py-2" style="padding: 0px !important;">
                                                <h5 class="modal-title p-2 font-weight-bold">Reorganisation par glisser deposer </h5>
                                                <button type="button" class="close p-2" data-dismiss="modal" aria-label="Close" style="margin: 0px !important;">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <ul id="sortable">
                                                    @foreach($medias as $key => $chapitre)
                                                        @foreach($chapitre as $key2 => $media)
                                                            <li id='{{"item_".$media["id"]}}' class='ui-state-default media mt-2 mb-2'>
                                                                <span class='align-self-center'>&#x21F3;</span>
                                                                <span>{{$media["ordre"]}} - {{$media["titre"]}}</span>
                                                            </li>
                                                        @endforeach
                                                    @endforeach
                                                </ul>
                                                <br>
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <button type="button" class="btn btn-light btn-rounded mr-2" data-dismiss="modal">Annuler <i class="fas fa-times-circle ml-2" style="font-size: 1em;"></i></button>
                                                    <button type="button" class="btn btn-theme btn-rounded " onclick="reorder()" id="reorder">Reordonner<i class="fa fa-angle-double-right ml-2"></i></button>
                                                </div>
                                            </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

                            <!-- see media as students do   -->
                            <a class="btn btn-theme btn-sm m-2" href="{{route('pcourse.view',$ecu['id_EC'])}}">Voir les commentaires et notes <i class="fa fa-external-link-alt"></i></a>
                        </div>
                        <div class="table-responsive m-t-40">
                            <table id="config-table" class="table display table-bordered table-striped no-wrap" data-item="média,médias">
                                <thead>
                                    <tr>
                                        <th class="nosort">N°</th>
                                        <th>Titre</th>
                                        <th class="nosort">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i = 1;
                                    @endphp
                                    @foreach($medias as $key => $chapitre)
                                        @foreach($chapitre as $key2 => $media)
                                            <tr>
                                                <td>{{$i}}</td>
                                                <td>{{$media['titre']}}</td>
                                                <td>
                                                    <!-- play media modal   -->
                                                    <a role="button" class="play-media" data-src="{{ mediasAsset($media['url'])}}" data-toggle="modal" data-target="#playMediaModal" ><i class="fa fa-play-circle mr-4"></i></a>

                                                    <!-- see details of media modal   -->
                                                    <a role="button" data-toggle="modal" data-target="{{ '#mediapre'.$media['id'] }}"><i class="fa fa-eye mr-4"></i> </a>
                                                    <div class="modal fade" id="{{ 'mediapre'.$media['id'] }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-lg">
                                                            <div class="modal-content">
                                                                <div class="modal-header bg-theme px-3 py-2">
                                                                    <h4 class="modal-title font-weight-bold">Détails de la leçon</h4>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body" style="font-size: 0.9em;">
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Titre : </span><br><span class="text-justify ml-1"> {{$media['titre']}}</span></p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Description :</span><br><span class="text-justify ml-1"> {{$media['description']}}</span></p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Durée : </span><span class="ml-1"> {{$media['duree_video']}}</span></p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Chapitre : </span><br><span class="text-justify ml-1"> {{$tempChaps[$media['chap_id']]}}</span></p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Position <span style="font-size: 0.85em;">(dans la liste des medias)</span> :</span> <span class="ml-1"> {{$media['ordre']}}</span></p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Section(s) associée(s) : </span><br>
                                                                        @php
                                                                            $mSecId = json_decode($media['sequences']);
                                                                        @endphp
                                                                        @if ($mSecId)
                                                                            @foreach ($mSecId as $secId)
                                                                                @if(array_key_exists($media['chap_id'], $chapSecs))
                                                                                <span class="text-justify ml-1 d-block">&diamond; {{$chapSecs[$media['chap_id']][$secId]}}</span>
                                                                                @endif
                                                                            @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
                                                                    </p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> A publier le :</span><br><span class="cus-date ml-1"> {{$media['published_at']}}</span></p>
                                                                    <p><span class="font-weight-bold" style="margin-bottom: 0.5em;"><i class="fa fa-chevron-circle-right"></i> Télechargeable par les étudiants :</span><span class="ml-1"> {{($media['downloadable'] == "1")?"OUI":"NON"}}</span></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- edit media  -->
                                                    <a role="button" href="{{route('lesson.edit',$media['id'])}}"><i class="far fa-edit mr-4"></i> </a>

                                                    <!-- delete media  -->
                                                    <a data-toggle="modal" data-target="{{ '#mediadel' . $media['id'] . 'Modal' }}" role="button" ><i class="fas fa-trash"></i> </a>
                                                    <div class="modal fade" id="{{ 'mediadel' . $media['id'] . 'Modal' }}" tabindex="-1" aria-labelledby="{{ 'mediadel' . $media['id'] . 'ModalLabel' }}" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header px-3 py-2">
                                                                    <h4 class="modal-title font-weight-bold">Suppression</h4>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <p class="card-text">
                                                                        Voulez-vous vraiment supprimer la leçon : <span class="font-weight-bold font-italic">{{ $media['titre'] }} </span> ?
                                                                    </p>
                                                                    <p class="card-text text-white font-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 d-flex align-items-center justify-content-end">
                                                                    <button type="button" class="btn btn-light border-dark border mr-2" data-dismiss="modal">annuler <i class="fas fa-undo"></i></button>
                                                                    <form  method="POST" action="{{ route('lesson.delete', ['lesson' => $media['id']]) }}">
                                                                        @csrf
                                                                        <input type="hidden" name="file" value="{{ $media['url']}}">
                                                                        <button type="submit" class="btn btn-danger mr-2">oui  <i class="fas fa-trash"></i></button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                @php
                                                    $i++;
                                                @endphp
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


         <!-- play media modal   -->
        <div class="modal fade" id="playMediaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header px-3 py-2">
                        <h4 class="modal-title font-weight-bold">Visualisation du Média</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success p-1" style="font-size: 0.9em;">
                            <i class="fa fa-chevron-circle-right"></i> <b>Titre : </b> &nbsp; <span id="playMediaTitle"></span>
                         </div>
                        <div class="mb-4" style="height: 400px;">
                            <!--Video Case -->
                            <div class="mcontainer" 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" class="h-100 pr-0 pl-0" id="pdf-div" style="display: none; border: 2px solid black">
                                <iframe 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" id="img-div" style="display: none;">
                                <img class="img-thumbnail mx-auto d-block" id="img-tag" src="" alt="" style="height: 100%; width: 100%; object-fit: contain">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End PAge Content -->
    </div>

@endsection

@section('script')

    <script src="{{asset('video-js/video.min.js')}}"></script>
    <script src="https://rawgit.com/kmoskwiak/videojs-resolution-switcher/dev/lib/videojs-resolution-switcher.js"></script>

    <!--This page plugins -->
    <script src="{{asset('dist/jquery-ui/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
    <!-- Date picker -->
    <script src="{{asset('dist/js/moment-with-locales.min.js')}}"></script>
    <!-- Highcharts -->
    <script src="{{asset('Highcharts/code/highcharts.js')}}"></script>
    <script src="{{asset('Highcharts/code/modules/series-label.js')}}"></script>
    <script>

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

        let player = null;
        let sortableInitialState = "";

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

            // dt inits
            $('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"
                    })
                });
            });

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

            $('#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.parents('td').prev().html() );
                $('.mcontainer').hide();

                if(type[ext] === 'video'){
                    player.src({type: 'video/'+ ext, src: msrc});
                    $('#video-div').show();
                    player.play();
                } else if (type[ext] === 'pdf') {
                    let b = $('#pdf-tag').attr('src');
                    b = b.substr(0, b.lastIndexOf('viewer.html')+11);
                    $('#pdf-tag').attr('src',b + '?file=' + msrc);
                    $('#pdf-div').show();
                } else {
                    $('#img-div').find('img').attr('src',msrc);
                    $('#img-div').show();
                    // ...
                }

            });

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

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

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

            $('#reorderModal').on('shown.bs.modal',  _ =>  { sortableInitialState = $('#sortable').children(); });
            $('#reorderModal').on('hidden.bs.modal', _ => { $('#sortable').html(sortableInitialState); sortableInitialState = ""; } );
        });


        function reorder() {
            $('#reord').attr('value',$("#sortable").sortable("toArray"));
            $("#formreorder").submit();
        }

        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