@extends('layouts.app')
@section('title','الدفع - {{ $planData["name"] }}')
@section('content')
<div class="max-w-4xl mx-auto px-6 py-10" dir="rtl">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-4">
            <i class="fas fa-crown text-white text-2xl"></i>
        </div>
        <h1 class="text-3xl font-bold text-gray-900 mb-2">اشتراك في {{ $planData['name'] }}</h1>
        <p class="text-gray-600">ابدأ رحلتك نحو العثور على شريك الحياة المناسب</p>
    </div>

    @php($styles = [
        'basic' => [ 'badge' => 'from-sky-400 to-sky-600', 'price' => 'text-sky-700', 'accent'=>'text-sky-600' ],
        'gold' => [ 'badge' => 'from-amber-400 to-yellow-600', 'price' => 'text-amber-700', 'accent'=>'text-amber-600' ],
        'premium' => [ 'badge' => 'from-purple-500 to-fuchsia-600', 'price' => 'text-purple-700', 'accent'=>'text-purple-600' ],
        'free' => [ 'badge' => 'from-gray-400 to-gray-500', 'price' => 'text-gray-700', 'accent'=>'text-gray-600' ],
    ])
    @php($ps = $styles[$plan] ?? $styles['free'])
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Subscription Details -->
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">تفاصيل الاشتراك</h2>

            <!-- Plan Info -->
            <div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl p-6 mb-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <div class="flex items-center gap-2">
                            <div class="w-10 h-10 rounded-lg bg-gradient-to-r {{ $ps['badge'] }} flex items-center justify-center text-white shadow">★</div>
                            <h3 class="text-2xl font-bold text-gray-900">{{ $planData['name'] }}</h3>
                        </div>
                        <p class="text-gray-600">{{ $planData['description'] ?? 'خطة عضوية مميزة' }}</p>
                    </div>
                    <div class="text-right">
                        <div class="text-3xl font-bold {{ $ps['price'] }}">${{ $planData['price_usd'] }}</div>
                        <div class="text-sm text-gray-500">شهرياً</div>
                    </div>
                </div>
            </div>

            <!-- Features -->
            <div class="mb-6">
                <h4 class="font-semibold text-gray-900 mb-4">المزايا المضمنة:</h4>
                <ul class="space-y-3">
                    @foreach(($planData['benefits'] ?? []) as $benefit)
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 ml-3"></i>
                            <span class="text-gray-700">{{ $benefit }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>

            <!-- Trial Info -->
            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                <div class="flex items-center">
                    <i class="fas fa-gift text-green-600 ml-3"></i>
                    <div>
                        <h4 class="font-semibold text-green-800">فترة تجريبية مجانية</h4>
                        <p class="text-sm text-green-700">7 أيام مجانية، ثم <span class="font-semibold {{ $ps['accent'] }}">${{ $planData['price_usd'] }}/شهر</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Section -->
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">الدفع الآمن</h2>

            @if($paypalPlanId)
                <!-- PayPal Subscription Button -->
                <div id="paypal-subscription-button-container" class="mb-6"></div>

                <!-- Loading Overlay -->
                <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                    <div class="bg-white rounded-2xl p-8 text-center">
                        <div class="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">جاري معالجة الاشتراك...</h3>
                        <p class="text-gray-600">يرجى الانتظار ولا تغلق هذه النافذة</p>
                    </div>
                </div>

                <!-- Result Message -->
                <div id="result-message" class="mt-6 p-4 rounded-lg hidden"></div>
            @else
                <!-- Error Message -->
                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-triangle text-red-600 ml-3"></i>
                        <div>
                            <h4 class="font-semibold text-red-800">خطأ في الإعداد</h4>
                            <p class="text-sm text-red-700">لم يتم العثور على معرف خطة PayPal. يرجى التواصل مع الدعم الفني.</p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Security Features -->
            <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                <div class="flex items-center mb-2">
                    <i class="fas fa-shield-alt text-green-600 ml-2"></i>
                    <span class="font-semibold text-green-800">ضمانات الأمان</span>
                </div>
                <ul class="text-sm text-green-700 space-y-1">
                    <li>• تشفير SSL 256-bit</li>
                    <li>• معالجة آمنة من PayPal</li>
                    <li>• إلغاء الاشتراك في أي وقت</li>
                    <li>• حماية من الاحتيال</li>
                </ul>
            </div>

            <!-- Alternative Actions -->
            <div class="mt-6">
                <a href="{{ route('subscriptions.index') }}"
                   class="block text-center text-gray-500 hover:text-gray-700 transition-colors text-sm">
                    <i class="fas fa-arrow-right mr-1"></i>
                    الرجوع للخطط
                </a>
            </div>
        </div>
    </div>
</div>

@if($paypalPlanId)
<!-- PayPal SDK -->
<script src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal_gateway.client_id', 'sb-client-id') }}&vault=true&intent=subscription&currency=USD"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loadingOverlay = document.getElementById('loadingOverlay');
    const resultMessage = document.getElementById('result-message');

    // PayPal Subscription Button
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'blue',
            layout: 'vertical',
            label: 'subscribe'
        },
        createSubscription: function(data, actions) {
            showLoading();

            return actions.subscription.create({
                'plan_id': '{{ $paypalPlanId }}'
            });
        },
        onApprove: function(data, actions) {
            // إرسال طلب لتأكيد الاشتراك
            fetch('{{ route("subscriptions.approve", ":subscriptionId") }}'.replace(':subscriptionId', data.subscriptionID), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                hideLoading();

                if (data.success) {
                    showMessage('تم تفعيل الاشتراك بنجاح! سيتم توجيهك إلى صفحة النجاح.', 'success');

                    // توجيه إلى صفحة النجاح بعد 2 ثانية
                    setTimeout(() => {
                        window.location.href = '{{ route("membership.success", ["plan" => $plan]) }}';
                    }, 2000);
                } else {
                    showMessage('حدث خطأ أثناء تفعيل الاشتراك. يرجى المحاولة مرة أخرى.', 'error');
                }
            })
            .catch(error => {
                hideLoading();
                console.error('Error:', error);
                showMessage('حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.', 'error');
            });
        },
        onError: function(err) {
            hideLoading();
            console.error('PayPal error:', err);
            showMessage('حدث خطأ في PayPal. يرجى المحاولة مرة أخرى.', 'error');
        },
        onCancel: function(data) {
            hideLoading();
            showMessage('تم إلغاء عملية الاشتراك.', 'error');
        }
    }).render('#paypal-subscription-button-container');

    // Helper Functions
    function showLoading() {
        loadingOverlay.classList.remove('hidden');
    }

    function hideLoading() {
        loadingOverlay.classList.add('hidden');
    }

    function showMessage(message, type) {
        resultMessage.innerHTML = message;
        resultMessage.className = `mt-6 p-4 rounded-lg ${type === 'success' ? 'bg-green-50 border border-green-200 text-green-800' : 'bg-red-50 border border-red-200 text-red-800'}`;
        resultMessage.classList.remove('hidden');

        // Auto-hide after 5 seconds
        setTimeout(() => {
            resultMessage.classList.add('hidden');
        }, 5000);
    }
});
</script>
@endif

<style>
/* Loading Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Success/Error Messages */
.success-message {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.error-message {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}
</style>
@endsection