{% extends "base.html" %}

{% block title %}Comprovantes{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2><i class="fas fa-money-bill-wave"></i> Comprovantes</h2>
        <div>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#novoComprovanteModal">
                <i class="fas fa-plus"></i> Novo Comprovante
            </button>
            <button type="button" class="btn btn-outline-primary" id="btnExportar">
                <i class="fas fa-file-export"></i> Exportar
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="tabelaComprovantes">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Militante</th>
                            <th>Data</th>
                            <th>Forma de Pagamento</th>
                            <th>Campanha</th>
                            <th>Centralizações</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for comprovante in comprovantes %}
                        <tr>
                            <td>{{ comprovante.id }}</td>
                            <td>{{ comprovante.militante.nome }}</td>
                            <td>{{ comprovante.data_comprovante.strftime('%d/%m/%Y') }}</td>
                            <td>{{ comprovante.forma_pagamento }}</td>
                            <td>{{ comprovante.campanha.nome if comprovante.campanha else '-' }}</td>
                            <td>
                                <ul class="list-unstyled">
                                    {% for centralizacao in comprovante.centralizacoes %}
                                    <li>{{ centralizacao.tipo_comprovante }}: R$ {{ "%.2f"|format(centralizacao.valor) }}</li>
                                    {% endfor %}
                                </ul>
                            </td>
                            <td>
                                <button type="button" 
                                        class="btn btn-sm btn-outline-primary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalEditarComprovante"
                                        data-comprovante-id="{{ comprovante.id }}"
                                        data-militante-id="{{ comprovante.militante_id }}"
                                        data-militante-nome="{{ comprovante.militante.nome }}"
                                        data-data-comprovante="{{ comprovante.data_comprovante.strftime('%Y-%m-%d') }}"
                                        title="Editar">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalExcluirComprovante"
                                        data-comprovante-id="{{ comprovante.id }}"
                                        data-comprovante-info="Comprovante de {{ comprovante.militante.nome }} - Total: R$ {{ "%.2f"|format(comprovante.centralizacoes|sum(attribute='valor')) }}"
                                        title="Excluir">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Novo Comprovante -->
<div class="modal fade" id="novoComprovanteModal" tabindex="-1" aria-labelledby="novoComprovanteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="novoComprovanteModalLabel">Novo Comprovante</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="novoComprovanteForm">
                    <!-- Dados únicos do comprovante -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="militante_id" class="form-label">Militante</label>
                            <select class="form-select" id="militante_id" name="militante_id" required>
                                <option value="">Selecione o militante</option>
                                {% for militante in militantes %}
                                <option value="{{ militante.id }}">{{ militante.nome }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="data_comprovante" class="form-label">Data do Comprovante</label>
                            <input type="date" class="form-control" id="data_comprovante" name="data_comprovante" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="forma_pagamento" class="form-label">Forma de Pagamento</label>
                            <select class="form-select" id="forma_pagamento" name="forma_pagamento" required>
                                <option value="">Selecione a forma de pagamento</option>
                                <option value="PIX">PIX</option>
                                <option value="TRANSFERENCIA">Transferência/DOC</option>
                                <option value="DEPOSITO">Depósito</option>
                                <option value="MAQUININHA">Maquininha</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="campanha_id" class="form-label">Campanha</label>
                            <select class="form-select" id="campanha_id" name="campanha_id">
                                <option value="">Selecione a campanha</option>
                                {% for campanha in campanhas %}
                                <option value="{{ campanha.id }}">{{ campanha.nome }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <!-- Centralizações -->
                    <div class="centralizacoes-container">
                        <h6 class="mb-3">Centralizações</h6>
                        <div class="centralizacao-item mb-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Tipo de Comprovante</label>
                                    <select class="form-select tipo-comprovante" name="tipo_comprovante[]" required>
                                        <option value="">Selecione o tipo</option>
                                        <option value="COTA">Cota</option>
                                        <option value="JORNAL">Jornal</option>
                                        <option value="ASSINATURA">Assinatura</option>
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label">Valor</label>
                                    <input type="number" class="form-control valor" name="valor[]" step="0.01" required>
                                </div>
                                <div class="col-md-1 d-flex align-items-end">
                                    <button type="button" class="btn btn-danger btn-sm remover-centralizacao">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-secondary btn-sm mb-3" id="adicionar-centralizacao">
                        <i class="bi bi-plus"></i> Adicionar Centralização
                    </button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="salvarComprovante">Salvar</button>
            </div>
        </div>
    </div>
</div>

<style>
.centralizacao-item {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Adicionar nova centralização
    document.getElementById('adicionar-centralizacao').addEventListener('click', function() {
        const container = document.querySelector('.centralizacoes-container');
        const newItem = document.querySelector('.centralizacao-item').cloneNode(true);
        newItem.querySelector('.valor').value = '';
        newItem.querySelector('.tipo-comprovante').value = '';
        container.appendChild(newItem);
    });

    // Remover centralização
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remover-centralizacao')) {
            const centralizacoes = document.querySelectorAll('.centralizacao-item');
            if (centralizacoes.length > 1) {
                e.target.closest('.centralizacao-item').remove();
            }
        }
    });

    // Salvar comprovante
    document.getElementById('salvarComprovante').addEventListener('click', function() {
        const form = document.getElementById('novoComprovanteForm');
        const formData = new FormData(form);
        
        // Coletar dados das centralizações
        const centralizacoes = [];
        document.querySelectorAll('.centralizacao-item').forEach(item => {
            centralizacoes.push({
                tipo_comprovante: item.querySelector('.tipo-comprovante').value,
                valor: item.querySelector('.valor').value
            });
        });

        // Adicionar centralizações ao formData
        formData.append('centralizacoes', JSON.stringify(centralizacoes));

        fetch('/comprovantes/novo', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message || 'Erro ao salvar comprovante');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erro ao salvar comprovante');
        });
    });
});
</script>

<!-- Modal Editar Comprovante -->
<div class="modal fade" id="modalEditarComprovante" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-edit"></i> Editar Comprovante</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formEditarComprovante" method="post">
                    <div class="mb-3">
                        <label for="editMilitante" class="form-label">Militante:</label>
                        <input type="text" class="form-control bg-light" id="editMilitanteNome" readonly>
                        <input type="hidden" id="editMilitante" name="militante_id">
                    </div>
                    <div class="mb-3">
                        <label for="editTipoComprovante" class="form-label">Tipo de Comprovante:</label>
                        <select class="form-select" id="editTipoComprovante" name="tipo_comprovante" required>
                            <option value="">Selecione o tipo</option>
                            <option value="1">Cota</option>
                            {% if current_user.has_permission('gerenciar_tipos_comprovante') %}
                            <option value="2">Contribuição Extra</option>
                            <option value="3">Doação</option>
                            <option value="4">Taxa de Evento</option>
                            <option value="5">Jornal Avulso</option>
                            <option value="6">Assinatura de Jornal</option>
                            <option value="7">Campanha Financeira</option>
                            <option value="8">Outros</option>
                            {% endif %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="editValor" class="form-label">Valor:</label>
                        <input type="number" step="0.01" class="form-control" id="editValor" name="valor" required>
                    </div>
                    <div class="mb-3">
                        <label for="editDataComprovante" class="form-label">Data do Comprovante:</label>
                        <input type="date" class="form-control" id="editDataComprovante" name="data_comprovante" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Excluir Comprovante -->
<div class="modal fade" id="modalExcluirComprovante" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-trash"></i> Excluir Comprovante</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Tem certeza que deseja excluir este comprovante?</p>
                <p id="comprovanteInfo" class="text-muted"></p>
            </div>
            <div class="modal-footer">
                <form id="formExcluirComprovante" method="post">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger">Excluir</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/comprovantes.js') }}"></script>
{% endblock %}