@extends('layouts.app')

@section('title', 'Project 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">Project Detail</h1>
            <p class="text-gray-500 text-sm">{{ $project->project_name }}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('projects.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('projects.edit', $project->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>

    <!-- General 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">General Information</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">Organization Unit</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $project->organizationUnit->acronym ? $project->organizationUnit->acronym . ' - ' . $project->organizationUnit->organization_unit : ($project->organizationUnit->organization_unit ?? '-') }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Register Number</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $project->register_number ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">MoU Period</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $project->mou_period ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Funding Type</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $project->fundingType->funding_type_name ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Lender / Donor</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $project->lender->lender_name ?? ($project->lender->name ?? '-') }}</dd>
            </div>
        </dl>
    </div>

    <!-- Financial 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">Financial Details</h3>

        <div 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">MOU Amount (Rp)</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">Rp {{ number_format($project->mou_amount, 0, ',', '.') }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">MOU Amount (USD)</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    @if(!is_null($project->mou_amount_usd) && $project->mou_amount_usd > 0)
                        $ {{ number_format($project->mou_amount_usd, 0, ',', '.') }}
                    @else
                        -
                    @endif
                </dd>
            </div>
        </div>
    </div>

<!-- Grant Registration -->
    <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">Grant Registration</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">Grant Registration Status</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                    @if($project->grant_registration_status && $project->grant_registration_status === 'Registered')
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">Registered</span>
                    @else
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-600">Not Yet Registered</span>
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase text-gray-400">Grant Registration Date</dt>
                <dd class="text-sm font-semibold text-gray-900 mt-0.5">{{ $project->grant_registration_date ? $project->grant_registration_date->format('d M Y') : '-' }}</dd>
            </div>
            <div class="md:col-span-2">
                <dt class="text-xs font-semibold uppercase text-gray-400">Grant Registration Document Link</dt>
                <dd class="text-sm font-medium text-gray-900 mt-0.5">
                    @if($project->grant_registration_link)
                        <a href="{{ $project->grant_registration_link }}" target="_blank" rel="noopener noreferrer" class="text-teal-700 hover:text-teal-900 hover:underline">{{ $project->grant_registration_link }}</a>
                    @else
                        -
                    @endif
                </dd>
            </div>
        </dl>
    </div>

</div>
@endsection