@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: 450px;
        display: flex;
        align-items: center;
    ">

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

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

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

    </div>

</section>

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

    <div class="container">

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

            <h2 class="fw-bold">
                Warisan Budaya Mandailing Natal
            </h2>

            <hr class="mx-auto"
                style="width:100px;
                border:3px solid #d4af37;
                opacity:1;">

        </div>

        <div class="row">

            @forelse($budayas as $budaya)

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

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

                    @if($budaya->gambar)

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

                    @else

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

                    @endif

                    <div class="card-body">

                        <span class="badge bg-warning text-dark mb-2">

                            {{ $budaya->jenis_budaya }}

                        </span>

                        <h4 class="fw-bold">

                            {{ $budaya->nama_budaya }}

                        </h4>

                        <p class="text-muted">

                            <i class="bi bi-geo-alt-fill text-danger"></i>

                            {{ $budaya->asal_daerah }}

                        </p>

                        <p>

                            {{ \Illuminate\Support\Str::limit($budaya->deskripsi,120) }}

                        </p>

                    </div>

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

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

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

                            Lihat Selengkapnya

                        </a>

                    </div>

                </div>

            </div>

            @empty

            <div class="col-12">

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

                    <i class="bi bi-exclamation-circle"></i>

                    Data budaya belum tersedia.

                </div>

            </div>

            @endforelse

        </div>

    </div>

</section>

@endsection