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

@section('title','Création de Média')

@section('css')
    <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')}}">
@endsection

@section('content')

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

            {{-- alert with content --}}
            @include('partials.alert')
            
            @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 create-form ">
                <h3 class="title">Création de Média
                    <a href="{{route('pcourse.show', $course)}}" 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.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="course" value="{{$course}}" required>
                        <input type="hidden" name="shouldHaveSec" id="shouldHaveSec" value="NO">

                        <div class="single-form">
                            <label class="form-label" for="titre">Titre</label>
                            <input type="text" name="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></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']}}">{{$chap['chapitreintitule']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!-- Sections-->
                        <div class="form-group" style="margin-top: 20px;">
                            <label class="form-label" for="sections">
                                Sections
                            </label>
                            <div class="bg-light p-2 media-sections">
                                <div class="hint">
                                    Selectionnez le chapitre puis les section(s) à attribuer au media
                                </div>
                                @foreach ($chapitres as $i => $chap)
                                    @if (count($chap['sections']))
                                        @foreach($chap['sections'] as $j => $section)
                                            <div class="form-check" data-chap="{{$chap['id_chapitre']}}" style="display: {{ $i == 0 ? 'block' : 'none' }};">
                                                <input 
                                                    class="form-check-input" 
                                                    type="checkbox" 
                                                    value="{{$section['id_sectionchapitre']}}" 
                                                    id="check_{{$i.'_'.$j}}" 
                                                    name="sections[]"
                                                >
                                                <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">
                                            Aucune section n'est disponible pour le chapitre selectionné
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="single-form">
                            <label class="form-label" for="media">Média</label>
                            <div class="custom-file">
                                <label for="media">
                                    Aucun fichier choisi
                                </label>
                                <input 
                                    class="custom-file-input" 
                                    type="file"
                                    accept="video/*, .pdf, image/*"
                                    id="media" 
                                    name="media"
                                >
                            </div>
                        </div>
                        <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="">
                            <input type="hidden" id="published_at" name="published_at"  value="">                            
                        </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" checked>
                                <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">
                                <label class="custom-control-label" for="radioNON">Non</label>
                            </div>
                        </div>
                        <div class="single-form d-flex justify-content-center">
                            <button class="btn btn-primary btn-hover-dark">
                                Enregistrer <i class="fa fa-check-circle ps-0"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Contact Form End -->

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

@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){
                // reinit all checks
                $('[data-chap]').hide();
                $('[data-chap] .form-check-input:checked').each((_,el) => {
                    el.checked = false;
                });

                const secs = `[data-chap="${ $(this).val() }"]`;
                $(secs).show();
                
                $('#shouldHaveSec').val($(`${secs} .form-check-input`).length ? "YES" : "NO");
            });

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

            $('#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 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>
@endsection