@php
$title = 'Visualizar Equipe';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <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('cadastro.equipes') }}`)" class="text-decoration-none text-secondary">Equipes</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-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-people-fill me-2 text-primary"></i>{{ $equipe->nome }}
            </h1>
            <span class="text-muted small">Código: {{ $equipe->codigo }} | Responsável: {{ $equipe->responsavel->nome }}</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="carregarConteudo(`{{ route('cadastro.equipes.editar', ['id' => $equipe->id]) }}`)">
                <i class="bi bi-pencil-square me-2"></i>Editar
            </button>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow border-0 mb-4">
                <div class="card-body">
                    <h5 class="fw-bold mb-3"><i class="bi bi-info-circle me-2"></i>Informações da Equipe</h5>
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="text-muted small">Código</label>
                            <p class="mb-0">{{ $equipe->codigo }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted small">Nome</label>
                            <p class="mb-0">{{ $equipe->nome }}</p>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small">Status</label>
                            <p class="mb-0"><span class="badge bg-{{ $equipe->is_active ? 'success' : 'secondary' }}">{{ $equipe->is_active ? 'Ativa' : 'Inativa' }}</span></p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label class="text-muted small">Responsável</label>
                            <p class="mb-0">
                                <a href="#" onclick="carregarConteudo(`{{ route('cadastro.colaboradores.visualizar', ['id' => $equipe->responsavel->id]) }}`)" class="text-decoration-none">
                                    {{ $equipe->responsavel->nome }} - {{ $equipe->responsavel->cargo->nome }}
                                </a>
                            </p>
                        </div>
                    </div>
                    
                    @if($equipe->descricao)
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="text-muted small">Descrição</label>
                                <p class="mb-0">{{ $equipe->descricao }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            
            <div class="card shadow border-0">
                <div class="card-body">
                    <h5 class="fw-bold mb-3"><i class="bi bi-people me-2"></i>Membros da Equipe ({{ $equipe->colaboradores->count() }})</h5>
                    
                    @if($equipe->colaboradores && $equipe->colaboradores->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Nome</th>
                                        <th>Matrícula</th>
                                        <th>Cargo</th>
                                        <th>Setor</th>
                                        <th>Status</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($equipe->colaboradores as $membro)
                                        <tr>
                                            <td>
                                                {{ $membro->nome }}
                                                @if($membro->id == $equipe->responsavel_id)
                                                    <span class="badge bg-warning text-dark ms-2">Responsável</span>
                                                @endif
                                            </td>
                                            <td>{{ $membro->matricula }}</td>
                                            <td>{{ $membro->cargo->nome }}</td>
                                            <td>{{ $membro->setor->nome }}</td>
                                            <td><span class="badge bg-{{ $membro->is_active ? 'success' : 'secondary' }}">{{ $membro->is_active ? 'Ativo' : 'Inativo' }}</span></td>
                                            <td class="text-center">
                                                <a href="#" onclick="carregarConteudo(`{{ route('cadastro.colaboradores.visualizar', ['id' => $membro->id]) }}`)" class="text-decoration-none">
                                                    <i class="bi bi-eye icon-action view" data-bs-toggle="tooltip" title="Visualizar colaborador"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info mb-0">
                            <i class="bi bi-info-circle me-2"></i>Nenhum membro nesta equipe.
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow border-0 mb-4">
                <div class="card-body">
                    <h5 class="fw-bold mb-3"><i class="bi bi-bar-chart me-2"></i>Estatísticas</h5>
                    <div class="mb-3">
                        <label class="text-muted small">Total de Membros</label>
                        <h3 class="mb-0 text-primary">{{ $equipe->colaboradores->count() }}</h3>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted small">Membros Ativos</label>
                        <h3 class="mb-0 text-success">{{ $equipe->colaboradores->where('is_active', true)->count() }}</h3>
                    </div>
                    <div>
                        <label class="text-muted small">Membros Inativos</label>
                        <h3 class="mb-0 text-secondary">{{ $equipe->colaboradores->where('is_active', false)->count() }}</h3>
                    </div>
                </div>
            </div>
            
            <div class="card shadow border-0">
                <div class="card-body">
                    <h5 class="fw-bold mb-3"><i class="bi bi-clock-history me-2"></i>Informações</h5>
                    <div class="mb-2">
                        <label class="text-muted small">Criada em</label>
                        <p class="mb-0">{{ \Carbon\Carbon::parse($equipe->created_at)->format('d/m/Y H:i') }}</p>
                    </div>
                    <div>
                        <label class="text-muted small">Última atualização</label>
                        <p class="mb-0">{{ \Carbon\Carbon::parse($equipe->updated_at)->format('d/m/Y H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="d-flex justify-content-end gap-2 mt-4">
        <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('cadastro.equipes') }}`)">
            <i class="bi bi-arrow-left-circle me-2"></i>Voltar
        </button>
    </div>
</div>