simulator.html.erb

<div class="poupador-simulator" data-controller="poupador">
  <% lead = local_assigns[:newsletter_lead] || @newsletter_lead %>
  <%= hidden_field_tag 'lead[id]', lead.try(:id), data: { target: 'poupador.id', path: send_email_newsletter_leads_path }  %>
  <p class="t-light-gray text-center">Esta é apenas uma simulação aproximada da sua economia.</p>
  <span class="hr very-light-gray"></span>
  <div data-target="poupador.calculator">
    <div class="row">
      <div class="col text-center">
        <%= image_pack_tag 'images/icons/icone-colaboradores.png', style: 'max-width: 100px;' %>
        <h6 class="t-light-gray">Número de Colaboradores</h6>
        <div class="form-group">
          <input type="number" min="1" data-target="poupador.employees" class="form-control" placeholder="Nº Funcionários" data-action="change->poupador#validate" />
          <div class="invalid-feedback">
          </div>
        </div>
      </div>
      <div class="col text-center">
        <%= image_pack_tag 'images/icons/icone-dinheiro.png', style: 'max-width: 100px;' %>
        <h6 class="t-light-gray">Custo mensal</h6>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text font-weight-bold t-gray">R$</span>
          </div>
          <input type="tel" data-target="poupador.amount" class="form-control rounded-right" placeholder="Valor do Benefício" data-action="change->poupador#validate"/>
          <div class="invalid-feedback">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button data-action="click->poupador#calculate" class="btn btn-action btn-lg t-all-caps font-weight-bold btn-block"><%= icon 'piggy-bank' %> Simular</button>
      </div>
    </div>
  </div>

  <div data-target="poupador.resultContent" class="d-none">
    <div class="row">
      <div class="col py-3 t-gray text-center border-bottom">
        <h5><%= icon 'credit-card' %> Sem Poupador: R$ <span data-target="poupador.fullresult"></span></h5>
      </div>
    </div>
    <div class="row">
      <div class="col py-3 text-center">
        <h4 class="t-all-caps font-weight-bold text-dark-blue"><%= icon 'piggy-bank' %> <%= icon 'plus-circle', add_class: 'h5' %> <%= icon 'credit-card' %> Com poupador: <br> R$ <span data-target="poupador.result"></span></h4>
      </div>
    </div>
    <div class="row">
      <div class="col text-center">
        <div class="bg-yellow rounded shadow-sm p-3 position-relative">
          <%= icon 'piggy-bank', add_class: 'h1 t-transporte' %>
          <h2 class="text-shadow-sm font-weight-bold t-all-caps text-white">  Você economiza: <br> R$ <span data-target="poupador.economy"></span></h2>
          <div class="icon-wrapper text-shadow-sm" style="top: -1rem; right: -1rem">
            <%= icon 'certificate', add_class: 'h1 t-transporte with-content' %>
            <div class="content font-weight-bold text-white">
              -30%
            </div>

          </div>

        </div>
      </div>
    </div>
    <div class="row my-3">
      <div class="col">
        <button data-action="click->poupador#leadForm" data-target="poupador.leadBtn" class="btn btn-action btn-lg t-all-caps font-weight-bold btn-block">Quero economizar agora </button>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button data-action="click->poupador#reset" class="btn btn-secondary t-all-caps font-weight-bold btn-block"><%= icon 'arrow-left' %> Fazer nova simulação</button>
      </div>
      <div class="col">
        <button data-action="click->poupador#sendEmail" data-target="poupador.emailBtn" class="btn btn-primary t-all-caps font-weight-bold btn-block"><%= icon 'envelope-open-text' %> Enviar simulação para o meu e-mail.</button>
      </div>
    </div>
  </div>
</div>