@extends('layout.wurth')
@section('header-scripts')
    @parent
    <link href="{{ asset('front/plugins/choices/choices.css') }}" rel="stylesheet">
@endsection
@section('title', "Wurth | Obaveštenja")
{{-- @section('page-wrapper-classes', 'page-lesson') --}}
@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 active" aria-current="page">Obaveštenja</li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->
                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>Obaveštenja ({{ $userNotifications->total() }})</h1>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Obaveštenja o radnjama na front dashboardu</p>
                    </div>
                    <!-- main-title-hr-holder end -->
                </div>
                <!-- col end -->

                <div class="col-12">
                
                    <div class="notifications-holder">
                        <!-- toolbar-holder end -->
                        @foreach ($userNotifications as $userNotification)
                            @include('front.notifications.partials._notification-item', compact('userNotification'))
                            <!-- notification-item end -->
                        @endforeach
                    </div>
                    <!-- notifications-holder end -->
                
                    <!-- Page pagination -->
                    @if ($userNotifications->total() > 12)
                        @php
                            $prevRoute = route(Route::currentRouteName(), array_merge(request()->query(), [
                                'page' => ($userNotifications->currentPage() == 1) ? 1 : ($userNotifications->currentPage() -1),
                            ]));
                            $nextRoute = route(Route::currentRouteName(), array_merge(request()->query(), [
                                'page' => ($userNotifications->currentPage() == $userNotifications->lastPage()) ? $userNotifications->lastPage() : ($userNotifications->currentPage() + 1),
                            ]));
                        @endphp
                        <x-pagination-footer
                            currentPage="{{ $userNotifications->currentPage() }}"
                            perPage="{{ $userNotifications->perPage() }}"
                            lastPage="{{ $userNotifications->lastPage() }}"
                            total="{{ $userNotifications->total() }}"
                            :perPageOptions="[24, 48, 72, $userNotifications->total()]"
                        >
                        
                            <x-slot name="nextRoute">
                                <a
                                    href="{{ $nextRoute }}"
                                    class="{{ ($userNotifications->currentPage() == $userNotifications->lastPage()) ? "disabled" : '' }}"
                                >
                                    <!-- right-arrow -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.04 102.38">
                                    <path d="M358.37,193.63c4.9-2.45,4.9-10.4,0-12.85C320.43,160,281.87,141,240.26,130c-6.12-1.22-12.24,5.51-8.57,11a139.91,139.91,0,0,0,31.21,31.82C177.22,170.37,88.48,158.74,4,178.94c-6.12,1.22-4.9,11.63,1.23,11,87.52-11,174.42-2.45,261.94-1.22-9.18,10.4-18.36,20.81-27.54,30.6-4.28,4.28-1.84,13.46,5.51,12.85C285.54,227.29,323.49,213.82,358.37,193.63Zm-72.83-6.73c5.51-3.67,4.28-14.08-4.28-14.08H280c-7.34-7.34-14.69-14.08-22-22,28.15,9.79,54.47,22,80.78,36.11-23.87,12.24-48.35,21.42-74.66,26.32,6.12-6.73,12.24-14.08,19-20.81A4.52,4.52,0,0,0,285.54,186.89Z" transform="translate(0 -129.83)"/>
                                    </svg>
                                    <div class="hover-notification">
                                        <!-- left-arrow -->
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.39 63.22">
                                        <path d="M58.52,141.74C37.1,146,18.74,157,2.22,170.5c-3.67,3.06-2.45,9.18,1.22,11.63,19.58,11,41,20.2,63.65,22.64,6.73.61,7.35-9.79,1.22-11A226.21,226.21,0,0,1,20.58,175.4a107.78,107.78,0,0,1,14.08-8.57c-4.28,4.28-2.45,14.08,5.51,14.08,99.76.61,202.57,23.26,301.1,5.51,8-1.22,6.12-14.69-1.84-14.08-100.37,8-198.9-7.35-299.27-8H38.94a94.81,94.81,0,0,1,23.26-8C72,155.2,68.31,139.9,58.52,141.74Z" transform="translate(0 -141.59)"/>
                                        </svg>
                                        <span>Sledeća</span>
                                    </div>
                                    <!-- hover-notification end -->
                                </a>
                            </x-slot>
                        
                            <x-slot name="prevRoute">
                                <a
                                    href="{{ $prevRoute }}"
                                    @if ($userNotifications->currentPage() == 1)
                                        disabled="disabled"
                                    @endif
                                    class="{{ ($userNotifications->currentPage() == 1) ? "disabled" : '' }}"
                                >
                                    <!-- left-arrow -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.04 102.38">
                                    <path d="M3.67,168.42c-4.9,2.45-4.9,10.4,0,12.85,37.94,20.81,76.5,39.78,118.12,50.8,6.12,1.22,12.24-5.51,8.57-11a139.91,139.91,0,0,0-31.21-31.82c85.68,2.45,174.42,14.08,258.88-6.12,6.12-1.22,4.9-11.63-1.23-11-87.52,11-174.42,2.45-261.94,1.22,9.18-10.4,18.36-20.81,27.54-30.6,4.28-4.28,1.84-13.46-5.51-12.85C76.5,134.76,38.56,148.22,3.67,168.42Zm72.83,6.73c-5.51,3.67-4.28,14.08,4.28,14.08H82c7.34,7.34,14.69,14.08,22,22-28.15-9.79-54.47-22-80.78-36.11,23.87-12.24,48.35-21.42,74.66-26.32-6.12,6.73-12.24,14.08-19,20.81A4.52,4.52,0,0,0,76.5,175.15Z" transform="translate(0 -129.83)"/>
                                    </svg>
                                    <div class="hover-notification">
                                        <!-- right-arrow -->
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.39 63.22">
                                        <path d="M287.87,204.65c21.42-4.28,39.78-15.3,56.31-28.76,3.67-3.06,2.45-9.18-1.22-11.63-19.58-11-41-20.2-63.65-22.64-6.73-.61-7.35,9.79-1.22,11A226.21,226.21,0,0,1,325.81,171a107.78,107.78,0,0,1-14.08,8.57c4.28-4.28,2.45-14.08-5.51-14.08-99.76-.61-202.57-23.26-301.1-5.51C-2.83,161.2-1,174.66,7,174.05c100.37-8,198.9,7.35,299.27,8h1.22a94.81,94.81,0,0,1-23.26,8C274.41,191.19,278.08,206.49,287.87,204.65Z" transform="translate(0 -141.59)"></path>
                                        </svg>
                                        <span>Prethodna</span>
                                    </div>
                                    <!-- hover-notification end -->
                                </a>
                            </x-slot>
                        </x-pagination-footer>
                    @endif
                
                </div>
                <!-- main-content end -->
                <!-- col end -->

                <!-- Footer -->
                @include('inc.wurth._footer')

            </div>
            <!-- row end -->
        </div>
        <!-- page-holder end -->
    </div>
    <!-- page-container end -->
@endsection
@section('add-scripts')
<script>
    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,
                            });
        });
    });
</script>
@endsection