{{#partial "page"}}
{{{page.content}}}
{{{region name="content_before_form_after_page_content"}}}
<div class="form-container">
<form id="evaluation-form" action="" >
  <span class="notice" style="color: red;">Fields marked with * are required.</span>
  <section>
    <div class="section-title">Contact Information</div>
    <div class="form-row">
      <div class="form-item required-item">
        <label for="firstname">First Name:</label>
        <input type="text" name="First Name" id="firstname" required>
      </div>
      <div class="form-item required-item">
        <label for="lastname">Last Name:</label>
        <input type="text" name="Last Name" id="lastname" required>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item required-item">
        <label for="company">Company:</label>
        <input type="text" name="Company" id="company" required>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item required-item">
        <label for="email">Email:</label>
        <input type="email" name="Email" id="email" required>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item required-item">
        <label for="phone">Phone:</label>
        <input type="tel" name="Phone" id="phone" required>
      </div>
    </div>
  </section>
  <section>
    <div class="section-title">Request Product</div>
    <div id="add_more">Add More</div>
    <div class="form-row">
      <div class="form-item required-item">
        <label for="model_num_1">Model No:</label>
        <input type="text" name="Model No" id="model_num_1" data-count="model_num" required>
      </div>
      <div class="form-item required-item">
        <label for="qty_1">Quantity:</label>
        <input type="text" name="Quantity" id="qty_1" data-count="qty" required>
      </div>
    </div>
    <div class="extra_products">
        
    </div>
    <div class="form-row">
      <div class="radio-label">Shipping Method:</div>
      <div class="form-item radio-input required-item">
        <input type="radio" id="ground" value="Ground" name="shipping_method" required>
        <label for="ground">Ground</label>
        <input type="radio" id="2nd_day" value="2nd Day" name="shipping_method" required>
        <label for="2nd_day">2nd Day</label>
        <input type="radio" id="next_day" value="Next Day" name="shipping_method" required>
        <label for="next_day">Next Day</label>
      </div>
    </div>
    <div class="form-row">
      <div class="radio-label">Shipping Charge Method:</div>
      <div class="form-item radio-input required-item">
        <input type="radio" id="prepaid" value="Prepaid" name="shipping_charge" required>
        <label for="prepaid">Prepaid</label>
        <input type="radio" id="paymeny_other" value="UPS/ FedEx A/C#" name="shipping_charge" required>
        <label for="paymeny_other">UPS/ FedEx A/C#</label>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item required-item fw">
        <label for="ship_to_address">Ship to Address:</label>
        <input type="text" name="Ship to Address" id="ship_to_address" required>
      </div>
      
    </div>
  </section>
  <section>
    <div class="section-title">Project Information</div>
    <div class="form-row">
      <div class="form-item-textarea required-item">
        <span class="input-desc">Short description of how the product will be utilized in your application:</span>
        <textarea name="Project Information" id="project_info" cols="30" rows="10" required></textarea>
      </div>
    </div>
    <div class="form-row">
      <div class="radio-label">Business And Industry:</div>
      <div class="form-item radio-input required-item">
        <input type="radio" id="oil_gas" value="Oil And Gas" name="Business And Industry" required>
        <label for="oil_gas">Oil And Gas</label>
        <input type="radio" id="maritime" value="Maritime" name="Business And Industry" required>
        <label for="maritime">Maritime</label>
        <input type="radio" id="factory_automation" value="Factory Automation" name="Business And Industry" required>
        <label for="factory_automation">Factory Automation</label>
        <input type="radio" id="medical_healthcare" value="Medical And Healthcare" name="Business And Industry" required>
        <label for="medical_healthcare">Medical And Healthcare</label>
        <input type="radio" id="telecom_it" value="Telecom And IT" name="Business And Industry" required>
        <label for="telecom_it">Telecom And IT</label>
        <input type="radio" id="industry_other" value="Others" name="Business And Industry" required>
        <label for="industry_other">Others:</label>

      </div>
      <div class="form-item-textarea" id="other_industry" style="display: none;">
        <textarea name="Other Industry" id="industry_other_des" cols="30" rows="10"></textarea>
      </div>
    </div>
  </section>
  <button type="submit" id="submit_form-btn">Send</button>
  <div class="sent_status-wrapper">
    <div class="sent_status sending" id="sending" style="position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 999999; display: none"><img style="display: block; margin: auto" src="/product_images/moxa_loader.svg" alt=""></div>
    <div class="sent_status sent_success" id="sent_success" style="display: none"><span>Thank you. Your query has been submitted.</span></div>
    <div class="sent_status sent_fail" id="sent_fail" style="display: none"><span>Something went wrong, please try again later or <a href="/contact">contact</a> us</span></div>
  </div>
</form>
</div>

<script>
var form = document.getElementById("evaluation-form");
form.addEventListener("submit", formSubmit);

function formSubmit(e) {
  e.preventDefault()
  $('#sending').show();
  $('.form-container button[type="submit"]')
      .attr('disabled','disabled')
      .css({
        "background-color":"#e1e1e1"
      });
  $('.form-container input, .form-container textarea').attr('disabled','disabled');
  const formData = new FormData();

  $('.form-item',form).each(function() {
    var inputname = $('input',this).attr('name');
    if($('input',this).attr('type') == 'text'){
      formData.append(
        inputname,
        $(`input[name="${inputname}"]`,this).val()
      )
    }else if($('input',this).attr('type') == 'radio') {
      formData.append(
        inputname,
        $(`input[name="${inputname}"]:checked`,this).val()
      )
    }else if($('input',this).attr('type') == 'email'){
      formData.append(
        inputname,
        $(`input[name="${inputname}"]`,this).val()
      )
    }else if($('input',this).attr('type') == 'tel'){
      formData.append(
        inputname,
        $(`input[name="${inputname}"]`,this).val()
      )
    }


  })
  formData.append(
    'Project Information',
    $.trim($(`#project_info`).val())
  )
  if($('#industry_other').is(':checked')) {
    formData.append(
      'Other Industry',
      $.trim($(`#industry_other_des`).val())
    )
  }

  fetch("https://getform.io/f/de3a73dc-11c4-4eb4-acea-a22b18676b86",
  {
    method: "POST",
    body: formData,
  })
  //.then(response => console.log('success',response))
  .then(response => {
    console.log('success',response);
    console.log('submission-success');
    
    $('#sent_success').show();
    setTimeout(function(){
      $(location).attr('href', '/submission-success/')
    },1000)
    
    
  })
  .catch(error => {
    console.log('error',error);
    $('#sent_fail').show();
    $('#sending').hide();
    $('.form-container button[type="submit"]')
      .removeAttr('disabled')
      .css({
        "background-color":"#0b8a8a"
      });
    $('.form-container input, .form-container textarea').removeAttr('disabled');
  })
}

$(document).ready(function(){
  $('[name="Business And Industry"]').click(function(){
    if($('#industry_other').is(':checked')){
      $('#other_industry').show();
    }else{
      $('#other_industry').hide();
    }
  })

  var modelQty = $('[data-count="qty"]').length;
  var modelNum = $('[data-count="model_num"]').length;
  $('#add_more').click(function(){
      
      modelNum++;
      
      modelQty++;
      var html =`<div class="form-row">`;
            html += `<div class="form-item required-item">`
            html +=  `<label for="model_num_${modelNum}">Model No:</label>`
            html +=  `<input type="text" name="Model No ${modelNum}" id="model_num_${modelNum}" data-count="model_num" >`
            html +=`</div>`
            html +=`<div class="form-item required-item">`
            html +=  `<label for="qty_${modelQty}">Quantity:</label>`
            html +=  `<input type="text" name="Quantity ${modelQty}" id="qty_${modelQty}" data-count="qty" >`
            html +=`</div>`
          html += `</div>`
      $('.extra_products').append(html)
  })
  
  
})

</script>
<style>
  .form-container{
    border: 1px solid #ccc;
    background-color: #F7F5F0;
    padding: 20px;
  }
</style>


{{/partial}}
{{> layout/base}}