404

D7net
:/ var / www / html / crsys_ant /
Filename : descricao1.php
back
<form id="form_exemplo">
<div class="row">
  <input type="number" id="qtde" placeholder="Qtde" min="1" />
  
  <!-- Substituído o input por select -->
  <select id="nome_produto">
    <option value="">Selecione um produto</option>
    <option value="1">Banco</option>
    <option value="2">Aparador</option>
    <option value="3">Lareira</option>
  </select>
  
  <input type="number" id="largura" placeholder="Largura (cm)" />
  <input type="number" id="altura" placeholder="Altura (cm)" />
</div>
<div class="row">
  <label><input type="checkbox" id="em_curva" /> Em Curva</label>
  <label><input type="checkbox" id="com_borda" /> Com Borda</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="Altura 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="Altura Saia (cm)" />
</div>
<div class="row">  
 <select id="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="meiaesquad" /> Montagem 1/2 esquadria</label>
	   <label><input type="checkbox" id="polir_duplo" /> Polir 2 Lados</label>
</div> 
<div class="row">  
 <select id="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>

<!-- Tabela para exibir ID, Produto e M² -->
<table border="1" id="tabela_produtos" style="margin-top: 20px; border-collapse: collapse; display: none;">
  <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'),
    nome: document.getElementById('nome_produto'),
    largura: document.getElementById('largura'),
    altura: document.getElementById('altura'),
    emCurva: document.getElementById('em_curva'),
    borda: document.getElementById('com_borda'),
    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('acabamento'),
    meiaEsquad: document.getElementById('meiaesquad'),
    acabRetofrontao: document.getElementById('acab_topo_frontao'),
    polirDuplo: document.getElementById('polir_duplo'),
    servico: document.getElementById('servico')
  };

  const campoDescricao = document.getElementById('item_descricao');
  const linhaProduto = document.getElementById('linha-produto');
  const tabelaProdutos = document.getElementById('tabela_produtos');

  function atualizarDescricao() {
    let descricao = '';
    let descricaoTabela = '';

    const qtdeRaw = parseInt(campos.qtde.value) || 0;
    const nomeSelect = campos.nome;
    const nome = nomeSelect.options[nomeSelect.selectedIndex]?.text.trim() || '';

    const larguraRaw = parseFloat((campos.largura.value || '').replace(',', '.')) || 0;
    const alturaRaw = parseFloat((campos.altura.value || '').replace(',', '.')) || 0;

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

    const altura = alturaRaw.toLocaleString('pt-BR', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });

    if (qtdeRaw > 1) {
      descricao += `${qtdeRaw} `;
      descricaoTabela += `${qtdeRaw} `;
    }

    if (nome && nome !== "Selecione um produto") {
      descricao += `${nome}`;
      descricaoTabela += `${nome}`;
    }

    if (campos.emCurva.checked) {
      descricao += ` em curva`;
      descricaoTabela += ` em curva`;
    }

    let medidasValidas = false;
    if (larguraRaw && alturaRaw) {
      const medidas = ` (${largura} x ${altura} cm)`;
      descricao += medidas;
      descricaoTabela += medidas;
      medidasValidas = true;
    }

    // Frontão
    const algumFronMarcado =
      campos.fronSup.checked ||
      campos.fronInf.checked ||
      campos.fronDir.checked ||
      campos.fronEsq.checked;

    const altFronRaw = parseFloat((campos.altFron.value || '').replace(',', '.')) || 0;
    let adicionouFron = false;

    if (algumFronMarcado && altFronRaw > 0) {
      const altFron = altFronRaw.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
      descricao += ` - Fron H: ${altFron}`;
      adicionouFron = true;
    }

    // Saia
    const algumaSaiaMarcada =
      campos.saiaSup.checked ||
      campos.saiaInf.checked ||
      campos.saiaDir.checked ||
      campos.saiaEsq.checked;

    const altSaiaRaw = parseFloat((campos.altSaia.value || '').replace(',', '.')) || 0;

    if (algumaSaiaMarcada && altSaiaRaw > 0) {
      const altSaia = altSaiaRaw.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
      descricao += ` - Saia H: ${altSaia}`;
    }

    // Acabamento
    const acabamentoSelect = campos.acabamento;
    const acabamentoTexto = acabamentoSelect.options[acabamentoSelect.selectedIndex]?.text.trim() || '';

    if (acabamentoTexto && acabamentoTexto !== 'Selecione Acabamento') {
      descricao += ` - ${acabamentoTexto}`;
    }

    // Adicionais
    if (nome && medidasValidas) {
      let adicionais = '';
      const adicionaisArray = [];

      if (campos.borda.checked) {
        adicionaisArray.push('com borda');
      }

      if (campos.meiaEsquad.checked) {
        adicionaisArray.push('Acabamento em 1/2 esquadria');
      }

      if (campos.acabRetofrontao.checked) {
        adicionaisArray.push('Acb. reto no Frontão');
      }

      if (campos.polirDuplo.checked) {
        adicionaisArray.push('Polimento em dois Lados');
      }

      // Serviço SEM depender de polirDuplo
      const servicoSelect = campos.servico;
      const servicoTexto = servicoSelect.options[servicoSelect.selectedIndex]?.text.trim() || '';
      if (servicoTexto && servicoTexto !== 'Selecione Serviço') {
        adicionaisArray.push(servicoTexto);
      }

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

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

      descricao += adicionais;
    }

    // Substitui texto no <textarea>
    campoDescricao.value = descricao;

    const m2 = larguraRaw * alturaRaw * (qtdeRaw > 0 ? qtdeRaw : 1);
    const m2Formatado = m2.toLocaleString('pt-BR', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });

    if (larguraRaw > 0 && alturaRaw > 0) {
      tabelaProdutos.style.display = '';
      linhaProduto.children[1].textContent = descricaoTabela;
      linhaProduto.children[2].textContent = m2Formatado;
    } else {
      tabelaProdutos.style.display = 'none';
    }
  }

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

  atualizarDescricao();
});
</script>