<x-layouts.app title="Budget & Savings" activePage="plan-learn">
<div class="max-w-5xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 mb-2">Budget & Savings</h2>
    <p class="text-sm text-gray-500 mb-6">Set monthly budgets by category and track your savings goals.</p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {{-- Budgets Section --}}
        <div>
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Monthly Budgets</h3>

            {{-- Add Budget --}}
            <form method="POST" action="{{ route('plan-learn.budget.store') }}" class="bg-white rounded-lg shadow p-4 mb-4 flex flex-col sm:flex-row gap-3 sm:items-end">
                @csrf
                <div class="flex-1">
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Category</label>
                    <select name="category" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                        @foreach($categories as $cat)
                        <option value="{{ $cat->value }}">{{ ucfirst(str_replace('_', ' ', $cat->value)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-full sm:w-32">
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Limit ($)</label>
                    <input type="number" name="monthly_limit" step="0.01" min="1" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                </div>
                <button type="submit" class="w-full sm:w-auto bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium hover:bg-blue-700">Add</button>
            </form>

            {{-- Budget Progress Bars --}}
            <div class="space-y-3">
                @forelse($budgetData as $b)
                <div class="bg-white rounded-lg shadow p-4">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm font-semibold text-gray-800">{{ $b['label'] }}</span>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">${{ number_format($b['spent'], 2) }} / ${{ number_format($b['limit'], 2) }}</span>
                            <form method="POST" action="{{ route('plan-learn.budget.destroy', $b['id']) }}">
                                @csrf @method('DELETE')
                                <button class="text-red-400 hover:text-red-600 text-xs">✕</button>
                            </form>
                        </div>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="h-3 rounded-full transition-all {{ $b['percent'] > 90 ? 'bg-red-500' : ($b['percent'] > 70 ? 'bg-yellow-500' : 'bg-green-500') }}" style="width: {{ $b['percent'] }}%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">{{ $b['percent'] }}% used</p>
                </div>
                @empty
                <div class="bg-white rounded-lg shadow p-6 text-center text-gray-400 text-sm">No budgets set yet. Add one above.</div>
                @endforelse
            </div>

            {{-- Budget Chart --}}
            @if(count($budgetData) > 0)
            <div class="bg-white rounded-lg shadow p-6 mt-4">
                <h4 class="text-sm font-semibold text-gray-800 mb-3">Budget vs Actual</h4>
                <div style="height: 250px;"><canvas id="budgetChart"></canvas></div>
            </div>
            @endif
        </div>

        {{-- Savings Goals Section --}}
        <div>
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Savings Goals</h3>

            {{-- Add Goal --}}
            <form method="POST" action="{{ route('plan-learn.savings.store') }}" class="bg-white rounded-lg shadow p-4 mb-4 space-y-3">
                @csrf
                <div class="flex flex-col sm:flex-row gap-3">
                    <div class="flex-1">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Goal Name</label>
                        <input type="text" name="name" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm" placeholder="Vacation fund">
                    </div>
                    <div class="w-full sm:w-32">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Target ($)</label>
                        <input type="number" name="target_amount" step="0.01" min="1" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row gap-3 sm:items-end">
                    <div class="flex-1">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Target Date (optional)</label>
                        <input type="date" name="target_date" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                    </div>
                    <button type="submit" class="w-full sm:w-auto bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium hover:bg-blue-700">Create</button>
                </div>
            </form>

            {{-- Goals Progress --}}
            <div class="space-y-3">
                @forelse($savingsGoals as $goal)
                @php $pct = $goal->progressPercent(); @endphp
                <div class="bg-white rounded-lg shadow p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <p class="font-semibold text-gray-800 text-sm">{{ $goal->name }}</p>
                            @if($goal->target_date)
                            <p class="text-xs text-gray-500">Target: {{ $goal->target_date->format('M d, Y') }}</p>
                            @endif
                        </div>
                        <form method="POST" action="{{ route('plan-learn.savings.destroy', $goal) }}">
                            @csrf @method('DELETE')
                            <button class="text-red-400 hover:text-red-600 text-xs">✕</button>
                        </form>
                    </div>

                    {{-- Progress Ring --}}
                    <div class="flex items-center gap-4">
                        <div class="relative w-16 h-16">
                            <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 36 36">
                                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"></path>
                                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="{{ $pct >= 100 ? '#10B981' : '#3B82F6' }}" stroke-width="3" stroke-dasharray="{{ $pct }}, 100"></path>
                            </svg>
                            <span class="absolute inset-0 flex items-center justify-center text-xs font-bold">{{ $pct }}%</span>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm">${{ number_format($goal->current_amount, 2) }} of ${{ number_format($goal->target_amount, 2) }}</p>
                            <form method="POST" action="{{ route('plan-learn.savings.update', $goal) }}" class="flex gap-2 mt-2">
                                @csrf @method('PUT')
                                <input type="number" name="current_amount" step="0.01" value="{{ $goal->current_amount }}" class="border border-gray-300 rounded px-2 py-1 text-xs w-28">
                                <button type="submit" class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-xs hover:bg-gray-300">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
                @empty
                <div class="bg-white rounded-lg shadow p-6 text-center text-gray-400 text-sm">No savings goals yet. Create one above.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

@if(count($budgetData) > 0)
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
new Chart(document.getElementById('budgetChart'), {
    type: 'bar',
    data: {
        labels: {!! json_encode(collect($budgetData)->pluck('label')->values()) !!},
        datasets: [
            { label: 'Budget', data: {!! json_encode(collect($budgetData)->pluck('limit')->values()) !!}, backgroundColor: 'rgba(59,130,246,0.5)', borderRadius: 6 },
            { label: 'Spent', data: {!! json_encode(collect($budgetData)->pluck('spent')->values()) !!}, backgroundColor: 'rgba(239,68,68,0.5)', borderRadius: 6 }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        scales: { x: { beginAtZero: true, ticks: { callback: v => '$' + v } } },
        plugins: { legend: { labels: { boxWidth: 12, padding: 12 } } }
    }
});
</script>
@endpush
@endif
</x-layouts.app>
