@props([
    'title' => null,
    'items' => []

])

<div class="bg-grad-more py-20 text-white overflow-x-hidden">
    @if($title)
        <h1 class="h3 md:h1 text-center pb-12">{{ $title }}</h1>
    @endif

    <div
        class="container-1 relative"
        x-init="loader"
        x-data="{
                isReady: false,
                swiper: undefined,
                selectedSlide: 0,
                loader() {
                    let that = this;
                    let defaultOptions = {
                        loop: false,
                        grabCursor: true,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        },
                        on: {
                            afterInit: function () {
                                that.isReady = true;
                            },
                            progress(swiper, test) {
                                // console.log(test);
                            },
                            slideChange(swiper) {
                                that.selectedSlide = swiper.realIndex;
                            },
                            realIndexChange(swiper) {
                                that.selectedSlide = swiper.realIndex;
                            },
                        },
                        slidesPerView: 1.5,
                        spaceBetween: 0,
                        centeredSlides: true,
                        effect: 'coverflow',
                        coverflowEffect: {
                            rotate: 0,
                            slideShadows: false,
                            depth: 100,
                            scale: 0.65
                        },
                        breakpoints: {
                            768: {
                                centeredSlides: false,
                                slidesPerView: 4,
                                spaceBetween: 20,
                                coverflowEffect: {
                                    slideShadows: false,
                                    depth: 0,
                                    scale: 1
                                },
                            },
                            1024: {
                                centeredSlides: false,
                                spaceBetween: 30,
                                slidesPerView: 4,
                                coverflowEffect: {
                                    slideShadows: false,
                                    depth: 0,
                                    scale: 1
                                },
                            }
                        }
                    };

                    if(this.swiper) this.swiper.destroy(true, true);
                    this.swiper = new Swiper('#swiper-explore', defaultOptions);
                },
                next() {
                    this.swiper.slideNext();
                },
                prev() {
                    this.swiper.slidePrev();
                },
                init(){

                }
            }"
    >
        <div class="relative w-full z-30 flex">
            <div
                id="swiper-explore"
                class="flex-auto w-full h-full md:overflow-hidden md:mx-14 lg:mx-20"
                x-show="isReady"
            >
                <div class="swiper-wrapper">
                    @foreach($items as $brand)
                        <div class="swiper-slide md_hide-shadows md:!h-full">
                            <a href="{{ $brand->getUrl() }}">
                                <div
                                    class="aspect-square bg-cover bg-center"
                                    style="background-image: url('{{ $brand->getThumbnail() }}');">
                                </div>

                                <div class="pt-4 text-white block text-center">{{ $brand->title }}</div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="hidden md:flex absolute inset-y-0 left-0 w-14 lg:w-20 items-center justify-start">
                <button class="btn-on-dark !px-0 opacity-50" @click="prev()"><x-icon name="arrow-left" size="3rem" class="fill-grad-white-fade"></x-icon></button>
            </div>
            <div class="hidden md:flex absolute inset-y-0 right-0 w-14 lg:w-20 items-center justify-end">
                <button class="btn-on-dark !px-0 opacity-50" @click="next()"><x-icon name="arrow-right" size="3rem" class="fill-grad-white-fade"></x-icon></button>
            </div>
        </div>


    </div>

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