@extends('layouts.app')

@section('content')

<!-- Hero -->
<section
    class="hero"
    style="
        background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url('{{ asset('images/gambar1.jpg') }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 420px;
        display: flex;
        align-items: center;
    ">

    <div class="container text-center text-white">

        <h1 class="display-4 fw-bold" data-aos="fade-down">
            Galeri Budaya
        </h1>

        <p class="lead mt-3" data-aos="fade-up">
            Dokumentasi foto budaya Kabupaten Mandailing Natal.
        </p>

    </div>

</section>

<!-- Galeri -->
<section class="py-5 bg-light">

    <div class="container">

        <div class="text-center mb-5">

            <h2 class="fw-bold">
                

        </div>

        <div class="row">

            @forelse($galeris as $galeri)

                <div class="col-lg-4 col-md-6 mb-4">

                    <div class="card border-0 shadow-lg h-100">

                        @if($galeri->gambar)

                            <img src="{{ asset('storage/'.$galeri->gambar) }}"
                                class="card-img-top"
                                style="height:260px; object-fit:cover;">

                        @else

                            <img src="{{ asset('images/no-image.png') }}"
                                class="card-img-top"
                                style="height:260px; object-fit:cover;">

                        @endif

                        <div class="card-body text-center">

                            <h5 class="fw-bold">

                                {{ $galeri->judul }}

                            </h5>

                        </div>

                        <div class="card-footer bg-white border-0">

                            <a href="{{ route('frontend.detail-galeri',$galeri->id) }}"
                               class="btn btn-dark w-100">

                                <i class="bi bi-image-fill"></i>

                                Lihat Foto

                            </a>

                        </div>

                    </div>

                </div>

            @empty

                <div class="col-12">

                    <div class="alert alert-warning text-center">

                        <i class="bi bi-images"></i>

                        Galeri belum tersedia.

                    </div>

                </div>

            @endforelse

        </div>

    </div>

</section>

@endsection