{% extends 'base.html' %}
{% block title %}{{ titulo }} - {{ block.super }}{% endblock %}
{% block extra_css %}
<style>
    .produto-resultado {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border-left: 3px solid transparent;
    }
    .produto-resultado:not(:disabled):hover,
    .produto-resultado:not(:disabled):focus-visible {
        border-left-color: var(--primary-color);
        background: #f3f8fe;
    }
    .produto-resultado:disabled {
        background: #f8f9fa;
        opacity: 0.8;
        cursor: not-allowed;
    }
    .produto-resultado-info { min-width: 0; text-align: left; }
    .produto-resultado-nome { display: block; color: #27384a; font-weight: 650; }
    .produto-resultado-codigo { display: block; margin-top: 0.2rem; color: #687789; font-size: 0.82rem; }
    .produto-resultado-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; flex-shrink: 0; }
    .produto-resultado-preco { color: #245b91; font-size: 1rem; font-weight: 700; white-space: nowrap; }
    .produto-resultado-adicionar { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem; border: 1px solid #9dbce0; border-radius: 0.5rem; color: #245b91; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
    .produto-resultado:not(:disabled):hover .produto-resultado-adicionar { background: #4a90e2; border-color: #4a90e2; color: #fff; }
    @media (max-width: 575.98px) {
        .produto-resultado { align-items: flex-start; padding: 0.75rem; }
        .produto-resultado-acoes { flex-direction: column; align-items: flex-end; gap: 0.45rem; }
        .produto-resultado-preco { font-size: 0.92rem; }
        .produto-resultado-adicionar { padding: 0.32rem 0.5rem; }
    }
</style>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3"><h2><i class="bi bi-bag-plus"></i> {{ titulo }}</h2><a class="btn btn-outline-secondary" href="{% if condicional %}{% url 'condicional:detalhe' condicional.pk %}{% else %}{% url 'condicional:lista' %}{% endif %}"><i class="bi bi-arrow-left"></i> Voltar</a></div>
<form method="post" id="form-condicional">{% csrf_token %}<input type="hidden" name="itens_json" id="itens-json"><input type="hidden" name="chave_criacao" value="{{ chave_criacao }}">
    {% if form.errors %}<div class="alert alert-danger">Revise os dados informados e tente novamente.</div>{% endif %}
    <div class="row g-3">
        <div class="col-lg-7">
            <div class="card"><div class="card-header">Dados do cliente e do envio</div><div class="card-body">
                <div class="mb-3"><label class="form-label">Cliente *</label>{{ form.cliente }}{% for error in form.cliente.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}</div>
                <div id="resumo-cliente" class="alert alert-info d-none"></div>
                <p class="small text-muted">O limite de crediário é configurado no cadastro do cliente, na seção “Limite de Venda no Crediário”. Os condicionais podem ser enviados independentemente desse valor, mas as compras realizadas posteriormente no crediário respeitarão o limite disponível.</p>
                <div class="mb-3"><label class="form-label">Previsão de devolução</label>{{ form.previsao_devolucao }}{% for error in form.previsao_devolucao.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}</div>
                <div class="mb-3"><label class="form-label">Observações</label>{{ form.observacoes }}</div>
            </div></div>
            <div class="card"><div class="card-header">Produtos do estoque</div><div class="card-body">
                <label for="busca-produto" class="form-label">Pesquisar por nome, código, tamanho ou cor</label>
                <div class="input-group mb-2"><input id="busca-produto" class="form-control" autocomplete="off" placeholder="Comece a digitar o nome ou código do produto"><button class="btn btn-primary" type="button" id="btn-buscar-produto"><i class="bi bi-search"></i> Buscar</button><button class="btn btn-outline-secondary" type="button" id="btn-limpar-busca" title="Limpar pesquisa"><i class="bi bi-x-lg"></i></button></div>
                <small class="text-muted d-block mb-2">Os produtos correspondentes aparecem enquanto você digita. Pressione Enter com a busca vazia para listar todos.</small>
                <div id="resultados-produtos" class="list-group mb-3" aria-live="polite"><div class="small text-muted py-2">Digite parte do nome ou do código para pesquisar.</div></div>
                <div class="d-flex justify-content-between align-items-center mb-2"><strong>Produtos adicionados</strong><span class="badge bg-primary" id="contagem-produtos">0 produtos</span></div>
                <div class="table-responsive"><table class="table table-sm" id="tabela-itens"><thead><tr><th>Produto / variação</th><th>Disponível</th><th style="width:100px">Quantidade</th><th>Unitário</th><th>Subtotal</th><th></th></tr></thead><tbody><tr><td colspan="6" class="text-center text-muted py-3">Os produtos escolhidos aparecerão aqui.</td></tr></tbody></table></div>
            </div></div>
        </div>
        <div class="col-lg-5"><div class="card sticky-top" style="top:1rem"><div class="card-header">Resumo do condicional</div><div class="card-body">
            <p class="text-muted">A confirmação reserva as peças e reduz o saldo disponível para venda normal. O limite de crediário não bloqueia o envio.</p>
            <div class="d-flex justify-content-between"><strong>Total de peças</strong><span id="total-pecas">0</span></div><hr>
            <div class="d-flex justify-content-between"><strong>Valor total</strong><strong class="text-primary" id="total-valor">R$ 0,00</strong></div><hr>
            <div class="d-grid gap-2"><button class="btn btn-outline-primary" name="acao" value="rascunho"><i class="bi bi-save"></i> Salvar rascunho</button><button class="btn btn-success" name="acao" value="enviar"><i class="bi bi-send"></i> Confirmar envio</button></div>
        </div></div></div>
    </div>
</form>
{% endblock %}
{% block extra_js %}
<script>
(() => {
 const productUrl = "{% url 'condicional:buscar_produtos' %}";
 const summaryUrl = "{% url 'condicional:resumo_cliente' 999999 %}";
 const podeEditarCliente = {% if user.is_superuser or perms.core.change_cliente %}true{% else %}false{% endif %};
 const linhas = new Map();
 const corpo = document.querySelector('#tabela-itens tbody');
 const resultadoEl = document.getElementById('resultados-produtos');
 const buscaInput = document.getElementById('busca-produto');
 let buscaTimer = null;
 let buscaController = null;
 let buscaSequencia = 0;
 const dinheiro = v => Number(v || 0).toLocaleString('pt-BR',{style:'currency',currency:'BRL'});
 const seguro = v => String(v ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 function atualizarResumo() {
   let qtd=0, total=0;
   linhas.forEach(p=>{const quantidade=Number(p.quantidade)||0;qtd+=quantidade;total+=quantidade*Number(p.preco);});
   document.getElementById('total-pecas').textContent=qtd;
   document.getElementById('total-valor').textContent=dinheiro(total);
   document.getElementById('contagem-produtos').textContent=`${linhas.size} ${linhas.size === 1 ? 'produto' : 'produtos'}`;
   document.getElementById('itens-json').value=JSON.stringify([...linhas].map(([produto_id,p])=>({produto_id,quantidade:Number(p.quantidade)})));
 }
 function desenhar() {
   corpo.innerHTML='';
   if(!linhas.size){corpo.innerHTML='<tr><td colspan="6" class="text-center text-muted py-3">Os produtos escolhidos aparecerão aqui.</td></tr>';atualizarResumo();return;}
   linhas.forEach((p,id) => { const quantidade=Number(p.quantidade)||0;
      const tr=document.createElement('tr');
      const nome=[p.nome||p.descricao,p.tamanho,p.cor].filter(Boolean).join(' · ');
      tr.innerHTML=`<td><strong>${seguro(nome)}</strong><br><small class="text-muted">${seguro(p.codigo||'')}</small></td><td>${Number(p.estoque)||0}</td><td><input type="number" min="1" max="${Number(p.estoque)||0}" class="form-control form-control-sm qtd-produto" value="${quantidade}" data-id="${id}" aria-label="Quantidade de ${seguro(nome)}"></td><td>${dinheiro(p.preco)}</td><td class="subtotal-item">${dinheiro(quantidade*p.preco)}</td><td><button type="button" class="btn btn-sm btn-outline-danger remover-produto" data-id="${id}" title="Remover produto"><i class="bi bi-trash"></i></button></td>`;
      corpo.appendChild(tr);
    });
   atualizarResumo();
 }
 function adicionar(p) {
   const existente=linhas.get(p.id);
   const quantidadeAtual=Number(existente?.quantidade)||0;
   if(existente && quantidadeAtual >= Number(p.estoque)){
     resultadoEl.querySelector('.alert-estoque-limite')?.remove();
     const aviso=document.createElement('div');aviso.className='alert alert-warning py-2 mb-2 alert-estoque-limite';aviso.textContent='A quantidade selecionada já atingiu o estoque disponível.';resultadoEl.prepend(aviso);
     return;
   }
   p.quantidade=existente?Math.min(quantidadeAtual+1,Number(p.estoque)):1;
   linhas.set(p.id,p); desenhar();
 }
 async function buscar(listarTodosSeVazio=false) {
    const q=buscaInput.value.trim();
    const sequencia=++buscaSequencia;
    if(buscaController)buscaController.abort();
    if(!q&&!listarTodosSeVazio){resultadoEl.innerHTML='<div class="small text-muted py-2">Digite parte do nome ou do código para pesquisar, ou pressione Enter para listar todos.</div>';return;}
   buscaController=new AbortController();
   resultadoEl.innerHTML='<div class="small text-muted py-2"><span class="spinner-border spinner-border-sm me-2" role="status"></span>Buscando produtos...</div>';
   try {
     const resposta=await fetch(`${productUrl}?q=${encodeURIComponent(q)}`,{signal:buscaController.signal});
     if(!resposta.ok)throw new Error('Falha na busca');
     const data=await resposta.json();
     if(sequencia!==buscaSequencia)return;
     resultadoEl.innerHTML='';
     if(!data.produtos.length){resultadoEl.innerHTML='<div class="small text-muted py-2">Nenhum produto encontrado para essa pesquisa.</div>';return;}
     resultadoEl.innerHTML=`<div class="small text-muted py-2">${data.produtos.length} ${data.produtos.length===1?'produto encontrado':'produtos encontrados'}. Clique em um produto para adicioná-lo.</div>`;
      data.produtos.forEach(p=>{
        const estoque=Number(p.estoque)||0;
        const estoqueHtml=estoque>0
          ? `<span class="badge bg-success"><i class="bi bi-box-seam me-1"></i>${estoque} ${estoque===1?'unidade disponível':'unidades disponíveis'}</span>`
          : estoque===0
            ? '<span class="badge bg-secondary"><i class="bi bi-box me-1"></i>Sem estoque</span>'
            : `<span class="badge bg-danger"><i class="bi bi-exclamation-triangle me-1"></i>Indisponível · saldo ${estoque}</span>`;
        const b=document.createElement('button');
        b.type='button';
        b.className='list-group-item list-group-item-action produto-resultado';
        b.disabled=estoque<1;
        b.setAttribute('aria-label',`${p.descricao}. ${estoque>0?`${estoque} unidades disponíveis`:'Sem estoque disponível'}. ${dinheiro(p.preco)}.`);
        b.innerHTML=`<span class="produto-resultado-info"><span class="produto-resultado-nome">${seguro(p.descricao)}</span><span class="produto-resultado-codigo">Código: ${seguro(p.codigo)}</span></span><span class="produto-resultado-acoes"><span class="text-end">${estoqueHtml}<span class="produto-resultado-preco d-block mt-1">${dinheiro(p.preco)}</span></span><span class="produto-resultado-adicionar"><i class="bi bi-plus-circle"></i> Adicionar</span></span>`;
        b.addEventListener('click',()=>adicionar(p));
        resultadoEl.appendChild(b);
      });
   } catch(erro) {
     if(erro.name==='AbortError')return;
     if(sequencia===buscaSequencia)resultadoEl.innerHTML='<div class="small text-danger py-2">Não foi possível buscar os produtos. Tente novamente.</div>';
   }
 }
 buscaInput.addEventListener('input',()=>{clearTimeout(buscaTimer);buscaTimer=setTimeout(buscar,250);});
  document.getElementById('btn-buscar-produto').addEventListener('click',()=>{clearTimeout(buscaTimer);buscar(true);});
  document.getElementById('btn-limpar-busca').addEventListener('click',()=>{buscaInput.value='';clearTimeout(buscaTimer);buscar();buscaInput.focus();});
  buscaInput.addEventListener('keydown',e=>{if(e.key==='Enter'){e.preventDefault();clearTimeout(buscaTimer);buscar(true);}});
 corpo.addEventListener('input',e=>{if(e.target.matches('.qtd-produto')){const p=linhas.get(Number(e.target.dataset.id));if(!p)return;const quantidade=Math.max(1,Math.min(Number(e.target.value)||1,Number(p.estoque)||1));p.quantidade=quantidade;const linha=e.target.closest('tr');linha.querySelector('.subtotal-item').textContent=dinheiro(quantidade*p.preco);if(e.target.value!==''&&Number(e.target.value)!==quantidade)e.target.value=quantidade;atualizarResumo();}});
 corpo.addEventListener('change',e=>{if(e.target.matches('.qtd-produto')&&e.target.value===''){e.target.value=linhas.get(Number(e.target.dataset.id))?.quantidade||1;}});
 corpo.addEventListener('click',e=>{const b=e.target.closest('.remover-produto');if(b){linhas.delete(Number(b.dataset.id));desenhar();}});
 document.getElementById('id_cliente').addEventListener('change',async e=>{
   const alvo=document.getElementById('resumo-cliente');if(!e.target.value){alvo.classList.add('d-none');return;}
   const info=await fetch(summaryUrl.replace('999999',e.target.value)).then(r=>r.json());alvo.classList.remove('d-none');
   let html=`<strong>${seguro(info.nome)}</strong>${info.telefone?` · ${seguro(info.telefone)}`:''}<br>`;
   if(info.ativo){html+=`Limite cadastrado: <strong>${dinheiro(info.limite_total)}</strong> · Saldo devedor: <strong>${dinheiro(info.valor_em_aberto)}</strong> · Limite disponível: <strong>${dinheiro(info.limite_disponivel)}</strong><br><span>Este cliente pode receber as mercadorias em condicional normalmente. Porém, no momento, possui ${dinheiro(info.limite_disponivel)} disponíveis para comprar no crediário.</span>`;}
   else html+='<span>Este cliente não possui limite de crediário ativo. O comportamento atual do crediário será mantido.</span>';
   if(podeEditarCliente)html+=`<br><a href="${info.url_editar}" target="_blank" rel="noopener">Editar limite do cliente</a>`;alvo.innerHTML=html;
 });
 document.getElementById('form-condicional').addEventListener('submit',e=>{if(!linhas.size){e.preventDefault();alert('Adicione ao menos um produto válido.');return;}desenhar();});
 {% if itens_iniciais %}
 JSON.parse('{{ itens_iniciais|escapejs }}').forEach(p=>linhas.set(p.produto_id,p));desenhar();
 {% endif %}
 if(document.getElementById('id_cliente').value)document.getElementById('id_cliente').dispatchEvent(new Event('change'));
})();
</script>
{% endblock %}