@php
    $reviewQuery = \App\Models\Review::orderBy('published_at', 'desc');

    if (isset($site)) {
        $reviewQuery->where('site', $site);
    }
@endphp

{{-- Clients reviews --}}
<div class="swiper swiper-reviews w-full h-80 relative p-12 select-none">
    <div class="swiper-wrapper">
        @foreach ($reviewQuery->get() as $review)
            @include('components.public.reviews.tiny', ['review' => $review])
        @endforeach
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev-custom absolute top-[45%] left-8 flex justify-center items-center w-10 h-10 text-xl bg-white shadow-lockit rounded-full z-40 text-lockit-blue"><i class="bi bi-arrow-left"></i></div>
    <div class="swiper-button-next-custom absolute top-[45%] right-8 flex justify-center items-center w-10 h-10 text-xl bg-white shadow-lockit rounded-full z-40 text-lockit-blue"><i class="bi bi-arrow-right"></i></div>
</div>

@push('page.head')
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
@endpush

@pushOnce('page.scripts')
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
@endpushonce

@push('page.scripts')
    <script>
        const swiperReviews = new Swiper('.swiper-reviews', {
            // Optional parameters
            direction: 'horizontal',

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next-custom',
                prevEl: '.swiper-button-prev-custom',
            },

            slidesPerView: 1,
            spaceBetween: 10,

            // Responsive breakpoints
            breakpoints: {
                // when window width is >= 640px
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                840: {
                    slidesPerView: 3,
                    spaceBetween: 20
                },
                1280: {
                    slidesPerView:4,
                    spaceBetween:30
                },
            }
        });
    </script>
@endpush