@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">
            Moment Budaya Mandailing Natal
        </h1>

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

    </div>

</section>




<!-- Daftar Moment -->

<section class="py-5">


<div class="container">


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

    <h2 class="fw-bold">
        Dokumentasi Moment Budaya
    </h2>

    <p class="text-muted">
        Kumpulan kegiatan dan peristiwa budaya Mandailing Natal
    </p>

</div>




<div class="row g-4">



@forelse($moments as $item)


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


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



{{-- Foto --}}
@if($item->gambar)

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


@else


<div class="d-flex align-items-center justify-content-center bg-light"
style="
height:230px;
">

</div>


@endif






<div class="card-body">



<span class="badge bg-success">

{{ $item->kategori }}

</span>





<h5 class="fw-bold mt-3">

{{ $item->judul_moment }}

</h5>





<p class="text-muted mb-2">

<i class="bi bi-calendar-event"></i>

{{ $item->tanggal 
? date('d F Y', strtotime($item->tanggal))
: '-' }}

</p>





<p class="text-muted">

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

{{ $item->lokasi ?? '-' }}

</p>





<p>

{{ Str::limit($item->deskripsi, 120) }}

</p>





<a href="{{ route('frontend.detail-moment',$item->id) }}"
class="btn btn-success btn-sm">


<i class="bi bi-eye me-1"></i>

Lihat Detail


</a>



</div>


</div>


</div>




@empty


<div class="col-12 text-center">


<h5 class="text-muted">

Belum ada dokumentasi moment budaya

</h5>


</div>


@endforelse




</div>


</div>


</section>



@endsection