{% extends 'base.html' %}

{% block title %}PDV - Vendas{% endblock %}

{% block extra_css %}
<style>
    .pdv-hero {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        border-radius: 14px;
        padding: 1.4rem 2rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .pdv-hero i { font-size: 2.4rem; }
    .pdv-hero h1 { font-size: 1.5rem; margin: 0; font-weight: 700; }
    .pdv-hero .hero-sub { font-size: .85rem; opacity: .85; }
    /* Carrinho */
    .carrinho-card { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 14px rgba(29,58,95,.10); }
    .carrinho-card > .card-header {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        display: flex; align-items: center; justify-content: space-between;
        padding: .8rem 1.1rem;
    }
    .carrinho-card .badge-contagem {
        background: rgba(255,255,255,.18);
        color: #fff;
        border-radius: 999px;
        padding: .3rem .7rem;
        font-size: .78rem;
    }
    .carrinho-card .table td { padding: .5rem .55rem; vertical-align: middle; }
    .carrinho-vazio { color: #9db0c3; }
    .pdv-card { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(29,58,95,.08); }
    .pdv-card-header {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .8rem 1.1rem;
    }
    .pdv-card-header .badge-contagem {
        background: rgba(255,255,255,.18);
        color: #fff;
        border-radius: 999px;
        padding: .3rem .7rem;
        font-size: .78rem;
    }
    /* Totais */
    .totais-pdv {
        background: #f4f7fb;
        border: 1px solid #e2e9f2;
        border-radius: 12px;
        padding: .75rem 1rem;
        margin: .35rem 0 .9rem;
    }
    .totais-pdv .linha-total {
        display: flex; justify-content: space-between; align-items: center;
        padding: .15rem 0;
        font-size: .95rem; color: #51607a;
    }
    .totais-pdv .linha-total strong { color: #34475a; }
    .totais-pdv .linha-final {
        border-top: 1px dashed #c8d4e2;
        margin-top: .4rem; padding-top: .5rem;
        font-size: 1.25rem; font-weight: 800;
        color: #0b5ed7;
    }
</style>
{% endblock %}

{% block content %}
<div class="pdv-hero mb-4">
    <i class="bi bi-cart-check"></i>
    <div>
        <h1>PDV — Ponto de Venda</h1>
        <div class="hero-sub">Selecione o cliente, lance os itens e finalize a venda</div>
    </div>
</div>

<!-- Seleção de Cliente -->
<div class="card mb-4 pdv-card">
    <div class="card-header pdv-card-header">
        <h5 class="mb-0"><i class="bi bi-person-circle"></i> Cliente da Venda</h5>
    </div>
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-12">
                {% if cliente_selecionado %}
                <div class="alert alert-success mb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1"><i class="bi bi-check-circle"></i> {{ cliente_selecionado.nome }}</h5>
                            <p class="mb-0">
                                <small>
                                    {% if cliente_selecionado.telefone %}Tel: {{ cliente_selecionado.telefone }}{% endif %}
                                    {% if cliente_selecionado.cpf %} | CPF: {{ cliente_selecionado.cpf }}{% endif %}
                                </small>
                            </p>
                        </div>
                        <a href="?limpar_cliente=1" class="btn btn-sm btn-danger">
                            <i class="bi bi-x-circle"></i> Remover
                        </a>
                    </div>
                </div>
                {% else %}
                <div class="position-relative mb-2">
                    <div class="input-group input-group-lg">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" id="busca-cliente" placeholder="Digite o nome ou CPF do cliente para buscar..." autocomplete="off">
                        <button class="btn btn-primary" type="button" onclick="abrirModalClientes()" title="Ver todos os clientes cadastrados">
                            <i class="bi bi-list"></i> Buscar
                        </button>
                        <a href="{% url 'cadastrar_cliente' %}?origem=pdv" class="btn btn-success">
                            <i class="bi bi-plus-circle"></i> Novo Cliente
                        </a>
                    </div>
                    <!-- Sugestões de clientes (autocomplete) -->
                    <div id="autocomplete-clientes" class="list-group position-absolute shadow" style="top: 100%; left: 0; right: 0; z-index: 1050; display: none; max-height: 320px; overflow-y: auto;"></div>
                </div>
                <small class="text-muted">Cliente é opcional - começe a digitar para ver sugestões, clique em "Buscar" para ver todos os clientes cadastrados</small>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação de Venda -->
<div class="modal fade" id="modalConfirmarVenda" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="bi bi-bag-check-fill me-2"></i> Confirmar Finalização da Venda
                </h5>
            </div>
            <div class="modal-body py-4">
                <div id="confirmar-venda-detalhes"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i> Cancelar
                </button>
                <button type="button" class="btn btn-success btn-lg" id="btn-confirmar-venda-ok">
                    <i class="bi bi-check-circle-fill me-1"></i> Confirmar Venda
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Pergunta sobre vencimentos das próximas parcelas -->
<div class="modal fade" id="modalPerguntaVencimentos" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="bi bi-calendar-week me-2"></i> Vencimentos das Parcelas</h5>
            </div>
            <div class="modal-body py-4 text-center">
                <i class="bi bi-question-circle text-info" style="font-size:2.5rem;"></i>
                <p class="mt-3 mb-1">Você alterou o vencimento da 1ª parcela. Como deseja gerar os vencimentos das demais parcelas?</p>
                <p class="text-muted small mb-0">Vencimento da 1ª parcela: <strong id="pergunta-data-primeira"></strong></p>
            </div>
            <div class="modal-footer flex-column gap-2">
                <button type="button" class="btn btn-success w-100" id="btn-vencimentos-automaticos">
                    <i class="bi bi-magic me-1"></i> Gerar automaticamente a partir da 1ª parcela (+30 dias)
                </button>
                <button type="button" class="btn btn-primary w-100" id="btn-vencimentos-manuais">
                    <i class="bi bi-calendar-date me-1"></i> Quero escolher o dia de cada parcela
                </button>
                <button type="button" class="btn btn-warning w-100" id="btn-vencimentos-voltar" data-bs-dismiss="modal">
                    <i class="bi bi-arrow-left me-1"></i> Voltar para a venda
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Escolher data de cada parcela -->
<div class="modal fade" id="modalDatasParcelas" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-calendar-check me-2"></i> Vencimentos das Parcelas</h5>
            </div>
            <div class="modal-body">
                <p class="small text-muted">A 1ª parcela já está definida. Ajuste o dia/mês de cada parcela abaixo. Ao terminar, confira o resumo antes de salvar.</p>
                <div id="lista-inputs-parcelas"></div>
                <div class="mt-4">
                    <h6 class="fw-bold mb-2"><i class="bi bi-clipboard-check me-1"></i> Como ficou:</h6>
                    <div class="table-responsive border rounded">
                        <table class="table table-sm table-hover mb-0" id="tabela-previews-parcelas">
                            <thead class="table-light">
                                <tr><th>Parcela</th><th>Valor</th><th>Vencimento</th></tr>
                            </thead>
                            <tbody id="previews-parcelas-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="btn-voltar-pergunta">
                    <i class="bi bi-arrow-left me-1"></i> Voltar
                </button>
                <button type="button" class="btn btn-success" id="btn-salvar-datas-parcelas">
                    <i class="bi bi-check-circle me-1"></i> Salvar Datas
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Limite de Crediário Insuficiente -->
<div class="modal fade" id="modalLimiteInsuficiente" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i> Limite de Crediário Insuficiente
                </h5>
            </div>
            <div class="modal-body py-4">
                <div class="text-center mb-3">
                    <i class="bi bi-wallet2 text-danger" style="font-size:2.5rem;"></i>
                </div>
                <table class="table table-borderless mb-0">
                    <tbody>
                        <tr><td class="text-muted fw-semibold">Limite total</td><td class="fw-bold" id="limite-total-valor"></td></tr>
                        <tr><td class="text-muted fw-semibold">Saldo devedor atual</td><td class="fw-bold" id="limite-saldo-devedor-valor"></td></tr>
                        <tr><td class="text-muted fw-semibold">Valor total da compra</td><td class="fw-bold" id="limite-valor-compra"></td></tr>
                        <tr>
                            <td class="text-muted fw-semibold"><i class="bi bi-person-fill me-1"></i> Limite disponível</td>
                            <td class="fw-bold text-success" id="limite-disponivel-valor"></td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold"><i class="bi bi-cart-dash-fill me-1"></i> Valor devido</td>
                            <td class="fw-bold text-danger" id="limite-financiado-valor"></td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold"><i class="bi bi-arrow-down-circle me-1"></i> Falta de limite</td>
                            <td class="fw-bold text-warning" id="limite-diferenca-valor"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="alert alert-warning mt-3 mb-0">
                    <i class="bi bi-info-circle-fill me-1"></i>
                    Para concluir esta compra no crediário, reduza o valor devido <strong>ou aumente o limite do cliente aqui mesmo</strong>.
                </div>
                {% if cliente_selecionado %}{% if user.is_superuser or perms.core.change_cliente %}<button type="button" class="btn btn-primary" onclick="abrirModalEditarLimite()"><i class="bi bi-pencil"></i> Editar limite do cliente (aqui mesmo)</button>{% endif %}{% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i> Entendido
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Editar Limite do Cliente (rápido, sem sair do PDV) -->
<div class="modal fade" id="modalEditarLimite" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 1rem; overflow: hidden;">
            <div class="modal-body p-0">
                <div class="text-center pt-4 pb-3 px-3" style="background: linear-gradient(135deg, #4a90e2 0%, #2f639d 100%);">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm mb-2" style="width:54px; height:54px;">
                        <i class="bi bi-coin" style="font-size:1.6rem; color:#2f639d;"></i>
                    </div>
                    <h5 class="fw-bold text-white mb-1">Aumentar Limite</h5>
                    <div class="small text-white fw-semibold" style="opacity:.9;">{{ cliente_selecionado.nome|default:'Cliente' }}</div>
                </div>
                <div class="px-3 pt-3" style="background:#f2f7ff;">
                    <div class="alert bg-white shadow-sm border-0 p-3" style="border-radius:.75rem;">
                        <div class="d-flex justify-content-between small mb-1">
                            <span class="text-muted">Limite atual:</span>
                            <strong id="limite-atual-modal">{{ limite_modal_atual|default:'—' }}</strong>
                        </div>
                        <label class="form-label mt-2 mb-1 fw-semibold small">Novo limite (R$)</label>
                        <input type="number" class="form-control form-control-lg text-center fw-bold" id="novo-limite-input" step="0.01" min="0" placeholder="0,00">
                        <div class="text-danger small mt-2 d-none" id="erro-limite-modal"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0 px-3 pb-3 justify-content-center gap-2" style="background:#f2f7ff">
                <button type="button" class="btn btn-outline-secondary flex-fill" style="max-width:130px;" data-bs-dismiss="modal">Voltar</button>
                <button type="button" class="btn btn-success flex-fill" style="max-width:150px;" onclick="salvarNovoLimite()">
                    <i class="bi bi-check-lg"></i> Salvar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Seleção de Clientes -->
<div class="modal fade" id="modalClientes" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-people"></i> Selecionar Cliente</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control form-control-lg" id="busca-modal-cliente" 
                           placeholder="Digite o nome ou CPF do cliente..." autocomplete="off">
                </div>
                
                <div id="loading-clientes" class="text-center py-4" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                    <p class="mt-2">Buscando clientes...</p>
                </div>
                
                <div id="lista-clientes" class="list-group">
                    <div class="text-center text-muted py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                        <p class="mt-2">Carregando todos os clientes...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x"></i> Cancelar
                </button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Lista de Produtos -->
    <div class="col-md-7">
        <div class="card mb-3 pdv-card">
            <div class="card-header pdv-card-header">
                <h5 class="mb-0">
                    <i class="bi bi-bag-check"></i>
                    {% if cliente_selecionado %}
                        Produtos para {{ cliente_selecionado.nome }}
                    {% else %}
                        Buscar Produto
                    {% endif %}
                </h5>
                <span class="badge-contagem"><i class="bi bi-boxes"></i> {{ produtos.count }} produto{{ produtos.count|pluralize }}</span>
            </div>
            <div class="card-body">
                {% if cliente_selecionado %}
                <div class="alert alert-success mb-3">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-check-circle-fill me-2" style="font-size: 1.5rem;"></i>
                        <div>
                            <strong>Cliente Selecionado!</strong><br>
                            <small>Agora adicione os produtos que {{ cliente_selecionado.nome }} deseja comprar</small>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <form method="get" class="mb-2">
                    {% if cliente_id %}
                    <input type="hidden" name="cliente_id" value="{{ cliente_id|stringformat:'s' }}">
                    {% endif %}
                    {% if categoria_selecionada %}
                    <input type="hidden" name="categoria" value="{{ categoria_selecionada }}">
                    {% endif %}
                    <div class="input-group input-group-lg">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" name="busca" 
                               placeholder="Digite o código, nome, marca ou cor do produto..." 
                               value="{{ busca }}" 
                               {% if cliente_selecionado %}autofocus{% endif %}>
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-search"></i> Buscar
                        </button>
                        {% if busca %}
                        <a href="{% url 'pdv' %}{% if cliente_id %}?cliente_id={{ cliente_id }}{% endif %}" class="btn btn-secondary">
                            <i class="bi bi-x"></i> Limpar
                        </a>
                        {% endif %}
                    </div>
                    {% if not pesquisar %}
                    <small class="text-muted d-block mt-2">
                        <i class="bi bi-info-circle"></i> 
                        Pressione <strong>Enter</strong> para listar todos os produtos, ou escolha uma categoria abaixo.
                    </small>
                    {% endif %}
                </form>

                <!-- Filtro por categoria -->
                {% if categorias %}
                <style>
                    .pdv-categorias {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 0.5rem;
                        margin-bottom: 1rem;
                    }
                    .pdv-categorias .cat-pill {
                        border-radius: 999px;
                        font-weight: 600;
                        font-size: 0.84rem;
                        padding: 0.42rem 0.95rem;
                        border: 1.5px solid transparent;
                        text-decoration: none;
                        transition: all 0.15s;
                    }
                    .pdv-categorias .cat-pill:hover { filter: brightness(0.93); }
                    .pdv-categorias .cat-active {
                        color: #fff !important;
                        box-shadow: 0 3px 10px rgba(0,0,0,0.18);
                    }
                    .cat-0 { background: #e3f2fd; color: #1565c0; border-color: #b8d6f5; }
                    .cat-1 { background: #e8f5e9; color: #2e7d32; border-color: #bfe0c1; }
                    .cat-2 { background: #fff3e0; color: #e65100; border-color: #f5ce9c; }
                    .cat-3 { background: #f3e5f5; color: #7b1fa2; border-color: #d9c3dd; }
                    .cat-4 { background: #e0f7fa; color: #00838f; border-color: #b6e4ea; }
                    .cat-5 { background: #fce4ec; color: #c2185b; border-color: #f1b6cd; }
                    .cat-6 { background: #f1f8e9; color: #558b2f; border-color: #cfe3ad; }
                    .cat-7 { background: #fff8e1; color: #b26a00; border-color: #f0dda4; }
                    .cat-8 { background: #ede7f6; color: #5e35b1; border-color: #cec2e8; }
                    .cat-9 { background: #e6f4f1; color: #00695c; border-color: #b0dbd3; }
                    .cat-count {
                        display: inline-flex; align-items: center; justify-content: center;
                        min-width: 1.35rem; height: 1.35rem; margin-left: .15rem;
                        border-radius: 999px; font-size: .68rem; font-weight: 700;
                        background: rgba(0,0,0,.10); padding: 0 .25rem;
                    }
                    .cat-count.cat-zero { background: #b02a37; color: #fff; }
                    .pdv-categorias .cat-pill.cat-active .cat-count { background: rgba(255,255,255,.25); }

                    /* Cards de produto do PDV */
                    .produto-grid { row-gap: .9rem; }
                    .produto-card { border-radius: 14px; overflow: hidden; }
                    .produto-card.sem-estoque-card {
                        border: 1px solid #f1d0d3; background: #fbf7f7;
                    }
                    .produto-card.sem-estoque-card .card-title,
                    .produto-card.sem-estoque-card .preco {
                        color: #8f97a1;
                    }
                    .produto-card .estoque-chip {
                        font-size: .72rem; font-weight: 700; border-radius: 999px;
                        padding: .2rem .6rem; white-space: nowrap;
                    }
                    .produto-card .estoque-ok   { background: #e6f9f0; color: #1e7e34; }
                    .produto-card .estoque-baixo{ background: #fff8e6; color: #b26a00; }
                    .produto-card .estoque-zero { background: #fdecee; color: #b02a37; }
                    .produto-card .sku-chip {
                        font-size: .68rem; font-weight: 600; letter-spacing: .02em;
                        background: #eef2f7; color: #526174; border-radius: 6px; padding: .18rem .45rem;
                    }
                    .produto-card .card-title { font-size: 1rem; font-weight: 700; margin-bottom: .1rem; }
                    .produto-card .preco { font-size: 1.25rem; font-weight: 800; }
                    .produto-card .btn-adicionar { border-radius: 999px; padding: .38rem .85rem; font-weight: 600; }
                    .produto-card .btn-adicionar[disabled] { opacity: .55; }
                    #grupo-parcelas.dentro-cartao { border-top: 1px dashed #b9d3f5; margin-top: 1rem; padding-top: .85rem; }
                    #grupo-parcelas.dentro-cartao .form-label { color: #164a7b; }
                </style>
                <div class="pdv-categorias">
                    <a href="?{% if cliente_id %}cliente_id={{ cliente_id }}&{% endif %}{% if busca %}busca={{ busca|urlencode }}&{% endif %}"
                       class="cat-pill cat-todas {% if not categoria_selecionada %}cat-active{% endif %}" {% if not categoria_selecionada %}style="background:#1565c0;"{% endif %}>
                        <i class="bi bi-grid"></i> Todas
                    </a>
                    {% for c in categorias %}
                    <a href="?{% if cliente_id %}cliente_id={{ cliente_id }}&{% endif %}{% if busca %}busca={{ busca|urlencode }}&{% endif %}categoria={{ c.id }}"
                       class="cat-pill {% cycle 'cat-0' 'cat-1' 'cat-2' 'cat-3' 'cat-4' 'cat-5' 'cat-6' 'cat-7' 'cat-8' 'cat-9' %} {% if categoria_selecionada == c.id %}cat-active{% endif %}"
                       {% if categoria_selecionada == c.id %}style="background:#1565c0;"{% endif %}
                       title="{{ c.qtd_disponivel }} com estoque{{ c.qtd_zero|pluralize:',. e ' }}{{ c.qtd_zero }} sem estoque">
                        <i class="bi bi-tag"></i> {{ c.nome }}
                        {% if c.qtd_disponivel or c.qtd_zero %}
                        <span class="cat-count {% if c.qtd_disponivel == 0 %}cat-zero{% endif %}">{{ c.qtd_disponivel }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
                {% endif %}
                
<!-- Modal: Venda no cartão sem cliente -->
<div class="modal fade" id="modalSemCliente" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 1rem; overflow: hidden;">
            <div class="modal-body p-0">
                <div class="text-center pt-4 pb-3 px-3" style="background: linear-gradient(135deg, #ffb340 0%, #ff9800 100%);">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm mb-3" style="width:64px; height:64px;">
                        <i class="bi bi-person-exclamation" style="font-size:1.8rem; color:#ef6c00;"></i>
                    </div>
                    <h5 class="fw-bold text-white mb-1">Venda sem cliente</h5>
                    <div class="small text-white fw-semibold" style="opacity:.9;">Confirmação necessária</div>
                </div>
                <div class="px-3 pt-3" style="background:#fff8e6;">
                    <div class="alert bg-white shadow-sm border-0 p-3 mb-3" style="border-radius:.75rem;">
                        <p class="mb-2"><i class="bi bi-credit-card-2-front text-primary me-2"></i>A venda no <strong>CRÉDITO</strong> está sendo realizada <strong>SEM cliente informado</strong>.</p>
                        <p class="small text-muted mb-0"><i class="bi bi-info-circle me-1"></i>A venda será registrada como <span class="badge bg-secondary-subtle text-secondary-emphasis">Cliente Anônimo</span> e aparecerá assim no relatório.</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0 px-3 pb-3 justify-content-center gap-2" style="background:#fff8e6">
                <button type="button" class="btn btn-outline-secondary flex-fill" style="max-width:160px;" data-bs-dismiss="modal" id="btn-sem-cliente-voltar">
                    <i class="bi bi-arrow-left"></i> Voltar
                </button>
                <button type="button" class="btn btn-success flex-fill" style="max-width:160px;" onclick="continuarVendaSemCliente()" id="btn-sem-cliente-continuar">
                    <i class="bi bi-check-lg"></i> Continuar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: avisos do PDV (substitui alert nativo) -->
<div class="modal fade" id="modalAviso" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 1rem; overflow: hidden;">
            <div class="modal-body p-0">
                <div class="text-center pt-4 pb-3 px-3" id="aviso-topo" style="background: linear-gradient(135deg, #ffb340 0%, #ff9800 100%););">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm mb-3" style="width:58px; height:58px;">
                        <i class="bi bi-exclamation-circle" id="aviso-icone" style="font-size:1.7rem; color:#ef6c00;"></i>
                    </div>
                    <h5 class="fw-bold text-white mb-1" id="aviso-titulo">Atenção</h5>
                </div>
                <div class="px-3 pt-3" style="background:#fff8e6;">
                    <div class="alert bg-white shadow-sm border-0 p-3 mb-3" style="border-radius:.75rem;">
                        <p class="mb-0 text-center" id="aviso-mensagem" style="font-size:.95rem;">Mensagem.</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0 px-3 pb-3 justify-content-center" style="background:#fff8e6">
                <button type="button" class="btn btn-success px-4" style="min-width:140px; border-radius: 999px;" id="btn-aviso-ok">
                    <i class="bi bi-hand-thumbs-up"></i> Entendi
                </button>
            </div>
        </div>
    </div>
</div>

<div class="row">
                    {% for produto in produtos %}
                    <div class="col-md-6 mb-3 produto-grid-item">
                        <div class="card h-100 produto-card {% if produto.estoque_disponivel <= 0 %}sem-estoque-card{% endif %}" style="cursor: pointer; transition: all 0.2s;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2 gap-2">
                                    <span class="sku-chip">{{ produto.codigo }}</span>
                                    {% if produto.estoque_disponivel <= 0 %}
                                    <span class="estoque-chip estoque-zero"><i class="bi bi-slash-circle"></i> Sem estoque</span>
                                    {% elif produto.estoque_disponivel <= 3 %}
                                    <span class="estoque-chip estoque-baixo"><i class="bi bi-exclamation-triangle"></i> Último: {{ produto.estoque_disponivel }}</span>
                                    {% else %}
                                    <span class="estoque-chip estoque-ok"><i class="bi bi-check2"></i> {{ produto.estoque_disponivel }} disponí­veis</span>
                                    {% endif %}
                                </div>
                                <h5 class="card-title">{{ produto.nome }}</h5>
                                <div class="text-muted" style="font-size:.78rem;">
                                    {% if produto.marca %}<i class="bi bi-tag"></i> {{ produto.marca }}{% endif %}
                                    {% if produto.tamanho %} · Tam: {{ produto.tamanho }}{% endif %}
                                    {% if produto.cor %} · {{ produto.cor }}{% endif %}
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <span class="preco text-success">
                                        <i class="bi bi-currency-dollar"></i>{{ produto.preco_venda }}
                                    </span>
                                    <form method="post" action="{% url 'adicionar_item_venda' %}" class="d-inline">
                                        {% csrf_token %}
                                        <input type="hidden" name="produto_id" value="{{ produto.id|stringformat:'s' }}">
                                        <input type="hidden" name="quantidade" value="1">
                                        <input type="hidden" name="busca" value="{{ busca }}">
                                        {% if categoria_selecionada %}
                                        <input type="hidden" name="categoria" value="{{ categoria_selecionada }}">
                                        {% endif %}
                                        {% if cliente_id %}
                                        <input type="hidden" name="cliente_id" value="{{ cliente_id|stringformat:'s' }}">
                                        {% endif %}
                                        <button type="submit" class="btn btn-success btn-sm btn-adicionar" {% if produto.estoque_disponivel <= 0 %}disabled title="Sem estoque disponível"{% endif %}>
                                            <i class="bi bi-cart-plus"></i> Adicionar
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12">
                        {% if busca %}
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle"></i> 
                            Nenhum produto encontrado com "{{ busca }}". Tente outro termo.
                        </div>
                        {% else %}
                        <div class="alert alert-info text-center">
                            <i class="bi bi-box2" style="font-size: 3rem;"></i>
                            <p class="mt-3 mb-0"><strong>Nenhum produto nesta categoria</strong></p>
                            <small class="text-muted">Selecione outra categoria ou pressione Enter para ver todos</small>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                
                {% if produtos.count > 0 %}
                <div class="text-center mt-3">
                    <small class="text-muted">
                        <i class="bi bi-info-circle"></i> 
                        Mostrando {{ produtos.count }} produto{{ produtos.count|pluralize }}
                    </small>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Carrinho -->
    <div class="col-md-5">
        <div class="card carrinho-card sticky-top" style="top: 20px;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-cart"></i> Carrinho</h5>
                {% if venda %}
                <span class="badge-contagem"><i class="bi bi-box"></i> {{ itens_venda|length }} item{{ itens_venda|length|pluralize }}</span>
                {% endif %}
            </div>
            <div class="card-body">
                {% if venda %}
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table">
                            <tbody>
                                {% for item in itens_venda %}
                                <tr>
                                    <td>
                                        <strong>{{ item.produto.nome }}</strong><br>
                                        <small>{{ item.quantidade }}x R$ {{ item.preco_unitario }}</small>
                                        {% if item.item_condicional %}<br><small class="text-primary"><i class="bi bi-bag-heart"></i> Condicional {{ item.item_condicional.condicional.numero }}</small>{% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong>R$ {{ item.subtotal }}</strong><br>
                                        <a href="{% url 'remover_item_venda' item.id %}?busca={{ busca|urlencode }}{% if cliente_id %}&cliente_id={{ cliente_id }}{% endif %}" class="btn btn-sm btn-danger">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <hr>
                    
                    <div class="totais-pdv">
                        <div class="linha-total">
                            <span><i class="bi bi-plus-circle me-1"></i> Subtotal</span>
                            <strong id="subtotal-valor">R$ {{ venda.subtotal }}</strong>
                        </div>
                        <div class="linha-total">
                            <span><i class="bi bi-dash-circle me-1"></i> Desconto</span>
                            <strong class="text-danger" id="desconto-valor">R$ {{ venda.desconto }}</strong>
                        </div>
                        <div class="linha-total linha-final">
                            <span><i class="bi bi-cash-stack me-1"></i> Total</span>
                            <span id="total-valor">R$ {{ venda.total }}</span>
                        </div>
                    </div>
                    
                    <form method="post" action="{% url 'finalizar_venda' %}" id="form-finalizar-venda" onsubmit="return validarVenda()">
                        {% csrf_token %}
                        
                        {% if cliente_selecionado %}
                        <input type="hidden" name="cliente_id" value="{{ cliente_selecionado.id|stringformat:'s' }}" id="cliente_id_hidden">
                        <div class="alert alert-info mb-3">
                            <i class="bi bi-person-check"></i> Venda para: <strong>{{ cliente_selecionado.nome }}</strong>
                        </div>
                        {% if resumo_limite_crediario %}
                        <div class="alert alert-warning mb-3" id="alerta-limite-crediario">
                            <i class="bi bi-shield-exclamation"></i>
                            <strong>Limite de crediário ativo</strong><br>
                            <span id="alerta-limite-texto">
                            Limite: <strong>R$ {{ resumo_limite_crediario.limite_total|floatformat:2 }}</strong> |
                            Saldo devedor atual: <strong>R$ {{ resumo_limite_crediario.valor_em_aberto|floatformat:2 }}</strong> |
                            Disponível: <strong>R$ {{ resumo_limite_crediario.limite_disponivel|floatformat:2 }}</strong>
                            </span>
                            <br><a href="javascript:void(0)" onclick="abrirModalEditarLimite()" class="text-white fw-bold"><i class="bi bi-pencil"></i> Editar limite do cliente aqui mesmo</a>
                        </div>
                        {% endif %}
                        {% else %}
                        <div class="alert alert-warning mb-3" id="alerta-sem-cliente">
                            <i class="bi bi-exclamation-triangle"></i> 
                            <strong>Atenção:</strong> Cliente não selecionado
                            <br><small>Obrigatório para crediário e vendas parceladas</small>
                        </div>
                        {% endif %}
                        
                        <div class="mb-3">
                            <label class="form-label">Desconto (R$)</label>
                            <input
                                type="number"
                                name="desconto"
                                id="desconto-input"
                                class="form-control"
                                step="0.01"
                                min="0"
                                value="0.00"
                                data-subtotal="{{ venda.subtotal }}"
                            >
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">
                                Forma de Pagamento *
                                <span class="badge bg-primary-subtle text-primary-emphasis ms-1"><i class="bi bi-1-circle"></i> Etapa 1</span>
                                <span class="badge bg-danger ms-1" id="badge-requer-cliente" style="display: none;">
                                    Requer Cliente
                                </span>
                            </label>
                            <select name="forma_pagamento_id" id="forma-pagamento-select" class="form-select" required onchange="verificarFormaPagamento(); verificarParcelas();">
                                {% for forma in formas_pagamento %}
                                <option value="{{ forma.id|stringformat:'s' }}" data-tipo="{{ forma.tipo }}" data-nome="{{ forma.nome }}" data-parcelas-max="{{ forma.parcelas_max }}">
                                    {{ forma.nome }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="mb-3" id="grupo-parcelas" style="display: none;">
                            <label class="form-label">
                                Parcelas
                                <span class="badge bg-primary-subtle text-primary-emphasis ms-1">
                                   <i class="bi bi-3-circle"></i>
                                </span>
                                <span class="badge bg-danger ms-1" id="badge-parcela-requer-cliente" style="display: none;">
                                    Requer Cliente
                                </span>
                            </label>
                            <select name="parcelas" id="parcelas-input" class="form-select" onchange="verificarParcelas()">
                                <option value="1" selected>1x (à vista)</option>
                            </select>
                            <small class="text-muted d-none d-block mt-1" id="parcelas-config-ajuda"></small>
                            <small class="text-muted" id="parcelas-ajuda">Opções criadas conforme o cadastro em Taxas Cartão.</small>
                        </div>

                        <div class="card mb-3 border-primary shadow-sm" id="grupo-bandeira-cartao" style="display: none;">
                            <div class="card-header bg-primary-subtle">
                                <strong><i class="bi bi-credit-card-2-front"></i> Cartão
                                    <span class="badge bg-primary-subtle text-primary-emphasis ms-1">Etapa 2 — escolha a bandeira</span>
                                </strong>
                            </div>
                            <div class="card-body">
                                <label class="form-label">Bandeira do cartão *</label>
                                <select name="bandeira_cartao" id="bandeira-cartao-select" class="form-select" onchange="verificarTaxaCartao(); verificarParcelas();">
                                    <option value="">Selecione...</option>
                                    {% for valor, nome in bandeiras_cartao %}
                                    <option value="{{ valor }}">{{ nome }}</option>
                                    {% endfor %}
                                </select>
                                <small class="d-block mt-1" id="taxa-cartao-ajuda"></small>
                            </div>
                        </div>

                        <div class="card mb-3 border-warning shadow-sm" id="card-entrada-dinheiro" style="display: none;">
                            <div class="card-header bg-warning-subtle">
                                <strong><i class="bi bi-cash-coin"></i> Entrada em Dinheiro</strong>
                            </div>
                            <div class="card-body">
                                <div class="form-check form-switch form-check-lg mb-3">
                                    <input class="form-check-input" type="checkbox" id="usar-entrada-dinheiro" name="usar_entrada_dinheiro" style="transform: scale(1.25); margin-right: 0.5rem;" onchange="atualizarEntradaDinheiroUI(); atualizarResumoPagamentoDividido();">
                                    <label class="form-check-label fw-semibold" for="usar-entrada-dinheiro">
                                        Informar entrada em dinheiro nesta venda
                                    </label>
                                </div>
                                <div id="grupo-entrada-dinheiro" style="display: none;">
                                    <label class="form-label">Valor da entrada (R$)</label>
                                    <input type="number" name="entrada_dinheiro" id="entrada-dinheiro-input" class="form-control" step="0.01" min="0" value="0.00" oninput="atualizarEntradaDinheiroUI(); atualizarResumoPagamentoDividido(); validarEntradaAoDigitar();">
                                    <div id="erro-entrada-dinheiro" class="text-danger small mt-1 d-none">
                                        <i class="bi bi-exclamation-circle"></i> A entrada <strong>não pode ser maior</strong> que o total da venda.
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        Este valor será registrado no caixa do dia como recebimento em dinheiro.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-3 border-info shadow-sm" id="grupo-primeira-parcela" style="display: none;">
                            <div class="card-header bg-info-subtle">
                                <strong><i class="bi bi-calendar-check"></i> Vencimento do Crediário</strong>
                            </div>
                            <div class="card-body">
                            <div class="form-check form-switch form-check-lg mb-2">
                                <input class="form-check-input" type="checkbox" id="alterar-primeira-parcela" name="alterar_primeira_data_vencimento" style="transform: scale(1.25); margin-right: 0.5rem;" onchange="atualizarEntradaDinheiroUI()">
                                <label class="form-check-label fw-semibold" for="alterar-primeira-parcela">
                                    Deseja alterar o vencimento da 1a parcela?
                                </label>
                            </div>
                            <small class="text-muted d-block mb-3">
                                Se não marcar, o sistema define automaticamente o primeiro vencimento para 30 dias.
                            </small>
                            <div id="grupo-data-primeira-parcela" style="display: none;">
                                <label class="form-label">Vencimento da 1ª parcela (crediário)</label>
                                <input type="date" name="primeira_data_vencimento" id="primeira-data-vencimento" class="form-control">
                                <small class="text-muted">As demais parcelas serão geradas automaticamente com +30 dias, ou escolha o dia de cada uma.</small>
                                <input type="hidden" name="datas_parcelas_crediario" id="datas-parcelas-crediario" value="">
                            </div>
                            </div>
                        </div>

                        <div class="alert alert-primary mb-3 border border-primary-subtle" id="resumo-pagamento-dividido" style="display: none;">
                            <strong><i class="bi bi-receipt-cutoff"></i> Resumo do recebimento</strong><br>
                            Entrada em dinheiro: <span id="resumo-entrada">R$ 0,00</span><br>
                            Restante na forma selecionada: <span id="resumo-restante">R$ 0,00</span>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="bi bi-check-circle"></i> Finalizar Venda
                            </button>
                            <a href="{% url 'cancelar_venda' %}" class="btn btn-danger" onclick="sessionStorage.removeItem('pdv_estado_pagamento'); sessionStorage.removeItem('pdv_finalizou');">
                                <i class="bi bi-x-circle"></i> Cancelar
                            </a>
                        </div>
                    </form>
                {% else %}
                    <div class="text-center py-5 carrinho-vazio">
                        <i class="bi bi-cart-x" style="font-size: 3.6rem;"></i>
                        <p class="fw-bold mt-3 mb-1" style="color: #51607a;">Carrinho vazio</p>
                        <small>Adicione produtos para iniciar uma venda</small>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
let timeoutBusca = null;
let modalClientes = null;

 function abrirAvisoPDV(mensagem, titulo = 'Atenção', cor = '#ffb340', alvoFoco = null) {
    const el = document.getElementById('modalAviso');
    if (!el) { alert(mensagem); return; }
    document.getElementById('aviso-topo').style.background = `linear-gradient(135deg, ${cor} 0%, ${cor}dd 100%)`;
    document.getElementById('aviso-titulo').textContent = titulo;
    document.getElementById('aviso-mensagem').textContent = mensagem;
    window._aviso_foco = alvoFoco;
    bootstrap.Modal.getOrCreateInstance(el).show();
}

// Verificar se tem cliente selecionado
const temCliente = {% if cliente_selecionado %}true{% else %}false{% endif %};
const nomeCliente = {% if cliente_selecionado %}'{{ cliente_selecionado.nome|escapejs }}'{% else %}''{% endif %};
const limiteCrediarioAtivo = {% if resumo_limite_crediario %}true{% else %}false{% endif %};
const limiteCrediarioDisponivel = {% if resumo_limite_crediario %}parseDecimal('{{ resumo_limite_crediario.limite_disponivel }}'){% else %}null{% endif %};
const limiteCrediarioTotal = {% if resumo_limite_crediario %}parseDecimal('{{ resumo_limite_crediario.limite_total }}'){% else %}0{% endif %};
const saldoDevedorCrediario = {% if resumo_limite_crediario %}parseDecimal('{{ resumo_limite_crediario.valor_em_aberto }}'){% else %}0{% endif %};
const taxasCartao = {
    {% for taxa in taxas_maquininha %}
    "{{ taxa.tipo }}|{{ taxa.bandeira }}|{{ taxa.parcelas }}": "{{ taxa.taxa_percentual|floatformat:2 }}"{% if not forloop.last %},{% endif %}
    {% endfor %}
};

// Inicializar modal ao carregar a pagina
document.addEventListener('DOMContentLoaded', function() {
    modalClientes = new bootstrap.Modal(document.getElementById('modalClientes'));

    // ─── Persistência das escolhas de pagamento (sobrevive a recarregas da
    // página: form changes, add/remove items, troca de cliente) ───
    function salvarEstadoPagamento() {
        try {
            const select = document.getElementById('forma-pagamento-select');
            if (!select) return;
            sessionStorage.setItem('pdv_estado_pagamento', JSON.stringify({
                forma: select.value,
                parcelas: document.getElementById('parcelas-input')?.value || '',
                bandeira: document.getElementById('bandeira-cartao-select')?.value || '',
                entrada_usada: document.getElementById('usar-entrada-dinheiro')?.checked || false,
                entrada_valor: document.getElementById('entrada-dinheiro-input')?.value || '',
                desconto: document.getElementById('desconto-input')?.value || '',
            }));
        } catch (e) {}
    }

    function restaurarEstadoPagamento() {
        try {
            const bruto = sessionStorage.getItem('pdv_estado_pagamento');
            if (!bruto) return;
            const st = JSON.parse(bruto);
            const select = document.getElementById('forma-pagamento-select');
            const bandeira = document.getElementById('bandeira-cartao-select');
            const parcelasSel = document.getElementById('parcelas-input');
            if (select && st.forma && [...select.options].some(o => o.value === st.forma)) {
                select.value = st.forma;
            }
            if (bandeira && st.bandeira && [...bandeira.options].some(o => o.value === st.bandeira)) {
                bandeira.value = st.bandeira;
            }
            if (parcelasSel && st.parcelas) parcelasSel.dataset.valorDesejado = st.parcelas;
            if (document.getElementById('usar-entrada-dinheiro')) {
                document.getElementById('usar-entrada-dinheiro').checked = !!st.entrada_usada;
                document.getElementById('entrada-dinheiro-input').value = st.entrada_valor || '0.00';
            }
            const desconto = document.getElementById('desconto-input');
            if (desconto && st.desconto) desconto.value = st.desconto;
        } catch (e) {}
    }

    ['forma-pagamento-select', 'bandeira-cartao-select', 'parcelas-input',
     'usar-entrada-dinheiro', 'entrada-dinheiro-input', 'desconto-input'].forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('change', salvarEstadoPagamento);
            el.addEventListener('input', salvarEstadoPagamento);
        }
    });

    // se uma venda acabou de ser finalizada, o estado de pagamento NÃO deve
    // reaparecer na próxima venda (entrada/forma/parcela voltam a zero)
    if (sessionStorage.getItem('pdv_finalizou') === '1') {
        sessionStorage.removeItem('pdv_estado_pagamento');
        sessionStorage.removeItem('pdv_finalizou');
    }

    // ordena o estado antes dos verificadores iniciais
    restaurarEstadoPagamento();

    verificarFormaPagamento();
    verificarParcelas();
    atualizarResumoComDesconto();
    atualizarEntradaDinheiroUI();
    atualizarResumoPagamentoDividido();
    configurarDataMinimaPrimeiraParcela();

    const descontoInput = document.getElementById('desconto-input');
    if (descontoInput) {
        descontoInput.addEventListener('input', atualizarResumoComDesconto);
        descontoInput.addEventListener('change', atualizarResumoComDesconto);
        descontoInput.addEventListener('input', atualizarResumoPagamentoDividido);
        descontoInput.addEventListener('change', atualizarResumoPagamentoDividido);
    }

    document.getElementById('usar-entrada-dinheiro')?.addEventListener('change', function() {
        atualizarEntradaDinheiroUI();
        atualizarResumoPagamentoDividido();
    });
    document.getElementById('entrada-dinheiro-input')?.addEventListener('input', atualizarResumoPagamentoDividido);
    document.getElementById('entrada-dinheiro-input')?.addEventListener('change', atualizarResumoPagamentoDividido);
    document.getElementById('entrada-dinheiro-input')?.addEventListener('blur', normalizarEntradaDinheiroNoBlur);
    document.getElementById('alterar-primeira-parcela')?.addEventListener('change', atualizarEntradaDinheiroUI);

    // Modal: vendas no crédito sem cliente
    document.getElementById('btn-aviso-ok')?.addEventListener('click', function () {
        bootstrap.Modal.getOrCreateInstance(document.getElementById('modalAviso')).hide();
    });
    document.getElementById('modalAviso')?.addEventListener('hidden.bs.modal', function () {
        const alvo = window._aviso_foco;
        window._aviso_foco = null;
        if (alvo) document.getElementById(alvo)?.focus();
    });
    window._timerSemCliente = null;
    document.getElementById('btn-sem-cliente-voltar')?.addEventListener('click', function () {
        clearTimeout(window._timerSemCliente);
        window._timerSemCliente = null;
        const ff = document.getElementById('form-finalizar-venda');
        if (ff) ff._skipValidation = false;
    });
    // Cancelando o resumo final também deve impedir qualquer envio pendente
    document.getElementById('modalConfirmarVenda')?.addEventListener('hidden.bs.modal', function (ev) {
        if (ev.target !== document.getElementById('modalConfirmarVenda')) return;
        clearTimeout(window._timerSemCliente);
        window._timerSemCliente = null;
        const ff = document.getElementById('form-finalizar-venda');
        if (ff) ff._skipValidation = false;
    });
    document.getElementById('modalSemCliente')?.addEventListener('hidden.bs.modal', function (ev) {
        if (ev.target !== document.getElementById('modalSemCliente')) return;
        if (window._timerSemCliente) return; // clique em Continuar: seguirá para o resumo
        const ff = document.getElementById('form-finalizar-venda');
        if (ff) ff._skipValidation = false;
    });

    // Buscar clientes quando digitar no modal
    document.getElementById('busca-modal-cliente')?.addEventListener('input', function(e) {
        clearTimeout(timeoutBusca);
        const termo = e.target.value.trim();

        if (termo.length >= 2) {
            timeoutBusca = setTimeout(() => buscarClientes(termo), 300);
        } else if (termo.length === 0) {
            buscarClientes('');
        }
    });

    // Autocomplete: sugestões enquanto digita o cliente da venda
    const inputCliente = document.getElementById('busca-cliente');
    const dropdownClientes = document.getElementById('autocomplete-clientes');
    let timeoutAutocomplete = null;

    inputCliente?.addEventListener('input', function() {
        clearTimeout(timeoutAutocomplete);
        const termo = this.value.trim();

        if (termo.length < 2) {
            dropdownClientes.style.display = 'none';
            dropdownClientes.innerHTML = '';
            return;
        }

        timeoutAutocomplete = setTimeout(() => {
            fetch(`{% url 'buscar_clientes_json' %}?busca=${encodeURIComponent(termo)}`)
                .then(response => response.json())
                .then(data => {
                    if (!data.clientes || data.clientes.length === 0) {
                        dropdownClientes.innerHTML = `
                            <div class="list-group-item text-muted">
                                <i class="bi bi-person-x"></i> Nenhum cliente encontrado com "${termo}".
                                <small class="d-block">Use "Buscar" para ver todos ou cadastre um novo cliente.</small>
                            </div>
                        `;
                        dropdownClientes.style.display = 'block';
                        return;
                    }

                    dropdownClientes.innerHTML = data.clientes.map((cliente, idx) => `
                        <button type="button" class="list-group-item list-group-item-action autocomp-item" data-idx="${idx}">
                            <div><i class="bi bi-person-fill text-primary"></i> <strong>${cliente.nome}</strong></div>
                            <small class="text-muted">${[cliente.cpf, cliente.telefone].filter(Boolean).join(' | ')}</small>
                        </button>
                    `).join('');
                    dropdownClientes.style.display = 'block';

                    dropdownClientes.querySelectorAll('.autocomp-item').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const cliente = data.clientes[parseInt(this.dataset.idx, 10)];
                            dropdownClientes.style.display = 'none';
                            selecionarCliente(cliente.id, cliente.nome);
                        });
                    });
                })
                .catch(() => { dropdownClientes.style.display = 'none'; });
        }, 250);
    });

    // Fecha o autocomplete ao clicar fora
    document.addEventListener('click', function(e) {
        if (dropdownClientes && !e.target.closest('#busca-cliente') && !e.target.closest('#autocomplete-clientes')) {
            dropdownClientes.style.display = 'none';
        }
    });

    // Buscar ao pressionar Enter no campo de busca principal
    document.getElementById('busca-cliente')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            abrirModalClientes();

            const termo = this.value.trim();
            if (termo) {
                document.getElementById('busca-modal-cliente').value = termo;
                buscarClientes(termo);
            }
        }
    });

    // Efeito hover nos cards de produtos
    document.querySelectorAll('.produto-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '';
        });
    });
});

function parseDecimal(value) {
    if (value === null || value === undefined) return 0;
    let texto = String(value).replace(/\s/g, '').replace(/[^0-9,.-]/g, '');
    const temPonto = texto.includes('.');
    const temVirgula = texto.includes(',');

    if (temPonto && temVirgula) {
        // Ex.: 1.234,56 -> 1234.56
        texto = texto.replace(/\./g, '').replace(',', '.');
    } else if (temVirgula) {
        // Ex.: 134,56 -> 134.56
        texto = texto.replace(',', '.');
    } else {
        // Ex.: 134.56 -> 134.56 (mantem ponto decimal)
        texto = texto;
    }

    const numero = parseFloat(texto);
    return Number.isFinite(numero) ? numero : 0;
}

function formatarMoeda(valor) {
    const numero = Number.isFinite(valor) ? valor : 0;
    return `R$ ${numero.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function atualizarResumoComDesconto() {
    const descontoInput = document.getElementById('desconto-input');
    const subtotalEl = document.getElementById('subtotal-valor');
    const descontoEl = document.getElementById('desconto-valor');
    const totalEl = document.getElementById('total-valor');

    if (!descontoInput || !subtotalEl || !descontoEl || !totalEl) return;

    const subtotal = parseDecimal(descontoInput.dataset.subtotal);
    let desconto = parseDecimal(descontoInput.value);

    if (desconto < 0) desconto = 0;
    if (desconto > subtotal) desconto = subtotal;

    if (parseDecimal(descontoInput.value) !== desconto) {
        descontoInput.value = desconto.toFixed(2);
    }

    const total = subtotal - desconto;
    subtotalEl.textContent = formatarMoeda(subtotal);
    descontoEl.textContent = formatarMoeda(desconto);
    totalEl.textContent = formatarMoeda(total);
}

function configurarDataMinimaPrimeiraParcela() {
    const dataInput = document.getElementById('primeira-data-vencimento');
    if (!dataInput) return;
    const hoje = new Date();
    const yyyy = hoje.getFullYear();
    const mm = String(hoje.getMonth() + 1).padStart(2, '0');
    const dd = String(hoje.getDate()).padStart(2, '0');
    const hojeISO = `${yyyy}-${mm}-${dd}`;
    dataInput.min = hojeISO;
    if (!dataInput.value) {
        dataInput.value = hojeISO;
    }
}

function atualizarEntradaDinheiroUI() {
    const select = document.getElementById('forma-pagamento-select');
    const cardEntrada = document.getElementById('card-entrada-dinheiro');
    const checkEntrada = document.getElementById('usar-entrada-dinheiro');
    const grupoEntrada = document.getElementById('grupo-entrada-dinheiro');
    const inputEntrada = document.getElementById('entrada-dinheiro-input');
    const grupoPrimeiraParcela = document.getElementById('grupo-primeira-parcela');
    const alterarPrimeiraParcela = document.getElementById('alterar-primeira-parcela');
    const grupoDataPrimeiraParcela = document.getElementById('grupo-data-primeira-parcela');
    const inputPrimeiraParcela = document.getElementById('primeira-data-vencimento');

    if (!select || !cardEntrada || !checkEntrada || !grupoEntrada || !inputEntrada || !grupoPrimeiraParcela || !alterarPrimeiraParcela || !grupoDataPrimeiraParcela || !inputPrimeiraParcela) return;

    const tipo = select.options[select.selectedIndex].getAttribute('data-tipo');
    const permitirEntrada = tipo !== 'dinheiro';

    cardEntrada.style.display = permitirEntrada ? '' : 'none';
    if (!permitirEntrada) {
        checkEntrada.checked = false;
        inputEntrada.value = '0.00';
        grupoEntrada.style.display = 'none';
    } else {
        grupoEntrada.style.display = checkEntrada.checked ? '' : 'none';
    }

    const crediario = tipo === 'crediario';
    grupoPrimeiraParcela.style.display = crediario ? '' : 'none';
    if (!crediario) {
        alterarPrimeiraParcela.checked = false;
        grupoDataPrimeiraParcela.style.display = 'none';
        inputPrimeiraParcela.value = '';
        limparDatasManuais();
    } else {
        grupoDataPrimeiraParcela.style.display = alterarPrimeiraParcela.checked ? '' : 'none';
        if (alterarPrimeiraParcela.checked) {
            configurarDataMinimaPrimeiraParcela();
        } else {
            inputPrimeiraParcela.value = '';
        }
    }
}

/* ===== Vencimentos personalizados das parcelas do crediário ===== */
let datasManuaisParcelas = {};

function contextoVencimentosCrediario() {
    const select = document.getElementById('forma-pagamento-select');
    const parcelasInput = document.getElementById('parcelas-input');
    const totalEl = document.getElementById('total-valor');
    const checkEntrada = document.getElementById('usar-entrada-dinheiro');
    const inputEntrada = document.getElementById('entrada-dinheiro-input');
    const tipo = select?.options[select.selectedIndex]?.getAttribute('data-tipo');
    const parcelas = parseInt(parcelasInput?.value || '1', 10) || 1;
    const totalVenda = parseDecimal(totalEl ? totalEl.textContent : '0');
    let entrada = 0;
    if (tipo !== 'dinheiro' && checkEntrada?.checked) entrada = parseDecimal(inputEntrada?.value || '0');
    return { tipo, parcelas, financiamento: totalVenda - Math.min(entrada, totalVenda) };
}

function formatarDataBR(iso) {
    if (!iso) return '';
    const [y, m, d] = iso.split('-');
    return `${d}/${m}/${y}`;
}

function addDiasISO(iso, dias) {
    const d = new Date(`${iso}T00:00:00`);
    d.setDate(d.getDate() + dias);
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

function calcularDatasParcelas(parcelas) {
    const primeiraInput = document.getElementById('primeira-data-vencimento');
    const alterarPrimeira = document.getElementById('alterar-primeira-parcela')?.checked === true;
    const primeiraISO = (alterarPrimeira && primeiraInput?.value) ? primeiraInput.value : addDiasISO(document.getElementById('data-hoje-iso')?.value || '', 30);
    const datas = { 1: primeiraISO };
    for (let i = 2; i <= parcelas; i++) {
        datas[i] = datasManuaisParcelas[i] || addDiasISO(primeiraISO, 30 * (i - 1));
    }
    return datas;
}

function abrirPerguntaVencimentos() {
    const ctx = contextoVencimentosCrediario();
    if (ctx.tipo !== 'crediario' || ctx.parcelas < 2) return;
    const primeiraDataForm = document.getElementById('primeira-data-vencimento')?.value;
    const elPergunta = document.getElementById('pergunta-data-primeira');
    if (elPergunta) elPergunta.textContent = primeiraDataForm ? formatarDataBR(primeiraDataForm) : `${formatarDataBR(addDiasISO(document.getElementById('data-hoje-iso')?.value || '', 30))} (padrão)`;
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalPerguntaVencimentos')).show();
}

function fecharModal(id) {
    const inst = bootstrap.Modal.getInstance(document.getElementById(id));
    if (inst) inst.hide();
}

function construirInputsDatasParcelas() {
    const ctx = contextoVencimentosCrediario();
    const primeiraInput = document.getElementById('primeira-data-vencimento')?.value;
    if (!primeiraInput) return;
    const container = document.getElementById('lista-inputs-parcelas');
    container.innerHTML = '';
    const minDate = document.getElementById('data-hoje-iso')?.value || primeiraInput;
    for (let i = 2; i <= ctx.parcelas; i++) {
        const valorAtual = datasManuaisParcelas[i] || addDiasISO(primeiraInput, 30 * (i - 1));
        container.insertAdjacentHTML('beforeend', `
            <div class="row align-items-center g-2 mb-2">
                <div class="col-4 col-sm-3">
                    <span class="fw-semibold"><i class="bi bi-list-ol me-1"></i>Parcela ${i}</span>
                </div>
                <div class="col-8 col-sm-4">
                    <input type="date" class="form-control input-data-parcela" data-parcela="${i}" value="${valorAtual}" min="${minDate}">
                </div>
            </div>
        `);
    }
    container.querySelectorAll('.input-data-parcela').forEach(inp => {
        inp.addEventListener('input', atualizarPreviewDatasParcelas);
        inp.addEventListener('change', atualizarPreviewDatasParcelas);
    });
    atualizarPreviewDatasParcelas();
}

function dataTemporariaParcela(i) {
    const inp = document.querySelector(`#modalDatasParcelas .input-data-parcela[data-parcela="${i}"]`);
    return inp?.value || '';
}

function atualizarPreviewDatasParcelas() {
    const ctx = contextoVencimentosCrediario();
    const primeiraInput = document.getElementById('primeira-data-vencimento')?.value;
    const body = document.getElementById('previews-parcelas-body');
    if (!body) return;
    const valorParcela = ctx.financiamento / ctx.parcelas;
    let html = '';
    html += `<tr class="table-info"><td class="fw-bold">1</td><td>${formatarMoeda(valorParcela)}</td><td class="fw-bold">${formatarDataBR(primeiraInput)} <span class="badge bg-info">1ª parcela</span></td></tr>`;
    for (let i = 2; i <= ctx.parcelas; i++) {
        const bruto = dataTemporariaParcela(i);
        const personalizada = bruto && datasManuaisParcelas[i] !== bruto;
        const iso = bruto || addDiasISO(primeiraInput, 30 * (i - 1));
        html += `<tr class="${personalizada ? 'table-warning' : ''}">
            <td class="fw-semibold">${i}</td>
            <td>${formatarMoeda(valorParcela)}</td>
            <td>${formatarDataBR(iso)}${personalizada ? ' <i class="bi bi-pencil-square text-warning" title="Ajustado"></i>' : ''}</td>
        </tr>`;
    }
    body.innerHTML = html;
}

function abrirModalDatasParcelas() {
    construirInputsDatasParcelas();
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalDatasParcelas')).show();
}

function salvarDatasParcelas() {
    const ctx = contextoVencimentosCrediario();
    const primeiraInput = document.getElementById('primeira-data-vencimento')?.value;
    const hojeISO = document.getElementById('data-hoje-iso')?.value;
    const novas = {};
    for (let i = 2; i <= ctx.parcelas; i++) {
        const valor = dataTemporariaParcela(i);
        if (!valor) {
            abrirAvisoPDV(`Informe a data de vencimento da parcela ${i}.`, 'Datas incompletas', '#ef6c00', null);
            return;
        }
        if (hojeISO && valor < hojeISO) {
            abrirAvisoPDV(`A data da parcela ${i} não pode ser anterior a hoje.`, 'Data inválida', '#dc3545', null);
            return;
        }
        if (primeiraInput && valor < primeiraInput) {
            abrirAvisoPDV(`A data da parcela ${i} não pode ser antes da 1ª parcela.`, 'Data inválida', '#dc3545', null);
            return;
        }
        novas[i] = valor;
    }
    datasManuaisParcelas = novas;
    const hidden = document.getElementById('datas-parcelas-crediario');
    if (hidden) hidden.value = JSON.stringify(novas);
    const elDatas = document.getElementById('modalDatasParcelas');
    elDatas.addEventListener('hidden.bs.modal', function handler(ev) {
        if (ev.target !== elDatas) return;
        elDatas.removeEventListener('hidden.bs.modal', handler);
        abrirAvisoPDV('Datas dos vencimentos salvas! Confira o resumo ao finalizar a venda.', 'Vencimentos ajustados', '#1e7e34', null);
    });
    bootstrap.Modal.getOrCreateInstance(elDatas).hide();
}

function limparDatasManuais() {
    datasManuaisParcelas = {};
    const hidden = document.getElementById('datas-parcelas-crediario');
    if (hidden) hidden.value = '';
}

document.addEventListener('DOMContentLoaded', function () {
    const hoje = new Date();
    const hojeISO = `${hoje.getFullYear()}-${String(hoje.getMonth() + 1).padStart(2, '0')}-${String(hoje.getDate()).padStart(2, '0')}`;
    let elHoje = document.getElementById('data-hoje-iso');
    if (!elHoje) {
        elHoje = document.createElement('input');
        elHoje.type = 'hidden';
        elHoje.id = 'data-hoje-iso';
        document.body.appendChild(elHoje);
    }
    elHoje.value = hojeISO;

    const inputPrimeira = document.getElementById('primeira-data-vencimento');
    if (inputPrimeira) {
        inputPrimeira.addEventListener('change', function () {
            const ctx = contextoVencimentosCrediario();
            if (ctx.tipo === 'crediario' && ctx.parcelas > 1 && inputPrimeira.value) {
                datasManuaisParcelas = {};
                abrirPerguntaVencimentos();
            }
        });
    }
    document.getElementById('btn-vencimentos-automaticos')?.addEventListener('click', function () {
        limparDatasManuais();
        fecharModal('modalPerguntaVencimentos');
    });
    document.getElementById('btn-vencimentos-manuais')?.addEventListener('click', function () {
        const elQ = document.getElementById('modalPerguntaVencimentos');
        elQ.addEventListener('hidden.bs.modal', function handler(ev) {
            if (ev.target !== elQ) return;
            elQ.removeEventListener('hidden.bs.modal', handler);
            abrirModalDatasParcelas();
        });
        bootstrap.Modal.getOrCreateInstance(elQ).hide();
    });
    document.getElementById('btn-voltar-pergunta')?.addEventListener('click', function () {
        const elD = document.getElementById('modalDatasParcelas');
        elD.addEventListener('hidden.bs.modal', function handler(ev) {
            if (ev.target !== elD) return;
            elD.removeEventListener('hidden.bs.modal', handler);
            abrirPerguntaVencimentos();
        });
        fecharModal('modalDatasParcelas');
    });
    document.getElementById('btn-salvar-datas-parcelas')?.addEventListener('click', salvarDatasParcelas);
});

function atualizarResumoPagamentoDividido() {
    const select = document.getElementById('forma-pagamento-select');
    const checkEntrada = document.getElementById('usar-entrada-dinheiro');
    const inputEntrada = document.getElementById('entrada-dinheiro-input');
    const totalEl = document.getElementById('total-valor');
    const resumo = document.getElementById('resumo-pagamento-dividido');
    const resumoEntrada = document.getElementById('resumo-entrada');
    const resumoRestante = document.getElementById('resumo-restante');

    if (!select || !checkEntrada || !inputEntrada || !totalEl || !resumo || !resumoEntrada || !resumoRestante) return;

    const tipo = select.options[select.selectedIndex].getAttribute('data-tipo');
    const totalVenda = parseDecimal(totalEl.textContent);
    let entrada = 0;
    if (tipo !== 'dinheiro' && checkEntrada.checked) {
        entrada = parseDecimal(inputEntrada.value);
        if (entrada < 0) entrada = 0;
        if (entrada > totalVenda) entrada = totalVenda;
    }
    const restante = totalVenda - entrada;
    const mostrarResumo = tipo !== 'dinheiro' && checkEntrada.checked;
    resumo.style.display = mostrarResumo ? '' : 'none';
    // "Entrada em dinheiro" aparece com o valor digitado em tempo real
    resumoEntrada.textContent = formatarMoeda(tipo !== 'dinheiro' && checkEntrada.checked ? entrada : 0);
    resumoRestante.textContent = formatarMoeda(restante);

    // aviso visual: entrada maior que a venda
    const erroBox = document.getElementById('erro-entrada-dinheiro');
    const excedido = tipo !== 'dinheiro' && checkEntrada.checked && entrada > 0 &&
                     parseDecimal(inputEntrada.value) > totalVenda;
    if (erroBox) erroBox.classList.toggle('d-none', !excedido);
    if (excedido) inputEntrada.classList.add('is-invalid'); else inputEntrada.classList.remove('is-invalid');
}

function validarEntradaAoDigitar() {
    const select = document.getElementById('forma-pagamento-select');
    const checkEntrada = document.getElementById('usar-entrada-dinheiro');
    const inputEntrada = document.getElementById('entrada-dinheiro-input');
    const totalEl = document.getElementById('total-valor');
    if (!select || !checkEntrada || !inputEntrada || !totalEl) return;
    const tipo = select.options[select.selectedIndex].getAttribute('data-tipo');
    const totalVenda = parseDecimal(totalEl.textContent);
    const valor = parseDecimal(inputEntrada.value);
    if (tipo === 'dinheiro' || !checkEntrada.checked) return;
    // não deixa digitar acima da venda: recorta o que ultrapassa
    if (valor > totalVenda) {
        inputEntrada.value = totalVenda.toFixed(2);
        atualizarResumoPagamentoDividido();
    }
}

function normalizarEntradaDinheiroNoBlur() {
    const inputEntrada = document.getElementById('entrada-dinheiro-input');
    const checkEntrada = document.getElementById('usar-entrada-dinheiro');
    const totalEl = document.getElementById('total-valor');
    const select = document.getElementById('forma-pagamento-select');
    if (!inputEntrada || !checkEntrada || !totalEl || !select) return;
    const tipo = select.options[select.selectedIndex].getAttribute('data-tipo');
    if (tipo === 'dinheiro' || !checkEntrada.checked) return;
    const totalVenda = parseDecimal(totalEl.textContent);
    let entrada = parseDecimal(inputEntrada.value);
    if (entrada < 0) entrada = 0;
    if (entrada > totalVenda) entrada = totalVenda;
    inputEntrada.value = entrada.toFixed(2);
    atualizarResumoPagamentoDividido();
}

function verificarFormaPagamento() {
    const select = document.getElementById('forma-pagamento-select');
    const badge = document.getElementById('badge-requer-cliente');
    const parcelasInput = document.getElementById('parcelas-input');
    const parcelasAjuda = document.getElementById('parcelas-ajuda');
    const alertaSemCliente = document.getElementById('alerta-sem-cliente');
    const grupoBandeira = document.getElementById('grupo-bandeira-cartao');
    const bandeiraSelect = document.getElementById('bandeira-cartao-select');

    if (!select) return;

    const opcaoSelecionada = select.options[select.selectedIndex];
    const tipo = opcaoSelecionada.getAttribute('data-tipo');
    const parcelasMax = parseInt(opcaoSelecionada.getAttribute('data-parcelas-max') || '1', 10);
    const aceitaParcelamento = ['credito', 'crediario'].includes(tipo);

    if (parcelasInput) {
        parcelasInput.disabled = !aceitaParcelamento;

        if (aceitaParcelamento) {
            parcelasInput.classList.remove('bg-light', 'text-muted');
            const maximo = parcelasMax > 0 ? parcelasMax : 1;
            if (parcelasAjuda && tipo === 'crediario') {
                parcelasAjuda.textContent = `Informe de 1 até ${maximo} parcela(s).`;
            } else if (parcelasAjuda) {
                parcelasAjuda.textContent = 'Opções criadas conforme o cadastro em Taxas Cartão.';
            }
        } else {
            parcelasInput.classList.add('bg-light', 'text-muted');
            parcelasInput.value = '1';
            if (parcelasAjuda) {
                parcelasAjuda.textContent = 'Para esta forma de pagamento, a venda e a vista (1 parcela).';
            }
        }
        reconstruirOpcoesParcelas();
    }

    if (grupoBandeira && bandeiraSelect) {
        const exigeBandeira = ['credito', 'debito'].includes(tipo);
        grupoBandeira.style.display = exigeBandeira ? '' : 'none';
        bandeiraSelect.required = exigeBandeira;
        if (!exigeBandeira) {
            bandeiraSelect.value = '';
        }
        verificarTaxaCartao();
    }

    if (tipo === 'crediario' && !temCliente) {
        badge.style.display = 'inline';
        if (alertaSemCliente) {
            alertaSemCliente.classList.remove('alert-warning');
            alertaSemCliente.classList.add('alert-danger');
            alertaSemCliente.innerHTML = `
                <i class="bi bi-exclamation-triangle-fill"></i>
                <strong>ATENÇÃO:</strong> Vendas no crediário exigem cliente!
                <br><small>Selecione um cliente antes de finalizar</small>
            `;
        }
    } else {
        badge.style.display = 'none';
        const parcelas = parseInt(document.getElementById('parcelas-input')?.value || '1', 10);
        if (alertaSemCliente && parcelas <= 1) {
            alertaSemCliente.classList.remove('alert-danger');
            alertaSemCliente.classList.add('alert-warning');
            alertaSemCliente.innerHTML = `
                <i class="bi bi-exclamation-triangle"></i>
                <strong>Atenção:</strong> Cliente não selecionado
                <br><small>Obrigatório para crediário e vendas parceladas</small>
            `;
        }
    }
    atualizarEntradaDinheiroUI();
    atualizarResumoPagamentoDividido();
}

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

function verificarTaxaCartao() {
    const select = document.getElementById('forma-pagamento-select');
    const bandeiraSelect = document.getElementById('bandeira-cartao-select');
    const parcelasInput = document.getElementById('parcelas-input');
    const ajuda = document.getElementById('taxa-cartao-ajuda');
    if (!select || !bandeiraSelect || !parcelasInput || !ajuda) return true;

    const tipo = select.options[select.selectedIndex].getAttribute('data-tipo');
    if (!['credito', 'debito'].includes(tipo)) {
        ajuda.textContent = '';
        ajuda.className = 'd-block mt-1';
        return true;
    }

    const bandeira = bandeiraSelect.value;
    const parcelas = parseInt(parcelasInput.value || '1', 10);
    if (!bandeira) {
        ajuda.textContent = 'Selecione a bandeira do cartão.';
        ajuda.className = 'text-danger d-block mt-1';
        return false;
    }

    const taxa = taxasCartao[chaveTaxaCartao(tipo, bandeira, parcelas)];
    if (!taxa) {
        ajuda.textContent = 'Não há taxa cadastrada para esta bandeira e parcela.';
        ajuda.className = 'text-danger d-block mt-1';
        return false;
    }

    ajuda.textContent = '';
    ajuda.className = 'd-block mt-1';
    return true;
}

function reconstruirOpcoesParcelas() {
    const select = document.getElementById('forma-pagamento-select');
    const parcelasSelect = document.getElementById('parcelas-input');
    const bandeiraSelect = document.getElementById('bandeira-cartao-select');
    const configAjuda = document.getElementById('parcelas-config-ajuda');
    if (!select || !parcelasSelect) return;

    const tipo = select.options[select.selectedIndex]?.getAttribute('data-tipo');
    const bandeira = bandeiraSelect ? bandeiraSelect.value : '';

    // Fluxo em etapas: parcelas aparecem só depois da bandeira (cartão de crédito)
    const grupoParcelas = document.getElementById('grupo-parcelas');
    const corpoCartao = document.querySelector('#grupo-bandeira-cartao .card-body');
    const cardEntrada = document.getElementById('card-entrada-dinheiro');
    if (grupoParcelas) {
        const mostraParcelas =
            tipo === 'crediario' ? true :
            tipo === 'credito' ? !!bandeira :
            false;
        grupoParcelas.style.display = mostraParcelas ? '' : 'none';
        // cartão de crédito com bandeira: parcelas ficam DENTRO do card do cartão, logo abaixo da bandeira
        if (tipo === 'credito' && bandeira && corpoCartao) {
            corpoCartao.appendChild(grupoParcelas);
            grupoParcelas.classList.add('dentro-cartao');
        } else {
            cardEntrada.parentNode.insertBefore(grupoParcelas, cardEntrada);
        }
        grupoParcelas.classList.toggle('dentro-cartao', tipo === 'credito' && bandeira && !!corpoCartao);
    }

    let disponiveis = [];
    if (tipo === 'credito') {
        const vistos = new Set();
        Object.entries(taxasCartao).forEach(([chave, taxaPct]) => {
            const [t, b, p] = chave.split('|');
            if (t !== 'credito') return;
            if (bandeira && b !== bandeira) return;
            const num = parseInt(p, 10);
            if (!vistos.has(num)) {
                vistos.add(num);
                disponiveis.push({ parcelas: num, taxa: taxaPct });
            }
        });
        disponiveis.sort((a, b) => a.parcelas - b.parcelas);
        if (configAjuda) {
            if (!bandeira) {
                configAjuda.textContent = 'Selecione a bandeira para ver em quantas vezes ela está configurada.';
            } else if (disponiveis.length) {
                const maximo = disponiveis[disponiveis.length - 1].parcelas;
                const lista = disponiveis.map(d => d.parcelas + 'x').join(', ');
                configAjuda.innerHTML = `<i class="bi bi-check-circle text-success"></i> ${bandeira.toUpperCase()} configurada até <strong>${maximo}x</strong> — parcelas com taxa: ${lista}`;
            } else {
                configAjuda.innerHTML = `<i class="bi bi-exclamation-circle text-danger"></i>Nenhuma parcela configurada para ${bandeira.toUpperCase()}. Crie em Taxas Cartão.`;
            }
        }
    } else if (tipo === 'crediario') {
        const parcelasMax = parseInt(select.options[select.selectedIndex]?.getAttribute('data-parcelas-max') || '12', 10);
        for (let i = Math.max(parcelasMax, 1); i >= 1; i--) {
            disponiveis.push({ parcelas: i, taxa: null });
        }
        disponiveis.sort((a, b) => a.parcelas - b.parcelas);
        if (configAjuda) configAjuda.textContent = '';
    } else {
        disponiveis = [{ parcelas: 1, taxa: null }];
        if (configAjuda) {
            configAjuda.innerHTML = tipo === 'debito'
                ? '<i class="bi bi-check-circle text-success"></i>Débito configurado em 1x (à vista).'
                : '';
        }
    }

    const valorDesejado = parcelasSelect.dataset.valorDesejado || parcelasSelect.value || '1';
    const valorAtual = parseInt(valorDesejado, 10) || 1;
    parcelasSelect.dataset.valorDesejado = '';
    parcelasSelect.innerHTML = '';
    if (!disponiveis.length) {
        parcelasSelect.innerHTML = '<option value="1">1x (à vista)</option>';
    } else {
        disponiveis.forEach(d => {
            const opt = document.createElement('option');
            opt.value = String(d.parcelas);
            opt.textContent = d.parcelas === 1
                ? '1x (à vista)'
                : (d.taxa !== null ? `${d.parcelas}x — taxa ${d.taxa}%` : `${d.parcelas}x`);
            parcelasSelect.appendChild(opt);
        });
    }
    // mantém a seleção anterior se ainda disponível; senão escolhe a maior opção <= atual, senão 1x
    const valores = [...parcelasSelect.options].map(o => parseInt(o.value, 10));
    if (valores.includes(valorAtual)) {
        parcelasSelect.value = String(valorAtual);
    } else {
        const menor = valores.filter(v => v <= valorAtual).sort((a, b) => b - a)[0];
        parcelasSelect.value = String(menor || valores[0] || 1);
    }
}

function continuarVendaSemCliente() {
    const modalEl = document.getElementById('modalSemCliente');
    clearTimeout(window._timerSemCliente);
    try { bootstrap.Modal.getOrCreateInstance(modalEl).hide(); } catch (e) {}
    window._timerSemCliente = setTimeout(function () {
        window._timerSemCliente = null;
        mostrarResumoFinalizacao();
    }, 300);
}

function verificarParcelas() {
    const parcelasInput = document.getElementById('parcelas-input');
    const badge = document.getElementById('badge-parcela-requer-cliente');
    const select = document.getElementById('forma-pagamento-select');
    const alertaSemCliente = document.getElementById('alerta-sem-cliente');

    if (!parcelasInput || !select) return;

    const opcaoSelecionada = select.options[select.selectedIndex];
    const tipo = opcaoSelecionada.getAttribute('data-tipo');
    reconstruirOpcoesParcelas();
    const valorAtual = parseInt(parcelasInput.value, 10) || 1;
    if (valorAtual > 1 && !temCliente) {
        badge.style.display = 'inline';
        if (alertaSemCliente) {
            alertaSemCliente.classList.remove('alert-warning');
            alertaSemCliente.classList.add('alert-danger');
            alertaSemCliente.innerHTML = `
                <i class="bi bi-exclamation-triangle-fill"></i>
                <strong>Venda parcelada sem cliente!</strong>
                <br><small>Venda no crédito pode continuar sem cliente (ficará como anônima, com confirmação). Para o crediário é obrigatório informar.</small>
            `;
        }
    } else {
        badge.style.display = 'none';
        verificarFormaPagamento();
    }
    verificarTaxaCartao();
    atualizarResumoPagamentoDividido();
}

function validarVenda() {
    const formFinalizar = document.getElementById('form-finalizar-venda');
    if (formFinalizar._skipValidation) {
        return true;
    }

    const select = document.getElementById('forma-pagamento-select');
    const parcelasInput = document.getElementById('parcelas-input');
    const opcaoSelecionada = select.options[select.selectedIndex];
    const tipo = opcaoSelecionada.getAttribute('data-tipo');
    const nomePagamento = opcaoSelecionada.getAttribute('data-nome');
    const parcelasMax = parseInt(opcaoSelecionada.getAttribute('data-parcelas-max') || '1', 10);
    const parcelas = parseInt(parcelasInput.value, 10) || 1;
    const aceitaParcelamento = ['credito', 'crediario'].includes(tipo);
    const totalEl = document.getElementById('total-valor');
    const totalVenda = parseDecimal(totalEl ? totalEl.textContent : '0');
    const bandeiraSelect = document.getElementById('bandeira-cartao-select');
    const usarEntrada = document.getElementById('usar-entrada-dinheiro')?.checked === true;
    const entradaInput = document.getElementById('entrada-dinheiro-input');
    const entradaDinheiro = parseDecimal(entradaInput ? entradaInput.value : '0');
    const restanteVenda = totalVenda - (usarEntrada ? entradaDinheiro : 0);
    const primeiraDataVencimento = document.getElementById('primeira-data-vencimento');
    const alterarPrimeiraParcela = document.getElementById('alterar-primeira-parcela')?.checked === true;

    if (tipo === 'crediario' && !temCliente) {
        alert('ATENÇÃO!\n\nPara vendas no CREDIÁRIO é obrigatório informar o cliente.\n\nPor favor, selecione um cliente antes de finalizar a venda.');
        return false;
    }

    if (!aceitaParcelamento && parcelas !== 1) {
        alert(`${nomePagamento} é à vista e não permite parcelamento.`);
        parcelasInput.value = '1';
        return false;
    }

    if (aceitaParcelamento && (parcelas < 1 || parcelas > parcelasMax)) {
        alert(`Para ${nomePagamento}, informe de 1 até ${parcelasMax} parcela(s).`);
        return false;
    }

    if (['credito', 'debito'].includes(tipo)) {
        if (!bandeiraSelect?.value) {
            alert('Selecione a bandeira do cartão.');
            return false;
        }
        if (!verificarTaxaCartao()) {
            alert('Cadastre a taxa desta bandeira/parcela em Taxas Cartão antes de finalizar.');
            return false;
        }
    }

    if (parcelas > 1 && !temCliente) {
        if (tipo === 'credito') {
            formFinalizar._skipValidation = true;
            bootstrap.Modal.getOrCreateInstance(document.getElementById('modalSemCliente')).show();
            return false;
        }
        alert('ATENÇÃO!\n\nPara vendas PARCELADAS no crediário é obrigatório informar o cliente.\n\nPor favor, selecione um cliente antes de finalizar a venda.');
        return false;
    }

    if (tipo === 'dinheiro' && usarEntrada && entradaDinheiro > 0) {
        alert('Não informe entrada em dinheiro quando a forma principal for dinheiro.');
        return false;
    }

    if (tipo !== 'dinheiro' && usarEntrada) {
        if (entradaDinheiro <= 0) {
            alert('Informe um valor de entrada em dinheiro maior que zero.');
            return false;
        }
        if (entradaDinheiro >= totalVenda) {
            alert('A entrada em dinheiro deve ser menor que o total da venda.');
            return false;
        }
    }

    if (tipo === 'crediario' && alterarPrimeiraParcela && !primeiraDataVencimento?.value) {
        abrirAvisoPDV('Informe a data de vencimento da primeira parcela do crediário.', 'Data do vencimento', '#4a90e2', 'primeira-data-vencimento');
        return false;
    }

    if (tipo === 'crediario' && alterarPrimeiraParcela && primeiraDataVencimento?.value) {
        const hoje = new Date();
        hoje.setHours(0, 0, 0, 0);
        const primeiraData = new Date(`${primeiraDataVencimento.value}T00:00:00`);
        if (primeiraData < hoje) {
            alert('A data da primeira parcela do crediário não pode ser anterior a hoje.');
            return false;
        }
    }

    if (tipo === 'crediario' && temCliente && limiteCrediarioAtivo && limiteCrediarioDisponivel !== null && restanteVenda > limiteCrediarioDisponivel) {
        document.getElementById('limite-total-valor').textContent = formatarMoeda(limiteCrediarioTotal);
        document.getElementById('limite-saldo-devedor-valor').textContent = formatarMoeda(saldoDevedorCrediario);
        document.getElementById('limite-valor-compra').textContent = formatarMoeda(totalVenda);
        document.getElementById('limite-disponivel-valor').textContent = formatarMoeda(limiteCrediarioDisponivel);
        document.getElementById('limite-financiado-valor').textContent = formatarMoeda(restanteVenda);
        document.getElementById('limite-diferenca-valor').textContent = formatarMoeda(restanteVenda - limiteCrediarioDisponivel);
        const modalLimite = new bootstrap.Modal(document.getElementById('modalLimiteInsuficiente'));
        modalLimite.show();
        return false;
    }

    return mostrarResumoFinalizacao();
}

function mostrarResumoFinalizacao() {
    const formFinalizar = document.getElementById('form-finalizar-venda');
    const select = document.getElementById('forma-pagamento-select');
    const parcelasInput = document.getElementById('parcelas-input');
    const opcaoSelecionada = select.options[select.selectedIndex];
    const tipo = opcaoSelecionada.getAttribute('data-tipo');
    const nomePagamento = opcaoSelecionada.getAttribute('data-nome');
    const totalEl = document.getElementById('total-valor');
    const totalVenda = parseDecimal(totalEl ? totalEl.textContent : '0');
    const bandeiraSelect = document.getElementById('bandeira-cartao-select');
    const usarEntrada = document.getElementById('usar-entrada-dinheiro')?.checked === true;
    const entradaInput = document.getElementById('entrada-dinheiro-input');
    const entradaDinheiro = parseDecimal(entradaInput ? entradaInput.value : '0');
    const restanteVenda = totalVenda - (usarEntrada ? entradaDinheiro : 0);
    const primeiraDataVencimento = document.getElementById('primeira-data-vencimento');
    const alterarPrimeiraParcela = document.getElementById('alterar-primeira-parcela')?.checked === true;
    const parcelas = parseInt(parcelasInput.value, 10) || 1;

    // Montar detalhes para o modal visual
    const valorParcela = restanteVenda / parcelas;
    const ehCartao = ['credito', 'debito'].includes(tipo);
    const taxaPct = ehCartao ? taxasCartao[chaveTaxaCartao(tipo, bandeiraSelect?.value, parcelas)] : null;
    const taxaValor = taxaPct ? (restanteVenda * parseFloat(taxaPct) / 100) : 0;

    let html = `
        <div class="text-center mb-3">
            <i class="bi bi-bag-fill text-success" style="font-size:2.5rem;"></i>
            ${nomeCliente
                ? `<h5 class="mt-2 mb-0"><i class="bi bi-person-circle me-1"></i> ${nomeCliente}</h5>`
                : `<p class="text-muted mb-0 mt-2"><small><i class="bi bi-person-x me-1"></i>Venda sem cliente</small></p>`}
        </div>
        <table class="table table-borderless mb-0">
            <tbody>
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-cash-stack me-1"></i> Total da venda</td>
                    <td class="fw-bold text-primary fs-5">${formatarMoeda(totalVenda)}</td>
                </tr>
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-credit-card me-1"></i> Pagamento</td>
                    <td class="fw-bold">${nomePagamento}</td>
                </tr>`;
    if (ehCartao && bandeiraSelect?.value) {
        const bandeiraNome = bandeiraSelect.options[bandeiraSelect.selectedIndex].textContent;
        html += `
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-credit-card-2-front me-1"></i> Bandeira</td>
                    <td class="fw-bold">${bandeiraNome}</td>
                </tr>`;
    }
    if (taxaPct) {
        html += `
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-percent me-1"></i> Taxa da maquininha</td>
                    <td class="fw-bold text-danger">${taxaPct}% <small>(-${formatarMoeda(taxaValor)})</small></td>
                </tr>
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-wallet2 me-1"></i> Você recebe líquido</td>
                    <td class="fw-bold text-success">${formatarMoeda(restanteVenda - taxaValor)}</td>
                </tr>`;
    }
    if (parcelas > 1) {
        html += `
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-list-ol me-1"></i> Parcelamento</td>
                    <td class="fw-bold">${parcelas}x de ${formatarMoeda(valorParcela)}</td>
                </tr>`;
    } else {
        html += `
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-list-ol me-1"></i> Parcelas</td>
                    <td class="fw-bold">À vista</td>
                </tr>`;
    }
    if (tipo !== 'dinheiro' && usarEntrada && entradaDinheiro > 0) {
        html += `
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-cash me-1"></i> Entrada em dinheiro</td>
                    <td class="fw-bold text-success">${formatarMoeda(entradaDinheiro)}</td>
                </tr>
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-arrow-right-circle me-1"></i> Valor devido</td>
                    <td class="fw-bold">${formatarMoeda(restanteVenda)}</td>
                </tr>`;
    }
    if (tipo === 'crediario' && parcelas > 1) {
        const datas = calcularDatasParcelas(parcelas);
        const valorParcelaCrediario = restanteVenda / parcelas;
        html += `
                <tr>
                    <td class="text-muted fw-semibold"><i class="bi bi-calendar-event me-1"></i> Vencimentos 1ª parcela</td>
                    <td class="fw-bold">${formatarDataBR(datas[1])}</td>
                </tr>
                <tr>
                    <td colspan="2" class="p-0">
                        <div class="table-responsive border rounded mx-1">
                            <table class="table table-sm mb-0">
                                <thead class="table-light">
                                    <tr><th class="ps-3">Parcela</th><th>Valor</th><th>Vencimento</th></tr>
                                </thead>
                                <tbody>`;
        for (let i = 2; i <= parcelas; i++) {
            const personalizada = !!datasManuaisParcelas[i];
            html += `
                                    <tr class="${personalizada ? 'table-warning' : ''}">
                                        <td class="ps-3 fw-semibold">${i}</td>
                                        <td>${formatarMoeda(valorParcelaCrediario)}</td>
                                        <td class="fw-bold">${formatarDataBR(datas[i])}${personalizada ? ' <i class="bi bi-pencil-square text-warning" title="Data ajustada"></i>' : ''}</td>
                                    </tr>`;
        }
        html += `
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>`;
    }
    html += `
            </tbody>
        </table>`;

    document.getElementById('confirmar-venda-detalhes').innerHTML = html;

    // Mostrar modal de confirmação
    const modalConfirmar = new bootstrap.Modal(document.getElementById('modalConfirmarVenda'));
    document.getElementById('btn-confirmar-venda-ok').onclick = function () {
        modalConfirmar.hide();
        // Submeter diretamente para evitar loop com onsubmit
        sessionStorage.setItem('pdv_finalizou', '1');
        formFinalizar._skipValidation = true;
        formFinalizar.submit();
    };
    modalConfirmar.show();
    return false;
}

function abrirModalEditarLimite() {
    const el = document.getElementById('modalEditarLimite');
    document.getElementById('novo-limite-input').value = '';
    document.getElementById('erro-limite-modal')?.classList.add('d-none');
    bootstrap.Modal.getOrCreateInstance(el).show();
    setTimeout(() => document.getElementById('novo-limite-input')?.focus(), 320);
}

function atualizarNumerosLimite(res) {
    const fmt = v => 'R$ ' + parseFloat(String(v)).toFixed(2).replace('.', ',');
    const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = fmt(val); };
    set('limite-total-valor', res.limite_total);
    set('limite-saldo-devedor-valor', res.valor_em_aberto);
    set('limite-disponivel-valor', res.limite_disponivel);
    // sincroniza o alerta no topo e o "limite atual" dentro do modal de edição
    set('alerta-limite-texto', '')
    const alvo = document.getElementById('alerta-limite-texto');
    if (alvo) {
        alvo.innerHTML = 'Limite: <strong>' + fmt(res.limite_total) + '</strong> | '
            + 'Saldo devedor atual: <strong>' + fmt(res.valor_em_aberto) + '</strong> | '
            + 'Disponível: <strong class="text-success">' + fmt(res.limite_disponivel) + '</strong>';
    }
    document.getElementById('limite-atual-modal').textContent = fmt(res.limite_total);
}

function salvarNovoLimite() {
    const clienteId = {{ cliente_id|default:'0' }};
    if (!clienteId) { abrirAvisoPDV('Selecione um cliente antes de alterar o limite.', 'Cliente', '#ef6c00'); return; }
    const bruto = document.getElementById('novo-limite-input').value.trim();
    if (!bruto || parseFloat(bruto) <= 0) {
        mostrarErroLimite('Informe o novo valor do limite.');

        return;
    }
    const body = new FormData();
    body.append('cliente_id', String(clienteId));
    body.append('limite', bruto);
    fetch('{% url 'atualizar_limite_cliente' %}', { method: 'POST', body, credentials: 'same-origin' })
        .then(r => r.json())
        .then(() => {
            window._limite_recalculado = true;
            // esconde o modal de edição e atualiza os números nos dois modais/alertas
            bootstrap.Modal.getOrCreateInstance(document.getElementById('modalEditarLimite')).hide();
            atualizarNumerosLimite(res);
            // mensagem direto a venda pronta e o modal de limite mostra instrução
            document.getElementById('limite-valor-compra').classList.remove('text-danger');
            abrirAvisoPDV('Limite atualizado com sucesso! Agora finalize a venda novamente: clique em Finalizar Venda.', 'Limite salvo', '#1e7e34');
            const contagem = document.getElementById('alerta-limite-crediario');
            if (contagem) contagem.classList.replace('alert-warning', 'alert-success');
        })
        .catch(() => mostrarErroLimite('Falha na comunicação com o servidor.'));
}

function mostrarErroLimite(msg) {
    const el = document.getElementById('erro-limite-modal');
    if (el) { el.textContent = msg; el.classList.remove('d-none'); }
}

function abrirModalClientes() {
    modalClientes.show();

    // Mostra todos os clientes cadastrados ao abrir o modal
    document.getElementById('busca-modal-cliente').value = '';
    buscarClientes('');

    // Focar no campo de busca do modal
    setTimeout(() => {
        document.getElementById('busca-modal-cliente')?.focus();
    }, 500);
}

function buscarClientes(termo) {
    const loading = document.getElementById('loading-clientes');
    const listaClientes = document.getElementById('lista-clientes');

    loading.style.display = 'block';
    listaClientes.innerHTML = '';

    fetch(`{% url 'buscar_clientes_json' %}?busca=${encodeURIComponent(termo)}`)
        .then(response => response.json())
        .then(data => {
            loading.style.display = 'none';

            if (data.clientes && data.clientes.length > 0) {
                let html = '';
                data.clientes.forEach(cliente => {
                    html += `
                        <a href="#" class="list-group-item list-group-item-action cliente-item"
                           data-cliente-id="${cliente.id}"
                           data-cliente-nome="${cliente.nome}"
                           style="transition: all 0.2s;">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">
                                        <i class="bi bi-person-fill text-primary"></i>
                                        <strong>${cliente.nome}</strong>
                                    </h6>
                                    <p class="mb-1 text-muted small">
                                        ${cliente.cpf ? '<i class="bi bi-credit-card"></i> CPF: ' + cliente.cpf : ''}
                                        ${cliente.cpf && cliente.telefone ? ' | ' : ''}
                                        ${cliente.telefone ? '<i class="bi bi-telephone"></i> ' + cliente.telefone : ''}
                                    </p>
                                    ${cliente.email ? '<small class="text-muted"><i class="bi bi-envelope"></i> ' + cliente.email + '</small>' : ''}
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-info">Clique 2x</span>
                                </div>
                            </div>
                        </a>
                    `;
                });
                listaClientes.innerHTML = html;

                // Adicionar eventos de duplo clique
                document.querySelectorAll('.cliente-item').forEach(item => {
                    // Evento de clique simples para destacar
                    item.addEventListener('click', function(e) {
                        e.preventDefault();

                        // Remove destaque de outros itens
                        document.querySelectorAll('.cliente-item').forEach(i => {
                            i.classList.remove('active');
                            i.style.backgroundColor = '';
                        });

                        // Adiciona destaque ao item clicado
                        this.classList.add('active');
                        this.style.backgroundColor = '#e3f2fd';
                    });

                    // Efeito hover
                    item.addEventListener('mouseenter', function() {
                        if (!this.classList.contains('active')) {
                            this.style.backgroundColor = '#f8f9fa';
                        }
                    });

                    item.addEventListener('mouseleave', function() {
                        if (!this.classList.contains('active')) {
                            this.style.backgroundColor = '';
                        }
                    });

                    // Evento de duplo clique para selecionar
                    item.addEventListener('dblclick', function(e) {
                        e.preventDefault();
                        const clienteId = this.getAttribute('data-cliente-id');
                        const clienteNome = this.getAttribute('data-cliente-nome');
                        selecionarCliente(clienteId, clienteNome);
                    });
                });
            } else {
                listaClientes.innerHTML = `
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        Nenhum cliente encontrado com "${termo}"
                        <br><small>Tente buscar por nome, CPF ou telefone</small>
                    </div>
                `;
            }
        })
        .catch(error => {
            loading.style.display = 'none';
            listaClientes.innerHTML = `
                <div class="alert alert-danger">
                    <i class="bi bi-x-circle"></i>
                    Erro ao buscar clientes. Tente novamente.
                </div>
            `;
            console.error('Erro:', error);
        });
}

function selecionarCliente(clienteId, clienteNome) {
    // Mostra mensagem de sucesso
    const toastHtml = `
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11000">
            <div class="toast show align-items-center text-white bg-success border-0" role="alert">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-check-circle-fill me-2"></i>
                        <strong>${clienteNome}</strong> selecionado! Carregando produtos...
                    </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);

    // Fecha o modal
    modalClientes.hide();

    // Redireciona apos pequeno delay
    setTimeout(() => {
        window.location.href = `?cliente_id=${clienteId}`;
    }, 1000);
}
</script>
{% endblock %}