@extends('layouts.app')

@section('titulo', 'Usuarios — GestionCob')

@section('contenido')

<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Usuarios del sistema</h1>
    <a href="{{ route('usuarios.create') }}"
       class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
        + Nuevo Usuario
    </a>
</div>

<div class="bg-white rounded shadow overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-800 text-white">
            <tr>
                <th class="px-4 py-3 text-left">Nombre</th>
                <th class="px-4 py-3 text-left">Email</th>
                <th class="px-4 py-3 text-left">Rol</th>
                <th class="px-4 py-3 text-left">Estado</th>
                <th class="px-4 py-3 text-left">Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($usuarios as $usuario)
            <tr class="border-b hover:bg-gray-50">
                <td class="px-4 py-3 font-medium">{{ $usuario->name }}</td>
                <td class="px-4 py-3 text-gray-600">{{ $usuario->email }}</td>
                <td class="px-4 py-3">
                    @foreach($usuario->roles as $rol)
                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
                            {{ ucfirst($rol->name) }}
                        </span>
                    @endforeach
                </td>
                <td class="px-4 py-3">
                    @if($usuario->is_active ?? true)
                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Activo</span>
                    @else
                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">Inactivo</span>
                    @endif
                </td>
                <td class="px-4 py-3">
                    <a href="{{ route('usuarios.edit', $usuario) }}"
                       class="text-blue-600 hover:underline mr-3">Editar</a>
                    @if($usuario->id !== auth()->id())
                    <form action="{{ route('usuarios.destroy', $usuario) }}"
                          method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                onclick="return confirm('¿Desactivar este usuario?')"
                                class="text-red-600 hover:underline">
                            Desactivar
                        </button>
                    </form>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-4 py-6 text-center text-gray-500">
                    No hay usuarios registrados.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection