{% extends 'base.html' %}

{% block title %}Novo Comprovante{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-money-bill-wave me-2"></i>Registrar Novo Comprovante
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="militante_id" class="form-label">Militante:</label>
                            <select class="form-select" id="militante_id" name="militante_id" required>
                                <option value="">Selecione um militante</option>
                                {% for militante in militantes %}
                                <option value="{{ militante.id }}">{{ militante.nome }}</option>
                                {% endfor %}
                            </select>
                            <div class="invalid-feedback">
                                Por favor, selecione um militante.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="tipo_comprovante_id">Tipo de Comprovante</label>
                            <select class="form-control" id="tipo_comprovante_id" name="tipo_comprovante_id" required>
                                <option value="1">1 - Comprovante Padrão</option>
                                {% if current_user.has_permission('gerenciar_tipos_comprovante') %}
                                    <option value="2">2 - Comprovante Especial</option>
                                    <option value="3">3 - Comprovante Extraordinário</option>
                                    <option value="4">4 - Jornal Avulso</option>
                                    <option value="5">5 - Assinatura de Jornal</option>
                                    <option value="6">6 - Campanha Financeira</option>
                                {% endif %}
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="valor" class="form-label">Valor:</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control money" id="valor" name="valor" required>
                            </div>
                            <div class="invalid-feedback">
                                Por favor, informe um valor válido.
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="data_comprovante" class="form-label">Data do Comprovante:</label>
                            <input type="date" class="form-control" id="data_comprovante" name="data_comprovante" 
                                   required max="{{ hoje }}">
                            <div class="invalid-feedback">
                                Por favor, informe uma data válida.
                            </div>
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Registrar
                            </button>
                            <a href="{{ url_for('listar_comprovantes') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Voltar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(document).ready(function(){
    $('.money').mask('000.000.000.000.000,00', {reverse: true});
    
    // Converter valor para formato aceito pelo backend
    $('form').on('submit', function(e) {
        e.preventDefault();
        const valor = $('#valor').val().replace(/\./g, '').replace(',', '.');
        $('#valor').val(valor);
        this.submit();
    });
});
</script>
{% endblock %}