<x-layouts.admin title="Edit Transaction | Admin Suite" activePage="admin-transactions">
<div class="space-y-8 max-w-3xl">
    <div class="flex items-center gap-4">
        <a href="{{ route('admin.transactions') }}" class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">arrow_back</a>
        <div>
            <h2 class="font-serif text-3xl text-on-surface">Edit Transaction</h2>
            <p class="text-on-surface-variant text-sm mt-1">{{ $transaction->reference }}</p>
        </div>
    </div>

    <div class="bg-surface-container-lowest p-8 space-y-4">
        <div class="flex items-center justify-between mb-6">
            <div>
                <p class="text-xs text-on-surface-variant uppercase tracking-widest font-label">Account Holder</p>
                <p class="text-sm font-semibold">{{ $transaction->account?->user?->first_name }} {{ $transaction->account?->user?->last_name }}</p>
                <p class="text-xs text-on-surface-variant">{{ $transaction->account?->account_number }}</p>
            </div>
            <div class="text-right">
                <p class="font-serif text-2xl font-bold {{ $transaction->type->value === 'credit' ? 'text-green-700' : 'text-on-surface' }}">
                    {{ $transaction->type->value === 'credit' ? '+' : '-' }}{{ $transaction->account?->currency?->symbol() ?? '$' }}{{ number_format($transaction->amount, 2) }}
                </p>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.transactions.update', $transaction) }}" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Type</label>
                    <select name="type" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        @foreach(\App\Enums\TransactionType::cases() as $type)
                            <option value="{{ $type->value }}" {{ $transaction->type->value === $type->value ? 'selected' : '' }}>{{ ucfirst($type->value) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Status</label>
                    <select name="status" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        @foreach(\App\Enums\TransactionStatus::cases() as $status)
                            <option value="{{ $status->value }}" {{ $transaction->status->value === $status->value ? 'selected' : '' }}>{{ ucfirst($status->value) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Category</label>
                    <select name="category" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        @foreach(\App\Enums\TransactionCategory::cases() as $cat)
                            <option value="{{ $cat->value }}" {{ $transaction->category->value === $cat->value ? 'selected' : '' }}>{{ ucfirst($cat->value) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Amount</label>
                    <input type="number" name="amount" step="0.01" min="0.01" value="{{ $transaction->amount }}"
                           class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                </div>
            </div>

            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Description</label>
                <input type="text" name="description" value="{{ $transaction->description }}"
                       class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
            </div>

            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Reference</label>
                <input type="text" name="reference" value="{{ $transaction->reference }}"
                       class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Balance After</label>
                    <input type="number" name="balance_after" step="0.01" value="{{ $transaction->balance_after }}"
                           class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Source</label>
                    <select name="source" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        @foreach(\App\Enums\TransactionSource::cases() as $src)
                            <option value="{{ $src->value }}" {{ $transaction->source->value === $src->value ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $src->value)) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="flex items-center gap-4 pt-4">
                <button type="submit" class="bg-primary text-on-primary px-8 py-3 rounded-md text-sm font-label font-medium hover:opacity-90 transition-colors">
                    Save Changes
                </button>
                <a href="{{ route('admin.transactions') }}" class="px-8 py-3 text-sm text-on-surface-variant hover:text-primary transition-colors">Cancel</a>
            </div>
        </form>
    </div>
</div>
</x-layouts.admin>
