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

{% block title %}
    {% if task %}Editar Tarefa{% else %}Nova Tarefa{% endif %} - {{ 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 'task:list' %}">Tarefas</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if task %}Editar{% else %}Nova{% endif %}
            </li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card shadow">
            <div class="card-header bg-gradient-warning text-white">
                <h3 class="mb-0">
                    <i class="bi bi-list-task"></i>
                    {% if task %}Editar Tarefa{% else %}Nova Tarefa{% endif %}
                </h3>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <!-- Informações Básicas -->
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="nome" class="form-label">Nome da Tarefa *</label>
                                <input type="text" class="form-control" id="nome" name="nome" 
                                       value="{{ task.nome|default:'' }}" required>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="group" class="form-label">Grupo *</label>
                                <select class="form-select" id="group" name="group" required>
                                    <option value="">Selecione um grupo</option>
                                    {% for group in groups %}
                                        <option value="{{ group.id }}" 
                                                {% if task.group and task.group.id == group.id %}selected{% endif %}>
                                            {{ group.board.project.nome }} - {{ group.board.nome }} - {{ group.nome }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="descricao" class="form-label">Descrição</label>
                        <textarea class="form-control" id="descricao" name="descricao" rows="4">{{ task.descricao|default:'' }}</textarea>
                    </div>
                    
                    <!-- Cronograma -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="cronograma_inicio" class="form-label">Data de Início *</label>
                                <input type="date" class="form-control" id="cronograma_inicio" name="cronograma_inicio" 
                                       value="{{ task.cronograma_inicio|date:'Y-m-d'|default:'' }}" required>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="cronograma_fim" class="form-label">Data de Fim *</label>
                                <input type="date" class="form-control" id="cronograma_fim" name="cronograma_fim" 
                                       value="{{ task.cronograma_fim|date:'Y-m-d'|default:'' }}" required>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="duracao_dias" class="form-label">Duração (dias) *</label>
                                <input type="number" class="form-control" id="duracao_dias" name="duracao_dias" 
                                       min="1" value="{{ task.duracao_dias|default:1 }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Status e Prioridade -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="nao_iniciada" {% if task.status == 'nao_iniciada' %}selected{% endif %}>Não Iniciada</option>
                                    <option value="em_andamento" {% if task.status == 'em_andamento' %}selected{% endif %}>Em Andamento</option>
                                    <option value="pausada" {% if task.status == 'pausada' %}selected{% endif %}>Pausada</option>
                                    <option value="concluida" {% if task.status == 'concluida' %}selected{% endif %}>Concluída</option>
                                    <option value="cancelada" {% if task.status == 'cancelada' %}selected{% endif %}>Cancelada</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="prioridade" class="form-label">Prioridade</label>
                                <select class="form-select" id="prioridade" name="prioridade">
                                    <option value="baixa" {% if task.prioridade == 'baixa' %}selected{% endif %}>Baixa</option>
                                    <option value="media" {% if task.prioridade == 'media' %}selected{% endif %}>Média</option>
                                    <option value="alta" {% if task.prioridade == 'alta' %}selected{% endif %}>Alta</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Esforço -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.esforco_previsto.id_for_label }}" class="form-label">Esforço Previsto (horas)</label>
                                {{ form.esforco_previsto }}
                                {% if form.esforco_previsto.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.esforco_previsto.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.esforco_utilizado.id_for_label }}" class="form-label">Esforço Utilizado (horas)</label>
                                {{ form.esforco_utilizado }}
                                <small class="form-text text-muted">Este campo é calculado automaticamente</small>
                                {% if form.esforco_utilizado.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.esforco_utilizado.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Responsável -->
                    <div class="mb-3">
                        <label for="responsavel" class="form-label">Responsável</label>
                        <select class="form-select" id="responsavel" name="responsavel">
                            <option value="">Selecione um responsável</option>
                            {% for colaborador in colaboradores %}
                                <option value="{{ colaborador.id }}" 
                                        {% if task.responsavel.id == colaborador.id %}selected{% endif %}>
                                    {{ colaborador.nome }} ({{ colaborador.area.nome }})
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Dependências -->
                    <div class="mb-3">
                        <label for="dependencias" class="form-label">Dependências</label>
                        <select class="form-select" id="dependencias" name="dependencias" multiple>
                            {% for outra_task in todas_tarefas %}
                                {% if outra_task.id != task.id %}
                                    <option value="{{ outra_task.id }}" 
                                            {% if task and outra_task in task.dependencias.all %}selected{% endif %}>
                                        {{ outra_task.nome }} 
                                        {% if outra_task.group and outra_task.group.board and outra_task.group.board.project %}
                                            ({{ outra_task.group.board.project.nome }})
                                        {% else %}
                                            <span class="text-muted">(Projeto não disponível)</span>
                                        {% endif %}
                                    </option>
                                {% endif %}
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">Selecione as tarefas das quais esta tarefa depende</small>
                    </div>
                    
                    <!-- Controle de Tempo (apenas para visualização se a tarefa existir) -->
                    {% if task %}
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="bi bi-clock"></i> Controle de Tempo</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <small class="text-muted">Tempo Total Trabalhado:</small>
                                    <div class="h5">{{ task.tempo_total_trabalhado|default:"0:00:00" }}</div>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">Tempo Trabalhado Hoje:</small>
                                    <div class="h5">{{ task.tempo_trabalhado_hoje|default:"0:00:00" }}</div>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">Progresso:</small>
                                    <div class="h5">{{ task.progresso_percentual|floatformat:1 }}%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'task:list' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Voltar
                        </a>
                        <button type="submit" class="btn btn-warning">
                            <i class="bi bi-check-circle"></i>
                            {% if task %}Salvar Alterações{% else %}Criar Tarefa{% endif %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Validação do formulário
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const nome = document.getElementById('nome').value.trim();
        const group = document.getElementById('group').value;
        const cronograma_inicio = document.getElementById('cronograma_inicio').value;
        const cronograma_fim = document.getElementById('cronograma_fim').value;
        const duracao_dias = document.getElementById('duracao_dias').value;
        
        if (!nome) {
            alert('Nome da tarefa é obrigatório');
            e.preventDefault();
            return;
        }
        
        // Campo grupo agora é opcional
        // if (!group) {
        //     alert('Grupo é obrigatório');
        //     e.preventDefault();
        //     return;
        // }
        
        if (!cronograma_inicio) {
            alert('Data de início é obrigatória');
            e.preventDefault();
            return;
        }
        
        if (!cronograma_fim) {
            alert('Data de fim é obrigatória');
            e.preventDefault();
            return;
        }
        
        if (!duracao_dias || duracao_dias < 1) {
            alert('Duração deve ser pelo menos 1 dia');
            e.preventDefault();
            return;
        }
        
        if (cronograma_inicio > cronograma_fim) {
            alert('Data de início não pode ser posterior à data de fim');
            e.preventDefault();
            return;
        }
    });
    
    // Cálculo automático da data de fim baseado na duração
    const cronogramaInicio = document.getElementById('cronograma_inicio');
    const duracaoDias = document.getElementById('duracao_dias');
    const cronogramaFim = document.getElementById('cronograma_fim');
    
    function calcularDataFim() {
        if (cronogramaInicio.value && duracaoDias.value) {
            const inicio = new Date(cronogramaInicio.value);
            const duracao = parseInt(duracaoDias.value);
            const fim = new Date(inicio);
            fim.setDate(inicio.getDate() + duracao - 1);
            
            const ano = fim.getFullYear();
            const mes = String(fim.getMonth() + 1).padStart(2, '0');
            const dia = String(fim.getDate()).padStart(2, '0');
            
            cronogramaFim.value = `${ano}-${mes}-${dia}`;
        }
    }
    
    cronogramaInicio.addEventListener('change', calcularDataFim);
    duracaoDias.addEventListener('change', calcularDataFim);
});
</script>
{% endblock %}