@extends('layouts.dashboard')

@php
    // Default values to prevent errors if variables are not passed
    $stats = $stats ?? [];
    $recommendations = $recommendations ?? collect();
    $points = $points ?? 0;
    $badge = $badge ?? 'عضوية مجانية';
    $matchingPercentage = $matchingPercentage ?? 0;
    $monthsLabels = $monthsLabels ?? [];
    $messagesData = $messagesData ?? [];
    $interestsData = $interestsData ?? [];
    $interestByCountry = $interestByCountry ?? collect();

    // استخدم نسبة الاكتمال المعيارية من Trait لضمان التناسق عبر كل الصفحات
    $user = Auth::user();
    $pct = (int) ($user?->profile_completeness ?? 0);
    // قائمة إرشادية فقط (لا تؤثر على الاحتساب القياسي)
    $checkItems = [
        ['label' => 'أضف صورة شخصية', 'done' => (bool)($user?->avatar)],
        ['label' => 'أكمل المعلومات الأساسية', 'done' => (bool)($user?->name && $user?->gender)],
        ['label' => 'أكمل الموقع (الدولة/المدينة)', 'done' => (bool)($user?->country_id && ($user?->city_name || $user?->state_id))],
        ['label' => 'نبذة عنك وعن الشريك', 'done' => (bool)($user?->about_me && $user?->about_partner)],
    ];

    // عدادات التفاعل: إعجابات/انجذاب/اهتمامات وصلت للمستخدم الحالي
    $likesReceived = $user ? \App\Models\UserInteraction::where('target_id', $user->id)->where('type','like')->count() : 0;
    $attractionsReceived = $user ? \App\Models\UserInteraction::where('target_id', $user->id)->where('type','attraction_start')->count() : 0;
    $interestsReceived = $user ? \App\Models\Interest::where('target_user_id', $user->id)->count() : 0;
@endphp

@section('content')
{{-- ✅ نافذة تعليم المستخدم بنجاح التسجيل --}}
@if(session('registration_success') || (Auth::check() && Auth::user()->created_at && Auth::user()->created_at->diffInMinutes(now()) < 5))
    <div id="registration-success-modal"
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
         x-data="{ show: true }"
         x-show="show"
         x-cloak
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
         aria-describedby="modal-description">
        <div class="card-glass max-w-md w-full mx-4 transform transition-all duration-300 scale-100"
             x-show="show"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95">

            <!-- Header -->
            <div class="gradient-success rounded-t-2xl p-6 text-center">
                <div class="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-full flex items-center justify-center animate-float">
                    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
                <h3 id="modal-title" class="text-2xl font-bold text-white">🎉 مرحباً بك في زواجنت!</h3>
                <p id="modal-description" class="text-green-100 mt-2">تم إنشاء حسابك بنجاح</p>
            </div>

            <!-- Content -->
            <div class="p-6">
                <div class="text-center mb-6">
                    <p class="text-gray-600 dark:text-gray-300 mb-4">
                        عزيزي <span class="font-semibold text-green-600">{{ $user->name ?? 'زائر' }}</span>،
                        نرحب بك في مجتمع زواجنت! 🎊
                    </p>

                    <!-- Profile Completion Progress -->
                    <div class="mb-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">اكتمال الملف الشخصي</span>
                            <span class="text-sm font-bold text-green-600">{{ $pct }}%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar-fill" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>

                    <div class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                        @foreach($checkItems as $item)
                            <div class="flex items-center justify-between">
                                <span>{{ $item['label'] }}</span>
                                @if($item['done'])
                                    <span class="text-green-500">✅</span>
                                @else
                                    <span class="text-gray-400">⭕</span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="flex space-x-3 space-x-reverse">
                    <x-enhanced-button variant="secondary" size="md" ripple="true" class="flex-1" @click="show = false">
                        إغلاق
                    </x-enhanced-button>
                    <x-enhanced-button variant="primary" size="md" ripple="true" class="flex-1" :href="route('profile.edit')">
                        أكمل ملفي
                    </x-enhanced-button>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- Main Dashboard Content -->
<div class="space-y-8">
    <!-- Welcome Section -->
    <div class="card-glass p-6 sm:p-8 text-center relative overflow-hidden" data-anim="fade-in">
        <!-- Decorative background -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 25% 25%, rgba(255, 62, 168, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(30, 111, 240, 0.1) 0%, transparent 50%);"></div>
        </div>

        <div class="max-w-4xl mx-auto relative z-10">
            <div class="mb-4">
                <span class="inline-block w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-2xl sm:text-3xl mb-4 animate-float">
                    👋
                </span>
            </div>

            <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gradient mb-4 animate-fade-in">
                مرحباً بك، {{ $user->name ?? 'زائر' }}!
            </h1>

            <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-6 animate-slide-up max-w-2xl mx-auto">
                اكتشف توافقات جديدة وابني علاقات ذات معنى في مجتمع زواجنت الآمن والموثوق
            </p>

            <!-- Quick action buttons -->
            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mb-6">
                <x-enhanced-button variant="primary" size="md" ripple="true" :href="route('search.index')" class="w-full sm:w-auto">
                    <span class="flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        ابدأ البحث الآن
                    </span>
                </x-enhanced-button>

                <x-enhanced-button variant="outline" size="md" ripple="true" :href="route('profile.edit')" class="w-full sm:w-auto">
                    <span class="flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        تحديث الملف الشخصي
                    </span>
                </x-enhanced-button>
            </div>

            <!-- Quick Stats -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mt-8">
                <div class="card p-4 sm:p-6 text-center hover-lift" data-anim="slide-up">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">توصية جديدة</h3>
                    <p class="text-2xl sm:text-3xl font-bold text-blue-600">{{ $recommendations->count() }}</p>
                </div>
                <div class="card p-4 sm:p-6 text-center hover-lift" data-anim="slide-up">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 bg-pink-100 dark:bg-pink-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">نسبة التوافق</h3>
                    <p class="text-2xl sm:text-3xl font-bold text-pink-600">{{ $matchingPercentage }}%</p>
                </div>
                <div class="card p-4 sm:p-6 text-center hover-lift sm:col-span-2 lg:col-span-1" data-anim="slide-up">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">نقطة</h3>
                    <p class="text-2xl sm:text-3xl font-bold text-green-600">{{ $points }}</p>
                </div>
            </div>

            <!-- User Interaction Stats: Likes / Attractions / Interests -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mt-6">
                <a href="{{ route('likes.who') }}" data-premium-gate="likes" class="card p-4 sm:p-6 text-center hover-lift block" data-anim="slide-up">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 bg-rose-100 dark:bg-rose-900/30 rounded-2xl flex items-center justify-center">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">الإعجابات</h3>
                    <p class="text-2xl sm:text-3xl font-bold text-rose-600">{{ $likesReceived }}</p>
                </a>
                <a href="{{ route('attractions.who') }}" class="card p-4 sm:p-6 text-center hover-lift block" data-anim="slide-up">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 bg-fuchsia-100 dark:bg-fuchsia-900/30 rounded-2xl flex items-center justify-center">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-fuchsia-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-2.21 0-4 1.79-4 4 0 2.21 4 6 4 6s4-3.79 4-6c0-2.21-1.79-4-4-4z" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">الانجذاب</h3>
                    <p class="text-2xl sm:text-3xl font-bold text-fuchsia-600">{{ $attractionsReceived }}</p>
                </a>
                <a href="{{ route('interests.who') }}" data-premium-gate="interests" class="card p-4 sm:p-6 text-center hover-lift block" data-anim="slide-up">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 bg-violet-100 dark:bg-violet-900/30 rounded-2xl flex items-center justify-center">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7H7v6h6V7z M17 17H7" />
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">الاهتمام</h3>
                    <p class="text-2xl sm:text-3xl font-bold text-violet-600">{{ $interestsReceived }}</p>
                </a>
            </div>
        </div>
    </div>

    <!-- Profile Completion Card -->
    @if($pct < 100)
        <div class="card-hover p-6 bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 border-l-4 border-yellow-400" data-anim="slide-up">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-200 mb-2">
                        🚀 اكمل ملفك الشخصي لتحسين فرصك
                    </h3>
                    <p class="text-yellow-700 dark:text-yellow-300 mb-4">
                        الملفات المكتملة تحصل على 3x أكثر من المشاهدات والتوافقات!
                    </p>

                    <!-- Progress Bar -->
                    <div class="mb-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">اكتمال الملف</span>
                            <span class="text-sm font-bold text-yellow-600">{{ $pct }}%</span>
                        </div>
                        <div class="w-full h-2 bg-yellow-200 dark:bg-yellow-900/40 rounded-full overflow-hidden">
                            <div class="h-2 bg-yellow-500 rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>

                    <ul class="space-y-2 text-sm">
                        @foreach($checkItems as $item)
                            <li class="flex items-center justify-between">
                                <span class="text-yellow-800 dark:text-yellow-200">{{ $item['label'] }}</span>
                                @if($item['done'])
                                    <span class="text-green-600">✅</span>
                                @else
                                    <span class="text-gray-400">⭕</span>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="ml-6 hidden sm:block">
                    <x-enhanced-button variant="primary" size="md" ripple="true" :href="route('profile.edit')">
                        أكمل ملفي الآن
                    </x-enhanced-button>
                </div>
            </div>
        </div>
    @endif

    <!-- Main Navigation Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Profile & Settings Section -->
        <div class="space-y-4" data-anim="slide-up">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <span class="text-2xl">👤</span>
                الملف الشخصي والإعدادات
            </h2>

            <a href="{{ route('profile.edit') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">تعديل الملف الشخصي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">حدث معلوماتك وصورك</p>
            </a>

            <a href="{{ route('profile.show.self') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">عرض ملفي الشخصي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">شاهد كيف يظهر ملفك للآخرين</p>
            </a>

            <a href="{{ route('preferences.manage') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">التفضيلات والإعدادات</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">اضبط إعدادات التواصل والخصوصية</p>
            </a>

            @if($user && $user->is_admin)
            <a href="{{ route('admin.dashboard') }}" class="card-hover p-6 text-center group bg-gradient-to-r from-red-50 to-orange-50 dark:from-red-900/20 dark:to-orange-900/20 border-2 border-red-200 dark:border-red-800">
                <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-r from-red-100 to-orange-100 dark:from-red-900/30 dark:to-orange-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-red-800 dark:text-red-200 mb-2">لوحة الإدارة</h3>
                <p class="text-sm text-red-600 dark:text-red-400">إدارة الموقع والإعدادات</p>
            </a>
            @endif
        </div>

        <!-- Search & Discovery Section -->
        <div class="space-y-4" data-anim="slide-up">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <span class="text-2xl">🔍</span>
                البحث والاكتشاف
            </h2>

            <a href="{{ route('search.index') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-indigo-100 dark:bg-indigo-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">البحث عن أعضاء</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">اكتشف أعضاء جدد يناسبونك</p>
            </a>

            <a href="{{ route('search.index', ['advanced' => 1]) }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-teal-100 dark:bg-teal-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">البحث المتقدم</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">استخدم فلاتر متقدمة للبحث</p>
            </a>

            <a href="{{ route('search.ai.show') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-pink-100 dark:bg-pink-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">البحث بالذكاء الاصطناعي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">اكتشف توافقات ذكية</p>
            </a>

            <a href="{{ route('recommendations.index') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-orange-100 dark:bg-orange-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">التوصيات الذكية</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">شخصيات مناسبة لك</p>
            </a>
        </div>

        <!-- Communication & Social Section -->
        <div class="space-y-4" data-anim="slide-up">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <span class="text-2xl">💬</span>
                التواصل والتفاعل
            </h2>

            <a href="{{ route('chat.index') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">الرسائل والدردشة</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">تواصل مع أعضائك</p>
            </a>

            <a href="{{ route('matches.index') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-rose-100 dark:bg-rose-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">التوافقات</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">شاهد من اهتم بك</p>
            </a>

            @if(optional(auth()->user())->is_paid)
            <a href="{{ route('likes.who') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-violet-100 dark:bg-violet-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">المعجبون بي</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">ميزة Premium</p>
            </a>
            @endif

            <a href="{{ route('notifications.index') }}" class="card-hover p-6 text-center group">
                <div class="w-16 h-16 mx-auto mb-4 bg-amber-100 dark:bg-amber-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">الإشعارات</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">آخر التحديثات</p>
            </a>
        </div>
    </div>

    <!-- Premium Features Section -->
    @if(!optional(auth()->user())->is_paid)
    <div class="card-hover p-6 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-l-4 border-purple-400" data-anim="slide-up">
        <div class="flex items-center justify-between">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">
                    ⭐ ارتقِ إلى العضوية المميزة
                </h3>
                <p class="text-purple-700 dark:text-purple-300 mb-4">
                    احصل على ميزات حصرية مثل "المعجبون بي" و "التصفح السري" والمزيد!
                </p>
            </div>
            <div class="ml-6">
                <a href="{{ route('membership.index') }}" id="upgrade-button" class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-transparent hover:border-purple-300 cursor-pointer">
                    ⭐ ترقية الآن
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    @endif

    <!-- Recommendations Section -->
    @if($recommendations->count() > 0)
        <div class="card-hover p-6" data-anim="slide-up">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                    💕 توصيات جديدة لك
                </h2>
                <x-enhanced-button variant="outline" size="md" ripple="true" :href="route('search.index')">
                    عرض الكل
                </x-enhanced-button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($recommendations->take(6) as $index => $user)
                    <div class="card-hover p-4 text-center group" data-anim="slide-up" style="animation-delay: {{ $index * 60 }}ms">
                        <div class="relative mb-4">
                            @if($user->avatar)
                                <img data-src="{{ Storage::url($user->avatar) }}"
                                     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f3f4f6'/%3E%3C/svg%3E"
                                     alt="{{ $user->name }}"
                                     class="w-24 h-24 mx-auto rounded-full object-cover border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300 lazy"
                                     loading="lazy">
                            @else
                                <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-2xl font-bold animate-shimmer">
                                    {{ substr($user->name, 0, 1) }}
                                </div>
                            @endif
                            <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">متصل</span>
                            </div>
                        </div>

                        <h3 class="font-semibold text-gray-900 dark:text-white mb-2">{{ $user->name }}</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{{ $user->age ?? 'غير محدد' }} سنة • {{ $user->city_name ?? 'غير محدد' }}</p>

                        <div class="flex space-x-2 space-x-reverse justify-center">
                            <x-enhanced-button
                                variant="accent"
                                size="sm"
                                ripple="true"
                                class="text-sm px-3 py-2 like-btn"
                                data-user-id="{{ $user->id }}"
                                @click="handleLike($event)"
                            >
                                <span class="flex items-center gap-1">
                                    <span>💕</span>
                                    <span class="hidden sm:inline">اهتمام</span>
                                </span>
                            </x-enhanced-button>
                            <x-enhanced-button
                                variant="primary"
                                size="sm"
                                ripple="true"
                                class="text-sm px-3 py-2"
                                :href="route('chat.show', $user->id)"
                            >
                                <span class="flex items-center gap-1">
                                    <span>👋</span>
                                    <span class="hidden sm:inline">رسالة</span>
                                </span>
                            </x-enhanced-button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <!-- Quick Stats & Actions -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <a href="{{ route('wallet.index') }}" class="card-hover p-6 text-center group hover-lift" data-anim="slide-up">
            <div class="w-16 h-16 mx-auto mb-4 bg-yellow-100 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-white mb-2">المحفظة</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->coins ?? 0 }} نقطة</p>
        </a>

        @php($level = strtolower((string) (Auth::user()->membership_level ?? 'free')))
        @php($badgeStyles = [
            'free' => ['bg' => 'from-gray-100 to-gray-200 dark:from-gray-800/30 dark:to-gray-700/30', 'icon' => 'text-gray-600', 'label' => 'مجاني', 'pill' => 'bg-gray-100 text-gray-800'],
            'basic' => ['bg' => 'from-sky-100 to-sky-200 dark:from-sky-900/30 dark:to-sky-800/30', 'icon' => 'text-sky-600', 'label' => 'Basic', 'pill' => 'bg-sky-100 text-sky-800'],
            'gold' => ['bg' => 'from-amber-100 to-yellow-200 dark:from-amber-900/30 dark:to-yellow-900/30', 'icon' => 'text-amber-600', 'label' => 'Gold', 'pill' => 'bg-amber-100 text-amber-800'],
            'premium' => ['bg' => 'from-purple-100 to-fuchsia-100 dark:from-purple-900/30 dark:to-fuchsia-900/30', 'icon' => 'text-purple-600', 'label' => 'Premium', 'pill' => 'bg-purple-100 text-purple-800'],
        ])
        @php($bs = $badgeStyles[$level] ?? $badgeStyles['free'])
        <a href="{{ route('membership.index') }}" class="card-hover p-6 text-center group hover-lift {{ $level==='premium' ? 'ring-2 ring-purple-300/40' : ($level==='gold' ? 'ring-2 ring-amber-300/40' : '') }}" data-anim="slide-up">
            <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-r {{ $bs['bg'] }} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-white mb-2">العضوية</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium {{ $bs['pill'] }}">
                    <span class="inline-block w-2 h-2 rounded-full {{ $level==='premium' ? 'bg-purple-600' : ($level==='gold' ? 'bg-amber-500' : ($level==='basic' ? 'bg-sky-600' : 'bg-gray-500')) }}"></span>
                    {{ $bs['label'] }}
                </span>
            </p>
        </a>

        <a href="{{ route('search.saved.list') }}" class="card-hover p-6 text-center group hover-lift" data-anim="slide-up">
            <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-white mb-2">البحث المحفوظ</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">ابحثاتك السابقة</p>
        </a>

        <a href="{{ route('search.compare') }}" class="card-hover p-6 text-center group hover-lift" data-anim="slide-up">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-white mb-2">مقارنة الأعضاء</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">قارن بين الأعضاء</p>
        </a>
    </div>
</div>

<!-- Enhanced JavaScript for animations and interactions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enhanced staggered animations with performance optimization
    const animatedElements = document.querySelectorAll('[data-anim]');

    // Use Intersection Observer for better performance
    const observerOptions = {
        root: null,
        rootMargin: '50px',
        threshold: 0.1
    };

    const animationObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                const element = entry.target;
        const delay = index * 60; // 60ms delay between each element

        setTimeout(() => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(20px)';
                    element.style.willChange = 'opacity, transform';

                    // Trigger animation with RAF for smooth performance
            requestAnimationFrame(() => {
                element.style.transition = 'all 300ms cubic-bezier(0.2, 0.8, 0.2, 1)';
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';

                        // Clean up will-change after animation
                        setTimeout(() => {
                            element.style.willChange = 'auto';
                        }, 300);
            });
        }, delay);

                animationObserver.unobserve(element);
            }
        });
    }, observerOptions);

    animatedElements.forEach(element => {
        animationObserver.observe(element);
    });

    // Enhanced hover effects with better performance
    const hoverElements = document.querySelectorAll('.hover-lift');
    hoverElements.forEach(element => {
        let isHovering = false;

        element.addEventListener('mouseenter', function() {
            if (!isHovering) {
                isHovering = true;
                this.style.willChange = 'transform, box-shadow';
            this.style.transform = 'translateY(-8px)';
            this.style.boxShadow = '0 20px 40px rgba(30, 111, 240, 0.15)';
            }
        });

        element.addEventListener('mouseleave', function() {
            if (isHovering) {
                isHovering = false;
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '';
                // Clean up will-change
                setTimeout(() => {
                    this.style.willChange = 'auto';
                }, 300);
            }
        });
    });

    // Auto-hide registration success modal after 10 seconds
    const registrationModal = document.getElementById('registration-success-modal');
    if (registrationModal) {
        setTimeout(() => {
            const alpineData = Alpine.$data(registrationModal);
            if (alpineData && alpineData.show) {
                alpineData.show = false;
            }
        }, 10000); // Hide after 10 seconds
    }

    // Enhanced ripple effect for buttons
    document.addEventListener('click', function(e) {
        const button = e.target.closest('.btn-ripple');
        if (button && !button.disabled) {
            const rect = button.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;

            const ripple = document.createElement('span');
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                transform: scale(0);
                animation: ripple-animation 0.6s linear;
                left: ${x}px;
                top: ${y}px;
                width: ${size}px;
                height: ${size}px;
                pointer-events: none;
            `;

            button.style.position = 'relative';
            button.style.overflow = 'hidden';
            button.appendChild(ripple);

            setTimeout(() => {
                ripple.remove();
            }, 600);
        }
    });

    // Performance optimization: Reduce motion for users who prefer it
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        const style = document.createElement('style');
        style.textContent = `
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        `;
        document.head.appendChild(style);
    }

    // Handle like button interactions
    window.handleLike = function(event) {
        const button = event.currentTarget;
        const userId = button.dataset.userId;

        if (!userId || button.disabled) return;

        // Disable button to prevent double clicks
        button.disabled = true;
        const originalContent = button.innerHTML;

        // Show loading state
        button.innerHTML = `
            <span class="flex items-center gap-1">
                <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="hidden sm:inline">جاري الإرسال...</span>
            </span>
        `;

        // Call web route that toggles like and returns JSON when AJAX
        fetch(`/like/${userId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(async response => { try { return await response.json(); } catch(_) { return { success:false, message:'invalid json' }; } })
        .then(data => {
            if (data.success) {
                // Show success state
                button.innerHTML = `
                    <span class="flex items-center gap-1">
                        <span>✅</span>
                        <span class="hidden sm:inline">تم الإرسال</span>
                    </span>
                `;

                // Add success animation
                button.classList.add('animate-pulse-glow');

                // Reset after 2 seconds
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.disabled = false;
                    button.classList.remove('animate-pulse-glow');
                }, 2000);
            } else {
                throw new Error(data.message || 'خطأ في الإرسال');
            }
        })
        .catch(error => {
            console.error('Error:', error);

            // Show error state
            button.innerHTML = `
                <span class="flex items-center gap-1">
                    <span>❌</span>
                    <span class="hidden sm:inline">خطأ</span>
                </span>
            `;

            // Reset after 2 seconds
            setTimeout(() => {
                button.innerHTML = originalContent;
                button.disabled = false;
            }, 2000);
        });
    };

    // Enhanced keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            // Close any open modals
            const modals = document.querySelectorAll('[x-data*="show"]');
            modals.forEach(modal => {
                const alpineData = Alpine.$data(modal);
                if (alpineData && alpineData.show) {
                    alpineData.show = false;
                }
            });
        }
    });

    // Lazy loading for images
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                if (img.dataset.src) {
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                    img.classList.add('loaded');
                    img.classList.remove('lazy');
                    observer.unobserve(img);
                }
            }
        });
    }, {
        rootMargin: '50px'
    });

    document.querySelectorAll('img[data-src]').forEach(img => {
        imageObserver.observe(img);
    });
});

// CSS for ripple animation and performance optimizations
const rippleStyle = document.createElement('style');
rippleStyle.textContent = `
    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }

    /* Performance optimizations */
    .lazy {
        opacity: 0;
        transition: opacity 0.3s;
    }

    .lazy.loaded {
        opacity: 1;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Reduce layout shifts */
    img {
        height: auto;
        max-width: 100%;
    }

    /* GPU acceleration for animations */
    .hover-lift,
    .animate-float,
    .animate-fade-in,
    .animate-slide-up {
        will-change: transform;
    }

    /* Optimize font loading */
    @font-face {
        font-family: 'Inter';
        font-display: swap;
    }
`;
document.head.appendChild(rippleStyle);

// Performance monitoring
if ('performance' in window && 'measure' in performance) {
    performance.mark('dashboard-load-start');

    window.addEventListener('load', () => {
        performance.mark('dashboard-load-end');
        performance.measure('dashboard-load-time', 'dashboard-load-start', 'dashboard-load-end');

        const measure = performance.getEntriesByName('dashboard-load-time')[0];
        if (measure && measure.duration > 3000) {
            console.warn('Dashboard load time is slow:', measure.duration + 'ms');
        }
    });

    // اختبار زر الترقية
    document.addEventListener('DOMContentLoaded', function() {
        const upgradeButton = document.getElementById('upgrade-button');
        if (upgradeButton) {
            console.log('زر الترقية موجود:', upgradeButton);

            // إضافة event listener للتأكد من أن الزر يعمل
            upgradeButton.addEventListener('click', function(e) {
                console.log('تم النقر على زر الترقية');
                // التأكد من أن الرابط يعمل
                const href = this.getAttribute('href');
                console.log('الرابط:', href);

                // إذا كان هناك مشكلة، يمكن إضافة window.location.href
                if (!href || href === '#') {
                    e.preventDefault();
                    window.location.href = '{{ route("membership.index") }}';
                }
            });

            // إضافة تأثيرات بصرية إضافية
            upgradeButton.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.05)';
            });

            upgradeButton.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
            });
        } else {
            console.error('زر الترقية غير موجود!');
        }
    });
}
</script>
@endsection