@extends('layouts.app')

@section('title', 'Activity Detail - SIPHLN')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- Header Bar -->
    <div class="flex justify-between items-center bg-white p-5 rounded-lg shadow border border-gray-200">
        <div>
            <h1 class="text-xl font-bold text-gray-800">Activity Detail</h1>
            <p class="text-gray-500 text-sm">{{ $activity->activity_name }}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('activities.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition">Back</a>
            <a href="{{ route('activities.edit', $activity->id) }}" class="bg-teal-700 hover:bg-teal-800 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition">Edit</a>
        </div>
    </div>

    <!-- Main Information -->
    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">Main Information</h3>
        <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
            <div class="md:col-span-2">
                <dt class="text-xs font-semibold uppercase text-gray-400">Parent Project</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    {{ $activity->project->project_name ?? '-' }}
                    <span class="text-teal-600 font-semibold">{{ $activity->project->organizationUnit->acronym ? ' (' . $activity->project->organizationUnit->acronym . ')' : '' }}</span>
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Organization Unit</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    @if($activity->organizationUnit)
                        <span class="bg-teal-100 text-teal-800 text-xs px-2.5 py-1 rounded-full font-medium inline-block">{{ $activity->organizationUnit->acronym }}</span>
                        <span class="text-gray-600 text-xs">{{ $activity->organizationUnit->organization_unit }}</span>
                    @else
                        -
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Execution Year</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $activity->execution_year ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Activity Type</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    @if($activity->activity_type)
                        <span class="bg-teal-100 text-teal-800 text-xs px-2.5 py-1 rounded-full font-medium inline-block">{{ $activity->activity_type }}</span>
                    @else
                        -
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Program Code</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5 font-mono">{{ $activity->program_code ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Responsible Team</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $activity->responsible_team ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Transformation Pillar</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $activity->transformation_pillar ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Location</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $activity->location ?? '-' }}</dd>
            </div>
        </dl>
    </div>

    <!-- Budget Details -->
    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">Budget Details</h3>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-100">
                <p class="text-xs font-semibold uppercase text-teal-700">Budget {{ $activity->execution_year }}</p>
                <p class="text-lg font-bold text-teal-900 mt-1">Rp {{ number_format($activity->budget, 0, ',', '.') }}</p>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <p class="text-xs font-semibold uppercase text-gray-500">Budget Plan 2027</p>
                <p class="text-lg font-bold text-gray-900 mt-1">Rp {{ number_format($activity->budget_plan_2027, 0, ',', '.') }}</p>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <p class="text-xs font-semibold uppercase text-gray-500">Budget Plan 2028</p>
                <p class="text-lg font-bold text-gray-900 mt-1">Rp {{ number_format($activity->budget_plan_2028, 0, ',', '.') }}</p>
            </div>
        </div>
    </div>

    <!-- Indicators & Targets -->
    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">Indicators & Targets</h3>
        <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Target</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    {{ $activity->target_volume && $activity->target_volume > 0 ? number_format($activity->target_volume, 0, ',', '.') . ' ' . ($activity->target_unit ?? '') : '-' }}
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Thematic APBN</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    @if($activity->thematic_apbn)
                        <span class="bg-indigo-100 text-indigo-800 text-xs px-2.5 py-1 rounded-full font-medium inline-block">{{ $activity->thematic_apbn }}</span>
                    @else
                        -
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Status</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    @if(($activity->statusName ?? 'On Going') === 'Completed')
                        <span class="bg-emerald-100 text-emerald-800 text-xs px-2.5 py-1 rounded-full font-medium inline-block">Completed</span>
                    @else
                        <span class="bg-amber-100 text-amber-800 text-xs px-2.5 py-1 rounded-full font-medium inline-block">{{ $activity->statusName ?? 'On Going' }}</span>
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">IKK Code</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5 font-mono">{{ $activity->ikk_code ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">IKP Code</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5 font-mono">{{ $activity->ikp_code ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">ISS Code</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5 font-mono">{{ $activity->iss_code ?? '-' }}</dd>
            </div>
            <div class="md:col-span-2">
                <dt class="text-xs font-semibold uppercase text-gray-400">Output Description</dt>
                <dd class="text-sm text-gray-700 mt-0.5">{{ $activity->output_description ?? '-' }}</dd>
            </div>
        </dl>
    </div>

</div>
@endsection