@extends('layouts.app')

@section('title', 'Edit Payment Account')

@section('content')
@can('edit_payment_accounts')
<div class="mb-8">
    <h1 class="text-3xl font-bold" style="color: #0a1628;">Edit Payment Account</h1>
    <a href="{{ route('payment-accounts.index') }}" class="text-sm font-medium mt-1 inline-flex items-center gap-1.5" style="color: #2563eb;">
        <i class="fas fa-arrow-left text-xs"></i> Back to Payment Accounts
    </a>
</div>

<div class="rounded-2xl border p-6 max-w-2xl shadow-sm" style="border-color: #e2e8f0; background: #ffffff;">
    <form method="POST" action="{{ route('payment-accounts.update', $paymentAccount) }}">
        @csrf @method('PUT')
        <div class="space-y-5">
            <div>
                <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Payment Method <span class="text-red-500">*</span></label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-credit-card text-sm"></i></span>
                    <select name="payment_method_id" required
                        class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                        @foreach($methods as $method)
                            <option value="{{ $method->id }}" {{ old('payment_method_id', $paymentAccount->payment_method_id) == $method->id ? 'selected' : '' }}>{{ $method->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Account Name <span class="text-red-500">*</span></label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-tag text-sm"></i></span>
                    <input type="text" name="name" value="{{ old('name', $paymentAccount->name) }}" required
                        class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Account Number</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-hashtag text-sm"></i></span>
                        <input type="text" name="account_number" value="{{ old('account_number', $paymentAccount->account_number) }}"
                            class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Account Holder</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-user text-sm"></i></span>
                        <input type="text" name="account_holder" value="{{ old('account_holder', $paymentAccount->account_holder) }}"
                            class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">System Branch <span class="text-red-500">*</span></label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-building-columns text-sm"></i></span>
                    <select name="branch_id"
                        class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                        <option value="">Select Branch</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ old('branch_id', $paymentAccount->branch_id) == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Default Account</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-star text-sm"></i></span>
                    <select name="is_default"
                        class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                        <option value="1" {{ old('is_default', $paymentAccount->is_default) ? 'selected' : '' }}>Yes - Default for this method</option>
                        <option value="0" {{ !old('is_default', $paymentAccount->is_default) ? 'selected' : '' }}>No</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Description</label>
                <div class="relative">
                    <span class="absolute left-3 top-3" style="color: #94a3b8;"><i class="fas fa-align-left text-sm"></i></span>
                    <textarea name="description" rows="2"
                        class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">{{ old('description', $paymentAccount->description) }}</textarea>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1.5" style="color: #1e3a5f;">Status</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: #94a3b8;"><i class="fas fa-toggle-on text-sm"></i></span>
                    <select name="is_active"
                        class="w-full rounded-xl border pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all" style="border-color: #e2e8f0;">
                        <option value="1" {{ old('is_active', $paymentAccount->is_active) ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ !old('is_active', $paymentAccount->is_active) ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="mt-6 flex justify-end gap-3 pt-5 border-t" style="border-color: #e2e8f0;">
            <a href="{{ route('payment-accounts.index') }}" class="px-5 py-2.5 text-sm border rounded-xl hover:bg-gray-50 transition-colors font-medium" style="border-color: #e2e8f0; color: #475569;">Cancel</a>
            <button type="submit" class="text-white px-5 py-2.5 rounded-xl text-sm font-medium flex items-center gap-2 transition-all hover:shadow-lg" style="background: linear-gradient(135deg, #2563eb, #4f46e5);">
                <i class="fas fa-save"></i> Update Account
            </button>
        </div>
    </form>
</div>
@endcan
@endsection