@extends('layouts.admin')

@section('title', 'Attributions Rôles & Droits')

@section('content')
<div class="p-8">
    <header class="mb-10">
        <h1 class="text-4xl font-black text-gray-900 tracking-tight mb-2">Attribution rôles & droits</h1>
        <p class="text-gray-500">Vue d'ensemble des rôles assignés aux utilisateurs de la plateforme.</p>
    </header>

    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50/50 text-gray-400 uppercase text-[10px] font-black tracking-widest border-b border-gray-100">
                        <th class="py-6 px-8">Utilisateur</th>
                        <th class="py-6 px-8">Email</th>
                        <th class="py-6 px-8">Rôles Assignés</th>
                        <th class="py-6 px-8 text-right">Ancienneté</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($users as $u)
                        <tr class="hover:bg-gray-50/30 transition-colors">
                            <td class="py-6 px-8 font-bold text-gray-900">{{ $u->name }}</td>
                            <td class="py-6 px-8 text-gray-500">{{ $u->email }}</td>
                            <td class="py-6 px-8">
                                <div class="flex flex-wrap gap-2">
                                    @php $names = $u->roles->pluck('name')->values(); @endphp
                                    @forelse($names as $name)
                                        <span class="px-3 py-1 bg-royal-blue/5 text-royal-blue text-[10px] font-black rounded-lg uppercase border border-royal-blue/10">
                                            {{ $name }}
                                        </span>
                                    @empty
                                        <span class="text-gray-300 italic text-xs">Aucun rôle</span>
                                    @endforelse
                                </div>
                            </td>
                            <td class="py-6 px-8 text-gray-400 text-sm text-right font-medium">
                                {{ optional($u->created_at)->diffForHumans() }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="p-8 border-t border-gray-50">
            {{ $users->links() }}
        </div>
    </div>
</div>
@endsection