<x-app-layout>
    <x-slot name="header">
        <div class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-sky-50 to-green-50 px-5 py-4">
            <h2 class="text-xl font-semibold leading-tight text-sky-900">
                {{ __('Add Payment Method') }}
            </h2>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
            <div class="overflow-hidden rounded-2xl border border-sky-200/70 bg-white shadow-sm">
                <div class="p-6">
                    <form action="{{ route('admin.payment-methods.store') }}" method="POST" class="space-y-6">
                        @csrf

                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700">{{ __('Payment Method Name') }}</label>
                            <input type="text" id="name" name="name" value="{{ old('name') }}"
                                class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('name') ? 'border-red-500' : 'border-sky-300' }}"
                                placeholder="e.g., Stripe Production, PayPal Development" required />
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="provider" class="block text-sm font-medium text-gray-700">{{ __('Provider') }}</label>
                            <select id="provider" name="provider" onchange="updateCredentialFields()"
                                class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('provider') ? 'border-red-500' : 'border-sky-300' }}"
                                required>
                                <option value="">{{ __('-- Select Provider --') }}</option>
                                @foreach ($providers as $provider)
                                    <option value="{{ $provider }}" {{ old('provider') === $provider ? 'selected' : '' }}>
                                        {{ ucfirst($provider) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('provider')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700">{{ __('Description') }}</label>
                            <textarea id="description" name="description" rows="2"
                                class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('description') ? 'border-red-500' : 'border-sky-300' }}"
                                placeholder="Notes about this payment method">{{ old('description') }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Credentials Section -->
                        <div id="credentials-section" class="border-t border-sky-100 pt-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ __('Credentials') }}</h3>
                            <div id="credentials-container" class="space-y-4">
                                <!-- Will be populated by JavaScript based on selected provider -->
                            </div>
                        </div>

                        <div class="flex items-center">
                            <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                                class="rounded border-sky-300 text-sky-600 shadow-sm focus:border-sky-400 focus:ring focus:ring-sky-200 focus:ring-opacity-50" />
                            <label for="is_active" class="ml-2 text-sm text-gray-700">{{ __('Active') }}</label>
                        </div>

                        <div class="flex gap-4">
                            <button type="submit"
                                class="rounded bg-sky-600 px-4 py-2 font-semibold text-white transition hover:bg-sky-700">
                                {{ __('Add Payment Method') }}
                            </button>
                            <a href="{{ route('admin.payment-methods.index') }}"
                                class="rounded bg-gray-600 px-4 py-2 font-semibold text-white transition hover:bg-gray-700">
                                {{ __('Cancel') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Helper text -->
            <div class="mt-8 rounded-2xl border border-sky-200 bg-sky-50 p-6">
                <h3 class="mb-2 font-semibold text-sky-900">{{ __('Getting API Credentials') }}</h3>

                <div class="space-y-3 text-sm text-sky-800">
                    <div>
                        <strong>Stripe:</strong>
                        <p>Visit <a href="https://dashboard.stripe.com/apikeys" target="_blank" class="underline">Stripe Dashboard</a>, find your Secret API Key under "API Keys"</p>
                    </div>
                    <div>
                        <strong>PayPal:</strong>
                        <p>Go to <a href="https://developer.paypal.com/" target="_blank" class="underline">PayPal Developer</a>, create an app, and copy the Client ID and Secret</p>
                    </div>
                    <div>
                        <strong>Wise (formerly TransferWise):</strong>
                        <p>Visit <a href="https://wise.com/app/settings/api" target="_blank" class="underline">Wise API Settings</a> and create an API token</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const credentialFields = {
            stripe: [
                { key: 'api_key', label: 'Secret API Key', type: 'password' }
            ],
            paypal: [
                { key: 'client_id', label: 'Client ID', type: 'password' },
                { key: 'client_secret', label: 'Client Secret', type: 'password' }
            ],
            wise: [
                { key: 'api_token', label: 'API Token', type: 'password' }
            ]
        };

        function updateCredentialFields() {
            const provider = document.getElementById('provider').value;
            const container = document.getElementById('credentials-container');
            container.innerHTML = '';

            if (provider && credentialFields[provider]) {
                credentialFields[provider].forEach((field, index) => {
                    const fieldHtml = `
                        <div>
                            <label class="block text-sm font-medium text-gray-700">{{ __('Credentials') }}: ${field.label}</label>
                            <input type="${field.type}" name="credentials[${index}][key]" value="${field.key}"
                                class="hidden" />
                            <input type="${field.type}" name="credentials[${index}][value]"
                                class="mt-1 block w-full rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500"
                                placeholder="${field.label}" required />
                        </div>
                    `;
                    container.insertAdjacentHTML('beforeend', fieldHtml);
                });
            }
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', updateCredentialFields);
    </script>
</x-app-layout>
