@extends('layout.front')
@section('title', "Kursevi vendora | {$vendor->name}")

@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"><a href="#">Vendori</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $vendor->name }}</li>
                        </ol>
                    </nav>

                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>Kursevi vendora {{ $vendor->name }} ({{ $vendorCourses->total() }})</h1>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Ukoliko nemate neki od kurseva kontaktirajte svog menadžera sektora.</p>
                    </div>
                    <!-- main-title-hr-holder end -->
                    <div class="row">
        
                        @include('front.vendor.partials.courses._filters')
                        
                        @foreach ($vendorCourses as $course)
                            @include('front.vendor.partials.courses._course-item')
                        @endforeach

                        @if($vendorCourses->total() > 12)
                            @include('front.vendor.partials.courses._load-more')
                        @endif
                        <!-- load-more end -->

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

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

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

    </section>

    @include('front-inc._footer')
    @include('front.vendor.partials.courses._left-side-filters')
</div>
@endsection
@section('add-scripts')
@parent
<script>
    const setPerPageElement = document.querySelectorAll('.selectShowItems');
    setPerPageElement.forEach((setPerPage) => {
        setPerPage.addEventListener('change', (e) => {
            window.location = route(route().current(), {...route().params, perPage: e.target.value, page:1});
        });
    });
</script>
@endsection