404

D7net
:/ var / www / html / crsys /
Filename : descricao2.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)" />
</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>
  <br><br>
  <strong>Descrição:</strong>
  <p id="descricao_saida"></p>
</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'), // select
    largura: document.getElementById('largura'),
    altura: document.getElementById('altura'),
    emCurva: document.getElementById('em_curva'),
    borda: document.getElementById('com_borda'),
    colocacao: document.getElementById('com_colocacao'),
    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'),
	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')
  };

  const campoDescricao = document.getElementById('descricao_saida');
  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;
    }

    // Inserir Saiatão se qualquer checkbox calc_Saia estiver marcado
	 const algumFronMarcado =
      campos.FronSup.checked ||
      campos.FronInf.checked ||
      campos.FronDir.checked ||
      campos.FronEsq.checked;

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

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


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

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

      if (campos.colocacao.checked) {
        adicionais.push('com colocação');
      } else {
        adicionais.push('sem colocação');
      }

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

    campoDescricao.textContent = 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>