{% extends "base.html" %}

{% block title %}Transações - Controle Financeiro{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Transações</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNovaTransacao">
        <i class="bi bi-plus-circle"></i> Nova Transação
    </button>
</div>

<div class="card">
    <div class="card-body">
        {% if transacoes %}
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Descrição</th>
                            <th>Tipo</th>
                            <th>Categoria</th>
                            <th>Conta</th>
                            <th class="text-end">Valor</th>
                            <th class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for transacao in transacoes %}
                            <tr>
                                <td>{{ transacao.data.strftime('%d/%m/%Y') }}</td>
                                <td>
                                    <strong>{{ transacao.descricao }}</strong>
                                    {% if transacao.observacoes %}
                                        <br><small class="text-muted">{{ transacao.observacoes }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if transacao.tipo == 'receita' %}
                                        <span class="badge bg-success">Receita</span>
                                    {% else %}
                                        <span class="badge bg-danger">Despesa</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge" style="background-color: {{ transacao.categoria.cor }}">
                                        {{ transacao.categoria.icone }} {{ transacao.categoria.nome }}
                                    </span>
                                </td>
                                <td>{{ transacao.conta.nome }}</td>
                                <td class="text-end">
                                    <span class="{% if transacao.tipo == 'receita' %}text-success{% else %}text-danger{% endif %}">
                                        <strong>
                                            {% if transacao.tipo == 'receita' %}+{% else %}-{% endif %}
                                            R$ {{ "%.2f"|format(transacao.valor) }}
                                        </strong>
                                    </span>
                                </td>
                                <td class="text-center">
                                    <form method="POST" action="{{ url_for('excluir_transacao', id=transacao.id) }}" 
                                          style="display: inline;" 
                                          onsubmit="return confirm('Tem certeza que deseja excluir esta transação?')">
                                        <button type="submit" class="btn btn-sm btn-danger">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-inbox" style="font-size: 4rem; color: #ccc;"></i>
                <p class="text-muted mt-3">Nenhuma transação registrada ainda.</p>
            </div>
        {% endif %}
    </div>
</div>

<!-- Modal Nova Transação -->
<div class="modal fade cape-modal-standard" id="modalNovaTransacao" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nova Transação</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('nova_transacao') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Tipo</label>
                        <select class="form-select" name="tipo" id="tipoTransacao" required onchange="filtrarCategorias()">
                            <option value="despesa">Despesa</option>
                            <option value="receita">Receita</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Descrição</label>
                        <input type="text" class="form-control" name="descricao" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Valor (R$)</label>
                        <input type="number" class="form-control" name="valor" step="0.01" min="0.01" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Data</label>
                        <input type="date" class="form-control" name="data" required 
                               value="{{ datetime.now().strftime('%Y-%m-%d') }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Conta</label>
                        <select class="form-select" name="conta_id" required>
                            {% for conta in contas %}
                                <option value="{{ conta.id }}">{{ conta.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Categoria</label>
                        <select class="form-select" name="categoria_id" id="categoriaSelect" required>
                            {% for categoria in categorias %}
                                <option value="{{ categoria.id }}" data-tipo="{{ categoria.tipo }}">
                                    {{ categoria.icone }} {{ categoria.nome }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observações</label>
                        <textarea class="form-control" name="observacoes" rows="2"></textarea>
                    </div>
                </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>
{% endblock %}

{% block scripts %}
<script>
function filtrarCategorias() {
    const tipo = document.getElementById('tipoTransacao').value;
    const select = document.getElementById('categoriaSelect');
    const options = select.querySelectorAll('option');
    
    options.forEach(option => {
        if (option.dataset.tipo === tipo) {
            option.style.display = '';
            if (!select.value || select.selectedOptions[0].dataset.tipo !== tipo) {
                option.selected = true;
            }
        } else {
            option.style.display = 'none';
        }
    });
}

// Inicializa o filtro ao carregar
document.addEventListener('DOMContentLoaded', filtrarCategorias);
</script>
{% endblock %}