@extends('layout.wurth')
@section('title', "Wurth | Kursevi")
@section('header-actions')
    <div class="col-auto col-lessons-actions">
        <a href="{{ route('lms.wurth.kursevi.create') }}" class="btn btn-pill-blue-30">
            Nov kurs
        </a>
    </div>
    <!-- col end -->
@endsection
@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">Pregled svih kurseva</li>
                    </ol>
                </nav>
                <!-- breadcrumb end -->
                <div class="main-title-hr-holder">
                    <div class="main-title-hr">
                        <h1>Kursevi ({{ $courses->total() }})</h1>
                        <div class="button-holder">
                            <a href="{{ route('lms.wurth.kursevi.create') }}" class="btn btn-square-blue-text-30"><span>+</span>nov kurs</a>
                        </div>
                        <!-- button-holder end -->
                    </div>
                    <!-- main-title-hr end -->
                    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis turpis rhoncus, ultricies mi auctor, dictum quam. Mauris nibh diam, mollis et urna ac, maximus pellentesque sem.</p>
                </div>
                <!-- main-title-hr-holder end -->
            </div>
            <!-- col end -->

            @if ($courses->total() > 0)
                <!-- table desktop only -->
                @include('front.wurth.courses.partials.index._desktop-table')
                <!-- table desktop only end -->

                <!-- table mobile only -->
                @include('front.wurth.courses.partials.index._mobile-table')
                <!-- table mobile only end -->
            @else
                <div class="no-documents">
                    <!-- attention-construction-triangular-hand-drawn-signal -->
                    @include('front-inc.svg.attention-construction-triangular-hand-drawn-signal')
                    <p>Nemate unetih kurseva</p>
                </div>
                <!-- no-documents end -->
            @endif
            
            <!-- Footer -->
            @include('inc.wurth._footer')

        </div>
        <!-- row end -->
    </div>
    <!-- page-holder end -->
</div>
<!-- page-container end -->
@endsection
@section('header-scripts')
    @parent
    <link href="{{ asset('front/plugins/choices/choices.css') }}" rel="stylesheet">
@endsection
@section('plugins-scripts')
    @parent
    <script type="text/javascript" src="{{ asset('front/plugins/choices/choices.js') }}"></script>
@endsection
@section('add-scripts')
    @parent
    <script>
        (() => {
            if(document.getElementById('selectSorting')) {
                document.getElementById('selectSorting').addEventListener('change', (e) => {
                    e.preventDefault();
                    const selectedOption = e.target.options[e.target.selectedIndex].dataset;
                    
                    if(selectedOption.is_filter == 1) {
                        const filterName = selectedOption.filter_name;
                        const filterValue = selectedOption.filter_value;

                        window.location = route(route().current(), {
                            ...route().params,
                            page: 1,
                            filterName: filterValue
                        });
                    }

                    if(selectedOption.is_filter == 0) {
                        const sortColumn = selectedOption.sort_column;
                        const sortDirection = selectedOption.sort_direction;

                        window.location = route(route().current(), {
                            ...route().params,
                            page: 1,
                            sortColumn,
                            sortDirection
                        });
                    }
                })
            }
            document.querySelectorAll('.selectShowItems').forEach((setPerPage) => {
                setPerPage.addEventListener('change', (e) => {
                    const perPage = e.target.value;
                    window.location = route(route().current(), {
                        ...route().params,
                        page: 1,
                        perPage: perPage,
                    });
                });
            });

            document.querySelectorAll('input[type=number][name=numberPage]').forEach((goToPage) => {
                goToPage.addEventListener('keydown', (e) => {
                    if(e.key === 'Enter') {
                        const page = e.target.value;
                        
                        if(+page <= +e.target.dataset.total_pages) {
                            window.location = route(route().current(), {
                                ...route().params,
                                page: page,
                            });

                            return
                        }

                        showToast('danger', "Stranica koju tražite ne postoji.")
                    }
                });
            });
        })()

        document.querySelectorAll('.btn-delete').forEach((deleteButtonElement) => {
            deleteButtonElement.addEventListener('click', (e) => {
                e.preventDefault()
                const route = e.currentTarget.dataset.route;
                
                document.querySelector('#confirm-delete-modal .modal-title').innerHTML = "Brisanje lekcije"
                document.querySelector('#confirm-delete-modal .modal-body').innerHTML = "Da li ste sigurni da želite da obrišete lekciju?"
                document.querySelector('#confirm-delete-modal form').action = route

                const confirmDeleteModal = new bootstrap.Modal(document.getElementById('confirm-delete-modal'), {})
                confirmDeleteModal.show()
            })
        })

        document.querySelector('.btn-search').addEventListener('click', (e) => {
            e.preventDefault();
            const searchTerm = document.getElementById('search_term').value;

            window.location.href = route('lms.wurth.kursevi.index', {...route().params, page: 1, search_term: searchTerm})
        })

        if(document.getElementById('search_term')) {
            document.getElementById('search_term').addEventListener('keydown', (e) => {
                if (e.key === "Enter") {
                    const searchTerm = document.getElementById('search_term').value;
    
                    window.location.href = route('lms.wurth.kursevi.index', {...route().params, page: 1, search_term: searchTerm})
                }
            })
        }

        if(document.getElementById('ddl-selectLecturer')) {
            document.getElementById('ddl-selectLecturer').addEventListener('change', (e) => {
                const predavac = e.target.value;
                window.location.href = route('lms.wurth.kursevi.index', {...route().params, page: 1, predavac})
            })
        }
    </script>
    <script>
        const changePublishedStatus = (course_id, published) => {
            const formData = new FormData()
            formData.append('_method', 'PATCH');
            formData.append('published', published);

            return fetch(route('lms.wurth.kursevi.update_status', {course: course_id}),
                {
                    headers: {
                        Accept: "application/json",
                        "X-CSRF-TOKEN": document.head.querySelector("meta[name='csrf-token']")
                            .content,
                    },
                    method: 'POST',
                    body: formData,
                }
            )
        }

        const showProperlyBadgeAndSelect = (id, status, data_selector, ddl_selector) => {
            if(status == 0) {
                document.querySelectorAll(`.${ddl_selector}[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.remove('active');
                })
                document.querySelectorAll(`.${ddl_selector}[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.add('paused');
                })
                document.querySelectorAll(`.badge-paused[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.remove('d-none');
                })
                document.querySelectorAll(`.badge-active[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.add('d-none');
                })
            }

            if(status == 1) {
                document.querySelectorAll(`.${ddl_selector}[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.add('active');
                })
                document.querySelectorAll(`.${ddl_selector}[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.remove('paused');
                })
                document.querySelectorAll(`.badge-paused[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.add('d-none');
                })
                document.querySelectorAll(`.badge-active[data-${data_selector}='${id}']`).forEach((element) => {
                    element.classList.remove('d-none');
                })
            }
        }

        document.querySelectorAll('.ddl-course-status').forEach((ddlLessonStatusElement) => {
            ddlLessonStatusElement.addEventListener('change', (e) => {
                e.preventDefault()
                const element = e.currentTarget;
                const course_id = e.currentTarget.dataset.course_id;
                const published = e.currentTarget.value;

                changePublishedStatus(course_id, published)
                .then((response) => response.json())
                .then((result) => {
                    if(result.status){
                        showProperlyBadgeAndSelect(course_id, published, 'course_id', 'ddl-course-status')

                        showToast('success', "Uspešno izmenjen status lekcije.");
                        return
                    }

                    showToast('danger', "Greška pri izmeni statusa lekcije. Pokušajte ponovo.");
                })
                .catch((error) => {
                    console.log("🚀 ~ file: index.blade.php:382 ~ ddlLessonStatusElement.addEventListener ~ error:", error)
                    showToast('danger', "Greška, pokušajte ponovo.");
                });
            })
        })

        document.querySelectorAll('.btn-show-more-categories').forEach((btnShowMoreCategories) => {
            btnShowMoreCategories.addEventListener('click', (e) => {
                e.preventDefault()
                const element = e.currentTarget;
                const course_id = e.currentTarget.dataset.course_id;
                
                document.querySelector(`.course-col-item-${course_id}`).classList.remove('d-none')
                document.querySelector(`.course-col-default-item-${course_id}`).classList.add('d-none')
            })
        })
    </script>
@endsection