@extends('layout.front')
@section('title', 'Krojač Biznis | Obavezni 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">

                    <nav class="breadcrumb-holder" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active"><a href="{{ route('lms.obavezni_kursevi.index') }}">Obavezni kursevi</a></li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->

                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>Obavezni kursevi ({{ $assignedMandatoryCourses->total() }})</h1>
                            <div class="button-holder">
                                <a href="{{ route('lms.obavezni_kursevi.create') }}" class="btn btn-square-blue-text-30"><span>+</span>napravi nove obavezne kurseve</a>
                            </div>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Pregled dodeljenih obaveznih kurseva sa izveštajem.</p>
                    </div>
                    <!-- main-title-hr-holder end -->

                    @php
                        $prevRoute = route('lms.obavezni_kursevi.index', [
                            'sortColumn' => request()->get('sortColumn', null),
                            'sortDirection' => request()->get('sortDirection', null),
                            'page' => ($assignedMandatoryCourses->currentPage() == 1) ? 1 : ($assignedMandatoryCourses->currentPage() -1),
                            'perPage' => request()->get('perPage', 10)
                        ]);
                        $nextRoute = route('lms.obavezni_kursevi.index', [
                            'sortColumn' => request()->get('sortColumn', null),
                            'sortDirection' => request()->get('sortDirection', null),
                            'page' => ($assignedMandatoryCourses->currentPage() == $assignedMandatoryCourses->lastPage()) ? $assignedMandatoryCourses->lastPage() : ($assignedMandatoryCourses->currentPage() + 1),
                            'perPage' => request()->get('perPage', 10)
                        ]);
                    @endphp
                    <!-- row table desktop only -->
                    @include('front.mandatory-courses.partials._desktop-table')
                    <!-- row table desktop only end -->

                    <!-- row mobile only -->
                    @include('front.mandatory-courses.partials._mobile-table')
                    <!-- row mobile only end -->

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

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

    </section>

    @include('front-inc._footer')
</div>

<div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-mandatory-courses-data" aria-labelledby="offcanvas-mandatory-courses-data">
    <!-- offcanvas-header -->
    <div class="offcanvas-header">
        <h4 id="offcanvasHeadingTitle">Mart</h4>
        <button type="button" class="btn-close btn-icon" data-bs-dismiss="offcanvas" 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)"/>
            </svg>
        </button>
    </div>
    <!-- offcanvas-header end -->

    <!-- offcanvas-body -->
    <div class="offcanvas-body">
        <p class="offcanvas-main-text" id="offcanvas-main-text">Pregled najgledanijih kurseva u mesecu.</p>
        <div id="rc-mandatory-courses-data"></div>
        <!-- offcanvas-user end -->
    </div>
    <!-- offcanvas-body end -->

    <!-- offcanvas-options -->
    {{-- <div class="offcanvas-options">
        <a href="#" class="btn btn-square-blue-45" id="userDetailLink">Detaljnije</a>
        <button class="btn btn-square-gray-45" type="button" data-bs-dismiss="offcanvas" aria-label="Close">Odustani</button>
    </div> --}}
    <!-- offcanvas-options end -->

</div>

{{-- <div class="offcanvas offcanvas-end offcanvas-hr offcanvas-xl" data-bs-scroll="false" tabindex="-1" id="offcanvas-mandatory-courses-data" aria-labelledby="offcanvas-mandatory-courses-data">

    <!-- offcanvas-header -->
    <div class="offcanvas-header">
        <h4 id="offcanvasHeadingTitle">Mart</h4>
        <button type="button" class="btn-close btn-icon" data-bs-dismiss="offcanvas" 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)"/>
            </svg>
        </button>
    </div>
    <!-- offcanvas-header end -->

    <!-- offcanvas-body -->
    <div class="offcanvas-body">
        <p class="offcanvas-main-text" id="offcanvas-main-text">Pregled najgledanijih kurseva u mesecu.</p>
        <div id="rc-mandatory-courses-data"></div>
    </div>
    <!-- offcanvas-body end -->

</div>
<!-- offcanvas end --> --}}
@include('front-inc._confirm-delete-modal')

@endsection

@section('add-scripts')
    @parent
    <script src="{{ mix('js/components/OffcanvasData.js') }}"></script>
    <script>
        const deleteButtons = document.querySelectorAll('.btn-delete');
        const confirmDeleteModal = new bootstrap.Modal(document.getElementById('confirm-delete-modal'))

        deleteButtons.forEach((deleteButton) => {
            deleteButton.addEventListener('click', (e) => {
                const assigned_mandatory_course_id = e.currentTarget.dataset.assigned_mandatory_course_id
                document.querySelector('#confirm-delete-modal .confirm-delete-modal-title').textContent = "Brisanje obaveznog kursa"
                document.querySelector('#confirm-delete-modal .confirm-delete-modal-body-message').textContent = "Da li ste sigurni da želite da obrišete obavezni kurs?"
                document.querySelector('#confirm-delete-modal #confirm-delete-modal-form').action = route('lms.obavezni_kursevi.destroy', {'assigned_mandatory_course': assigned_mandatory_course_id});

                confirmDeleteModal.show();
            });
        });

    </script>
@endsection