@extends('layouts.main')

@section('title', $agenda->title . ' | PPNI DPK BaliMéd')
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($agenda->description), 155))
@section('og_title', $agenda->title . ' | PPNI DPK BaliMéd')
@section('og_description', \Illuminate\Support\Str::limit(strip_tags($agenda->description), 155))
@section('og_image', $agenda->image ? asset($agenda->image) : asset('assets/images/logo-ppni.png'))

@section('content')
    <section class="bg-gradient-to-r from-blue-950 via-blue-900 to-blue-700 text-white">
        <div class="max-w-5xl mx-auto px-4 py-20">
            <p class="text-blue-200 font-semibold mb-3">Detail Agenda</p>
            <h1 class="text-4xl md:text-5xl font-extrabold mb-4">{{ $agenda->title }}</h1>

            <div class="flex flex-wrap gap-3 text-sm md:text-base">
                <span class="bg-white/10 px-4 py-2 rounded-full">
                    {{ $agenda->event_date->format('d F Y') }}
                </span>

                @if($agenda->event_time)
                    <span class="bg-white/10 px-4 py-2 rounded-full">
                        {{ $agenda->event_time }}
                    </span>
                @endif

                @if($agenda->location)
                    <span class="bg-white/10 px-4 py-2 rounded-full">
                        {{ $agenda->location }}
                    </span>
                @endif
            </div>
        </div>
    </section>

    <section class="max-w-7xl mx-auto px-4 py-16 grid lg:grid-cols-3 gap-10">
        <article class="lg:col-span-2">
            <div class="bg-white rounded-3xl shadow-sm overflow-hidden">
                @if($agenda->image)
                    <img src="{{ asset($agenda->image) }}" alt="{{ $agenda->title }}" class="w-full h-[420px] object-cover">
                @endif

                <div class="p-8">
                    <div class="prose max-w-none text-slate-700 leading-8">
                        {!! $agenda->description ?: '<p>Deskripsi agenda belum tersedia.</p>' !!}
                    </div>

                    <div class="mt-8">
                        <a href="{{ route('agenda') }}"
                            class="inline-block bg-blue-900 text-white px-5 py-3 rounded-xl hover:bg-blue-800">
                            ← Kembali ke Agenda
                        </a>
                    </div>
                </div>
            </div>
        </article>

        <aside>
            <div class="bg-white rounded-3xl shadow-sm p-6">
                <h3 class="text-2xl font-bold mb-6">Agenda Lainnya</h3>

                <div class="space-y-5">
                    @forelse($latestAgendas as $item)
                        <div class="border-b pb-4 last:border-b-0">
                            <a href="{{ route('agenda.show', $item->slug) }}" class="font-bold text-blue-900 hover:underline">
                                {{ $item->title }}
                            </a>
                            <p class="text-sm text-slate-500 mt-1">
                                {{ $item->event_date->format('d M Y') }}
                            </p>
                            @if($item->location)
                                <p class="text-sm text-blue-700 mt-1">{{ $item->location }}</p>
                            @endif
                        </div>
                    @empty
                        <p class="text-slate-500">Belum ada agenda lainnya.</p>
                    @endforelse
                </div>
            </div>
        </aside>
    </section>
@endsection