@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Galeri') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-fill object-cover" />
        </picture>
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Galeri') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>
    <section class="relative py-16 pb-8">
        <div class="container flex flex-col gap-5 lg:flex-row">
            <div class="w-full">
                <div class="grid md:grid-cols-2 lg:grid-cols-3 grid-rows-2 gap-5">
                    @forelse ($gallery as $key => $value)
                        <article>
                            <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                                <figure class="relative">
                                    <a href="{{ route('landing.gallery.detail', ['slug' => $value->slug]) }}"
                                        class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                        <img src="{{ asset('uploads/landing-page/gallery/images/' . $value->image) }}"
                                            alt=""
                                            class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                            style="height: 500px;">
                                    </a>
                                </figure>
                                <div class="pointer-events-none absolute bottom-0 w-full p-5 bg-accent"
                                    style="height: 140px;">
                                    <p class="font-bold pb-4 text-white" style="font-size: 12px;">
                                        {{ date('j F Y', strtotime($value->created_at)) }}
                                    </p>
                                    <h2 class="font-display text-base leading-none text-white xl:text-lg">
                                        {{ $value->title }}
                                    </h2>

                                </div>
                            </div>
                        </article>
                    @empty
                        <p>{{ __('message.Tidak ada data') }}</p>
                    @endforelse
                </div>
            </div>
            {{-- <div class="w-full lg:w-1/3">
                <article>
                    <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                        <figure class="relative">
                            <a href="item.html"
                                class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                <img src="./img/products/item_20_square.jpg" alt="item 20"
                                    class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                    height="959" width="959">
                            </a>
                        </figure>
                        <div class="pointer-events-none absolute bottom-0 w-full p-5">
                            <h2 class="font-display text-2xl leading-none text-white">TSARÉVNA</h2>
                            <span class="text-2xs text-white">CryptoGuysNFT</span>
                        </div>
                    </div>
                </article>
            </div> --}}
            {{-- <div class="w-full lg:w-1/2">
                <div class="grid grid-cols-2 grid-rows-2 gap-5">
                    <article>
                        <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                            <figure class="relative">
                                <a href="item.html"
                                    class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                    <img src="./img/products/item_30_square.jpg" alt="item 1"
                                        class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                        height="293" width="293">
                                </a>
                            </figure>
                            <div class="pointer-events-none absolute bottom-0 w-full p-5">
                                <h2 class="font-display text-base leading-none text-white xl:text-lg">Metasmorf</h2>
                                <span class="text-2xs text-white">by Lazy Panda</span>
                            </div>
                        </div>
                    </article>
                    <article>
                        <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                            <figure class="relative">
                                <a href="item.html"
                                    class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                    <img src="./img/products/item_10_square.jpg" alt="item 1"
                                        class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                        height="293" width="293">
                                </a>
                            </figure>
                            <div class="pointer-events-none absolute bottom-0 w-full p-5">
                                <h2 class="font-display text-base leading-none text-white xl:text-lg">VR Space_286</h2>
                                <span class="text-2xs text-white">by Origin Morish</span>
                            </div>
                        </div>
                    </article>
                    <article>
                        <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                            <figure class="relative">
                                <a href="item.html"
                                    class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                    <img src="./img/products/item_31_square.jpg" alt="item 1"
                                        class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                        height="293" width="293">
                                </a>
                            </figure>
                            <div class="pointer-events-none absolute bottom-0 w-full p-5">
                                <h2 class="font-display text-base leading-none text-white xl:text-lg">PankySkal</h2>
                                <span class="text-2xs text-white">by NFT stars</span>
                            </div>
                        </div>
                    </article>
                    <article>
                        <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                            <figure class="relative">
                                <a href="item.html"
                                    class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                    <img src="./img/products/item_32_square.jpg" alt="item 1"
                                        class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                        height="293" width="293">
                                </a>
                            </figure>
                            <div class="pointer-events-none absolute bottom-0 w-full p-5">
                                <h2 class="font-display text-base leading-none text-white xl:text-lg">VR Space_287</h2>
                                <span class="text-2xs text-white">by Origin Morish</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div> --}}
        </div>
    </section>
    {{-- <section class="relative py-16">
        <div class="container">
            <div class="flex flex-wrap py-10 popup-gallery">
                @forelse ($gallery as $key => $value)
                    <div class="w-1/3 py-5">
                        <div class="dark:bg-accent shadow-2xl mx-4 rounded-xl max-w-sm dark:text-white dark:border-gray-700"
                            style="height: 300px">
                            <a href="{{ route('landing.gallery.detail', ['slug' => $value->slug]) }}">
                                <img class="rounded-t-lg w-full h-full object-cover px-5 py-5"
                                    src="{{ asset('uploads/landing-page/gallery/images/' . $value->image) }}"
                                    alt="">
                            </a>
                            <div class="px-5 pb-2">
                                <a href="{{ route('landing.gallery.detail', ['slug' => $value->slug]) }}">
                                    <h5
                                        class="text-jacarta-700 dark:text-white text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base hover:text-accent">
                                        {{ $value->title }}</h5>
                                </a>
                            </div>

                        </div>
                    </div>

                @empty
                    <p>No Data</p>
                @endforelse
            </div>
        </div>
    </section> --}}
@endsection