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

{% block title %}{{ group.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 'board:detail' group.board.pk %}">{{ group.board.nome }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ group.nome }}</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <i class="bi bi-collection"></i> {{ group.nome }}
            <span class="badge bg-{{ group.tipo|yesno:'success,warning,danger,info,secondary,primary,success,dark' }}">
                {{ group.get_tipo_display }}
            </span>
            {% if not group.ativo %}
                <span class="badge bg-secondary">Inativo</span>
            {% endif %}
        </h1>
        <p class="text-muted mb-0">
            <i class="bi bi-kanban"></i> {{ group.board.nome }} - {{ group.board.project.nome }}
        </p>
    </div>
    <div class="btn-group">
        <a href="{% url 'board:add_task' group.board.pk %}?group={{ group.id }}" class="btn btn-outline-success">
            <i class="bi bi-plus-circle"></i> Nova Tarefa
        </a>
        <a href="{% url 'task:group_edit' group.pk %}" class="btn btn-outline-secondary">
            <i class="bi bi-pencil"></i> Editar
        </a>
        <a href="{% url 'task:group_delete' group.pk %}" 
           class="btn btn-outline-danger delete-btn"
           data-item-name="{{ group.nome }}">
            <i class="bi bi-trash"></i> Excluir
        </a>
    </div>
</div>

<div class="row">
    <!-- Informações do Grupo -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header" style="background: linear-gradient(135deg, {{ group.cor }}, {{ group.cor }}dd); color: white;">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações do Grupo</h5>
            </div>
            <div class="card-body">
                {% if group.descricao %}
                    <div class="mb-3">
                        <strong>Descrição:</strong>
                        <p class="mb-0">{{ group.descricao }}</p>
                    </div>
                {% endif %}
                
                <div class="mb-3">
                    <strong><i class="bi bi-tag"></i> Tipo:</strong><br>
                    <span class="badge bg-{{ group.tipo|yesno:'success,warning,danger,info,secondary,primary,success,dark' }}">
                        {{ group.get_tipo_display }}
                    </span>
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-kanban"></i> Board:</strong><br>
                    <a href="{% url 'board:detail' group.board.pk %}">{{ group.board.nome }}</a>
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-project"></i> Projeto:</strong><br>
                    <a href="{% url 'project:detail' group.board.project.pk %}">{{ group.board.project.nome }}</a>
                </div>
                
                {% if group.limite_tarefas %}
                <div class="mb-3">
                    <strong><i class="bi bi-exclamation-triangle"></i> Limite WIP:</strong><br>
                    {{ group.total_tasks }} / {{ group.limite_tarefas }}
                    {% if group.is_limite_atingido %}
                        <span class="badge bg-danger">Limite Atingido</span>
                    {% endif %}
                </div>
                {% endif %}
                
                {% if group.data_inicio_prevista or group.data_fim_prevista %}
                <div class="mb-3">
                    <strong><i class="bi bi-calendar"></i> Cronograma:</strong><br>
                    {% if group.data_inicio_prevista %}
                        Início: {{ group.data_inicio_prevista|date:"d/m/Y" }}<br>
                    {% endif %}
                    {% if group.data_fim_prevista %}
                        Fim: {{ group.data_fim_prevista|date:"d/m/Y" }}
                        {% if group.is_atrasado %}
                            <span class="badge bg-danger">Atrasado ({{ group.dias_atraso }} dias)</span>
                        {% endif %}
                    {% endif %}
                </div>
                {% endif %}
                
                <div class="mb-0">
                    <strong><i class="bi bi-clock"></i> Criado em:</strong><br>
                    {{ group.created_at|date:"d/m/Y H:i" }}
                </div>
            </div>
        </div>
        
        <!-- Estatísticas -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Estatísticas</h5>
            </div>
            <div class="card-body">
                <div class="row text-center mb-3">
                    <div class="col-6">
                        <div class="border-end">
                            <h4 class="text-primary mb-0">{{ group.total_tasks }}</h4>
                            <small class="text-muted">Total</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <h4 class="text-success mb-0">{{ group.progresso_percentual|floatformat:1 }}%</h4>
                        <small class="text-muted">Progresso</small>
                    </div>
                </div>
                
                <div class="progress mb-3" style="height: 8px;">
                    <div class="progress-bar bg-success" style="width: {{ group.progresso_percentual }}%"></div>
                </div>
                
                <div class="row text-center">
                    <div class="col-4">
                        <small class="text-muted d-block">{{ group.tasks_nao_iniciadas }}</small>
                        <small class="text-muted">Pendentes</small>
                    </div>
                    <div class="col-4">
                        <small class="text-muted d-block">{{ group.tasks_em_andamento }}</small>
                        <small class="text-muted">Em Andamento</small>
                    </div>
                    <div class="col-4">
                        <small class="text-muted d-block">{{ group.tasks_concluidas }}</small>
                        <small class="text-muted">Concluídas</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Lista de Tarefas -->
    <div class="col-lg-8">
        <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 do Grupo</h5>
                <a href="{% url 'board:add_task' group.board.pk %}?group={{ group.id }}" class="btn btn-success btn-sm">
                    <i class="bi bi-plus-circle"></i> Nova Tarefa
                </a>
            </div>
            <div class="card-body">
                {% if group.tasks.exists %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Tarefa</th>
                                <th>Responsável</th>
                                <th>Status</th>
                                <th>Prioridade</th>
                                <th>Prazo</th>
                                <th>Progresso</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in group.get_tarefas_ordenadas %}
                            <tr>
                                <td>
                                    <div>
                                        <strong>{{ task.nome }}</strong>
                                        {% if task.descricao %}
                                            <br><small class="text-muted">{{ task.descricao|truncatewords:8 }}</small>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    {% if task.responsavel %}
                                        <span class="badge bg-info">{{ task.responsavel.nome }}</span>
                                    {% else %}
                                        <span class="text-muted">Não atribuída</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }}">
                                        {{ task.get_status_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{{ task.prioridade|yesno:'success,warning,danger' }}">
                                        {{ task.get_prioridade_display }}
                                    </span>
                                </td>
                                <td>
                                    <div>
                                        {{ task.cronograma_fim|date:"d/m/Y" }}
                                        {% if task.is_atrasada %}
                                            <br><span class="badge bg-danger small">Atrasada</span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar bg-success" style="width: {{ task.progresso_percentual }}%">
                                            {{ task.progresso_percentual|floatformat:1 }}%
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'task:detail' task.pk %}" 
                                           class="btn btn-outline-primary" title="Ver detalhes">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a href="{% url 'task:edit' task.pk %}" 
                                           class="btn btn-outline-secondary" title="Editar">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <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 grupo ainda não possui tarefas.</p>
                    <a href="{% url 'board:add_task' group.board.pk %}?group={{ group.id }}" class="btn btn-success">
                        <i class="bi bi-plus-circle"></i> Criar Primeira Tarefa
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Confirmação para exclusão
document.addEventListener('DOMContentLoaded', function() {
    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 grupo "${itemName}"?`)) {
                e.preventDefault();
            }
        });
    });
});
</script>
{% endblock %}