@extends('layouts.app')
@section('title','العضوية - الخطط')
@section('content')
<div class="max-w-6xl 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>

    <!-- Billing toggle -->
    <div class="flex items-center justify-center gap-4 mb-8">
        <span class="text-sm">شهري</span>
        <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="billingToggle" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
        </label>
        <span class="text-sm">سنوي <span class="text-emerald-600 text-xs">(خصم)</span></span>
    </div>

    <div class="overflow-x-auto rounded-2xl border border-gray-200 dark:border-gray-700 mb-8">
        <table class="min-w-full text-sm bg-white dark:bg-gray-800">
            <thead>
                <tr class="text-right text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
                    <th class="py-3 px-4">المستوى</th>
                    <th class="py-3 px-4">المدة</th>
                    <th class="py-3 px-4">السعر الإجمالي</th>
                    <th class="py-3 px-4">التكلفة الشهرية (تقريبًا)</th>
                    <th class="py-3 px-4"></th>
                </tr>
            </thead>
            <tbody>
                @php($current = auth()->user()->membership_level ?? 'free')
                @foreach(($plans ?? config('memberships.plans')) as $plan)
                    <tr class="border-b border-gray-100 dark:border-gray-700/50">
                        <td class="py-3 px-4 font-semibold">{{ $plan['name'] }}</td>
                        <td class="py-3 px-4">{{ $plan['duration_months'] ? $plan['duration_months'].' شهر' : 'دائم' }}</td>
                        <td class="py-3 px-4">{{ $plan['price_usd'] }} $</td>
                        <td class="py-3 px-4">{{ $plan['monthly_cost_usd'] }} $/شهر</td>
                        <td class="py-3 px-4">
                            @if($current === $plan['slug'])
                                <span class="px-3 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">الخطة الحالية</span>
                            @else
                                @if($plan['slug'] === 'free')
                                    <form method="post" action="{{ route('membership.subscribe', ['plan'=>$plan['slug']]) }}">
                                        @csrf
                                        <button type="submit" class="px-3 py-1 text-xs rounded bg-emerald-600 text-white">اشترك الآن</button>
                                    </form>
                                @else
                                    <div class="space-y-1">
                                        <button type="button" class="block w-full px-3 py-1 text-xs rounded bg-emerald-600 text-white open-methods" data-plan="{{ $plan['slug'] }}">اشترك الآن</button>
                                        <a href="/membership/payment/{{ $plan['slug'] }}" class="block w-full px-3 py-1 text-xs rounded bg-blue-600 text-white text-center hover:bg-blue-700 transition-colors">مباشر</a>
                                    </div>
                                @endif
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="grid md:grid-cols-3 gap-6">
        @php($current = auth()->user()->membership_level ?? 'free')
        @php($styles = [
            'free' => [
                'wrap' => 'border-gray-200 dark:border-gray-700 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800 dark:to-gray-900',
                'badge' => 'from-gray-400 to-gray-500',
                'price' => 'text-gray-700 dark:text-gray-200',
                'btn' => 'bg-gray-600 hover:bg-gray-700',
                'ring' => 'ring-gray-400/40',
            ],
            'basic' => [
                'wrap' => 'border-sky-300 dark:border-sky-600 bg-gradient-to-br from-sky-50 to-white dark:from-sky-900/20 dark:to-gray-900',
                'badge' => 'from-sky-400 to-sky-600',
                'price' => 'text-sky-700 dark:text-sky-300',
                'btn' => 'bg-sky-600 hover:bg-sky-700',
                'ring' => 'ring-sky-400/40',
            ],
            'gold' => [
                'wrap' => 'border-amber-300 dark:border-amber-600 bg-gradient-to-br from-amber-50 to-white dark:from-amber-900/20 dark:to-gray-900',
                'badge' => 'from-amber-400 to-yellow-600',
                'price' => 'text-amber-700 dark:text-amber-300',
                'btn' => 'bg-amber-500 hover:bg-amber-600',
                'ring' => 'ring-amber-400/40',
            ],
            'premium' => [
                'wrap' => 'border-purple-400 dark:border-purple-700 bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/20 dark:to-gray-900',
                'badge' => 'from-purple-500 to-fuchsia-600',
                'price' => 'text-purple-700 dark:text-purple-300',
                'btn' => 'bg-purple-600 hover:bg-purple-700',
                'ring' => 'ring-purple-400/40',
            ],
        ])
        @foreach(($plans ?? config('memberships.plans')) as $plan)
            @php($isRecommended = in_array($plan['slug'], ['gold','premium']))
            @php($s = $styles[$plan['slug']] ?? $styles['free'])
            <div class="relative rounded-2xl border p-6 backdrop-blur-sm plan-card hover:-translate-y-1 transition-all duration-300 {{ $s['wrap'] }} {{ $current === $plan['slug'] ? 'ring-2 '.$s['ring'].' shadow-2xl scale-[1.02]' : 'shadow-sm' }}" data-anim="plan" style="--delay: {{ $loop->index * 80 }}ms">
                @if($plan['slug']==='premium')
                    <span class="absolute -top-3 right-4 text-[11px] bg-gradient-to-r from-purple-600 to-fuchsia-600 text-white px-2 py-1 rounded-full shadow">الأعلى قيمة</span>
                @elseif($plan['slug']==='basic')
                    <span class="absolute -top-3 right-4 text-[11px] bg-sky-600 text-white px-2 py-1 rounded-full shadow">مبتدئ</span>
                @elseif($plan['slug']==='free')
                    <span class="absolute -top-3 right-4 text-[11px] bg-gray-600 text-white px-2 py-1 rounded-full shadow">مجاني</span>
                @endif
                @if($isRecommended)
                    <span class="absolute -top-3 left-4 text-[11px] bg-emerald-600 text-white px-2 py-1 rounded-full">الأكثر اختياراً</span>
                @endif
                <div class="flex items-center gap-2 mb-2">
                    <div class="w-9 h-9 rounded-lg bg-gradient-to-r {{ $s['badge'] }} flex items-center justify-center text-white shadow">
                        @switch($plan['slug'])
                            @case('premium') ★ @break
                            @case('gold') ★ @break
                            @case('basic') ☆ @break
                            @default ⓕ
                        @endswitch
                    </div>
                    <h2 class="text-lg font-semibold">{{ $plan['name'] }}</h2>
                </div>
                <div class="mb-2 text-2xl font-extrabold {{ $s['price'] }}">
                    <span class="price-monthly">${{ $plan['price_usd'] }}</span>
                    <span class="price-yearly hidden">${{ (int)round(($plan['price_usd'] ?? 0) * 10) }}</span>
                </div>
                <div class="text-xs text-gray-500 mb-4">{{ $plan['duration_months'] ? $plan['duration_months'].' شهر' : 'دائم' }} • تقريباً {{ $plan['monthly_cost_usd'] }}$/شهر</div>
                <ul class="text-sm space-y-1 mb-4 list-disc pr-5">
                    @foreach($plan['benefits'] as $b)
                        <li>{{ $b }}</li>
                    @endforeach
                </ul>
                @if($current === $plan['slug'])
                    <span class="px-4 py-2 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">الخطة الحالية</span>
                @else
                    @if($plan['slug'] === 'free')
                        <form method="post" action="{{ route('membership.subscribe', ['plan'=>$plan['slug']]) }}">
                            @csrf
                            <button type="submit" class="px-4 py-2 rounded {{ $s['btn'] }} text-white text-sm">تفعيل الخطة المجانية</button>
                        </form>
                    @else
                        <div class="space-y-2">
                            <button type="button" class="w-full px-4 py-2 rounded {{ $s['btn'] }} text-white text-sm open-methods" data-plan="{{ $plan['slug'] }}">اشترك الآن</button>
                            <a href="/membership/payment/{{ $plan['slug'] }}" class="block w-full px-4 py-2 rounded bg-blue-600 text-white text-sm text-center hover:bg-blue-700 transition-colors">رابط مباشر</a>
                        </div>
                    @endif
                @endif
            </div>
        @endforeach
    </div>

    <!-- Comparison table (detailed) -->
    <div class="mt-12 overflow-x-auto rounded-2xl border border-gray-200 dark:border-gray-700">
        <table class="min-w-full text-sm bg-white dark:bg-gray-800">
            <thead>
                <tr class="text-right text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
                    <th class="py-3 px-4">الميزة</th>
                    @php($plansList = ($plans ?? config('memberships.plans')))
                    @php($slugs = collect($plansList)->pluck('slug')->all())
                    @foreach($plansList as $plan)
                        <th class="py-3 px-4">{{ $plan['name'] }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @php(
                    $rows = [
                        ['label' => 'لوحة تتبع النشاط', 'values' => ['free'=>false,'basic'=>false,'gold'=>false,'premium'=>true]],
                        ['label' => 'رؤية المعجبين بي', 'values' => ['free'=>false,'basic'=>true,'gold'=>true,'premium'=>true]],
                        ['label' => 'رؤية المهتمين بي', 'values' => ['free'=>false,'basic'=>true,'gold'=>true,'premium'=>true]],
                        ['label' => 'التصفح الخفي', 'values' => ['free'=>false,'basic'=>false,'gold'=>true,'premium'=>true]],
                        ['label' => 'الرسائل', 'values' => ['free'=>'محدودة','basic'=>'مع قيود','gold'=>'غير محدود','premium'=>'غير محدود']],
                        ['label' => 'المكالمات الصوتية', 'values' => ['free'=>false,'basic'=>false,'gold'=>true,'premium'=>true]],
                        ['label' => 'مكالمات الفيديو', 'values' => ['free'=>false,'basic'=>false,'gold'=>false,'premium'=>true]],
                        ['label' => 'معرض الصور (حد الصور)', 'values' => ['free'=>'3','basic'=>'6','gold'=>'10','premium'=>'غير محدود']],
                        ['label' => 'فلاتر البحث المتقدمة', 'values' => ['free'=>'أساسية فقط','basic'=>'جزئية','gold'=>'كاملة','premium'=>'كاملة']],
                        ['label' => 'تأكيد قراءة الرسائل', 'values' => ['free'=>false,'basic'=>true,'gold'=>true,'premium'=>true]],
                        ['label' => 'الهدايا المجانية يوميًا', 'values' => ['free'=>'1','basic'=>'10','gold'=>'30','premium'=>'غير محدود (افتراضية)']],
                        ['label' => 'هدايا افتراضية مجانية شهريًا', 'values' => ['free'=>false,'basic'=>false,'gold'=>'10','premium'=>'غير محدود']],
                        ['label' => 'ترتيب أعلى في نتائج البحث', 'values' => ['free'=>false,'basic'=>false,'gold'=>true,'premium'=>true]],
                        ['label' => 'أولوية في مراجعة الحساب والتحقق', 'values' => ['free'=>false,'basic'=>false,'gold'=>true,'premium'=>true]],
                        ['label' => 'ختم "عضو مميز"', 'values' => ['free'=>false,'basic'=>false,'gold'=>false,'premium'=>true]],
                        ['label' => 'الظهور بقسم الأعضاء المميزين', 'values' => ['free'=>false,'basic'=>false,'gold'=>false,'premium'=>true]],
                        ['label' => 'متابعة غير محدودة مع حالة التواجد', 'values' => ['free'=>false,'basic'=>false,'gold'=>false,'premium'=>true]],
                        ['label' => 'ربط الحساب (فترة تعارف)', 'values' => ['free'=>false,'basic'=>false,'gold'=>false,'premium'=>true]],
                        ['label' => 'من شاهد ملفي', 'values' => ['free'=>true,'basic'=>true,'gold'=>true,'premium'=>true]],
                        ['label' => 'مراسلة زوار ملفي يوميًا', 'values' => ['free'=>'1','basic'=>'2','gold'=>'غير محدود','premium'=>'غير محدود']],
                    ]
                )
                @foreach($rows as $row)
                    <tr class="border-b border-gray-100 dark:border-gray-700/50">
                        <td class="py-3 px-4 font-medium">{{ $row['label'] }}</td>
                        @foreach($slugs as $slug)
                            @php($val = $row['values'][$slug] ?? false)
                            <td class="py-3 px-4 text-center">
                                @switch(gettype($val))
                                    @case('boolean')
                                        {!! $val ? '✅' : '❌' !!}
                                        @break
                                    @case('integer')
                                    @case('double')
                                        {{ (string)$val }}
                                        @break
                                    @case('string')
                                        @if($val === 'غير محدود' || str_contains($val,'غير محدود'))
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">{{ $val }}</span>
                                        @elseif($val === 'جزئية')
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">جزئي</span>
                                        @elseif($val === 'أساسية فقط')
                                            <span class="text-gray-500">أساسي</span>
                                        @elseif($val === 'كاملة')
                                            <span class="text-emerald-600">كامل</span>
                                        @elseif($val === 'مع قيود' || $val === 'محدودة')
                                            <span class="text-amber-600">{{ $val }}</span>
                                        @else
                                            {{ $val }}
                                        @endif
                                        @break
                                    @default
                                        ❌
                                @endswitch
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="mt-10 grid sm:grid-cols-2 gap-6">
        <div class="rounded-2xl border border-amber-300 dark:border-amber-700 p-6 bg-white dark:bg-gray-800">
            <div class="flex items-center justify-between mb-2">
                <h2 class="text-lg font-semibold">محفظتي</h2>
                <span class="text-xs text-gray-500">نقاط</span>
            </div>
            <div class="text-3xl font-extrabold text-amber-600">{{ (int)(auth()->user()->coins ?? 0) }}</div>
            <div class="mt-3 flex items-center gap-3">
                <a href="{{ route('wallet.index') }}" class="text-sm text-blue-600 hover:underline">إدارة الرصيد</a>
                <a href="{{ route('wallet.topup.form') }}" class="text-sm text-emerald-600 hover:underline">شحن</a>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
            <h3 class="text-base font-semibold mb-2">أسعار الهدايا</h3>
            <ul class="text-sm space-y-1">
                @php($gifts = config('gifts'))
                @forelse(($gifts ?? []) as $g)
                    <li class="flex items-center justify-between">
                        <span>{{ $g['emoji'] ?? '🎁' }} {{ $g['name'] ?? ($g['code'] ?? '-') }}</span>
                        <span class="text-amber-600 font-semibold">{{ (int)($g['cost'] ?? 0) }}</span>
                    </li>
                @empty
                    <li class="text-gray-500">لا توجد بيانات هدايا حالياً.</li>
                @endforelse
            </ul>
        </div>
    </div>

    <!-- Testimonials & FAQ -->
    <div class="mt-12 grid md:grid-cols-2 gap-6">
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
            <h3 class="text-lg font-semibold mb-4">آراء الأعضاء</h3>
            <div class="space-y-4 text-sm text-gray-700 dark:text-gray-300">
                <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700/40">"العضوية الذهبية زادت ظهور ملفي بشكل ملحوظ خلال أسبوع" — أحمد</div>
                <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700/40">"ميزة من شاهد ملفي ساعدتني أتواصل مع المهتمين بسرعة" — منى</div>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
            <h3 class="text-lg font-semibold mb-4">الأسئلة الشائعة</h3>
            <ul class="text-sm space-y-3 text-gray-700 dark:text-gray-300 list-disc pr-5">
                <li><strong>هل أستطيع الإلغاء؟</strong> نعم، يمكنك الإلغاء في أي وقت من صفحة الحساب.</li>
                <li><strong>هل هناك تجديد تلقائي؟</strong> حسب وسيلة الدفع المختارة؛ سنخبرك قبل التجديد.</li>
                <li><strong>طرق الدفع المتاحة؟</strong> باي بال وبطاقات مدعومة قريباً.</li>
            </ul>
        </div>
    </div>
</div>
@endsection

@push('body-end')
<script>
document.addEventListener('DOMContentLoaded', function(){
    const toggle = document.getElementById('billingToggle');
    const monthlyEls = document.querySelectorAll('.price-monthly');
    const yearlyEls = document.querySelectorAll('.price-yearly');
    const apply = () => {
        if(toggle.checked){
            monthlyEls.forEach(e=>e.classList.add('hidden'));
            yearlyEls.forEach(e=>e.classList.remove('hidden'));
        } else {
            yearlyEls.forEach(e=>e.classList.add('hidden'));
            monthlyEls.forEach(e=>e.classList.remove('hidden'));
        }
    };
    toggle?.addEventListener('change', apply);
    apply();

    // entrance animation for cards
    const cards = document.querySelectorAll('[data-anim="plan"]');
    const io = new IntersectionObserver((entries)=>{
        entries.forEach((entry)=>{
            if(entry.isIntersecting){
                const el = entry.target;
                el.style.opacity = '0';
                el.style.transform = 'translateY(14px)';
                setTimeout(()=>{
                    el.style.transition = 'all 420ms cubic-bezier(.2,.8,.2,1)';
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                }, parseInt(getComputedStyle(el).getPropertyValue('--delay')||'0'));
                io.unobserve(el);
            }
        });
    },{rootMargin:'40px'});
    cards.forEach(c=>io.observe(c));
});
</script>
<style>
.plan-card.recommended{ position: relative; }
.plan-card.recommended::after{
    content:'';
    position:absolute; inset:-2px;
    border-radius: 16px;
    padding:2px; background: linear-gradient(90deg,#10b981,#06b6d4,#3b82f6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: glow 3s linear infinite;
}
@keyframes glow{ 0%{ filter:hue-rotate(0deg)} 100%{ filter:hue-rotate(360deg)} }
.plan-card:hover{ box-shadow: 0 12px 30px rgba(16,185,129,.15); }
</style>
@endpush

@push('body-end')
<script>
document.addEventListener('DOMContentLoaded', function(){
    const toggle = document.getElementById('billingToggle');
    const monthlyEls = document.querySelectorAll('.price-monthly');
    const yearlyEls = document.querySelectorAll('.price-yearly');
    const apply = () => {
        if(toggle.checked){
            monthlyEls.forEach(e=>e.classList.add('hidden'));
            yearlyEls.forEach(e=>e.classList.remove('hidden'));
        } else {
            yearlyEls.forEach(e=>e.classList.add('hidden'));
            monthlyEls.forEach(e=>e.classList.remove('hidden'));
        }
    };
    toggle?.addEventListener('change', apply);
    apply();

    // entrance animation for cards
    const cards = document.querySelectorAll('[data-anim="plan"]');
    const io = new IntersectionObserver((entries)=>{
        entries.forEach((entry)=>{
            if(entry.isIntersecting){
                const el = entry.target;
                el.style.opacity = '0';
                el.style.transform = 'translateY(14px)';
                setTimeout(()=>{
                    el.style.transition = 'all 420ms cubic-bezier(.2,.8,.2,1)';
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                }, parseInt(getComputedStyle(el).getPropertyValue('--delay')||'0'));
                io.unobserve(el);
            }
        });
    },{rootMargin:'40px'});
    cards.forEach(c=>io.observe(c));

    // تحديث معالجة أزرار الاشتراك لفتح النافذة المنبثقة
    document.querySelectorAll('.open-methods').forEach(btn=>{
        btn.addEventListener('click', (e)=>{
            e.preventDefault();
            console.log('🎯 Subscribe button clicked');
            const plan = btn.dataset.plan;
            console.log('📋 Plan selected:', plan);
            if (plan) {
                openPaymentPopup(plan);
            } else {
                console.error('❌ No plan specified');
                alert('خطأ: لم يتم تحديد الخطة');
            }
        });
    });

    // إضافة تأثيرات بصرية للأزرار
    document.querySelectorAll('.open-methods').forEach(btn=>{
        btn.addEventListener('mouseenter', ()=>{
            btn.style.transform = 'scale(1.05)';
            btn.style.transition = 'transform 0.2s ease';
        });
        btn.addEventListener('mouseleave', ()=>{
            btn.style.transform = 'scale(1)';
        });
    });
});

function openPaymentPopup(planSlug) {
    console.log('🚀 Opening payment popup for plan:', planSlug);

    // إنشاء نافذة منبثقة جديدة
    const popup = window.open(
        `/membership/payment/${planSlug}`,
        'paymentPopup',
        'width=800,height=700,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,status=no'
    );

    // التركيز على النافذة المنبثقة
    if (popup) {
        console.log('✅ Payment popup opened successfully');
        popup.focus();

        // مراقبة إغلاق النافذة المنبثقة
        const checkClosed = setInterval(() => {
            if (popup.closed) {
                console.log('🔄 Payment popup closed, reloading page...');
                clearInterval(checkClosed);
                // إعادة تحميل الصفحة عند إغلاق النافذة المنبثقة
                setTimeout(() => {
                    window.location.reload();
                }, 500);
            }
        }, 1000);
    } else {
        console.log('❌ Popup blocked, redirecting directly');
        // في حالة منع النوافذ المنبثقة، توجيه مباشر
        alert('يرجى السماح بالنوافذ المنبثقة أو اضغط موافق للمتابعة');
        window.location.href = `/membership/payment/${planSlug}`;
    }
}
</script>