@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Galerie')
@section('meta_content_description',
    'Parcourez notre galerie d’images : découvrez nos créations en acier sur mesure,
    ameublement, pergolas, escaliers et autres réalisations uniques, élégantes et robustes.')
@section('meta_robots', 'index, follow')

@section('content')
    <section x-data="galleryPage($el)" data-galleries='@json($galleries)'
        data-selected='@json($categories->pluck('id'))'>
        @include('partial.titlebanner', [
            'firstPartTitle' => 'Galerie',
        ])
        @include('partial.navigation.breadcrumb', [
            'pages' => [
                ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
                ['name' => 'Galerie', 'url' => '/galerie', 'disabled' => false],
            ],
        ])
        <div x-data="openPics(filteredGalleries())" x-init='init()'>
            <div class="bg-dark p-5 sticky top-20 z-40 flex items-center">
                <span class="text-ultraLight px-5">Filtrer par : </span>
                <!--Mobile display-->
                <div class="block md:hidden" x-data="{ open: false }" @click.outside="open = false" x-transition>
                    <button id="dropdownCheckboxButton" @click="open = !open"
                        class="inline-flex items-center justify-center text-dark rounded bg-ultraLight bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none"
                        type="button">
                        Catégories
                        <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m19 9-7 7-7-7" />
                        </svg>
                    </button>
                    <!-- Dropdown menu -->
                    <div id="dropdownFilterCheckbox" :class="open ? 'visible' : 'hidden'"
                        class="absolute left-0 mt-2 z-50 bg-neutral-primary-medium border border-ultraLight rounded bg-ultraLight shadow-lg w-52" x-cloak>
                        <ul class="p-4 text-sm text-body font-medium space-y-4" aria-labelledby="dropdownCheckboxButton">
                            <template x-for="category in {{ $categories->toJson() }}" :key="category.id">
                                <li>
                                    <div class="flex items-center">
                                        <input @click="toggleCategory(category.id); reduceArray(filteredGalleries())"
                                            :id="category.name" type="checkbox" :value="category.id"
                                            name="category_id[]"
                                            class="w-4 h-4 border border-default-strong rounded bg-neutral-secondary-strong focus:ring-1 focus:ring-secondary focus:ring-brand-soft">
                                        <label :for="category.name"
                                            class="ms-2 text-sm font-medium text-heading capitalize" x-text="category.name">
                                        </label>
                                    </div>
                                </li>
                                <button
                                    :class="selectedCategories.includes(category.id) ?
                                        'bg-secondary text-ultraLight border border-ultraLight' :
                                        'bg-ultraLight text-dark'"
                                    class="px-6 py-2 rounded transition-all duration-200 capitalize">
                                    <span x-text="category.name"></span>
                                    <i class="fa-solid fa-check" x-show="selectedCategories.includes(category.id)"></i>
                                </button>
                            </template>
                        </ul>
                    </div>
                </div>

                <!--Desktop display-->
                <div class="hidden md:block">
                    <template x-for="category in {{ $categories->toJson() }}" :key="category.id">
                        <button
                            :class="selectedCategories.includes(category.id) ?
                                'bg-secondary text-ultraLight border border-ultraLight' :
                                'bg-ultraLight text-dark'"
                            name="category_id[]" :value="category.id"
                            class="px-6 mx-1 py-2 rounded transition-all duration-200 capitalize 5xl:text-xl"
                            @click="toggleCategory(category.id); reduceArray(filteredGalleries())">
                            <span x-text="category.name"></span>
                            <i class="fa-solid fa-check" x-show="selectedCategories.includes(category.id)"></i>
                        </button>
                    </template>
                </div>
            </div>
            <div class="w-full h-full px-5 py-5" @image-gallery-next.window="next()" @image-gallery-prev.window="prev()"
                @keyup.right.window="next();" @keyup.left.window="prev();">
                <div class="mx-auto duration-1000 delay-300 opacity-0 select-none ease animate-fade-in-view"
                    style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
                    <ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        <template x-for="(gallery, index) in filteredGalleries()" :key="gallery.id" id="gallery">
                            <li class="group relative">

                                <div class="aspect-4/3 overflow-hidden rounded relative">

                                    <!-- fond -->
                                    <div class="absolute inset-0 bg-fixed bg-cover bg-center opacity-70"
                                        style="background-image:url('{{ asset('images/main_bg.webp') }}')">
                                    </div>
                                    <!-- overlay opacity -->
                                    <div class="absolute inset-0 bg-black/30"></div>

                                    <!-- image principale -->
                                    <img x-on:click="open(index)" :src="`{{ asset('storage') }}/${gallery.image_url}`"
                                        class="relative w-full h-full object-contain cursor-pointer z-10"
                                        :alt="gallery.name">

                                </div>
                                <span x-show="gallery.legend"
                                    class="absolute bottom-0 left-0 bg-secondary w-full rounded font-bold tracking-widest text-ultraLight text-center opacity-0
                                            transition-all duration-500 group-hover:opacity-100 z-100"
                                    x-text="gallery.legend"></span>

                            </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-pointer"
                        x-cloak>
                        <div class="relative flex flex-col items-center justify-center w-11/12 xl:w-4/5 h-11/12">
                            <div @click="$event.stopPropagation(); $dispatch('image-gallery-prev')"
                                class="z-100 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 w-full h-full select-none cursor-pointer"
                                :src="imageGalleryOpened ? `{{ asset('storage') }}/${activeImage}` : ''"
                                :alt="gallery.name" style="display: none;">
                            <span class="text-white 4xl:text-xl 5xl:text-3xl" x-text="getImageProgress()"></span>
                            <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>
        <div class="py-10">
            @include('partial.emptyElements', ['collection' => $galleries])
        </div>
    </section>
@endsection