@extends('admin.layouts.app')
@section('title','إعدادات PayPal - Zawajnet')
@section('content')
<div class="max-w-4xl mx-auto px-6 py-8" dir="rtl">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">إعدادات PayPal</h1>
        <p class="text-gray-600">قم بإعداد بيانات PayPal للدفع الآمن</p>
    </div>

    <!-- رسالة نجاح/خطأ -->
    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle text-green-600 ml-3"></i>
                <span class="text-green-800 font-semibold">{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle text-red-600 ml-3"></i>
                <span class="text-red-800 font-semibold">{{ session('error') }}</span>
            </div>
        </div>
    @endif

    <!-- تحذير مهم -->
    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div class="flex items-start">
            <i class="fas fa-info-circle text-blue-600 ml-3 mt-1"></i>
            <div>
                <h3 class="text-blue-800 font-semibold mb-2">معلومات مهمة</h3>
                <ul class="text-blue-700 text-sm space-y-1">
                    <li>• للحصول على بيانات PayPal، قم بزيارة <a href="https://developer.paypal.com" target="_blank" class="underline">PayPal Developer</a></li>
                    <li>• في وضع Sandbox، استخدم بيانات الاختبار</li>
                    <li>• في وضع Live، استخدم بيانات الإنتاج الحقيقية</li>
                    <li>• تأكد من حفظ البيانات بشكل آمن</li>
                </ul>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.payment-settings.update') }}" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- PayPal Settings -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                <i class="fab fa-paypal text-blue-600 ml-3"></i>
                إعدادات PayPal
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Client ID -->
                <div>
                    <label for="paypal_client_id" class="block text-sm font-medium text-gray-700 mb-2">
                        Client ID <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           id="paypal_client_id"
                           name="paypal_client_id"
                           value="{{ old('paypal_client_id', \App\Support\Settings::get('paypal.client_id', '')) }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="أدخل PayPal Client ID"
                           required>
                    @error('paypal_client_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Secret -->
                <div>
                    <label for="paypal_secret" class="block text-sm font-medium text-gray-700 mb-2">
                        Secret <span class="text-red-500">*</span>
                    </label>
                    <input type="password"
                           id="paypal_secret"
                           name="paypal_secret"
                           value="{{ old('paypal_secret', \App\Support\Settings::get('paypal.secret', '')) }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="أدخل PayPal Secret"
                           required>
                    @error('paypal_secret')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Mode -->
                <div>
                    <label for="paypal_mode" class="block text-sm font-medium text-gray-700 mb-2">
                        وضع التشغيل <span class="text-red-500">*</span>
                    </label>
                    <select id="paypal_mode"
                            name="paypal_mode"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            required>
                        <option value="sandbox" {{ old('paypal_mode', \App\Support\Settings::get('paypal.mode', 'sandbox')) === 'sandbox' ? 'selected' : '' }}>
                            Sandbox (اختبار)
                        </option>
                        <option value="live" {{ old('paypal_mode', \App\Support\Settings::get('paypal.mode', 'sandbox')) === 'live' ? 'selected' : '' }}>
                            Live (إنتاج)
                        </option>
                    </select>
                    @error('paypal_mode')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Webhook URL -->
                <div>
                    <label for="paypal_webhook_url" class="block text-sm font-medium text-gray-700 mb-2">
                        Webhook URL
                    </label>
                    <input type="url"
                           id="paypal_webhook_url"
                           name="paypal_webhook_url"
                           value="{{ old('paypal_webhook_url', \App\Support\Settings::get('paypal.webhook_url', url('/membership/paypal/webhook'))) }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="https://yourdomain.com/membership/paypal/webhook"
                           readonly>
                    <p class="mt-1 text-xs text-gray-500">انسخ هذا الرابط إلى PayPal Developer Dashboard</p>
                </div>
            </div>
        </div>

        <!-- Test Credentials -->
        <div class="bg-yellow-50 rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-bold text-yellow-800 mb-4 flex items-center">
                <i class="fas fa-flask text-yellow-600 ml-3"></i>
                بيانات الاختبار (Sandbox)
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                    <strong>Client ID:</strong> <code class="bg-gray-100 px-2 py-1 rounded">sb-client-id</code>
                </div>
                <div>
                    <strong>Secret:</strong> <code class="bg-gray-100 px-2 py-1 rounded">sb-secret</code>
                </div>
                <div class="md:col-span-2">
                    <strong>ملاحظة:</strong> هذه بيانات وهمية للاختبار. للحصول على بيانات حقيقية، قم بإنشاء تطبيق في PayPal Developer Dashboard.
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-end space-x-4 space-x-reverse">
            <a href="{{ route('admin.dashboard') }}"
               class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                <i class="fas fa-arrow-right ml-2"></i>
                إلغاء
            </a>
            <button type="submit"
                    class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-save ml-2"></i>
                حفظ الإعدادات
            </button>
        </div>
    </form>

    <!-- Test Connection -->
    <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-bold text-gray-900 mb-4">اختبار الاتصال</h3>
        <p class="text-gray-600 mb-4">تأكد من أن إعدادات PayPal تعمل بشكل صحيح</p>

        <button type="button"
                id="test-paypal-connection"
                class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
            <i class="fas fa-plug ml-2"></i>
            اختبار الاتصال
        </button>

        <div id="test-result" class="mt-4 hidden"></div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const testButton = document.getElementById('test-paypal-connection');
    const testResult = document.getElementById('test-result');

    testButton.addEventListener('click', async function() {
        testButton.disabled = true;
        testButton.innerHTML = '<i class="fas fa-spinner fa-spin ml-2"></i>جاري الاختبار...';

        try {
            const response = await fetch('{{ route("admin.payment-settings.test") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                }
            });

            const data = await response.json();

            testResult.classList.remove('hidden');

            if (data.success) {
                testResult.innerHTML = `
                    <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-600 ml-3"></i>
                            <div>
                                <h4 class="text-green-800 font-semibold">نجح الاختبار!</h4>
                                <p class="text-green-700 text-sm">اتصال PayPal يعمل بشكل صحيح</p>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                testResult.innerHTML = `
                    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-circle text-red-600 ml-3"></i>
                            <div>
                                <h4 class="text-red-800 font-semibold">فشل الاختبار</h4>
                                <p class="text-red-700 text-sm">${data.message || 'حدث خطأ في الاتصال'}</p>
                            </div>
                        </div>
                    </div>
                `;
            }
        } catch (error) {
            testResult.classList.remove('hidden');
            testResult.innerHTML = `
                <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-circle text-red-600 ml-3"></i>
                        <div>
                            <h4 class="text-red-800 font-semibold">خطأ في الاختبار</h4>
                            <p class="text-red-700 text-sm">حدث خطأ أثناء الاختبار</p>
                        </div>
                    </div>
                </div>
            `;
        } finally {
            testButton.disabled = false;
            testButton.innerHTML = '<i class="fas fa-plug ml-2"></i>اختبار الاتصال';
        }
    });
});
</script>
@endsection