@extends('layouts.app')
@section('title','الاشتراكات - Zawajnet')
@section('content')
<div class="max-w-6xl mx-auto px-6 py-10" dir="rtl">
    <div class="text-center mb-12">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-6">
            <i class="fas fa-crown text-white text-3xl"></i>
        </div>
        <h1 class="text-4xl font-bold text-gray-900 mb-4">خطط الاشتراك</h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">اختر الخطة المناسبة لك واستمتع بمزايا حصرية على منصة زواج نت</p>
    </div>

    <!-- Plans Grid -->
    @php($styles = [
        'basic' => [ 'wrap' => 'ring-2 ring-sky-400/40 border-sky-300', 'badge' => 'from-sky-400 to-sky-600', 'btn' => 'bg-sky-600 hover:bg-sky-700' ],
        'gold' => [ 'wrap' => 'ring-2 ring-amber-400/40 border-amber-300', 'badge' => 'from-amber-400 to-yellow-600', 'btn' => 'bg-amber-500 hover:bg-amber-600' ],
        'premium' => [ 'wrap' => 'ring-2 ring-purple-400/40 border-purple-400', 'badge' => 'from-purple-500 to-fuchsia-600', 'btn' => 'bg-purple-600 hover:bg-purple-700' ],
    ])
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
        @foreach($plans as $planSlug => $plan)
            @if($planSlug !== 'free')
                @php($s = $styles[$planSlug] ?? ['wrap'=>'border-gray-200','badge'=>'from-gray-400 to-gray-500','btn'=>'bg-gray-600 hover:bg-gray-700'])
                <div class="relative bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-105 transition-all duration-300 border {{ $s['wrap'] }}">
                    @if(in_array($planSlug,['gold','premium']))
                        <div class="absolute top-0 left-0 right-0 bg-gradient-to-r {{ $s['badge'] }} text-center py-2">
                            <span class="text-white font-bold text-sm">الأكثر شعبية</span>
                        </div>
                    @endif

                    <div class="p-8 {{ in_array($planSlug,['gold','premium']) ? 'pt-16' : '' }}">
                        <!-- Plan Header -->
                        <div class="text-center mb-6">
                            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r {{ $s['badge'] }} rounded-full mb-4">
                                <i class="fas fa-{{ $planSlug === 'basic' ? 'star' : ($planSlug === 'gold' ? 'crown' : 'gem') }} text-white text-2xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $plan['name'] }}</h3>
                            <p class="text-gray-600">{{ $plan['description'] ?? 'خطة عضوية مميزة' }}</p>
                        </div>

                        <!-- Price -->
                        <div class="text-center mb-6">
                            <div class="text-4xl font-bold text-gray-900 mb-2">
                                ${{ $plan['price_usd'] }}
                                <span class="text-lg text-gray-500">/شهر</span>
                            </div>
                            @if(isset($plan['original_price']) && $plan['original_price'] > $plan['price_usd'])
                                <div class="text-lg text-gray-400 line-through">
                                    ${{ $plan['original_price'] }}
                                </div>
                            @endif
                        </div>

                        <!-- Features -->
                        <div class="mb-8">
                            <h4 class="font-semibold text-gray-900 mb-4">المزايا المضمنة:</h4>
                            <ul class="space-y-3">
                                @foreach(($plan['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>

                        <!-- Subscribe Button -->
                        <div class="text-center">
                            <a href="{{ route('subscriptions.show', $planSlug) }}"
                               class="w-full text-white py-3 px-6 rounded-xl font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg inline-block {{ $s['btn'] }}">
                                <i class="fas fa-rocket mr-2"></i>
                                اشترك الآن
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>

    <!-- Features Comparison -->
    <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8 mb-12">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">مقارنة المزايا</h2>

        <div class="overflow-x-auto">
            <table class="w-full bg-white rounded-xl shadow-lg">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="px-6 py-4 text-right font-semibold text-gray-900">الميزة</th>
                        @foreach($plans as $planSlug => $plan)
                            @if($planSlug !== 'free')
                                <th class="px-6 py-4 text-center font-semibold text-gray-900">{{ $plan['name'] }}</th>
                            @endif
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-t">
                        <td class="px-6 py-4 font-medium text-gray-900">البحث المتقدم</td>
                        @foreach($plans as $planSlug => $plan)
                            @if($planSlug !== 'free')
                                <td class="px-6 py-4 text-center">
                                    <i class="fas fa-check text-green-500"></i>
                                </td>
                            @endif
                        @endforeach
                    </tr>
                    <tr class="border-t bg-gray-50">
                        <td class="px-6 py-4 font-medium text-gray-900">رسائل غير محدودة</td>
                        @foreach($plans as $planSlug => $plan)
                            @if($planSlug !== 'free')
                                <td class="px-6 py-4 text-center">
                                    <i class="fas fa-check text-green-500"></i>
                                </td>
                            @endif
                        @endforeach
                    </tr>
                    <tr class="border-t">
                        <td class="px-6 py-4 font-medium text-gray-900">الظهور في المقدمة</td>
                        @foreach($plans as $planSlug => $plan)
                            @if($planSlug !== 'free')
                                <td class="px-6 py-4 text-center">
                                    @if($planSlug === 'basic')
                                        <span class="text-sm text-gray-500">محدود</span>
                                    @else
                                        <i class="fas fa-check text-green-500"></i>
                                    @endif
                                </td>
                            @endif
                        @endforeach
                    </tr>
                    <tr class="border-t bg-gray-50">
                        <td class="px-6 py-4 font-medium text-gray-900">الوضع المخفي</td>
                        @foreach($plans as $planSlug => $plan)
                            @if($planSlug !== 'free')
                                <td class="px-6 py-4 text-center">
                                    @if(in_array($planSlug, ['gold', 'premium']))
                                        <i class="fas fa-check text-green-500"></i>
                                    @else
                                        <i class="fas fa-times text-red-500"></i>
                                    @endif
                                </td>
                            @endif
                        @endforeach
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="bg-white rounded-2xl shadow-lg p-8">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">الأسئلة الشائعة</h2>

        <div class="space-y-6">
            <div class="border-b pb-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-3">كيف يمكنني إلغاء الاشتراك؟</h3>
                <p class="text-gray-600">يمكنك إلغاء الاشتراك في أي وقت من خلال حسابك الشخصي أو التواصل مع خدمة العملاء.</p>
            </div>

            <div class="border-b pb-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-3">هل يمكنني تغيير الخطة؟</h3>
                <p class="text-gray-600">نعم، يمكنك ترقية أو تخفيض خطتك في أي وقت. سيتم احتساب الفرق في الفاتورة التالية.</p>
            </div>

            <div class="border-b pb-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-3">ما هي طرق الدفع المتاحة؟</h3>
                <p class="text-gray-600">نقبل جميع البطاقات الائتمانية الرئيسية، PayPal، وطرق الدفع المحلية الأخرى.</p>
            </div>

            <div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">هل هناك فترة تجريبية مجانية؟</h3>
                <p class="text-gray-600">نعم، نقدم فترة تجريبية مجانية لمدة 7 أيام لجميع الخطط المدفوعة.</p>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
</style>
@endsection