@extends('layouts.app')

@section('content')
<div class="modern-page-container">
    <!-- Header da página -->
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <h1 class="page-title">Usuários</h1>
                <p class="page-subtitle">Gerencie os usuários do sistema</p>
            </div>
            @can('users.create')
            <a href="{{ route('users.create') }}" class="btn-modern btn-primary">
                <i class="bi bi-plus-lg"></i>
                <span>Novo Usuário</span>
            </a>
            @endcan
        </div>
    </div>

    <!-- Filtros -->
    <div class="filters-card">
        <form action="{{ route('users.index') }}" method="GET" class="filters-form">
            <div class="filters-grid">
                <div class="filter-group filter-search">
                    <div class="search-input-wrapper">
                        <i class="bi bi-search search-icon"></i>
                        <input type="text" 
                               class="form-control-modern search-input" 
                               placeholder="Buscar por nome ou email..." 
                               name="search" 
                               value="{{ request('search') }}">
                        <button type="submit" class="search-button">
                            Buscar
                        </button>
                        @if(request()->hasAny(['search', 'status', 'per_page']))
                            <a href="{{ route('users.index') }}" class="clear-filters-btn">
                                <i class="bi bi-x-lg"></i>
                            </a>
                        @endif
                    </div>
                </div>
                <div class="filter-group">
                    <select name="status" class="form-select-modern" onchange="this.form.submit()">
                        <option value="">Todos os status</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Ativos</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inativos</option>
                    </select>
                </div>
                <div class="filter-group">
                    <select name="per_page" class="form-select-modern" onchange="this.form.submit()">
                        @foreach($perPageOptions as $option)
                            <option value="{{ $option }}" {{ request('per_page', 10) == $option ? 'selected' : '' }}>
                                {{ $option }} por página
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
    </div>

    <!-- Tabela de usuários -->
    <div class="data-card">
        <div class="table-wrapper">
            <table class="table-modern">
                <thead>
                    <tr>
                        <th>
                            <a href="{{ route('users.index', array_merge(request()->query(), [
                                'sort' => 'name',
                                'direction' => request('sort') === 'name' && request('direction') === 'asc' ? 'desc' : 'asc'
                            ])) }}" class="table-sort-link">
                                Nome
                                @if(request('sort') === 'name')
                                    <i class="bi bi-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} sort-icon"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a href="{{ route('users.index', array_merge(request()->query(), [
                                'sort' => 'email',
                                'direction' => request('sort') === 'email' && request('direction') === 'asc' ? 'desc' : 'asc'
                            ])) }}" class="table-sort-link">
                                Email
                                @if(request('sort') === 'email')
                                    <i class="bi bi-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} sort-icon"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a href="{{ route('users.index', array_merge(request()->query(), [
                                'sort' => 'perfil',
                                'direction' => request('sort') === 'perfil' && request('direction') === 'asc' ? 'desc' : 'asc'
                            ])) }}" class="table-sort-link">
                                Perfil
                                @if(request('sort') === 'perfil')
                                    <i class="bi bi-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} sort-icon"></i>
                                @endif
                            </a>
                        </th>
                        <th>Status</th>
                        <th class="actions-column">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                    <tr class="table-row">
                        <td>
                            <div class="user-info">
                                <div class="user-avatar">
                                    @if($user->avatar)
                                        <img src="{{ asset('storage/' . $user->avatar) }}" 
                                             alt="{{ $user->name }}" 
                                             class="avatar-image">
                                    @else
                                        <div class="avatar-placeholder">
                                            <i class="bi bi-person"></i>
                                        </div>
                                    @endif
                                </div>
                                <span class="user-name">{{ $user->name }}</span>
                            </div>
                        </td>
                        <td>
                            <span class="user-email">{{ $user->email }}</span>
                        </td>
                        <td>
                            @if($user->perfil)
                                <span class="perfil-badge perfil-{{ strtolower(str_replace(' ', '-', $user->perfil)) }}">
                                    {{ $user->perfil }}
                                </span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($user->active)
                                <span class="status-badge status-active">Ativo</span>
                            @else
                                <span class="status-badge status-inactive">Inativo</span>
                            @endif
                        </td>
                        <td>
                            <div class="action-buttons">
                                @can('users.edit')
                                <a href="{{ route('users.edit', $user) }}" 
                                   class="action-btn edit-btn" 
                                   title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endcan

                                @can('users.delete')
                                @if(!$user->is_admin)
                                <form action="{{ route('users.destroy', $user) }}" 
                                      method="POST" 
                                      class="d-inline"
                                      onsubmit="return confirm('Tem certeza que deseja excluir este usuário?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="action-btn delete-btn" 
                                            title="Excluir">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5">
                            <div class="empty-state">
                                <div class="empty-state-icon">
                                    <i class="bi bi-people"></i>
                                </div>
                                <h3 class="empty-state-title">
                                    @if(request()->hasAny(['search', 'status', 'per_page']))
                                        Nenhum usuário encontrado
                                    @else
                                        Nenhum usuário cadastrado
                                    @endif
                                </h3>
                                <p class="empty-state-description">
                                    @if(request()->hasAny(['search', 'status', 'per_page']))
                                        Nenhum usuário encontrado com os filtros aplicados.
                                    @else
                                        Comece adicionando o primeiro usuário do sistema.
                                    @endif
                                </p>
                                @if(request()->hasAny(['search', 'status', 'per_page']))
                                    <a href="{{ route('users.index') }}" class="btn-modern btn-outline">
                                        <i class="bi bi-x-lg"></i>
                                        <span>Limpar filtros</span>
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($users->hasPages())
        <div class="pagination-wrapper">
            <div class="pagination-info">
                <span class="pagination-text">
                    Exibindo {{ $users->firstItem() ?? 0 }}-{{ $users->lastItem() ?? 0 }} de {{ $users->total() }} resultados
                </span>
            </div>
            <div class="pagination-controls">
                {{ $users->withQueryString()->links('pagination::bootstrap-4') }}
            </div>
        </div>
        @endif
    </div>
</div>

<!-- 
==================================================
CSS INLINE REMOVIDO - USANDO CLASSES GLOBAIS
==================================================
Todos os estilos agora estão em public/css/modern-styles.css
Teste: users/index.blade.php - PRIMEIRA MIGRAÇÃO
==================================================
-->

@endsection