@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;
    }
</style>
@endpush
<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 ($restaurant->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($restaurant->translations->first()->name) }}
                        </h1>

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

                    {{-- 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">
                                Operating Hours
                            </h3>
                            <div class="space-y-3">
                                @if ($restaurant->availabilities->count() == 0)
                                <p>No operating hours available</p>
                                @endif
                                @foreach ($restaurant->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->start_time }} - {{ $schedule->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 gap-4">
                                <div class="text-center">
                                    <i data-lucide="utensils-crossed" 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">wide cuisine range </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">200 guests</p>
                                </div>
                                <div class="text-center">
                                    <i data-lucide="moon" 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">Halal</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-inter text-xl text-luxury-navy">{{ __('messages.Reserve whole restaurant') }}</span>
                                </div>
                                <p class="font-inter text-xs text-luxury-charcoal">{{ __('messages.get in contact') }}</p>
                            </div>

                            <div class="space-y-4 mb-4">
                                <button
                                    wire:click="book()"
                                    type="button"
                                    class="w-full px-6 py-2 rounded-full transition-colors duration-200 whitespace-nowrap font-inter font-semibold mb-4 border border-luxury-navy text-luxury-navy hover:bg-luxury-navy hover:text-white">
                                    {{ __("messages.Book Restaurant") }}
                                </button>
                                <a href="{{ route('menu-details') }}">
                                    <Button 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">
                                        {{ __("messages.View Menu") }}
                                    </Button>
                                </a>

                                <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