@push('style')
<style>
    .swiper {
        width: 100%;
        height: 100%;
        padding: 20px 0;
    }

    .swiper-slide {
        text-align: center;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #000;
        background: rgba(255, 255, 255, 0.8);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px;
    }

    .swiper-pagination-bullet-active {
        background: #000;
    }

    .swiper-pagination {
        top: 2rem !important;
    }

    .swiper-slide-active .extra-content {
        display: block !important;
    }
</style>
@endpush
<div x-data="{ scrollY: 0 }"
    x-init="
    console.log('from body');
    const element = $el;
    element.addEventListener('scroll', () => {
      scrollY = element.scrollTop;
      console.log('scrolling...', scrollY);
    });
  ">
    <div class="relative w-full h-[100vh] bg-gray-900 bg-opacity-50 mb-6" x-data="{
    isPlaying: false,
    togglePlayPause() {
        if (this.isPlaying) {
            this.$refs.video.pause();
        } else {
            this.$refs.video.play().catch(e => console.error('Error:', e));
        }
        this.isPlaying = !this.isPlaying;
    }
}">
        <video
            class="w-full h-100 object-cover"
            x-ref="video"
            muted
            autoplay
            loop
            @play="isPlaying = true"
            @pause="isPlaying = false"
            x-init="$nextTick(() => { isPlaying = $el.paused === false })">
            <source src="{{ $video ? asset(Storage::url($video->path)) : asset('default-website-media/videoDecoy.mp4') }}" type="video/mp4">
        </video>
        <a class="mx-auto my-auto absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-lg sm:h-24 md:h-24 lg:h-72">
            <livewire:booking-widget />
        </a>
        <input placeholder="what is this search for?" class="absolute text-white focus:outline-none focus:ring-0 focus:border-transparent bottom-1/10 start-1/10 bg-transparent border-t-0 border-r-0 border-l-0 border-b-2 border-white outline-none" />
        <button
            class="absolute end-1/10 bottom-1/10 transform -translate-x-1/2"
            @click="togglePlayPause()"
            :title="isPlaying ? 'Pause video' : 'Play video'"
            x-cloak>
            <img x-show="isPlaying" src="{{asset('images/pause-button.png')}}" alt="Pause video" width="24" height="24">
            <img x-show="!isPlaying" src="{{asset('images/play-button.png')}}" alt="Play video" width="24" height="24">
        </button>
    </div>
    <div class="swiper mySwiper h-72" id="offers" wire:ignore>
        <div class="swiper-wrapper h-full">
            @if ($offers->isNotEmpty())
            @foreach ($offers as $offer)
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ $offer->media->isNotEmpty() 
                    ? asset(Storage::url($offer->media->first()->path)) 
                    : asset('images/arbaeen.png') }}" alt="Slide 1" class="w-full h-64 object-cover rounded flex-1 min-h-0">
                    <div class="extra-content hidden">
                        <p class="text-start text-lg font-bold p-3 h-20">{{ $offer->translations->first()->name }}</p>
                        <p class="text-start text-lg font-bold p-3 h-20">{{ Str::limit($offer->translations->first()->description, 80) }}...</p>
                        <button @click="Livewire.dispatch('bookOffer', {{ json_encode([$offer->id]) }})" class="align-self-end bg-luxury-action text-luxury-action-secondary  px-1 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mt-3 w-1/3">{{ __("messages.Book now") }}</button>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ $pool->media->isNotEmpty() 
                    ? asset(Storage::url($pool->media->first()->path)) 
                    : asset('images/pooldecoy.png') }}" alt="Slide 2" class="w-full h-64 object-cover rounded flex-1 min-h-0">
                    <div class="extra-content hidden">
                        <p class="text-start text-lg font-bold p-3">{{ $pool->translations->first()->name }}</p>
                        <p class="text-start text-lg font-bold p-3 h-20">{{ Str::limit($pool->translations->first()->description, 80) }}...</p>
                        <a href="{{ route('pool-details') }}" class="w-full flex flex-col">
                            <button class="align-self-end bg-luxury-action text-luxury-action-secondary  px-1 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mt-3 w-1/3">{{ __("messages.Learn More") }}</button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ $gym->media->isNotEmpty() 
                    ? asset(Storage::url($gym->media->first()->path)) 
                    : asset('images/gymdecoy.png') }}" alt="Slide 2" class="w-full h-64 object-cover rounded flex-1 min-h-0">
                    <div class="extra-content hidden">
                        <p class="text-start text-lg font-bold p-3">{{ $gym->translations->first()->name }}</p>
                        <p class="text-start text-lg font-bold p-3 h-20">{{ Str::limit($gym->translations->first()->description, 80) }}...</p>
                        <a href="{{ route('gym-details') }}" class="w-full flex flex-col">
                            <button class="align-self-end bg-luxury-action text-luxury-action-secondary  px-1 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mt-3 w-1/3">{{ __("messages.Learn More") }}</button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ $restaurant->media->isNotEmpty() 
                    ? asset(Storage::url($restaurant->media->first()->path)) 
                    : asset('images/restaurantdecoy.png') }}" alt="Slide 2" class="w-full h-64 object-cover rounded flex-1 min-h-0">
                    <div class="extra-content hidden">
                        <p class="text-start text-lg font-bold p-3">{{ $restaurant->translations->first()->name }}</p>
                        <p class="text-start text-lg font-bold p-3 h-20">{{ Str::limit($restaurant->translations->first()->description, 80) }}...</p>
                        <a href="{{ route('restaurant-details') }}" class="w-full flex flex-col">
                            <button class="align-self-end bg-luxury-action text-luxury-action-secondary  px-1 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mt-3 w-1/3">{{ __("messages.Learn More") }}</button>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Add more slides as needed -->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination !relative mb-2 "></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <livewire:website.hotel-home-intro />
    <div class="swiper mySwiper2 h-48 mt-8 mb-8" id="vipguests" wire:ignore>
        <div class="swiper-wrapper h-full ">
            @if ($vipguests->isNotEmpty())
            @foreach ($vipguests as $vipguest)
            <div class="swiper-slide h-auto !shadow-none !bg-[#f3f4f6]">
                <div class="w-3/4 flex justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ $vipguest->media->isNotEmpty() 
                    ? asset(Storage::url($vipguest->media->first()->path)) 
                    : asset('images/arbaeen.png') }}" alt="Slide 1" class="h-full w-3/4 max-w-3/4 object-cover rounded min-h-0">
                    <div class="w-1/4 max-w-1/4 flex flex-col justify-content-between !bg-[#eae9ed]">
                        <p class="text-start text-lg font-bold p-3 h-20 w-full">{{ $vipguest->translations->first()->name }}</p>
                        <a href="{{ route('vip-guests-details', $vipguest->id ) }}">
                            <button class="align-self-end bg-luxury-action text-luxury-action-secondary  px-1 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mt-3 w-full">
                                {{ __("messages.Read more") }}
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination !relative mb-2 "></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>

@push('js')
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.mySwiper', {
            // Optional parameters
            loop: true,
            slidesPerView: 1,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 3500,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
            // Responsive breakpoints
            breakpoints: {
                // when window width is >= 640px
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                // when window width is >= 1024px
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 30
                }
            },
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        const swiper2 = new Swiper('.mySwiper2', {
            // Optional parameters
            loop: true,
            slidesPerView: 1,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 3500,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },

            // Responsive breakpoints
            breakpoints: {
                // when window width is >= 640px
                640: {
                    slidesPerView: 1,
                    spaceBetween: 20
                },
                // when window width is >= 1024px
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 30
                }
            },
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    });
</script>
@endpush