@extends('public.layout')

@section('title', $activity->title)

@section('content')

<a href="{{ route('kegiatan') }}" class="text-green-700 text-sm hover:underline">← Kembali ke Kegiatan</a>

<div class="bg-white rounded-xl shadow p-8 mt-6">
    <div class="text-sm text-green-600 font-semibold mb-2">
        {{ $activity->start_date->format('d M Y') }}
        @if($activity->start_date->ne($activity->end_date))
            — {{ $activity->end_date->format('d M Y') }}
        @endif
    </div>

    <h1 class="text-3xl font-bold mb-4">{{ $activity->title }}</h1>

    <p class="text-gray-600 leading-relaxed mb-6">{{ $activity->description }}</p>

    <div class="grid md:grid-cols-2 gap-4 text-sm text-gray-500 border-t pt-6">
        <div>
            <span class="font-semibold text-gray-700">Dibuat oleh:</span>
            {{ $activity->creator->name }}
        </div>
        <div>
            <span class="font-semibold text-gray-700">Peserta:</span>
            {{ $activity->participants->count() }} orang
        </div>
        @if($activity->executed_at)
        <div>
            <span class="font-semibold text-gray-700">Dilaksanakan:</span>
            {{ $activity->executed_at->format('d M Y') }}
        </div>
        @endif
    </div>

    @if($activity->execution_notes)
    <div class="mt-6 bg-green-50 rounded-lg p-4">
        <div class="font-semibold text-green-800 mb-1">Catatan Pelaksanaan</div>
        <p class="text-sm text-green-700">{{ $activity->execution_notes }}</p>
    </div>
    @endif
</div>

@endsection