@php
$title = 'Visualizar Usuário';
@endphp

<div>
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('admin.usuarios.list') }}`)" class="text-decoration-none text-secondary">Usuários</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Visualizar</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-1" style="font-size:2.1rem; letter-spacing:0.5px;">
                <i class="bi bi-person-gear me-2 text-primary"></i>{{ $user->name }}
            </h1>
            <span class="text-muted small">Detalhes e permissões do usuário</span>
        </div>
        <div class="d-flex gap-2">
            @php
                // Verificar se o usuário logado é administrador
                $isAdmin = auth()->user()->group && 
                           (strtolower(auth()->user()->group->name) === 'administradores' || 
                            strtolower(auth()->user()->group->name) === 'administrador');
                
                // Verificar se não está visualizando seu próprio usuário
                $isNotSelf = auth()->user()->id !== $user->id;
            @endphp
            
            @if($isAdmin && $isNotSelf)
            <button type="button" class="btn btn-outline-danger btn-sm" onclick="redefinirSenha(`{{ $user->id }}`, `{{ $user->name }}`, `{{ $user->email }}`)">
                <i class="bi bi-key me-1"></i>Redefinir Senha
            </button>
            @endif
            
            <button type="button" class="btn btn-warning btn-sm text-dark" onclick="carregarConteudo(`{{ route('admin.usuarios.edit', $user->id) }}`)">
                <i class="bi bi-pencil me-1"></i>Editar
            </button>
            <button type="button" class="btn btn-secondary btn-sm" onclick="carregarConteudo(`{{ route('admin.usuarios.list') }}`)">
                <i class="bi bi-arrow-left me-1"></i>Voltar
            </button>
        </div>
    </div>

    <!-- Card 1: Informações Básicas -->
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <i class="bi bi-info-circle me-2 text-primary" style="font-size: 1.2rem;"></i>
                <h5 class="mb-0 fw-bold">Informações Básicas</h5>
            </div>
            <p class="text-muted small mb-4">Dados pessoais e status do usuário</p>
            
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Código:</label>
                    <p class="mb-0 fw-bold text-danger">{{ $user->id }}</p>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Status:</label>
                    <p class="mb-0">
                        <span class="badge bg-{{ $user->is_active ? 'success' : 'secondary' }}">
                            {{ $user->is_active ? 'Ativo' : 'Inativo' }}
                        </span>
                    </p>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Criado em:</label>
                    <p class="mb-0">{{ $user->created_at->format('d/m/Y') }} às {{ $user->created_at->format('H:i') }}</p>
                </div>
            </div>
            
            <hr class="my-3">
            
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Nome:</label>
                    <p class="mb-0">{{ $user->name }}</p>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">E-mail:</label>
                    <p class="mb-0">{{ $user->email }}</p>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Última atualização:</label>
                    <p class="mb-0">{{ $user->updated_at->format('d/m/Y') }} às {{ $user->updated_at->format('H:i') }}</p>
                </div>
            </div>
            
            <hr class="my-3">
            
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-semibold text-muted small">Área:</label>
                    <p class="mb-0">
                        @if($user->area)
                            <span class="badge bg-primary">{{ $user->area->nome }}</span>
                        @else
                            <span class="text-muted">Não informado</span>
                        @endif
                    </p>
                </div>
                
                <div class="col-md-3">
                    <label class="form-label fw-semibold text-muted small">Cargo:</label>
                    <p class="mb-0">
                        @if($user->cargo)
                            <span class="badge bg-info text-dark">{{ $user->cargo->nome }}</span>
                        @else
                            <span class="text-muted">Não informado</span>
                        @endif
                    </p>
                </div>
                
                <div class="col-md-3">
                    <label class="form-label fw-semibold text-muted small">Vendedor(a):</label>
                    <p class="mb-0">
                        <span class="badge bg-{{ $user->is_vendedor ? 'success' : 'secondary' }}">
                            {{ $user->is_vendedor ? 'Sim' : 'Não' }}
                        </span>
                    </p>
                </div>
                
                <div class="col-md-3">
                    <label class="form-label fw-semibold text-muted small">&nbsp;</label>
                    <p class="mb-0">&nbsp;</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 2: Grupo de Acesso -->
    @if($user->group)
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <i class="bi bi-shield-check me-2 text-primary" style="font-size: 1.2rem;"></i>
                <h5 class="mb-0 fw-bold">Grupo de Acesso</h5>
            </div>
            <p class="text-muted small mb-4">Grupo associado e menus herdados</p>
            
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Grupo</label>
                    <p class="mb-0">
                        <span class="badge bg-primary" style="font-size: 0.9rem;">{{ $user->group->name }}</span>
                    </p>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Status do Grupo</label>
                    <p class="mb-0">
                        <span class="badge bg-{{ $user->group->is_active ? 'success' : 'secondary' }}">
                            {{ $user->group->is_active ? 'Ativo' : 'Inativo' }}
                        </span>
                    </p>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold text-muted small">Descrição</label>
                    <p class="mb-0">{{ $user->group->description ?? 'Sem descrição' }}</p>
                </div>
            </div>
            
            @if($user->group->menu_access && count($user->group->menu_access) > 0)
            <div class="mb-3">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-list-ul me-2 text-primary"></i>
                    <h6 class="mb-0 fw-bold">Menus Acessíveis (herdados do grupo)</h6>
                </div>
                
                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                    @foreach($user->group->menu_access as $menu)
                    @php
                        // Mapear ícones caso não venham do banco
                        $iconMap = [
                            'Dashboard' => 'speedometer2',
                            'Clientes' => 'people',
                            'Fornecedores' => 'truck',
                            'Transportes' => 'truck',
                            'Destinos' => 'geo-alt',
                            'Equipes' => 'diagram-3',
                            'Colaboradores' => 'people-fill',
                            'Serviços' => 'wrench-adjustable',
                            'Orçamentos' => 'file-earmark-text',
                            'Propostas' => 'file-earmark-text',
                            'Ordem de Serviço' => 'clipboard-check',
                            'Vendas' => 'cart',
                            'Financeiro' => 'currency-dollar',
                            'Pagamentos' => 'credit-card',
                            'Usuários' => 'person-gear',
                            'Grupos' => 'collection',
                            'Perfis' => 'shield-check'
                        ];
                        $icone = $menu['icone'] ?? ($iconMap[$menu['nome']] ?? 'folder');
                    @endphp
                    <div class="col">
                        <div class="card border h-100">
                            <div class="card-body p-3">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="rounded bg-light p-2 d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                                            <i class="bi bi-{{ $icone }} text-primary" style="font-size: 1.3rem;"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-0 fw-bold" style="font-size: 0.95rem;">{{ $menu['nome'] }}</h6>
                                        <small class="text-muted">{{ $menu['descricao'] ?? 'Cadastro e gestão de ' . strtolower($menu['nome']) }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <div class="alert alert-warning mb-0" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Nenhum menu configurado para este grupo.
            </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Card 3: Permissões Específicas do Usuário -->
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <i class="bi bi-shield-check me-2 text-primary" style="font-size: 1.2rem;"></i>
                <h5 class="mb-0 fw-bold">Permissões Específicas do Usuário</h5>
            </div>
            <p class="text-muted small mb-4">Configure as ações específicas que este usuário pode realizar em cada menu</p>
            
            @if($user->permissions && count($user->permissions) > 0)
            <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
                <i class="bi bi-info-circle me-2"></i>
                <div>
                    <strong>Permissões específicas por módulo:</strong> Configure as ações específicas que este usuário pode realizar em cada módulo do sistema.
                </div>
            </div>
            
            <div class="row row-cols-1 row-cols-md-2 g-3">
                @foreach($user->permissions as $permission)
                @php
                    // Mapear ícones para cada módulo
                    $iconMap = [
                        'Dashboard' => 'speedometer2',
                        'Clientes' => 'people',
                        'Fornecedores' => 'truck',
                        'Transportes' => 'truck',
                        'Destinos' => 'geo-alt',
                        'Equipes' => 'diagram-3',
                        'Colaboradores' => 'people-fill',
                        'Serviços' => 'wrench-adjustable',
                        'Orçamentos' => 'file-earmark-text',
                        'Propostas' => 'file-earmark-text',
                        'Ordem de Serviço' => 'clipboard-check',
                        'Vendas' => 'cart',
                        'Financeiro' => 'currency-dollar',
                        'Pagamentos' => 'credit-card',
                        'Usuários' => 'person-gear',
                        'Grupos' => 'collection',
                        'Perfis' => 'shield-check'
                    ];
                    $iconePermissao = $iconMap[$permission['nome']] ?? 'folder';
                @endphp
                <div class="col">
                    <div class="card border h-100">
                        <div class="card-header bg-light border-bottom py-2">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-{{ $iconePermissao }} text-primary" style="font-size: 1.2rem;"></i>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="mb-0 fw-bold" style="font-size: 0.95rem;">{{ $permission['nome'] ?? 'Menu' }}</h6>
                                    <small class="text-muted">Cadastro e gestão de {{ strtolower($permission['nome'] ?? 'menu') }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-3">
                            @if(isset($permission['permissions']) && is_array($permission['permissions']))
                            <div class="row g-2">
                                @php
                                $allPermissions = ['listar', 'visualizar', 'criar', 'editar', 'excluir'];
                                $userPerms = $permission['permissions'];
                                @endphp
                                
                                @foreach($allPermissions as $perm)
                                <div class="col-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" disabled 
                                               {{ in_array($perm, $userPerms) ? 'checked' : '' }}>
                                        <label class="form-check-label">
                                            {{ ucfirst($perm) }}
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="alert alert-warning mb-0" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Nenhuma permissão específica configurada para este usuário.
            </div>
            @endif
        </div>
    </div>
</div>