@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header">
            <h1 class="page-title">Gerenciamento de Usuários</h1>
            <p class="page-subtitle">Controle e administração dos usuários do sistema</p>
        </div>

        <div class="users-card">
            <div class="users-header">
                <h3 class="users-title">Lista de Usuários</h3>
                <div class="users-actions">
                    <input type="text" class="search-input" placeholder="Buscar usuários..." id="searchInput" onkeyup="searchUsers()">
                    <a href="{{ route('usuarios.create') }}" class="btn-primary">
                        <i class="fas fa-plus"></i>
                        Novo Usuário
                    </a>
                </div>
            </div>

            <table class="users-table">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>E-mail</th>
                        <th>Tipo</th>
                        <th>Status</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($usuarios as $usuario)
                        <tr>
                            <td>{{ $usuario->name }}</td>
                            <td>{{ $usuario->email }}</td>
                            <td>
                                @if($usuario->tipoUsuario)
                                    <span class="user-type-badge type-{{ strtolower($usuario->tipoUsuario->slug ?? 'default') }}">
                                        {{ $usuario->tipoUsuario->nome }}
                                    </span>
                                @else
                                    <span class="user-type-badge type-default">Sem tipo</span>
                                @endif
                            </td>
                            <td>
                                @if($usuario->status === 'Ativo')
                                    <span class="status-badge status-active">Ativo</span>
                                @else
                                    <span class="status-badge status-inactive">Bloqueado</span>
                                @endif
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('usuarios.edit', $usuario->id) }}" class="btn-action btn-edit" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <h3>Nenhum usuário encontrado</h3>
                                    <p>Cadastre um novo usuário para começar.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </main>
@endsection