@extends('layouts.baseprof')

@section('titre','Modification de Media')

@section('css')
    @if (in_array($media['ext'], ["mov","mp4","avi","mp3"]))
        <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')}}">
@endsection


@section('content')
    <!-- 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 font-weight-bold">
                MODIFICATION DE MÉDIA
            </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="index.html">Dashboard</a></li> --}}
                        <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 -->

    <div class="page-content">
        <!-- 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

        @if ($errors->any())
            {{-- <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul> --}}
            <div class="alert alert-danger">
                Remplissez convenablement le formulaire svp! Attribuez de section(s) au média si vous ne l'avez pas fait!
            </div>
        @endif

        <div class="row ml-auto mr-auto">
            <div class="col-12">
                <div class="card mb-30">
                    <div class="card-header bg-warning d-flex align-items-center justify-content-between">
                        <h4 class="card-title mb-0 font-weight-bold">
                            Modification de la leçon <i class="ml-2 far fa-edit"></i>
                        </h4>
                        <a href="{{route('pcourse.show', $media['ecu_id'])}}" class="btn btn-light btn-rounded">voir liste medias <i class="fa fa-reply ml-2"></i></a>
                    </div>
                    <div class="card-body">
                        <!--Old file display -->
                        <div class="mb-4" style="height: 400px;">
                            @if (in_array($media['ext'], ["mov","mp4","avi","mp3"]))
                                <!--Video Case -->
                                <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"}'
                                    >
                                        <source src="{{ mediasAsset($media['url']) }}" type="video/{{$media['ext']}}"></source>
                                    </video-js>
                                </div>
                            @else
                                <!--Document Case -->
                                <div class="h-100 pr-0 pl-0 border border-secondary">
                                    <iframe src="{{ asset('pdfjs/web/viewer.html?file='.mediasAsset($media['url']) )}}" frameborder="0" class="w-100 h-100"></iframe>
                                </div>
                            @endif
                        </div>

                        <!--Form content -->
                        <form method="POST" action="{{ route('lesson.update', ['lesson' => $media['id']]) }}" class="m-2" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="callback" value="{{route('pcourse.show', $media['ecu_id'])}}" required>
                            <div class="form-group">
                                <label for="titre">Titre</label>
                                <input required type="text" class="form-control" name="titre" value="{{$media['titre']}}" placeholder="titre du média (au moins 5 caractères)" minlength="5">
                            </div>
                            <div class="form-group">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" name="description" cols="100" rows="3" placeholder="description du média (au moins 10 caractères)" required minlength="10">{{$media['description']}}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="chapitre">Chapitre</label>
                                <select class="form-control" name="chapitre" id="chapitre" required>
                                    <option selected disabled  value="">selectionnez le chapitre</option>
                                    @foreach($chapitres as $chap)
                                        <option value="{{$chap['id_chapitre']}}" {{($media['chap_id'] == $chap['id_chapitre'])?'selected':''}}>{{$chap['chapitreintitule']}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="sections" class="">Sections</label>
                                <div class="form-group" style="padding: 0.5em 1em; max-height: 7em; overflow-y: auto; background-color: #e9ecef;" >
                                    <div style="background-color: #cecece; color: #828080;">Décocher les anciennes pour cocher les nouvelles section(s) à attribuer au media</div>
                                    @php
                                        $mSecs = json_decode($media['sequences']);  // array of sections linked to the Media
                                        $shouldHaveSec = "NO";
                                    @endphp
                                    @foreach($chapitres as $chap)
                                        @if (count($chap['sections']))
                                            @php
                                                // $chap['sections'] = [ //to remove later
                                                //     ["id_sectionchapitre" => "dkZxM1c4bWpBN0p3cmFpM1pIdHR1UT09", "intitule" => "section 01"],
                                                //     ["id_sectionchapitre" => "TEZ3ZnorMU9nZmt1Ty9qcFhXelpkZz09", "intitule" => "Sequence 02"],
                                                // ];

                                                if ($chap['id_chapitre'] ===  $media['chap_id']) {
                                                    $shouldHaveSec = "YES";
                                                }
                                            @endphp
                                            @foreach($chap['sections'] as $section)
                                                <div class="form-check"  belongsTo="{{$chap['id_chapitre']}}" style="display: {{ in_array($section['id_sectionchapitre'],$mSecs)?'block':'none'}};">
                                                    <input class="form-check-input" type="checkbox" value="{{$section['id_sectionchapitre']}}" id="check{{$section['id_sectionchapitre']}}" name="sections[]" {{ in_array($section['id_sectionchapitre'],$mSecs)?'checked':''}}>
                                                    <label class="form-check-label" for="check{{$section['id_sectionchapitre']}}">{{$section['intitule']}}</label>
                                                </div>
                                            @endforeach
                                        @else
                                            <div belongsTo="{{$chap['id_chapitre']}}" class="px-1" 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" value="{{$shouldHaveSec}}">
                            {{-- shouldHaveSec end --}}
                            <div class="form-group">
                                <label class="m-1">Media</label>
                                <div class="custom-file">
                                    <input name="media" accept="video/*, .pdf" type="file" class="custom-file-input">
                                    <label class="custom-file-label">changer le fichier</label>
                                </div>
                            </div>
                            <input type="hidden" name="mediaFile" value="{{$media['url']}}">
                            <div class="form-group">
                                <label for="published" class="form-label">Sera visible le (sera enregistré en GMT : <span id="GMT" class="text-primary" style="font-size: .9em;"></span>)</label>
                                <input type="text" class="form-control" id="published_picker" value="{{$media['published_at']}}">
                                <input type="hidden" id="published" name="published"  value="{{$media['published_at']}}">
                            </div>
                            <div class="form-group mb-4">
                                <label class="d-block">Les etudiants peuvent-ils télécharger ce fichier ? </label>
                                <div class="custom-control custom-radio  custom-control-inline ml-2">
                                    <input type="radio" id="customRadioOui" name="downloadable_media" value="1" class="custom-control-input" {{($media['downloadable'] == '1')?'checked':''}}>
                                    <label class="custom-control-label" for="customRadioOui">Oui</label>
                                </div>
                                <div class="custom-control custom-radio  custom-control-inline ml-2">
                                    <input type="radio" id="customRadioNon" name="downloadable_media" value="0" class="custom-control-input" {{($media['downloadable'] == '0')?'checked':''}}>
                                    <label class="custom-control-label" for="customRadioNon">Non</label>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center justify-content-center">
                                <a role="button"  href="{{route('pcourse.show', $media['ecu_id'])}}" class="btn btn-light mr-4">Annuler <i class="fa fa-undo ml-2"></i></a>
                                <button type="submit" class="btn btn-warning">Modifier <i class="far fa-edit ml-2"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <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>
        $(function() {
            $('#chapitre').on('change', function(e){
                $('[belongsTo]').hide();
                let bto = $('[belongsTo="'+$(this).val()+'"]');
                bto.show();
                $('[name="shouldHaveSec"]').val( bto.find(".form-check-input").length ? "YES" : "NO");
            });

            $('#published_picker').bootstrapMaterialDatePicker({
                format: 'dddd DD MMMM YYYY à HH:mm',
                lang: 'fr',
                weekStart: 0,
                okText: 'OK',
                cancelText: 'Annuler',
                // clearButton: true,
                // clearText: "Effacer",
                minDate: new Date()
            });
            $("#published_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_picker').on('change', function(){
                let pubdate = reformatDate($('#published_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').attr('value' , utc);
                $("#GMT").html( reformatDate(utc,true));
            });
        });

        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");
            }
        }

        function to2(x){
            x = x.toString();
            if(x.length < 2 )  x = "0" + x ;
            return x;
        }
    </script>

    {{-- video stuff --}}
    @if (in_array($media['ext'], ["mov","mp4","avi","mp3"]))
        <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>
        <script>
            $(function() {
                let player = videojs('my-player',  {
                    playbackRates: [.25,.5,1, 1.5, 2],
                    html5: {
                        hls: {
                            overrideNative: !videojs.browser.IS_SAFARI
                        }
                    },
                    plugins: {
                        videoJsResolutionSwitcher: {
                            default: 'low',
                            dynamicLabel: true
                        }
                    }
                });
            })
        </script>
    @endif
@endsection