@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Rincian 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-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.Detail 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 grid-cols-1 lg:grid-cols-3 gap-5 popup-gallery">
                    @foreach (json_decode($gallery->gallery) as $key => $value)
                        <article>
                            <div class="relative overflow-hidden rounded-2.5xl bg-white dark:bg-jacarta-700">
                                <figure class="relative">
                                    <a href="{{ asset('uploads/landing-page/gallery/images/' . $value) }}"
                                        data-mfp-src="{{ asset('uploads/landing-page/gallery/images/' . $value) }}"
                                        class="group block after:absolute after:inset-0 after:block after:bg-jacarta-900/20">
                                        <img src="{{ asset('uploads/landing-page/gallery/images/' . $value) }}"
                                            alt=""
                                            class="w-full object-cover transition-transform duration-[1600ms] will-change-transform group-hover:scale-105"
                                            style="height: 500px;">
                                    </a>
                                </figure>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    {{-- <section class="relative py-16">
        <div class="container">
            <div class="flex flex-wrap py-10 popup-gallery">
                @foreach (json_decode($gallery->gallery) as $key => $value)
                    <div class="w-1/3 py-5">
                        <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700"
                            style="height: 300px">
                            <a href="{{ asset('uploads/landing-page/gallery/images/' . $value) }}"
                                data-mfp-src="{{ asset('uploads/landing-page/gallery/images/' . $value) }}">
                                <img class="rounded-t-lg px-5 py-5 w-auto h-full object-cover"
                                    src="{{ asset('uploads/landing-page/gallery/images/' . $value) }}"
                                    style="height: 300px !important;" alt="">
                            </a>
                        </div>
                    </div>
                @endforeach


            </div>
            <div class="text-center">
                <a href="{{ route('landing.gallery') }}"
                    class="rounded-full bg-accent py-3 px-8 text-center font-semibold text-white  hover:bg-accent-dark">
                    Kembali
                </a>
            </div>
        </div>
    </section> --}}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        });
    </script>
@endsection