@extends('layouts.admin')

@section('content')

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold text-dark">
                Detail Agenda
            </h2>

            <small class="text-muted">
                Informasi lengkap agenda budaya
            </small>

        </div>

        <a href="{{ route('agenda.index') }}" class="btn btn-secondary">

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

            Kembali

        </a>

    </div>

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

        <div class="card-body">

            <div class="row">

                <div class="col-md-5 text-center">

                    @if($agenda->gambar)

                        <img src="{{ asset('storage/'.$agenda->gambar) }}"
                             class="img-fluid rounded shadow"
                             style="max-height:400px;">

                    @else

                        <img src="{{ asset('images/no-image.png') }}"
                             class="img-fluid rounded shadow"
                             style="max-height:400px;">

                    @endif

                </div>

                <div class="col-md-7">

                    <table class="table table-bordered">

                        <tr>
                            <th width="220">Nama Agenda</th>
                            <td>{{ $agenda->nama_agenda }}</td>
                        </tr>

                        <tr>
                            <th>Penyelenggara</th>
                            <td>{{ $agenda->penyelenggara }}</td>
                        </tr>

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

                        <tr>
                            <th>Waktu</th>
                            <td>{{ $agenda->waktu }}</td>
                        </tr>

                        <tr>
                            <th>Lokasi</th>
                            <td>{{ $agenda->lokasi }}</td>
                        </tr>

                        <tr>
                            <th>Status</th>
                            <td>

                                @if($agenda->status == 'Akan Datang')

                                    <span class="badge bg-warning text-dark">
                                        Akan Datang
                                    </span>

                                @elseif($agenda->status == 'Sedang Berlangsung')

                                    <span class="badge bg-primary">
                                        Sedang Berlangsung
                                    </span>

                                @else

                                    <span class="badge bg-success">
                                        Selesai
                                    </span>

                                @endif

                            </td>
                        </tr>

                        <tr>
                            <th>Deskripsi</th>
                            <td style="text-align:justify;">
                                {{ $agenda->deskripsi }}
                            </td>
                        </tr>

                    </table>

                    <div class="mt-3">

                        <a href="{{ route('agenda.edit',$agenda->id) }}"
                           class="btn btn-warning">

                            <i class="bi bi-pencil-square"></i>

                            Edit Agenda

                        </a>

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

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

                            Daftar Agenda

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection