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

{% block title %}Contas a Receber{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-cash-coin"></i> Contas a Receber</h1>
    <div>
        <button type="button" class="btn btn-success me-2" id="btnBaixaLote" style="display:none;" onclick="abrirBaixaLote()">
            <i class="bi bi-check-circle-fill"></i> Baixar Selecionadas (<span id="countSelecionadas">0</span>)
        </button>
        <a href="{{ url_for('nova_conta_receber') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Nova Conta
        </a>
    </div>
</div>

<!-- Totalizadores -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card text-white bg-warning">
            <div class="card-body">
                <h6 class="card-title"><i class="bi bi-clock"></i> Pendentes</h6>
                <h3>R$ {{ "%.2f"|format(total_pendente) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-white bg-danger">
            <div class="card-body">
                <h6 class="card-title"><i class="bi bi-exclamation-triangle"></i> Atrasadas</h6>
                <h3>R$ {{ "%.2f"|format(total_atrasado) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-white bg-success">
            <div class="card-body">
                <h6 class="card-title"><i class="bi bi-check-circle"></i> Recebido Neste Mês</h6>
                <h3>R$ {{ "%.2f"|format(total_pago_mes) }}</h3>
            </div>
        </div>
    </div>
</div>

<!-- Busca e Filtros -->
<div class="card mb-3">
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control" id="buscarConta" placeholder="Buscar por Descrição, Cliente, Valor ou Número da Nota...">
                </div>
            </div>
        </div>
        <form method="GET" class="row g-3">
            <div class="col-md-2">
                <label class="form-label">Data Inicial</label>
                <input type="date" class="form-control" name="data_inicial" value="{{ request.args.get('data_inicial', '') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Data Final</label>
                <input type="date" class="form-control" name="data_final" value="{{ request.args.get('data_final', '') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Status</label>
                <select class="form-select" name="status">
                    <option value="todas">Todas</option>
                    <option value="pendente" {% if request.args.get('status') == 'pendente' %}selected{% endif %}>Pendente</option>
                    <option value="atrasado" {% if request.args.get('status') == 'atrasado' %}selected{% endif %}>Atrasado</option>
                    <option value="pago" {% if request.args.get('status') == 'pago' %}selected{% endif %}>Pago</option>
                    <option value="cancelado" {% if request.args.get('status') == 'cancelado' %}selected{% endif %}>Cancelado</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Empresa</label>
                <select class="form-select" name="empresa">
                    <option value="todas">Todas</option>
                    {% for empresa in empresas %}
                        <option value="{{ empresa.id }}" 
                            {% if request.args.get('empresa') == empresa.id|string %}selected
                            {% elif not request.args.get('empresa') and empresa_selecionada and empresa.id == empresa_selecionada.id %}selected
                            {% endif %}>
                            {{ empresa_ui.nome(empresa) }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Classificação</label>
                <select class="form-select" name="classificar">
                    <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                    <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                    <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Ordem</label>
                <select class="form-select" name="ordem">
                    <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
                    <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Lista de Contas -->
<div class="card">
    <div class="card-body">
        {% if contas %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th width="40">
                                <input type="checkbox" class="form-check-input" id="selecionarTodas" 
                                       onchange="selecionarTodasContas(this)">
                            </th>
                            <th width="60">#ID</th>
                            <th>Vencimento</th>
                            <th>Cliente</th>
                            <th>Descrição</th>
                            <th>Empresa</th>
                            <th>Banco</th>
                            <th class="text-end">Valor Bruto</th>
                            <th class="text-end">Custo Nota</th>
                            <th class="text-end">Valor Líquido</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for conta in contas %}
                            <tr>
                                <td>
                                    {% if conta.status in ['pendente', 'atrasado'] %}
                                        <input type="checkbox" class="form-check-input conta-checkbox" 
                                               value="{{ conta.id }}" 
                                               data-valor="{{ conta.valor_bruto }}"
                                               onchange="atualizarContador()">
                                    {% endif %}
                                </td>
                                <td><small class="text-muted">#{{ conta.id }}</small></td>
                                <td>
                                    <strong>{{ conta.data_vencimento.strftime('%d/%m/%Y') }}</strong>
                                    {% if conta.data_pagamento %}
                                        <br><small class="text-success">Pago em {{ conta.data_pagamento.strftime('%d/%m/%Y') }}</small>
                                    {% endif %}
                                </td>
                                <td>{{ conta.get_cliente_nome() }}</td>
                                <td>{{ conta.descricao }}</td>
                                <td>
                                    {% set nome_empresa_reduzido = empresa_ui.nome(conta.empresa) %}
                                    <span class="badge bg-{% if nome_empresa_reduzido == 'CapeSystem' %}primary{% else %}info{% endif %}" title="{{ empresa_ui.titulo(conta.empresa) }}">
                                        {{ nome_empresa_reduzido }}
                                    </span>
                                </td>
                                <td>
                                    {{ conta.banco_recebedor.nome }}
                                    {% if conta.custo_nota_percentual > 0 %}
                                        <br><small class="text-muted">({{ conta.custo_nota_percentual }}%)</small>
                                    {% endif %}
                                </td>
                                <td class="text-end">R$ {{ "%.2f"|format(conta.valor_bruto) }}</td>
                                <td class="text-end text-danger">
                                    {% if conta.custo_nota_valor > 0 %}
                                        -R$ {{ "%.2f"|format(conta.custo_nota_valor) }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td class="text-end"><strong>R$ {{ "%.2f"|format(conta.valor_liquido) }}</strong></td>
                                <td class="text-center">
                                    {% if conta.status == 'pendente' %}
                                        <span class="badge bg-warning">Pendente</span>
                                    {% elif conta.status == 'atrasado' %}
                                        <span class="badge bg-danger">Atrasado</span>
                                    {% elif conta.status == 'pago' %}
                                        <span class="badge bg-success">Pago</span>
                                    {% elif conta.status == 'cancelado' %}
                                        <span class="badge bg-secondary">Cancelado</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    {% if conta.status in ['pendente', 'atrasado'] %}
                                        <div class="dropdown action-menu">
                                            <button class="action-menu-btn" type="button" data-bs-toggle="dropdown">
                                                <i class="bi bi-three-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="{{ url_for('editar_conta_receber', id=conta.id) }}"><i class="bi bi-eye-fill text-primary"></i> Abrir Título</a></li>
                                                <li><a class="dropdown-item" href="{{ url_for('editar_conta_receber', id=conta.id) }}"><i class="bi bi-pencil-fill text-warning"></i> Editar Título</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item" href="{{ url_for('formulario_baixar_conta', id=conta.id) }}"><i class="bi bi-check-circle-fill text-success"></i> Registrar Recebimento</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form method="POST" action="{{ url_for('cancelar_conta_receber', id=conta.id) }}">
                                                        <button type="submit" class="dropdown-item text-danger" onclick="return confirm('Deseja cancelar esta conta?')">
                                                            <i class="bi bi-x-circle-fill"></i> Cancelar Título
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                    {% elif conta.status == 'pago' %}
                                        <div class="dropdown action-menu">
                                            <button class="action-menu-btn" type="button" data-bs-toggle="dropdown">
                                                <i class="bi bi-three-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="{{ url_for('editar_conta_receber', id=conta.id) }}"><i class="bi bi-eye-fill text-primary"></i> Abrir Título</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form method="POST" action="{{ url_for('estornar_conta_receber', id=conta.id) }}"
                                              style="display: inline;"
                                              class="js-operacao-critica"
                                              data-confirm="Tem certeza que deseja estornar este recebimento? A transação será removida e a conta voltará como pendente.">
                                            <button type="submit" class="btn btn-sm btn-warning" title="Estornar Recebimento">
                                                <i class="bi bi-arrow-counterclockwise"></i>
                                            </button>
                                        </form>
                                    {% endif %}
                                </td>
                            </tr>

                            <!-- Modal para Baixar -->
                            <div class="modal fade cape-modal-standard" id="modalBaixar{{ conta.id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Registrar Recebimento</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                        </div>
                                        <form method="POST" action="{{ url_for('baixar_conta_receber', id=conta.id) }}" id="formBaixar{{ conta.id }}">
                                            <div class="modal-body">
                                                <p><strong>Cliente:</strong> {{ conta.get_cliente_nome() or 'Não informado' }}</p>
                                                <p><strong>Descrição:</strong> {{ conta.descricao }}</p>
                                                <p><strong>Banco:</strong> {{ conta.banco_recebedor.nome }} (Taxa: R$ {{ "%.2f"|format(conta.banco_recebedor.custo_por_boleto) }})</p>
                                                
                                                <hr>
                                                
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Valor Original</label>
                                                            <input type="text" class="form-control" 
                                                                   value="R$ {{ '%.2f'|format(conta.valor_bruto) }}" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Data de Recebimento *</label>
                                                            <input type="date" class="form-control" name="data_pagamento" 
                                                                   value="{{ datetime.now().strftime('%Y-%m-%d') }}" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="alert alert-info">
                                                    <small><strong>Recebimento em Atraso?</strong> Informe os valores de juros e multa recebidos:</small>
                                                </div>
                                                
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Valor de Juros</label>
                                                            <input type="number" step="0.01" class="form-control" 
                                                                   name="valor_juros" value="0.00">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Valor de Multa</label>
                                                            <input type="number" step="0.01" class="form-control" 
                                                                   name="valor_multa" value="0.00">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Desconto Concedido</label>
                                                            <input type="number" step="0.01" class="form-control" 
                                                                   name="valor_desconto" value="0.00">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Valor Recebido do Cliente *</label>
                                                            <input type="number" step="0.01" class="form-control" 
                                                                   name="valor_pago_total" 
                                                                   value="{{ '%.2f'|format(conta.valor_bruto) }}" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <label class="form-label">Conta Corrente/Caixa *</label>
                                                    <select class="form-select" name="conta_corrente_id" required>
                                                        {% for conta_corrente in contas_correntes %}
                                                            <option value="{{ conta_corrente.id }}" {% if conta_corrente.id == conta_corrente_padrao_id %}selected{% endif %}>
                                                                {{ conta_corrente.nome }}{% if conta_corrente.id == conta_corrente_padrao_id %} - Padrão{% endif %}
                                                            </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                
                                                <div class="alert alert-info">
                                                    <strong>Observação:</strong> O Valor Líquido será calculado automaticamente:
                                                    <br><small>Valor Recebido - Taxa do Banco (R$ {{ "%.2f"|format(conta.banco_recebedor.custo_por_boleto) }})</small>
                                                </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-success">Confirmar Registro</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-cash-coin" style="font-size: 4rem; color: #ccc;"></i>
                <p class="text-muted mt-3">Nenhuma Conta a Receber cadastrada.</p>
                <a href="{{ url_for('nova_conta_receber') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Cadastrar Primeira Conta
                </a>
            </div>
        {% endif %}
    </div>
</div>

<script>
// Busca de contas em tempo real
document.getElementById('buscarConta').addEventListener('input', filtrarContas);

function filtrarContas() {
    const busca = document.getElementById('buscarConta').value.toLowerCase();
    const linhas = document.querySelectorAll('tbody tr');
    
    linhas.forEach(linha => {
        const texto = linha.textContent.toLowerCase();
        
        if (texto.includes(busca)) {
            linha.style.display = '';
        } else {
            linha.style.display = 'none';
        }
    });
}

// SOLUÇÃO DEFINITIVA: Força destruição de modais anteriores antes de abrir novo
document.addEventListener('show.bs.modal', function(event) {
    // Destrói qualquer modal aberto
    document.querySelectorAll('.modal.show').forEach(m => {
        const instance = bootstrap.Modal.getInstance(m);
        if (instance) instance.dispose();
    });
    
    // Remove todos os backdrops
    document.querySelectorAll('.modal-backdrop').forEach(b => b.remove());
    document.body.classList.remove('modal-open');
    document.body.removeAttribute('style');
});

// Cleanup ao fechar
document.addEventListener('hidden.bs.modal', function() {
    setTimeout(() => {
        document.querySelectorAll('.modal-backdrop').forEach(b => b.remove());
        document.body.classList.remove('modal-open');
        document.body.removeAttribute('style');
    }, 50);
});

// Funções de seleção em lote
function selecionarTodasContas(checkbox) {
    document.querySelectorAll('.conta-checkbox').forEach(cb => {
        cb.checked = checkbox.checked;
    });
    atualizarContador();
}

function atualizarContador() {
    const selecionadas = document.querySelectorAll('.conta-checkbox:checked');
    const count = selecionadas.length;
    const btn = document.getElementById('btnBaixaLote');
    
    document.getElementById('countSelecionadas').textContent = count;
    btn.style.display = count > 0 ? 'inline-block' : 'none';
}

function abrirBaixaLote() {
    const selecionadas = Array.from(document.querySelectorAll('.conta-checkbox:checked'));
    const ids = selecionadas.map(cb => cb.value).join(',');
    const valores = selecionadas.map(cb => parseFloat(cb.dataset.valor));
    const total = valores.reduce((a, b) => a + b, 0);
    
    if (ids) {
        window.location.href = `/conta-receber/baixar-lote?ids=${ids}&total=${total.toFixed(2)}`;
    }
}

async function executarOperacaoCritica(form) {
    const confirmar = form.dataset.confirm;
    if (confirmar && !window.confirm(confirmar)) {
        return false;
    }

    const enviar = async (extra = {}) => {
        const formData = new FormData(form);
        Object.entries(extra).forEach(([chave, valor]) => formData.append(chave, valor));
        const response = await fetch(form.action, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: formData
        });
        const data = await response.json().catch(() => ({ success: false, message: 'Falha ao processar a resposta do servidor.' }));
        return { response, data };
    };

    let { response, data } = await enviar();

    if (response.status === 403 && data.requer_autorizacao) {
        const usuario = window.prompt((data.message || 'Operação requer autorização adicional.') + '\n\nUsuário autorizador:');
        if (!usuario) {
            return false;
        }
        const senha = window.prompt('Senha do autorizador:');
        if (!senha) {
            return false;
        }
        const pin = window.prompt('PIN do autorizador (se cadastrado):') || '';
        ({ response, data } = await enviar({ autorizador_usuario: usuario, autorizador_senha: senha, pin_autorizacao: pin }));
    }

    if (response.ok && data.success !== false) {
        if (data.message) {
            window.alert(data.message);
        }
        window.location.href = data.redirect || window.location.href;
        return false;
    }

    window.alert(data.message || 'Não foi possível concluir a operação.');
    return false;
}

document.querySelectorAll('form.js-operacao-critica').forEach((form) => {
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        executarOperacaoCritica(form);
    });
});
</script>
{% endblock %}