@extends('public.layout')
@section('title', $activity->title)
@section('content')

<section class="max-w-4xl mx-auto px-6 py-24">
    <a href="{{ route('kegiatan') }}" class="text-sm text-gray-400 hover:text-gray-700 transition">← Kembali</a>

    <div class="mt-8">
        <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
            <span class="w-4 h-px bg-gray-400 inline-block"></span>
            {{ $activity->start_date->format('d M Y') }}
            @if($activity->start_date->ne($activity->end_date)) — {{ $activity->end_date->format('d M Y') }} @endif
        </p>
        <h1 class="text-4xl font-bold mb-6">{{ $activity->title }}</h1>
        <p class="text-gray-500 text-lg leading-relaxed mb-10">{{ $activity->description }}</p>

        <div class="border-t border-gray-100 pt-8 grid md:grid-cols-3 gap-6 text-sm">
            <div>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Dibuat oleh</p>
                <p class="font-medium">{{ $activity->creator->name }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Peserta</p>
                <p class="font-medium">{{ $activity->participants->count() }} orang</p>
            </div>
            @if($activity->executed_at)
            <div>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Dilaksanakan</p>
                <p class="font-medium">{{ $activity->executed_at->format('d M Y') }}</p>
            </div>
            @endif
        </div>

        @if($activity->execution_notes)
        <div class="mt-8 bg-gray-50 rounded-xl p-6">
            <p class="text-xs text-gray-400 uppercase tracking-widest mb-2">Catatan Pelaksanaan</p>
            <p class="text-gray-700 leading-relaxed">{{ $activity->execution_notes }}</p>
        </div>
        @endif
    </div>
</section>

@endsection
