<?php /** @var string $title */ ?>
<main class="container">
  <style>
    /* Responsividade para manter organização e evitar sobreposição */
    .table-responsive{ overflow:auto; width:100%; }
    @media (max-width: 1280px){
      .grid.responsive-5{ grid-template-columns: 2fr auto auto !important; }
    }
    @media (max-width: 1024px){
      .grid.responsive-3{ grid-template-columns: 1fr !important; }
      .grid.responsive-2{ grid-template-columns: 1fr !important; }
      .grid.responsive-5{ grid-template-columns: 1fr !important; }
      .card, .box{ margin-bottom:.75rem; }
      .header{ flex-direction: column; align-items: flex-start; gap:.5rem; }
    }
  </style>
  <header class="header">
    <div>
      <h1><?= htmlspecialchars($title ?? 'Novo Orçamento') ?></h1>
      <div style="margin-top:.25rem; font-weight:600;">
        Nº do Orçamento: <span id="orderNumber">N/A</span> · Status: <span id="orderStatusText">Pendente</span>
      </div>
    </div>
    <div style="display:flex;gap:.5rem;align-items:center;">
      <a href="/vendas/orcamentos" class="btn btn-outline">Cancelar</a>
      <button id="btnPreview" class="btn btn-outline">Pré-visualizar</button>
      <button id="btnPrint" class="btn btn-outline">Imprimir</button>
      <a id="linkDetalhes" href="#" class="btn btn-outline" style="display:none;">Ver Detalhes</a>
      <button id="btnEmail" class="btn btn-olive" disabled>Enviar por e-mail</button>
      <button id="btnSave" class="btn">Salvar Orçamento</button>
      
    </div>
  </header>

  <!-- Layout em duas colunas -->
  <div class="grid" style="grid-template-columns: 1fr; gap:1rem; align-items:start;">
    <div>
      <!-- 1. Informações Gerais do Orçamento -->
      <section class="card">
        <h2>Informações Gerais do Orçamento</h2>
        <div class="grid responsive-3" style="grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem;">
          <div>
            <label class="muted">Situação</label>
            <select id="orderStatus">
              <option value="pendente" selected>Pendente</option>
              <option value="aprovado">Aprovado</option>
              <option value="faturado">Faturado</option>
              <option value="cancelado">Cancelado</option>
            </select>
          </div>
          <div>
            <label class="muted">Data de Emissão</label>
            <input id="issueDate" type="date" />
          </div>
          <div>
            <label class="muted">Previsão de Entrega</label>
            <input id="expectedDate" type="date" />
          </div>
          <div>
            <label class="muted">Vendedor Responsável</label>
            <div style="display:flex; gap:.5rem; align-items:center;">
              <input id="sellerSearch" type="text" placeholder="Filtrar vendedor" style="max-width:220px;" />
              <select id="sellerSelect" title="Selecione o vendedor" style="min-width:220px;"></select>
            </div>
            <small class="muted">Use o filtro para buscar e selecione na lista.</small>
          </div>
          <div>
            <label class="muted">Consumidor final</label>
            <div style="display:flex;align-items:center;gap:.5rem;">
              <input id="consumerFinal" type="checkbox" />
              <small class="muted">Marque se o cliente for consumidor final</small>
            </div>
          </div>
        </div>
        <hr style="margin:1rem 0;" />
        <div class="grid responsive-2" style="grid-template-columns: 2fr 1.3fr; gap:.75rem; align-items:start;">
          <div>
            <label class="muted">Cliente</label>
            <div style="display:flex; gap:.5rem;">
              <input id="clientSearch" type="text" placeholder="Nome, e-mail, CNPJ/CPF" />
              <button id="btnClientLookup" class="btn btn-outline">Pesquisar</button>
              <button id="btnNewClient" class="btn btn-olive">Novo Cliente</button>
            </div>
            <small class="muted">Selecione um cliente para prosseguir. Campo obrigatório.</small>
            <div id="clientResults" class="list" style="margin-top:.5rem;"></div>
          </div>
          <div>
            <div class="card">
              <strong>Resumo do Cliente</strong>
              <div id="clientSummary" class="muted">Nenhum cliente selecionado.</div>
              <!-- Histórico removido conforme solicitação -->
            </div>
          </div>
        </div>
      </section>

      <!-- 3. Itens do Orçamento -->
      <section class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <h2>Itens do Orçamento</h2>
          <div style="display:flex; gap:.5rem; align-items:center;">
            <input id="itemsFilter" type="text" placeholder="Filtrar por nome/código" style="max-width:240px;" />
            <select id="itemsSort" title="Ordenar">
              <option value="nome">Nome</option>
              <option value="preco">Preço</option>
              <option value="estoque">Estoque</option>
            </select>
            <button id="btnOpenProductSearch" class="btn btn-olive" title="Pesquisa avançada de produtos">Pesquisa de produtos</button>
          </div>
        </div>
        <div class="grid responsive-5" style="grid-template-columns: 2fr auto auto auto auto; gap:.5rem; align-items:end;">
          <div>
            <label class="muted">Buscar produto por nome/código/código de barras</label>
            <div style="display:flex; gap:.5rem; align-items:center;">
              <input id="productSearch" type="text" placeholder="Ex.: 789..., ABC123, Nome do produto" />
              <button id="btnClearProductSearch" class="btn btn-outline" type="button">Limpar</button>
            </div>
          </div>
          <div>
            <label class="muted">Quantidade</label>
            <input id="itemQty" type="number" min="1" step="1" data-type="quantity" value="1" />
          </div>
          <div>
            <button id="btnAddItem" class="btn btn-olive">Confirmar item</button>
          </div>
          <div>
            <input id="importFile" type="file" accept=".csv,.txt" style="display:none;" />
            <button id="btnImportItems" class="btn btn-outline">Importar planilha</button>
          </div>
          <div>
            <button id="btnTemplateCSV" class="btn btn-outline">Modelo de Planilha</button>
          </div>
        </div>
        <div id="productResults" class="list" style="margin-top:.5rem;"></div>
        <div class="table-responsive">
        <table class="table" style="margin-top:.75rem; min-width:900px;">
          <thead>
            <tr>
              <th>Foto</th>
              <th>Código</th>
              <th>Nome</th>
              <th class="right">Estoque</th>
              <th>Embalagem</th>
              <th class="right">Preço Unit.</th>
              <th class="right">Qtd</th>
              <th class="right">ST (R$)</th>
              <th class="right">IPI (R$)</th>
              <th>Obs.</th>
              <th class="right">Subtotal</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="itemsRows"><tr><td colspan="12" class="muted">Nenhum item</td></tr></tbody>
        </table>
        </div>
        <!-- Observações gerais dos itens removidas conforme solicitação -->
      </section>
    </div>
    <div>
      <!-- 2. Dados Financeiros -->
      <section class="card">
        <h2>Dados Financeiros</h2>
        <div class="grid responsive-3" style="grid-template-columns: 1fr 1fr 1fr; gap:.5rem; align-items:end;">
          <div>
            <label class="muted">Tabela de Preço</label>
            <select id="priceTable">
              <option value="padrao">Padrão</option>
              <option value="atacado">Atacado</option>
              <option value="varejo">Varejo</option>
            </select>
          </div>
          <div>
            <label class="muted">Desconto (%)</label>
            <input id="discountGlobal" type="number" min="0" max="100" step="0.01" value="0" />
          </div>
          <div>
            <label class="muted">Acréscimo (%)</label>
            <input id="markupGlobal" type="number" min="0" max="100" step="0.01" value="0" />
          </div>
        </div>
        <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem; align-items:end;">
          <div>
            <label class="muted">Condição de pagamento</label>
            <input id="payCondition" type="text" placeholder="Ex.: 10/20/30 | 0,00%" />
          </div>
          <div>
            <label class="muted">Forma de pagamento</label>
            <select id="payMethod">
              <option value="avista">À vista</option>
              <option value="parcelado">Parcelado</option>
              <option value="cartao">Cartão</option>
              <option value="pix">PIX</option>
              <option value="boleto">Boleto</option>
              <option value="transferencia">Transferência</option>
            </select>
          </div>
        </div>
        <div id="payFields" style="margin-top:.5rem;"></div>
        <div id="installmentsBox" class="card" style="margin-top:.75rem; display:none;">
          <strong>Parcelas</strong>
          <div class="table-responsive">
            <table class="table">
              <thead><tr><th>#</th><th>Vencimento</th><th class="right">Valor</th></tr></thead>
              <tbody></tbody>
            </table>
          </div>
          <small class="muted">Geradas automaticamente pela condição de pagamento e data de emissão.</small>
        </div>
        <div class="card" style="margin-top:.75rem;">
          <strong>Total do orçamento</strong>
          <div id="totalsBox" style="font-size:1.1rem; font-weight:600;">Subtotal: R$ 0,00 · Impostos: R$ 0,00 · Frete: R$ 0,00 · Total: R$ 0,00</div>
        </div>
      </section>

      <div class="grid" style="grid-template-columns: 1fr 1fr; gap:1rem; align-items:start;">
      <!-- 4. Dados de Logística/Transporte -->
      <section class="card">
        <h2>Logística/Transporte</h2>
        <div class="form-group">
          <label class="muted">Transportadora</label>
          <div style="display:flex; gap:.5rem; align-items:center;">
            <select id="carrierSelect" style="flex:1; min-width:220px;"></select>
            <button id="newCarrierBtn" type="button" class="btn btn-secondary">Nova</button>
          </div>
          <small class="muted">Lista as transportadoras cadastradas. Cadastre uma nova se necessário.</small>
        </div>
        <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem;">
          <div>
            <label class="muted">Modalidade de Frete</label>
            <select id="freteMode">
              <option value="cif">CIF</option>
              <option value="fob">FOB</option>
            </select>
          </div>
          <div>
            <label class="muted">Frete (R$)</label>
            <input id="freteValue" type="number" min="0" step="0.01" value="0" />
            <div style="margin-top:.25rem; display:flex; align-items:center; gap:.5rem;">
              <input id="freteSomar" type="checkbox" checked />
              <small class="muted">Somar ao total do orçamento</small>
            </div>
          </div>
        </div>
        <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem; margin-top:.5rem;">
          <div>
            <label class="muted">Peso Bruto (kg)</label>
            <input id="pesoBruto" type="number" min="0" step="0.001" value="0" />
          </div>
          <div>
            <label class="muted">Peso Líquido (kg)</label>
            <input id="pesoLiquido" type="number" min="0" step="0.001" value="0" />
          </div>
        </div>
        <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem; margin-top:.5rem;">
          <div>
            <label class="muted">Quantidade de volumes</label>
            <input id="volumesQtd" type="number" min="0" step="1" value="0" />
          </div>
          <div>
            <label class="muted">Detalhes dos volumes</label>
            <input id="volumesDetalhes" type="text" placeholder="Espécie, marca, numeração" />
          </div>
        </div>
        <div style="margin-top:.5rem;">
          <label class="muted">Entrega</label>
          <select id="deliveryOption">
            <option value="retirada">Retirada</option>
            <option value="entrega">Entrega</option>
          </select>
          <div class="grid" style="grid-template-columns: repeat(2, minmax(0,1fr)); gap:.5rem; margin-top:.5rem;">
            <div>
              <label class="muted">Data</label>
              <input id="deliveryDate" type="date" />
            </div>
            <div>
              <label class="muted">Horário</label>
<input id="deliveryTime" type="time" step="60" pattern="^[0-1][0-9]:[0-5][0-9]|2[0-3]:[0-5][0-9]$" />
            </div>
          </div>
          <div id="deliveryAddrBox" style="margin-top:.5rem;">
            <label class="muted">Endereço de entrega</label>
            <input id="deliveryAddress" type="text" placeholder="Rua, número, bairro, cidade" />
          </div>
          <div style="margin-top:.5rem;">
            <label class="muted">Observações</label>
            <div class="form-group">
              <textarea id="deliveryNotes" rows="3" placeholder="Instruções de entrega/retirada"></textarea>
            </div>
          </div>
        </div>
      </section>

      <!-- 5. Observações -->
      <section class="card">
        <h2>Observações</h2>
        <div class="form-group">
          <label class="muted">Para o cliente</label>
          <textarea id="obsCliente" rows="4" placeholder="Mensagem que o cliente verá"></textarea>
          <p class="muted" style="margin-top:.25rem;">Estas observações entram na cópia impressa e no e-mail.</p>
        </div>
        <div class="form-group">
          <label class="muted">Para o representante</label>
          <textarea id="obsRepresentante" rows="4" placeholder="Instruções internas"></textarea>
          <p class="muted" style="margin-top:.25rem;">Uso interno. Não aparece para o cliente.</p>
        </div>
      </section>
      </div>
    </div>
  </div>

  <dialog id="previewDialog">
    <form method="dialog">
      <h3>Pré-visualização</h3>
      <div id="previewContent" style="max-height:55vh; overflow:auto;"></div>
      <div style="margin-top:.75rem; display:flex; justify-content:flex-end; gap:.5rem;">
        <button class="btn btn-outline">Fechar</button>
        <button type="button" class="btn btn-outline" onclick="safePrint(1)">Imprimir</button>
      </div>
    </form>
  </dialog>

  <dialog id="emailDialog">
    <form method="dialog" id="emailForm" style="min-width:460px;">
      <h3>Enviar Orçamento por E-mail</h3>
      <div class="form-group">
        <label class="muted">Para</label>
        <input id="emailTo" type="email" placeholder="cliente@exemplo.com" />
        <p class="muted" style="margin-top:.25rem;">Pré-preenchido com o e-mail do cliente selecionado.</p>
      </div>
      <div style="display:flex;justify-content:flex-end;gap:.5rem;">
        <button id="btnEmailSend" type="button" class="btn btn-olive">Enviar</button>
        <button type="submit" class="btn btn-outline">Cancelar</button>
      </div>
    </form>
  </dialog>

  <dialog id="productSearchDialog">
    <form method="dialog" style="min-width:720px;">
      <h3>Pesquisa de Produtos</h3>
      <div style="display:flex;gap:0.5rem;align-items:end;flex-wrap:wrap;">
        <div style="flex:1;min-width:280px;">
          <label class="muted">Termo</label>
          <input id="psdInput" type="text" placeholder="Nome, código, EAN" />
        </div>
        <div>
          <label class="muted">Qtd padrão</label>
          <input id="psdQty" type="number" min="1" value="1" />
        </div>
        <button id="psdSearchBtn" type="button" class="btn btn-olive">Buscar</button>
        <button type="submit" class="btn btn-outline">Fechar</button>
      </div>
      <div id="psdResults" style="margin-top:.75rem; max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:0.5rem;"></div>
    </form>
  </dialog>

  <dialog id="clientNewDialog">
    <form method="dialog" id="clientNewForm" style="min-width:900px;">
      <h3>Novo Cliente</h3>
      <div id="clientNewAlert" class="alert" style="display:none;"></div>
      <div class="grid" style="grid-template-columns: repeat(12, 1fr); gap:.5rem;">
        <div class="form-group" style="grid-column: span 6;">
          <label class="muted">Nome Fantasia *</label>
          <input id="new_nome_fantasia" type="text" required placeholder="Digite o nome fantasia" />
        </div>
        <div class="form-group" style="grid-column: span 6;">
          <label class="muted">Razão Social *</label>
          <input id="new_razao_social" type="text" required placeholder="Digite a razão social" />
        </div>
        <div class="form-group" style="grid-column: span 4;">
          <label class="muted">CNPJ *</label>
          <div style="display:flex; align-items:center; gap:6px;">
            <input type="text" id="new_cnpj" maxlength="18" required placeholder="00.000.000/0000-00" />
            <button type="button" id="new_cnpjLookupBtn" class="btn btn-secondary">Consultar CNPJ</button>
          </div>
        </div>
        <div class="form-group" style="grid-column: span 4;">
          <label class="muted">Inscrição Estadual *</label>
          <input type="text" id="new_ie" required placeholder="Informe a IE" />
        </div>
        <div class="form-group" style="grid-column: span 4;">
          <label class="muted">Inscrição Municipal</label>
          <input type="text" id="new_im" placeholder="Opcional" />
        </div>
      </div>

      <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem; margin-top:.5rem;">
        <div class="form-group">
          <label class="muted">Telefone Fixo</label>
          <input type="text" id="new_telefone_fixo" placeholder="(00) 0000-0000" />
        </div>
        <div class="form-group">
          <label class="muted">Telefone Celular</label>
          <input type="text" id="new_telefone_celular" placeholder="(00) 00000-0000" />
        </div>
      </div>

      <div class="grid" style="grid-template-columns: repeat(12, 1fr); gap:.5rem; margin-top:.5rem;">
        <div class="form-group" style="grid-column: span 4;">
          <label class="muted">E-mail</label>
          <input type="email" id="new_email" placeholder="email@cliente.com" />
        </div>
        <div class="form-group" style="grid-column: span 4;">
          <label class="muted">Contato</label>
          <input type="text" id="new_contato_nome" placeholder="Nome do contato" />
        </div>
        <div class="form-group" style="grid-column: span 4;">
          <label class="muted">Site</label>
          <input type="url" id="new_site_url" placeholder="https://www.site.com" />
        </div>
        <div class="form-group" style="grid-column: span 12;">
          <label class="muted">Observações</label>
          <textarea id="new_observacoes" rows="3" placeholder="Notas gerais sobre o cliente"></textarea>
        </div>
      </div>

      <div class="grid" style="grid-template-columns: repeat(12, 1fr); gap:.5rem; margin-top:.5rem; align-items:end;">
        <div class="form-group" style="grid-column: span 2; display:flex; align-items:center; gap:.5rem;">
          <input type="checkbox" id="new_bloqueado" />
          <label class="muted" for="new_bloqueado">Bloquear</label>
        </div>
        <div class="form-group" style="grid-column: span 2; display:flex; align-items:center; gap:.5rem;">
          <input type="checkbox" id="new_inativo" />
          <label class="muted" for="new_inativo">Inativar</label>
        </div>
        <div class="form-group" style="grid-column: span 8;">
          <label class="muted">Motivo</label>
          <input type="text" id="new_status_motivo" placeholder="Informe o motivo (obrigatório ao bloquear/inativar)" />
        </div>
      </div>

      <div style="margin-top:.75rem;">
        <strong>Endereço Principal</strong>
        <div class="grid" style="grid-template-columns: repeat(12, 1fr); gap:.5rem; margin-top:.5rem;">
          <div class="form-group" style="grid-column: span 2;">
            <label class="muted">CEP *</label>
            <input type="text" id="new_cep" maxlength="9" required placeholder="00000-000" />
          </div>
          <div class="form-group" style="grid-column: span 1; display:flex; align-items:flex-end;">
            <button type="button" id="new_cepLookupBtn" class="btn btn-secondary" style="width:100%;">Buscar CEP</button>
          </div>
          <div class="form-group" style="grid-column: span 9;">
            <label class="muted">Logradouro *</label>
            <input type="text" id="new_logradouro" required />
          </div>
          <div class="form-group" style="grid-column: span 3;">
            <label class="muted">Número *</label>
            <input type="text" id="new_numero" required />
          </div>
          <div class="form-group" style="grid-column: span 9;">
            <label class="muted">Complemento</label>
            <input type="text" id="new_complemento" />
          </div>
          <div class="form-group" style="grid-column: span 6;">
            <label class="muted">Bairro *</label>
            <input type="text" id="new_bairro" required />
          </div>
          <div class="form-group" style="grid-column: span 4;">
            <label class="muted">Cidade *</label>
            <input type="text" id="new_cidade" required />
          </div>
          <div class="form-group" style="grid-column: span 2;">
            <label class="muted">Estado *</label>
            <input type="text" id="new_estado" maxlength="2" required placeholder="UF" />
          </div>
        </div>
      </div>

      <div style="margin-top:.75rem;">
        <strong>Endereços alternativos</strong>
        <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem; align-items:center;">
          <div class="form-group" style="display:flex; align-items:center; gap:.5rem;">
            <input type="checkbox" id="new_billing_enabled" />
            <label class="muted" for="new_billing_enabled">Cobrança diferente</label>
          </div>
          <div class="form-group" style="display:flex; align-items:center; gap:.5rem;">
            <input type="checkbox" id="new_shipping_enabled" />
            <label class="muted" for="new_shipping_enabled">Entrega diferente</label>
          </div>
        </div>
        <div id="new_billing_section" style="display:none; margin-top:.5rem;">
          <div class="grid" style="grid-template-columns: repeat(12, 1fr); gap:.5rem;">
            <div class="form-group" style="grid-column: span 2;">
              <label class="muted">CEP *</label>
              <input type="text" id="new_billing_cep" maxlength="9" placeholder="00000-000" />
            </div>
            <div class="form-group" style="grid-column: span 1; display:flex; align-items:flex-end;">
              <button type="button" id="new_billingCepLookupBtn" class="btn btn-secondary" style="width:100%;">Buscar CEP</button>
            </div>
            <div class="form-group" style="grid-column: span 9;">
              <label class="muted">Logradouro *</label>
              <input type="text" id="new_billing_logradouro" />
            </div>
            <div class="form-group" style="grid-column: span 3;">
              <label class="muted">Número *</label>
              <input type="text" id="new_billing_numero" />
            </div>
            <div class="form-group" style="grid-column: span 9;">
              <label class="muted">Complemento</label>
              <input type="text" id="new_billing_complemento" />
            </div>
            <div class="form-group" style="grid-column: span 6;">
              <label class="muted">Bairro *</label>
              <input type="text" id="new_billing_bairro" />
            </div>
            <div class="form-group" style="grid-column: span 4;">
              <label class="muted">Cidade *</label>
              <input type="text" id="new_billing_cidade" />
            </div>
            <div class="form-group" style="grid-column: span 2;">
              <label class="muted">Estado *</label>
              <input type="text" id="new_billing_estado" maxlength="2" placeholder="UF" />
            </div>
          </div>
        </div>
        <div id="new_shipping_section" style="display:none; margin-top:.5rem;">
          <div class="grid" style="grid-template-columns: repeat(12, 1fr); gap:.5rem;">
            <div class="form-group" style="grid-column: span 2;">
              <label class="muted">CEP *</label>
              <input type="text" id="new_shipping_cep" maxlength="9" placeholder="00000-000" />
            </div>
            <div class="form-group" style="grid-column: span 1; display:flex; align-items:flex-end;">
              <button type="button" id="new_shippingCepLookupBtn" class="btn btn-secondary" style="width:100%;">Buscar CEP</button>
            </div>
            <div class="form-group" style="grid-column: span 9;">
              <label class="muted">Logradouro *</label>
              <input type="text" id="new_shipping_logradouro" />
            </div>
            <div class="form-group" style="grid-column: span 3;">
              <label class="muted">Número *</label>
              <input type="text" id="new_shipping_numero" />
            </div>
            <div class="form-group" style="grid-column: span 9;">
              <label class="muted">Complemento</label>
              <input type="text" id="new_shipping_complemento" />
            </div>
            <div class="form-group" style="grid-column: span 6;">
              <label class="muted">Bairro *</label>
              <input type="text" id="new_shipping_bairro" />
            </div>
            <div class="form-group" style="grid-column: span 4;">
              <label class="muted">Cidade *</label>
              <input type="text" id="new_shipping_cidade" />
            </div>
            <div class="form-group" style="grid-column: span 2;">
              <label class="muted">Estado *</label>
              <input type="text" id="new_shipping_estado" maxlength="2" placeholder="UF" />
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top:1rem; display:flex; justify-content:flex-end; gap:.5rem;">
        <button type="button" class="btn btn-outline" onclick="document.getElementById('clientNewDialog').close()">Cancelar</button>
        <button type="submit" class="btn btn-olive">Salvar</button>
      </div>
    </form>
  </dialog>
  <dialog id="carrierNewDialog">
    <form method="dialog" id="carrierNewForm" style="min-width:520px;">
      <h3>Nova Transportadora</h3>
      <div id="carrierNewAlert" class="alert" style="display:none;"></div>
      <div class="grid" style="grid-template-columns: 1fr 1fr; gap:.5rem;">
        <div class="form-group" style="grid-column: span 2;">
          <label class="muted">Nome / Razão Social *</label>
          <input id="carrier_nome" type="text" required placeholder="Informe o nome" />
        </div>
        <div class="form-group">
          <label class="muted">CNPJ</label>
          <input id="carrier_cnpj" type="text" maxlength="18" placeholder="00.000.000/0000-00" />
        </div>
        <div class="form-group">
          <label class="muted">E-mail</label>
          <input id="carrier_email" type="email" placeholder="email@transportadora.com" />
        </div>
        <div class="form-group">
          <label class="muted">Telefone</label>
          <input id="carrier_telefone" type="text" placeholder="(00) 0000-0000" />
        </div>
      </div>
      <div style="display:flex; justify-content:flex-end; gap:.5rem; margin-top:.75rem;">
        <button type="submit" class="btn btn-olive">Salvar</button>
        <button class="btn btn-outline">Cancelar</button>
      </div>
    </form>
  </dialog>
</main>

<script>
// Helper simples para selecionar elementos por id
const $ = (id) => document.getElementById(id);
// Utilitários
function fmtBRL(n){ return (Number(n)||0).toLocaleString('pt-BR', { style:'currency', currency:'BRL' }); }
function showMsg(msg, type='info'){ if(window.showAlert) return showAlert(msg, type); alert(msg); }
function pad5(n){ return String(n).padStart(5, '0'); }
function formatDateBR(date){
  const d = new Date(date);
  const dd = String(d.getDate()).padStart(2,'0');
  const mm = String(d.getMonth()+1).padStart(2,'0');
  const yyyy = d.getFullYear();
  return `${dd}/${mm}/${yyyy}`;
}
function addDays(dateStr, days){ if(!dateStr) return null; const d = new Date(dateStr); d.setDate(d.getDate()+Number(days||0)); return formatDateBR(d); }

// Estado
let selectedClient = null;
let selectedClientEmail = '';
let items = [];
let createdQuoteId = null;
let includeFrete = true;
let quoteNumber = null;
let isDirty = false;
function markDirty(){ isDirty = true; }

// API helper: usa apiRequest do layout
const api = {
  clients: (q, per=5) => `/api/clientes?q=${encodeURIComponent(q)}&per_page=${per}`,
  clientById: (id) => `/api/clientes/${id}`,
  products: (q, per=10) => `/api/produtos?q=${encodeURIComponent(q)}&per_page=${per}`,
  quoteCreate: '/api/vendas/orcamentos',
  quoteUpdate: (id) => `/api/vendas/orcamentos/${id}`,
  quoteGet: (id) => `/api/vendas/orcamentos/${id}`,
  quoteEmail: (id) => `/api/vendas/orcamentos/${id}/email`,
  ordersByClient: (cid) => `/api/vendas/pedidos?cliente_id=${cid}`,
  salesFilters: '/api/sales/filters'
};

// Numeração agora é gerada no servidor (OR-000000000). Mantém 'N/A' até salvar ou carregar para edição.
quoteNumber = null;

// Proteção contra perda de dados ao sair
window.addEventListener('beforeunload', function(e){
  if(!isDirty) return;
  e.preventDefault();
  e.returnValue = '';
});
// Confirmação em cliques de links que trocam de página
document.addEventListener('click', function(e){
  const linkEl = e.target.closest('a[href], [data-href], [data-url]');
  if(!linkEl) return;
  const href = linkEl.getAttribute('href') || linkEl.getAttribute('data-href') || linkEl.getAttribute('data-url') || '';
  if(!href || href.startsWith('#')) return;
  if(isDirty){
    e.preventDefault();
    const ok = confirm('Você tem alterações não salvas. Deseja sair e perder a digitação?');
    if(ok){
      isDirty = false;
      try { window.location.assign(href); } catch(_) { window.location.href = href; }
    }
  }
});
// Marca como alterado em mudanças de campos
document.addEventListener('input', (e)=>{ if(e.target.matches('input,textarea')) markDirty(); });
document.addEventListener('change', (e)=>{ if(e.target.matches('select,input[type="checkbox"],input[type="radio"],input[type="date"],input[type="number"]')) markDirty(); });

// Cliente: busca e seleção
document.getElementById('btnClientLookup').addEventListener('click', async () => {
  const q = document.getElementById('clientSearch').value.trim();
  if(!q){ showMsg('Informe um termo para buscar clientes', 'warning'); return; }
  const res = await apiRequest(api.clients(q)); const js = await res.json(); const list = (js.data||[]);
  const html = list.map(c => `<div class="list-item" style="display:flex;justify-content:space-between;align-items:center;gap:.5rem;">
    <div><strong>${c.nome||c.razao_social||'-'}</strong><div class="muted">${c.email||''} · ${c.cnpj||c.cpf||''}</div></div>
    <button class="btn btn-olive" onclick="selectClient(${c.id})">Selecionar</button></div>`).join('');
  document.getElementById('clientResults').innerHTML = html || '<div class="muted">Nenhum cliente encontrado</div>';
});

let clientSearchDebounce;
document.getElementById('clientSearch').addEventListener('input', () => {
  const q = document.getElementById('clientSearch').value.trim();
  clearTimeout(clientSearchDebounce);
  clientSearchDebounce = setTimeout(async () => {
    if(q.length < 3){ document.getElementById('clientResults').innerHTML = ''; return; }
    try {
      const res = await apiRequest(api.clients(q, 8));
      const js = await res.json();
      const list = js.data || [];
      const html = list.map(c => `<div class="list-item" style="display:flex;justify-content:space-between;align-items:center;gap:.5rem;">
        <div><strong>${c.nome||c.razao_social||'-'}</strong><div class="muted">${c.email||''} · ${c.cnpj||c.cpf||''}</div></div>
        <button class="btn btn-olive" onclick="selectClient(${c.id})">Selecionar</button></div>`).join('');
      document.getElementById('clientResults').innerHTML = html || '<div class="muted">Nenhum cliente encontrado</div>';
    } catch(e){ document.getElementById('clientResults').innerHTML = '<div class="muted">Erro na busca</div>'; }
  }, 300);
});

window.selectClient = async function(id){
  const res = await apiRequest(api.clientById(id)); const js = await res.json(); const c = js.data||{}; selectedClient = c; selectedClientEmail = c.email||'';
  const nomeFantasia = c.nome_fantasia || '';
  const razaoSocial = c.razao_social || c.nome || '';
  const cnpj = c.cnpj || c.cpf || '';
  const ie = c.ie || '';
  const telFixo = c.telefone_fixo || '';
  const telCel = c.telefone_celular || '';
  const telGeral = c.telefone || '';
  const telefones = [telGeral, telFixo, telCel].filter(Boolean).join(' / ');
  const addrParts = [c.endereco||c.logradouro||c.principal_logradouro, c.numero||c.principal_numero, c.bairro||c.principal_bairro, c.cidade||c.principal_cidade, c.uf||c.estado||c.principal_estado, c.cep||c.principal_cep].filter(Boolean);
  const enderecoCompleto = addrParts.join(', ');
  const email = c.email || '';
  const html = `
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:.5rem;">
      <div>
        <div class='muted'>Razão Social</div>
        <div><strong>${razaoSocial||'-'}</strong></div>
      </div>
      <div>
        <div class='muted'>Nome Fantasia</div>
        <div>${nomeFantasia||'-'}</div>
      </div>
      <div>
        <div class='muted'>CNPJ/CPF</div>
        <div>${cnpj||'-'}</div>
      </div>
      <div>
        <div class='muted'>Inscrição Estadual</div>
        <div>${ie||'-'}</div>
      </div>
      <div>
        <div class='muted'>Telefone</div>
        <div>${telefones||'-'}</div>
      </div>
      <div>
        <div class='muted'>E-mail</div>
        <div>${email||'-'}</div>
      </div>
      <div style="grid-column: span 2;">
        <div class='muted'>Endereço</div>
        <div>${enderecoCompleto||'-'}</div>
      </div>
    </div>`;
  document.getElementById('clientSummary').innerHTML = html;
  validateAll();
};

document.getElementById('btnNewClient').addEventListener('click', () => {
  document.getElementById('clientNewDialog').showModal();
});

// Novo cliente: listeners auxiliares
function setAlert(msg, type='warning'){ const box = document.getElementById('clientNewAlert'); if(!box) return; box.textContent = msg; box.className = 'alert ' + (type === 'success' ? 'alert-success' : type === 'error' ? 'alert-error' : ''); box.style.display = msg ? 'block' : 'none'; }
document.getElementById('new_billing_enabled')?.addEventListener('change', (e)=>{ document.getElementById('new_billing_section').style.display = e.target.checked ? 'block' : 'none'; });
document.getElementById('new_shipping_enabled')?.addEventListener('change', (e)=>{ document.getElementById('new_shipping_section').style.display = e.target.checked ? 'block' : 'none'; });
document.getElementById('new_cepLookupBtn')?.addEventListener('click', async ()=>{
  const cep = (document.getElementById('new_cep').value||'').replace(/\D+/g,''); if(cep.length !== 8){ setAlert('CEP inválido (8 dígitos)', 'warning'); return; }
  try{ const res = await apiRequest(`/api/clientes/cep/${cep}`); const js = await res.json(); const d = js.data||{}; document.getElementById('new_logradouro').value = d.logradouro||''; document.getElementById('new_bairro').value = d.bairro||''; document.getElementById('new_cidade').value = d.localidade||d.cidade||''; document.getElementById('new_estado').value = (d.uf||d.estado||'').toUpperCase(); setAlert('CEP localizado', 'success'); }catch(_){ setAlert('Falha ao consultar CEP', 'error'); }
});
document.getElementById('new_billingCepLookupBtn')?.addEventListener('click', async ()=>{
  const cep = (document.getElementById('new_billing_cep').value||'').replace(/\D+/g,''); if(cep.length !== 8){ setAlert('CEP de cobrança inválido', 'warning'); return; }
  try{ const res = await apiRequest(`/api/clientes/cep/${cep}`); const js = await res.json(); const d = js.data||{}; $('new_billing_logradouro').value = d.logradouro||''; $('new_billing_bairro').value = d.bairro||''; $('new_billing_cidade').value = d.localidade||d.cidade||''; $('new_billing_estado').value = (d.uf||d.estado||'').toUpperCase(); setAlert('CEP de cobrança localizado', 'success'); }catch(_){ setAlert('Falha ao consultar CEP de cobrança', 'error'); }
});
document.getElementById('new_shippingCepLookupBtn')?.addEventListener('click', async ()=>{
  const cep = (document.getElementById('new_shipping_cep').value||'').replace(/\D+/g,''); if(cep.length !== 8){ setAlert('CEP de entrega inválido', 'warning'); return; }
  try{ const res = await apiRequest(`/api/clientes/cep/${cep}`); const js = await res.json(); const d = js.data||{}; $('new_shipping_logradouro').value = d.logradouro||''; $('new_shipping_bairro').value = d.bairro||''; $('new_shipping_cidade').value = d.localidade||d.cidade||''; $('new_shipping_estado').value = (d.uf||d.estado||'').toUpperCase(); setAlert('CEP de entrega localizado', 'success'); }catch(_){ setAlert('Falha ao consultar CEP de entrega', 'error'); }
});
document.getElementById('new_cnpjLookupBtn')?.addEventListener('click', async ()=>{
  const raw = (document.getElementById('new_cnpj').value||'').replace(/\D+/g,''); if(raw.length !== 14){ setAlert('CNPJ inválido (14 dígitos)', 'warning'); return; }
  try{
    const res = await apiRequest(`/api/clientes/cnpj/${raw}`);
    const js = await res.json();
    const d = js.data||{};
    function normalizePhone(s){ const digits = String(s||'').replace(/\D+/g,''); if(!digits) return ''; if(digits.length===10){ return `(${digits.slice(0,2)}) ${digits.slice(2,6)}-${digits.slice(6)}`; } if(digits.length===11){ return `(${digits.slice(0,2)}) ${digits.slice(2,7)}-${digits.slice(7)}`; } return s||''; }
    function pickEmailFromCNPJ(x){ return x.email || (Array.isArray(x.emails)? x.emails[0] : '') || (x.estabelecimento?.email||''); }
    function pickPhoneFromCNPJ(x){ const t = x.telefone || (Array.isArray(x.telefones)? x.telefones[0] : '') || (x.estabelecimento?.telefone||''); return normalizePhone(t); }
    function hasPrefix(logr){ return /^(Rua|Avenida|Av\.|Travessa|Alameda|Rodovia|Estrada|R\.)\b/i.test(String(logr||'')); }
    // Identificação
    if(d.razao_social) $('new_razao_social').value = d.razao_social;
    if(d.nome_fantasia) $('new_nome_fantasia').value = d.nome_fantasia;
    // Contatos
    const phone = pickPhoneFromCNPJ(d); if(phone) $('new_telefone_fixo').value = phone;
    const email = pickEmailFromCNPJ(d); if(email) $('new_email').value = email;
    // Endereço principal
    const e = d.endereco||{};
    if(e.cep){ $('new_cep').value = String(e.cep).replace(/\D+/g,'').replace(/(\d{5})(\d{3})/,'$1-$2'); }
    if(e.logradouro){
      const tipo = e.tipo_logradouro || d.tipo_logradouro || '';
      const base = String(e.logradouro||'');
      const valor = tipo && !base.toLowerCase().startsWith(tipo.toLowerCase()) ? `${tipo} ${base}` : base;
      $('new_logradouro').value = valor;
    }
    if(e.numero){ $('new_numero').value = String(e.numero); }
    if(e.complemento){ $('new_complemento').value = e.complemento; }
    if(e.bairro){ $('new_bairro').value = e.bairro; }
    if(e.municipio){ $('new_cidade').value = e.municipio; }
    if(e.uf){ $('new_estado').value = String(e.uf).toUpperCase(); }
    // Se CEP veio mas faltam logradouro/bairro/cidade/estado, tenta completar via serviço de CEP
    const hasCep = !!(e.cep);
    const missingAddr = !e.logradouro || !e.bairro || !e.municipio || !e.uf;
    if(hasCep && missingAddr){
      try{
        const cepRaw = String(e.cep).replace(/\D+/g,'');
        const resCep = await apiRequest(`/api/clientes/cep/${cepRaw}`);
        const jsCep = await resCep.json();
        const c = jsCep.data||{};
        // Usa o logradouro do CEP se o atual não possui prefixo
        const atual = $('new_logradouro').value||'';
        $('new_logradouro').value = (!hasPrefix(atual) ? (c.logradouro||atual) : atual);
        $('new_bairro').value = $('new_bairro').value || c.bairro || '';
        $('new_cidade').value = $('new_cidade').value || c.localidade || c.cidade || '';
        $('new_estado').value = ($('new_estado').value || c.uf || c.estado || '').toUpperCase();
      }catch(err){ /* ignora falha no CEP */ }
    }
    setAlert('Dados do CNPJ preenchidos', 'success');
  }catch(_){ setAlert('Falha na consulta de CNPJ', 'error'); }
});

document.getElementById('clientNewForm').addEventListener('submit', async (e) => {
  e.preventDefault(); setAlert('');
  const nomeFantasia = $('new_nome_fantasia').value.trim();
  const razaoSocial = $('new_razao_social').value.trim();
  const docRaw = $('new_cnpj').value.trim();
  const ie = $('new_ie').value.trim();
  const im = $('new_im').value.trim();
  const telFixo = $('new_telefone_fixo').value.trim();
  const telCel = $('new_telefone_celular').value.trim();
  const email = $('new_email').value.trim();
  const contato = $('new_contato_nome').value.trim();
  const siteUrl = $('new_site_url').value.trim();
  const observacoes = $('new_observacoes').value.trim();
  const bloqueado = $('new_bloqueado').checked;
  const inativo = $('new_inativo').checked;
  const statusMotivo = $('new_status_motivo').value.trim();
  const cep = $('new_cep').value.trim();
  const logradouro = $('new_logradouro').value.trim();
  const numero = $('new_numero').value.trim();
  const complemento = $('new_complemento').value.trim();
  const bairro = $('new_bairro').value.trim();
  const cidade = $('new_cidade').value.trim();
  const estado = ($('new_estado').value||'').trim().toUpperCase();

  // Validações obrigatórias
  if(!nomeFantasia){ setAlert('Nome Fantasia é obrigatório'); return; }
  if(!razaoSocial){ setAlert('Razão Social é obrigatória'); return; }
  const onlyDigits = docRaw.replace(/\D+/g,'');
  if(!(onlyDigits.length === 11 || onlyDigits.length === 14)){ setAlert('Informe CPF (11) ou CNPJ (14)'); return; }
  if(!ie){ setAlert('Inscrição Estadual é obrigatória'); return; }
  if(bloqueado || inativo){ if(!statusMotivo){ setAlert('Informe o motivo para bloqueio/inativação'); return; } }
  if(!cep || !logradouro || !numero || !bairro || !cidade || !estado){ setAlert('Endereço principal incompleto'); return; }

  const tipo = (onlyDigits.length === 11) ? 'PF' : 'PJ';
  const fd = new FormData();
  fd.set('tipo', tipo);
  fd.set('nome_fantasia', nomeFantasia);
  fd.set('razao_social', razaoSocial);
  if(tipo === 'PF') fd.set('cpf', onlyDigits); else fd.set('cnpj', onlyDigits);
  fd.set('ie', ie);
  if(im) fd.set('im', im);
  if(telFixo) fd.set('telefone_fixo', telFixo);
  if(telCel) fd.set('telefone_celular', telCel);
  if(email) fd.set('email', email);
  if(contato) fd.set('contato_nome', contato);
  if(siteUrl) fd.set('site_url', siteUrl);
  if(observacoes) fd.set('observacoes', observacoes);
  fd.set('bloqueado', String(bloqueado));
  fd.set('inativo', String(inativo));
  if(statusMotivo) fd.set('status_motivo', statusMotivo);
  // Endereço principal
  fd.set('cep', cep);
  fd.set('logradouro', logradouro);
  fd.set('numero', numero);
  if(complemento) fd.set('complemento', complemento);
  fd.set('bairro', bairro);
  fd.set('cidade', cidade);
  fd.set('estado', estado);

  // Cobrança
  const billEnabled = $('new_billing_enabled').checked;
  fd.set('billing_enabled', String(billEnabled));
  if(billEnabled){
    fd.set('billing_cep', ($('new_billing_cep').value||'').trim());
    fd.set('billing_logradouro', ($('new_billing_logradouro').value||'').trim());
    fd.set('billing_numero', ($('new_billing_numero').value||'').trim());
    fd.set('billing_complemento', ($('new_billing_complemento').value||'').trim());
    fd.set('billing_bairro', ($('new_billing_bairro').value||'').trim());
    fd.set('billing_cidade', ($('new_billing_cidade').value||'').trim());
    fd.set('billing_estado', (($('new_billing_estado').value||'').trim().toUpperCase()));
  }

  // Entrega
  const shipEnabled = $('new_shipping_enabled').checked;
  fd.set('shipping_enabled', String(shipEnabled));
  if(shipEnabled){
    fd.set('shipping_cep', ($('new_shipping_cep').value||'').trim());
    fd.set('shipping_logradouro', ($('new_shipping_logradouro').value||'').trim());
    fd.set('shipping_numero', ($('new_shipping_numero').value||'').trim());
    fd.set('shipping_complemento', ($('new_shipping_complemento').value||'').trim());
    fd.set('shipping_bairro', ($('new_shipping_bairro').value||'').trim());
    fd.set('shipping_cidade', ($('new_shipping_cidade').value||'').trim());
    fd.set('shipping_estado', (($('new_shipping_estado').value||'').trim().toUpperCase()));
  }

  try {
    const res = await apiRequest('/api/clientes', { method:'POST', body: fd });
    const js = await res.json().catch(()=>({}));
    if(!res.ok){ setAlert(js.error?.message || 'Falha ao criar cliente', 'error'); return; }
    const id = js.id || (js.data||{}).id;
    if(!id){ setAlert('Cliente criado, mas ID não retornado', 'warning'); }
    document.getElementById('clientNewDialog').close();
    setAlert('');
    if(id){ await selectClient(id); document.getElementById('clientSearch').value = selectedClient?.nome || selectedClient?.razao_social || ''; document.getElementById('clientResults').innerHTML = ''; showMsg('Cliente criado e selecionado', 'success'); }
  } catch(e){ setAlert('Erro ao criar cliente', 'error'); }
});

async function loadClientHistory(cid){
  const box = document.getElementById('clientHistory');
  if(!box) return;
  try{ const res = await apiRequest(api.ordersByClient(cid)); const js = await res.json(); const rows = (js.data||[]).slice(0,5);
    const html = rows.map(r => `<div class='muted'>#${r.id||r.numero} · ${fmtBRL((r.valor_total||0))} · ${r.status||''}</div>`).join('');
    box.innerHTML = html || '<div class="muted">Sem histórico recente</div>';
  }catch(e){ box.innerHTML = '<div class="muted">Erro ao carregar histórico</div>'; }
}

// Produtos: busca e adicionar
document.getElementById('btnAddItem').addEventListener('click', async () => {
  const q = document.getElementById('productSearch').value.trim();
  const qty = Number(document.getElementById('itemQty').value||'1');
  if(!q){ showMsg('Informe um termo para buscar produtos', 'warning'); return; }
  if(qty <= 0){ showMsg('Quantidade deve ser maior que zero', 'warning'); return; }
  const res = await apiRequest(api.products(q)); const js = await res.json(); const list = (js.data||[]);
  document.getElementById('productResults').innerHTML = list.map(p => {
    const loc = [p.location_corredor, p.location_prateleira, p.location_posicao].filter(Boolean).join(' / ');
    return `<div class='list-item' style='display:flex;justify-content:space-between;gap:.5rem;'>
    <div><strong>${p.nome||'-'}</strong><div class='muted'>${p.codigo||''} · ${p.codigo_barras||''}${loc?` · Localização: ${loc}`:''}</div></div>
    <button class='btn btn-olive' onclick='addItem(${JSON.stringify({ id:p.id, codigo:p.codigo, nome:p.nome, preco:p.preco, estoque:p.estoque, embalagem:p.embalagem, foto:p.foto })}, ${Number(qty)})'>Confirmar</button></div>`;
  }).join('') || '<div class="muted">Nenhum produto encontrado</div>';
});

// Limpar termos digitados da busca rápida de produtos
document.getElementById('btnClearProductSearch')?.addEventListener('click', () => {
  const inp = document.getElementById('productSearch');
  if(inp){ inp.value = ''; }
  const box = document.getElementById('productResults');
  if(box){ box.innerHTML = ''; }
});

// Sugestão automática de produtos após 3 caracteres no campo rápido
let productSearchDebounce;
document.getElementById('productSearch').addEventListener('input', async ()=>{
  const q = document.getElementById('productSearch').value.trim();
  clearTimeout(productSearchDebounce);
  productSearchDebounce = setTimeout(async ()=>{
    if(q.length < 3){ document.getElementById('productResults').innerHTML = ''; return; }
    const qty = Number(document.getElementById('itemQty').value||'1');
    try{
      const res = await apiRequest(api.products(q)); const js = await res.json(); const list = (js.data||[]);
      document.getElementById('productResults').innerHTML = list.map(p => {
        const loc = [p.location_corredor, p.location_prateleira, p.location_posicao].filter(Boolean).join(' / ');
        return `<div class='list-item' style='display:flex;justify-content:space-between;gap:.5rem;'>
        <div><strong>${p.nome||'-'}</strong><div class='muted'>${p.codigo||''} · ${p.codigo_barras||''}${loc?` · Localização: ${loc}`:''}</div></div>
        <button class='btn btn-olive' onclick='addItem(${JSON.stringify({ id:p.id, codigo:p.codigo, nome:p.nome, preco:p.preco, estoque:p.estoque, embalagem:p.embalagem, foto:p.foto })}, ${Number(qty)})'>Confirmar</button></div>`;
      }).join('') || '<div class="muted">Nenhum produto encontrado</div>';
    }catch(_){ document.getElementById('productResults').innerHTML = '<div class="muted">Erro na busca</div>'; }
  }, 350);
});

window.addItem = function(p, qty){
  const row = {
    product_id: Number(p.id),
    code: p.codigo||'',
    name: String(p.nome||'-'),
    quantity: Number(qty||1),
    unit_price: Number(p.preco||0),
    discount_percent: 0,
    stock: Number(p.estoque||0),
    package: p.embalagem||'',
    photo: p.foto||'',
    tax_ipi_rate: (function(){
      try{
        const m = (typeof p.meta_json === 'string') ? JSON.parse(p.meta_json) : (p.meta_json||{});
        const v = m.ipi_rate ?? m.aliquota_ipi ?? m.ipi_aliquota ?? null;
        if(v==null) return 0; const n = parseFloat(String(v).replace(',','.')); return isNaN(n) ? 0 : (n>1? (n/100.0) : n);
      }catch(_){ return 0; }
    })(),
    tax_st_rate: (function(){
      try{
        const m = (typeof p.meta_json === 'string') ? JSON.parse(p.meta_json) : (p.meta_json||{});
        const v = m.icms_st_rate ?? m.st_rate ?? m.st_aliquota ?? null;
        if(v==null) return 0; const n = parseFloat(String(v).replace(',','.')); return isNaN(n) ? 0 : (n>1? (n/100.0) : n);
      }catch(_){ return 0; }
    })()
  };
  items.push(row); renderItems(); validateAll();
  markDirty();
};

function renderItems(){
  const filter = (document.getElementById('itemsFilter')?.value||'').toLowerCase();
  const sortBy = (document.getElementById('itemsSort')?.value||'nome');
  let list = items.slice();
  if(filter){ list = list.filter(it => (it.name||'').toLowerCase().includes(filter) || (it.code||'').toLowerCase().includes(filter)); }
  list.sort((a,b)=>{
    if(sortBy==='preco') return (a.unit_price||0)-(b.unit_price||0);
    if(sortBy==='estoque') return (a.stock||0)-(b.stock||0);
    return String(a.name||'').localeCompare(String(b.name||''));
  });
  if(list.length === 0){ document.getElementById('itemsRows').innerHTML = '<tr><td colspan="9" class="muted">Nenhum item</td></tr>'; updateTotals(); return; }
  const html = list.map((it, idx) => {
    const subtotal = (it.quantity * it.unit_price) * (1 - (Number(it.discount_percent||0)/100));
    const stockClass = (it.stock<=0) ? 'color: var(--color-black); font-weight:700;' : (it.stock<=3) ? 'color: var(--color-orange); font-weight:600;' : 'color: var(--color-olive);';
    const photoCell = it.photo ? `<img src='${it.photo}' alt='' style='width:36px;height:36px;object-fit:cover;border-radius:4px;'/>` : `<div class='muted'>—</div>`;
    return `<tr>
      <td>${photoCell}</td>
      <td>${it.code||'-'}</td>
      <td>${it.name}</td>
      <td class='right'><span style='${stockClass}'>${it.stock ?? '-'}</span></td>
      <td>${it.package||'-'}</td>
      <td class='right'><input type='number' min='0' step='0.01' value='${it.unit_price}' onchange='updatePrice(${idx}, this.value)' /></td>
      <td class='right'><input type='number' min='1' value='${it.quantity}' onchange='updateQty(${idx}, this.value)' /></td>
      <td class='right'>${fmtBRL(((it.tax_st_rate||0) * it.unit_price * it.quantity))}</td>
      <td class='right'>${fmtBRL(((it.tax_ipi_rate||0) * it.unit_price * it.quantity))}</td>
      <td><input type='text' value='${it.obs||''}' placeholder='Observação do item' onchange='updateObs(${idx}, this.value)' /></td>
      <td class='right'>${fmtBRL(subtotal)}</td>
      <td><button class='btn btn-outline' onclick='removeItem(${idx})'>Excluir</button></td>
    </tr>`;
  }).join('');
  document.getElementById('itemsRows').innerHTML = html;
  updateTotals();
}

window.updateQty = function(idx, v){ items[idx].quantity = Math.max(1, Number(v||1)); renderItems(); };
window.updatePrice = function(idx, v){ items[idx].unit_price = Math.max(0, Number(v||0)); renderItems(); };
window.updateDiscount = function(idx, v){ items[idx].discount_percent = Math.min(100, Math.max(0, Number(v||0))); renderItems(); };
window.updateObs = function(idx, v){ items[idx].obs = String(v||''); markDirty(); };
window.removeItem = function(idx){ items.splice(idx,1); renderItems(); validateAll(); markDirty(); };

function updateTotals(){
  const t = getOrderTotal();
  document.getElementById('totalsBox').textContent = `Subtotal: ${fmtBRL(t.subtotal)} · Impostos: ${fmtBRL(t.impostos)} · Frete: ${fmtBRL(t.frete)} · Total: ${fmtBRL(t.total)}`;
  updateInstallments();
}

function getOrderTotal(){
  const subtotalBase = items.reduce((acc, it) => acc + (it.quantity * it.unit_price) * (1 - (Number(it.discount_percent||0)/100)), 0);
  const desc = Math.min(100, Math.max(0, Number(document.getElementById('discountGlobal')?.value||0)));
  const mark = Math.min(100, Math.max(0, Number(document.getElementById('markupGlobal')?.value||0)));
  const subtotal = round2(subtotalBase * (1 - desc/100) * (1 + mark/100));
  const freteVal = Number(document.getElementById('freteValue').value||0);
  const frete = (document.getElementById('freteSomar')?.checked ?? true) ? round2(freteVal) : 0;
  const impostos = round2(Math.max(0, subtotal * 0.12));
  return { subtotal, impostos, frete, total: round2(subtotal + frete + impostos) };
}

function round2(n){ return Math.round((Number(n)||0) * 100) / 100; }

function parsePayCondition(str){
  const parts = String(str||'').split('|');
  const daysPart = (parts[0]||'').trim();
  const percPart = (parts[1]||'').trim();
  const days = daysPart.split(/[\/,;\s]+/).map(s=>Number(s)).filter(n=>!isNaN(n) && n>=0);
  const discountPercent = parseFloat(percPart.replace('%','').replace(',','.')) || 0;
  return { days, discountPercent };
}

function updateInstallments(){
  const cond = parsePayCondition(document.getElementById('payCondition').value);
  const issue = document.getElementById('issueDate').value;
  const box = document.getElementById('installmentsBox');
  const tbody = document.querySelector('#installmentsBox tbody');
  if(!cond.days.length || !issue){ box.style.display='none'; if(tbody) tbody.innerHTML=''; return; }
  const t = getOrderTotal();
  const base = t.total * (1 - (cond.discountPercent/100));
  const per = cond.days.length ? base/cond.days.length : base;
  const rows = cond.days.map((d,i)=>{
    const venc = addDays(issue, d);
    return `<tr><td>${i+1}</td><td>${venc}</td><td class='right'>${fmtBRL(per)}</td></tr>`;
  }).join('');
  tbody.innerHTML = rows;
  box.style.display='block';
}

// Pagamento: campos dinâmicos
const payMethodEl = document.getElementById('payMethod');
payMethodEl.addEventListener('change', renderPayFields);
function renderPayFields(){
  const m = payMethodEl.value;
  let html = '';
  if(m === 'parcelado'){
    html = `<label class='muted'>Parcelas</label><input id='payInstallments' type='number' min='2' value='2' />`;
  } else if(m === 'cartao'){
    html = `<label class='muted'>Bandeira</label><input id='payCardBrand' type='text' placeholder='Visa, MasterCard...' />`;
  } else if(m === 'pix'){
    html = `<label class='muted'>Chave PIX</label><input id='payPixKey' type='text' placeholder='e-mail/telefone/aleatória' />`;
  } else if(m === 'boleto'){
    html = `<label class='muted'>Vencimento (dias)</label><input id='payBoletoDays' type='number' min='1' value='7' />`;
  } else if(m === 'transferencia'){
    html = `<label class='muted'>Banco/Agência</label><input id='payBank' type='text' placeholder='Banco e agência para transferência' />`;
  } else {
    html = `<small class='muted'>Pagamento à vista.</small>`;
  }
  document.getElementById('payFields').innerHTML = html;
}
renderPayFields();

// Entrega/Retirada: alterna endereço
const deliveryOptionEl = document.getElementById('deliveryOption');
deliveryOptionEl.addEventListener('change', () => {
  document.getElementById('deliveryAddrBox').style.display = (deliveryOptionEl.value === 'entrega') ? 'block' : 'none';
});
document.getElementById('deliveryAddrBox').style.display = 'none';

// Recalcular totais automaticamente ao alterar desconto/acréscimo/frete
['discountGlobal','markupGlobal','freteValue'].forEach(id => {
  const el = document.getElementById(id); if(el){ el.addEventListener('input', updateTotals); el.addEventListener('change', updateTotals); }
});
const freteSomarEl = document.getElementById('freteSomar'); if(freteSomarEl){ freteSomarEl.addEventListener('change', updateTotals); }

// Máscara e validação de hora (24h) para logística
const deliveryTimeEl = document.getElementById('deliveryTime');
if(deliveryTimeEl){
  const clampTime = (val) => {
    const m = String(val||'').match(/^(\d{1,2}):(\d{2})$/);
    if(!m) return '';
    let hh = Math.max(0, Math.min(23, parseInt(m[1],10)));
    let mm = Math.max(0, Math.min(59, parseInt(m[2],10)));
    const hhs = hh.toString().padStart(2,'0');
    const mms = mm.toString().padStart(2,'0');
    return `${hhs}:${mms}`;
  };
  deliveryTimeEl.addEventListener('blur', () => {
    const v = clampTime(deliveryTimeEl.value);
    if(v){ deliveryTimeEl.value = v; }
  });
}

// Validação em tempo real
function validateAll(){
  const okClient = !!selectedClient?.id;
  const okItems = items.length > 0 && items.every(it => it.quantity > 0 && it.unit_price >= 0);
  document.getElementById('btnSave').disabled = !(okClient && okItems);
  document.getElementById('btnPreview').disabled = !okItems;
  document.getElementById('btnPrint').disabled = !okItems;
}
validateAll();

// Pré-visualização
document.getElementById('btnPreview').addEventListener('click', () => {
  const subtotal = items.reduce((acc, it) => acc + (it.quantity * it.unit_price) * (1 - (it.discount_percent||0)/100), 0);
  const desc = Math.min(100, Math.max(0, Number(document.getElementById('discountGlobal')?.value||0)));
  const mark = Math.min(100, Math.max(0, Number(document.getElementById('markupGlobal')?.value||0)));
  const subtotalAdj = subtotal * (1 - desc/100) * (1 + mark/100);
  const frete = (document.getElementById('freteSomar')?.checked ?? true) ? Number(document.getElementById('freteValue').value||0) : 0;
  const impostos = subtotalAdj * 0.12; const total = subtotalAdj+impostos+frete;
  const cliente = selectedClient||{};
  const issueRaw = document.getElementById('issueDate').value||'';
  const emissaoStr = issueRaw ? formatDateBR(issueRaw) : formatDateBR(new Date());
  const itensRows = items.map((it, i) => {
    const tot = (it.quantity * it.unit_price) * (1 - (it.discount_percent||0)/100);
    return `<tr>
      <td>${String(i+1).padStart(3,'0')}</td>
      <td>${it.code||''}</td>
      <td>${it.name}</td>
      <td class='right'>${it.quantity}</td>
      <td class='right'>${fmtBRL(it.unit_price)}</td>
      <td class='right'>${Number(it.discount_percent||0).toFixed(2)}%</td>
      <td class='right'>${fmtBRL(tot)}</td>
    </tr>`;
  }).join('');
  const html = `
  <style>
    @page { size: A4; margin: 10mm; }
    @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
    .danfe-wrap{ width: 190mm; margin: 0 auto; }
    .danfe-box{border:1px solid #000;padding:6px;margin-bottom:6px;}
    .danfe-grid{display:grid;grid-template-columns:2fr 1fr;gap:6px;}
    .right{text-align:right;}
    .center{text-align:center;}
    .muted{color:#555;}
    .danfe-table{width:100%;border-collapse:collapse; table-layout: fixed;}
    .danfe-table th, .danfe-table td{border:1px solid #000;padding:4px;font-size:12px;}
    .danfe-table thead th{ background:#f2f2f2; }
    .danfe-table th:nth-child(1), .danfe-table td:nth-child(1){ width:8%; }
    .danfe-table th:nth-child(2), .danfe-table td:nth-child(2){ width:12%; }
    .danfe-table th:nth-child(3), .danfe-table td:nth-child(3){ width:44%; word-break: break-word; }
    .danfe-table th:nth-child(4), .danfe-table td:nth-child(4){ width:8%; }
    .danfe-table th:nth-child(5), .danfe-table td:nth-child(5){ width:12%; }
    .danfe-table th:nth-child(6), .danfe-table td:nth-child(6){ width:6%; }
    .danfe-table th:nth-child(7), .danfe-table td:nth-child(7){ width:10%; }
    .danfe-header{display:flex;justify-content:space-between;align-items:center;}
  </style>
  <div class='danfe-wrap'>
  <div class='danfe-box'>
    <div class='danfe-header'>
      <div>
        <div><strong>CÓPIA DO ORÇAMENTO</strong></div>
        <div class='muted'>Layout inspirado em DANFE (NF-e)</div>
      </div>
      <div class='right'>
        <div><strong>Nº ${quoteNumber||'-'}</strong></div>
        <div>Emissão: ${emissaoStr}</div>
      </div>
    </div>
  </div>
  <div class='danfe-grid'>
    <div class='danfe-box'>
      <div><strong>Destinatário</strong></div>
      <div>${cliente.nome||cliente.razao_social||'-'}</div>
      <div class='muted'>${cliente.email||''}</div>
      <div class='muted'>${[cliente.endereco,cliente.numero,cliente.bairro,cliente.cidade,cliente.uf,cliente.cep].filter(Boolean).join(', ')}</div>
      <div class='muted'>${cliente.cnpj||cliente.cpf||''}</div>
    </div>
    <div class='danfe-box'>
      <div><strong>Transporte</strong></div>
      <div class='muted'>${document.getElementById('deliveryOption').value} · Frete: ${fmtBRL(frete)}</div>
      <div class='muted'>Modalidade: ${document.getElementById('freteMode').value}</div>
      <div class='muted'>Entrega: ${document.getElementById('deliveryDate').value ? formatDateBR(document.getElementById('deliveryDate').value) : '-'}</div>
      <div class='muted'>Endereço: ${document.getElementById('deliveryAddress').value||'-'}</div>
    </div>
  </div>
  <div class='danfe-box'>
    <div><strong>Itens</strong></div>
    <table class='danfe-table'>
      <thead>
        <tr><th>Item</th><th>Código</th><th>Descrição</th><th>Qtd</th><th>Unitário</th><th>Desc%</th><th>Total</th></tr>
      </thead>
      <tbody>${itensRows}</tbody>
    </table>
  </div>
  <div class='danfe-grid'>
    <div class='danfe-box'>
      <div><strong>Condição de Pagamento</strong></div>
      <div class='muted'>${document.getElementById('payCondition').value||'-'}</div>
    </div>
    <div class='danfe-box right'>
      <div><strong>Totais</strong></div>
      <div>Subtotal: ${fmtBRL(subtotalAdj)}</div>
      <div>Impostos: ${fmtBRL(impostos)}</div>
      <div>Frete: ${fmtBRL(frete)}</div>
      <div><strong>Total: ${fmtBRL(total)}</strong></div>
    </div>
  </div>
  <div class='danfe-grid'>
    <div class='danfe-box'>
      <div><strong>Observações ao Cliente</strong></div>
      <div class='muted'>${document.getElementById('obsCliente').value||''}</div>
    </div>
    <div class='danfe-box'>
      <div><strong>Observações Internas</strong></div>
      <div class='muted'>${document.getElementById('obsRepresentante').value||''}</div>
    </div>
  </div>`;
  document.getElementById('previewContent').innerHTML = html; document.getElementById('previewDialog').showModal();
});

// Salvar orçamento
document.getElementById('btnSave').addEventListener('click', async () => {
  try {
    if(!(selectedClient?.id) || items.length === 0){ showMsg('Selecione cliente e adicione itens', 'warning'); return; }
    const payload = {
      cliente_id: selectedClient.id,
      // Backend de orçamentos espera campos: product_id e quantidade
      // Incluímos também preço, desconto e observação por item
      items: items.map(it => ({ product_id: it.product_id, quantidade: it.quantity, preco: it.unit_price, desconto_percent: Number(it.discount_percent||0), observacao: it.obs||null })),
      observacoes: document.getElementById('obsCliente').value || '',
      observacoes_internas: document.getElementById('obsRepresentante').value || '',
      // 'numero' é gerado no servidor e permanece inalterado em edições
      status: document.getElementById('orderStatus').value,
      emissao_data: document.getElementById('issueDate').value || null,
      entrega_previsao: document.getElementById('expectedDate').value || null,
      vendedor: (document.getElementById('sellerSelect').selectedOptions[0]?.text || null),
      consumidor_final: !!document.getElementById('consumerFinal').checked,
      entrega: {
        tipo: document.getElementById('deliveryOption').value,
        data: document.getElementById('deliveryDate').value || null,
        hora: document.getElementById('deliveryTime').value || null,
        endereco: document.getElementById('deliveryAddress').value || null,
        frete: Number(document.getElementById('freteValue').value||0),
        frete_modalidade: document.getElementById('freteMode').value,
        frete_incluir_total: !!document.getElementById('freteSomar').checked,
        observacoes: document.getElementById('deliveryNotes').value || ''
      },
      pagamento: {
        tabela_preco: document.getElementById('priceTable').value,
        condicao: document.getElementById('payCondition').value || null,
        metodo: document.getElementById('payMethod').value,
        parcelas: Number(document.getElementById('payInstallments')?.value||0)||null,
        cartao_bandeira: document.getElementById('payCardBrand')?.value||null,
        pix_chave: document.getElementById('payPixKey')?.value||null,
        boleto_dias: Number(document.getElementById('payBoletoDays')?.value||0)||null,
        transferencia_banco: document.getElementById('payBank')?.value||null,
        desconto_percent: Number(document.getElementById('discountGlobal')?.value||0)||0,
        acrescimo_percent: Number(document.getElementById('markupGlobal')?.value||0)||0
      },
      logistica: {
        transportadora: (document.getElementById('carrierSelect').selectedOptions[0]?.text || null),
        peso_bruto: Number(document.getElementById('pesoBruto').value||0)||0,
        peso_liquido: Number(document.getElementById('pesoLiquido').value||0)||0,
        volumes_qtd: Number(document.getElementById('volumesQtd').value||0)||0,
        volumes_detalhes: document.getElementById('volumesDetalhes').value || null
      }
    };
    // Decide create vs update conforme query param 'id'
    const urlParams = new URLSearchParams(window.location.search);
    const editId = urlParams.get('id');
    const isEdit = !!editId;
    const endpoint = isEdit ? api.quoteUpdate(editId) : api.quoteCreate;
    const method = isEdit ? 'PUT' : 'POST';
    const res = await apiRequest(endpoint, { method, body: JSON.stringify(payload) });
    const js = await res.json().catch(()=>({}));
    if(!res.ok){ showMsg(js.error?.message || 'Falha ao salvar orçamento', 'error'); return; }
    // Resposta do backend:
    // - Create: { ok: true, id, numero }
    // - Update: { ok: true }
    createdQuoteId = js.id || editId || null;
    showMsg(isEdit ? 'Orçamento atualizado com sucesso!' : 'Orçamento salvo com sucesso!', 'success');
    isDirty = false;
    document.getElementById('btnEmail').disabled = !createdQuoteId;
    if(createdQuoteId){
      // Em criação, atualiza número. Em edição, apenas mantém o que já está exibido.
      const numServer = js.numero || null;
      if(numServer){ quoteNumber = numServer; document.getElementById('orderNumber').textContent = numServer; }
      document.getElementById('linkDetalhes').href = `/vendas/orcamentos/${createdQuoteId}`;
      document.getElementById('linkDetalhes').style.display = 'inline-block';
    }
  } catch(e){ showMsg('Erro ao salvar orçamento', 'error'); }
});

// Pesquisa avançada: modal
document.getElementById('btnOpenProductSearch').addEventListener('click', ()=>{
  const dlg = document.getElementById('productSearchDialog');
  document.getElementById('psdResults').innerHTML = '';
  dlg.showModal();
  document.getElementById('psdInput').focus();
});

async function psdQueryProducts(q){
  const res = await apiRequest(api.products(q, 20));
  const js = await res.json();
  const list = js.data||[];
  const html = list.map(p => {
    const img = p.foto ? `<img src='${p.foto}' alt='' style='width:40px;height:40px;object-fit:cover;border-radius:4px;'/>` : `<div class='muted' style='width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #ccc;'>—</div>`;
    const loc = [p.location_corredor, p.location_prateleira, p.location_posicao].filter(Boolean).join(' / ');
    return `<div class='card' style='padding:8px; display:flex; align-items:center; gap:8px;'>
      ${img}
      <div style='flex:1;'>
        <div><strong>${p.nome||'-'}</strong></div>
        <div class='muted'>${p.codigo||''} · ${p.codigo_barras||''}${loc?` · Localização: ${loc}`:''}</div>
      </div>
      <div class='right' style='min-width:120px;'>${fmtBRL(p.preco||0)}</div>
      <div class='muted' style='min-width:90px;'>Estoque: ${p.estoque ?? '-'}</div>
      <div><input type='number' min='1' value='${Number(document.getElementById('psdQty').value||1)}' data-role='qty' style='width:80px;' /></div>
      <div><button class='btn btn-olive' data-role='add' data-p='${encodeURIComponent(JSON.stringify({ id:p.id, codigo:p.codigo, nome:p.nome, preco:p.preco, estoque:p.estoque, embalagem:p.embalagem, foto:p.foto }))}'>Adicionar</button></div>
    </div>`;
  }).join('');
  const box = document.getElementById('psdResults');
  box.innerHTML = html || '<div class="muted">Nenhum produto encontrado</div>';
  // Wire add buttons
  box.querySelectorAll('[data-role="add"]').forEach(btn => {
    btn.addEventListener('click', (ev)=>{
      const p = JSON.parse(decodeURIComponent(btn.getAttribute('data-p')));
      const qtyEl = btn.closest('.card').querySelector('[data-role="qty"]');
      const qty = Number(qtyEl?.value||document.getElementById('psdQty').value||1);
      addItem(p, qty);
    });
  });
}

document.getElementById('psdSearchBtn').addEventListener('click', ()=>{
  const q = document.getElementById('psdInput').value.trim();
  if(!q){ showMsg('Informe um termo para buscar produtos', 'warning'); return; }
  psdQueryProducts(q);
});

let psdDebounce;
document.getElementById('psdInput').addEventListener('input', ()=>{
  const q = document.getElementById('psdInput').value.trim();
  clearTimeout(psdDebounce);
  psdDebounce = setTimeout(()=>{ if(q.length >= 3) psdQueryProducts(q); else document.getElementById('psdResults').innerHTML = ''; }, 350);
});

// Email
document.getElementById('btnEmail').addEventListener('click', () => {
  if(!createdQuoteId){ showMsg('Salve o orçamento antes de enviar por e-mail', 'warning'); return; }
  const dlg = document.getElementById('emailDialog'); const input = document.getElementById('emailTo');
  input.value = selectedClientEmail||'';
  dlg.showModal();
});

document.getElementById('btnEmailSend').addEventListener('click', async () => {
  if(!createdQuoteId){ showMsg('Salve o orçamento antes de enviar por e-mail', 'warning'); return; }
  const to = (document.getElementById('emailTo').value||'').trim();
  const emailOk = /.+@.+\..+/.test(to);
  if(!emailOk){ showMsg('Informe um e-mail válido', 'warning'); return; }
  const subject = `Orçamento ${createdQuoteId}`;
  const body = `Olá ${selectedClient?.nome||''},\nSegue seu orçamento. Total: consulte o documento.\nObrigado.`;
  try {
    const res = await apiRequest(api.quoteEmail(createdQuoteId), { method:'POST', body: JSON.stringify({ to, subject, body }) });
    if(!res.ok){ const er = await res.json().catch(()=>({})); showMsg(er.error?.message||'Falha ao enviar e-mail','error'); return; }
    const dlgClose = document.getElementById('emailDialog');
    if(dlgClose && typeof dlgClose.close === 'function'){ dlgClose.close(); }
    showMsg('E-mail enviado.', 'success');
  } catch(e){ showMsg('Erro no envio de e-mail', 'error'); }
});

// Importação de itens via CSV simples: colunas esperadas codigo;nome;preco;quantidade
document.getElementById('btnImportItems').addEventListener('click', ()=>{
  document.getElementById('importFile').click();
});
document.getElementById('importFile').addEventListener('change', async (ev)=>{
  const file = ev.target.files?.[0]; if(!file) return;
  const text = await file.text();
  const lines = text.split(/\r?\n/).filter(l=>l.trim().length>0);
  for(const line of lines){
    const parts = line.split(/[;,\t]/);
    const [codigo,nome,precoStr,qtyStr] = [parts[0]||'', parts[1]||'', parts[2]||'0', parts[3]||'1'];
    const p = { id: Date.now()+Math.random(), codigo, nome, preco: Number(precoStr||0), estoque: null, embalagem: '', foto: '' };
    addItem(p, Number(qtyStr||1));
  }
  showMsg('Itens importados da planilha', 'success');
});

// Modelo de Planilha: gerar CSV com cabeçalhos e exemplos
document.getElementById('btnTemplateCSV').addEventListener('click', ()=>{
  const csv = [
    'codigo;nome;preco;quantidade',
    'SKU123;Produto Exemplo 1;49.90;2',
    'SKU456;Produto Exemplo 2;19.90;1'
  ].join('\n');
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'modelo_itens.csv';
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

// Eventos de filtros/ordenção
document.getElementById('itemsFilter').addEventListener('input', renderItems);
document.getElementById('itemsSort').addEventListener('change', renderItems);

// Atualiza status exibido
document.getElementById('orderStatus').addEventListener('change', ()=>{
  const s = document.getElementById('orderStatus').value;
  document.getElementById('orderStatusText').textContent = s.charAt(0).toUpperCase()+s.slice(1);
});

// Parcelas automáticas: reagir a mudanças de condição e datas
document.getElementById('payCondition').addEventListener('input', updateInstallments);
document.getElementById('issueDate').addEventListener('change', updateInstallments);

// Inicializa datas
const today = new Date().toISOString().slice(0,10);
document.getElementById('issueDate').value = today;
updateTotals();
updateInstallments();

// Vendedores: carregar lista e habilitar busca/ordenação
let sellersAll = [];
async function loadSellers(){
  try {
    const res = await apiRequest(api.salesFilters);
    const js = await res.json();
    const sellers = (js.sellers || []).map(s => ({ id: s.id, name: s.name || s.nome || s.user_name || String(s.id) }));
    sellers.sort((a,b)=> String(a.name).localeCompare(String(b.name)));
    sellersAll = sellers;
    renderSellers(sellersAll);
  } catch(e) { /* ignore */ }
}
function renderSellers(list){
  const sel = document.getElementById('sellerSelect'); if(!sel) return;
  sel.innerHTML = '<option value="">Selecione um vendedor</option>' + list.map(s => `<option value="${s.id}">${s.name}</option>`).join('');
}
document.getElementById('sellerSearch').addEventListener('input', () => {
  const q = document.getElementById('sellerSearch').value.trim().toLowerCase();
  if(!q){ renderSellers(sellersAll); return; }
  const filtered = sellersAll.filter(s => String(s.name).toLowerCase().includes(q));
  renderSellers(filtered);
});
loadSellers();

// Transportadoras: carregar lista e cadastro simples (inicializa após API disponível)
function initCarriers(){
  const sel = document.getElementById('carrierSelect');
  if(!sel) return;
  sel.innerHTML = '<option value="">Carregando transportadoras...</option>';
  apiRequest('/api/cadastros/transportadoras?q=&limit=50')
    .then(r => r.json())
    .then(js => {
      const list = js.data||[];
      const opts = ['<option value="">Selecione...</option>'].concat(list.map(c => `<option value="${c.id}">${c.nome||('ID '+c.id)}</option>`));
      sel.innerHTML = opts.join('');
    })
    .catch(()=>{ sel.innerHTML = '<option value="">Erro ao carregar</option>'; });

  document.getElementById('newCarrierBtn')?.addEventListener('click', () => {
    document.getElementById('carrierNewDialog').showModal();
  });

  function carrierAlert(msg, type='warning'){
    const box = document.getElementById('carrierNewAlert'); if(!box) return;
    box.textContent = msg; box.className = 'alert ' + (type==='success' ? 'alert-success' : type==='error' ? 'alert-error' : '');
    box.style.display = msg ? 'block' : 'none';
  }

  document.getElementById('carrierNewForm')?.addEventListener('submit', async (e) => {
    e.preventDefault(); carrierAlert('');
    const nome = (document.getElementById('carrier_nome').value||'').trim();
    const cnpj = (document.getElementById('carrier_cnpj').value||'').trim();
    const email = (document.getElementById('carrier_email').value||'').trim();
    const telefone = (document.getElementById('carrier_telefone').value||'').trim();
    if(!nome){ carrierAlert('Nome é obrigatório'); return; }
    const body = { nome }; if(cnpj) body.cnpj = cnpj; if(email) body.email = email; if(telefone) body.telefone = telefone;
    try{
      const res = await apiRequest('/api/cadastros/transportadoras', { method:'POST', body: JSON.stringify(body) });
      const js = await res.json().catch(()=>({}));
      if(!res.ok){ carrierAlert(js.error?.message || 'Falha ao salvar', 'error'); return; }
      const id = (js.data||{}).id || js.id;
      const opt = document.createElement('option'); opt.value = String(id||''); opt.textContent = nome; sel.appendChild(opt); sel.value = String(id||'');
      document.getElementById('carrierNewDialog').close();
      carrierAlert('');
    }catch(err){ carrierAlert('Erro ao salvar', 'error'); }
  });
}
if(typeof apiRequest === 'function'){ initCarriers(); }
else { window.addEventListener('load', initCarriers); }

// Prefill de edição: carrega orçamento e popula a tela
(async function initEditIfRequested(){
  try {
    const params = new URLSearchParams(window.location.search);
    const editId = params.get('id');
    if (!editId) return;
    const resp = await apiRequest(`/api/vendas/orcamentos/${encodeURIComponent(editId)}`);
    if (!resp.ok) { console.warn('Falha ao carregar orçamento para edição'); return; }
    const js = await resp.json();
    const quote = js.data?.quote || js.data || {};
    const quoteItems = js.data?.items || quote.items || [];

    // Cliente
    if (quote.cliente_id) {
      await selectClient(quote.cliente_id);
      document.getElementById('clientSearch').value = selectedClient?.nome || selectedClient?.razao_social || '';
      document.getElementById('clientResults').innerHTML = '';
    }

    // Cabeçalho
    if (quote.status) {
      const st = String(quote.status).toLowerCase();
      const sel = document.getElementById('orderStatus');
      if (sel) sel.value = st;
      document.getElementById('orderStatusText').textContent = quote.status;
    }
    if (quote.created_at) { try { document.getElementById('issueDate').value = String(quote.created_at).substring(0,10); } catch(_){ } }
    if (quote.expected_date) { try { document.getElementById('expectedDate').value = String(quote.expected_date).substring(0,10); } catch(_){ } }

    // Número
    const num = quote.numero || quote.id;
    if (num) { quoteNumber = num; document.getElementById('orderNumber').textContent = String(num); }

    // Itens
    const newItems = [];
    for (const it of (quoteItems||[])){
      const pid = it.product_id || it.produto_id || it.productId || null;
      let name = `Produto ${pid||''}`;
      let code = '';
      let unidade = 'UN';
      let photo = null;
      try {
        if (pid){
          const pr = await apiRequest(`/api/produtos/${pid}`);
          if (pr.ok){ const pd = await pr.json(); const p = pd.data||{}; name = p.nome||name; code = p.codigo||code; unidade = p.unidade||unidade; photo = p.foto||null; }
        }
      } catch(_){ }
      newItems.push({
        product_id: pid,
        name,
        code,
        unit_price: Number(it.preco || it.preco_unitario || it.price || 0),
        quantity: Number(it.quantidade || it.qtd || it.quantity || 1),
        discount_percent: Number(it.desconto_percent || it.desconto || 0),
        obs: String(it.observacao || it.obs || ''),
        package: unidade,
        photo,
        tax_st_rate: Number(it.tax_st_rate || 0),
        tax_ipi_rate: Number(it.tax_ipi_rate || 0)
      });
    }
    if (newItems.length){ items = newItems; renderItems(); }

    validateAll();
    showMsg('Orçamento carregado para edição', 'success');
  } catch(e) {
    console.warn('initEditIfRequested error', e);
  }
})();
</script>