@extends('layouts.main-app')

@section('title','Home')

@section('content')

@include('layouts.navbar')
<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/about_us/banner-aboutus.webp')}}" alt="">
    <div class="relative pb-32 pt-52 ">
        <h1 class="text-[#dab97d] text-6xl text-center">Gallery</h1>
    </div>
</div>

<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/gallery/bg.webp')}}" alt="">
    <div class="container relative max-w-screen-xl px-4 py-20 mx-auto space-y-8">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($gallery as $index => $galleries)
            <div data-aos="zoom-in"
                data-aos-duration="1500">
                <img class="w-full h-full cursor-pointer"
                    src="{{ asset($galleries->image) }}"
                    alt="Gallery Image"
                    onclick="openModal({{ $loop->index }})">
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Modal -->
<div id="imageModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80">
    <button onclick="closeModal()" class="absolute z-40 text-4xl text-white top-8 right-8">&times;</button>
    <div class="relative w-full ">

        <div class="swiper">
            <div class="swiper-wrapper">
                @foreach ($gallery as $galleries)
                <div class="swiper-slide">
                    <img class="w-full h-auto" src="{{ asset($galleries->image) }}" alt="Gallery Image">
                </div>
                @endforeach
            </div>
            <!-- Navigation buttons -->
            <div class="p-8 text-white bg-gray-500 bg-opacity-50 rounded-full swiper-button-next"></div>
            <div class="p-8 text-white bg-gray-500 bg-opacity-50 rounded-full swiper-button-prev"></div>
        </div>
    </div>
</div>
<script>
    let swiper;

    function openModal(startIndex) {
        const modal = document.getElementById('imageModal');
        modal.classList.remove('hidden');

        swiper = new Swiper('.swiper', {
            initialSlide: startIndex,
            centeredSlides: true,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                1024: {
                    slidesPerView: 2.5,
                    spaceBetween: 30
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 10
                },
                320: {
                    slidesPerView: 1,
                    spaceBetween: 0
                }
            },
            loop: true,
            spaceBetween: 10,
        });
    }

    function closeModal() {
        const modal = document.getElementById('imageModal');
        modal.classList.add('hidden');
        if (swiper) {
            swiper.destroy();
        }
    }
</script>


@include('layouts.footer')

@endsection