<x-app-layout>
    <!-- Header -->
    <div class="flex items-center mb-6">
        <a href="{{ route('transactions.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">Tambah Transaksi</h2>
            <p class="text-slate-500 mt-1 text-sm">Catat pemasukan atau pengeluaran baru</p>
        </div>
    </div>

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

                <!-- Transaction Type Tabs -->
                <div class="flex rounded-xl bg-slate-100 p-1 mb-6">
                    <button type="button"
                            @click="type = 'expense'"
                            :class="type === 'expense' ? 'bg-white text-rose-600 shadow-md' : 'text-slate-500'"
                            class="flex-1 py-2.5 sm:py-3 text-xs sm:text-sm font-semibold rounded-lg transition">
                        <i class="fas fa-arrow-up mr-1 sm:mr-2"></i>Pengeluaran
                    </button>
                    <button type="button"
                            @click="type = 'income'"
                            :class="type === 'income' ? 'bg-white text-emerald-600 shadow-md' : 'text-slate-500'"
                            class="flex-1 py-2.5 sm:py-3 text-xs sm:text-sm font-semibold rounded-lg transition">
                        <i class="fas fa-arrow-down mr-1 sm:mr-2"></i>Pemasukan
                    </button>
                </div>
                <input type="hidden" name="type" x-model="type">

                <div class="space-y-4 sm:space-y-6">
                    <!-- Amount -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Jumlah</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-400 text-lg sm:text-xl">Rp</span>
                            <input type="number" name="amount" id="amount" step="1" min="0"
                                   class="pl-12 block w-full text-xl sm:text-2xl font-bold rounded-xl bg-slate-50 border-slate-200 focus:border-teal-500 focus:ring-teal-500"
                                   :class="type === 'income' ? 'text-emerald-600' : 'text-rose-600'"
                                   value="{{ old('amount') }}" required autofocus
                                   placeholder="0">
                        </div>
                        @error('amount') <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 sm:gap-6">
                        <!-- Account -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Akun</label>
                            <select name="account_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 akun...</option>
                                @foreach($accounts ?? [] as $account)
                                    <option value="{{ $account->id }}" {{ old('account_id', request('account_id')) == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }} (Rp {{ number_format($account->current_balance ?? 0, 0, ',', '.') }})
                                    </option>
                                @endforeach
                            </select>
                            @error('account_id') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                        </div>

                        <!-- Date -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Tanggal</label>
                            <input type="date" name="date" value="{{ old('date', now()->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('date') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <!-- Time -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Waktu</label>
                        <input type="time" name="time" value="{{ old('time', now()->format('H:i')) }}" step="1"
                               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">Format: Jam:Menit:Detik (opsional, default waktu saat ini)</p>
                        @error('time') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <!-- Category -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Kategori</label>
                        <select name="category_id"
                                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)
                                @if(($category->type ?? 'expense') === 'both' || ($category->type ?? 'expense') === old('type', 'expense'))
                                    <option value="{{ $category->id }}"
                                            data-type="{{ $category->type ?? 'expense' }}"
                                            {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                    @foreach($category->children ?? [] as $child)
                                        <option value="{{ $child->id }}"
                                                data-type="{{ $child->type ?? 'expense' }}"
                                                {{ old('category_id') == $child->id ? 'selected' : '' }}>
                                            &nbsp;&nbsp;&nbsp;↳ {{ $child->name }}
                                        </option>
                                    @endforeach
                                @endif
                            @endforeach
                        </select>
                        @error('category_id') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Keterangan (Opsional)</label>
                        <input type="text" name="description" value="{{ old('description') }}"
                               placeholder="Contoh: Makan siang di warung"
                               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">
                    </div>

                    <!-- Notes -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Catatan (Opsional)</label>
                        <textarea name="notes" rows="3"
                                  placeholder="Tambahkan catatan..."
                                  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>

                    <!-- Attachment -->
                    <div x-data="{ preview: null }">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Lampiran Gambar (Opsional)</label>
                        <div class="flex items-center space-x-4">
                            <label class="flex-1 relative cursor-pointer">
                                <div class="flex items-center justify-center px-4 py-4 bg-slate-50 border-2 border-dashed border-slate-200 rounded-xl hover:border-teal-400 transition">
                                    <div class="text-center">
                                        <i class="fas fa-cloud-upload-alt text-2xl text-slate-400 mb-2"></i>
                                        <p class="text-sm text-slate-500">Klik untuk upload gambar</p>
                                        <p class="text-xs text-slate-400 mt-1">JPG, PNG, GIF, WebP (Maks 5MB)</p>
                                    </div>
                                </div>
                                <input type="file" name="attachment" accept="image/*" class="sr-only"
                                       @change="preview = URL.createObjectURL($event.target.files[0])">
                            </label>
                            <template x-if="preview">
                                <div class="relative">
                                    <img :src="preview" class="w-24 h-24 object-cover rounded-xl border border-slate-200">
                                    <button type="button" @click="preview = null; $refs.attachment.value = ''"
                                            class="absolute -top-2 -right-2 w-6 h-6 bg-rose-500 text-white rounded-full text-xs flex items-center justify-center hover:bg-rose-600">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </template>
                        </div>
                        @error('attachment') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-end space-x-4 mt-8 pt-6 border-t border-slate-100">
                    <a href="{{ route('transactions.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>
                        Simpan Transaksi
                    </button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        function transactionForm() {
            return {
                type: '{{ old('type', 'expense') }}'
            }
        }
    </script>
    @endpush
</x-app-layout>
