{{-- resources/views/budget/index.blade.php --}}
<x-app-layout>
    <x-slot name="pageTitle">Budget &amp; Commitments</x-slot>

    {{-- ── Page header ── --}}
    <div class="ph">
        <div>
            <div class="ph-title">Budget &amp; Commitments</div>
            <div class="ph-sub">Fiscal Year: {{ $fiscalYear }}</div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;">
            <form method="GET" style="display:inline;">
                <select name="year" onchange="this.form.submit()" class="fs" style="width:auto;padding:6px 10px;">
                    @foreach($fiscalYears as $year)
                        <option value="{{ $year }}" @selected($year === $fiscalYear)>{{ $year }}</option>
                    @endforeach
                </select>
            </form>
            @can('manage-budget')
                <a href="{{ route('budget.create') }}" class="btn btn-primary">
                    <svg viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg>
                    New Budget Line
                </a>
            @endcan
        </div>
    </div>

    {{-- ── Portfolio KPI stats ── --}}
    <div class="stats-grid mb-4">
        <div class="sc blue">
            <div class="sc-top">
                <div>
                    <div class="sc-label">Total Allocated</div>
                    <div class="sc-val">{{ number_format($portfolio['allocated']) }}</div>
                    <div class="sc-sub">{{ $portfolio['lines_count'] }} active lines &middot; UGX</div>
                </div>
                <div class="sc-ico" style="background:rgba(22,101,52,.08);color:var(--blue);">
                    <svg viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                </div>
            </div>
        </div>
        <div class="sc amber">
            <div class="sc-top">
                <div>
                    <div class="sc-label">Committed</div>
                    <div class="sc-val" style="color:var(--amber);">{{ number_format($portfolio['internal'] + $portfolio['external']) }}</div>
                    <div class="sc-sub">Internal + External &middot; UGX</div>
                </div>
                <div class="sc-ico" style="background:rgba(245,158,11,.08);color:var(--amber);">
                    <svg viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </div>
            </div>
        </div>
        <div class="sc red">
            <div class="sc-top">
                <div>
                    <div class="sc-label">Actual Spend</div>
                    <div class="sc-val" style="color:var(--red);">{{ number_format($portfolio['actual']) }}</div>
                    <div class="sc-sub">Invoiced &amp; paid &middot; UGX</div>
                </div>
                <div class="sc-ico" style="background:rgba(239,68,68,.08);color:var(--red);">
                    <svg viewBox="0 0 24 24"><path d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                </div>
            </div>
        </div>
        <div class="sc {{ $portfolio['available'] < 0 ? 'red' : 'green' }}">
            <div class="sc-top">
                <div>
                    <div class="sc-label">Available</div>
                    <div class="sc-val" style="color:{{ $portfolio['available'] < 0 ? 'var(--red)' : 'var(--green)' }};">{{ number_format($portfolio['available']) }}</div>
                    <div class="sc-sub">{{ $portfolio['utilisation'] }}% utilised &middot; UGX</div>
                </div>
                <div class="sc-ico" style="background:{{ $portfolio['available'] < 0 ? 'rgba(239,68,68,.08)' : 'rgba(16,185,129,.08)' }};color:{{ $portfolio['available'] < 0 ? 'var(--red)' : 'var(--green)' }};">
                    <svg viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Commitment Flow ── --}}
    <div class="card mb-4">
        <div class="card-header">
            <span class="card-title">Commitment Flow</span>
        </div>
        <div class="card-body" style="padding-bottom:10px;">
            <div style="display:flex;align-items:stretch;gap:0;">
                @php
                    $flowSteps = [
                        ['label'=>'Allocated',       'val'=>$portfolio['allocated'],  'color'=>'var(--blue)',   'bg'=>'var(--blue-light)',   'sub'=>'Approved budget'],
                        ['label'=>'Internal Commit', 'val'=>$portfolio['internal'],   'color'=>'var(--amber)',  'bg'=>'var(--amber-light)',  'sub'=>'Approved requisitions'],
                        ['label'=>'External Commit', 'val'=>$portfolio['external'],   'color'=>'var(--orange)', 'bg'=>'var(--orange-light)', 'sub'=>'LPOs issued'],
                        ['label'=>'Actual Spend',    'val'=>$portfolio['actual'],     'color'=>'var(--red)',    'bg'=>'var(--red-light)',    'sub'=>'Invoiced & paid'],
                        ['label'=>'Available',       'val'=>$portfolio['available'],  'color'=>'var(--green)',  'bg'=>'var(--green-light)',  'sub'=>'True balance'],
                    ];
                @endphp
                @foreach($flowSteps as $i => $step)
                    <div style="flex:1;position:relative;border:2px solid {{ $step['color'] }};background:{{ $step['bg'] }};padding:10px 8px;text-align:center;{{ $i===0?'border-radius:var(--radius-sm) 0 0 var(--radius-sm);':'' }}{{ $i===count($flowSteps)-1?'border-radius:0 var(--radius-sm) var(--radius-sm) 0;':'' }}">
                        <div style="font-size:1rem;font-weight:700;color:{{ $step['color'] }};">{{ number_format($step['val']) }}</div>
                        <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:{{ $step['color'] }};margin-top:2px;">{{ $step['label'] }}</div>
                        <div style="font-size:.72rem;color:var(--gray-500);margin-top:2px;">{{ $step['sub'] }}</div>
                        @if($i < count($flowSteps)-1)
                            <div style="position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;font-size:1rem;font-weight:700;color:var(--gray-400);">→</div>
                        @endif
                    </div>
                @endforeach
            </div>
            <p class="text-xs text-muted mt-3">
                Internal and external commitments are mutually exclusive per procurement — no double-counting.
                Internal commitments auto-expire after 30 days if no LPO is issued.
            </p>
        </div>
    </div>

    {{-- ── Budget Lines + Sidebar ── --}}
    <div style="display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start;">

        {{-- Budget Lines table --}}
        <div class="card" style="margin-bottom:0;">
            <div class="card-header">
                <span class="card-title">Budget Lines</span>
                <span class="badge badge-gray">{{ $lines->count() }} lines</span>
            </div>
            <div class="tw">
                <table>
                    <thead>
                        <tr>
                            <th>Line</th>
                            <th style="text-align:right;">Allocated</th>
                            <th style="text-align:right;">Committed</th>
                            <th style="text-align:right;">Actual</th>
                            <th style="text-align:right;">Available</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($lines as $line)
                            @php
                                $internal  = $line->totalInternalCommitment();
                                $external  = $line->totalExternalCommitment();
                                $actual    = $line->totalActualSpend();
                                $available = $line->availableAmount();
                                $status    = $line->statusLabel();
                                $statusBadge = match($status) {
                                    'exhausted' => 'badge-red',
                                    'critical'  => 'badge-red',
                                    'warning'   => 'badge-amber',
                                    default     => 'badge-green',
                                };
                                $pct = $line->utilisationPercent();
                                $fillColor = $pct >= 100 ? 'var(--red)' : ($pct >= 85 ? 'var(--red)' : ($pct >= 60 ? 'var(--amber)' : 'var(--green)'));
                            @endphp
                            <tr style="cursor:pointer;" onclick="window.location='{{ route('budget.show', $line) }}'">
                                <td>
                                    <div style="font-weight:600;">{{ $line->name }}</div>
                                    <div class="text-xs font-mono text-muted">{{ $line->code }} &middot; {{ $line->department }}</div>
                                    <div class="pbar mt-3" style="width:120px;margin-top:6px;">
                                        <div class="pfill" style="width:{{ min($pct, 100) }}%;background:{{ $fillColor }};"></div>
                                    </div>
                                </td>
                                <td style="text-align:right;" class="font-mono text-xs">{{ number_format($line->allocated_amount) }}</td>
                                <td style="text-align:right;" class="font-mono text-xs" style="color:var(--amber);">{{ number_format($internal + $external) }}</td>
                                <td style="text-align:right;" class="font-mono text-xs" style="color:var(--red);">{{ number_format($actual) }}</td>
                                <td style="text-align:right;" class="font-mono text-xs font-bold" style="color:{{ $available <= 0 ? 'var(--red)' : 'var(--green)' }};">
                                    {{ number_format($available) }}
                                </td>
                                <td><span class="badge {{ $statusBadge }}">{{ ucfirst($status) }}</span></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" style="text-align:center;padding:32px;color:var(--gray-400);">
                                    No budget lines for {{ $fiscalYear }}.
                                    @can('manage-budget')
                                        <a href="{{ route('budget.create') }}" style="color:var(--blue);">Create one.</a>
                                    @endcan
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Right column --}}
        <div>

            {{-- Expiring soon --}}
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Expiring Soon</span>
                    @if($expiring->isNotEmpty())
                        <span class="badge badge-amber">{{ $expiring->count() }}</span>
                    @endif
                </div>
                @if($expiring->isEmpty())
                    <div class="card-body text-muted text-sm" style="text-align:center;">
                        No commitments expiring in the next 14&nbsp;days.
                    </div>
                @else
                    @foreach($expiring as $commit)
                        @php $days = $commit->daysUntilExpiry(); @endphp
                        <div style="padding:11px 16px;border-bottom:1px solid var(--gray-100);background:{{ $days<=3?'var(--red-light)':'var(--amber-light)' }};">
                            <div class="flex-between">
                                <div>
                                    <div class="font-mono text-xs" style="font-weight:600;">{{ $commit->reference }}</div>
                                    <div class="text-xs text-muted mt-3" style="margin-top:2px;">{{ $commit->procurement->title ?? '—' }}</div>
                                    <div class="text-xs text-muted">{{ number_format($commit->amount) }} UGX</div>
                                </div>
                                <span class="badge {{ $days<=3?'badge-red':'badge-amber' }}">{{ $days }}d</span>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            {{-- Recent activity --}}
            <div class="card" style="margin-bottom:0;">
                <div class="card-header">
                    <span class="card-title">Recent Activity</span>
                </div>
                <div style="max-height:280px;overflow-y:auto;">
                    @foreach($recentActivity as $activity)
                        @php
                            $typeBadge = match($activity->type) {
                                'internal' => 'badge-amber',
                                'external' => 'badge-orange',
                                'actual'   => 'badge-red',
                                default    => 'badge-gray',
                            };
                        @endphp
                        <div style="padding:9px 14px;border-bottom:1px solid var(--gray-100);display:flex;align-items:flex-start;gap:9px;">
                            <span class="badge {{ $typeBadge }}" style="flex-shrink:0;margin-top:1px;">{{ ucfirst($activity->type) }}</span>
                            <div style="min-width:0;">
                                <div class="text-xs font-mono" style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $activity->reference }}</div>
                                <div class="text-xs text-muted">{{ number_format($activity->amount) }} UGX &middot; {{ $activity->created_at->diffForHumans() }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>

</x-app-layout>