{% extends 'base.html' %}

{% block title %}Novo Relatório de Cotas{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-file-invoice-dollar me-2"></i>Novo Relatório de Cotas</h5>
        </div>
        <div class="card-body">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <form method="POST" class="needs-validation" novalidate>
                <div class="mb-3">
                    <label for="setor_id" class="form-label">Setor</label>
                    <select class="form-select" id="setor_id" name="setor_id" required>
                        <option value="">Selecione o setor</option>
                        {% for setor in setores %}
                        <option value="{{ setor.id }}">{{ setor.nome }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        Por favor, selecione o setor.
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="comite_id" class="form-label">Comitê Central</label>
                    <select class="form-select" id="comite_id" name="comite_id" required>
                        <option value="">Selecione o comitê</option>
                        {% for comite in comites %}
                        <option value="{{ comite.id }}">{{ comite.nome }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        Por favor, selecione o comitê.
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="total_cotas" class="form-label">Total de Cotas</label>
                    <div class="input-group">
                        <span class="input-group-text">R$</span>
                        <input type="number" 
                               class="form-control" 
                               id="total_cotas" 
                               name="total_cotas" 
                               step="0.01" 
                               min="0.01"
                               required>
                    </div>
                    <div class="invalid-feedback">
                        Por favor, insira um valor válido para o total de cotas.
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="data_relatorio" class="form-label">Data do Relatório</label>
                    <input type="date" 
                           class="form-control" 
                           id="data_relatorio" 
                           name="data_relatorio" 
                           max="{{ hoje }}"
                           required>
                    <div class="invalid-feedback">
                        Por favor, insira uma data válida não futura.
                    </div>
                </div>
                
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-2"></i>Registrar
                    </button>
                    <a href="{{ url_for('listar_relatorios_cotas') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Voltar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Validação do formulário
(function () {
    'use strict'
    
    const forms = document.querySelectorAll('.needs-validation');
    
    forms.forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            
            // Validar valor mínimo
            const totalCotas = form.querySelector('#total_cotas');
            if (totalCotas.value <= 0) {
                totalCotas.setCustomValidity('O valor deve ser maior que zero');
                event.preventDefault();
                event.stopPropagation();
            } else {
                totalCotas.setCustomValidity('');
            }
            
            // Validar data não futura
            const dataRelatorio = form.querySelector('#data_relatorio');
            const hoje = new Date();
            hoje.setHours(0, 0, 0, 0);
            const dataSelecionada = new Date(dataRelatorio.value);
            
            if (dataSelecionada > hoje) {
                dataRelatorio.setCustomValidity('A data não pode ser futura');
                event.preventDefault();
                event.stopPropagation();
            } else {
                dataRelatorio.setCustomValidity('');
            }
            
            form.classList.add('was-validated');
        }, false);
        
        // Limpar validação ao mudar valor
        const inputs = form.querySelectorAll('input, select');
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                input.setCustomValidity('');
            });
        });
    });
})();
</script>
{% endblock %}