{% 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="#modalNovoPagamento">
                <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="tabelaPagamentos">
                    <thead>
                        <tr>
                            <th>Militante</th>
                            <th>Tipo de Comprovante</th>
                            <th>Valor</th>
                            <th>Data do Comprovante</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for pagamento in pagamentos %}
                        <tr>
                            <td data-militante="{{ pagamento.militante_id }}">{{ pagamento.militante.nome if pagamento.militante else 'N/A' }}</td>
                            <td data-tipo="{{ pagamento.tipo_pagamento }}">
                                {% if pagamento.tipo_pagamento == 1 %}
                                    Cota
                                {% elif pagamento.tipo_pagamento == 2 %}
                                    Contribuição Extra
                                {% elif pagamento.tipo_pagamento == 3 %}
                                    Doação
                                {% elif pagamento.tipo_pagamento == 4 %}
                                    Taxa de Evento
                                {% elif pagamento.tipo_pagamento == 5 %}
                                    Outros
                                {% else %}
                                    Não Definido
                                {% endif %}
                            </td>
                            <td data-valor="{{ pagamento.valor }}">R$ {{ "%.2f"|format(pagamento.valor) }}</td>
                            <td data-data="{{ pagamento.data_pagamento }}">{{ pagamento.data_pagamento.strftime('%d/%m/%Y') }}</td>
                            <td>
                                <button type="button" 
                                        class="btn btn-sm btn-outline-primary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalEditarPagamento"
                                        data-pagamento-id="{{ pagamento.id }}"
                                        data-militante-id="{{ pagamento.militante_id }}"
                                        data-tipo-pagamento="{{ pagamento.tipo_pagamento }}"
                                        data-valor="{{ pagamento.valor }}"
                                        data-data-pagamento="{{ pagamento.data_pagamento.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="#modalExcluirPagamento"
                                        data-pagamento-id="{{ pagamento.id }}"
                                        data-pagamento-info="Comprovante de {{ pagamento.militante.nome if pagamento.militante else 'N/A' }} - R$ {{ "%.2f"|format(pagamento.valor) }}"
                                        title="Excluir">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Novo Pagamento -->
<div class="modal fade" id="modalNovoPagamento" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus"></i> Novo Comprovante</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formNovoPagamento" method="post" action="{{ url_for('adicionar_pagamento') }}">
                    <div class="mb-3">
                        <label for="militante" class="form-label">Militante:</label>
                        <select class="form-select" id="militante" name="militante_id" required>
                            <option value="">Selecione um militante</option>
                            {% for militante in militantes %}
                            <option value="{{ militante.id }}">{{ militante.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="tipoPagamento" class="form-label">Tipo de Comprovante:</label>
                        <select class="form-select" id="tipoPagamento" name="tipo_pagamento" required>
                            <option value="">Selecione o tipo</option>
                            <option value="1">Cota</option>
                            <option value="2">Contribuição Extra</option>
                            <option value="3">Doação</option>
                            <option value="4">Taxa de Evento</option>
                            <option value="5">Outros</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="valor" class="form-label">Valor:</label>
                        <input type="number" step="0.01" class="form-control" id="valor" name="valor" required>
                    </div>
                    <div class="mb-3">
                        <label for="dataPagamento" class="form-label">Data do Comprovante:</label>
                        <input type="date" class="form-control" id="dataPagamento" name="data_pagamento" 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 Editar Pagamento -->
<div class="modal fade" id="modalEditarPagamento" 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="formEditarPagamento" 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="editTipoPagamento" class="form-label">Tipo de Comprovante:</label>
                        <select class="form-select" id="editTipoPagamento" name="tipo_pagamento" required>
                            <option value="">Selecione o tipo</option>
                            <option value="1">Cota</option>
                            <option value="2">Contribuição Extra</option>
                            <option value="3">Doação</option>
                            <option value="4">Taxa de Evento</option>
                            <option value="5">Outros</option>
                        </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="editDataPagamento" class="form-label">Data do Comprovante:</label>
                        <input type="date" class="form-control" id="editDataPagamento" name="data_pagamento" 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 Pagamento -->
<div class="modal fade" id="modalExcluirPagamento" 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="pagamentoInfo" class="text-muted"></p>
            </div>
            <div class="modal-footer">
                <form id="formExcluirPagamento" 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/pagamentos.js') }}"></script>
{% endblock %}