<x-app-layout>
    <a href="{{ route('custom-accounts.show', $customAccount) }}" class="inline-flex items-center gap-1.5 text-slate-600 hover:text-slate-900 text-sm font-medium mb-3 transition duration-150">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
        Back to Profile
    </a>

    <div class="max-w-2xl mx-auto">
        <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 md:p-7">
            <div class="flex items-center gap-3 mb-6 pb-4 border-b border-slate-200">
                <div class="w-12 h-12 rounded-xl bg-brand-600 text-white flex items-center justify-center font-bold text-lg uppercase shadow-sm">
                    {{ substr($customAccount->name, 0, 1) }}{{ substr($customAccount->name, -1, 1) }}
                </div>
                <div>
                    <h2 class="text-lg font-bold text-slate-800">Edit Account</h2>
                    <p class="text-xs text-slate-500">{{ $customAccount->name }}</p>
                </div>
            </div>

            <form action="{{ route('custom-accounts.update', $customAccount) }}" method="POST" class="space-y-5">
                @csrf
                @method('PUT')

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1.5">Account Name *</label>
                    <input type="text" name="name" value="{{ old('name', $customAccount->name) }}" required
                        class="w-full py-2.5 px-4 bg-white border border-slate-300 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 rounded-xl text-slate-800 focus:outline-none transition duration-150 text-sm">
                    @error('name') <p class="text-xs text-rose-500 mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1.5">Email</label>
                    <input type="email" name="email" value="{{ old('email', $customAccount->email) }}"
                        class="w-full py-2.5 px-4 bg-white border border-slate-300 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 rounded-xl text-slate-800 focus:outline-none transition duration-150 text-sm">
                    @error('email') <p class="text-xs text-rose-500 mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1.5">Account *</label>
                    <select name="account_type" required
                        class="w-full py-2.5 px-4 bg-white border border-slate-300 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 rounded-xl text-slate-800 focus:outline-none transition duration-150 text-sm">
                        <option value="">Select Account</option>
                        <option value="Personal" {{ old('account_type', $customAccount->account_type) == 'Personal' ? 'selected' : '' }}>Personal</option>
                        <option value="Business" {{ old('account_type', $customAccount->account_type) == 'Business' ? 'selected' : '' }}>Business</option>
                    </select>
                    @error('account_type') <p class="text-xs text-rose-500 mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1.5">Opening Balance</label>
                    <input type="number" step="0.01" name="opening_balance" value="{{ old('opening_balance', $customAccount->opening_balance) }}"
                        class="w-full py-2.5 px-4 bg-white border border-slate-300 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 rounded-xl text-slate-800 focus:outline-none transition duration-150 text-sm">
                    @error('opening_balance') <p class="text-xs text-rose-500 mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1.5">Notes</label>
                    <textarea name="notes" rows="3" class="w-full py-2.5 px-4 bg-white border border-slate-300 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 rounded-xl text-slate-800 focus:outline-none transition duration-150 text-sm">{{ old('notes', $customAccount->notes) }}</textarea>
                </div>

                <div class="flex justify-end gap-3 pt-2">
                    <a href="{{ route('custom-accounts.show', $customAccount) }}" class="py-2.5 px-5 bg-black hover:bg-slate-800 text-white text-sm rounded-xl transition duration-150">Cancel</a>
                    <button type="submit" class="py-2.5 px-5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition duration-150">Update Account</button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>