@extends('layouts.baseprof')

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

@section('css')
    <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">
                CRÉATION 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="{{ 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())
            <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-theme d-flex align-items-center justify-content-between">
                        <h4 class="card-title mb-0 font-weight-bold">
                            Création de Média <i class="ml-2 fas fa-file-medical"></i>
                        </h4>
                        <a href="{{route('pcourse.show', $course)}}" class="btn btn-light btn-rounded">voir liste medias <i class="fa fa-reply ml-2"></i></a>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success mb-4" style="font-size: 1em;">
                            <i class="fas fa-exclamation-circle"></i> &nbsp; Ce média sera attribué au chapitre : <b>{{ $chap['chapitreintitule']}}</b>
                         </div>
                        <form method="POST" action="{{ route('lesson.store') }}" class="m-2" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="course" value="{{$course}}" required>
                            <input type="hidden" name="chapitre" value="{{$chap['id_chapitre']}}">
                            <input type="hidden" name="shouldHaveSec" value="{{$chap['sections'] ? 'YES' : 'NO'}}">
                            <div class="form-group">
                                <label for="titre">Titre</label>
                                <input type="text" class="form-control" name="titre" placeholder="titre du média (au moins 5 caractères)"required >
                            </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></textarea>
                            </div>
                            <div class="form-group">
                                <label for="sectionsAll" class="">Sections </label>
                                <div class="form-group" style="padding: .5em .5em; max-height: 7em; overflow-y: auto; background-color: #e9ecef;" >
                                    @if (count($chap['sections']))
                                        <div class="px-1" style="background-color: #cecece; color: #828080;">Selectionnez la ou les section(s) à attribuer au media</div>
                                        @foreach($chap['sections'] as $section)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="{{$section['id_sectionchapitre']}}" id="check{{$section['id_sectionchapitre']}}" name="sections[]">
                                                <label class="form-check-label" for="check{{$section['id_sectionchapitre']}}">{{$section['intitule']}}</label>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="px-1" style="color: #828080;">Aucune section n'est disponible pour ce chapitre</div>
                                    @endif
                                </div>
                            </div>
                            <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" required>
                                    <label class="custom-file-label">Choisissez un média</label>
                                </div>
                            </div>
                            <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="">
                                <input type="hidden" id="published" name="published"  value="">
                            </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">
                                    <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" checked>
                                    <label class="custom-control-label" for="customRadioNon">Non</label>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center justify-content-center">
                                <button type="submit" class="btn btn-theme">Enregistrer <i class="fas fa-check-circle 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(){
            $('#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').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) { // reformat to show ??
                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>
@endsection