<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center gap-3">
            <a href="{{ route('transactions.index') }}" class="p-2 hover:bg-gray-100 rounded-xl transition text-gray-500 hover:text-gray-800">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <h2 class="font-bold text-2xl text-gray-800 leading-tight">
                {{ __('Catat Transaksi Baru') }}
            </h2>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <div class="bg-white rounded-2xl shadow-sm border border-gray-150 p-6 md:p-8 space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-gray-800">Detail Transaksi</h3>
                    <p class="text-xs text-gray-400 font-medium">Lengkapi formulir di bawah ini untuk mencatat pemasukan atau pengeluaran keuangan keluarga.</p>
                </div>

                <form action="{{ route('transactions.store') }}" method="POST" class="space-y-5">
                    @csrf

                    <!-- Pilihan Kategori -->
                    <div>
                        <label for="category_id" class="block text-sm font-semibold text-gray-700 mb-2">Kategori Keuangan</label>
                        <select name="category_id" id="category_id" class="w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 @error('category_id') border-red-300 focus:border-red-500 focus:ring-red-500 @enderror">
                            <option value="">-- Pilih Kategori --</option>
                            <optgroup label="Pemasukan">
                                @foreach($categories->where('type', 'pemasukan') as $cat)
                                    <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                                        💵 {{ $cat->name }}
                                    </option>
                                @endforeach
                            </optgroup>
                            <optgroup label="Pengeluaran">
                                @foreach($categories->where('type', 'pengeluaran') as $cat)
                                    <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                                        💸 {{ $cat->name }}
                                    </option>
                                @endforeach
                            </optgroup>
                        </select>
                        @error('category_id')
                            <p class="text-xs text-red-600 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Jumlah Uang / Nominal -->
                    <div>
                        <label for="amount" class="block text-sm font-semibold text-gray-700 mb-2">Nominal / Jumlah (Rupiah)</label>
                        <div class="relative rounded-xl shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="text-gray-400 font-bold text-sm">Rp</span>
                            </div>
                            <input type="number" name="amount" id="amount" value="{{ old('amount') }}" placeholder="Contoh: 50000" class="pl-10 w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 @error('amount') border-red-300 focus:border-red-500 focus:ring-red-500 @enderror">
                        </div>
                        @error('amount')
                            <p class="text-xs text-red-600 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Tanggal Transaksi -->
                    <div>
                        <label for="date" class="block text-sm font-semibold text-gray-700 mb-2">Tanggal Transaksi</label>
                        <input type="date" name="date" id="date" value="{{ old('date', date('Y-m-d')) }}" class="w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 @error('date') border-red-300 focus:border-red-500 focus:ring-red-500 @enderror">
                        @error('date')
                            <p class="text-xs text-red-600 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Deskripsi / Keterangan -->
                    <div>
                        <label for="description" class="block text-sm font-semibold text-gray-700 mb-2">Keterangan / Deskripsi (Opsional)</label>
                        <textarea name="description" id="description" rows="3" placeholder="Contoh: Makan siang bersama keluarga di restoran" class="w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 @error('description') border-red-300 focus:border-red-500 focus:ring-red-500 @enderror">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="text-xs text-red-600 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Tombol Submit -->
                    <div class="flex justify-end gap-2 pt-4 border-t border-gray-100">
                        <a href="{{ route('transactions.index') }}" class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition duration-150">
                            Batal
                        </a>
                        <button type="submit" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl shadow-md transition duration-150 flex items-center gap-1.5">
                            <i data-lucide="check" class="w-4 h-4"></i>
                            Simpan Transaksi
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</x-app-layout>
