@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' ? 'إدارة المستخدمين' : 'Users Management' }}
    </h2>
    <a href="{{ route('admin.users.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 User' }}
    </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 text-gray-300">
                    <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' ? 'الاسم' : 'Name' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'البريد الإلكتروني' : 'Email' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'الدور' : 'Role' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'آخر دخول' : 'Last Login' }}</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($users as $user)
                            <tr class="hover:bg-white/5 transition-colors">
                                <td class="px-6 py-4 text-sm font-medium text-white">{{ $user->name }}</td>
                                <td class="px-6 py-4 text-sm text-gray-400">{{ $user->email }}</td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-wrap gap-1">
                                        @foreach($user->roles as $role)
                                            <span class="text-[10px] px-2 py-0.5 rounded-full bg-[#d4af37]/10 text-[#d4af37] border border-[#d4af37]/20">
                                                {{ $role->name }}
                                            </span>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    @if($user->status === 'active')
                                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/20">
                                            {{ app()->getLocale() == 'ar' ? 'نشط' : 'Active' }}
                                        </span>
                                    @else
                                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 border border-red-500/20">
                                            {{ app()->getLocale() == 'ar' ? 'غير نشط' : 'Inactive' }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-xs text-gray-500">
                                    {{ $user->last_login_at ? $user->last_login_at->diffForHumans() : (app()->getLocale() == 'ar' ? 'لم يسجل دخول بعد' : 'Never logged in') }}
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <a href="{{ route('admin.users.edit', $user) }}" class="inline-flex items-center px-3 py-1 bg-gray-800 border border-gray-700 rounded-md font-semibold text-xs text-gray-300 uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150">
                                        {{ app()->getLocale() == 'ar' ? 'تعديل' : 'Edit' }}
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @if($users->hasPages())
                    <div class="mt-6 p-4 border-t border-gray-800">
                        {{ $users->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection