@extends('layouts.app')

@section('content')
    <div class="bradcam_area bradcam_bg_1">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="bradcam_text text-center">
                        <h3>Galery</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Start Align Area -->
    <div class="whole-wrap">
        <div class="container box_1170">
            <div class="section-top-border">
                <h3>Image Gallery</h3>
                <div class="row gallery-item">
                    @foreach ($Galeri as $item)
                        <div class="col-md-4 mb-4">
                            <a href="{{ asset('storage/' . $item->image) }}" class="img-pop-up" title="{{ $item->name }}">

                                <div class="single-gallery-image"
                                    style="background-image: url('{{ asset('storage/' . $item->image) }}');">
                                </div>
                            </a>
                        </div>
                    @endforeach

                    @if ($Galeri->isEmpty())
                        <div class="col-12">
                            <p class="text-center">No gallery images available.</p>
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
    <!-- End Align Area -->
@endsection