@extends('layouts.app')
@section('title','اختبار زر الترقية')
@section('content')
<div class="max-w-4xl mx-auto px-6 py-10" dir="rtl">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-extrabold mb-2">اختبار زر الترقية</h1>
        <p class="text-gray-600">فحص مشكلة زر ترقية العضوية</p>
    </div>

    <!-- معلومات المستخدم الحالي -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 mb-6">
        <h2 class="text-xl font-bold mb-4">معلومات المستخدم الحالي</h2>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <strong>الاسم:</strong> {{ auth()->user()->name ?? 'غير مسجل دخول' }}
            </div>
            <div>
                <strong>البريد:</strong> {{ auth()->user()->email ?? 'غير مسجل دخول' }}
            </div>
            <div>
                <strong>نوع العضوية:</strong> {{ auth()->user()->membership_level ?? 'غير محدد' }}
            </div>
            <div>
                <strong>تاريخ انتهاء العضوية:</strong> {{ auth()->user()->membership_expires_at?->format('Y-m-d') ?? 'غير محدد' }}
            </div>
        </div>
    </div>

    <!-- اختبار الأزرار -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 mb-6">
        <h2 class="text-xl font-bold mb-4">اختبار الأزرار</h2>

        <!-- زر الترقية الأساسي -->
        <div class="mb-4">
            <h3 class="text-lg font-semibold mb-2">زر الترقية الأساسي</h3>
            <a href="{{ route('membership.index') }}" class="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                ترقية العضوية
            </a>
        </div>

        <!-- زر الخطط -->
        <div class="mb-4">
            <h3 class="text-lg font-semibold mb-2">زر الخطط</h3>
            <a href="{{ route('membership.plans') }}" class="inline-block px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                عرض الخطط
            </a>
        </div>

        <!-- أزرار الاختبار -->
        <div class="mb-4">
            <h3 class="text-lg font-semibold mb-2">أزرار الاختبار</h3>
            <button type="button" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors open-methods" data-plan="basic">
                اختبار زر Basic
            </button>
            <button type="button" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors open-methods" data-plan="gold">
                اختبار زر Gold
            </button>
        </div>
    </div>

    <!-- اختبار JavaScript -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
        <h2 class="text-xl font-bold mb-4">اختبار JavaScript</h2>
        <div id="js-test-result" class="text-gray-600">جاري اختبار JavaScript...</div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
    // اختبار JavaScript
    document.getElementById('js-test-result').innerHTML = 'JavaScript يعمل بشكل صحيح!';

    // اختبار أزرار الدفع
    document.querySelectorAll('.open-methods').forEach(btn=>{
        btn.addEventListener('click', ()=>{
            const plan = btn.dataset.plan;
            alert('تم النقر على زر ' + plan + ' - JavaScript يعمل بشكل صحيح!');

            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4';
            modal.innerHTML = `
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-bold">اختبار وسيلة الدفع</h3>
                        <button class="text-gray-500 hover:text-gray-700" id="close-methods">✕</button>
                    </div>
                    <div class="space-y-3">
                        <a href="${window.location.origin}/membership/paypal/${plan}" class="block w-full text-center px-4 py-3 rounded-lg bg-blue-600 text-white">بايبال</a>
                        <a href="${window.location.origin}/membership/skrill/${plan}" class="block w-full text-center px-4 py-3 rounded-lg bg-fuchsia-600 text-white">سكريل</a>
                    </div>
                </div>`;
            document.body.appendChild(modal);
            modal.addEventListener('click', (e)=>{
                if(e.target===modal || e.target.id==='close-methods'){
                    modal.remove();
                }
            });
        });
    });
});
</script>
@endsection