@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@push('scripts')
@endpush
@section('title', $actuality->title . ' — Actualités')
@section('meta_content_description', 'Découvrez le projet ' . $actuality->title . ' : création en acier sur mesure par Atelier Steel Art.')
@section('meta_robots', 'index, follow')
@section('og_image', asset('storage/' . $actuality->images_url[0]))
@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => $actuality->title,
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            ['name' => 'Actualités', 'url' => '/actualites', 'disabled' => false],
            ['name' => $actuality->title, 'url' => route('actualities.detail', $actuality->id), 'disabled' => false],
        ],
    ])
    <section>
        <article class="flex flex-col-reverse md:flex-row 4xl:h-[48vh] 5xl:h-[60vh]" x-data='openPics(@json($actuality->images_url))'
            @image-gallery-next.window="next()" @image-gallery-prev.window="prev()" @keyup.right.window="next();"
            @keyup.left.window="prev();">
            <div id="gallery" class="w-full md:w-1/2 flex items-start justify-start 4xl:items-center">
                <div id="custom-controls-gallery" class="relative w-full">
                    <!-- Carousel wrapper -->
                    <div class="grid grid-cols-1 grid-rows-1 place-items-center w-full">
                        @foreach ($actuality->images_url as $img)
                            <div x-show="currentIndex == {{ $loop->index }}"
                                 x-transition:enter="transition ease-in-out duration-300"
                                 x-transition:enter-start="opacity-0"
                                 x-transition:enter-end="opacity-100"
                                 x-transition:leave="transition ease-in-out duration-300"
                                 x-transition:leave-start="opacity-100"
                                 x-transition:leave-end="opacity-0"
                                 class="col-start-1 row-start-1 w-full flex justify-center items-center"
                                 x-cloak>
                                <img x-on:click="open({{ $loop->index }})"
                                    class="object-contain max-w-full max-h-96 4xl:max-h-[40vh] 5xl:max-h-[50vh] h-auto rounded-xl shadow-2xl cursor-pointer"
                                    src="{{ asset('storage/' . $img) }}" loading="lazy"
                                    alt="{{ $actuality->title }} — {{ $actuality->category->name }}">
                            </div>
                        @endforeach
                    </div>
                    <!-- Controls -->
                    <div class="flex justify-center items-center pt-4">
                        <button type="button" @click="prev()"
                            class="flex justify-center items-center me-4 h-full cursor-pointer group focus:outline-none">
                            <span class="text-body hover:text-heading group-focus:text-heading">
                                <svg class="rtl:rotate-180 w-6 h-6 4xl:w-10 4xl:h-10 5xl:w-15 5xl:h-15" 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="M5 12h14M5 12l4-4m-4 4 4 4" />
                                </svg>
                                <span class="sr-only">Previous</span>
                            </span>
                        </button>
                        <button type="button" @click="next()"
                            class="flex justify-center items-center h-full cursor-pointer group focus:outline-none">
                            <span class="text-body hover:text-heading group-focus:text-heading">
                                <svg class="rtl:rotate-180 w-6 h-6 4xl:w-10 4xl:h-10 5xl:w-15 5xl:h-15" 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 12H5m14 0-4 4m4-4-4-4" />
                                </svg>
                                <span class="sr-only">Next</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2">
                <div class="w-full h-full flex flex-col">
                    <div class="w-full flex justify-center md:justify-start">
                        @include('partial.pageSubTitle', [
                            'smallTextPart' => 'le projet',
                            'titleFirstPart' => $actuality->title,
                            'titleSecondPart' => '',
                            'textFirstPart' => 'Alexis',
                            'textSecondPart' => 'LUCIANI',
                        ])
                    </div>
                    <p class="w-full text-center md:text-start 4xl:text-2xl 5xl:text-4xl">
                        {{ $actuality->description }}
                    </p>
                    <div class="py-5 text-center md:text-start 4xl:text-xl 5xl:text-4xl">
                        <small class="text-secondary">date de publication :
                            {{ $actuality->created_at->format('d/m/Y') }}</small>
                    </div>
                </div>
            </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 4xl:w-10 4xl:h-10 5xl:w-15 5xl:h-15" 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="Image modal"
                            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 4xl:w-10 4xl:h-10 5xl:w-15 5xl:h-15" 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>
        </article>
    </section>
@endsection