<x-layouts.admin title="Create Payment Method | Admin Suite" activePage="admin-payment-methods">
<div class="w-full">
    <div class="flex items-center gap-4 mb-10">
        <a href="{{ route('admin.payment-methods.index') }}" 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">Create Payment Method</h2>
            <p class="text-on-surface-variant text-sm mt-1">Add a new deposit payment method for users.</p>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.payment-methods.store') }}" class="space-y-8">
        @csrf

        <div class="bg-surface-container-lowest p-8 space-y-6">
            <div>
                <label class="block text-xs font-label uppercase tracking-widest text-on-surface-variant mb-2">Method Name</label>
                <input type="text" name="name" value="{{ old('name') }}"
                       class="w-full bg-surface-container-high border-none rounded-md px-4 py-3 text-sm focus:ring-2 focus:ring-secondary transition-all"
                       placeholder="e.g. Bank Wire Transfer">
                @error('name')<p class="text-xs text-error mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-xs font-label uppercase tracking-widest text-on-surface-variant mb-2">Type</label>
                <select name="type" class="w-full bg-surface-container-high border-none rounded-md px-4 py-3 text-sm focus:ring-2 focus:ring-secondary transition-all">
                    @foreach(\App\Enums\PaymentMethodType::cases() as $type)
                        <option value="{{ $type->value }}" {{ old('type') === $type->value ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $type->value)) }}</option>
                    @endforeach
                </select>
                @error('type')<p class="text-xs text-error mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-xs font-label uppercase tracking-widest text-on-surface-variant mb-2">Instructions</label>
                <textarea name="instructions" rows="4"
                          class="w-full bg-surface-container-high border-none rounded-md px-4 py-3 text-sm focus:ring-2 focus:ring-secondary transition-all"
                          placeholder="Provide detailed instructions for users...">{{ old('instructions') }}</textarea>
                @error('instructions')<p class="text-xs text-error mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-xs font-label uppercase tracking-widest text-on-surface-variant mb-2">Details</label>
                <p class="text-xs text-on-surface-variant mb-3">Add key-value pairs for this payment method (e.g. Bank Name, Account Number, Routing Number).</p>

                <div x-data="{
                    rows: {{ json_encode(old('detail_keys') ? collect(old('detail_keys'))->map(fn($k, $i) => ['key' => $k, 'value' => old('detail_values')[$i] ?? ''])->values()->all() : [['key' => '', 'value' => '']]) }}
                }">
                    <div class="space-y-3">
                        <template x-for="(row, index) in rows" :key="index">
                            <div class="flex items-center gap-3">
                                <input type="text" x-bind:name="'detail_keys[' + index + ']'" x-model="row.key"
                                       class="flex-1 bg-surface-container-high border-none rounded-md px-4 py-2.5 text-sm focus:ring-2 focus:ring-secondary"
                                       placeholder="Label (e.g. Bank Name)">
                                <input type="text" x-bind:name="'detail_values[' + index + ']'" x-model="row.value"
                                       class="flex-1 bg-surface-container-high border-none rounded-md px-4 py-2.5 text-sm focus:ring-2 focus:ring-secondary"
                                       placeholder="Value (e.g. Chase Bank)">
                                <button type="button" @click="rows.splice(index, 1)" x-show="rows.length > 1"
                                        class="p-2 text-error hover:bg-error-container rounded-md transition-colors">
                                    <span class="material-symbols-outlined text-sm">close</span>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="rows.push({key: '', value: ''})"
                            class="mt-3 flex items-center gap-1 text-xs font-medium text-secondary hover:text-primary transition-colors">
                        <span class="material-symbols-outlined text-sm">add</span> Add Field
                    </button>
                </div>
                @error('details')<p class="text-xs text-error mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="flex items-center justify-between py-4 border-t border-surface-container">
                <div>
                    <h4 class="font-label text-sm font-bold text-on-surface">Active</h4>
                    <p class="text-xs text-on-surface-variant">Make this method available to users</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" class="sr-only peer" {{ old('is_active', true) ? 'checked' : '' }}>
                    <div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
                </label>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-8 py-3 rounded-md text-sm font-label font-medium flex items-center gap-2">
                <span class="material-symbols-outlined text-sm">add</span>
                Create Payment Method
            </button>
        </div>
    </form>
</div>
</x-layouts.admin>
