<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin</p>
            <h2 class="text-2xl font-bold text-slate-950 dark:text-white">Edit {{ $gateway->name }}</h2>
        </div>
    </x-slot>

    <form method="POST" action="{{ route('admin.payment-gateways.update', $gateway) }}">
        @csrf
        @method('PATCH')

        <div class="grid gap-6 xl:grid-cols-[1fr_22rem]">
            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Credentials</p>
                <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">Gateway keys</h3>
                <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                    Leave secret fields blank to keep the existing encrypted values. Secret keys are never printed back into form inputs.
                </p>

                <div class="mt-6 grid gap-4 md:grid-cols-2">
                    <div>
                        <label for="status" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Status</label>
                        <select id="status" name="status" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                            <option value="inactive" @selected(old('status', $gateway->status) === 'inactive')>Disabled</option>
                            <option value="active" @selected(old('status', $gateway->status) === 'active')>Enabled</option>
                        </select>
                        @error('status') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="priority" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Gateway Priority</label>
                        <input id="priority" type="number" min="0" name="priority" value="{{ old('priority', $gateway->priority) }}" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                        @error('priority') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="public_key" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Public Key</label>
                        <input id="public_key" name="public_key" value="{{ old('public_key', $gateway->public_key) }}" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                        @error('public_key') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="secret_key" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Secret Key</label>
                        <input id="secret_key" name="secret_key" type="password" autocomplete="new-password" placeholder="{{ $maskedCredentials['secret_key'] }}" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                        @error('secret_key') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="webhook_secret" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Webhook Secret</label>
                        <input id="webhook_secret" name="webhook_secret" type="password" autocomplete="new-password" placeholder="{{ $maskedCredentials['webhook_secret'] }}" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                        @error('webhook_secret') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                    </div>
                </div>
            </section>

            <aside class="space-y-6">
                <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Mode</p>
                    <label class="mt-5 flex items-start gap-3 rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                        <input type="checkbox" name="is_test_mode" value="1" @checked(old('is_test_mode', $gateway->is_test_mode)) class="mt-1 rounded border-blue-200 text-blue-600 focus:ring-blue-500">
                        <span>
                            <span class="block text-sm font-bold text-slate-950 dark:text-white">Use test mode</span>
                            <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">Uncheck only when real live payment integration is ready.</span>
                        </span>
                    </label>
                </section>

                <section class="rounded-lg border border-blue-100 bg-blue-50/70 p-6 dark:border-blue-900/50 dark:bg-blue-950/30">
                    <p class="text-sm font-bold text-blue-700 dark:text-blue-200">Security note</p>
                    <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
                        Secret key and webhook secret are encrypted before saving. This page only shows masked placeholders.
                    </p>
                </section>
            </aside>
        </div>

        <div class="mt-6 flex flex-wrap gap-3">
            <button type="submit" class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Save Gateway</button>
            <a href="{{ route('admin.payment-gateways.index') }}" class="rounded-lg border border-blue-100 px-5 py-2.5 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Cancel</a>
        </div>
    </form>
</x-app-layout>
