{{-- resources/views/superadmin/users/show.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'تفاصيل المستخدم - ' . $user->name)
@section('page-title', 'تفاصيل المستخدم')

@section('content')
<div class="space-y-6">
    
    <!-- معلومات المستخدم الأساسية -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
        <div class="bg-gradient-to-r from-primary-500 to-primary-600 px-6 py-8">
            <div class="flex items-center space-x-6 space-x-reverse">
                <div class="relative">
                    <img class="h-24 w-24 rounded-full border-4 border-white object-cover" 
                         src="{{ $user->avatar_url }}" 
                         alt="{{ $user->name }}">
                    @if($user->is_online)
                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 border-3 border-white rounded-full"></div>
                    @endif
                </div>
                <div class="flex-1 text-white">
                    <h1 class="text-2xl font-bold">{{ $user->name }}</h1>
                    <p class="text-primary-100">{{ $user->email }}</p>
                    @if($user->username)
                        <p class="text-primary-200 text-sm">{{ $user->username }}</p>
                    @endif
                    <div class="mt-2 flex items-center space-x-4 space-x-reverse">
                        @foreach($user->roles as $role)
                            <span class="inline-flex px-3 py-1 text-xs font-medium rounded-full bg-white/20 text-white">
                                {{ $role->name == 'super-admin' ? 'إدارة عليا' : 
                                   ($role->name == 'advisor' ? 'مستشار' : 
                                   ($role->name == 'moderator' ? 'مشرف' :
                                   ($role->name == 'official-member' ? 'عضو رسمي' : 'عضو بيتا'))) }}
                            </span>
                        @endforeach
                        <span class="inline-flex px-3 py-1 text-xs font-medium rounded-full
                            {{ $user->account_status === 'active' ? 'bg-green-100 text-green-800' : 
                               ($user->account_status === 'suspended' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                            {{ $user->account_status === 'active' ? 'نشط' : 
                               ($user->account_status === 'suspended' ? 'معلق' : 'محظور') }}
                        </span>
                    </div>
                </div>
                
                <!-- إجراءات سريعة -->
                <div class="flex flex-col space-y-2">
                    <a href="{{ route('superadmin.users.edit', $user) }}" 
                       class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors text-center">
                        تعديل البيانات
                    </a>
                    @if(!$user->hasRole('super-admin'))
                        <button onclick="toggleUserStatus({{ $user->id }}, '{{ $user->account_status }}')" 
                                class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
                            {{ $user->account_status === 'active' ? 'تعليق الحساب' : 'تفعيل الحساب' }}
                        </button>
                    @endif
                </div>
            </div>
        </div>
        
        <!-- إحصائيات سريعة -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 p-6">
            <div class="text-center">
                <div class="text-3xl font-bold text-primary-600">{{ number_format($stats['total_points']) }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">إجمالي النقاط</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-green-600">{{ number_format($stats['points_this_month']) }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">نقاط هذا الشهر</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-600">{{ $stats['evaluations_count'] }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">التقييمات</div>
            </div>
           
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- المعلومات الشخصية -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- بيانات التواصل والمعلومات الأساسية -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">المعلومات الأساسية</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">الاسم الكامل</label>
                        <p class="text-gray-900 dark:text-white font-medium">{{ $user->name }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">البريد الإلكتروني</label>
                        <p class="text-gray-900 dark:text-white">{{ $user->email }}</p>
                    </div>
                    
                    @if($user->phone)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">رقم الهاتف</label>
                        <p class="text-gray-900 dark:text-white">{{ $user->phone }}</p>
                    </div>
                    @endif
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">الجنس</label>
                        <p class="text-gray-900 dark:text-white">{{ $user->gender === 'male' ? 'ذكر' : 'أنثى' }}</p>
                    </div>
                    
           
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">تاريخ الانضمام</label>
                        <p class="text-gray-900 dark:text-white">{{ $user->joined_at?->format('Y/m/d') ?? 'غير محدد' }}</p>
                    </div>
                    
                    @if($user->became_official_at)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">تاريخ الترقية لرسمي</label>
                        <p class="text-gray-900 dark:text-white">{{ $user->became_official_at->format('Y/m/d') }}</p>
                    </div>
                    @endif
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">آخر نشاط</label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $user->last_activity ? $user->last_activity->diffForHumans() : 'لم يسجل دخول بعد' }}
                        </p>
                    </div>
                </div>
                
                @if($user->bio)
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">السيرة الذاتية</label>
                    <p class="text-gray-900 dark:text-white mt-2 leading-relaxed">{{ $user->bio }}</p>
                </div>
                @endif
                
                @if($user->admin_notes)
                <div class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                    <label class="block text-sm font-medium text-yellow-800 dark:text-yellow-200">ملاحظات الإدارة</label>
                    <p class="text-yellow-700 dark:text-yellow-300 mt-2">{{ $user->admin_notes }}</p>
                </div>
                @endif
            </div>
            
            <!-- الأنشطة الأخيرة -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الأنشطة الأخيرة</h3>
                
                @if($recentActivities->count() > 0)
                    <div class="flow-root">
                        <ul class="-mb-8">
                            @foreach($recentActivities as $activity)
                            <li>
                                <div class="relative pb-8 {{ !$loop->last ? '' : '' }}">
                                    @if (!$loop->last)
                                        <span class="absolute top-4 right-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-600"></span>
                                    @endif
                                    <div class="relative flex space-x-3 space-x-reverse">
                                        <div>
                                            <span class="h-8 w-8 rounded-full flex items-center justify-center
                                                @if($activity['type'] === 'point')
                                                    {{ $activity['points'] > 0 ? 'bg-green-500' : 'bg-red-500' }}
                                                @elseif($activity['type'] === 'evaluation')
                                                    bg-blue-500
                                                @else
                                                    bg-gray-500
                                                @endif">
                                                @if($activity['type'] === 'point')
                                                    @if($activity['points'] > 0)
                                                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                        </svg>
                                                    @else
                                                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                                                        </svg>
                                                    @endif
                                                @elseif($activity['type'] === 'evaluation')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v1h2m3 0h6m-5 0L9 10v1a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h2m2 5h6m-5 5l3.5-3.5m-7 0L9 12"></path>
                                                    </svg>
                                                @endif
                                            </span>
                                        </div>
                                        <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 space-x-reverse">
                                            <div>
                                                <p class="text-sm text-gray-900 dark:text-white">
                                                    {{ $activity['description'] }}
                                                    @if($activity['type'] === 'point' && isset($activity['points']))
                                                        <span class="font-medium text-{{ $activity['points'] > 0 ? 'green' : 'red' }}-600">
                                                            ({{ $activity['points'] > 0 ? '+' : '' }}{{ $activity['points'] }} نقطة)
                                                        </span>
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="text-left text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
                                                <time>{{ $activity['created_at']->diffForHumans() }}</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 mx-auto text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-gray-500 dark:text-gray-400">لا توجد أنشطة حديثة</p>
                    </div>
                @endif
            </div>
        </div>
        
        <!-- الشريط الجانبي -->
        <div class="space-y-6">
            
            <!-- الأدوار والصلاحيات -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الأدوار والصلاحيات</h3>
                
                <div class="space-y-3">
                    @foreach($user->roles as $role)
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center space-x-3 space-x-reverse">
                                <div class="w-3 h-3 rounded-full bg-primary-500"></div>
                                <span class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ $role->name == 'super-admin' ? 'إدارة عليا' : 
                                       ($role->name == 'advisor' ? 'مستشار التيم' : 
                                       ($role->name == 'moderator' ? 'مشرف' :
                                       ($role->name == 'official-member' ? 'عضو رسمي' : 'عضو بيتا'))) }}
                                </span>
                            </div>
                            @if(!$user->hasRole('super-admin') || $user->roles->count() > 1)
                                <button onclick="removeRole('{{ $role->name }}')" 
                                        class="text-red-500 hover:text-red-700 text-xs">
                                    إزالة
                                </button>
                            @endif
                        </div>
                    @endforeach
                    
                    @if($user->permissions->count() > 0)
                        <div class="mt-4">
                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">صلاحيات إضافية:</p>
                            <div class="flex flex-wrap gap-2">
                                @foreach($user->permissions as $permission)
                                    <span class="inline-flex px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100 rounded-full">
                                        {{ $permission->name }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- إحصائيات مفصلة -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">إحصائيات مفصلة</h3>
                
                <div class="space-y-4">
             
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">التقييمات الإجمالية</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $stats['evaluations_count'] }}</span>
                    </div>
                    
                    @if($stats['violations_count'] > 0)
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">المخالفات</span>
                        <span class="text-sm font-medium text-red-600">{{ $stats['violations_count'] }}</span>
                    </div>
                    @endif
                    
                    <div class="pt-3 border-t border-gray-200 dark:border-gray-600">
                        <div class="flex justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">إجمالي النقاط</span>
                            <span class="text-lg font-bold text-primary-600">{{ number_format($stats['total_points']) }}</span>
                        </div>
                    </div>
                </div>
            </div>
      
        </div>
    </div>
</div>

<!-- مودال إضافة النقاط -->
<div id="addPointsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 m-4 max-w-md w-full">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">إضافة نقاط</h3>
        <form id="addPointsForm">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">عدد النقاط</label>
                    <input type="number" 
                           name="points" 
                           min="1" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white"
                           required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">سبب الإضافة</label>
                    <textarea name="reason" 
                              rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب سبب إضافة النقاط..." 
                              required></textarea>
                </div>
            </div>
            <div class="flex space-x-3 space-x-reverse mt-6">
                <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                    إضافة النقاط
                </button>
                <button type="button" onclick="hideAddPointsModal()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
                    إلغاء
                </button>
            </div>
        </form>
    </div>
</div>

<!-- مودال خصم النقاط -->
<div id="deductPointsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 m-4 max-w-md w-full">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">خصم نقاط</h3>
        <form id="deductPointsForm">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">عدد النقاط</label>
                    <input type="number" 
                           name="points" 
                           min="1" 
                           max="{{ $user->total_points }}" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white"
                           required>
                    <p class="text-xs text-gray-500 mt-1">الحد الأقصى: {{ number_format($user->total_points) }} نقطة</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">سبب الخصم</label>
                    <textarea name="reason" 
                              rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب سبب خصم النقاط..." 
                              required></textarea>
                </div>
            </div>
            <div class="flex space-x-3 space-x-reverse mt-6">
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors">
                    خصم النقاط
                </button>
                <button type="button" onclick="hideDeductPointsModal()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
                    إلغاء
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// تبديل حالة المستخدم
function toggleUserStatus(userId, currentStatus) {
    const newStatus = currentStatus === 'active' ? 'معلق' : 'نشط';
    
    if (confirm(`هل تريد تغيير حالة المستخدم إلى ${newStatus}؟`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/superadmin/users/${userId}/toggle-status`;
        
        form.innerHTML = `
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
        `;
        
        document.body.appendChild(form);
        form.submit();
    }
}

// إظهار مودال إضافة النقاط
function showAddPointsModal() {
    document.getElementById('addPointsModal').classList.remove('hidden');
    document.getElementById('addPointsModal').classList.add('flex');
}

// إخفاء مودال إضافة النقاط
function hideAddPointsModal() {
    document.getElementById('addPointsModal').classList.add('hidden');
    document.getElementById('addPointsModal').classList.remove('flex');
}

// إظهار مودال خصم النقاط
function showDeductPointsModal() {
    document.getElementById('deductPointsModal').classList.remove('hidden');
    document.getElementById('deductPointsModal').classList.add('flex');
}

// إخفاء مودال خصم النقاط
function hideDeductPointsModal() {
    document.getElementById('deductPointsModal').classList.add('hidden');
    document.getElementById('deductPointsModal').classList.remove('flex');
}

// معالجة نموذج إضافة النقاط
document.getElementById('addPointsForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(`/superadmin/users/{{ $user->id }}/add-points`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('حدث خطأ أثناء إضافة النقاط');
        }
    })
    .catch(error => {
        alert('حدث خطأ في الشبكة');
    });
});

// معالجة نموذج خصم النقاط
document.getElementById('deductPointsForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(`/superadmin/users/{{ $user->id }}/deduct-points`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('حدث خطأ أثناء خصم النقاط');
        }
    })
    .catch(error => {
        alert('حدث خطأ في الشبكة');
    });
});

// إزالة دور
function removeRole(roleName) {
    if (confirm(`هل أنت متأكد من إزالة دور "${roleName}"؟`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/superadmin/users/{{ $user->id }}/remove-role`;
        
        form.innerHTML = `
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="role" value="${roleName}">
        `;
        
        document.body.appendChild(form);
        form.submit();
    }
}

// تغيير دور المستخدم
function changeUserRole() {
    // يمكن إضافة مودال لتغيير الدور هنا
    window.location.href = `/superadmin/users/{{ $user->id }}/edit`;
}
</script>
@endsection