{{-- ═══════════════════════════════════════════════════════════════════════════
     FILE 1: resources/views/components/budget/kpi-card.blade.php
     Usage: <x-budget.kpi-card label="Available" :value="314000000" color="green" sub="After all commitments" />
     ═══════════════════════════════════════════════════════════════════════════ --}}

@props(['label', 'value', 'color' => 'blue', 'sub' => null])

@php
    $colorMap = [
        'blue'   => ['border' => 'border-t-blue-500',   'text' => 'text-blue-700'],
        'green'  => ['border' => 'border-t-green-500',  'text' => 'text-green-700'],
        'amber'  => ['border' => 'border-t-amber-500',  'text' => 'text-amber-700'],
        'orange' => ['border' => 'border-t-orange-500', 'text' => 'text-orange-700'],
        'red'    => ['border' => 'border-t-red-500',    'text' => 'text-red-700'],
    ];
    $cls = $colorMap[$color] ?? $colorMap['blue'];
@endphp

<div class="bg-white rounded-xl border border-gray-200 border-t-4 {{ $cls['border'] }} shadow-sm p-4">
    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">{{ $label }}</div>
    <div class="text-2xl font-bold {{ $cls['text'] }} tracking-tight">
        {{ number_format($value) }}
        <span class="text-sm font-normal text-gray-400">UGX</span>
    </div>
    @if($sub)
        <div class="text-xs text-gray-400 mt-1">{{ $sub }}</div>
    @endif
</div>


{{-- ═══════════════════════════════════════════════════════════════════════════
     FILE 2: resources/views/budget/create.blade.php
     ═══════════════════════════════════════════════════════════════════════════ --}}
{{--
<x-app-layout>
    <x-slot name="header">
        <h2 class="text-lg font-semibold text-gray-800">New Budget Line</h2>
    </x-slot>

    <div class="py-6 px-6 max-w-2xl">
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
            <form method="POST" action="{{ route('budget.store') }}">
                @csrf

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Line Code <span class="text-red-500">*</span></label>
                        <input type="text" name="code" value="{{ old('code') }}"
                               placeholder="e.g. DTECH-2026-001"
                               class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                        @error('code') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Fiscal Year <span class="text-red-500">*</span></label>
                        <input type="text" name="fiscal_year" value="{{ old('fiscal_year', '2025/26') }}"
                               placeholder="e.g. 2025/26"
                               class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                        @error('fiscal_year') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="mt-4">
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Budget Line Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}"
                           placeholder="e.g. ICT Equipment — TVET Institutions"
                           class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-4 mt-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Department</label>
                        <input type="text" name="department" value="{{ old('department') }}"
                               class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Currency</label>
                        <select name="currency" class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                            <option value="UGX" @selected(old('currency','UGX')==='UGX')>UGX — Ugandan Shilling</option>
                            <option value="USD" @selected(old('currency')==='USD')>USD — US Dollar</option>
                        </select>
                    </div>
                </div>

                <div class="mt-4">
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Allocated Amount <span class="text-red-500">*</span></label>
                    <input type="number" name="allocated_amount" value="{{ old('allocated_amount') }}"
                           min="1" step="0.01"
                           class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                    @error('allocated_amount') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="mt-4">
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Description</label>
                    <textarea name="description" rows="2"
                              class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">{{ old('description') }}</textarea>
                </div>

                <div class="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                    <a href="{{ route('budget.index') }}"
                       class="px-4 py-2 text-sm font-semibold text-gray-600 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        Cancel
                    </a>
                    <button type="submit"
                            class="px-5 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                        Create Budget Line
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
--}}


{{-- ═══════════════════════════════════════════════════════════════════════════
     FILE 3: Alpine.js budget checker — add to your procurement create/edit form
     Drop this inside the <form> where the user picks a budget line.

     Requires: budget.check and budget.lines routes registered.
     ═══════════════════════════════════════════════════════════════════════════ --}}
{{--
<div x-data="budgetChecker()" class="mt-4">
    <label class="block text-xs font-semibold text-gray-600 mb-1">
        Budget Line <span class="text-red-500">*</span>
    </label>
    <select name="budget_line_id"
            x-model="budgetLineId"
            @change="checkBudget()"
            class="w-full border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
        <option value="">— Select budget line —</option>
        @foreach($budgetLines as $line)
            <option value="{{ $line->id }}">
                [{{ $line->code }}] {{ $line->name }} (Available: {{ number_format($line->availableAmount()) }} UGX)
            </option>
        @endforeach
    </select>

    {{-- Live balance feedback --}}
    <div x-show="result" x-cloak class="mt-2 p-3 rounded-lg text-sm flex items-start gap-2"
         :class="result?.can_commit ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700'">
        <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path x-show="result?.can_commit" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            <path x-show="!result?.can_commit" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span x-text="result?.message"></span>
    </div>
</div>

<script>
function budgetChecker() {
    return {
        budgetLineId: '',
        estimatedValue: 0,
        result: null,
        async checkBudget() {
            if (!this.budgetLineId) { this.result = null; return; }
            const amount = document.querySelector('[name=estimated_value]')?.value || 0;
            const params = new URLSearchParams({ budget_line_id: this.budgetLineId, amount });
            const res = await fetch(`/budget/check?${params}`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });
            this.result = await res.json();
        }
    }
}
</script>
--}}