@extends('frontend.layouts.app')
@section('title', $gallery->name_en)
@section('meta', content: 'Gallery Page Description')
@section('content')

    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">Gallery </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">Home</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="{{ route('gallery') }}" class="text-white font-bold ">Gallery </a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="{{ route('galleryDetail', $gallery->slug) }}"
                            class="text-white font-bold">{{ app()->getLocale() == 'np' ? $gallery->name_np : $gallery->name_en }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- banner-section -->

    <!-- content -->


    <!-- new start -->
    <!-- For image part -->
    @isset($gallery)
        <section class="min-h-[60vh] flex flex-col">
            <div x-data="{
                imageGalleryOpened: false,
                imageGalleryActiveUrl: null,
                imageGalleryImageIndex: null,
                imageGallery: [{
                        @if ($gallery->cover_image) 'photo': '{{ asset('/' . $gallery->cover_image) }}',
                            'alt': '{{ $gallery->name_en }} - Cover Image' @endif
                    },

                    @if ($gallery->type === \App\Enum\GalleryTypeEnum::IMAGE) @php
                                    $images = json_decode($gallery->value, true);
                                @endphp

                                        @foreach ($images as $index => $image)
                                            {
                                                'photo': '{{ asset('/' . $image) }}',
                                                'alt': '{{ $gallery->title_en }} - Image {{ $index + 1 }}'
                                            }
                                            @if (!$loop->last), @endif
                    @endforeach
                    @endif
                ],
                imageGalleryOpen(event) {
                    this.imageGalleryImageIndex = event.target.dataset.index;
                    this.imageGalleryActiveUrl = event.target.src;
                    this.imageGalleryOpened = true;
                },
                imageGalleryClose() {
                    this.imageGalleryOpened = false;
                    setTimeout(() => this.imageGalleryActiveUrl = null, 300);
                },
                imageGalleryNext() {
                    this.imageGalleryImageIndex = (this.imageGalleryImageIndex == this.imageGallery.length) ? 1 : (parseInt(this.imageGalleryImageIndex) + 1);
                    this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
                },
                imageGalleryPrev() {
                    this.imageGalleryImageIndex = (this.imageGalleryImageIndex == 1) ? this.imageGallery.length : (parseInt(this.imageGalleryImageIndex) - 1);
                    this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
                }
            }" @image-gallery-next.window="imageGalleryNext()"
                @image-gallery-prev.window="imageGalleryPrev()" @keyup.right.window="imageGalleryNext();"
                @keyup.left.window="imageGalleryPrev();" class="w-full h-full select-none mt-5 mb-5">


                <div class="max-w-6xl my-20 mx-auto duration-1000 delay-300 opacity-0 select-none ease animate-fade-in-view"
                    style="
                translate: none;
                rotate: none;
                opacity: 1;
                transform: translate(0px, 0px);">

                    <!-- Heading for the image -->
                    <div class="mx-12">
                        <h2 class="text-2xl font-bold mb-2  text-primary">
                            {{ app()->getLocale() == 'np' ? $gallery->name_np : $gallery->name_en }}</h2>
                        <p class="text-gray-600 mb-4">
                            {!! app()->getLocale() == 'np' ? $gallery->description_np : $gallery->description_en !!}</p>
                    </div>


                    <div class="mx-10 p-4 flex">
                        <ul x-ref="gallery" id="gallery"
                            class="grid grid-cols-1 md:grid-cols-2 gap-5 lg:grid-cols-3 xl:grid-cols-4">
                            <template x-for="(image, index) in imageGallery">
                                <li>
                                    <img x-on:click="imageGalleryOpen" :src="image.photo" :alt="image.alt"
                                        :data-index="index + 1"
                                        class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[4/3] lg:aspect-[4/3] xl:aspect-[4/3]" />
                                </li>
                            </template>
                        </ul>
                    </div>

                    <template x-teleport="body">
                        <div x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300"
                            x-transition:enter-start="opacity-0" x-transition:leave="transition ease-in-in duration-300"
                            x-transition:leave-end="opacity-0" @click="imageGalleryClose"
                            @keydown.window.escape="imageGalleryClose" x-trap.inert.noscroll="imageGalleryOpened"
                            class="fixed inset-0 z-[99] flex items-center justify-center bg-black bg-opacity-50 select-none cursor-zoom-out"
                            x-cloak>
                            <div class="relative flex items-center justify-center w-11/12 xl:w-4/5 h-11/12">
                                <div @click="$event.stopPropagation(); $dispatch('image-gallery-prev')"
                                    class="absolute left-0 flex items-center justify-center text-white translate-x-10 rounded-full cursor-pointer xl:-translate-x-24 2xl:-translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20">
                                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                                    </svg>
                                </div>
                                <img x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300"
                                    x-transition:enter-start="opacity-0 transform scale-50"
                                    x-transition:leave="transition ease-in-in duration-300"
                                    x-transition:leave-end="opacity-0 transform scale-50"
                                    class="object-contain object-center max-w-[90%] max-h-[80vh] select-none cursor-zoom-out"
                                    :src="imageGalleryActiveUrl" alt="" style="display: none" />
                                <div @click="$event.stopPropagation(); $dispatch('image-gallery-next');"
                                    class="absolute right-0 flex items-center justify-center text-white -translate-x-10 rounded-full cursor-pointer xl:translate-x-24 2xl:translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20">
                                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </section>
    @endisset
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush