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

{% block title %}Novo Grupo - {{ 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">Novo Grupo</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-gradient-primary text-white">
                <h3 class="mb-0">
                    <i class="bi bi-plus-circle"></i> Novo Grupo
                </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 do Grupo *</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="tipo" class="form-label">Tipo *</label>
                                <select class="form-select" id="tipo" name="tipo" required>
                                    <option value="backlog">Backlog</option>
                                    <option value="planejamento">Planejamento</option>
                                    <option value="desenvolvimento" selected>Desenvolvimento</option>
                                    <option value="teste">Teste</option>
                                    <option value="revisao">Revisão</option>
                                    <option value="producao">Produção</option>
                                    <option value="concluido">Concluído</option>
                                    <option value="arquivado">Arquivado</option>
                                </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="3"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="cor" class="form-label">Cor</label>
                                <input type="color" class="form-control" id="cor" name="cor" value="#6c757d">
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="ordem" class="form-label">Ordem</label>
                                <input type="number" class="form-control" id="ordem" name="ordem" value="0" min="0">
                                <small class="form-text text-muted">Ordem de exibição no board</small>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="limite_tarefas" class="form-label">Limite de Tarefas (WIP)</label>
                                <input type="number" class="form-control" id="limite_tarefas" name="limite_tarefas" min="1">
                                <small class="form-text text-muted">Máximo de tarefas permitidas</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_inicio_prevista" class="form-label">Data de Início Prevista</label>
                                <input type="date" class="form-control" id="data_inicio_prevista" name="data_inicio_prevista">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_fim_prevista" class="form-label">Data de Fim Prevista</label>
                                <input type="date" class="form-control" id="data_fim_prevista" name="data_fim_prevista">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="ativo" name="ativo" checked>
                        <label class="form-check-label" for="ativo">
                            Grupo Ativo
                        </label>
                    </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-primary">
                            <i class="bi bi-check-circle"></i> Criar Grupo
                        </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 tipo = document.getElementById('tipo').value;
        
        if (!nome) {
            alert('Nome do grupo é obrigatório');
            e.preventDefault();
            return;
        }
        
        if (!tipo) {
            alert('Tipo do grupo é obrigatório');
            e.preventDefault();
            return;
        }
        
        // Validação de datas
        const dataInicio = document.getElementById('data_inicio_prevista').value;
        const dataFim = document.getElementById('data_fim_prevista').value;
        
        if (dataInicio && dataFim && dataInicio > dataFim) {
            alert('Data de início não pode ser posterior à data de fim');
            e.preventDefault();
            return;
        }
    });
    
    // Cores padrão por tipo
    const tipoSelect = document.getElementById('tipo');
    const corInput = document.getElementById('cor');
    
    const coresPorTipo = {
        'backlog': '#6c757d',
        'planejamento': '#17a2b8',
        'desenvolvimento': '#007bff',
        'teste': '#ffc107',
        'revisao': '#fd7e14',
        'producao': '#28a745',
        'concluido': '#20c997',
        'arquivado': '#6f42c1'
    };
    
    tipoSelect.addEventListener('change', function() {
        const tipo = this.value;
        if (coresPorTipo[tipo]) {
            corInput.value = coresPorTipo[tipo];
        }
    });
});
</script>
{% endblock %}