@php
$title = 'Visualizar Equipe';
@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('equipes.list') }}`)" class="text-decoration-none text-secondary">Equipes</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Visualizar Equipe</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-diagram-3 me-2 text-primary"></i>Visualizar Equipe
            </h1>
            <span class="text-muted small">Detalhes da equipe</span>
        </div>
        <div>
            @canUser('Equipes', 'editar')
            <button type="button" class="btn btn-sm btn-outline-warning me-2" onclick="carregarConteudo(`{{ route('equipes.edit', $equipe->id) }}`)">
                <i class="bi bi-pencil-square me-2"></i>Editar
            </button>
            @endcanUser
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('equipes.list') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <!-- Dados Básicos -->
    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-bottom pb-2">
            <span class="fw-bold"><i class="bi bi-info-circle me-2 text-primary"></i>Dados Básicos</span>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold text-muted small">Nome da Equipe</label>
                    <p class="mb-0">{{ $equipe->nome }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Área</label>
                    <p class="mb-0">{{ $equipe->area->nome ?? '-' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Status</label>
                    <p class="mb-0">
                        <span class="badge bg-{{ $equipe->status == 'ATIVA' ? 'success' : 'secondary' }}">
                            {{ $equipe->status == 'ATIVA' ? 'Ativa' : 'Inativa' }}
                        </span>
                    </p>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold text-muted small">Responsável</label>
                    <p class="mb-0">{{ $equipe->responsavel->nome ?? '-' }}</p>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold text-muted small">Cargo do Responsável</label>
                    <p class="mb-0">{{ $equipe->responsavel && $equipe->responsavel->cargo ? $equipe->responsavel->cargo->nome : '-' }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label class="form-label fw-bold text-muted small">Descrição</label>
                    <p class="mb-0">{{ $equipe->descricao ?? '-' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Colaboradores da Equipe -->
    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-bottom pb-2">
            <div class="d-flex justify-content-between align-items-center">
                <span class="fw-bold"><i class="bi bi-person-badge me-2 text-primary"></i>Colaboradores da Equipe</span>
                @if($equipe->colaboradores->count() > 0)
                    <span class="badge bg-primary">{{ $equipe->colaboradores->count() }}</span>
                @endif
            </div>
        </div>
        <div class="card-body">
            @if($equipe->colaboradores->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Cargo</th>
                                <th>Área</th>
                                <th>E-mail</th>
                                <th>Status</th>
                                <th class="text-center" style="width: 100px;">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="tabelaColaboradoresEquipe">
                            @foreach($equipe->colaboradores as $colaborador)
                                <tr data-colaborador-id="{{ $colaborador->id }}">
                                    <td>
                                        {{ $colaborador->nome }}
                                        @if($colaborador->id == $equipe->responsavel_id)
                                            <i class="bi bi-star-fill text-warning ms-2" title="Responsável da Equipe"></i>
                                        @endif
                                    </td>
                                    <td>{{ $colaborador->cargo->nome ?? '-' }}</td>
                                    <td>{{ $colaborador->area->nome ?? '-' }}</td>
                                    <td>{{ $colaborador->email }}</td>
                                    <td>
                                        <span class="badge bg-{{ $colaborador->status == 'ATIVO' ? 'success' : 'secondary' }}">
                                            {{ $colaborador->status == 'ATIVO' ? 'Ativo' : 'Inativo' }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" 
                                                class="btn btn-link p-0 align-baseline text-primary" 
                                                onclick="carregarConteudo(`{{ route('colaboradores.detail', $colaborador->id) }}`)" 
                                                title="Visualizar colaborador">
                                            <i class="bi bi-eye icon-action view"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-muted mb-0">Nenhum colaborador vinculado a esta equipe.</p>
            @endif
        </div>
    </div>

    <!-- Informações de Auditoria -->
    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-bottom pb-2">
            <span class="fw-bold"><i class="bi bi-clock-history me-2 text-primary"></i>Informações de Auditoria</span>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Cadastrado em</label>
                    <p class="mb-0">{{ $equipe->created_at ? $equipe->created_at->format('d/m/Y H:i') : '-' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Cadastrado por</label>
                    <p class="mb-0">{{ $equipe->usuarioInclusao->name ?? '-' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Última alteração</label>
                    <p class="mb-0">{{ $equipe->updated_at ? $equipe->updated_at->format('d/m/Y H:i') : '-' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Alterado por</label>
                    <p class="mb-0">{{ $equipe->usuarioAlteracao->name ?? '-' }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/equipes.js') }}"></script>