{{-- resources/views/budget/show.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="{{ route('budget.index') }}" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                </a>
                <div>
                    <h2 class="text-lg font-semibold text-gray-800">{{ $budgetLine->name }}</h2>
                    <p class="text-sm text-gray-400 font-mono">{{ $budgetLine->code }} · {{ $budgetLine->fiscal_year }}</p>
                </div>
            </div>
            @php $status = $budgetLine->statusLabel(); @endphp
            <span class="text-xs font-bold px-3 py-1 rounded-full
                {{ match($status) {
                    'exhausted' => 'bg-red-100 text-red-700',
                    'critical'  => 'bg-red-50 text-red-600',
                    'warning'   => 'bg-amber-50 text-amber-700',
                    default     => 'bg-green-50 text-green-700',
                } }}">
                {{ ucfirst($status) }} · {{ $summary['utilisation'] }}% used
            </span>
        </div>
    </x-slot>

    <div class="py-6 px-6 space-y-5">

        {{-- KPI row --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <x-budget.kpi-card label="Allocated"       :value="$summary['allocated']"  color="blue" />
            <x-budget.kpi-card label="Int. Committed"  :value="$summary['internal']"   color="amber" sub="Requisitions" />
            <x-budget.kpi-card label="Ext. Committed"  :value="$summary['external']"   color="orange" sub="LPOs issued" />
            <x-budget.kpi-card label="Available"       :value="$summary['available']"
                color="{{ $summary['available'] <= 0 ? 'red' : 'green' }}"
                sub="{{ $summary['utilisation'] }}% utilised" />
        </div>

        {{-- Budget bar --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
            <div class="flex justify-between text-xs font-semibold text-gray-500 mb-2">
                <span>Budget Utilisation</span>
                <span>{{ number_format($summary['allocated']) }} UGX allocated</span>
            </div>
            @php
                $allocatedSafe = $summary['allocated'] > 0 ? $summary['allocated'] : 1;
                $pctInternal   = min(round(($summary['internal'] / $allocatedSafe) * 100, 1), 100);
                $pctExternal   = min(round(($summary['external'] / $allocatedSafe) * 100, 1), 100);
                $pctActual     = min(round(($summary['actual'] / $allocatedSafe) * 100, 1), 100);
            @endphp
            <div class="h-4 bg-gray-200 rounded-full overflow-hidden flex">
                <div class="h-full bg-red-500 transition-all" style="width: {{ $pctActual }}%" title="Actual: {{ $pctActual }}%"></div>
                <div class="h-full bg-orange-400 transition-all" style="width: {{ $pctExternal }}%" title="External: {{ $pctExternal }}%"></div>
                <div class="h-full bg-amber-400 opacity-70 transition-all" style="width: {{ $pctInternal }}%" title="Internal: {{ $pctInternal }}%"></div>
            </div>
            <div class="flex gap-4 mt-2 text-xs text-gray-500">
                <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-red-500 inline-block"></span> Actual spend</span>
                <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-orange-400 inline-block"></span> External (LPO)</span>
                <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block"></span> Internal (Requisition)</span>
                <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-gray-200 inline-block"></span> Available</span>
            </div>
        </div>

        {{-- Commitments table --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100">
                <h3 class="text-sm font-bold text-gray-700">All Commitments</h3>
                <span class="text-xs text-gray-400">{{ $commitments->total() }} records</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Type</th>
                            <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Reference</th>
                            <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Procurement</th>
                            <th class="text-right px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Amount (UGX)</th>
                            <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Expires / Created</th>
                            <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($commitments as $commit)
                            @php
                                $typeCls = match($commit->type) {
                                    'internal' => 'bg-amber-100 text-amber-700',
                                    'external' => 'bg-orange-100 text-orange-700',
                                    'actual'   => 'bg-red-100 text-red-700',
                                    default    => 'bg-gray-100 text-gray-600',
                                };
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <span class="text-xs font-semibold px-2 py-0.5 rounded {{ $typeCls }}">
                                        {{ ucfirst($commit->type) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 font-mono text-xs text-blue-600">{{ $commit->reference ?? '—' }}</td>
                                <td class="px-4 py-3">
                                    <a href="{{ route('procurements.show', $commit->procurement) }}"
                                       class="text-sm text-gray-700 hover:text-blue-600 font-medium line-clamp-1">
                                        {{ $commit->procurement->title }}
                                    </a>
                                    <div class="text-xs text-gray-400 font-mono">{{ $commit->procurement->ref }}</div>
                                </td>
                                <td class="px-4 py-3 text-right font-mono text-sm font-semibold">
                                    {{ number_format($commit->amount) }}
                                </td>
                                <td class="px-4 py-3 text-xs text-gray-500">
                                    @if($commit->expires_at)
                                        @php $days = $commit->daysUntilExpiry(); @endphp
                                        <span class="{{ $days <= 3 ? 'text-red-600 font-semibold' : ($days <= 7 ? 'text-amber-600' : '') }}">
                                            {{ $commit->expires_at->format('d M Y') }}
                                            ({{ $days }}d)
                                        </span>
                                    @else
                                        {{ $commit->created_at->format('d M Y') }}
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    @if($commit->is_active)
                                        <span class="text-xs font-semibold text-green-600">Active</span>
                                    @else
                                        <span class="text-xs text-gray-400">Inactive</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-400">
                                    No commitments recorded against this budget line.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($commitments->hasPages())
                <div class="px-4 py-3 border-t border-gray-100">{{ $commitments->links() }}</div>
            @endif
        </div>

    </div>
</x-app-layout>