@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'إدارة الأدوار والصلاحيات' : 'Roles & Permissions' }}
    </h2>
    <a href="{{ route('admin.roles.create') }}" style="background: #d4af37; color: black; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'إضافة دور جديد' : 'Add New Role' }}
    </a>
</div>

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden">
                <div class="p-6">
                    <table class="w-full {{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                        <thead class="bg-black/50 text-gray-500 text-xs uppercase tracking-wider">
                            <tr>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'اسم الدور' : 'Role Name' }}</th>
                                <th class="px-6 py-4 font-medium text-center">{{ app()->getLocale() == 'ar' ? 'عدد المستخدمين' : 'Users Count' }}</th>
                                <th class="px-6 py-4 font-medium text-center">{{ app()->getLocale() == 'ar' ? 'العمليات' : 'Actions' }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            @foreach($roles as $role)
                            <tr class="hover:bg-white/5 transition-colors text-gray-300">
                                <td class="px-6 py-4 text-sm font-bold text-[#d4af37]">{{ $role->name }}</td>
                                <td class="px-6 py-4 text-sm text-center">
                                    <span class="px-3 py-1 bg-gray-800 rounded-full text-xs border border-gray-700">
                                        {{ $role->users_count }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center space-x-2 space-x-reverse">
                                    <a href="{{ route('admin.roles.edit', $role) }}" class="inline-flex items-center px-3 py-1 bg-gray-800 border border-gray-700 rounded-md font-semibold text-xs text-blue-400 uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none transition ease-in-out duration-150">
                                        {{ app()->getLocale() == 'ar' ? 'تعديل' : 'Edit' }}
                                    </a>
                                    @if($role->name !== 'Super Admin')
                                    <form action="{{ route('admin.roles.destroy', $role) }}" method="POST" class="inline-block" onsubmit="return confirm('{{ app()->getLocale() == 'ar' ? 'هل أنت متأكد من الحذف؟' : 'Are you sure?' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="inline-flex items-center px-3 py-1 bg-red-900/20 border border-red-500/20 rounded-md font-semibold text-xs text-red-400 uppercase tracking-widest hover:bg-red-500 hover:text-white transition ease-in-out duration-150">
                                            {{ app()->getLocale() == 'ar' ? 'حذف' : 'Delete' }}
                                        </button>
                                    </form>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection