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

@section('title','Modification de Média')

@section('css')
    @if (mediaType($media['ext'], "video"))
        <link href="{{asset('video-js/video-js.min.css')}}" rel="stylesheet" />
    @endif
    <link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('refonte/css/forms.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('refonte/css/players.css')}}">
@endsection

@section('content')

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

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

            {{-- TODO : SHOULD BE REMOVED --}}
            @php
                if( $errors->any()) {
                    dd($errors->all());
                }
            @endphp

            @include('partials.alert', [
                "showAlert" => $errors->any(),
                "success" => false,
                "msg" => "Remplissez convenablement le formulaire svp!  Attribuez de section(s) au média si vous ne l'avez pas fait!"
            ])

            <!-- Contact Form Start -->
            <div class="contact-form edit-form">
                <h3 class="title">Modification de Média
                    <a href="{{route('pcourse.show', $media['ecu_id'])}}" class="btn btn-dark" data-bs-toggle="tooltip" title="Retour vers la liste des médias">
                        Liste média <i class="fa fa-undo ms-0"></i>
                    </a>
                </h3>
                <div class="form-wrapper pt-0">
                    <form id="contact-form" action="{{ route('lesson.update', ['lesson' => $media['id']]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="callback" value="{{route('pcourse.show', $media['ecu_id'])}}" required>
                        <input type="hidden" name="course" value="{{$media['ecu_id']}}" required>

                        <div class="single-form">
                            <label class="form-label" for="titre">Titre</label>
                            <input type="text" name="titre" value="{{$media['titre']}}" placeholder="titre du média" required>
                        </div>
                        <div class="single-form">
                            <label class="form-label" for="description">Description</label>
                            <textarea name="description" id="description" placeholder="description du média" required>{{$media['description']}}</textarea>
                        </div>
                        <!-- chapitre -->
                        <div class="single-form">
                            <label class="form-label" for="chapitre">Chapitre</label>
                            <div class="newest-select w-100">
                                <select name="chapitre" id="chapitre" required>
                                    @foreach ($chapitres as $chap)
                                        <option
                                            value="{{$chap['id_chapitre']}}"
                                            {{($media['chap_id'] == $chap['id_chapitre'])?'selected':''}}
                                        >
                                            {{$chap['chapitreintitule']}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!-- Sections-->
                        <div class="form-group" style="margin-top: 20px;">
                            <label class="form-label" for="sections">
                                Sections
                                <button
                                    class="custom-btn reinit-btn"
                                    style="display: none;"
                                    data-bs-toggle="tooltip"
                                    title="Revenir à l'état de départ"
                                >
                                    <i class="fa fa-refresh ms-0"></i>
                                </button>
                            </label>
                            <div class="bg-light p-2 media-sections">
                                <div class="hint">
                                    Selectionnez le chapitre puis les section(s) à attribuer au media
                                </div>
                                @php
                                    // dd($media);
                                    $mSecs = json_decode($media['sequences']);  // array of sections linked to the Media
                                    $shouldHaveSec = "NO";
                                @endphp
                                @foreach ($chapitres as $i => $chap)
                                    @if (count($chap['sections']))
                                        @php
                                            $isMediaChap = false;
                                            if ($chap['id_chapitre'] ===  $media['chap_id']) {
                                                $shouldHaveSec = "YES";
                                                $isMediaChap = true;
                                            }
                                        @endphp
                                        @foreach($chap['sections'] as $j => $section)
                                            <div class="form-check" data-chap="{{$chap['id_chapitre']}}"
                                                style="display: {{ $isMediaChap ? 'block' : 'none'}};">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    value="{{$section['id_sectionchapitre']}}"
                                                    id="check_{{$i.'_'.$j}}"
                                                    name="sections[]"
                                                    {{ in_array($section['id_sectionchapitre'],$mSecs)?'checked':''}}
                                                >
                                                <label class="form-check-label" for="check_{{$i.'_'.$j}}">
                                                    {{$section['intitule']}}
                                                </label>
                                            </div>
                                        @endforeach
                                    @else
                                        <div data-chap="{{$chap['id_chapitre']}}" class="px-1 mt-2" style="display: {{ ($media['chap_id'] == $chap['id_chapitre'])?'block':'none'}};">
                                            Aucune section n'est disponible pour le chapitre selectionné
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        {{-- shouldHaveSec --}}
                        <input type="hidden" name="shouldHaveSec" id="shouldHaveSec" value="{{$shouldHaveSec}}">

                        <!-- Media -->
                        <div class="single-form">
                            <label class="form-label d-flex align-items-center justify-content-between" for="media">
                                Média

                                <a class="custom-btn" href="#playerModal" data-bs-toggle="modal" >
                                    Voir l'ancien média
                                    @if (mediaType($media['ext'], "video"))
                                        <i class="fa fa-file-video-o ms-1"></i>
                                    @elseif(mediaType($media['ext'], "image"))
                                        <i class="fa fa-file-image-o ms-1"></i>
                                    @else
                                        <i class="fa fa-file-pdf-o ms-1"></i>
                                    @endif
                                </a>
                            </label>
                            <div class="custom-file">
                                <label for="media">
                                    Changer le fichier
                                </label>
                                <input
                                    class="custom-file-input"
                                    type="file"
                                    accept="video/*, .pdf, image/*"
                                    id="media"
                                    name="media"
                                >
                            </div>
                        </div>
                        {{-- old media --}}
                        <input type="hidden" name="mediaFile" value="{{$media['url']}}">
                        <div class="single-form">
                            <label class="form-label" for="published_at">
                                Sera visible le (sera enregistré en GMT: <span id="GMT"> _ </span> )
                            </label>
                            <input type="text" class="form-control" id="published_at_picker" value="{{$media['published_at']}}">
                            <input type="hidden" id="published_at" name="published_at" value="{{$media['published_at']}}">
                        </div>
                        <div class="single-form">
                            <label class="d-block form-label">Les etudiants peuvent-ils télécharger cette ressource ? </label>
                            <div class="custom-radio d-inline ms-2">
                                <input type="radio" id="radioOUI" name="downloadable" value="1" class="custom-control-input" {{($media['downloadable'] == '1')?'checked':''}} required>
                                <label class="custom-control-label" for="radioOUI">Oui</label>
                            </div>
                            <div class="custom-radio d-inline ms-2">
                                <input type="radio" id="radioNON" name="downloadable" value="0" class="custom-control-input" {{($media['downloadable'] == '0')?'checked':''}} required>
                                <label class="custom-control-label" for="radioNON">Non</label>
                            </div>
                        </div>
                        <div class="single-form d-flex justify-content-center">
                            <a role="button" href="{{route('pcourse.show', $media['ecu_id'])}}" class="btn btn-light btn-hover-dark me-3">
                                Annuler <i class="fa fa-undo ml-2"></i>
                            </a>
                            <button class="btn btn-warning btn-hover-dark">
                                Enregistrer <i class="fa fa-save ps-0"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Contact Form End -->

        </div>
    </div>
    <!-- Contact End -->

    <div class="modal" id="playerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Visualisation du média</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @if (mediaType($media['ext'], "video"))
                        <!--Video Case -->
                        <div class="mcontainer flex-container" id="video-div">
                            <div class="video-content">
                                <video-js
                                    id="my-player"
                                    class="video-js vjs-big-play-centered"
                                    data-setup='{"controls": true, "preload": "auto"}'
                                >
                                    {{-- <source src="{{ mediasAsset($media['url']) }}" type="video/{{$media['ext']}}"></source> --}}
                                    <source src="{{ mediasAsset($media['url']) }}" type="application/x-mpegURL"></source>
                                </video-js>
                            </div>
                        </div>
                        <!-- End Video Case -->
                    @elseif (mediaType($media['ext'], "image"))
                        <!--Image Case -->
                        <div class="mcontainer flex-container h-100 w-100" id="image-div">
                            <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="{{ mediasAsset($media['url'])}}"
                                    alt="NO IMAGE"
                                >
                            </div>
                            <div class="z-toolbar my-3 ">
                                <button id="z-rotate" class="btn btn-dark" data-bs-toggle="tooltip" title="Tourner l'image">
                                    <i class="fa fa-image"></i>
                                </button>
                                <div class="img-zoom">
                                    <button id="zoom-down" class="btn" data-bs-toggle="tooltip" title="Zoom arrière">
                                        <i class="fa fa-search-minus"></i>
                                    </button>
                                    <input id="zoom-range" type="range" class="form-control-range mx-3"/>
                                    <button id="zoom-up" class="btn btn-primary ml-auto" data-bs-toggle="tooltip" title="Zoom avant">
                                        <i class="fa fa-search-plus"></i>
                                    </button>
                                </div>
                                <button id="z-reset" class="btn" data-bs-toggle="tooltip" title="Revenir à l'état initial">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        <!--End Image Case-->
                    @else
                        <!--Document Case -->
                        <div class="mcontainer mb-2 h-100 w-100" id="pdf-div">
                            <div class="container-fluid w-100 h-100" id="canvas_container">
                                <iframe
                                    id="pdf-tag"
                                    src="{{ asset('pdfjs/web/viewer.html').'?file='.mediasAsset($media['url']) }}"
                                    frameborder="0"
                                    class="w-100 h-100"
                                >
                                </iframe>
                            </div>
                        </div>
                        <!-- End Document Case -->
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{-- Form js --}}
    <script src="{{asset('dist/js/moment-with-locales.min.js')}}"></script>
    <script src="{{asset('assets/libs/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker-custom.js')}}"></script>
    <script>
        const initState = {
            chap: $("#chapitre").val(),
            sections: @json($mSecs, JSON_PRETTY_PRINT),
        };

        (function() {
            $('#chapitre').on('change', function(e){
                // reinit all checks
                $('[data-chap]').hide();
                $('[data-chap] .form-check-input:checked').each((_,el) => {
                    el.checked = false;
                    $(el).trigger("change");
                });

                //
                const secs = `[data-chap="${ $(this).val() }"]`;
                $(secs).show();

                $('#shouldHaveSec').val($(`${secs} .form-check-input`).length ? "YES" : "NO");
            });

            // sections
            implicitDebounce("enableReinit", 500);
            $('[data-chap] .form-check-input').on("change", enableReinit);

            $(".reinit-btn").on("click", reinitState);

            // media
            $(".custom-file-input").on("change", function(e) {
                console.log(this.value);
                // works only for single file upload
                $(this).parents(".custom-file").find("label").text(this.value);
            });

            // published at
            $('#published_at_picker').bootstrapMaterialDatePicker({
                format: 'dddd DD MMMM YYYY à HH:mm',
                lang: 'fr',
                weekStart: 0,
                okText: 'OK',
                cancelText: 'Annuler',
                // clearButton: true,
                // clearText: "Effacer",
                minDate: new Date()
            });

            if ($("#published_at_picker").val().length) {
                $("#published_at_picker").val(function(index, value) {
                    $("#GMT").html(reformatDate(value, true));
                    return moment(value, ["YYYY-MM-DD HH:mm:ss"]).format("dddd DD MMMM YYYY à HH:mm");
                });
            }

            $('#published_at_picker').on('change', function(){
                let pubdate = reformatDate($('#published_at_picker').val());

                let utc = new Date(pubdate);
                utc = utc.getUTCFullYear() + "-" +
                    to2(utc.getUTCMonth() + 1) + "-"  +
                    to2(utc.getUTCDate())  + " " +
                    to2(utc.getUTCHours())  + ":" +
                    to2(utc.getUTCMinutes()) + ":" +
                    to2(utc.getUTCSeconds())
                ;

                $('#published_at').val(utc);
                $("#GMT").html(reformatDate(utc,true));
            });
        })()

        function enableReinit(e) {
            let checked = [];
            $('[data-chap] .form-check-input:checked').each((_,el) => {
                checked.push(el.value);
            });

            if (
                (initState.sections.length != checked.length) ||
                arrayDifference(initState.sections, checked).length != 0
            ) {
                $(".reinit-btn").show();
            } else {
                $(".reinit-btn").hide();
            }
        }

        function reinitState(e) {
            e.preventDefault();

            $('#chapitre').val(initState.chap)
            .trigger("change");
            $('#chapitre').niceSelect('update');

            initState.sections.forEach( s => {
                $(`[data-chap] .form-check-input[value='${s}']`).prop("checked", true);
            });

            $(".reinit-btn").hide();
            showToastr("info", "Chapitre et sections du média ramenés à leur états initiaux respectives !");
        }

        function reformatDate(d,toshow = false){
            if (toshow) {
                return moment(d, ["YYYY-MM-DD HH:mm:ss"]).format("DD MMMM YYYY à HH:mm")
            } else {
                return moment(d, "dddd DD MMMM YYYY à HH:mm").format("YYYY-MM-DD HH:mm:ss");
            }
        }
    </script>

    {{-- Players' js  --}}
    @if (mediaType($media['ext'], "video"))
        <!-- video js -->
        <script src="{{asset('video-js/video.min.js')}}"></script>
        <script src="{{asset('video-js/videojs-vjsdownload.min.js')}}"></script>
        <script src="{{asset('video-js/plugins/videojs-resolution-switcher.js')}}"></script>
        <script>
            $(function() {
                let player = videojs('my-player',  {
                    playbackRates: [.25,.5,1, 1.5, 2],
                    html5: {
                        hls: {
                            overrideNative: !videojs.browser.IS_SAFARI
                        }
                    },
                    plugins: {
                        vjsdownload:{
                            beforeElement: 'playbackRateMenuButton',
                            textControl: 'Download video',
                            name: 'downloadButton'
                        },
                        videoJsResolutionSwitcher: {
                            default: 'low',
                            dynamicLabel: true
                        }
                    }
                });

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

                player.on('play', function(){
                    // nothing here
                });

                player.on('ended', function(){
                    // nothing here
                });

                $("#playerModal").on("hidden.bs.modal", function () {
                    player.pause();
                });
            });
        </script>

    @elseif(mediaType($media['ext'], "image"))
        <!-- 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 zImage = new ZoomImage;

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

        </script>

    @endif
@endsection