{% extends "base.html" %}
{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}{% if conta %}Editar{% else %}Nova{% endif %} Conta a Receber - CapeSystem{% endblock %}

{% block content %}
<div class="mb-4">
    <h1><i class="bi bi-{% if conta %}pencil{% else %}plus-circle{% endif %}"></i> {% if conta %}Editar{% else %}Nova{% endif %} Conta a Receber</h1>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" id="formContaReceber" class="form-lockable">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Cliente *</label>
                    <select class="form-select" name="cliente_id" required>
                        <option value="">Selecione...</option>
                        {% for cliente in clientes %}
                            <option value="{{ cliente['id_real'] }}" 
                                    {% if conta and conta.cliente_id == cliente['id_real'] %}selected{% endif %}>
                                {{ cliente['nome'] }}
                                {% if cliente['tipo_cadastro'] == 'pessoa' %} (Novo){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Empresa *</label>
                    {% if is_multi_empresa() %}
                    <select class="form-select" name="empresa_id" id="empresaSelect" required onchange="filtrarProdutos()">
                        <option value="">Selecione...</option>
                        {% for empresa in empresas %}
                            <option value="{{ empresa.id }}" {% if conta and conta.empresa_id == empresa.id %}selected{% endif %}>
                                {{ empresa_ui.nome(empresa) }}
                            </option>
                        {% endfor %}
                    </select>
                    {% else %}
                    <!-- Modo single-empresa: usar empresa padrão -->
                    <input type="hidden" name="empresa_id" id="empresaSelect" value="{{ empresas[0].id if empresas else '' }}">
                    <input type="text" class="form-control" value="{{ empresa_ui.nome(empresas[0], 'N/A') if empresas else 'N/A' }}" readonly>
                    {% endif %}
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Produto</label>
                    <select class="form-select" name="produto_id" id="produtoSelect">
                        <option value="">Selecione...</option>
                        {% for produto in produtos %}
                            <option value="{{ produto.id }}" data-empresa="{{ produto.empresa_id }}" 
                                    {% if conta and conta.produto_id == produto.id %}selected{% endif %}>
                                {{ produto.nome }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Banco Recebedor *</label>
                    <select class="form-select" name="banco_recebedor_id" id="bancoSelect" required onchange="atualizarCustoNota()">
                        <option value="">Selecione...</option>
                        {% for banco in bancos %}
                            <option value="{{ banco.id }}" data-custo="{{ banco.custo_nota_percentual }}"
                                    {% if conta and conta.banco_recebedor_id == banco.id %}selected{% endif %}>
                                {{ banco.nome }} {% if banco.custo_nota_percentual > 0 %}({{ banco.custo_nota_percentual }}% nota){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Descrição *</label>
                <input type="text" class="form-control" name="descricao" required
                       value="{% if conta %}{{ conta.descricao }}{% endif %}"
                       placeholder="Ex: Mensalidade Futura Server - Janeiro/2025">
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Valor Bruto (R$) *</label>
                    <input type="number" class="form-control" name="valor_bruto" id="valorBruto" 
                           value="{% if conta %}{{ conta.valor_bruto }}{% endif %}"
                           step="0.01" min="0.01" required onchange="calcularValorLiquido()">
                </div>
                
                <div class="col-md-4 mb-3">
                    <label class="form-label">Custo Nota (%)</label>
                    <input type="text" class="form-control" id="custoNotaDisplay" readonly value="0.00">
                </div>
                
                <div class="col-md-4 mb-3">
                    <label class="form-label">Valor Líquido (R$)</label>
                    <input type="text" class="form-control" id="valorLiquido" readonly value="0.00">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Data de Vencimento *</label>
                <input type="date" class="form-control" name="data_vencimento" 
                       value="{% if conta %}{{ conta.data_vencimento.strftime('%Y-%m-%d') }}{% endif %}"
                       required>
            </div>

            <!-- Vinculação de Documento -->
            <div class="card mb-3 bg-light">
                <div class="card-body">
                    <h6 class="card-title"><i class="bi bi-link-45deg"></i> Vincular Documento (opcional)</h6>
                    <p class="text-muted small">Associe esta conta a uma venda, NF-e ou Ordem de Serviço.</p>
                    
                    <div class="row">
                        <!-- Tipo de Documento -->
                        <div class="col-md-4 mb-3">
                            <label for="tipo_documento_vinculado" class="form-label">Tipo de Documento</label>
                            <select class="form-select" id="tipo_documento_vinculado" name="tipo_documento_vinculado" onchange="buscarDocumentosVinculoReceber()">
                                <option value="">Sem vínculo</option>
                                <option value="VENDA" {% if conta and conta.tipo_documento_vinculado == 'VENDA' %}selected{% endif %}>Venda/Pedido</option>
                                <option value="NFE" {% if conta and conta.tipo_documento_vinculado == 'NFE' %}selected{% endif %}>Nota Fiscal Emitida</option>
                                <option value="OS" {% if conta and conta.tipo_documento_vinculado == 'OS' %}selected{% endif %}>Ordem de Serviço</option>
                                <option value="MANUAL" {% if conta and conta.tipo_documento_vinculado == 'MANUAL' %}selected{% endif %}>Referência Manual</option>
                            </select>
                        </div>
                        
                        <!-- Documento Vinculado -->
                        <div class="col-md-8 mb-3" id="containerDocumentoVinculoReceber">
                            <label for="documento_vinculado_receber" class="form-label">Documento</label>
                            <select class="form-select" id="documento_vinculado_receber" name="documento_vinculado_receber">
                                <option value="">Selecione o tipo primeiro...</option>
                            </select>
                            <!-- Mostrar documento vinculado atualmente -->
                            {% if conta and conta.numero_documento_vinculado %}
                            <small class="text-success">
                                <i class="bi bi-check-circle"></i> Vinculado: {{ conta.tipo_documento_vinculado }} - {{ conta.numero_documento_vinculado }}
                            </small>
                            {% endif %}
                        </div>
                        
                        <!-- Referência Manual -->
                        <div class="col-md-8 mb-3 d-none" id="containerReferenciaManualReceber">
                            <label for="numero_documento_vinculado" class="form-label">Número/Referência</label>
                            <input type="text" class="form-control" id="numero_documento_vinculado" name="numero_documento_vinculado" 
                                   value="{% if conta and conta.tipo_documento_vinculado == 'MANUAL' %}{{ conta.numero_documento_vinculado }}{% endif %}"
                                   placeholder="Ex: Contrato 123, Proposta ABC...">
                        </div>
                    </div>
                    
                    <!-- Campos hidden para IDs -->
                    <input type="hidden" id="venda_id" name="venda_id" value="{{ conta.venda_id if conta and conta.venda_id else '' }}">
                    <input type="hidden" id="ordem_servico_id_receber" name="ordem_servico_id" value="{{ conta.ordem_servico_id if conta and conta.ordem_servico_id else '' }}">
                    <input type="hidden" id="nota_fiscal_id" name="nota_fiscal_id" value="{{ conta.nota_fiscal_id if conta and conta.nota_fiscal_id else '' }}">
                </div>
            </div>
            
            <!-- Plano de Contas para DRE -->
            <div class="mb-3">
                <label for="plano_contas_id" class="form-label"><i class="bi bi-bar-chart-line text-success"></i> Plano de Contas (DRE)</label>
                <select class="form-select" id="plano_contas_id" name="plano_contas_id">
                    <option value="">-- Selecione para categorização no DRE --</option>
                    {% for plano in planos_contas %}
                        <option value="{{ plano.id }}" {% if conta and conta.plano_contas_id == plano.id %}selected{% endif %}>
                            {{ plano.codigo }} - {{ plano.nome }}
                        </option>
                    {% endfor %}
                </select>
                <small class="text-muted">Categorização para o Demonstrativo de Resultado do Exercício</small>
            </div>

            <div class="mb-3">
                <label class="form-label">Observações</label>
                <textarea class="form-control" name="observacoes" rows="2">{% if conta %}{{ conta.observacoes }}{% endif %}</textarea>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> {% if conta %}Atualizar{% else %}Salvar{% endif %}
                </button>
                <a href="{{ url_for('contas_receber') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancelar
                </a>
            </div>
        </form>
    </div>
</div>

<script>
function filtrarProdutos() {
    const empresaId = document.getElementById('empresaSelect').value;
    const produtoSelect = document.getElementById('produtoSelect');
    const options = produtoSelect.querySelectorAll('option');
    
    options.forEach(option => {
        if (option.value === '') {
            option.style.display = '';
            return;
        }
        
        if (empresaId === '' || option.dataset.empresa === empresaId) {
            option.style.display = '';
        } else {
            option.style.display = 'none';
        }
    });
    
    // Reseta a seleção se o produto não pertence à empresa selecionada
    const selectedOption = produtoSelect.selectedOptions[0];
    if (selectedOption && selectedOption.dataset.empresa !== empresaId && empresaId !== '') {
        produtoSelect.value = '';
    }
}

function atualizarCustoNota() {
    const bancoSelect = document.getElementById('bancoSelect');
    const selectedOption = bancoSelect.selectedOptions[0];
    const custo = parseFloat(selectedOption.dataset.custo || 0);
    
    document.getElementById('custoNotaDisplay').value = custo.toFixed(2) + '%';
    calcularValorLiquido();
}

function calcularValorLiquido() {
    const valorBruto = parseFloat(document.getElementById('valorBruto').value || 0);
    const bancoSelect = document.getElementById('bancoSelect');
    const selectedOption = bancoSelect.selectedOptions[0];
    const custoPercentual = parseFloat(selectedOption.dataset.custo || 0);
    
    const custoValor = valorBruto * (custoPercentual / 100);
    const valorLiquido = valorBruto - custoValor;
    
    document.getElementById('valorLiquido').value = 'R$ ' + valorLiquido.toFixed(2);
}

// Inicializa
document.addEventListener('DOMContentLoaded', function() {
    filtrarProdutos();
    atualizarCustoNota();
    
    // Inicializa vinculação de documento
    const tipo = document.getElementById('tipo_documento_vinculado').value;
    if (tipo && tipo !== 'MANUAL') {
        buscarDocumentosVinculoReceber();
    } else if (tipo === 'MANUAL') {
        document.getElementById('containerDocumentoVinculoReceber').classList.add('d-none');
        document.getElementById('containerReferenciaManualReceber').classList.remove('d-none');
    }
});

function buscarDocumentosVinculoReceber() {
    const tipo = document.getElementById('tipo_documento_vinculado').value;
    const select = document.getElementById('documento_vinculado_receber');
    const containerDoc = document.getElementById('containerDocumentoVinculoReceber');
    const containerManual = document.getElementById('containerReferenciaManualReceber');
    
    // Limpa campos hidden
    document.getElementById('venda_id').value = '';
    document.getElementById('ordem_servico_id_receber').value = '';
    document.getElementById('nota_fiscal_id').value = '';
    
    if (tipo === 'MANUAL') {
        containerDoc.classList.add('d-none');
        containerManual.classList.remove('d-none');
        return;
    } else {
        containerDoc.classList.remove('d-none');
        containerManual.classList.add('d-none');
    }
    
    if (!tipo) {
        select.innerHTML = '<option value="">Selecione o tipo primeiro...</option>';
        return;
    }
    
    select.innerHTML = '<option value="">Carregando...</option>';
    
    fetch(`/api/documentos-vincular?tipo=${tipo}&contexto=receber`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let options = '<option value="">Selecione o documento...</option>';
                data.documentos.forEach(doc => {
                    options += `<option value="${doc.id}" data-tipo="${doc.tipo}">${doc.descricao}</option>`;
                });
                select.innerHTML = options;
            } else {
                select.innerHTML = '<option value="">Nenhum documento encontrado</option>';
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            select.innerHTML = '<option value="">Erro ao carregar</option>';
        });
}

// Quando selecionar um documento, preencher o ID correto
document.getElementById('documento_vinculado_receber').addEventListener('change', function() {
    const docId = this.value;
    const tipo = document.getElementById('tipo_documento_vinculado').value;
    const option = this.options[this.selectedIndex];
    
    // Limpa todos os IDs
    document.getElementById('venda_id').value = '';
    document.getElementById('ordem_servico_id_receber').value = '';
    document.getElementById('nota_fiscal_id').value = '';
    
    if (!docId) return;
    
    // Preenche o ID correto baseado no tipo
    if (tipo === 'VENDA') {
        document.getElementById('venda_id').value = docId;
    } else if (tipo === 'NFE') {
        document.getElementById('nota_fiscal_id').value = docId;
    } else if (tipo === 'OS') {
        document.getElementById('ordem_servico_id_receber').value = docId;
    }
    
    // Atualiza o número do documento para exibição
    const descricao = option.textContent.trim();
    document.getElementById('numero_documento_vinculado').value = descricao;
});
</script>
{% endblock %}