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

    .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;
    }
@endpush
</style>
<div class="!bg-luxury-cream pt-7">
    <div class="h-8 w-full !bg-luxury-cream"></div>
    <div class="swiper mySwiper h-[80vh] p-2">
        <div class="swiper-wrapper h-full">
            @foreach ($gym->media->all() as $index => $media)
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ asset(Storage::url($media->path)) }}" alt={{ __("slide ". $index) }} class="w-full h-full object-cover rounded-md">
                </div>
            </div>
            @endforeach
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination !relative !top-3/10"></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="h-12 w-full !bg-luxury-cream"></div>

    <section class="py-6 bg-white">
        <div class="container mx-auto px-1">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {{-- Main content --}}
                <div class="lg:col-span-2">
                    <div class="mb-8">

                        <h1 class="font-playfair text-4xl md:text-5xl lg:!text-7xl font-bold text-luxury-navy mb-4">
                            {{ ucfirst($gym->translations->first()->name) }}
                        </h1>

                        @if ($gym->translations->first()->description)
                        <p class="font-inter text-lg text-luxury-charcoal leading-relaxed mb-6">
                            {{ $gym->translations->first()->description }}
                        </p>
                        @endif
                    </div>

                    {{-- Men's Operating Hours --}}
                    <div class="rounded-xl w-full border bg-card text-card-foreground shadow mb-6">
                        <div class="p-4 pt-0">
                            <h3 class="font-playfair text-2xl font-semibold !text-luxury-navy mb-4 pt-4">
                                Men's Operating Hours
                            </h3>
                            <div class="space-y-3">
                                @if ($gym->availabilities->count() == 0)
                                <p>No operating hours available</p>
                                @endif
                                @foreach ($gym->availabilities->all() as $index => $schedule)
                                <div key={{ $index }} class="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
                                    <span class="font-inter font-medium text-luxury-navy">{{ $weekdays->firstWhere('id', $schedule->weekday_id)?->name ?? 'Unknown' }}</span>
                                    <span class="font-inter text-luxury-charcoal">{{ $schedule->men_start_time }} - {{ $schedule->men_end_time }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Women's Operating Hours --}}
                    <div class="rounded-xl w-full border bg-card text-card-foreground shadow mb-6">
                        <div class="p-4 pt-0">
                            <h3 class="font-playfair text-2xl font-semibold !text-luxury-navy mb-4 pt-4">
                                Women's Operating Hours
                            </h3>
                            <div class="space-y-3">
                                @if ($gym->availabilities->count() == 0)
                                <p>No operating hours available</p>
                                @endif
                                @foreach ($gym->availabilities->all() as $index => $schedule)
                                <div key={{ $index }} class="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
                                    <span class="font-inter font-medium text-luxury-navy">{{ $weekdays->firstWhere('id', $schedule->weekday_id)?->name ?? 'Unknown' }}</span>
                                    <span class="font-inter text-luxury-charcoal">{{ $schedule->women_start_time }} - {{ $schedule->women_end_time }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Specifications --}}
                    {{--
                    --}}
                    <div class="rounded-xl w-full border bg-card text-card-foreground shadow mb-6">
                        <div class="p-4 pt-0">
                            <h3 class="font-playfair text-2xl font-semibold !text-luxury-navy mb-4 pt-4">
                                Specifications
                            </h3>
                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                <div class="text-center">
                                    <i data-lucide="heart-plus" class="text-luxury-gold mx-auto mb-2" style="height: 2.5rem; width: 2.5rem;"></i>
                                    <p class="font-inter text-sm text-luxury-charcoal">Coach included</p>
                                </div>
                                <div class="text-center">
                                    <i data-lucide="dumbbell" class="text-luxury-gold mx-auto mb-2" style="height: 2.5rem; width: 2.5rem;"></i>
                                    <p class="font-inter text-sm text-luxury-charcoal">150+ Machines </p>
                                </div>
                                <div class="text-center">
                                    <i data-lucide="users" class="text-luxury-gold mx-auto mb-2" style="height: 2.5rem; width: 2.5rem;"></i>
                                    <p class="font-inter text-sm text-luxury-charcoal">80 guests</p>
                                </div>
                                <div class="text-center">
                                    <i data-lucide="maximize" class="text-luxury-gold mx-auto mb-2" style="height: 2.5rem; width: 2.5rem;"></i>
                                    <p class="font-inter text-sm text-luxury-charcoal">80m²</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Booking Sidebar --}}
                <div class="lg:col-span-1 w-full">
                    <div class="rounded-xl w-full border bg-card text-card-foreground shadow sticky top-24">
                        <div class="p-4">
                            <div class="text-center mb-3">
                                <div class="flex items-baseline justify-center space-x-2 mb-2">
                                    <span class="font-playfair text-3xl font-bold text-luxury-navy">${{ $isPoolIncluded ? $hotelSetting->gym_and_pool_bundle_price : $hotelSetting->gym_bundle_price }}</span>
                                    <span class="font-inter text-sm text-luxury-charcoal">for entry</span>
                                </div>
                                <p class="font-inter text-xs text-luxury-charcoal">Taxes and fees included</p>
                            </div>

                            <div class="space-y-4 mb-4">
                                <div>
                                    <label class="font-inter text-sm font-medium text-luxury-navy block mb-2">
                                        Check-in Date
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="calendar" class="absolute start-3 top-1/4 text-luxury-charcoal" style="height: 1rem; width: 1rem"></i>
                                        <input
                                            type="date"
                                            class="w-full pl-10 pe-4 py-3 border border-gray-300 rounded-lg font-inter text-sm focus:ring-2 focus:ring-luxury-action focus:border-luxury-action" />
                                    </div>
                                </div>
                                <div class="flex items-center justify-content-end gap-3">
                                    <label for="addPool" class="font-inter text-sm font-medium text-luxury-navy" style="margin-bottom: 0;">
                                        Add Swimming Pool
                                    </label>
                                    <input
                                        wire:model.live="isPoolIncluded"
                                        id="addPool"
                                        type="checkbox"
                                        class="h-5 w-5 accent-luxury-action text-luxury-action transition duration-200 rounded focus:ring-2 focus:ring-luxury-action border-gray-300" />
                                </div>

                                <Button wire:click="book()" class="w-full bg-luxury-action text-luxury-action-secondary  px-6 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mb-4">
                                    Reserve Now
                                </Button>

                                <div class="mt-2 pt-4 border-t border-gray-200">
                                    <p class="font-inter text-xs text-luxury-charcoal text-center">
                                        maybe a cancellation message?
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
    </section>
</div>





@push('js')
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('livewire:initialized', function() {
        // Wait for Livewire to finish rendering
        setTimeout(() => {
            const swiper = new Swiper('.mySwiper', {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    1024: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    }
                }
            });
        }, 100);
        lucide.createIcons();
    });
</script>
@endpush