@extends('layouts.admin')
@section('title', 'Budgets')
@section('page-title', 'Budgets')
@section('page-subtitle', 'Manage church budgets')

@section('content')
<div class="space-y-6">
    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Set Budget for {{ now()->year }}</h3>
        <form action="{{ route('admin.finance.budgets.store') }}" method="POST" class="flex gap-4 items-end">
            @csrf
            <div class="flex-1">
                <label class="block text-sm text-[var(--text-secondary)] mb-2">Category</label>
                <select name="category_id" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">Select Category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex-1">
                <label class="block text-sm text-[var(--text-secondary)] mb-2">Budget Amount (GH₵)</label>
                <input type="number" name="budget_amount" step="0.01" min="0" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </div>
            <input type="hidden" name="year" value="{{ now()->year }}">
            <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Save Budget</button>
        </form>
    </div>
    
    <div class="card-royal overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-[var(--bg-secondary)]">
                    <tr class="text-left text-sm text-[var(--text-secondary)]">
                        <th class="px-6 py-4 font-semibold">Category</th>
                        <th class="px-6 py-4 font-semibold">Budget (GH₵)</th>
                        <th class="px-6 py-4 font-semibold">Spent (GH₵)</th>
                        <th class="px-6 py-4 font-semibold">Remaining (GH₵)</th>
                        <th class="px-6 py-4 font-semibold">Progress</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[var(--border-color)]">
                    @forelse($budgets as $budget)
                        <tr class="hover:bg-[var(--bg-secondary)]">
                            <td class="px-6 py-4 text-[var(--text-primary)]">{{ $budget->category?->name ?? 'N/A' }}</td>
                            <td class="px-6 py-4 text-[var(--text-primary)]">GH₵{{ number_format($budget->budget_amount, 2) }}</td>
                            <td class="px-6 py-4 text-red-500">GH₵{{ number_format($budget->spent_amount ?? 0, 2) }}</td>
                            <td class="px-6 py-4 text-green-500">GH₵{{ number_format($budget->remaining_amount ?? 0, 2) }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="flex-1 h-2 bg-[var(--bg-secondary)] rounded-full overflow-hidden max-w-[100px]">
                                        <div class="h-full {{ $budget->percentage_spent > 90 ? 'bg-red-500' : 'bg-gold-500' }}" 
                                             style="width: {{ min(100, $budget->percentage_spent) }}%"></div>
                                    </div>
                                    <span class="text-sm">{{ $budget->percentage_spent }}%</span>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-[var(--text-secondary)]">
                                <i class="fas fa-chart-pie text-4xl mb-4"></i>
                                <p>No budgets set for this year</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection