@extends('admin.layouts.app')

@section('title', 'Budget vs Actual')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Budget vs Actual</h1>
        <p class="text-gray-500 text-sm mt-1">Set and track expense budgets</p>
    </div>
    <form method="GET" class="flex items-center space-x-2">
        <select name="year" class="border rounded-lg px-3 py-2" onchange="this.form.submit()">
            @for($y = now()->year; $y >= now()->year - 5; $y--)
            <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>{{ $y }}</option>
            @endfor
        </select>
        <button type="button" onclick="openModal()" class="bg-gold hover:bg-gold-dark text-white px-4 py-2 rounded-lg">
            <i class="fas fa-plus mr-2"></i>Set Budget
        </button>
    </form>
</div>

<div class="bg-white rounded-lg shadow p-6">
    <h3 class="text-lg font-bold text-gray-800 mb-4">Monthly Budget Comparison</h3>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Month</th>
                    @foreach($categories as $cat)
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">{{ $cat }}</th>
                    @endforeach
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Total Budget</th>
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Total Actual</th>
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Variance</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @for($m = 1; $m <= 12; $m++)
                <tr>
                    <td class="px-4 py-3 font-medium">{{ Carbon\Carbon::create($year, $m, 1)->format('F') }}</td>
                    @foreach($categories as $cat)
                    <td class="px-4 py-3 text-right text-sm">
                        @php
                        $budget = $budgets->get($m)?->firstWhere('category', $cat);
                        $actual = $monthlyActuals->get($m)?->get($cat, 0);
                        @endphp
                        <span class="text-gray-600">₦{{ number_format($budget?->budgeted_amount ?? 0, 0) }}</span>
                    </td>
                    @endforeach
                    <td class="px-4 py-3 text-right font-medium bg-gray-50">
                        ₦{{ number_format($budgets->get($m)?->sum('budgeted_amount') ?? 0, 0) }}
                    </td>
                    <td class="px-4 py-3 text-right font-medium">
                        ₦{{ number_format($monthlyActuals->get($m)?->sum() ?? 0, 0) }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        @php
                        $totalBudget = $budgets->get($m)?->sum('budgeted_amount') ?? 0;
                        $totalActual = $monthlyActuals->get($m)?->sum() ?? 0;
                        $variance = $totalBudget - $totalActual;
                        @endphp
                        <span class="{{ $variance >= 0 ? 'text-green-600' : 'text-red-600' }}">
                            ₦{{ number_format(abs($variance), 0) }}
                        </span>
                    </td>
                </tr>
                @endfor
            </tbody>
        </table>
    </div>
</div>

<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md">
        <h3 class="text-lg font-bold mb-4">Set Budget</h3>
        <form action="{{ route('accounting.budgets.store') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Year *</label>
                        <select name="year" required class="w-full border rounded-lg px-3 py-2">
                            @for($y = now()->year; $y >= now()->year - 1; $y--)
                            <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Month</label>
                        <select name="month" class="w-full border rounded-lg px-3 py-2">
                            <option value="">Annual Budget</option>
                            @for($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}">{{ Carbon\Carbon::create($year, $m, 1)->format('F') }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Category *</label>
                    <select name="category" required class="w-full border rounded-lg px-3 py-2">
                        @foreach($categories as $cat)
                        <option value="{{ $cat }}">{{ $cat }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Budget Amount (₦) *</label>
                    <input type="number" name="budgeted_amount" min="0" step="0.01" required class="w-full border rounded-lg px-3 py-2">
                </div>
            </div>
            <div class="flex justify-end space-x-3 mt-6">
                <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-gold text-white rounded-lg hover:bg-gold-dark">Save</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function openModal() { document.getElementById('modal').classList.remove('hidden'); }
function closeModal() { document.getElementById('modal').classList.add('hidden'); }
</script>
@endpush
@endsection