@extends('layout.landing')
@section('title', 'Krojač Biznis | Novosti iz Krojačeve škole i sveta eLearninga')
@section('html-class')
    class="landing-page"
@endsection

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

    <!-- header-not-logged-in -->
    @include('front.partials.landing.b2b._header-not-logged-in')
    <!-- container end -->

    <!-- landing-top-section -->
    <section class="landing-top-section inner-front clearfix">
        <div class="container">
            <div class="row">

                <div class="col-12">
                    <div class="landing-top-text">
                        <p>Kursevi</p>
                    </div>
                    <!-- landing-top-text end -->
                </div>
                <!-- col end -->
                <div class="col-lg-7">
                    <div class="top-content-holder">
                        <div class="landing-main-title">
                            <h1>Prva LMS platforma krojena po meri!</h1>
                        </div>
                        <!-- landing-main-title-end -->
                        <div class="lead-text lead-text-lg">
                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375.01 135.69">
                                <path d="M330.25,91.31c-56.91,1.22-110.16,25.7-167.07,28.76-16.53.61-33.05-1.22-45.9-8.57,23.25-4.28,45.29-12.24,61.81-27.54,17.75-15.91,19.58-45.29,8.57-66.09-10.41-19.59-36.72-20.2-55.08-15.3C89.13,13,59.75,65,84.23,101.71c-26.93,1.83-53.86,0-80.17,1.22a4.3,4.3,0,1,0,.61,8.57C31.6,113.34,64,115.78,95.86,114c1.83,1.22,3.67,3.06,5.51,4.28,64.87,45.29,159.73-11.63,229.5-13.46C338.82,104.16,338.82,90.69,330.25,91.31ZM89.74,76.62C83,51.53,105,30.11,125.23,19.7s49-10.4,55.7,15.91c7.95,30.6-18.36,49-43.46,56.92a171.19,171.19,0,0,1-34.27,7.34C96.47,93.75,92.19,86.41,89.74,76.62Z" />
                                <path d="M371.87,91.92c-8.57-5.51-16.52-11-24.48-16.53C340.66,70.5,333.93,65,326,63.15c-6.12-1.83-12.24,7.35-6.73,11.63,6.73,4.9,14.07,9.18,20.81,13.46,4.89,3.07,9.79,6.74,14.07,9.8-4.89,2.44-9.79,4.28-14.69,6.73-3.67,1.83-7.95,3.67-11.62,5.51a7.28,7.28,0,0,0-3.06,3.06c-1.84,2.44-.62,1.22,0,.61-2.45,1.83-2.45,8,1.83,7.34h0a9.13,9.13,0,0,0,4.29.61A119.33,119.33,0,0,0,344.33,117c9.18-3.67,18.36-7.35,26.93-12.24C376.15,101.1,376.15,94.36,371.87,91.92Z" />
                            </svg>
                            Jedinstvena platforma za kompanijsko učenje na kojoj možeš da planiraš,
                            <span class="text-highlight">
                                upravljaš
                                i meriš
                            </span>
                            razvoj svojih zaposlenih.
                        </div>
                        <!-- lead-text end -->
                    </div>
                    <!-- top-content-holder end  -->
                </div>
                <!-- col end -->

                <div class="col-lg-5">
                    <div class="section-main-nav">
                        <div class="section-nav">
                            <!-- swirly-scribbled-arrow -->
                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 367.34 331.71">
                                <path d="M366.41,319.78c-6.12-13.46-12.85-26.32-20.2-39.17-6.12-11.63-12.24-25.7-21.42-35.5-4.9-5.51-15.3,0-12.85,7.34,0,0,0,.61,.61,.61-1.22,1.84-2.45,3.06-4.28,4.9-.61,0-1.84,.61-2.45,.61-1.22,.61-2.45,1.84-3.67,3.06-33.05-17.75-66.1-34.27-96.7-55.08-9.18-6.12-17.75-12.85-25.7-20.81,31.21-19.58,67.32-51.41,60.59-89.96-9.18-50.8-63.65-23.26-82.01,3.06-22.64,31.21-21.42,58.14,0,85.07-20.81,12.24-44.06,20.81-66.71,19.58-54.47-1.84-63.65-50.8-49.57-91.8,15.91,6.12,34.27,7.96,50.18,4.28,28.76-6.12,54.47-50.18,34.27-75.89-20.2-25.09-71.6,22.03-82.01,37.33-3.06,4.28-6.12,9.18-8.57,14.08-.61-.61-1.23-.61-1.84-1.22C-9.97,62.13,27.97,24.79,59.18,7.66c4.9-2.45,.61-9.18-4.28-7.34C22.46,14.39-15.48,43.15,6.55,81.71c5.51,9.18,13.46,17.14,23.26,22.64-13.46,33.66-13.46,72.83,17.14,97.31,36.72,29.38,84.46,11.02,119.95-8.57q.61,.61,1.22,1.22c33.66,34.88,81.4,56.3,124.24,78.34-3.06,4.28-6.12,9.18-9.18,13.46-1.84,3.06-1.22,7.35,1.22,9.79,20.81,17.75,45.9,31.21,73.44,35.5,6.73,1.84,11.63-4.89,8.57-11.63ZM159.55,160.66c-13.46-23.26,3.06-46.51,18.97-63.65,20.81-22.64,54.47-16.52,47.74,18.36-3.67,17.75-19.58,31.82-32.44,43.45-6.73,6.12-14.69,12.24-23.26,17.75-4.28-4.9-7.96-10.4-11.02-15.91ZM48.17,98.23s0-.61,0,0c8.57-16.52,20.81-28.76,36.11-38.56,6.73-4.28,14.08-7.96,22.03-9.79,20.81-6.12,10.4,26.93,6.12,35.5-12.85,23.26-42.23,21.42-64.26,12.85Zm252.14,190.33c0-.61,.61-.61,.61-1.22,1.84,0,3.67-1.23,4.9-3.67,1.84-4.28,4.28-8.57,6.73-12.85,1.22-1.84,4.9-5.51,3.67-5.51,.61,0,1.22-.61,1.22-1.22,3.67,6.73,8.57,13.46,12.24,20.2,4.9,8.57,9.79,17.75,14.69,26.93-15.3-4.28-30.6-12.24-44.06-22.64Z" />
                            </svg>
                            <div class="nav-buttons">
                                @foreach ($categories as $category)
                                    @if($loop->iteration == 4)
                                        @break
                                    @endif
                                    <a
                                        href="{{ route('front.courses', array_merge(request()->query(), ['kategorije' => $category->id, 'page' => 1])) }}" class="btn-nav @if (request()->get('kategorije', -1) == $category->id) active @endif">{{ $category->name }}</a>
                                @endforeach
                                <a href="#" class="btn-nav view-more dropdown-toggle dropdown-toggle-no-caret" id="dropdownViewMore" data-bs-toggle="dropdown" aria-expanded="false">
                                    Vidi još
                                    <svg stroke="currentColor" viewBox="0 0 336 192">
                                        <path d="M112,184,256,328,400,184" transform="translate(-88 -160)" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" fill="none"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownViewMore">
                                    @foreach ($categories as $category)
                                        @if($loop->iteration > 3)
                                            <a class="dropdown-item @if (request()->get('kategorije', -1) == $category->id) active @endif" href="{{ route('front.courses', array_merge(request()->query(), ['kategorije' => $category->id, 'page' => 1])) }}">{{ $category->name }}</a>
                                        @endif
                                    @endforeach
                                    <a class="dropdown-item @if (request()->get('kategorije', '') == '') active @endif" href="{{ route('front.courses', ['page' => 1]) }}">Sve</a>
                                </div>
                            </div>
                            <!-- nav-buttons end -->
                        </div>
                        <!-- section-nav end -->
                    </div>
                    <!-- section-main-nav end -->
                </div>
                <!-- col end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- landing-top-section end -->

    <!-- listing-content-section -->
    <div class="listing-content-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <!-- course-item -->
                        
                        <!-- course-item end -->
                        @foreach ($courses as $course)
                            <div class="col-lg-4">
                                <div class="course-item-box">
                                    <div class="course-item-image-holder">
                                        <a href="{{ route("prijava-get") }}">
                                            <img
                                                @if (strlen($course->img_720x378) > 0)
                                                    src="{{ asset('storage/' . $course->img_720x378) }}"
                                                @else
                                                    src="https://picsum.photos/720/378"
                                                @endif
                                                width="720" height="378">
                                        </a>
                                    </div>
                                    <!-- listing-item-image-holder end -->
                                    <div class="course-item-info">
                                        <div class="course-group">
                                            @if ($course->categories->first()->parent_id == -1)
                                                <a href="{{ route('front.courses', array_merge(request()->query(), ['kategorije' => $course->categories->first()->id, 'page' => 1])) }}" class="light-link">{{ $course->categories->first()->name }}</a>
                                            @else
                                                @php
                                                    $category = App\Services\CategoryService::getTopCategory($course->categories->first());
                                                @endphp
                                                <a href="{{ route('front.courses', array_merge(request()->query(), ['kategorije' => $category->id, 'page' => 1])) }}" class="light-link">{{ $category->name }}</a>
                                            @endif
                                            @if ($course->instructor)/ <a href="{{ route('front.courses', array_merge(request()->query(), ['predavac' => $course->instructor->id, 'page' => 1])) }}" class="dark-link">{{ $course->instructor->getFullName() }}</a>@endif
                                        </div>
                                        <!-- course-group end -->
                                    </div>
                                    <!-- course-item-info end -->
                                    <h2><a href="{{ route("prijava-get") }}">{{ $course->title }}</a></h2>
                                    {{-- @if (App\Models\LoggedUser::getFront())
                                        <div class="course-bottom-options">
                                            <div class="course-tags">
                                                <form action="{{ route('lms.buy_course', $course->id) }}" method="POST">
                                                    @csrf
                                                    <button
                                                        class="btn btn-pill-purple-30"
                                                        type="submit"
                                                        id="btn-buy-course"
                                                        data-course_id="{{ $course->id }}"
                                                        >Kupi</button>
                                                </form>
                                            </div>
                                        </div>
                                    @endif --}}
                                </div>
                                <!-- course-item-box end -->
                            </div>                            
                        @endforeach
                        <!-- course-item end -->

                        <!-- page-pagination -->
                        @include('front.courses.partials._pagination')
                        <!-- page-pagination end -->

                    </div>
                    <!-- row end -->
                </div>
                <!-- col end -->
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </div>
    <!-- listing-content-section end -->

    <!-- landing-bottom-section -->
    @include('front.partials.landing._bottom-section')
    <!-- landing-bottom-section end -->
    {{-- @include('front.courses.partials._offcanvas-kupi-kurseve') --}}
    <!-- Footer -->
    @include('front-inc._footer')

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

@endsection

@section('add-scripts')
    @parent
    <script>
        const setPerPageElement = document.querySelectorAll('.selectShowItems');
        setPerPageElement.forEach((setPerPage) => {
            setPerPage.addEventListener('change', (e) => {
                const perPage = e.target.value;

                const params = route().params;
                params.page = 1;
                params.perPage = perPage;

                window.location = route(route().current(), params);
            });
        });

        // const bsOffcanvasKupiPretplatu = new bootstrap.Offcanvas('#offcanvas-kupi-pretplatu')
        // const offcanvasKupiPretplatuElement = document.getElementById('offcanvas-kupi-pretplatu')

        // document.querySelector('#btn-buy-course').addEventListener('click', (e) => {
        //     e.preventDefault();
        //     console.log("Kliknuo", e.target);
        //     const course_id = e.target.dataset.course_id;
        //     console.log("🚀 ~ course_id:", course_id)

        //     // Dohvatiti formu i upisati joj rutu sa kursom 

        //     bsOffcanvasKupiPretplatu.show();
        // })
        
        // offcanvasKupiPretplatuElement.addEventListener('hidden.bs.offcanvas', event => {
        // // do something...
        // })
    </script>
@endsection