@extends('layout.front')

@section('title', 'Krojač Biznis | Moji kursevi')

@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">
                    <div class="row">
                        <div class="col-lg-10 offset-lg-1">
                            <div class="no-enrolled-courses">
                                <h1>Lekcija nije pronađena</h1>
                                <p>Ne postoji lekcija koja sadrži: "{{ request()->get('keyword', 'pretraga') }}"</p>
                                <div class="button-holder">
                                    <a href="{{ route('lms.my-courses') }}" class="btn btn-pill-blue-45">Svi kursevi</a>
                                </div>
                                <!-- button-holder end -->
                            </div>
                            <!-- no-enrolled-courses end -->
                        </div>
                        <!-- cole end -->
                    </div>

                </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


@endsection

@section('add-scripts')
<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'));
    var bottomFilters = [].slice.call(document.getElementsByClassName('bottom-filter'));
    const $select_sort_element = document.getElementById('ddlSort');

    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);
            }
        });
    });

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

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

            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() {
        var urlNew = '';

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