@extends('layout.front')

@section('title', 'Moji kursevi | Krojačeva škola')
@section('description', 'Pregledaj sve kurseve koje pratiš u Krojačevoj školi. Nastavi tamo gde si stao i upravljaj svojim napretkom i sertifikatima.')
@section('keywords', 'Krojačeva škola, moji kursevi, online kursevi, učenje, sertifikati, napredak')

@section('content')
<div class="page-wrapper">

    <!-- Header Account -->
    @include('front-inc._header-account')

    <!-- section main-container -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main-content -->
                <div class="main-content col-12">
                    <!-- alert-notification -->
                    <div class="alert alert-light alert-dismissible fade show" role="alert">
                        <p>U toku je prelazak na novu platformu Krojačeve škole. Tokom ovog perioda moguće su sitne tehničke nepravilnosti. Ako ih primetite, molimo vas da nam javite.
                       Ukoliko u svom nalogu ne vidite ranije kupljene kurseve, ulogujte se <a target="_blank" href="https://stari.krojacevaskola.com/korisnik/prijava">OVDE</a></p>
                        <p>Vaša podrška nam pomaže da sve radi savršeno.</p>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <!-- close -->
                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.16 311.19">
                                <path d="M106.68,375.18a21.33,21.33,0,0,0,30.17,30.17L256,286.17,375.17,405.33a21.33,21.33,0,1,0,30.17-30.17L286.17,256,405.33,136.82a21.33,21.33,0,0,0-30.17-30.17L256,225.83,136.84,106.67a21.33,21.33,0,1,0-30.17,30.17L225.84,256Z" transform="translate(-100.42 -100.41)"></path>
                            </svg>
                        </button>
                    </div>
                    <!-- alert-notification end -->

                    @if ($totalEnrollments == 0)
                        <div class="row">
                            <div class="col-lg-10 offset-lg-1">
                                <div class="no-enrolled-courses">
                                    <h1>Trenutno nemate nijedan upisani kurs</h1>
                                    <p>Obaveštenje o upisanim kursevima uskoro će stići na Vaš mejl. Još samo malo i zajedno ćemo uploviti u svet novih znanja i veština.</p>
                                    <div class="button-holder">
                                        {{-- <a href="{{ route('lms.contact') }}" class="btn btn-pill-blue-45 mr-2">Kontaktirajte nas</a> --}}
                                        <a href="{{ route('kupovina.index') }}" class="btn btn-pill-blue-45 ml-2">Pretplatite se</a>
                                    </div>
                                    <!-- button-holder end -->
                                </div>
                                <!-- no-enrolled-courses end -->
                            </div>
                            <!-- cole end -->
                        </div>
                        <!-- row end -->
                    @else
                        @if($lastWatchedCourse)
                            @if ($lastWatchedCourse && $lastWatchedCourse->is_completed)
                                @include('front.user.mycourses.course._finished-top-course', ['enrollment' => $lastWatchedCourse, 'showBackBtn' => false])
                            @else
                                @include('front.user.mycourses.top-course', ['enrollment' => $lastWatchedCourse, 'showBackBtn' => false])
                            @endif
                        @endif

                        <div class="row">
                            @include('front.user.mycourses.course.partials._active-filters-container')

                            @include('front.user.mycourses.course.partials._section-main-nav')
                            <!-- col end -->
                            @include('front.user.mycourses.course.partials._lesson_list_items')
                            <!-- load-more -->
                            @if($enrollmentsData->total() > 12)
                                @include('front.user.mycourses.course.partials._load_more')
                            @endif
                            <!-- load-more end -->

                        </div>
                    @endif
                    <!-- row end -->

                </div>
                <!-- main-content end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->

    </section>
    <!-- main-container end -->

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

</div>
<!--- page-wrapper end -->


@include('front.user.mycourses.left-side-filters')
@if ($lastWatchedCourse && $lastWatchedCourse->is_completed == 1)
    @include('front.user.mycourses._offcanvas-oceni-kurs', ['enrollment' => $lastWatchedCourse])
@endif

@include('front.user.mycourses.course.partials._request-course-activation-modal')

@endsection

@section('add-scripts')
@parent
@if ($totalEnrollments == 0)
    <script>
        let msg = `<div>
            <h3>Biznis platforma je namenjena isključivo kompanijskom učenju i mogu je koristiti zaposleni kojima je pristup omogućen od strane kompanije.</h3>
            <p>Predlažemo Vam da se obratite Vašem HR ili L&D menadžeru kako bi Vam omogućio mogućnost učenja na Biznis LMS-u Krojačeve škole.</p>
            <p>Ukoliko želite pristup platformi kao kompanija, posetite stranu: <a href="https://biznis.krojacevaskola.com/contact">https://biznis.krojacevaskola.com/contact</a></p>
        </div>`;
        // showWarningToast(msg);
    </script>
@else
    <script>
        const parentUsers = {!! json_encode(App\Models\LoggedUser::getParentUsers()) !!};

        const getManagersArray = () => {
            let managers = [];

            parentUsers.forEach((element) => {
                managers.push(`<strong>${element.first_name} ${element.last_name}</strong>`);
            });

            return managers.join(', ');
        }

        const getRequestCourseActivationText = (courseTitle) => {
            const managers_str = getManagersArray();
            if(parentUsers.length > 1) {
                return `<p>Klikom na dugme "Pošalji" poslaćete poruku menadžerima ${managers_str} za pristup kursu <strong>"${courseTitle}"</strong>.`
            }

            return `<p>Klikom na dugme "Pošalji" poslaćete poruku menadžeru ${managers_str} za pristup kursu <strong>"${courseTitle}"</strong>.`
        }

        document.querySelectorAll('.btn-request-course-activation').forEach((element) => {
            element.addEventListener('click', (e) => {
                e.preventDefault();
                console.log(parentUsers);
                document.querySelector('#requestCourseActivationForm input[type=hidden][name=enrollment_id]').value = e.currentTarget.dataset.enrollment_id;
                document.querySelector('#requestCourseActivationModal .modal-body').innerHTML = getRequestCourseActivationText(e.currentTarget.dataset.course_title);

                new bootstrap.Modal(document.getElementById('requestCourseActivationModal')).show();
            });
        });
    </script>
    <script>
        var packagesString = '';
        var categoriesString = '';

        var url = '{{ route('lms.my-courses') }}';
        const paginateUrl = '{{ route('lms.my-courses.paginate') }}';
        var urlNew = '';

        var packages_ids = [];
        var categories_ids = [];
        var bottomFilter = '';

        var packages = [].slice.call(document.getElementsByClassName('packages-chbxs'));
        var categories = [].slice.call(document.getElementsByClassName('categories-chbxs'));
        var bottomFilters = [].slice.call(document.getElementsByClassName('bottom-filter'));
        const $select_sort_element = document.getElementById('ddlSort');
        const mandatoryFilter = document.querySelector('.mandatory-filter');

        packages.forEach(item => {
            if(item.checked) {
                packages_ids.push(item.value);
            }

            item.addEventListener('click', function(e) {

                if (this.checked) {
                    packages_ids.push(this.value);
                } else {
                    packages_ids = packages_ids.filter(x => x != this.value);
                }
            });
        });

        categories.forEach(item => {
            if(item.checked) {
                categories_ids.push(item.value);
            }

            item.addEventListener('click', function(e) {

                if (this.checked) {
                    categories_ids.push(this.value);
                } else {
                    categories_ids = categories_ids.filter(x => x != this.value);
                }
            });
        });

        if(mandatoryFilter) {
            mandatoryFilter.addEventListener('click', (e) => {
                // Posto samo jedan filter sme da bude selektovan ovde se deselektuju ostali
                bottomFilters.forEach((element) => {
                    element.classList.remove('active');
                });
    
                bottomFilter = '';
    
                if (e.currentTarget.classList.contains('active')) {
                    e.currentTarget.classList.remove('active');
                } else {
                    e.currentTarget.classList.add('active');
                }
            })

        }

        bottomFilters.forEach(item => {
            if (item.classList.contains('active')) {
                bottomFilter = item.getAttribute('data-action');
            }

            item.addEventListener('click', function(e) {
                if(mandatoryFilter) {
                    if (mandatoryFilter.classList.contains('active')) {
                        mandatoryFilter.classList.remove('active');
                    }
                }

                if (this.classList.contains('active')) {
                    this.classList.remove('active');
                    bottomFilter = '';

                } else {
                    bottomFilters.forEach(item2 => {
                        item2.classList.remove('active');
                    });

                    this.classList.add('active');
                    bottomFilter = this.getAttribute('data-action');
                }
            });
        });

        document.getElementById('apply-filters').addEventListener('click', function(e) {
            setUrl();
        });

        function setUrl() {
            const urlNew = url + getQueryString();

            window.location.href = urlNew;
        }

        function getQueryString() {
            // Ukoliko je obelezen bottom-filter za obavezne kurseve tada isto bez obzira da li trenutno ima defubusab type staviti da je ruta obavezni/...
            let mandatoryRoute = false;
            if(mandatoryFilter || route().params.type) {
                mandatoryRoute = mandatoryFilter.classList.contains('active');
            }

            var urlNew = mandatoryRoute ? `/obavezni` : '';

            if (packages_ids.length) {
                packagesString = packages_ids.join(',');
            }

            if (categories_ids.length) {
                categoriesString = categories_ids.join(',');
            }

            if (bottomFilter != '') {
                urlNew += '?packages=' + packagesString + '&categories=' + categoriesString + '&' + bottomFilter + '=1';
            } else {
                urlNew += '?packages=' + packagesString + '&categories=' + categoriesString;
            }

            let sort = getSelectedSort();
            
            if(sort != null && sort.filter_obavezni) {
                urlNew += `&filter_obavezni=${sort.filter_obavezni}`
            }

            if(sort != null && sort.filter_trajni) {
                urlNew += `&trajni=1`
            }

            if(sort != null && sort.sort_column) {
                urlNew += `&sortColumn=${sort.sort_column}&sortOrder=${sort.sort_order}`
            }

            if(route().params.perPage) {
                if(urlNew == '') {
                    urlNew += `?perPage=${route().params.perPage}`;
                }

                return urlNew += `&perPage=${route().params.perPage}`;
            }
            
            return urlNew;
        }

        $select_sort_element.onchange = function() {
            setUrl();
        }

        function getSelectedSort() {
            const $optionElement = document.querySelector(`#ddlSort`)
            const selectedIndex = $optionElement.selectedIndex;
            if(selectedIndex != 0) {
                if(document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-sort_order') == 'mandatory') {
                    return sort = {
                        sort_order: document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-sort_order')
                    };
                }

                if(document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-filter_obavezni')) {
                    return {
                        filter_obavezni: document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-filter_obavezni')
                    }
                }

                if(document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-filter_trajni')) {
                    return {
                        filter_trajni: document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-filter_trajni')
                    }
                }

                return sort = {
                    sort_order: document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-sort_order'),
                    sort_column: document.querySelectorAll(`#ddlSort option`)[selectedIndex].getAttribute('data-sort_column')
                };
            }

            return null;
        }

        const $showMoreElement = document.querySelector('.load-more-container #showMore');

        if($showMoreElement != null) {
            document.addEventListener('click',function(e){
                if(e.target && e.target.id== 'showMore'){
                    e.preventDefault();
                    const paginationRoute = ''
                    const pageNumber = e.target.getAttribute('data-page_number');
                    const getRoute = `${paginateUrl}${getQueryString()}&page=${pageNumber}`;

                    fetch(getRoute)
                        .then(response => response.json())
                        .then((data) => {
                            const $element = document.querySelector('.load-more-container')
                            const $parentElement = document.querySelector('.load-more-container').parentElement
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(data.html, 'text/html');
                            const $responseElements = doc.querySelectorAll('.col-xl-4.col-lg-6');

                            $responseElements.forEach(($responseElement) => {
                                $parentElement.insertBefore($responseElement, $element);
                            });

                            const docOfShowMore = parser.parseFromString(data.showMoreHtml, 'text/html');
                            let oldShowMore = document.querySelector('.load-more-container')
                            let newShowMore = docOfShowMore.querySelector('.load-more-container');
                            oldShowMore.replaceWith(newShowMore);
                        });
                }
            });
        }

    </script>
    <script
        type="text/javascript"
        src="{{ mix('js/my_courses.js') }}"
    ></script>
    @if ($lastWatchedCourse && $lastWatchedCourse->is_completed == 1)
        <script src="{{ mix('js/components/CourseReview.js') }}"></script>
    @endif
@endif
@endsection