@extends('layout.wurth')
@section('header-scripts')
    @parent
    <link href="{{ asset('front/plugins/choices/choices.css') }}" rel="stylesheet">
@endsection
@section('title', "Wurth | Dodaj kurs")
@section('header-actions')
    <x-wurth.publish-options form="course-form" :closeRoute="route('lms.wurth.kursevi.index')"></x-wurth.publish-options>
@endsection
@section('page-wrapper-classes', 'page-course')
@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.kursevi.index') }}">Kursevi</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Dodavanje kursa</li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->
                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>Dodavanje kursa</h1>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Unos podataka za izmenu kursa 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.kursevi.store') }}" method="POST" enctype="multipart/form-data" id="course-form" onsubmit="return validateForm()">
                        @csrf
                        @include('front.wurth.courses._form')
                    </form>
                </div>
                <!-- col end -->

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

            </div>
            <!-- row end -->
        </div>
        <!-- page-holder end -->
    </div>
    <!-- page-container end -->
    @if (!Agent::isDesktop())
        @include('front.wurth.courses.partials._offcanvas-mobile-aside-form')
    @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 src="{{ mix('js/wurth/CourseSegments.js') }}"></script>
    <script>
        let errors = [];
        const elements_ids = [
            'title',
            'title_for_certificate',
            'description',
        ];

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

        const selects_ids = [
            'ddl-category_ids',
            'ddl-instructor_id'
        ]

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

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

                    if(element.id == 'title_for_certificate') {
                        errors = [...errors, 'Morate uneti naslov za sertifikat.']
                    }

                    if(element.id == 'description') {
                        errors = [...errors, 'Morate uneti opis.']
                    }

                    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>
@endsection