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

{% block title %}
    {% if project %}Editar Projeto{% else %}Novo Projeto{% 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 'project:list' %}">Projetos</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if project %}Editar{% else %}Novo{% endif %}
            </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-info text-white">
                <h3 class="mb-0">
                    <i class="bi bi-kanban"></i>
                    {% if project %}Editar Projeto{% else %}Novo Projeto{% endif %}
                </h3>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="nome" class="form-label">Nome do Projeto *</label>
                        <input type="text" class="form-control" id="nome" name="nome" 
                               value="{{ project.nome|default:'' }}" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="portfolio" class="form-label">Portfolio *</label>
                                <select class="form-select" id="portfolio" name="portfolio" required>
                                    <option value="">Selecione um portfolio</option>
                                    {% for portfolio in portfolios %}
                                        <option value="{{ portfolio.id }}" 
                                                {% if project.portfolio.id == portfolio.id %}selected{% endif %}>
                                            {{ portfolio.workspace.nome }} - {{ portfolio.nome }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="cliente" class="form-label">Cliente</label>
                                <select class="form-select" id="cliente" name="cliente" readonly>
                                    <option value="">Selecione um portfolio primeiro</option>
                                                            {% if project.cliente %}
                            <option value="{{ project.cliente.id }}" selected>
                                {{ project.cliente.nome }}
                            </option>
                        {% endif %}
                                </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">{{ project.descricao|default:'' }}</textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="cronograma_inicio" class="form-label">Data de Início Planejada *</label>
                                <input type="date" class="form-control" id="cronograma_inicio" name="cronograma_inicio" 
                                       value="{{ project.cronograma_inicio|date:'Y-m-d'|default:'' }}" required>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="cronograma_fim" class="form-label">Data de Fim Planejada *</label>
                                <input type="date" class="form-control" id="cronograma_fim" name="cronograma_fim" 
                                       value="{{ project.cronograma_fim|date:'Y-m-d'|default:'' }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_inicio_real" class="form-label">Data de Início Real</label>
                                <input type="date" class="form-control" id="data_inicio_real" name="data_inicio_real" 
                                       value="{{ project.data_inicio_real|date:'Y-m-d'|default:'' }}">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_fim_real" class="form-label">Data de Fim Real</label>
                                <input type="date" class="form-control" id="data_fim_real" name="data_fim_real" 
                                       value="{{ project.data_fim_real|date:'Y-m-d'|default:'' }}">
                            </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="planejamento" {% if project.status == 'planejamento' %}selected{% endif %}>Planejamento</option>
                                    <option value="em_andamento" {% if project.status == 'em_andamento' %}selected{% endif %}>Em Andamento</option>
                                    <option value="pausado" {% if project.status == 'pausado' %}selected{% endif %}>Pausado</option>
                                    <option value="concluido" {% if project.status == 'concluido' %}selected{% endif %}>Concluído</option>
                                    <option value="cancelado" {% if project.status == 'cancelado' %}selected{% endif %}>Cancelado</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 project.prioridade == 'baixa' %}selected{% endif %}>Baixa</option>
                                    <option value="media" {% if project.prioridade == 'media' %}selected{% endif %}>Média</option>
                                    <option value="alta" {% if project.prioridade == 'alta' %}selected{% endif %}>Alta</option>
                                    <option value="urgente" {% if project.prioridade == 'urgente' %}selected{% endif %}>Urgente</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="orcamento" class="form-label">Orçamento</label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" class="form-control" id="orcamento" name="orcamento" 
                                           step="0.01" value="{{ project.orcamento|default:'' }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="custo_real" class="form-label">Custo Real</label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" class="form-control" id="custo_real" name="custo_real" 
                                           step="0.01" value="{{ project.custo_real|default:0 }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="estimativa_esforco" class="form-label">Estimativa de Esforço</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="estimativa_esforco" name="estimativa_esforco" 
                                           step="0.5" min="0" value="{{ project.estimativa_esforco|default:'' }}" placeholder="Ex: 40.5">
                                    <span class="input-group-text">horas</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="progresso" class="form-label">Progresso (%)</label>
                                <input type="number" class="form-control" id="progresso" name="progresso" 
                                       min="0" max="100" value="{{ project.progresso|default:0 }}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ativo" name="ativo" 
                                   {% if project.ativo or not project %}checked{% endif %}>
                            <label class="form-check-label" for="ativo">
                                Projeto Ativo
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'project:list' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Voltar
                        </a>
                        <button type="submit" class="btn btn-info">
                            <i class="bi bi-check-circle"></i>
                            {% if project %}Salvar Alterações{% else %}Criar Projeto{% 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 portfolio = document.getElementById('portfolio').value;
        const cronograma_inicio = document.getElementById('cronograma_inicio').value;
        const cronograma_fim = document.getElementById('cronograma_fim').value;
        
        if (!nome) {
            alert('Nome do projeto é obrigatório');
            e.preventDefault();
            return;
        }
        
        if (!portfolio) {
            alert('Portfolio é 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 (cronograma_inicio > cronograma_fim) {
            alert('Data de início não pode ser posterior à data de fim');
            e.preventDefault();
            return;
        }
    });
});
</script>
{% endblock %}