<x-app-layout>
    <x-module-hero
        title="{{ $isEdit ? 'Edit Payment Configuration' : 'Configure Payment API' }}"
        description="{{ $isEdit ? 'Update your MTN MoMo API credentials' : 'Set up your MTN MoMo API credentials for payment operations' }}"
        icon="fa-credit-card">
        <x-slot name="backButton">
            <a href="{{ route('config.payment.index') }}"
               class="inline-flex items-center gap-1 text-white/80 hover:text-white text-sm transition-colors">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
        </x-slot>
        <x-slot name="tabs">
            <a href="{{ route('config.payment.index') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            @can('create payment configuration')
            <a href="{{ route('config.payment.create') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.create') || request()->routeIs('config.payment.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plus"></i> Configure
            </a>
            @endcan
            @can('test payment connection')
            <a href="{{ route('config.payment.test-interface') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.test-interface') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plug"></i> Test Connection
            </a>
            @endcan
            @can('view payment logs')
            <a href="{{ route('config.payment.logs') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.logs') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-history"></i> API Logs
            </a>
            @endcan
            <a href="{{ route('config.payment.documentation') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.documentation') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-book"></i> Documentation
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
            </div>
        @endif
        @if($errors->any())
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <div class="flex items-center mb-2">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <span class="font-semibold text-sm">Please fix the following errors:</span>
                </div>
                <ul class="list-disc list-inside ml-4 text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <form method="POST"
              action="{{ $isEdit ? route('config.payment.update') : route('config.payment.store') }}">
            @csrf
            @if($isEdit)
                @method('PUT')
            @endif

            {{-- Environment Selection --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="bg-gradient-to-r from-gray-700 to-gray-800 px-6 py-4">
                    <h2 class="text-base font-semibold text-white flex items-center gap-2">
                        <i class="fas fa-server"></i> Environment & Currency Settings
                    </h2>
                    <p class="text-gray-300 text-xs mt-0.5">Select the API environment and payment currency</p>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <label class="border-2 rounded-lg p-4 cursor-pointer transition
                            {{ old('environment', $configuration?->environment ?? 'sandbox') === 'sandbox' ? 'border-yellow-500 bg-yellow-50' : 'border-gray-200 hover:border-yellow-300' }}">
                            <input type="radio" name="environment" value="sandbox"
                                   class="sr-only"
                                   {{ old('environment', $configuration?->environment ?? 'sandbox') === 'sandbox' ? 'checked' : '' }}>
                            <div class="flex items-center gap-3">
                                <i class="fas fa-flask text-2xl {{ old('environment', $configuration?->environment ?? 'sandbox') === 'sandbox' ? 'text-yellow-500' : 'text-gray-400' }}"></i>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Sandbox</p>
                                    <p class="text-xs text-gray-500">For testing and development</p>
                                </div>
                            </div>
                        </label>
                        <label class="border-2 rounded-lg p-4 cursor-pointer transition
                            {{ old('environment', $configuration?->environment ?? 'sandbox') === 'production' ? 'border-green-500 bg-green-50' : 'border-gray-200 hover:border-green-300' }}">
                            <input type="radio" name="environment" value="production"
                                   class="sr-only"
                                   {{ old('environment', $configuration?->environment ?? 'sandbox') === 'production' ? 'checked' : '' }}>
                            <div class="flex items-center gap-3">
                                <i class="fas fa-server text-2xl {{ old('environment', $configuration?->environment ?? 'sandbox') === 'production' ? 'text-green-500' : 'text-gray-400' }}"></i>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Production</p>
                                    <p class="text-xs text-gray-500">Live environment — use with caution</p>
                                </div>
                            </div>
                        </label>
                    </div>
                    @error('environment')<p class="mt-2 text-xs text-red-600">{{ $message }}</p>@enderror

                    {{-- Currency Selection --}}
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-coins text-yellow-500 mr-1"></i> Payment Currency
                        </label>
                        <p class="text-xs text-gray-500 mb-3">Select the currency for all payment transactions. SSP is the official ISO 4217 code for the South Sudanese Pound.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <label class="border-2 rounded-lg p-3 cursor-pointer transition
                                {{ old('currency', $configuration?->currency ?? 'SSP') === 'SSP' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300' }}">
                                <input type="radio" name="currency" value="SSP"
                                       class="sr-only"
                                       {{ old('currency', $configuration?->currency ?? 'SSP') === 'SSP' ? 'checked' : '' }}>
                                <div class="flex items-center gap-2">
                                    <span class="text-lg font-bold {{ old('currency', $configuration?->currency ?? 'SSP') === 'SSP' ? 'text-blue-600' : 'text-gray-400' }}">SSP</span>
                                    <div>
                                        <p class="font-semibold text-gray-800 text-sm">South Sudanese Pound</p>
                                        <p class="text-xs text-gray-500">ISO 4217 code — default for South Sudan</p>
                                    </div>
                                </div>
                            </label>
                            <label class="border-2 rounded-lg p-3 cursor-pointer transition
                                {{ old('currency', $configuration?->currency ?? 'SSP') === 'USD' ? 'border-green-500 bg-green-50' : 'border-gray-200 hover:border-green-300' }}">
                                <input type="radio" name="currency" value="USD"
                                       class="sr-only"
                                       {{ old('currency', $configuration?->currency ?? 'SSP') === 'USD' ? 'checked' : '' }}>
                                <div class="flex items-center gap-2">
                                    <span class="text-lg font-bold {{ old('currency', $configuration?->currency ?? 'SSP') === 'USD' ? 'text-green-600' : 'text-gray-400' }}">USD</span>
                                    <div>
                                        <p class="font-semibold text-gray-800 text-sm">US Dollar</p>
                                        <p class="text-xs text-gray-500">For USD-denominated payments</p>
                                    </div>
                                </div>
                            </label>
                        </div>
                        @error('currency')<p class="mt-2 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                {{-- Collection API Credentials --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-arrow-down"></i> Collection API
                        </h2>
                        <p class="text-blue-100 text-xs mt-0.5">Request payments from customers (MoMo Mobile Money)</p>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">API User ID</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400"><i class="fas fa-user text-sm"></i></span>
                                <input type="text" name="collection_api_user"
                                       value="{{ old('collection_api_user', $configuration?->collection_api_user ?? '') }}"
                                       placeholder="Enter Collection API User ID"
                                       class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
                            </div>
                            @error('collection_api_user')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400"><i class="fas fa-key text-sm"></i></span>
                                <input type="password" name="collection_api_key"
                                       value="{{ old('collection_api_key') }}"
                                       placeholder="{{ $configuration?->collection_api_key ? '•••••••••••••••• (leave blank to keep)' : 'Enter Collection API Key' }}"
                                       class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
                                @if($configuration?->collection_api_key)
                                    <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-green-500">
                                        <i class="fas fa-check-circle"></i>
                                    </span>
                                @endif
                            </div>
                            @if($configuration?->collection_api_key)
                                <p class="mt-1 text-xs text-gray-500">Leave blank to keep existing key</p>
                            @endif
                            @error('collection_api_key')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Subscription Key</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400"><i class="fas fa-ticket-alt text-sm"></i></span>
                                <input type="text" name="collection_subscription_key"
                                       value="{{ old('collection_subscription_key', $configuration?->collection_subscription_key ?? '') }}"
                                       placeholder="Enter Collection Subscription Key"
                                       class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
                            </div>
                            @error('collection_subscription_key')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                {{-- Disbursement API Credentials --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-6 py-4">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-arrow-up"></i> Disbursement API
                        </h2>
                        <p class="text-purple-100 text-xs mt-0.5">Send money to customers (MoMo Card Payments)</p>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">API User ID</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400"><i class="fas fa-user text-sm"></i></span>
                                <input type="text" name="disbursement_api_user"
                                       value="{{ old('disbursement_api_user', $configuration?->disbursement_api_user ?? '') }}"
                                       placeholder="Enter Disbursement API User ID"
                                       class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
                            </div>
                            @error('disbursement_api_user')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400"><i class="fas fa-key text-sm"></i></span>
                                <input type="password" name="disbursement_api_key"
                                       value="{{ old('disbursement_api_key') }}"
                                       placeholder="{{ $configuration?->disbursement_api_key ? '•••••••••••••••• (leave blank to keep)' : 'Enter Disbursement API Key' }}"
                                       class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
                                @if($configuration?->disbursement_api_key)
                                    <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-green-500">
                                        <i class="fas fa-check-circle"></i>
                                    </span>
                                @endif
                            </div>
                            @if($configuration?->disbursement_api_key)
                                <p class="mt-1 text-xs text-gray-500">Leave blank to keep existing key</p>
                            @endif
                            @error('disbursement_api_key')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Subscription Key</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400"><i class="fas fa-ticket-alt text-sm"></i></span>
                                <input type="text" name="disbursement_subscription_key"
                                       value="{{ old('disbursement_subscription_key', $configuration?->disbursement_subscription_key ?? '') }}"
                                       placeholder="Enter Disbursement Subscription Key"
                                       class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
                            </div>
                            @error('disbursement_subscription_key')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- MTN MoMo Info --}}
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <div class="flex items-start gap-3">
                    <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                    <div>
                        <h4 class="font-semibold text-blue-800 text-sm">MTN MoMo API Information</h4>
                        <div class="text-xs text-blue-700 mt-1 space-y-1">
                            <p><strong>Collection API</strong> — Used for MoMo Mobile Money payments (customers pay via mobile wallet)</p>
                            <p><strong>Disbursement API</strong> — Used for MoMo Card payments and sending money to customers</p>
                            <p>Register at <a href="https://momodeveloper.mtn.com" target="_blank" class="underline">MTN MoMo Developer Portal</a> to obtain credentials. At least one API type must be configured.</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Security Notice --}}
            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                <div class="flex items-start gap-3">
                    <i class="fas fa-shield-alt text-green-600 mt-0.5"></i>
                    <div>
                        <h4 class="font-semibold text-green-800 text-sm">Security Notice</h4>
                        <p class="text-xs text-green-700 mt-0.5">
                            All credentials are encrypted before storage using Laravel's built-in encryption.
                            Your API keys are never exposed in logs or responses. Rotate credentials periodically.
                        </p>
                    </div>
                </div>
            </div>

            {{-- Form Actions --}}
            <div class="flex items-center justify-between">
                <a href="{{ route('config.payment.index') }}"
                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm">
                    <i class="fas fa-arrow-left mr-1"></i> Cancel
                </a>
                <div class="flex gap-2">
                    @if($isEdit && $configuration)
                        @can('delete payment configuration')
                            <button type="button" onclick="document.getElementById('deleteModal').classList.remove('hidden')"
                                    class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
                                <i class="fas fa-trash mr-1"></i> Delete
                            </button>
                        @endcan
                    @endif
                    <button type="submit"
                            class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                        <i class="fas fa-save mr-1"></i>
                        {{ $isEdit ? 'Update Configuration' : 'Save Configuration' }}
                    </button>
                </div>
            </div>
        </form>
    </div>

    {{-- Delete Confirmation Modal --}}
    @if($isEdit && $configuration)
    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg max-w-md mx-4 overflow-hidden">
            <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-t-lg">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-trash"></i> Delete Configuration
                </h3>
                <button onclick="document.getElementById('deleteModal').classList.add('hidden')" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-6 text-sm">This action cannot be undone. All stored credentials will be permanently removed.</p>
                <div class="flex justify-end gap-3">
                    <button onclick="document.getElementById('deleteModal').classList.add('hidden')"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition text-sm">
                        Cancel
                    </button>
                    <form method="POST" action="{{ route('config.payment.destroy') }}" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
                            Delete Configuration
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif

    @push('scripts')
    <script>
        // Environment radio button visual update
        document.querySelectorAll('input[name="environment"]').forEach(radio => {
            radio.addEventListener('change', function() {
                document.querySelectorAll('input[name="environment"]').forEach(r => {
                    const label = r.closest('label');
                    label.classList.remove('border-yellow-500', 'bg-yellow-50', 'border-green-500', 'bg-green-50');
                    label.classList.add('border-gray-200');
                    const icon = label.querySelector('i');
                    icon.classList.remove('text-yellow-500', 'text-green-500');
                    icon.classList.add('text-gray-400');
                });
                const activeLabel = this.closest('label');
                activeLabel.classList.remove('border-gray-200');
                if (this.value === 'sandbox') {
                    activeLabel.classList.add('border-yellow-500', 'bg-yellow-50');
                    activeLabel.querySelector('i').classList.remove('text-gray-400');
                    activeLabel.querySelector('i').classList.add('text-yellow-500');
                } else {
                    activeLabel.classList.add('border-green-500', 'bg-green-50');
                    activeLabel.querySelector('i').classList.remove('text-gray-400');
                    activeLabel.querySelector('i').classList.add('text-green-500');
                }
            });
        });
    </script>
    @endpush
</x-app-layout>
