@extends('frontend.layouts.app')
@section('content')
<main class="main">

    <div class="site-breadcrumb" style="background-image: url('{{ asset('frontend/assets/img/breadcrumb/01.jpg') }}');">
        <div class="container">
            <h2 class="breadcrumb-title">Gallery</h2>
            <ul class="breadcrumb-menu">
                <li><a href="{{ url('/') }}">Home</a></li>
                <li class="active">Gallery</li>
            </ul>
        </div>
    </div>

    @php
        $gallerys = App\Models\Gallery::latest()->paginate(10);
    @endphp

    <section class="gallery-area py-70">
        <div class="container">
            <div class="grid-wrapper">
                @php
                    $classes = ['tall','big','tall'];
                    $index = 0;
                @endphp

                @foreach ($gallerys as $gallery)
                    @php
                        $class = $classes[$index % count($classes)];
                        $index++;
                    @endphp
                    <div class="col {{ $class }}">
                        <a href="{{ asset('storage/' . $gallery->image) }}" data-fancybox="gallery" data-caption="{{ $gallery->title ?? 'Gallery Image' }}">
                            <img src="{{ asset('storage/' . $gallery->image) }}" alt="{{ $gallery->title ?? 'Gallery Image' }}" />
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

</main>

<script>
    Fancybox.bind('[data-fancybox="gallery"]', {});
</script>
@endsection