<x-app-layout>
    <!-- Header -->
    <div class="flex items-center mb-6">
        <a href="{{ route('accounts.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 Akun Baru</h2>
            <p class="text-slate-500 mt-1 text-sm">Buat rekening, dompet, atau kartu kredit</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('accounts.store') }}" method="POST">
                @csrf

                <div class="space-y-6">
                    <!-- Account Name -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-slate-700 mb-2">Nama Akun</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required autofocus
                               placeholder="contoh: BCA Tabungan, Dompet Tunai"
                               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">
                        @error('name') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <!-- Account Type -->
                    <div>
                        <label for="type" class="block text-sm font-medium text-slate-700 mb-2">Tipe Akun</label>
                        <select id="type" name="type" 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 tipe...</option>
                            @foreach($accountTypes ?? [] as $value => $label)
                                <option value="{{ $value }}" {{ old('type') === $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('type') <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">
                        <!-- Currency -->
                        <div>
                            <label for="currency_id" class="block text-sm font-medium text-slate-700 mb-2">Mata Uang</label>
                            <select id="currency_id" name="currency_id" required
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                @foreach($currencies ?? [] as $currency)
                                    <option value="{{ $currency->id }}" {{ old('currency_id', $defaultCurrency?->id ?? '') == $currency->id ? 'selected' : '' }}>
                                        {{ $currency->code }} - {{ $currency->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('currency_id') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                        </div>

                        <!-- Initial Balance -->
                        <div>
                            <label for="initial_balance" class="block text-sm font-medium text-slate-700 mb-2">Saldo Awal</label>
                            <input type="number" id="initial_balance" name="initial_balance" step="1" value="{{ old('initial_balance', 0) }}" required
                                   class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                            @error('initial_balance') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <!-- Credit Card Specific Fields -->
                    <div id="creditCardFields" class="hidden space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                            <div>
                                <label for="credit_limit" class="block text-sm font-medium text-slate-700 mb-2">Limit Kredit</label>
                                <input type="number" id="credit_limit" name="credit_limit" step="1" value="{{ old('credit_limit') }}"
                                       class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                            </div>
                            <div>
                                <label for="interest_rate" class="block text-sm font-medium text-slate-700 mb-2">Suku Bunga (%)</label>
                                <input type="number" id="interest_rate" name="interest_rate" step="0.01" value="{{ old('interest_rate') }}"
                                       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>

                    <!-- Bank Name -->
                    <div>
                        <label for="bank_name" class="block text-sm font-medium text-slate-700 mb-2">Nama Bank/Institusi (Opsional)</label>
                        <input type="text" id="bank_name" name="bank_name" value="{{ old('bank_name') }}"
                               placeholder="contoh: Bank Central Asia"
                               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>

                    <!-- Icon & Color -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <label for="icon" class="block text-sm font-medium text-slate-700 mb-2">Icon</label>
                            <select id="icon" name="icon"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                <option value="wallet" {{ old('icon') === 'wallet' ? 'selected' : '' }}>💳 Wallet</option>
                                <option value="university" {{ old('icon') === 'university' ? 'selected' : '' }}>🏦 Bank</option>
                                <option value="credit-card" {{ old('icon') === 'credit-card' ? 'selected' : '' }}>💳 Credit Card</option>
                                <option value="piggy-bank" {{ old('icon') === 'piggy-bank' ? 'selected' : '' }}>🐷 Tabungan</option>
                                <option value="coins" {{ old('icon') === 'coins' ? 'selected' : '' }}>🪙 Koin</option>
                                <option value="money-bill" {{ old('icon') === 'money-bill' ? 'selected' : '' }}>💵 Uang</option>
                            </select>
                        </div>
                        <div>
                            <label for="color" class="block text-sm font-medium text-slate-700 mb-2">Warna</label>
                            <input type="color" id="color" name="color" value="{{ old('color', '#14b8a6') }}"
                                   class="w-full h-11 bg-slate-50 border-slate-200 rounded-xl cursor-pointer">
                        </div>
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-slate-700 mb-2">Catatan (Opsional)</label>
                        <textarea id="description" name="description" rows="3"
                                  placeholder="Tambahkan catatan tentang akun ini..."
                                  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('description') }}</textarea>
                    </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('accounts.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 Akun
                    </button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        document.getElementById('type').addEventListener('change', function() {
            const creditCardFields = document.getElementById('creditCardFields');
            if (this.value === 'credit_card') {
                creditCardFields.classList.remove('hidden');
            } else {
                creditCardFields.classList.add('hidden');
            }
        });
    </script>
    @endpush
</x-app-layout>
