<x-app-layout>
    <!-- Header -->
    <div class="flex items-center mb-6">
        <a href="{{ route('budgets.index') }}" class="text-slate-400 hover:text-teal-600 mr-3 sm:mr-4 transition">
            <i class="fas fa-arrow-left text-lg sm:text-xl"></i>
        </a>
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Buat Anggaran</h2>
            <p class="text-slate-500 mt-1 text-sm">Tetapkan batas pengeluaran per kategori</p>
        </div>
    </div>

    <div class="w-full max-w-2xl">
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm">
            <form action="{{ route('budgets.store') }}" method="POST">
                @csrf

                <div class="space-y-4 sm:space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Kategori</label>
                        <select name="category_id" required
                                class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                            <option value="">Pilih kategori...</option>
                            @foreach($categories ?? [] as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Jumlah Anggaran</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-500">Rp</span>
                            <input type="number" name="amount" step="1" min="0"
                                   class="pl-12 w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500"
                                   value="{{ old('amount') }}" required placeholder="0">
                        </div>
                        @error('amount') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Periode</label>
                        <select name="period" required
                                class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                            <option value="weekly" {{ old('period') === 'weekly' ? 'selected' : '' }}>Mingguan</option>
                            <option value="monthly" {{ old('period', 'monthly') === 'monthly' ? 'selected' : '' }}>Bulanan</option>
                            <option value="quarterly" {{ old('period') === 'quarterly' ? 'selected' : '' }}>Triwulan</option>
                            <option value="yearly" {{ old('period') === 'yearly' ? 'selected' : '' }}>Tahunan</option>
                        </select>
                        @error('period') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Tanggal Mulai</label>
                            <input type="date" name="start_date" value="{{ old('start_date', now()->startOfMonth()->format('Y-m-d')) }}" required
                                   class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                            @error('start_date') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Tanggal Akhir (opsional)</label>
                            <input type="date" name="end_date" value="{{ old('end_date') }}"
                                   class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Ambang Peringatan (%)</label>
                        <input type="number" name="alert_threshold" value="{{ old('alert_threshold', 80) }}" min="1" max="100"
                               class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                        <p class="mt-1 text-xs text-slate-400">Dapatkan notifikasi saat pengeluaran mencapai persentase ini</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Catatan (opsional)</label>
                        <textarea name="notes" rows="2"
                                  class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500 placeholder-slate-400">{{ old('notes') }}</textarea>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="rollover" value="1"
                               class="rounded border-slate-300 text-teal-600 focus:ring-teal-500"
                               {{ old('rollover') ? 'checked' : '' }}>
                        <label class="ml-2 text-sm text-slate-700">
                            Lanjutkan anggaran yang tidak terpakai ke periode berikutnya
                        </label>
                    </div>
                </div>

                <div class="flex items-center justify-end space-x-4 mt-8 pt-6 border-t border-slate-100">
                    <a href="{{ route('budgets.index') }}" class="px-5 py-2.5 text-slate-600 hover:text-slate-800 font-medium rounded-xl transition">Batal</a>
                    <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                        <i class="fas fa-save mr-2"></i>Buat Anggaran
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
