@extends('layout.master')
@section('content')
<section>
    <div class='p-5'>
        <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Gallery</h2>
            <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
                {{ config('app.name') }} Gallery. </p>
        </div>
        @if (count($galleries) > 0)
            <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">

                @foreach ($galleries as $key => $gallery)
                    <div class='overflow-hidden group relative {{ $key % 2 !== 0 ? 'row-span-2' : 'h-96' }}'>
                        <a data-fancybox="gallery" data-caption="{{$gallery->title}}" data-src={{ $gallery->getFirstMediaUrl('gallery') }}>
                            <img  class=" cursor-pointer h-full w-full object-cover brightness- object-center rounded-lg hover:scale-110 transition-all duration-500 ease-linear"
                                src={{ $gallery->getFirstMediaUrl('gallery') }} alt="" />
                        </a>
                        <div
                            class="absolute pointer-events-none overlay opacity-0 invisible   group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-linear flex items-center justify-center top-0 left-0 w-full h-full">
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

@endsection

@section('css')
  <style>
.overlay{
  background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(3,0,0,1) 99%);
}
  </style>
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>

@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
    Fancybox.bind("[data-fancybox]", {});
  </script>
@endsection