{% extends 'base.html' %}
{% load static %}

{% block title %}{{ collaborator.nome }} - {{ block.super }}{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb mb-0 py-2">
            <li class="breadcrumb-item"><a href="{% url 'home' %}">Início</a></li>
            <li class="breadcrumb-item"><a href="{% url 'collaborator:list' %}">Colaboradores</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ collaborator.nome }}</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<!-- Container para o modal -->
<div id="modalContainer"></div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <i class="bi bi-person-badge"></i> {{ collaborator.nome }}
            {% if collaborator.ativo %}
                <span class="badge bg-success">Ativo</span>
            {% else %}
                <span class="badge bg-secondary">Inativo</span>
            {% endif %}
        </h1>
        <p class="text-muted mb-0">
            <i class="bi bi-briefcase"></i> {{ collaborator.area.nome }} - {{ collaborator.cargo|default:"Sem cargo definido" }}
        </p>
    </div>
    <div class="btn-group">
        <button type="button" 
                class="btn btn-outline-secondary edit-collaborator-btn"
                data-collaborator-id="{{ collaborator.pk }}"
                data-collaborator-name="{{ collaborator.nome }}">
            <i class="bi bi-pencil"></i> Editar
        </button>
        <a href="{% url 'collaborator:delete' collaborator.pk %}" 
           class="btn btn-outline-danger delete-btn"
           data-item-name="{{ collaborator.nome }}">
            <i class="bi bi-trash"></i> Excluir
        </a>
    </div>
</div>

<div class="row">
    <!-- Informações do Colaborador -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-gradient-primary text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações Pessoais</h5>
            </div>
            <div class="card-body text-center">
                {% if collaborator.foto %}
                    <img src="{{ collaborator.foto.url }}" alt="{{ collaborator.nome }}" 
                         class="rounded-circle mb-3" style="width: 120px; height: 120px; object-fit: cover;">
                {% else %}
                    <div class="rounded-circle bg-secondary d-inline-flex align-items-center justify-content-center mb-3" 
                         style="width: 120px; height: 120px;">
                        <i class="bi bi-person text-white" style="font-size: 3rem;"></i>
                    </div>
                {% endif %}
                
                <h4>{{ collaborator.nome }}</h4>
                <p class="text-muted">{{ collaborator.cargo|default:"Sem cargo definido" }}</p>
                
                <div class="text-start">
                    <div class="mb-3">
                        <strong><i class="bi bi-envelope"></i> Email:</strong><br>
                        <a href="mailto:{{ collaborator.email }}">{{ collaborator.email }}</a>
                    </div>
                    
                    {% if collaborator.telefone %}
                    <div class="mb-3">
                        <strong><i class="bi bi-telephone"></i> Telefone:</strong><br>
                        <a href="tel:{{ collaborator.telefone }}">{{ collaborator.telefone }}</a>
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <strong><i class="bi bi-briefcase"></i> Área:</strong><br>
                        {{ collaborator.area.nome }}
                    </div>
                    
                    {% if collaborator.data_admissao %}
                    <div class="mb-3">
                        <strong><i class="bi bi-calendar"></i> Data de Admissão:</strong><br>
                        {{ collaborator.data_admissao|date:"d/m/Y" }}
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <strong><i class="bi bi-person-circle"></i> Usuário:</strong><br>
                        {% if collaborator.user %}
                            {{ collaborator.user.username }}
                            {% if collaborator.user.is_active %}
                                <span class="badge bg-success">Ativo</span>
                            {% else %}
                                <span class="badge bg-secondary">Inativo</span>
                            {% endif %}
                        {% else %}
                            <span class="text-muted">Sem usuário associado</span>
                        {% endif %}
                    </div>
                    
                    <div class="mb-0">
                        <strong><i class="bi bi-clock"></i> Status:</strong><br>
                        {% if collaborator.ativo %}
                            <span class="badge bg-success">Ativo</span>
                        {% else %}
                            <span class="badge bg-secondary">Inativo</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Estatísticas e Atividades -->
    <div class="col-lg-8">
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-kanban display-4 text-primary"></i>
                        <h3 class="text-primary">{{ collaborator.total_projects|default:"0" }}</h3>
                        <p class="text-muted mb-0">Projetos</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-list-task display-4 text-success"></i>
                        <h3 class="text-success">{{ collaborator.total_tasks|default:"0" }}</h3>
                        <p class="text-muted mb-0">Tarefas</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-check-circle display-4 text-info"></i>
                        <h3 class="text-info">{{ collaborator.tasks_concluidas|default:"0" }}</h3>
                        <p class="text-muted mb-0">Concluídas</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Projetos Recentes -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-kanban"></i> Projetos Recentes</h5>
                <a href="{% url 'project:list' %}?collaborator={{ collaborator.pk }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-eye"></i> Ver Todos
                </a>
            </div>
            <div class="card-body">
                {% if collaborator.projects.all %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Projeto</th>
                                <th>Workspace</th>
                                <th>Status</th>
                                <th>Progresso</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for project in collaborator.projects.all|slice:":5" %}
                            <tr>
                                <td>
                                    <strong>{{ project.nome }}</strong>
                                </td>
                                <td>
                                    <a href="{% url 'workspace:detail' project.workspace.pk %}">
                                        {{ project.workspace.nome }}
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-{{ project.get_status_color }}">
                                        {{ project.get_status_display }}
                                    </span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" 
                                             style="width: {{ project.progresso }}%">
                                            {{ project.progresso }}%
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="{% url 'project:detail' project.pk %}" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-kanban text-muted display-4"></i>
                    <h6 class="text-muted mt-2">Nenhum projeto encontrado</h6>
                    <p class="text-muted">Este colaborador ainda não foi atribuído a nenhum projeto.</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Tarefas Recentes -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-list-task"></i> Tarefas Recentes</h5>
                <a href="{% url 'task:list' %}?collaborator={{ collaborator.pk }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-eye"></i> Ver Todas
                </a>
            </div>
            <div class="card-body">
                {% if collaborator.tasks.all %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Tarefa</th>
                                <th>Projeto</th>
                                <th>Status</th>
                                <th>Prioridade</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in collaborator.tasks.all|slice:":5" %}
                            <tr>
                                <td>
                                    <strong>{{ task.titulo }}</strong>
                                </td>
                                <td>
                                    {% if task.project %}
                                        <a href="{% url 'project:detail' task.project.pk %}">
                                            {{ task.project.nome }}
                                        </a>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-{{ task.get_status_color }}">
                                        {{ task.get_status_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{{ task.get_prioridade_color }}">
                                        {{ task.get_prioridade_display }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{% url 'task:detail' task.pk %}" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-list-task text-muted display-4"></i>
                    <h6 class="text-muted mt-2">Nenhuma tarefa encontrada</h6>
                    <p class="text-muted">Este colaborador ainda não foi atribuído a nenhuma tarefa.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM carregado - Detalhes do Colaborador');
    console.log('Bootstrap disponível:', typeof bootstrap !== 'undefined');
    
    // Confirmação para exclusão
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            const itemName = this.getAttribute('data-item-name');
            if (!confirm(`Tem certeza que deseja excluir o colaborador "${itemName}"?`)) {
                e.preventDefault();
            }
        });
    });
    
    // Abrir modal de edição de colaborador via AJAX
    const editCollaboratorBtn = document.querySelector('.edit-collaborator-btn');
    if (editCollaboratorBtn) {
        editCollaboratorBtn.addEventListener('click', function() {
            const collaboratorId = this.getAttribute('data-collaborator-id');
            const collaboratorName = this.getAttribute('data-collaborator-name');
            console.log(`Abrindo modal de edição para colaborador: ${collaboratorName} (ID: ${collaboratorId})`);
            
            // Carregar o modal via AJAX
            fetch(`/collaborators/${collaboratorId}/edit-modal/`)
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('editColaboradorModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupCollaboratorEditForm();
                    } else {
                        console.error('Modal de edição não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal de edição:', error);
                });
        });
    }
    
    // Setup collaborator edit form function
    function setupCollaboratorEditForm() {
        const collaboratorEditForm = document.getElementById('collaboratorEditForm');
        if (collaboratorEditForm) {
            console.log('Formulário de edição de colaborador encontrado');
            collaboratorEditForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário de edição submetido');
                
                const formData = new FormData(this);
                
                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta de edição:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('editColaboradorModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reload page to show updated collaborator
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao atualizar colaborador. Tente novamente.');
                });
            });
        }
    }
    
    // Show alert function
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const container = document.querySelector('.container-fluid');
        container.insertBefore(alertDiv, container.firstChild);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }
    
    // Show form errors function
    function showFormErrors(errors) {
        // Clear previous errors
        document.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        document.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
        
        // Show new errors
        Object.keys(errors).forEach(field => {
            const input = document.querySelector(`[name="${field}"]`);
            if (input) {
                input.classList.add('is-invalid');
                
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                errorDiv.textContent = errors[field][0];
                input.parentNode.appendChild(errorDiv);
            }
        });
    }
});
</script>
{% endblock %}