@extends('layouts.app')

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

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

            <table class="users-table">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Descrição</th>
                        <th>Status</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tipos as $tipo)
                        <tr>
                            <td>
                                <i class="fas fa-user-tag text-primary me-2"></i>
                                {{ $tipo->nome }}
                            </td>
                            <td>
                                @php
                                    $totalPermissoes = collect([
                                        $tipo->clientes, $tipo->fornecedores, $tipo->pedido, $tipo->orcamento,
                                        $tipo->financeiro, $tipo->contas_apagar, $tipo->relatorios, $tipo->comissoes,
                                        $tipo->metas, $tipo->setores, $tipo->producao, $tipo->nota_compra,
                                        $tipo->faccao, $tipo->pedido_faccao, $tipo->configuracoes, $tipo->categoria_cliente,
                                        $tipo->formasdepag, $tipo->papel, $tipo->plastico, $tipo->tecido,
                                        $tipo->modelos, $tipo->dimensoes, $tipo->cores, $tipo->funcionario,
                                        $tipo->livros, $tipo->locacao
                                    ])->filter()->count();
                                @endphp
                                {{ $totalPermissoes }} permissões ativas
                            </td>
                            <td>
                                @if($tipo->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('tipos-usuarios.edit', $tipo->id) }}" class="btn-action btn-edit" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    @if(auth()->user()->canDelete())
                                    <form action="{{ route('tipos-usuarios.destroy', $tipo->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('Tem certeza que deseja excluir este tipo de usuário?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-action btn-delete" title="Excluir">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-users-cog"></i>
                                    </div>
                                    <h3>Nenhum tipo de usuário encontrado</h3>
                                    <p>Cadastre um novo tipo de usuário para começar.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </main>

    <script>
    function searchTiposUsuarios() {
        const input = document.getElementById('searchInput');
        const filter = input.value.toLowerCase();
        const table = document.querySelector('.users-table tbody');
        const rows = table.getElementsByTagName('tr');

        for (let i = 0; i < rows.length; i++) {
            const row = rows[i];
            const cells = row.getElementsByTagName('td');
            let found = false;

            for (let j = 0; j < cells.length; j++) {
                const cell = cells[j];
                if (cell) {
                    const textValue = cell.textContent || cell.innerText;
                    if (textValue.toLowerCase().indexOf(filter) > -1) {
                        found = true;
                        break;
                    }
                }
            }

            if (found) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        }
    }
    </script>
@endsection