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

{% block title %}Contas a Receber - {{ block.super }}{% endblock %}

{% block content %}
<style>
.parcelas-page .stat-mini .card-body {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem .95rem;
}
.parcelas-page .stat-mini .sm-icon {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.15rem;
}
.parcelas-page .stat-mini .sm-label { font-size: .78rem; color: #66788c; font-weight: 600; line-height: 1.1; }
.parcelas-page .stat-mini .sm-value { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.parcelas-page .stat-mini .sm-sub   { font-size: .72rem; color: #8a97a8; }
.parcelas-page .sm-warning { background: #fff8e6; color: #b26a00; }
.parcelas-page .sm-danger  { background: #fdecee; color: #b02a37; }
.parcelas-page .sm-success { background: #e6f9f0; color: #1e7e34; }
.parcelas-page .sm-primary { background: #e4effc; color: #245e98; }
.parcelas-page .stat-mini .card { border-radius: 12px; transition: transform .15s, box-shadow .15s; }
.parcelas-page .stat-mini .card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.09); }

.parcelas-page .accordion-button { padding: .55rem .9rem; }
.parcelas-page .accordion-button .cli-nome { font-size: .98rem; }
.parcelas-page .accordion-button .badge { font-size: .68rem; }
.parcelas-page .accordion-button .cli-total { font-size: 1.02rem; }
.parcelas-page .accordion-body { font-size: .85rem; }
.parcelas-page .accordion-body .table-sm { font-size: .84rem; }
.parcelas-page .accordion-body th { font-size: .76rem; font-weight: 700; color: #66788c; }

/* limita altura da lista interna de cada cliente */
.parcelas-page .tabela-scroll {
    max-height: 420px; overflow-y: auto;
}
.parcelas-page .tabela-scroll thead th { position: sticky; top: 0; background: #f8fafc; z-index: 2; }
.parcelas-page .tabela-scroll td { vertical-align: middle; }
</style>
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <h2 class="mb-0"><i class="bi bi-wallet2"></i> Contas a Receber</h2>
    <a href="{% url 'lista_vendas' %}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar para Vendas
    </a>
</div>

{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
{% endif %}

<!-- Resumo Geral -->
<div class="row mb-3 g-2 parcelas-page">
    <div class="col-6 col-lg-3 stat-mini">
        <a href="?view=pendentes" class="text-decoration-none">
            <div class="card border-warning shadow-sm h-100 {% if view_mode == 'pendentes' %}bg-warning bg-opacity-10{% endif %}">
                <div class="card-body">
                    <span class="sm-icon sm-warning"><i class="bi bi-hourglass-split"></i></span>
                    <div>
                        <div class="sm-label">Parcelas Pendentes{% if view_mode == 'pendentes' %} · filtro{% endif %}</div>
                        <div class="sm-value text-warning">{{ estatisticas.qtd_pendentes }}</div>
                        <div class="sm-sub">R$ {{ estatisticas.valor_pendentes|floatformat:2 }}</div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-6 col-lg-3 stat-mini">
        <a href="?view=atrasadas" class="text-decoration-none">
            <div class="card border-danger shadow-sm h-100 {% if view_mode == 'atrasadas' %}bg-danger bg-opacity-10{% endif %}">
                <div class="card-body">
                    <span class="sm-icon sm-danger"><i class="bi bi-exclamation-triangle-fill"></i></span>
                    <div>
                        <div class="sm-label">Atrasadas{% if view_mode == 'atrasadas' %} · filtro{% endif %}</div>
                        <div class="sm-value text-danger">{{ estatisticas.qtd_atrasadas }}</div>
                        <div class="sm-sub">R$ {{ estatisticas.valor_atrasadas|floatformat:2 }}</div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-6 col-lg-3 stat-mini">
        <a href="?view=pagas" class="text-decoration-none">
            <div class="card border-success shadow-sm h-100 {% if view_mode == 'pagas' %}bg-success bg-opacity-10{% endif %}">
                <div class="card-body">
                    <span class="sm-icon sm-success"><i class="bi bi-check-circle-fill"></i></span>
                    <div>
                        <div class="sm-label">Total Recebido{% if view_mode == 'pagas' %} · filtro{% endif %}</div>
                        <div class="sm-value text-success">R$ {{ estatisticas.valor_pago|floatformat:2 }}</div>
                        <div class="sm-sub">{{ estatisticas.qtd_pagas }} parcela(s)</div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-6 col-lg-3 stat-mini">
        <a href="?view=todas" class="text-decoration-none">
            <div class="card border-primary shadow-sm h-100 {% if view_mode == 'todas' %}bg-primary bg-opacity-10{% endif %}">
                <div class="card-body">
                    <span class="sm-icon sm-primary"><i class="bi bi-people-fill"></i></span>
                    <div>
                        <div class="sm-label">Clientes com Dívidas{% if view_mode == 'todas' %} · filtro{% endif %}</div>
                        <div class="sm-value text-primary">{{ estatisticas.clientes_com_dividas }}</div>
                        <div class="sm-sub">Ativos no momento</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Filtros -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-funnel"></i> Filtros</span>
        {% if view_mode != 'pendentes' or busca or status_filtro %}
        <a href="{% url 'lista_parcelas' %}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-clockwise"></i> Resetar filtros
        </a>
        {% endif %}
    </div>
    <div class="card-body">
        {% if view_mode == 'pendentes' %}
        <div class="alert alert-info mb-3">
            <i class="bi bi-info-circle"></i> <strong>Visualização:</strong> Mostrando apenas clientes com parcelas pendentes ou atrasadas. 
            <a href="?view=todas" class="alert-link">Clique aqui para ver todos os clientes</a>.
        </div>
        {% elif view_mode == 'atrasadas' %}
        <div class="alert alert-danger mb-3">
            <i class="bi bi-exclamation-triangle"></i> <strong>Visualização:</strong> Mostrando apenas parcelas atrasadas.
        </div>
        {% elif view_mode == 'pagas' %}
        <div class="alert alert-success mb-3">
            <i class="bi bi-check-circle"></i> <strong>Visualização:</strong> Mostrando apenas parcelas pagas.
        </div>
        {% elif view_mode == 'todas' %}
        <div class="alert alert-primary mb-3">
            <i class="bi bi-list"></i> <strong>Visualização:</strong> Mostrando todos os clientes e parcelas.
        </div>
        {% endif %}
        
        <form method="get" class="row g-2">
            <input type="hidden" name="view" value="{{ view_mode }}">
            <input type="hidden" name="por_pagina" value="{{ por_pagina }}">
            <div class="col-12 col-md-5">
                <label class="form-label"><i class="bi bi-search"></i> Buscar Cliente ou Venda</label>
                <input type="text" name="busca" class="form-control" 
                       placeholder="Digite o nome do cliente ou número da venda..." 
                       value="{{ busca }}">
            </div>
            
            <div class="col-12 col-md-3">
                <label class="form-label"><i class="bi bi-funnel"></i> Filtrar por Status</label>
                <select name="status" class="form-select">
                    <option value="">Todos os Status</option>
                    <option value="pendente" {% if status_filtro == 'pendente' %}selected{% endif %}>Pendentes</option>
                    <option value="atrasada" {% if status_filtro == 'atrasada' %}selected{% endif %}>Atrasadas</option>
                    <option value="paga" {% if status_filtro == 'paga' %}selected{% endif %}>Pagas</option>
                </select>
            </div>
            
            <div class="col-12 col-md-4 d-flex align-items-end gap-2 flex-wrap">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> Buscar
                </button>
                <a href="?view={{ view_mode }}&por_pagina={{ por_pagina }}" class="btn btn-secondary">
                    <i class="bi bi-x"></i> Limpar busca
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Controle de Itens por Página e Totais -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <strong>Total de Clientes:</strong> {{ clientes_com_parcelas.paginator.count }}
        <span class="text-muted">|</span>
        <span class="text-danger">
            <strong>Total a Receber:</strong> R$ {{ total_geral_pendente|floatformat:2 }}
        </span>
        {% if qtd_total_atrasadas > 0 %}
            <span class="text-muted">|</span>
            <span class="text-danger">
                <i class="bi bi-exclamation-triangle"></i> {{ qtd_total_atrasadas }} parcela{{ qtd_total_atrasadas|pluralize }} atrasada{{ qtd_total_atrasadas|pluralize }}
            </span>
        {% endif %}
    </div>
    
    <form method="get" class="d-flex align-items-center gap-2">
        <input type="hidden" name="view" value="{{ view_mode }}">
        {% if busca %}
        <input type="hidden" name="busca" value="{{ busca }}">
        {% endif %}
        {% if status_filtro %}
        <input type="hidden" name="status" value="{{ status_filtro }}">
        {% endif %}
        
        <label class="mb-0 text-nowrap"><i class="bi bi-list-ul"></i> Exibir:</label>
        <select name="por_pagina" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
            <option value="10" {% if por_pagina == 10 %}selected{% endif %}>10 clientes</option>
            <option value="15" {% if por_pagina == 15 %}selected{% endif %}>15 clientes</option>
            <option value="20" {% if por_pagina == 20 %}selected{% endif %}>20 clientes</option>
        </select>
    </form>
</div>

<!-- Lista de Clientes com Accordion -->
<div class="card">
    <div class="card-header bg-primary text-white">
        <div class="row align-items-center">
            <div class="col-md-6 mb-2 mb-md-0">
                <i class="bi bi-people"></i> Clientes com Parcelas
                {% if clientes_com_parcelas.paginator.num_pages > 1 %}
                    <span class="badge bg-light text-dark ms-2">
                        Página {{ clientes_com_parcelas.number }} de {{ clientes_com_parcelas.paginator.num_pages }}
                    </span>
                {% endif %}
                <span class="badge bg-warning text-dark ms-1" id="contador-expandidos" style="display: none;">
                    <span id="num-expandidos">0</span> expandido<span id="plural-expandidos">s</span>
                </span>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-light" onclick="expandirTodos()" title="Expandir todos os clientes">
                        <i class="bi bi-arrows-expand"></i> <span class="d-none d-sm-inline">Expandir Todos</span>
                    </button>
                    <button type="button" class="btn btn-light" onclick="recolherTodos()" title="Recolher todos os clientes">
                        <i class="bi bi-arrows-collapse"></i> <span class="d-none d-sm-inline">Recolher Todos</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        {% if clientes_com_parcelas %}
            <div class="accordion accordion-flush" id="accordionClientes">
                {% for cliente_data in clientes_com_parcelas %}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#cliente{{ forloop.counter }}"
                                aria-expanded="false">
                            <div class="w-100 d-flex justify-content-between align-items-center pe-3 gap-2">
                                <div class="d-flex align-items-center flex-wrap gap-1 text-start">
                                    <i class="bi bi-person-circle text-primary me-1"></i>
                                    <span class="cli-nome fw-bold">{{ cliente_data.cliente.nome }}</span>
                                    <small class="text-muted">
                                        {% if cliente_data.cliente.telefone %}<i class="bi bi-telephone"></i> {{ cliente_data.cliente.telefone }}{% endif %}
                                        {% if cliente_data.cliente.cpf %}· <i class="bi bi-credit-card"></i> {{ cliente_data.cliente.cpf }}{% endif %}
                                    </small>
                                </div>
                                <div class="d-flex align-items-center gap-2 text-end flex-shrink-0">
                                    {% if cliente_data.qtd_atrasadas > 0 %}
                                        <span class="badge bg-danger">
                                            <i class="bi bi-exclamation-triangle"></i>
                                            {{ cliente_data.qtd_atrasadas }} atrasada{{ cliente_data.qtd_atrasadas|pluralize }}
                                        </span>
                                    {% endif %}
                                    {% if cliente_data.qtd_pendentes > 0 %}
                                        <span class="badge bg-warning text-dark">
                                            {{ cliente_data.qtd_pendentes }} pendente{{ cliente_data.qtd_pendentes|pluralize }}
                                        </span>
                                    {% endif %}
                                    <div class="ms-2 border-start ps-2">
                                        <strong class="text-danger cli-total">
                                            R$ {{ cliente_data.total_pendente|floatformat:2 }}
                                        </strong>
                                        <small class="text-muted">a receber</small>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </h2>
                    <div id="cliente{{ forloop.counter }}" 
                         class="accordion-collapse collapse" 
                         data-bs-parent="#accordionClientes">
                        <div class="accordion-body p-0">
                            <div class="table-responsive tabela-scroll">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Venda</th>
                                            <th>Parcela</th>
                                            <th>Vencimento</th>
                                            <th>Valor</th>
                                            <th>Status</th>
                                            <th>Pagamento</th>
                                            <th class="text-end">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for parcela in cliente_data.parcelas %}
                                        <tr class="
                                            {% if parcela.status == 'atrasada' or parcela.data_vencimento < hoje and parcela.status == 'pendente' %}
                                                table-danger
                                            {% elif parcela.status == 'paga' %}
                                                table-success
                                            {% endif %}">
                                            <td>
                                                <a href="{% url 'detalhe_venda' parcela.venda.id %}" 
                                                   class="text-decoration-none">
                                                    <i class="bi bi-receipt"></i> {{ parcela.venda.numero_venda }}
                                                </a>
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary">
                                                    {{ parcela.numero_parcela }}/{{ parcela.pagamento.parcelas }}
                                                </span>
                                            </td>
                                            <td>
                                                <i class="bi bi-calendar3"></i> 
                                                {{ parcela.data_vencimento|date:"d/m/Y" }}
                                            </td>
                                            <td>
                                                <strong class="fs-6">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.status == 'paga' %}
                                                    <span class="badge bg-success">
                                                        <i class="bi bi-check-circle"></i> Paga
                                                    </span>
                                                {% elif parcela.status == 'atrasada' or parcela.data_vencimento < hoje %}
                                                    <span class="badge bg-danger">
                                                        <i class="bi bi-exclamation-triangle"></i> Atrasada
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-warning text-dark">
                                                        <i class="bi bi-hourglass-split"></i> Pendente
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if parcela.historico_recebimentos %}
                                                    <div class="small">
                                                        {% for recebimento in parcela.historico_recebimentos %}
                                                        <div class="border-bottom pb-1 mb-1">
                                                            <div>
                                                                <i class="bi bi-clock-history text-primary"></i>
                                                                {{ recebimento.data_recebimento|date:"d/m/Y H:i" }}
                                                                <span class="badge {% if recebimento.tipo_recebimento == 'Total' %}bg-success{% else %}bg-info text-dark{% endif %}">
                                                                    {{ recebimento.tipo_recebimento }}
                                                                </span>
                                                            </div>
                                                            <div class="text-muted">
                                                                R$ {{ recebimento.valor|floatformat:2 }}
                                                                via {{ recebimento.forma_pagamento.nome }}
                                                            </div>
                                                            {% if recebimento.valor_taxa %}
                                                            <div class="text-muted">
                                                                Taxa: R$ {{ recebimento.valor_taxa|floatformat:2 }}
                                                                | Líquido: R$ {{ recebimento.valor_liquido|floatformat:2 }}
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                        {% endfor %}
                                                    </div>
                                                {% elif parcela.data_pagamento %}
                                                    <i class="bi bi-check-circle text-success"></i>
                                                    {{ parcela.data_pagamento|date:"d/m/Y" }}
                                                    {% if parcela.forma_pagamento_recebimento %}
                                                        <br><small class="text-muted">{{ parcela.forma_pagamento_recebimento.nome }}</small>
                                                    {% endif %}
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-end">
                                                {% if parcela.status != 'paga' %}
                                                <button class="btn btn-sm btn-success" 
                                                        onclick="abrirModalRecebimento({{ parcela.pk }}, '{{ parcela.valor|floatformat:2 }}', '{{ parcela.valor_restante|floatformat:2 }}')">
                                                    <i class="bi bi-cash-coin"></i> Receber
                                                </button>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot class="table-light">
                                        <tr>
                                            <td colspan="3" class="text-end"><strong>Total do Cliente:</strong></td>
                                            <td colspan="4">
                                                <strong class="text-danger">
                                                    R$ {{ cliente_data.total_pendente|floatformat:2 }} a receber
                                                </strong>
                                                {% if cliente_data.total_pago > 0 %}
                                                    | <span class="text-success">
                                                        R$ {{ cliente_data.total_pago|floatformat:2 }} recebido
                                                    </span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-inbox" style="font-size: 4rem; color: #ccc;"></i>
                <h4 class="text-muted mt-3">Nenhuma parcela encontrada</h4>
                <p class="text-muted">
                    {% if busca or status_filtro %}
                        Tente ajustar os filtros de busca
                    {% else %}
                        Não há parcelas a receber no momento
                    {% endif %}
                </p>
            </div>
        {% endif %}
    </div>
    
    <!-- Paginação -->
    {% if clientes_com_parcelas.paginator.num_pages > 1 %}
    <div class="card-footer">
        <nav aria-label="Navegação de clientes">
            <ul class="pagination pagination-sm justify-content-center mb-0">
                {% if clientes_com_parcelas.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1&view={{ view_mode }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% endif %}">
                            <i class="bi bi-chevron-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ clientes_com_parcelas.previous_page_number }}&view={{ view_mode }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% endif %}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-double-left"></i></span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                    </li>
                {% endif %}

                {% for num in clientes_com_parcelas.paginator.page_range %}
                    {% if clientes_com_parcelas.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > clientes_com_parcelas.number|add:'-3' and num < clientes_com_parcelas.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}&view={{ view_mode }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if clientes_com_parcelas.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ clientes_com_parcelas.next_page_number }}&view={{ view_mode }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% endif %}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ clientes_com_parcelas.paginator.num_pages }}&view={{ view_mode }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% endif %}">
                            <i class="bi bi-chevron-double-right"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-double-right"></i></span>
                    </li>
                {% endif %}
            </ul>
        </nav>
        
        <div class="text-center mt-2">
            <small class="text-muted">
                Mostrando clientes {{ clientes_com_parcelas.start_index }} a {{ clientes_com_parcelas.end_index }} de {{ clientes_com_parcelas.paginator.count }}
            </small>
        </div>
    </div>
    {% endif %}
</div>

<!-- Vendas sem Cliente (se houver) -->
{% if parcelas_sem_cliente %}
<div class="card mt-4">
    <div class="card-header bg-secondary text-white">
        <i class="bi bi-question-circle"></i> Vendas sem Cliente Identificado
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Venda</th>
                        <th>Parcela</th>
                        <th>Vencimento</th>
                        <th>Valor</th>
                        <th>Status</th>
                        <th>Pagamento</th>
                        <th class="text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for parcela in parcelas_sem_cliente %}
                    <tr>
                        <td>
                            <a href="{% url 'detalhe_venda' parcela.venda.id %}">
                                {{ parcela.venda.numero_venda }}
                            </a>
                        </td>
                        <td>{{ parcela.numero_parcela }}/{{ parcela.pagamento.parcelas }}</td>
                        <td>{{ parcela.data_vencimento|date:"d/m/Y" }}</td>
                        <td>
                            <strong>R$ {{ parcela.valor_restante|floatformat:2 }}</strong>
                            {% if parcela.valor_pago > 0 %}
                            <br><small class="text-muted">Pago: R$ {{ parcela.valor_pago|floatformat:2 }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {% if parcela.status == 'paga' %}
                                <span class="badge bg-success">Paga</span>
                            {% else %}
                                <span class="badge bg-warning">Pendente</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if parcela.historico_recebimentos %}
                                <div class="small">
                                    {% for recebimento in parcela.historico_recebimentos %}
                                    <div class="border-bottom pb-1 mb-1">
                                        <div>
                                            {{ recebimento.data_recebimento|date:"d/m/Y H:i" }}
                                            <span class="badge {% if recebimento.tipo_recebimento == 'Total' %}bg-success{% else %}bg-info text-dark{% endif %}">
                                                {{ recebimento.tipo_recebimento }}
                                            </span>
                                        </div>
                                        <div class="text-muted">
                                            R$ {{ recebimento.valor|floatformat:2 }} via {{ recebimento.forma_pagamento.nome }}
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            {% if parcela.status != 'paga' %}
                            <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>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </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> Confirmar 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 %}
                    <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');

    form.action = '/parcelas/' + parcelaId + '/pagar/';
    if (!form.querySelector('input[name="next"]')) {
        const nextInput = document.createElement('input');
        nextInput.type = 'hidden';
        nextInput.name = 'next';
        form.appendChild(nextInput);
    }
    form.querySelector('input[name="next"]').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();
}

function expandirTodos() {
    // Expandir todos os accordions
    document.querySelectorAll('.accordion-collapse').forEach(collapse => {
        if (!collapse.classList.contains('show')) {
            const bsCollapse = new bootstrap.Collapse(collapse, {
                show: true
            });
        }
    });
    
    // Feedback visual
    mostrarToast('📂 Todos os clientes expandidos', 'info');
    
    // Atualizar contador após um delay para permitir a animação
    setTimeout(atualizarContador, 400);
}

function recolherTodos() {
    // Recolher todos os accordions
    document.querySelectorAll('.accordion-collapse').forEach(collapse => {
        if (collapse.classList.contains('show')) {
            const bsCollapse = new bootstrap.Collapse(collapse, {
                hide: true
            });
        }
    });
    
    // Feedback visual
    mostrarToast('📁 Todos os clientes recolhidos', 'info');
    
    // Atualizar contador após um delay para permitir a animação
    setTimeout(atualizarContador, 400);
}

function atualizarContador() {
    const expandidos = document.querySelectorAll('.accordion-collapse.show').length;
    const badgeExpandidos = document.getElementById('contador-expandidos');
    const numExpandidos = document.getElementById('num-expandidos');
    const pluralExpandidos = document.getElementById('plural-expandidos');
    
    if (expandidos > 0) {
        badgeExpandidos.style.display = 'inline';
        numExpandidos.textContent = expandidos;
        pluralExpandidos.textContent = expandidos === 1 ? '' : 's';
    } else {
        badgeExpandidos.style.display = 'none';
    }
}

function mostrarToast(mensagem, tipo = 'success') {
    // Remove toasts anteriores
    const toastsAntigos = document.querySelectorAll('.toast-feedback');
    toastsAntigos.forEach(t => t.remove());
    
    // Cores por tipo
    const cores = {
        'success': 'bg-success',
        'info': 'bg-info',
        'warning': 'bg-warning',
        'danger': 'bg-danger'
    };
    
    const toastHtml = `
        <div class="position-fixed bottom-0 end-0 p-3 toast-feedback" style="z-index: 11000">
            <div class="toast show align-items-center text-white ${cores[tipo]} border-0" role="alert">
                <div class="d-flex">
                    <div class="toast-body">
                        ${mensagem}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', toastHtml);
    
    // Auto-remover após 3 segundos
    setTimeout(() => {
        const toast = document.querySelector('.toast-feedback');
        if (toast) {
            toast.remove();
        }
    }, 3000);
}

// Não auto-expandir - deixar todos recolhidos por padrão
document.addEventListener('DOMContentLoaded', function() {
    // Garantir que todos os accordions começam fechados
    document.querySelectorAll('.accordion-collapse').forEach(collapse => {
        collapse.classList.remove('show');
    });
    
    document.querySelectorAll('.accordion-button').forEach(btn => {
        btn.classList.add('collapsed');
        btn.setAttribute('aria-expanded', 'false');
    });
    
    // Adicionar listener para atualizar contador quando clicar individualmente
    document.querySelectorAll('.accordion-button').forEach(btn => {
        btn.addEventListener('click', function() {
            setTimeout(atualizarContador, 400);
        });
    });
    
    // Atualizar contador inicial
    atualizarContador();

    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 %}