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

@section('title', 'إدارة الأدوار')
@section('page-title', 'إدارة الأدوار')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- رأس الصفحة -->
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mb-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <div>
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">إدارة الأدوار</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-2">إدارة أدوار المستخدمين والصلاحيات في النظام</p>
            </div>
            <a href="{{ route('superadmin.roles.create') }}" 
               class="mt-4 md:mt-0 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-lg transition-all duration-200 flex items-center justify-center space-x-2 space-x-reverse shadow-lg transform hover:scale-105">
                <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                <span>إضافة دور جديد</span>
            </a>
        </div>
    </div>

    <!-- إحصائيات سريعة -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">إجمالي الأدوار</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $roles->count() }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" 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>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
            
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-100 text-sm font-medium">إجمالي المستخدمين</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $totalUsers ?? 0 }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" 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>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium">أدوار مخصصة</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $customRoles ?? 0 }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" 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 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- قائمة الأدوار كـ Cards -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 ml-2 text-blue-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>
                قائمة الأدوار
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400">{{ $roles->count() }} دور</span>
        </div>
        
        @forelse($roles as $role)
        <div class="mb-4 last:mb-0">
            <div class="bg-gradient-to-r {{ $role->name == 'super-admin' ? 'from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800' : 
                                          ($role->name == 'advisor' ? 'from-purple-50 to-purple-100 dark:from-purple-900 dark:to-purple-800' : 
                                          ($role->name == 'moderator' ? 'from-green-50 to-green-100 dark:from-green-900 dark:to-green-800' : 
                                          ($role->name == 'official-member' ? 'from-yellow-50 to-yellow-100 dark:from-yellow-900 dark:to-yellow-800' : 
                                          'from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600'))) }} rounded-lg p-5 hover:shadow-lg transition-all duration-200 border-2 {{ $role->name == 'super-admin' ? 'border-blue-200 dark:border-blue-700' : 'border-gray-200 dark:border-gray-600' }}">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                    <!-- معلومات الدور -->
                    <div class="flex items-center flex-1">
                        <div class="flex-shrink-0">
                            <div class="h-16 w-16 rounded-xl bg-gradient-to-br {{ $role->name == 'super-admin' ? 'from-blue-500 to-blue-600' : 
                                                                                  ($role->name == 'advisor' ? 'from-purple-500 to-purple-600' : 
                                                                                  ($role->name == 'moderator' ? 'from-green-500 to-green-600' : 
                                                                                  ($role->name == 'official-member' ? 'from-yellow-500 to-yellow-600' : 
                                                                                  'from-gray-500 to-gray-600'))) }} flex items-center justify-center shadow-lg">
                                <svg class="w-8 h-8 text-white" 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>
                        </div>
                        <div class="mr-4 flex-1">
                            <div class="flex items-center space-x-2 space-x-reverse">
                                <h4 class="text-lg font-bold text-gray-900 dark:text-white">
                                    {{ $role->name == 'super-admin' ? 'الإدارة العليا' : 
                                       ($role->name == 'advisor' ? 'مستشار التيم' : 
                                       ($role->name == 'moderator' ? 'مشرف' :
                                       ($role->name == 'official-member' ? 'عضو رسمي' : 
                                       ($role->name == 'member' ? 'عضو بيتا' : $role->display_name ?? $role->name)))) }}
                                </h4>
                                @if($role->name == 'super-admin')
                                    <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-blue-600 text-white">
                                        <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M12 1.586l-4 4v12.828l4-4V1.586zM3.707 3.293A1 1 0 002 4v10a1 1 0 00.293.707L6 18.414V5.586L3.707 3.293zM17.707 5.293L14 1.586v12.828l2.293 2.293A1 1 0 0018 16V6a1 1 0 00-.293-.707z" clip-rule="evenodd"/>
                                        </svg>
                                        محمي
                                    </span>
                                @endif
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ $role->name }}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                {{ Str::limit($role->description, 80) ?: 'لا يوجد وصف لهذا الدور' }}
                            </p>
                        </div>
                    </div>

                    <!-- الإحصائيات -->
                    <div class="flex flex-wrap items-center gap-3">
           

                        <!-- عدد المستخدمين -->
                        <div class="flex items-center px-4 py-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm">
                            <svg class="w-5 h-5 text-green-600 dark:text-green-400 ml-2" 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>
                            <div>
                                <p class="text-xs text-gray-500 dark:text-gray-400">المستخدمين</p>
                                <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $role->users->count() }}</p>
                            </div>
                        </div>

                        <!-- الإجراءات -->
                        <div class="flex items-center space-x-2 space-x-reverse">
                            <!-- عرض -->
                            <a href="{{ route('superadmin.roles.show', $role) }}" 
                               class="p-2 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                               title="عرض التفاصيل">
                                <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="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>
                            </a>
                            
                            @if($role->name !== 'super-admin')
                                <!-- تعديل -->
                                <a href="{{ route('superadmin.roles.edit', $role) }}" 
                                   class="p-2 bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 rounded-lg hover:bg-green-200 dark:hover:bg-green-800 transition-colors"
                                   title="تعديل الدور">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                    </svg>
                                </a>
                                
                                <!-- حذف -->
                                @if($role->users->count() == 0)
                                    <form action="{{ route('superadmin.roles.destroy', $role) }}" method="POST" class="inline" onsubmit="return confirmDelete('{{ $role->name }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                class="p-2 bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-300 rounded-lg hover:bg-red-200 dark:hover:bg-red-800 transition-colors"
                                                title="حذف الدور">
                                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                        </button>
                                    </form>
                                @else
                                    <button class="p-2 bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 rounded-lg cursor-not-allowed" 
                                            title="لا يمكن حذف الدور لوجود مستخدمين مرتبطين به" disabled>
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                @endif
                            @else
                                <button class="p-2 bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 rounded-lg cursor-not-allowed" 
                                        title="لا يمكن تعديل أو حذف دور الإدارة العليا" disabled>
                                    <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                    </svg>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>

         
            </div>
        </div>
        @empty
        <!-- حالة عدم وجود أدوار -->
        <div class="text-center py-16">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full mb-4">
                <svg class="w-10 h-10 text-gray-400 dark:text-gray-500" 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="text-xl font-medium text-gray-900 dark:text-white mb-2">لا توجد أدوار</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">ابدأ بإنشاء دور جديد للنظام</p>
            <a href="{{ route('superadmin.roles.create') }}" 
               class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors space-x-2 space-x-reverse">
                <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                <span>إضافة أول دور</span>
            </a>
        </div>
        @endforelse
    </div>
</div>

<script>
function confirmDelete(roleName) {
    return confirm('هل أنت متأكد من حذف دور "' + roleName + '"؟\n\nهذا الإجراء لا يمكن التراجع عنه وسيتم حذف جميع الصلاحيات المرتبطة به.');
}
</script>
@endsection