@extends('layouts.app')

@section('title', 'Roles y permisos')

@section('content')
    <div class="mb-6 flex justify-end">
        <a href="{{ route('roles.create') }}">
            <x-button type="button"><i class="fa-solid fa-plus"></i> Nuevo rol</x-button>
        </a>
    </div>

    <x-card class="overflow-x-auto !p-0">
        <table class="min-w-full divide-y divide-gray-200 text-sm dark:divide-white/10">
            <thead>
                <tr class="text-left text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    <th class="px-6 py-4 font-medium">Rol</th>
                    <th class="px-6 py-4 font-medium">Permisos</th>
                    <th class="px-6 py-4 font-medium">Usuarios</th>
                    <th class="px-6 py-4 text-right font-medium">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-white/5">
                @foreach ($roles as $role)
                    <tr class="hover:bg-gray-50 dark:hover:bg-white/5">
                        <td class="px-6 py-4">
                            <span class="font-medium text-gray-900 dark:text-white">{{ ucfirst($role->name) }}</span>
                            @if (in_array($role->name, $protected, true))
                                <span class="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-500/15 dark:text-amber-400">
                                    <i class="fa-solid fa-lock mr-1 text-[10px]"></i>Sistema
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-300">
                            {{ $role->name === 'superadmin' ? 'Todos (acceso total)' : $role->permissions_count }}
                        </td>
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-300">{{ $role->users_count }}</td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('roles.edit', $role) }}" class="mr-2 text-primary hover:text-primary-dark" title="Editar">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            @if (!in_array($role->name, $protected, true))
                                <form method="POST" action="{{ route('roles.destroy', $role) }}" class="inline"
                                      onsubmit="return confirm('¿Eliminar el rol {{ $role->name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-500 hover:text-red-700" title="Eliminar">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </x-card>

    <div class="mt-6">{{ $roles->links() }}</div>
@endsection