@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header">
            <h1 class="page-title">Tipos de Usuários</h1>
            <p class="page-subtitle">Gerencie os tipos de usuários do sistema</p>
        </div>

        <!-- Filters and Actions -->
        <div class="filters-card">
            <div class="filters-content">
                <div class="filters-left">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input
                            type="text"
                            class="search-input"
                            placeholder="Buscar por nome..."
                            id="searchInput"
                            oninput="filterUserTypes()"
                        >
                    </div>

                    <div class="filter-group">
                        <select class="filter-select" id="statusFilter" onchange="filterUserTypes()">
                            <option value="">Todos os Status</option>
                            <option value="active">Ativo</option>
                            <option value="blocked">Bloqueado</option>
                        </select>
                    </div>
                </div>

                <div class="filters-right">
                    <button type="button" class="btn-primary" onclick="addUserType()">
                        <i class="fas fa-plus"></i>
                        Novo Tipo de Usuário
                    </button>
                </div>
            </div>
        </div>

        <!-- User Types List -->
        <div class="list-card">
            <div class="list-header">
                <h3 class="list-title">
                    <i class="fas fa-users-cog"></i>
                    Lista de Tipos de Usuários
                </h3>
                <div class="list-info">
                    <span class="total-count" id="totalCount">8 tipos encontrados</span>
                </div>
            </div>

            <!-- Desktop Table -->
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th onclick="sortTable('name')">
                                Nome
                                <i class="fas fa-sort sort-icon"></i>
                            </th>
                            <th onclick="sortTable('status')">
                                Status
                                <i class="fas fa-sort sort-icon"></i>
                            </th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody id="userTypesTableBody">
                        @php
                            $userTypes = [
                                ['id' => 1, 'name' => 'Administrador', 'description' => 'Acesso total ao sistema',        'status' => 'active',  'icon' => 'fas fa-crown'],
                                ['id' => 2, 'name' => 'Gerente',       'description' => 'Gerenciamento de operações',     'status' => 'active',  'icon' => 'fas fa-user-tie'],
                                ['id' => 3, 'name' => 'Supervisor',    'description' => 'Supervisão de equipes',          'status' => 'active',  'icon' => 'fas fa-user-shield'],
                                ['id' => 4, 'name' => 'Operador',      'description' => 'Operação de máquinas',           'status' => 'active',  'icon' => 'fas fa-cogs'],
                                ['id' => 5, 'name' => 'Técnico',       'description' => 'Manutenção e suporte',           'status' => 'active',  'icon' => 'fas fa-tools'],
                                ['id' => 6, 'name' => 'Analista',      'description' => 'Análise de dados',               'status' => 'blocked', 'icon' => 'fas fa-chart-line'],
                                ['id' => 7, 'name' => 'Visualizador',  'description' => 'Apenas visualização',            'status' => 'active',  'icon' => 'fas fa-eye'],
                                ['id' => 8, 'name' => 'Convidado',     'description' => 'Acesso temporário',             'status' => 'blocked', 'icon' => 'fas fa-user-clock'],
                            ];
                        @endphp

                        @foreach ($userTypes as $type)
                            <tr data-name="{{ $type['name'] }}" data-status="{{ $type['status'] }}">
                                <td>
                                    <div class="user-type-info">
                                        <div class="user-type-avatar">
                                            <i class="{{ $type['icon'] }}"></i>
                                        </div>
                                        <div class="user-type-details">
                                            <div class="user-type-name">{{ $type['name'] }}</div>
                                            <div class="user-type-description">{{ $type['description'] }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @php
                                        $isActive = $type['status'] === 'active';
                                    @endphp
                                    <span class="status-badge {{ $isActive ? 'status-active' : 'status-blocked' }}">
                                        <i class="fas {{ $isActive ? 'fa-check-circle' : 'fa-ban' }}"></i>
                                        {{ $isActive ? 'Ativo' : 'Bloqueado' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button type="button" class="action-btn edit-btn" onclick="editUserType({{ $type['id'] }})" title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="action-btn delete-btn" onclick="deleteUserType({{ $type['id'] }}, '{{ $type['name'] }}')" title="Excluir">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Mobile Cards -->
            <div class="mobile-cards" id="mobileCards">
                @foreach ($userTypes as $type)
                    @php $isActive = $type['status'] === 'active'; @endphp
                    <div class="mobile-card" data-name="{{ $type['name'] }}" data-status="{{ $type['status'] }}">
                        <div class="mobile-card-header">
                            <div class="user-type-info">
                                <div class="user-type-avatar">
                                    <i class="{{ $type['icon'] }}"></i>
                                </div>
                                <div class="user-type-details">
                                    <div class="user-type-name">{{ $type['name'] }}</div>
                                    <div class="user-type-description">{{ $type['description'] }}</div>
                                </div>
                            </div>
                            <span class="status-badge {{ $isActive ? 'status-active' : 'status-blocked' }}">
                                <i class="fas {{ $isActive ? 'fa-check-circle' : 'fa-ban' }}"></i>
                                {{ $isActive ? 'Ativo' : 'Bloqueado' }}
                            </span>
                        </div>
                        <div class="mobile-card-actions">
                            <button type="button" class="action-btn edit-btn" onclick="editUserType({{ $type['id'] }})">
                                <i class="fas fa-edit"></i>
                                Editar
                            </button>
                            <button type="button" class="action-btn delete-btn" onclick="deleteUserType({{ $type['id'] }}, '{{ $type['name'] }}')">
                                <i class="fas fa-trash"></i>
                                Excluir
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Empty State -->
            <div class="empty-state" id="emptyState" style="display: none;">
                <div class="empty-icon">
                    <i class="fas fa-users-cog"></i>
                </div>
                <h3>Nenhum tipo de usuário encontrado</h3>
                <p>Não há tipos de usuários que correspondam aos filtros aplicados.</p>
                <button type="button" class="btn-primary" onclick="clearFilters()">
                    <i class="fas fa-filter"></i>
                    Limpar Filtros
                </button>
            </div>
        </div>
    </main>
@endsection