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

{% block title %}Nova Tarefa - {{ board.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:list' %}">Boards</a></li>
            <li class="breadcrumb-item"><a href="{% url 'board:detail' board.pk %}">{{ board.nome }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Nova Tarefa</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-success text-white">
                <h3 class="mb-0">
                    <i class="bi bi-plus-circle"></i> Nova Tarefa
                </h3>
                <p class="mb-0">Board: {{ board.nome }}</p>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <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" 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 }}">{{ 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"></textarea>
                    </div>
                    
                    <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" 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" 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="1" required>
                            </div>
                        </div>
                    </div>
                    
                    <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">Não Iniciada</option>
                                    <option value="em_andamento">Em Andamento</option>
                                    <option value="pausada">Pausada</option>
                                    <option value="concluida">Concluída</option>
                                    <option value="cancelada">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">Baixa</option>
                                    <option value="media" selected>Média</option>
                                    <option value="alta">Alta</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="esforco_previsto" class="form-label">Esforço Previsto (horas)</label>
                                <input type="number" class="form-control" id="esforco_previsto" name="esforco_previsto" min="0" step="0.5" value="0">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <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 }}">{{ colaborador.nome }} ({{ colaborador.area.nome }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'board:detail' board.pk %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Cancelar
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-check-circle"></i> Criar Tarefa
                        </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;
        }
        
        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 %}