<x-app-layout>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Anggaran</h2>
            <p class="text-slate-500 mt-1 text-sm">Atur batas pengeluaran per kategori</p>
        </div>
        <a href="{{ route('budgets.create') }}" class="mt-3 sm:mt-0 inline-flex items-center justify-center w-full sm:w-auto px-5 py-2.5 bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white text-sm font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
            <i class="fas fa-plus mr-2"></i>
            Buat Anggaran
        </a>
    </div>

    <!-- Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mb-6">
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Total Anggaran</p>
                    <p class="text-lg sm:text-2xl font-bold text-teal-600 mt-1">Rp {{ number_format($totalBudgeted ?? 0, 0, ',', '.') }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-teal-500 to-emerald-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-calculator text-white text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Total Terpakai</p>
                    <p class="text-lg sm:text-2xl font-bold text-rose-500 mt-1">Rp {{ number_format($totalSpent ?? 0, 0, ',', '.') }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-rose-500 to-pink-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-receipt text-white text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Sisa</p>
                    <p class="text-lg sm:text-2xl font-bold text-emerald-500 mt-1">Rp {{ number_format($totalRemaining ?? 0, 0, ',', '.') }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-piggy-bank text-white text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Budget Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
        @forelse($budgets ?? [] as $budget)
            @php
                $percentage = $budget->amount > 0 ? ($budget->spent_amount / $budget->amount) * 100 : 0;
                $status = $percentage >= 100 ? 'exceeded' : ($percentage >= 80 ? 'warning' : 'on_track');
            @endphp
            <a href="{{ route('budgets.edit', $budget) }}" class="block group">
                <div class="bg-white border border-slate-100 hover:border-teal-300 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                                 style="background-color: {{ $budget->category?->color ?? '#14b8a6' }}15; color: {{ $budget->category?->color ?? '#14b8a6' }};">
                                <i class="fas fa-{{ $budget->category?->icon ?? 'tag' }}"></i>
                            </div>
                            <div class="ml-3">
                                <h4 class="font-semibold text-slate-800 group-hover:text-teal-600 transition">{{ $budget->category?->name ?? 'Kategori' }}</h4>
                                <p class="text-xs text-slate-400">{{ ucfirst($budget->period ?? 'bulanan') }}</p>
                            </div>
                        </div>
                        <span class="px-2 py-1 rounded-lg text-xs font-medium {{ $status === 'exceeded' ? 'bg-rose-100 text-rose-600' : ($status === 'warning' ? 'bg-amber-100 text-amber-600' : 'bg-emerald-100 text-emerald-600') }}">
                            {{ $status === 'exceeded' ? 'Melebihi' : ($status === 'warning' ? 'Hampir' : 'Aman') }}
                        </span>
                    </div>

                    <div class="w-full h-2 bg-slate-100 rounded-full overflow-hidden mb-3">
                        <div class="h-full rounded-full transition-all {{ $status === 'exceeded' ? 'bg-rose-500' : ($status === 'warning' ? 'bg-amber-500' : 'bg-emerald-500') }}"
                             style="width: {{ min($percentage, 100) }}%"></div>
                    </div>

                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">
                            Rp {{ number_format($budget->spent_amount ?? 0, 0, ',', '.') }} terpakai
                        </span>
                        <span class="font-medium text-slate-800">
                            Rp {{ number_format($budget->amount, 0, ',', '.') }}
                        </span>
                    </div>

                    <p class="text-xs text-slate-400 mt-2">
                        Sisa Rp {{ number_format(max(0, $budget->amount - ($budget->spent_amount ?? 0)), 0, ',', '.') }}
                    </p>
                </div>
            </a>
        @empty
            <div class="col-span-1 sm:col-span-2 lg:col-span-3 bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-8 sm:p-12 text-center shadow-sm">
                <div class="w-16 h-16 sm:w-20 sm:h-20 bg-slate-100 rounded-xl sm:rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-calculator text-2xl sm:text-3xl text-slate-400"></i>
                </div>
                <h3 class="text-lg sm:text-xl font-bold text-slate-800 mb-2">Belum Ada Anggaran</h3>
                <p class="text-sm sm:text-base text-slate-500 mb-6">Buat anggaran pertama Anda untuk mengontrol pengeluaran.</p>
                <a href="{{ route('budgets.create') }}" class="inline-flex items-center justify-center w-full sm:w-auto px-5 sm:px-6 py-2.5 sm:py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white text-sm font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                    <i class="fas fa-plus mr-2"></i>
                    Buat Anggaran
                </a>
            </div>
        @endforelse
    </div>
</x-app-layout>
