@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>

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

    <div class="container">

        <div class="row">

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

                @if($agenda->gambar)

                    <img src="{{ asset('storage/'.$agenda->gambar) }}"
                         class="img-fluid rounded shadow w-100">

                @else

                    <img src="{{ asset('images/no-image.png') }}"
                         class="img-fluid rounded shadow w-100">

                @endif

            </div>

            <!-- Informasi -->
            <div class="col-lg-6">

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

                    {{ $agenda->status }}

                </span>

                <h2 class="fw-bold">

                    {{ $agenda->nama_agenda }}

                </h2>

                <hr>

                <table class="table">

                    <tr>

                        <th width="180">
                            <i class="bi bi-calendar-event-fill text-warning"></i>
                            Tanggal
                        </th>

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

                    </tr>

                    <tr>

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

                        <td>

                            {{ $agenda->waktu }}

                        </td>

                    </tr>

                    <tr>

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

                        <td>

                            {{ $agenda->lokasi }}

                        </td>

                    </tr>

                    <tr>

                        <th>
                            <i class="bi bi-people-fill text-primary"></i>
                            Penyelenggara
                        </th>

                        <td>

                            {{ $agenda->penyelenggara }}

                        </td>

                    </tr>

                </table>

                <h4 class="mt-4">

                    Deskripsi

                </h4>

                <p style="text-align:justify;">

                    {{ $agenda->deskripsi }}

                </p>

                <a href="{{ route('frontend.agenda') }}"
                   class="btn btn-dark mt-3">

                    <i class="bi bi-arrow-left"></i>

                    Kembali ke Agenda

                </a>

            </div>

        </div>

    </div>

</section>

@endsection