@php
    $activeRooftop = $rooftop->where('active', true);
    $firstRooftop = $activeRooftop->first();
@endphp

@if ($firstRooftop)
<section
    class="pb-12 overflow-x-hidden"
    x-data="{ activeImage: '{{ Storage::url($firstRooftop->image) }}' }"
>

    {{-- 🔒 IMAGEN PRINCIPAL (CONTAINER) --}}
    <div class="container px-4 md:px-[12%] mx-auto mb-10">
        <div class="text-center mb-16">
            <h2 class="text-6xl md:text-6xl text-principal font-font3 py-4 tracking-[9px]">
                - Rooftop -
            </h2>
        </div>
        <div class="relative aspect-[16/9] overflow-hidden rounded-sm shadow-xl bg-gray-100 cursor-zoom-in">
            <img
                :src="activeImage"
                class=" w-full h-full object-cover transition-opacity duration-300"
                alt="{{ $firstRooftop->alt ?? 'Rooftop Gallery' }}"
            />
        </div>
    </div>

    {{--  THUMBNAILS FULL WIDTH --}}
    <div class="room-gallery-wrapper w-screen relative left-1/2 -translate-x-1/2 overflow-hidden">
        <div class="glide room-gallery-thumbs max-w-full">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    @foreach ($activeRooftop as $item)
                        @php $url = Storage::url($item->image); @endphp
                        <li class="glide__slide">
                            <button
                                @click="activeImage = '{{ $url }}'"
                                :class="{
                                    'ring-2 ring-[#009ba2] opacity-100': activeImage === '{{ $url }}',
                                    'opacity-60': activeImage !== '{{ $url }}'
                                }"
                                class="w-full aspect-[4/2] overflow-hidden rounded-sm transition-all duration-300 hover:opacity-100"
                            >
                                <img
                                    src="{{ $url }}"
                                    class="w-full h-full object-cover"
                                    alt="{{ $item->alt ?? 'Rooftop Image' }}"
                                />
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

</section>
@endif
@push('scripts')
<script>
    window.addEventListener('load', () => {
        new Glide('.room-gallery-thumbs', {
            type: 'slider',
            perView: 4,
            gap: 1,
            breakpoints: {
                1024: {
                    perView: 4,
                },
                768: {
                    perView: 3,
                    gap: 1,
                },
                480: {
                    perView: 2,
                    gap: 1,
                },
            }
        }).mount();
    });
</script>
@endpush