404

D7net
:/ var / www / html / crsys_ant /
Filename : descricao112.php
back
<form id="form_exemplo">
  <div class="row">
    <input type="number" id="qtde_pecas" placeholder="Qtde" min="1" />

    <select id="calc_produto">
      <option value="">Selecione um produto</option>
      <option value="1">Aparador</option>
      <option value="2">Espelho</option>
      <option value="3">Lareira</option>
    </select>

    <input type="number" id="calc_larg" placeholder="Largura (cm)" />
    <input type="number" id="calc_prof" placeholder="profundidade (cm)" />
  </div>

  <div class="row">
    <label><input type="checkbox" id="em_curva" /> Em Curva</label>
    <label><input type="checkbox" id="com_colocacao" /> Com Colocação</label>
  </div>

  <div class="row">
    <label><input type="checkbox" id="calc_fronSup" /> Frontão Sup</label>
    <label><input type="checkbox" id="calc_fronInf" /> Frontão Inf</label>
    <label><input type="checkbox" id="calc_fronDir" /> Frontão Dir</label>
    <label><input type="checkbox" id="calc_fronEsq" /> Frontão Esq</label>
    <input type="number" id="alt_fron" placeholder="profundidade Frontão (cm)" />
    <label><input type="checkbox" id="acab_topo_frontao" /> Acab Topo Frontão</label>
    acab_topo_frontao
  </div>

  <div class="row">
    <label><input type="checkbox" id="calc_saiaSup" /> Saia Sup</label>
    <label><input type="checkbox" id="calc_saiaInf" /> Saia Inf</label>
    <label><input type="checkbox" id="calc_saiaDir" /> Saia Dir</label>
    <label><input type="checkbox" id="calc_saiaEsq" /> Saia Esq</label>
    <input type="number" id="alt_saia" placeholder="profundidade Saia (cm)" />
  </div>

  <div class="row">
    <select id="calc_acabamento">
      <option value="">Selecione Acabamento</option>
      <option value="1">Acabamento Reto</option>
      <option value="2">Acabamento Boleado</option>
      <option value="3">Acabamento Boleado Duplo</option>
    </select>
    <label><input type="checkbox" id="calc_esquad" /> Montagem 1/2 esquadria</label>
    <label><input type="checkbox" id="polir_duplo" /> Polir 2 Lados</label>
  </div>

  <div class="row">
    <select id="calc_servico">
      <option value="">Selecione Serviço</option>
      <option value="1">Estadia Dia</option>
      <option value="2">Corte Fogão</option>
      <option value="3">Furo Cuba</option>
    </select>
    <label><input type="checkbox" id="conjunto" />Conjunto</label>
  </div>

  <br><br>

  <textarea id="item_descricao" name="item_descricao" rows="6" cols="40"></textarea>
</form>

<table border="1" id="tabela_produtos" style="margin-top: 20px; border-collapse: collapse;">
  <thead>
    <tr>
      <th>ID</th>
      <th>Produto</th>
      <th>M²</th>
    </tr>
  </thead>
  <tbody>
    <tr id="linha-produto">
      <td>1</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const campos = {
    qtde: document.getElementById('qtde_pecas'),
    nome: document.getElementById('calc_produto'),
    largura: document.getElementById('calc_larg'),
    profundidade: document.getElementById('calc_prof'),
    emCurva: document.getElementById('em_curva'),
    colocacao: document.getElementById('com_colocacao'),
    fronSup: document.getElementById('calc_fronSup'),
    fronInf: document.getElementById('calc_fronInf'),
    fronDir: document.getElementById('calc_fronDir'),
    fronEsq: document.getElementById('calc_fronEsq'),
    altFron: document.getElementById('alt_fron'),
    saiaSup: document.getElementById('calc_saiaSup'),
    saiaInf: document.getElementById('calc_saiaInf'),
    saiaDir: document.getElementById('calc_saiaDir'),
    saiaEsq: document.getElementById('calc_saiaEsq'),
    altSaia: document.getElementById('alt_saia'),
    acabamento: document.getElementById('calc_acabamento'),
    meiaEsquad: document.getElementById('calc_esquad'),
    acabRetofrontao: document.getElementById('acab_topo_frontao'),
    polirDuplo: document.getElementById('polir_duplo'),
    servico: document.getElementById('calc_servico')
  };

  const campoDescricao = document.getElementById('item_descricao');
  const tabelaProdutos = document.getElementById('tabela_produtos');
  const checkboxConjunto = document.getElementById('conjunto');

  let descricaoOriginal = null;
  let nomeSegundoProduto = null;
  let descricaoSegundo = null;
  let nomePrimeiroProduto = null;

  let linhaP1Criada = false;
  let linhaP2Criada = false;

  // armazena a descrição da P1 na tabela para não ser sobrescrita
  let descricaoTabelaP1Original = null;

  // Remove linhas vazias iniciais da tabela para evitar linha "1" em branco
  [...tabelaProdutos.rows].forEach(row => {
    if (row.cells.length > 0 && row.cells[0].textContent.trim() === '' && row.cells[1].textContent.trim() === '' && row.cells[2].textContent.trim() === '') {
      tabelaProdutos.deleteRow(row.rowIndex);
    }
  });

  function montarDescricaoSimples() {
    let desc = '';
    const qtdeRaw = parseInt(campos.qtde.value) || 0;
    const nomeSel = campos.nome.options[campos.nome.selectedIndex]?.text.trim() || '';
    const larguraRaw = parseFloat((campos.largura.value || '').replace(',', '.')) || 0;
    const profundidadeRaw = parseFloat((campos.profundidade.value || '').replace(',', '.')) || 0;

    const largura = larguraRaw.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    const profundidade = profundidadeRaw.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    if (qtdeRaw > 1) desc += `${qtdeRaw} `;
    if (nomeSel && nomeSel !== 'Selecione um produto') desc += nomeSel;
    if (campos.emCurva.checked) desc += ` em curva`;
    if (larguraRaw && profundidadeRaw) desc += ` medindo ${largura} x ${profundidade} m`;

    const algumFron = campos.fronSup.checked || campos.fronInf.checked || campos.fronDir.checked || campos.fronEsq.checked;
    const altFronRaw = parseFloat((campos.altFron.value || '').replace(',', '.')) || 0;
    if (algumFron && altFronRaw > 0) {
      const altFron = altFronRaw.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      desc += ` - Frontão h: ${altFron} m`;
    }

    const algumaSaia = campos.saiaSup.checked || campos.saiaInf.checked || campos.saiaDir.checked || campos.saiaEsq.checked;
    const altSaiaRaw = parseFloat((campos.altSaia.value || '').replace(',', '.')) || 0;
    if (algumaSaia && altSaiaRaw > 0) {
      const altSaia = altSaiaRaw.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      desc += ` - Saia h: ${altSaia} m`;
    }

    const acabamentoTexto = campos.acabamento.options[campos.acabamento.selectedIndex]?.text.trim() || '';
    if (acabamentoTexto && acabamentoTexto !== 'Selecione Acabamento') {
      desc += ` - ${acabamentoTexto}`;
    }

    let adicionais = [];
    if (campos.meiaEsquad.checked) adicionais.push('Acabamento em 1/2 esquadria');
    if (campos.acabRetofrontao.checked) adicionais.push('Acb. reto no Frontão');
    if (campos.polirDuplo.checked) adicionais.push('Polimento em dois Lados');

    const servicoTexto = campos.servico.options[campos.servico.selectedIndex]?.text.trim() || '';
    if (servicoTexto && servicoTexto !== 'Selecione Serviço') {
      adicionais.push(servicoTexto);
    }

    if (adicionais.length > 0) desc += ` - ${adicionais.join(' - ')}`;

    if (campos.colocacao.checked) {
      desc += `, com colocação`;
    } else {
      desc += `, sem colocação`;
    }

    return desc;
  }

  function montarDescricaoTabela() {
    const nomeSel = campos.nome.options[campos.nome.selectedIndex]?.text.trim() || '';
    const larguraRaw = parseFloat((campos.largura.value || '').replace(',', '.')) || 0;
    const profundidadeRaw = parseFloat((campos.profundidade.value || '').replace(',', '.')) || 0;

    if (!nomeSel || nomeSel === 'Selecione um produto' || larguraRaw === 0 || profundidadeRaw === 0) return '';

    const largura = larguraRaw.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    const profundidade = profundidadeRaw.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    let desc = nomeSel;
    if (campos.emCurva.checked) desc += ' em curva';
    desc += ` medindo ${largura} x ${profundidade} m`;
    return desc;
  }

  function atualizarTabelaProduto(id, descricao) {
    if (!descricao) return;
    let linha = tabelaProdutos.querySelector(`tr[data-id="${id}"]`);
    if (!linha) {
      linha = tabelaProdutos.insertRow();
      linha.dataset.id = id;
      const celulaId = linha.insertCell(0);
      const celulaDesc = linha.insertCell(1);
      const celulaM2 = linha.insertCell(2);
      celulaId.textContent = id;
    }
    const larguraRaw = parseFloat((campos.largura.value || '').replace(',', '.')) || 0;
    const profundidadeRaw = parseFloat((campos.profundidade.value || '').replace(',', '.')) || 0;
    const m2 = larguraRaw * profundidadeRaw;
    const m2Formatado = m2.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    linha.cells[1].textContent = descricao;
    linha.cells[2].textContent = m2Formatado;
    tabelaProdutos.style.display = '';
  }

  function atualizarDescricao() {
    // Evita criar linha vazia '1' inicial
    if (campos.nome.selectedIndex === 0) {
      // Remove linha P1 e P2 se existirem
      const linhaP1 = tabelaProdutos.querySelector('tr[data-id="P1"]');
      if (linhaP1) tabelaProdutos.deleteRow(linhaP1.rowIndex);
      linhaP1Criada = false;
      const linhaP2 = tabelaProdutos.querySelector('tr[data-id="P2"]');
      if (linhaP2) tabelaProdutos.deleteRow(linhaP2.rowIndex);
      linhaP2Criada = false;
      campoDescricao.value = '';
      return;
    }

    if (!checkboxConjunto.checked || descricaoOriginal == null || nomeSegundoProduto == null) {
      const d = montarDescricaoSimples();
      campoDescricao.value = d;

      const descricaoTabela = montarDescricaoTabela();
      // NÃO sobrescrever P1 se já houver uma P1 original armazenada por conta do conjunto
      if (descricaoTabela) {
        if (!(checkboxConjunto.checked && descricaoTabelaP1Original !== null)) {
          atualizarTabelaProduto('P1', descricaoTabela);
          linhaP1Criada = true;
        } else {
          linhaP1Criada = true;
        }
      } else {
        // Remove linha P1 se descrição inválida
        const linhaP1 = tabelaProdutos.querySelector('tr[data-id="P1"]');
        if (linhaP1) {
          tabelaProdutos.deleteRow(linhaP1.rowIndex);
          linhaP1Criada = false;
          descricaoTabelaP1Original = null;
        }
      }

      if (!checkboxConjunto.checked) {
        descricaoOriginal = null;
        nomePrimeiroProduto = null;
        linhaP1Criada = false;
        // Remove linha P2 se existir
        const linhaP2 = tabelaProdutos.querySelector('tr[data-id="P2"]');
        if (linhaP2) {
          tabelaProdutos.deleteRow(linhaP2.rowIndex);
          linhaP2Criada = false;
        }
      }
      return;
    }

    // Se checkboxConjunto.checked == true
    const novaSegunda = montarDescricaoTabela(); // USO intencional de montarDescricaoTabela para P2
    descricaoSegundo = novaSegunda;

    campoDescricao.value = `Conjunto de ${nomeSegundoProduto} contendo: ${descricaoOriginal}. mais, ${descricaoSegundo}`;

    if (!linhaP2Criada) {
      atualizarTabelaProduto('P2', descricaoSegundo);
      linhaP2Criada = true;
    } else {
      atualizarTabelaProduto('P2', descricaoSegundo);
    }
  }

  Object.values(campos).forEach(el => {
    el.addEventListener('input', atualizarDescricao);
    el.addEventListener('change', atualizarDescricao);
  });

  checkboxConjunto.addEventListener('change', () => {
    if (checkboxConjunto.checked) {
      descricaoOriginal = campoDescricao.value.replace(/, com colocação|, sem colocação/g, '').trim();
      nomePrimeiroProduto = campos.nome.options[campos.nome.selectedIndex]?.text.trim() || '';
      nomeSegundoProduto = null;
      descricaoSegundo = null;
      linhaP2Criada = false;

      // ARMAZENA a descrição atual da tabela P1 para impedir alterações posteriores
      const linhaP1 = tabelaProdutos.querySelector('tr[data-id="P1"]');
      if (linhaP1) {
        descricaoTabelaP1Original = linhaP1.cells[1].textContent;
      } else {
        // se não houver linha ainda, gera e armazena a descrição atual de tabela (se válida)
        const descTabela = montarDescricaoTabela();
        descricaoTabelaP1Original = descTabela || null;
      }

      campos.nome.focus();
    } else {
      descricaoOriginal = null;
      nomePrimeiroProduto = null;
      nomeSegundoProduto = null;
      descricaoSegundo = null;
      linhaP2Criada = false;
      linhaP1Criada = false;
      descricaoTabelaP1Original = null;
      const linhaP2 = tabelaProdutos.querySelector('tr[data-id="P2"]');
      if (linhaP2) tabelaProdutos.deleteRow(linhaP2.rowIndex);
    }
  });

  campos.nome.addEventListener('change', () => {
    if (checkboxConjunto.checked && descricaoOriginal != null) {
      nomeSegundoProduto = campos.nome.options[campos.nome.selectedIndex]?.text.trim() || '';
      descricaoSegundo = montarDescricaoTabela(); // USO intencional de montarDescricaoTabela para P2

      campoDescricao.value = `Conjunto de ${nomeSegundoProduto} contendo: ${descricaoOriginal}. mais, ${descricaoSegundo}`;

      // Ao trocar o produto enquanto conjunto está marcado, só cria/atualiza P2
      atualizarTabelaProduto('P2', descricaoSegundo);
      linhaP2Criada = true;
    } else {
      atualizarDescricao();
    }
  });

  atualizarDescricao();
});
</script>