@extends('layouts.main')
@section('title', 'Gallery NalarKita')
@section('pageContent')
    <!-- Content -->
    <main>
        <section class="container mx-auto px-8 my-10 space-y-8">

            <!-- Title -->
            <div class="block md:mx-12">
                <div class="flex flex-col text-center gap-2">
                    <header>
                        <h1 class="text-2xl sm:text-3xl md:text-5xl text-primary-30 font-bold">{{ __('gallery') }}</h1>
                    </header>
                    <p class="text-sm sm:text-lg md:text-xl font-normal text-neutral-30">{{ __('gallery_caption') }}</p>
                </div>
            </div>
            <!-- End Title -->

            <!-- Content -->
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 md:gap-4 xl:gap-6 lg:mt-16">
                @foreach ($galleries as $gallery)
                    @php
                        $images = is_array(json_decode($gallery->image)) ? json_decode($gallery->image) : [$gallery->image];
                    @endphp
                    <div class="relative group hover:cursor-pointer" data-gallery-id="{{ $gallery->id }}">
                        <figure>
                            <!-- Swiper inside Card -->
                            <div class="swiper gallery-swiper -z-10 rounded-3xl">
                                <div class="swiper-wrapper">
                                    @foreach($images as $image)
                                        <div class="swiper-slide">
                                            <img class="h-auto max-w-full rounded-3xl" src="{{ asset('storage/' . $image) }}"
                                                 alt="{{ $gallery->gallery_name }}">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-t from-neutral-40 to-transparent rounded-3xl group-hover:opacity-0 transition-opacity duration-300"></div>
                            <div class="absolute bottom-6 left-6 text-white">
                                <time class="text-neutral-20 text-sm md:text-base">{{ \Carbon\Carbon::parse($gallery->date)->format('d M Y') }}</time>
                                <figcaption class="text-neutral-20 text-lg md:text-3xl font-semibold">{{ $gallery->gallery_name }}</figcaption>
                            </div>
                        </figure>
                    </div>
                @endforeach
            </div>
            <!-- End Content -->

            <!-- Pagination -->
            <div class="flex justify-end mt-8">
                <nav class="inline-flex space-x-2" aria-label="Pagination Navigation">
                    {{-- Previous Page Link --}}
                    @if ($galleries->onFirstPage())
                        <span class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg cursor-not-allowed opacity-50">
                <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                </svg>
                Sebelumnya
            </span>
                    @else
                        <a href="{{ $galleries->previousPageUrl() }}" class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg hover:bg-primary-10 transition hover:text-gray-700">
                            <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                            </svg>
                            Sebelumnya
                        </a>
                    @endif

                    {{-- Next Page Link --}}
                    @if ($galleries->hasMorePages())
                        <a href="{{ $galleries->nextPageUrl() }}" class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg hover:bg-primary-10 transition hover:text-gray-700">
                            Selanjutnya
                            <svg class="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                            </svg>
                        </a>
                    @else
                        <span class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg cursor-not-allowed opacity-50">
                Selanjutnya
                <svg class="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                </svg>
            </span>
                    @endif
                </nav>
            </div>


        </section>
    </main>
    <!-- End Content -->

    <!-- Modal Slider -->
    <div id="gallery-modal" class="fixed inset-0 hidden z-50 bg-black bg-opacity-50">
        <div class="flex justify-center items-center h-full">
            <div class="relative w-full h-full flex items-center justify-center">
                <div class="swiper gallery-slider w-full max-w-6xl h-[90vh] bg-white rounded-2xl overflow-hidden relative">
                    <div class="swiper-wrapper" id="gallery-images">
                        <!-- Gambar-gambar slider akan dimasukkan di sini via jQuery -->
                    </div>
                    <!-- Navigation -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
                <!-- Close Button -->
                <button id="close-modal" class="absolute top-4 right-4 z-50 text-white text-4xl hover:text-red-500 transition">&times;</button>
            </div>
        </div>
    </div>

    @php
        $imageMap = [];
        foreach ($galleries as $gallery) {
            $imgs = is_array(json_decode($gallery->image)) ? json_decode($gallery->image) : [$gallery->image];
            $imageMap[$gallery->id] = $imgs;
        }
    @endphp

@endsection

@section('scripts')
    <script>
        const imageMap = @json($imageMap);
        $(document).ready(function() {
            let swiper; // define globally to destroy if needed

            $('[data-gallery-id]').click(function() {
                const galleryId = $(this).data('gallery-id');
                const images = imageMap[galleryId];

                if (!images) return;

                const galleryImages = images.map(function(image) {
                    return `<div class="swiper-slide">
                            <img src="/storage/${image}" alt="Gallery Image" class="w-full rounded-lg">
                        </div>`;
                }).join('');

                $('#gallery-images').html(galleryImages);

                $('#gallery-modal').removeClass('hidden');

                // Hancurkan swiper sebelumnya jika ada
                if (swiper) swiper.destroy(true, true);

                // Inisialisasi ulang swiper
                swiper = new Swiper('.gallery-slider', {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                });
            });

            $('#close-modal').click(function() {
                $('#gallery-modal').addClass('hidden');
            });
        });
    </script>

@endsection