@props([
    'items' => []
])
<div class="bg-grad-header overflow-hidden">
    <div class="relative">
        <x-sections.header-top :is-home="true" />

        <div class="text-center pt-3 md:pt-0 md:-mt-6 md:w-full md:absolute md:inset-0 md:flex md:items-center md:justify-center">
            {{ $title ?? '' }}
        </div>
    </div>

    @if(count($items))
        <div class="relative pt-20 md:pt-4 pb-10 md:pb-20">
            <div class="absolute z-10 bottom-0 left-0 right-0 h-1/2 bg-grad-more"></div>

            <div
                class="relative"
                x-data="{
                        size: undefined,
                        isReady: false,
                        swiper: undefined,
                        selectedSlide: 0,
                        items: @js($items),
                        init() {
                            this.loader();
                        },
                        loader() {
                            let that = this;
                            let defaultOptions = {
                                loop: false,
                                grabCursor: true,
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev'
                                },
                                on: {
                                    afterInit() {
                                        that.isReady = true;
                                        console.log('swiper initialized');
                                    },
                                    slideChange(swiper) {
                                        that.selectedSlide = swiper.realIndex;
                                    },
                                    sliderMove(test) {

                                    },
                                    realIndexChange(swiper) {
                                        that.selectedSlide = swiper.realIndex;
                                    },
                                    transitionStart(swiper) {
                                        that.shadow(swiper);
                                    },
                                    progress(swiper, test) {
                                        that.shadow(swiper);
                                    },
                                },
                                slidesPerView: 1.5,
                                //spaceBetween: 100,
                                effect: 'coverflow',
                                centeredSlides: true,
                                coverflowEffect: {
                                    rotate: 0,
                                    slideShadows: false,
                                    depth: 100,
                                    scale: 0.65
                                },
                                breakpoints: {
                                    768: {
                                        centeredSlides: false,
                                        spaceBetween: 40,
                                        slidesPerView: 3,
                                        coverflowEffect: {
                                            depth: 1,
                                            scale: 1
                                        },
                                    },
                                    1024: {
                                        centeredSlides: false,
                                        spaceBetween: 60,
                                        slidesPerView: 3,
                                        coverflowEffect: {
                                            depth: 1,
                                            scale: 1
                                        },
                                    }
                                }
                            };

                            this.$nextTick(()=>{
                                if(this.swiper) this.swiper.destroy(true, true);
                                this.swiper = new Swiper('#home-swiper', defaultOptions);
                            });
                        },
                        map(value, inMin, inMax, outMin, outMax) {
                            return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
                        },
                        shadow(swiper) {
                            swiper.visibleSlides.forEach((slide) => slide.style.filter = 'none');
                            if(swiper.currentBreakpoint !== 'max') return;

                            swiper.visibleSlides.forEach((slide) => {
                                let value= Math.round((1 - Math.abs(slide.progress))*100)/100;
                                slide.style.filter = `brightness(${this.map(value, 0,1,0.5,1)})`;
                            });
                        },
                        next() {
                            this.swiper.slideNext();
                        },
                        prev() {
                            this.swiper.slidePrev();
                        },
                    }"
            >
                <div class="container-1 relative w-full z-30 flex">
                    <div
                        id="home-swiper"
                        class="flex-auto w-full md:overflow-x-hidden overflow-y-visible md:mx-14 lg:mx-20 p-2 min-h-[60vw] md:min-h-[35vw] lg:min-h-[31vw] xl:min-h-[380px]"
                    >
                        <div class="swiper-wrapper opacity-0" x-cloak :class="isReady?'opacity-100':''">
                            @foreach($items as $item)
                                <div class="swiper-slide md_hide-shadows md:!h-full">
                                    <a href="{{ $item->url }}" class="group relative block">
                                        <div class="group-hover:shadow-lg aspect-square bg-center bg-cover bg-no-repeat rounded-sm flex justify-center scale-100 btn-scale-with-group-hover" style="background-image: url({{ $item->image }})">
                                            <x-cards.hover-play-state class="opacity-0 rounded-sm group-hover:opacity-100"></x-cards.hover-play-state>
                                            @if (!empty($item->live) && $item->live)<span class="inline-block absolute left-3 bottom-2 text-white text-lg font-bold">LIVE</span>@endif
                                            @if(!empty($item->sub_thumbnail))
                                                <div
                                                    style="background-image: url({{ $item->sub_thumbnail }})"
                                                    class="block translate-y-0 absolute w-6/12 transition ease-out duration-200 bottom-[-0.5rem] scale-100 group-hover:scale-105 aspect-square bg-cover bg-center bg-no-repeat"
                                                ></div>
                                            @endif
                                        </div>
                                    <div class="pt-5 text-sm lg:text-base text-white hidden md:block text-center">{!! $item->text !!}</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 mb-[7vw] xl:mb-16" @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 mb-[7vw] xl:mb-16" @click="next()"><x-icon name="arrow-right" size="3rem" class="fill-grad-white-fade"></x-icon></button>
                    </div>
                </div>

                <div class="relative z-20 flex w-full justify-between pt-8 md:hidden">
                    <div class="w-20 flex items-center justify-start">
                        <button class="btn-on-dark !px-0 opacity-50" @click="prev()">
                            <x-icon name="arrow-left" size="3rem"></x-icon>
                        </button>
                    </div>

                    <div class="relative flex-auto" x-cloak>
                        @foreach($items as $key => $item)
                            <div
                                class="absolute inset-0 text-center text-white flex items-center justify-center"
                                x-transition.duration.250
                                x-show="selectedSlide===@js($key)"
                            >
                                <div class="w-full">{!! $item->text !!}</div>
                            </div>
                        @endforeach
                    </div>

                    <div class="w-20 flex items-center justify-end">
                        <button class="btn-on-dark !px-0 opacity-50" @click="next()">
                            <x-icon name="arrow-right" size="3rem"></x-icon>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    @else
        <div class="h-11 md:h-0"></div>
    @endif

    <div class="relative z-40 md:container-1">
        <button
            x-data @click="()=>{$dispatch('opensearchmodal'); }"
            class="btn-white flex items-center justify-between w-56 mx-auto -mt-5"
        >
            <div class="hiddden xl:block">Search</div>
            <x-icon name="search" size="1.5em" class="ml-4 -mr-2" />
        </button>
        <div class="grid grid-cols-2 text-center md:flex md:flex-wrap py-8 justify-center sm:gap-x-4" >

            <a
                class="
                 link hover:opacity-75 text-white px-2.5 py-2 font-barlow text-2xl
                 {{ request()->routeIs('home.show')?'underline':'hover:no-underline' }}
                 "
                href="{{ route('home.show')  }}"
            >
                Radio
            </a>
            <a
                class="
                 link hover:opacity-75 text-white px-2.5 py-2 font-barlow text-2xl
                 {{ request()->routeIs('podcasts.home')?'underline':'hover:no-underline' }}
                 "
                href="{{ route('podcasts.home')  }}"
            >
                Podcasts
            </a>
            <a
                class="
                 link hover:opacity-75 text-white px-2.5 py-2 font-barlow text-2xl
                 {{ request()->routeIs('music.home')?'underline':'hover:no-underline' }}
                 "
                href="{{ route('music.home')  }}"
            >
                Music
            </a>
            <a
                class="
                 link hover:opacity-75 text-white px-2.5 py-2 font-barlow text-2xl
                 {{ request()->routeIs('sermons.home')?'underline':'hover:no-underline' }}
                 "
                href="{{ route('sermons.home') }}"
            >
                Sermons
            </a>
        </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>