@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">
           Agenda Budaya
        </h1>

        <p class="lead mt-3" data-aos="fade-up">
           Jadwal Kegiatan Budaya Kabupaten Mandailing Natal
        </p>

    </div>

</section>

<!-- Agenda -->
<section class="py-5">

    <div class="container">

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

            <h2 class="section-title">
                Agenda Terbaru
            </h2>

            <div class="line"></div>

        </div>

        <div class="row">

            @forelse($agendas as $agenda)

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

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

                    @if($agenda->gambar)

                        <img src="{{ asset('storage/'.$agenda->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">

                            {{ $agenda->status }}

                        </span>

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

                            {{ $agenda->nama_agenda }}

                        </h4>

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

                            <i class="bi bi-calendar-event-fill text-warning"></i>

                            {{ \Carbon\Carbon::parse($agenda->tanggal)->translatedFormat('d F Y') }}

                        </p>

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

                            <i class="bi bi-clock-fill text-warning"></i>

                            {{ $agenda->waktu }}

                        </p>

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

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

                            {{ $agenda->lokasi }}

                        </p>

                        <p>

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

                        </p>

                    </div>

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

                        <a href="{{ route('frontend.detail-agenda',$agenda->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-calendar-x"></i>

                    Belum ada agenda budaya.

                </div>

            </div>

            @endforelse

        </div>

    </div>

</section>

@endsection