{% extends "base.html" %}

{% block title %}Nova Transferência Bancária{% endblock %}

{% block content %}
<div class="mb-4">
    <h2><i class="bi bi-arrow-left-right"></i> Nova Transferência Bancária</h2>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" class="form-lockable">
            <div class="mb-3">
                <label for="descricao" class="form-label">Descrição</label>
                <input type="text" class="form-control" id="descricao" name="descricao" 
                       value="Transferência bancária" 
                       placeholder="Descrição da transferência">
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Origem *</label>
                        <select class="form-select" id="tipo_origem" onchange="toggleOrigem()">
                            <option value="banco_recebedor">Banco de Recebimento</option>
                            <option value="conta_corrente">Conta Corrente</option>
                        </select>
                    </div>
                    
                    <div class="mb-3" id="banco_origem_div">
                        <label for="banco_recebedor_origem_id" class="form-label">Banco de Recebimento</label>
                        <select class="form-select" id="banco_recebedor_origem_id" name="banco_recebedor_origem_id">
                            <option value="">Selecione...</option>
                            {% for banco in bancos_recebedores %}
                            <option value="{{ banco.id }}">
                                {{ banco.nome }} - R$ {{ "%.2f"|format(banco.saldo_disponivel()) }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3" id="conta_origem_div" style="display: none;">
                        <label for="conta_origem_id" class="form-label">Conta Corrente Origem</label>
                        <select class="form-select" id="conta_origem_id" name="conta_origem_id">
                            <option value="">Selecione...</option>
                            {% for conta in contas_correntes %}
                            <option value="{{ conta.id }}">
                                {{ conta.nome }} ({{ conta.natureza }}) - R$ {{ "%.2f"|format(conta.saldo_atual()) }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="conta_destino_id" class="form-label">Destino (Conta Corrente) *</label>
                        <select class="form-select" id="conta_destino_id" name="conta_destino_id" required>
                            <option value="">Selecione...</option>
                            {% for conta in contas_correntes %}
                            <option value="{{ conta.id }}">
                                {{ conta.nome }} ({{ conta.natureza }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <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" 
                               placeholder="0.00" required>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="data_transferencia" class="form-label">Data da Transferência *</label>
                        <input type="date" class="form-control" id="data_transferencia" name="data_transferencia" 
                               value="{{ data_hoje }}" required>
                    </div>
                </div>
            </div>
            
            <div class="mb-3">
                <label for="observacoes" class="form-label">Observações</label>
                <textarea class="form-control" id="observacoes" name="observacoes" rows="3" 
                          placeholder="Informações adicionais sobre esta transferência"></textarea>
            </div>
            
            <hr>
            
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-check-circle"></i> Confirmar Transferência
                </button>
                <a href="{{ url_for('contas_correntes') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancelar
                </a>
            </div>
        </form>
    </div>
</div>

<script>
function toggleOrigem() {
    const tipo = document.getElementById('tipo_origem').value;
    const bancoDiv = document.getElementById('banco_origem_div');
    const contaDiv = document.getElementById('conta_origem_div');
    
    if (tipo === 'banco_recebedor') {
        bancoDiv.style.display = 'block';
        contaDiv.style.display = 'none';
        document.getElementById('conta_origem_id').value = '';
        document.getElementById('banco_recebedor_origem_id').required = true;
        document.getElementById('conta_origem_id').required = false;
    } else {
        bancoDiv.style.display = 'none';
        contaDiv.style.display = 'block';
        document.getElementById('banco_recebedor_origem_id').value = '';
        document.getElementById('banco_recebedor_origem_id').required = false;
        document.getElementById('conta_origem_id').required = true;
    }
}
</script>
{% endblock %}