{% extends 'base.html' %}
{% load static %}

{% block title %}Histórico de {{ cliente.nome }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-clock-history"></i> Histórico do Cliente</h2>
    <a href="{% url 'lista_clientes' %}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar para Lista
    </a>
</div>

<!-- Informações do Cliente -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-person-circle"></i> Dados do Cliente
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <p class="mb-2"><strong>Nome:</strong> {{ cliente.nome }}</p>
                <p class="mb-2"><strong>CPF:</strong> {{ cliente.cpf|default:"-" }}</p>
                <p class="mb-2"><strong>Telefone:</strong> {{ cliente.telefone }}</p>
            </div>
            <div class="col-md-6">
                <p class="mb-2"><strong>Email:</strong> {{ cliente.email|default:"-" }}</p>
                <p class="mb-2"><strong>Endereço:</strong> {{ cliente.endereco|default:"-" }}</p>
                <p class="mb-2"><strong>Cliente desde:</strong> {{ cliente.data_cadastro|date:"d/m/Y" }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Condicionais do Cliente -->
<div class="card mb-4">
    <div class="card-header"><i class="bi bi-bag-heart"></i> Condicionais do Cliente</div>
    <div class="card-body">
        <div class="row g-3 mb-3">
            <div class="col-md-3"><strong>Em aberto:</strong> {{ condicionais_abertos|length }}</div>
            <div class="col-md-3"><strong>Vencidos:</strong> {{ condicionais_vencidos }}</div>
            <div class="col-md-3"><strong>Peças com o cliente:</strong> {{ pecas_condicional }}</div>
            <div class="col-md-3"><strong>Valor em condicional:</strong> R$ {{ valor_condicional|floatformat:2 }}</div>
            <div class="col-md-3">
                {% if resumo_limite_crediario %}<strong>Limite total:</strong> R$ {{ resumo_limite_crediario.limite_total|floatformat:2 }}<br><strong>Saldo devedor:</strong> R$ {{ resumo_limite_crediario.valor_em_aberto|floatformat:2 }}<br><strong>Disponível:</strong> R$ {{ resumo_limite_crediario.limite_disponivel|floatformat:2 }}{% if user.is_superuser or perms.core.change_cliente %}<br><a href="{% url 'editar_cliente' cliente.pk %}">Editar limite do cliente</a>{% endif %}
                {% else %}<span class="text-muted">Limite de crediário inativo</span>{% endif %}
            </div>
        </div>
        <p class="small text-muted">O valor em condicional é separado do limite de crediário e não reduz o saldo disponível para compras a prazo.</p>
        {% if condicionais_cliente %}
        <div class="table-responsive"><table class="table table-sm table-hover align-middle">
            <thead><tr><th>Número</th><th>Envio</th><th>Previsão</th><th>Situação</th><th>Peças pendentes</th><th>Valor pendente</th><th>Produtos devolvidos / comprados</th><th></th></tr></thead>
            <tbody>{% for condicional in condicionais_cliente %}<tr>
                <td><strong>{{ condicional.numero }}</strong></td><td>{{ condicional.enviado_em|date:'d/m/Y H:i'|default:'-' }}</td><td>{{ condicional.previsao_devolucao|date:'d/m/Y'|default:'-' }}</td>
                <td>{{ condicional.get_status_display }}{% if condicional.vencido %} <span class="badge bg-danger">Vencido</span>{% endif %}</td><td>{{ condicional.quantidade_pendente }}</td><td>R$ {{ condicional.valor_pendente|floatformat:2 }}</td>
                <td>{% for evento in condicional.historico.all %}{% if evento.tipo == 'devolucao' or evento.tipo == 'venda' %}<small>{{ evento.get_tipo_display }}: {{ evento.item.descricao }} ({{ evento.quantidade }})</small><br>{% endif %}{% endfor %}</td>
                <td><a class="btn btn-sm btn-outline-primary" href="{% url 'condicional:detalhe' condicional.pk %}"><i class="bi bi-eye"></i> Abrir</a></td>
            </tr>{% endfor %}</tbody>
        </table></div>
        {% else %}<p class="text-muted mb-0">Este cliente ainda não possui condicionais.</p>{% endif %}
    </div>
</div>

<!-- Cards de Estatísticas -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-white bg-info">
            <div class="card-body text-center">
                <h5 class="card-title">Total de Compras</h5>
                <h3>{{ quantidade_vendas }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-success">
            <div class="card-body text-center">
                <h5 class="card-title">Valor Total</h5>
                <h3>R$ {{ total_compras|floatformat:2 }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-warning">
            <div class="card-body text-center">
                <h5 class="card-title">Parcelas Pendentes</h5>
                <h3>{{ parcelas_pendentes|length }}</h3>
                <p class="mb-0">R$ {{ total_pendente|floatformat:2 }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-primary">
            <div class="card-body text-center">
                <h5 class="card-title">Última Compra</h5>
                {% if ultima_compra %}
                <h3>{{ ultima_compra.data_venda|date:"d/m/Y" }}</h3>
                {% else %}
                <h3>Nenhuma</h3>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Histórico de Vendas -->
<div class="card mb-4">
    <div class="card-header">
        <i class="bi bi-cart-check"></i> Histórico de Vendas
    </div>
    <div class="card-body">
        {% if vendas %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Data</th>
                        <th>Número</th>
                        <th>Forma de Pagamento</th>
                        <th>Parcelas</th>
                        <th class="text-end">Valor Total</th>
                        <th>Status</th>
                        <th class="text-center">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for venda in vendas %}
                    <tr>
                        <td>{{ venda.data_venda|date:"d/m/Y H:i" }}</td>
                        <td><strong>{{ venda.numero_venda }}</strong></td>
                        <td>
                            {% for pagamento in venda.pagamentos.all %}
                                {{ pagamento.forma_pagamento.nome }}
                                {% if not forloop.last %}, {% endif %}
                            {% endfor %}
                        </td>
                        <td>
                            {% if venda.parcelas.count > 0 %}
                                {{ venda.parcelas.count }}x
                            {% else %}
                                À vista
                            {% endif %}
                        </td>
                        <td class="text-end"><strong>R$ {{ venda.total|floatformat:2 }}</strong></td>
                        <td>
                            {% if venda.status == 'finalizada' %}
                                <span class="badge bg-success">Finalizada</span>
                            {% elif venda.status == 'cancelada' %}
                                <span class="badge bg-danger">Cancelada</span>
                            {% else %}
                                <span class="badge bg-warning">{{ venda.status|title }}</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <a href="{% url 'detalhe_venda' venda.id %}" 
                               class="btn btn-sm btn-info text-white"
                               title="Ver detalhes">
                                <i class="bi bi-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <td colspan="4" class="text-end"><strong>Total:</strong></td>
                        <td class="text-end"><strong>R$ {{ total_compras|floatformat:2 }}</strong></td>
                        <td colspan="2"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> Este cliente ainda não realizou nenhuma compra.
        </div>
        {% endif %}
    </div>
</div>

<!-- Parcelas a Receber -->
{% if parcelas_pendentes %}
<div class="card mb-4">
    <div class="card-header bg-warning text-dark">
        <i class="bi bi-currency-dollar"></i> Parcelas Pendentes
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Venda</th>
                        <th>Parcela</th>
                        <th>Vencimento</th>
                        <th class="text-end">Saldo</th>
                        <th>Último Recebimento</th>
                        <th>Status</th>
                        <th class="text-center">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for parcela in parcelas_pendentes %}
                    <tr {% if parcela.status == 'atrasada' %}class="table-danger"{% endif %}>
                        <td><strong>{{ parcela.venda.numero_venda }}</strong></td>
                        <td>{{ parcela.numero_parcela }}/{{ parcela.venda.parcelas.count }}</td>
                        <td>{{ parcela.data_vencimento|date:"d/m/Y" }}</td>
                        <td class="text-end">
                            <strong>R$ {{ parcela.valor_restante|floatformat:2 }}</strong>
                            {% if parcela.valor_pago > 0 %}
                            <br><small class="text-muted">
                                Original: R$ {{ parcela.valor|floatformat:2 }}<br>
                                Pago: R$ {{ parcela.valor_pago|floatformat:2 }}
                            </small>
                            {% endif %}
                        </td>
                        <td>
                            {% if parcela.ultimo_recebimento %}
                                {{ parcela.ultimo_recebimento.data_recebimento|date:"d/m/Y H:i" }}<br>
                                <small class="text-muted">
                                    R$ {{ parcela.ultimo_recebimento.valor|floatformat:2 }}
                                    via {{ parcela.ultimo_recebimento.forma_pagamento.nome }}
                                </small>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if parcela.status == 'atrasada' %}
                                <span class="badge bg-danger">Atrasada</span>
                            {% else %}
                                <span class="badge bg-warning text-dark">Pendente</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <button type="button"
                                    class="btn btn-sm btn-success"
                                    onclick="abrirModalRecebimento({{ parcela.pk }}, '{{ parcela.valor|floatformat:2 }}', '{{ parcela.valor_restante|floatformat:2 }}')">
                                <i class="bi bi-check-circle"></i> Receber
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <td colspan="3" class="text-end"><strong>Total Pendente:</strong></td>
                        <td class="text-end"><strong>R$ {{ total_pendente|floatformat:2 }}</strong></td>
                        <td colspan="3"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Histórico de Recebimentos -->
{% if recebimentos_parcelas %}
<div class="card mb-4">
    <div class="card-header bg-info text-white">
        <i class="bi bi-clock-history"></i> Histórico de Recebimentos
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Data</th>
                        <th>Venda</th>
                        <th>Parcela</th>
                        <th>Forma</th>
                        <th>Recebido por</th>
                        <th class="text-end">Valor Recebido</th>
                    </tr>
                </thead>
                <tbody>
                    {% for recebimento in recebimentos_parcelas %}
                    <tr>
                        <td>{{ recebimento.data_recebimento|date:"d/m/Y H:i" }}</td>
                        <td><strong>{{ recebimento.parcela.venda.numero_venda }}</strong></td>
                        <td>{{ recebimento.parcela.numero_parcela }}/{{ recebimento.parcela.pagamento.parcelas }}</td>
                        <td>{{ recebimento.forma_pagamento.nome }}</td>
                        <td>{{ recebimento.recebido_por.username|default:"-" }}</td>
                        <td class="text-end"><strong>R$ {{ recebimento.valor|floatformat:2 }}</strong></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Parcelas Pagas -->
{% if parcelas_pagas %}
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <i class="bi bi-check-circle"></i> Parcelas Pagas
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Venda</th>
                        <th>Parcela</th>
                        <th>Vencimento</th>
                        <th>Pagamento</th>
                        <th class="text-end">Valor</th>
                    </tr>
                </thead>
                <tbody>
                    {% for parcela in parcelas_pagas %}
                    <tr>
                        <td><strong>{{ parcela.venda.numero_venda }}</strong></td>
                        <td>{{ parcela.numero_parcela }}/{{ parcela.venda.parcelas.count }}</td>
                        <td>{{ parcela.data_vencimento|date:"d/m/Y" }}</td>
                        <td>{{ parcela.data_pagamento|date:"d/m/Y" }}</td>
                        <td class="text-end"><strong>R$ {{ parcela.valor|floatformat:2 }}</strong></td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <td colspan="4" class="text-end"><strong>Total Pago:</strong></td>
                        <td class="text-end"><strong>R$ {{ total_pago|floatformat:2 }}</strong></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Modal de Recebimento -->
<div class="modal fade" id="modalRecebimentoParcela" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="bi bi-cash-coin"></i> Registrar Recebimento</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" id="form-recebimento-parcela">
                <div class="modal-body">
                    {% csrf_token %}
                    <input type="hidden" name="next" id="next-recebimento-parcela" value="">
                    <p class="mb-2">Valor da parcela: <strong id="valor-parcela-modal">R$ 0,00</strong></p>
                    <p class="mb-3">Saldo restante: <strong id="saldo-parcela-modal" class="text-danger">R$ 0,00</strong></p>
                    <div class="mb-3">
                        <label class="form-label">Valor recebido *</label>
                        <input type="text" name="valor_recebido" id="valor-recebido-parcela" class="form-control" required>
                        <small class="text-muted">Informe o valor que o cliente está pagando agora. Pode ser menor que o saldo.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Forma de pagamento do recebimento *</label>
                        <select name="forma_pagamento_id" id="forma-pagamento-recebimento" class="form-select" required>
                            <option value="">Selecione...</option>
                            {% for forma in formas_pagamento %}
                            <option value="{{ forma.id }}" data-tipo="{{ forma.tipo }}">{{ forma.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="card border-primary mb-3" id="grupo-cartao-recebimento" style="display: none;">
                        <div class="card-header bg-primary-subtle">
                            <strong><i class="bi bi-credit-card-2-front"></i> Dados do Cartão</strong>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Bandeira *</label>
                                <select name="bandeira_cartao" id="bandeira-cartao-recebimento" class="form-select">
                                    <option value="">Selecione...</option>
                                    {% for valor, nome in bandeiras_cartao %}
                                    <option value="{{ valor }}">{{ nome }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Parcelas no cartão</label>
                                <input type="number" name="parcelas_cartao" id="parcelas-cartao-recebimento" class="form-control" value="1" min="1">
                            </div>
                            <small class="text-muted" id="taxa-cartao-recebimento-ajuda">
                                A taxa será calculada automaticamente.
                            </small>
                            <div class="alert alert-light border mt-3 mb-0" id="resumo-taxa-cartao-recebimento" style="display: none;">
                                <div class="d-flex justify-content-between">
                                    <span>Taxa da maquininha</span>
                                    <strong class="text-danger" id="valor-taxa-cartao-recebimento">R$ 0,00</strong>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Valor líquido</span>
                                    <strong class="text-success" id="valor-liquido-cartao-recebimento">R$ 0,00</strong>
                                </div>
                            </div>
                        </div>
                    </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">
                        <i class="bi bi-check-circle"></i> Registrar Recebimento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let modalRecebimentoParcela = null;
const taxasCartaoRecebimento = {
    {% for taxa in taxas_maquininha %}
    "{{ taxa.tipo }}|{{ taxa.bandeira }}|{{ taxa.parcelas }}": "{{ taxa.taxa_percentual|floatformat:2 }}"{% if not forloop.last %},{% endif %}
    {% endfor %}
};

function chaveTaxaRecebimento(tipo, bandeira, parcelas) {
    const parcelasTaxa = tipo === 'debito' ? 1 : parcelas;
    return `${tipo}|${bandeira}|${parcelasTaxa}`;
}

function valorDecimalRecebimento(valor) {
    const limpo = String(valor || '').replace('R$', '').replace(/\s/g, '');
    if (!limpo) return 0;
    return Number(limpo.replace(/\./g, '').replace(',', '.')) || 0;
}

function moedaRecebimento(valor) {
    return valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function atualizarCartaoRecebimento() {
    const selectForma = document.getElementById('forma-pagamento-recebimento');
    const grupoCartao = document.getElementById('grupo-cartao-recebimento');
    const bandeira = document.getElementById('bandeira-cartao-recebimento');
    const parcelas = document.getElementById('parcelas-cartao-recebimento');
    const ajuda = document.getElementById('taxa-cartao-recebimento-ajuda');
    const inputValor = document.getElementById('valor-recebido-parcela');
    const resumoTaxa = document.getElementById('resumo-taxa-cartao-recebimento');
    const valorTaxaEl = document.getElementById('valor-taxa-cartao-recebimento');
    const valorLiquidoEl = document.getElementById('valor-liquido-cartao-recebimento');
    if (!selectForma || !grupoCartao || !bandeira || !parcelas || !ajuda) return true;

    const tipo = selectForma.options[selectForma.selectedIndex]?.getAttribute('data-tipo') || '';
    const isCartao = ['credito', 'debito'].includes(tipo);
    grupoCartao.style.display = isCartao ? '' : 'none';
    bandeira.required = isCartao;
    parcelas.required = isCartao;

    if (!isCartao) {
        bandeira.value = '';
        parcelas.value = '1';
        ajuda.textContent = 'A taxa será calculada automaticamente.';
        ajuda.className = 'text-muted';
        if (resumoTaxa) resumoTaxa.style.display = 'none';
        return true;
    }

    if (tipo === 'debito') {
        parcelas.value = '1';
        parcelas.readOnly = true;
        parcelas.classList.add('bg-light');
    } else {
        parcelas.readOnly = false;
        parcelas.classList.remove('bg-light');
    }

    if (!bandeira.value) {
        ajuda.textContent = 'Selecione a bandeira do cartão.';
        ajuda.className = 'text-danger';
        if (resumoTaxa) resumoTaxa.style.display = 'none';
        return false;
    }

    const qtdParcelas = parseInt(parcelas.value || '1', 10);
    const taxa = taxasCartaoRecebimento[chaveTaxaRecebimento(tipo, bandeira.value, qtdParcelas)];
    if (!taxa) {
        ajuda.textContent = 'Não há taxa cadastrada para esta bandeira e parcela.';
        ajuda.className = 'text-danger';
        if (resumoTaxa) resumoTaxa.style.display = 'none';
        return false;
    }

    const taxaNumero = Number(String(taxa).replace(',', '.')) || 0;
    const valorRecebido = valorDecimalRecebimento(inputValor?.value);
    const valorTaxa = Math.round(((valorRecebido * taxaNumero) / 100) * 100) / 100;
    const valorLiquido = Math.max(valorRecebido - valorTaxa, 0);
    ajuda.textContent = `Taxa da maquininha: ${taxa}%`;
    ajuda.className = 'text-success';
    if (resumoTaxa && valorTaxaEl && valorLiquidoEl) {
        valorTaxaEl.textContent = moedaRecebimento(valorTaxa);
        valorLiquidoEl.textContent = moedaRecebimento(valorLiquido);
        resumoTaxa.style.display = '';
    }
    return true;
}

function abrirModalRecebimento(parcelaId, valorParcela, saldoRestante) {
    const form = document.getElementById('form-recebimento-parcela');
    const valorEl = document.getElementById('valor-parcela-modal');
    const saldoEl = document.getElementById('saldo-parcela-modal');
    const inputValor = document.getElementById('valor-recebido-parcela');
    const selectForma = document.getElementById('forma-pagamento-recebimento');
    const inputNext = document.getElementById('next-recebimento-parcela');

    form.action = '/parcelas/' + parcelaId + '/pagar/';
    inputNext.value = window.location.href;
    valorEl.textContent = `R$ ${valorParcela}`;
    saldoEl.textContent = `R$ ${saldoRestante}`;
    inputValor.value = saldoRestante;
    selectForma.value = '';
    document.getElementById('bandeira-cartao-recebimento').value = '';
    document.getElementById('parcelas-cartao-recebimento').value = '1';
    atualizarCartaoRecebimento();

    if (!modalRecebimentoParcela) {
        modalRecebimentoParcela = new bootstrap.Modal(document.getElementById('modalRecebimentoParcela'));
    }
    modalRecebimentoParcela.show();
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('forma-pagamento-recebimento')?.addEventListener('change', atualizarCartaoRecebimento);
    document.getElementById('bandeira-cartao-recebimento')?.addEventListener('change', atualizarCartaoRecebimento);
    document.getElementById('parcelas-cartao-recebimento')?.addEventListener('input', atualizarCartaoRecebimento);
    document.getElementById('valor-recebido-parcela')?.addEventListener('input', atualizarCartaoRecebimento);
    document.getElementById('form-recebimento-parcela')?.addEventListener('submit', function (e) {
        if (!atualizarCartaoRecebimento()) {
            e.preventDefault();
            alert('Cadastre a taxa desta bandeira/parcela em Taxas Cartão antes de registrar.');
        }
    });
});
</script>

{% endblock %}