@extends('layout.wurth')
@section('header-scripts')
    @parent
    <link href="{{ asset('front/plugins/choices/choices.css') }}" rel="stylesheet">
@endsection
@section('title', "Wurth | Izmeni lekciju")
@section('header-actions')
    <x-wurth.publish-options form="lesson-form" :closeRoute="route('lms.wurth.lekcije.index', ['type' => request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText()])"></x-wurth.publish-options>
@endsection
@section('page-wrapper-classes', 'page-lesson')
@section('page-container')
    <div class="page-container col">
        <div class="page-holder">

            <div class="row">

                <!-- page-header -->
                <div class="col-12">
                    <nav class="breadcrumb-holder" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lms.wurth.lekcije.index', ['type' => request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText()]) }}">{{ App\Services\LessonTypeService::getWurthIndexTextByText() }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ App\Services\LessonTypeService::getWurthEditTextByText() }}</li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->
                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>{{ App\Services\LessonTypeService::getWurthEditTextByText() }}</h1>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Unos podataka za izmenu lekcije poput naziva videa kao i ostalih materijala potrebnih za lekciju</p>
                    </div>
                    <!-- main-title-hr-holder end -->
                </div>
                <!-- col end -->

                <div class="col-12">
                    <form action="{{ route('lms.wurth.lekcije.update', ['lesson' => $lesson, 'type' => request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText()]) }}" method="POST" id="lesson-form" onsubmit="return validateForm()">
                        @csrf
                        @method('patch')
                        @switch(request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText())
                            @case(App\Services\LessonTypeService::getWurthLectureTypeText())
                                @include('front.wurth.lesson._form')
                                @break
                            @case(App\Services\LessonTypeService::getWurthTestTypeText())
                                @include('front.wurth.lesson._test-form')
                                @break
                            @default
                                @include('front.wurth.lesson._form')
                        @endswitch
                    </form>
                </div>
                <!-- col end -->

                <!-- Footer -->
                @include('inc.wurth._footer')

            </div>
            <!-- row end -->
        </div>
        <!-- page-holder end -->
    </div>
    <!-- page-container end -->
    @switch(request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText())
        @case(App\Services\LessonTypeService::getWurthLectureTypeText())
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-choose-vimeo-videos" aria-labelledby="offcanvas-choose-vimeo-videos"></div>
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-add-control-question" aria-labelledby="offcanvas-add-control-question"></div>
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-upload-vimeo-video" aria-labelledby="offcanvas-upload-vimeo-video" data-lesson="{{ $lesson }}"></div>
            @break
        @case(App\Services\LessonTypeService::getWurthExerciseTypeText())
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-choose-vimeo-videos" aria-labelledby="offcanvas-choose-vimeo-videos"></div>
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-add-control-question" aria-labelledby="offcanvas-add-control-question"></div>
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-upload-vimeo-video" aria-labelledby="offcanvas-upload-vimeo-video" data-lesson="{{ $lesson }}"></div>
            @break
        @case(App\Services\LessonTypeService::getWurthTestTypeText())
            <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-import-excel-questions" aria-labelledby="offcanvas-import-excel-questions" data-lesson="{{ $lesson }}"></div>
            @break
        @default
    @endswitch
    @if(!Agent::isDesktop())
        @switch(request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText())
            @case(App\Services\LessonTypeService::getWurthLectureTypeText() || App\Services\LessonTypeService::getWurthExerciseTypeText())
                @include('front.wurth.lesson.partials._offcanvas-mobile-aside-form')
                @break
            @case(App\Services\LessonTypeService::getWurthTestTypeText())
                @include('front.wurth.lesson.partials._offcanvas-test-mobile-aside-form')
                @break
            @default
                @include('front.wurth.lesson.partials._offcanvas-mobile-aside-form')
        @endswitch
    @endif
@endsection
@section('plugins-scripts')
    @parent
    <!-- Tiny MCE -->
    <script type="text/javascript" src="{{ asset('front/wurth/plugins/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('front/plugins/choices/choices.js') }}"></script>
@endsection
@section('add-scripts')
    @parent
    <script>
        let errors = [];
        const elements_ids = [
            'title',
        ];

        const inputFiles_ids = [
            // 'image',
            //'video_image',
            //'cover_image'
        ];

        const selects_ids = [
            'ddl-instructor_id'
        ]

        const validateForm = (dispalyErrors = true) => {
            var valid = true;

            elements_ids.forEach(elementId => {
                const element = document.getElementById(`${elementId}`);
                if(element) {
                    element.classList.remove('is-invalid');    
                }
                
                if (element && element.value == '') {
                    if(element.id == 'title') {
                        errors = [...errors, 'Morate uneti naslov.']
                    }

                    element.classList.add('is-invalid');

                    valid = false;
                }
            });
            
            selects_ids.forEach(selectElementId => {
                const selectElement = document.querySelector(`#${selectElementId}`);

                if(selectElement) {
                    if (dispalyErrors) {
                        selectElement.classList.remove('is-invalid');
                    }
                    
                    let selectValue = false;

                    if (typeof(selectElement.value) == 'object') {
                        selectValue = selectElement.value.length;
                        
                    } else {
                        selectValue = selectElement.value;
                    }

                    if ([-1, ''].includes(selectElement.value)) {
                        if (dispalyErrors) {
                            if(selectElement.id == 'ddl-category_ids') {
                                errors = [...errors, 'Morate izabrati kategoriju.']
                            }

                            if(selectElement.id == 'ddl-instructor_id') {
                                errors = [...errors, 'Morate izabrati predavača.']
                            }

                            selectElement.classList.add('is-invalid');
                        }

                        valid = false;
                    }
                }
            });
            

            // inputFiles_ids.forEach(el => {
            //     const item = $('#'+el);
            //     if (dispalyErrors) {
            //         item.removeClass('is-invalid');
            //     }

            //     if (document.getElementById(el).files.length == 0) {
            //         if (dispalyErrors) {
            //             item.addClass('is-invalid');
            //         }

            //         valid = false;
            //     }
            // });
            
            if(errors.length > 0) {
                showToast('danger', errors);
                errors = [];
            }

            return valid;
        }
    </script>
    @switch(request()->type ?? App\Services\LessonTypeService::getWurthLectureTypeText())
        @case(App\Services\LessonTypeService::getWurthTestTypeText())
            <script src="{{ mix('js/wurth/TestQuestions.js') }}"></script>
            <script src="{{ mix('js/wurth/TestLevels.js') }}"></script>
            <script src="{{ mix('js/wurth/ImportExcelQuestions.js') }}"></script>
            @break
        @default
            <script src="{{ mix('js/wurth/MaterialsDropzone.js') }}"></script>
            <script src="{{ mix('js/wurth/AddControlQuestion.js') }}"></script>
            <script src="{{ mix('js/wurth/GalleryUpload.js') }}"></script>
            <script src="{{ mix('js/wurth/ChooseVimeoVideos.js') }}"></script>
            <script src="{{ mix('js/wurth/UploadVimeoVideo.js') }}"></script>
            <script>
                (() => {
                    let controlQuestionId = {{ $lesson->control_question_id ?? -1 }};
                    
                    // Initialize Choices.js on the select element
                    const myDropdownElement = document.getElementById('ddl-control_question_id');
                    if(myDropdownElement) {
                        const myDropdownInstance = new Choices(myDropdownElement, {
                            placeholder: true,
                            placeholderValue: "Izaberite lekciju",
                            shouldSort: false,
                        });

                        // Function to set new values to the select element
                        window.setNewValues = () => {
                            fetch(route('lms.wurth.fetch.lesson.get_course_questions_by_lesson', {lesson: {{ $lesson->id }}}))
                            .then((response) => response.json())
                            .then((result) => {
                                console.log("🚀 ~ .then ~ result:", result)
                                if(result.status) {
                                    if(result.data && result.data.questions.length > 0) {
                                        myDropdownInstance.clearStore();
                                        
                                        myDropdownInstance.setChoices([{value: -1, label: "Izaberite"}, ...result.data.questions.map((questionItem) => ({value: questionItem.id, label: questionItem.name}))], 'value', 'label', true);
                                        myDropdownInstance.setChoiceByValue(controlQuestionId);
                                    }
                                }
                            })
                        };

                        window.setNewValues();
                    }
                })()
            </script>
            <script>
                const videoHDInputElement = document.querySelector('#video_hd');
                const videoSDInputElement = document.querySelector('#video_sd')
                const videoDurationInputElement = document.querySelector('#video_duration')
                
                if(videoHDInputElement) {
                    videoHDInputElement.addEventListener('input', (e) => {
                        if(e.target.value.length == 0) {
                            if(videoSDInputElement) {
                                videoSDInputElement.value = '';
                            }

                            if(videoDurationInputElement) {
                                videoDurationInputElement.value = '';
                            }
                        }
                    })
                }

                if(document.querySelector(".btn-delete-video")) {
                    document.querySelector(".btn-delete-video").addEventListener('click', (e) => {
                        if(videoHDInputElement) {
                            videoHDInputElement.value = '';
                        }

                        if(videoSDInputElement) {
                            videoSDInputElement.value = '';
                        }

                        if(videoDurationInputElement) {
                            videoDurationInputElement.value = '';
                        }
                    })
                }
            </script>
    @endswitch
@endsection