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

@section('title', 'تفاصيل الدور - ' . $role->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 flex-col lg:flex-row items-center justify-between">
                <div class="text-white">
                    <h1 class="text-2xl font-bold">
                        {{ $role->name == 'super-admin' ? 'الإدارة العليا' : 
                           ($role->name == 'advisor' ? 'مستشار التيم' : 
                           ($role->name == 'moderator' ? 'مشرف' :
                           ($role->name == 'official-member' ? 'عضو رسمي' : 
                           ($role->name == 'member' ? 'عضو بيتا' : $role->display_name ?? $role->name)))) }}
                    </h1>
                    <p class="text-primary-100 text-sm">{{ $role->name }}</p>
                    @if($role->description)
                        <p class="text-primary-200 mt-2">{{ $role->description }}</p>
                    @endif
                </div>
                
                <!-- إجراءات سريعة -->
                <div class="flex space-x-2 space-x-reverse">
                    @if($role->name !== 'super-admin')
                        <a href="{{ route('superadmin.roles.edit', $role) }}" 
                           class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
                            تعديل الدور
                        </a>
                    @endif
                    <a href="{{ route('superadmin.roles.index') }}" 
                       class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
                        العودة للقائمة
                    </a>
                </div>
            </div>
        </div>
        
        <!-- إحصائيات سريعة -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
            <div class="text-center">
                <div class="text-3xl font-bold text-primary-600">{{ $stats['users_count'] }}</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['created_days_ago'] }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">يوم منذ الإنشاء</div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 ">
        
 
        
        <!-- قائمة المستخدمين -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    المستخدمون بهذا الدور
                </h3>
                @if($role->users->count() > 5)
                    <a href="{{ route('superadmin.roles.users', $role) }}" 
                       class="text-primary-600 hover:text-primary-800 text-sm font-medium">
                        عرض الكل
                    </a>
                @endif
            </div>
            
            @if($role->users->count() > 0)
                <div class="space-y-3 max-h-96 overflow-y-auto">
                    @foreach($role->users->take(10) as $user)
                        <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <img class="w-10 h-10 rounded-full object-cover" 
                                 src="{{ $user->avatar_url }}" 
                                 alt="{{ $user->name }}">
                            <div class="mr-3 flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                    {{ $user->name }}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                    {{ $user->email }}
                                </p>
                            </div>
                            <div class="flex items-center space-x-2 space-x-reverse">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
                                    {{ $user->account_status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ $user->account_status === 'active' ? 'نشط' : 'معلق' }}
                                </span>
                                <a href="{{ route('superadmin.users.show', $user) }}" 
                                   class="text-primary-600 hover:text-primary-800 text-xs">
                                    عرض
                                </a>
                            </div>
                        </div>
                    @endforeach
                </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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-1a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                    <p class="text-gray-500 dark:text-gray-400">لا يوجد مستخدمون بهذا الدور</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- مودال تعديل الصلاحيات -->
@if($role->name !== 'super-admin')
<div id="editPermissionsModal" 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-4xl w-full max-h-96 overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">تعديل صلاحيات الدور</h3>
            <button onclick="hideEditPermissionsModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        
        <form id="updatePermissionsForm">
            @csrf
            <div class="space-y-4">
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3 max-h-64 overflow-y-auto">
                    <!-- سيتم تحميل الصلاحيات هنا عبر JavaScript -->
                </div>
                <div class="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
                    <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors">
                        حفظ التغييرات
                    </button>
                    <button type="button" onclick="hideEditPermissionsModal()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
                        إلغاء
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

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

// إظهار مودال تعديل الصلاحيات
function showEditPermissionsModal() {
    document.getElementById('editPermissionsModal').classList.remove('hidden');
    document.getElementById('editPermissionsModal').classList.add('flex');
    loadAllPermissions();
}

// إخفاء مودال تعديل الصلاحيات
function hideEditPermissionsModal() {
    document.getElementById('editPermissionsModal').classList.add('hidden');
    document.getElementById('editPermissionsModal').classList.remove('flex');
}

// تحميل جميع الصلاحيات المتاحة
function loadAllPermissions() {
    // محاكاة تحميل الصلاحيات - يجب استبدالها بـ AJAX call
    const permissions = [
        { name: 'manage_users', hasPermission: {{ $role->hasPermissionTo('manage_users') ? 'true' : 'false' }} },
        { name: 'view_evaluations', hasPermission: {{ $role->hasPermissionTo('view_evaluations') ? 'true' : 'false' }} },
        { name: 'create_evaluations', hasPermission: {{ $role->hasPermissionTo('create_evaluations') ? 'true' : 'false' }} },
        { name: 'manage_points', hasPermission: {{ $role->hasPermissionTo('manage_points') ? 'true' : 'false' }} },
    ];
    
    const container = document.querySelector('#updatePermissionsForm .grid');
    container.innerHTML = permissions.map(permission => `
        <label class="flex items-center p-2 bg-gray-50 dark:bg-gray-700 rounded cursor-pointer">
            <input type="checkbox" name="permissions[]" value="${permission.name}" 
                   ${permission.hasPermission ? 'checked' : ''}
                   class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
            <span class="mr-2 text-sm text-gray-700 dark:text-gray-300">${permission.name}</span>
        </label>
    `).join('');
}

// معالجة نموذج تحديث الصلاحيات
document.getElementById('updatePermissionsForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(`/superadmin/roles/{{ $role->id }}/sync-permissions`, {
        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('حدث خطأ في الشبكة');
    });
});
</script>
@endsection