{{#partial "page"}}
    {{{page.content}}}
    {{{region name="content_before_form_after_page_content"}}}


    <!-- forms -->
    <section class="max-width_container">
    <div class="form-container">
      <form id="contact-us-form" action="">
        <div class="form-item">
          <input type="hidden" id="captchaResponse" name="g-recaptcha-response">
        </div>
        <section>
          <div class="section-title">Request Information</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 class="form-item required-item">
              <label for="phone">Phone:</label>
              <input type="tel" name="Phone" id="phone" required>
            </div>
          </div>
          <div class="form-row">
            <div class="form-item required-item">
              <label for="first_name">First Name:</label>
              <input type="text" name="First Name" id="first_name" required>
            </div>
            <div class="form-item required-item">
              <label for="last_name">Last Name:</label>
              <input type="text" name="Last Name" id="last_name" 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 class="form-item required-item">
              <label for="country">Country:</label>
              <select name="Country" id="country" required>
                <option value="United States">United States</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-item required-item">
              <label for="industry">Industry:</label>
              <select name="Industry" id="industry">
                  <option value=""></option>
                  <option value="Factory Automation">Factory Automation</option>
                  <option value="CNC/DNC">CNC/DNC</option>
                  <option value="Oil & Gas">Oil & Gas</option>
                  <option value="Railway">Railway</option>
                  <option value="Transportation">Transportation</option>
                  <option value="Power">Power</option>
                  <option value="Others">Others</option>
              </select>
            </div>
            <div class="form-item required-item">
              <label for="state">State:</label>
              <select name="State" id="state">
                <option value=""></option>
                <option value="Alabama">Alabama</option>
                <option value="Alaska">Alaska</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Arizona">Arizona</option>
                <option value="Arkansas">Arkansas</option>
                <option value="Armed Forces Africa">Armed Forces Africa</option>
                <option value="Armed Forces Americas">Armed Forces Americas</option>
                <option value="Armed Forces Canada">Armed Forces Canada</option>
                <option value="Armed Forces Europe">Armed Forces Europe</option>
                <option value="Armed Forces Middle East">Armed Forces Middle East</option>
                <option value="Armed Forces Pacific">Armed Forces Pacific</option>
                <option value="California">California</option>
                <option value="Colorado">Colorado</option>
                <option value="Connecticut">Connecticut</option>
                <option value="Delaware">Delaware</option>
                <option value="District of Columbia">District of Columbia</option>
                <option value="Federated States Of Micronesia">Federated States Of Micronesia</option>
                <option value="Florida">Florida</option>
                <option value="Georgia">Georgia</option>
                <option value="Guam">Guam</option>
                <option value="Hawaii">Hawaii</option>
                <option value="Idaho">Idaho</option>
                <option value="Illinois">Illinois</option>
                <option value="Indiana">Indiana</option>
                <option value="Iowa">Iowa</option>
                <option value="Kansas">Kansas</option>
                <option value="Kentucky">Kentucky</option>
                <option value="Louisiana">Louisiana</option>
                <option value="Maine">Maine</option>
                <option value="Marshall Islands">Marshall Islands</option>
                <option value="Maryland">Maryland</option>
                <option value="Massachusetts">Massachusetts</option>
                <option value="Michigan">Michigan</option>
                <option value="Minnesota">Minnesota</option>
                <option value="Mississippi">Mississippi</option>
                <option value="Missouri">Missouri</option>
                <option value="Montana">Montana</option>
                <option value="Nebraska">Nebraska</option>
                <option value="Nevada">Nevada</option>
                <option value="New Hampshire">New Hampshire</option>
                <option value="New Jersey">New Jersey</option>
                <option value="New Mexico">New Mexico</option>
                <option value="New York">New York</option>
                <option value="North Carolina">North Carolina</option>
                <option value="North Dakota">North Dakota</option>
                <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                <option value="Ohio">Ohio</option>
                <option value="Oklahoma">Oklahoma</option>
                <option value="Oregon">Oregon</option>
                <option value="Palau">Palau</option>
                <option value="Pennsylvania">Pennsylvania</option>
                <option value="Puerto Rico">Puerto Rico</option>
                <option value="Rhode Island">Rhode Island</option>
                <option value="South Carolina">South Carolina</option>
                <option value="South Dakota">South Dakota</option>
                <option value="Tennessee">Tennessee</option>
                <option value="Texas">Texas</option>
                <option value="Utah">Utah</option>
                <option value="Vermont">Vermont</option>
                <option value="Virgin Islands">Virgin Islands</option>
                <option value="Virginia">Virginia</option>
                <option value="Washington">Washington</option>
                <option value="West Virginia">West Virginia</option>
                <option value="Wisconsin">Wisconsin</option>
                <option value="Wyoming">Wyoming</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-item-textarea required-item">
              <label for="message">Message:</label>
              <textarea name="Message" id="message" cols="30" rows="10" required></textarea>
            </div>

          </div>
        </section>
        <div class="form-actions">
            <button type="submit" id="submit_form-btn">Submit</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>
        </div>

      </form>
    </div>
    </section>


<script>
var form = document.getElementById("contact-us-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()
      )
    }else if($('input',this).attr('type') == 'hidden'){
      formData.append(
        inputname,
        $(`input[name="${inputname}"]`,this).val()
      )
    }

    var optionname = $('select',this).attr('name')
    if($(`select[name='${optionname}']`,this).val()){
      formData.append(
        optionname,
        $(`select[name='${optionname}']`,this).val()
      )
    }



  })
  formData.append(
    'Message',
    $.trim($(`#message`).val())
  )


  fetch("https://getform.io/f/0ecc2e45-735a-4c37-a742-d5fd8685bb88",
  {
    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');
  })
}


  //Google reecaptcha
     grecaptcha.ready(function() {
       grecaptcha.execute('6LcthWUbAAAAAPf-MFpYIx34c--zsYZ_pXMgFBCF', {action: 'homepage'})
       .then(function(token) {
         document.getElementById('captchaResponse').value = token;
       });
     });
  

</script>
<style>
  .form-container .form-item-textarea {
    display: flex;

  }
  .form-container .form-item-textarea.required-item label:before {
    content:  '*';
    display: inline-block;
    padding-right:  5px;
    color:  red;
  }
  .form-container .form-item-textarea label {
    width:  135px;
  }
  .form-container .form-item-textarea textarea {
    width: calc(100% - 135px);
    padding: 5px;
  }

.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 0px !important;
  bottom:50px!important; 
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

</style>
{{/partial}}
{{> layout/base}}