@extends('hiremee-revamp.layouts.main-layout')
@section('pageTitle', 'HireMee- Contact Us')
@section('content')

<style type="text/css">
      .iti{
        display: block;
        margin-bottom: 18px;
      }
      .iti__dropdown-content input[type="text"]{
        background: #fff;
        border: 0;
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 5%);
        border: 1px solid rgba(26, 15, 9, 0.1);
        padding-left: 10px;
      }
  #mobile_code{
    position: absolute;
    z-index: 9;
    width: 47px;
    background: none;
    border: 0;
    left: 60px;
    box-shadow: none;
    border-right: 1px solid rgba(26, 15, 9, 0.1);
    border-radius: 0;
    padding: 0px;
    padding-left: 10px;
  }
  #exam_mobile_code{
    position: absolute;
    z-index: 9;
    width: 40px;
    background: none;
    border: 0;
    left: 60px;
    box-shadow: none;
    border-right: 1px solid rgba(26, 15, 9, 0.1);
    border-radius: 0;
    padding: 0px;
    padding-left: 10px;
  }
 
  .iti--allow-dropdown input.iti__tel-input, .iti--allow-dropdown input.iti__tel-input[type=tel]
  {
      padding-left: 100px !important;
  }
  .iti__dropdown-content .iti__search-input{
        margin: 0px;
  }
  #contact div input {
     margin-bottom: 0px; 
  }
</style>

 <div class="clearfix"></div>
    <div class="container-fluid innerBannerBottom darkGreen-bg">
      <nav id="breadcrumbs">
        <ul>
          <li><a href="/">Home</a></li>
          <li> Contact Us</li>
        </ul>
      </nav>
    </div>
    <!-- Header Container / End -->
    <section class="promo active padding-top-70 padding-bottom-50">
      <div class="container text-center">
        <div class="row">
          <div class="promo__content aos-animate col-md-12">
            <h1>
              Contact Us</span>
            </h1>

          </div>

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

    <section class="margin-bottom-70 margin-top-70">

      
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="utf-contact-location-info-aera margin-bottom-50">
              <div id="utf-single-job-map-container-item">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.633119546747!2d77.51287037507574!3d12.931285687380452!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae3e581fc19acd%3A0xfc035013b58d269c!2sHireMee!5e0!3m2!1sen!2sin!4v1699257182743!5m2!1sen!2sin" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-lg-4">
          <div class="utf-boxed-list-headline-item margin-bottom-35">
                  <h3><i class="icon-feather-map-pin"></i> Office Address</h3>
              </div>
          <div class="utf-contact-location-info-aera margin-bottom-50">
             
            <div class="contact-address">
             
              <ul>
                <h3>Registered Office Address</h3>
                <li>
                  {!! trans('validation.general.view_footer_address') !!}
                </li>
                <br>
                <h3>Chennai (India)</h3>
<li>
                  5th Floor, Block 3, A3 & A4,<br>
                  Olympia National Towers,<br>
                  North Phase, Guindy Industrial Estate, <br>
                  Chennai – 600032,<br>
                  Tamil Nadu, India
</li>
<br>
                <h3>USA</h3>
                <li>
                                  120 West Trinity Place,<br>
                                  4th Floor, Room 4113,<br>
                                  Decatur, GA 30030
                </li>
                <br>
                <h3>United Arab Emirates (UAE)</h3>
                <li>
                                  The Loft West,<br>
                                  Opp Dubai Opera,<br>
                                  Dubai
                </li>

                <!-- <h3 class="margin-top-30">Delivery Address</h3>
                <li>
                 
                        Hiremee,a Unit of,<br>
                        Karpaga Assessment App Matrix Services Pvt. Ltd.<br>
                        
                        SBT Towers, 2nd Floor,<br> Smaran Building, No. 4/2, Millers Road,<br> Bangalore – 560 052.

                </li> -->
              </ul>
            </div>
          </div>        
          </div>
          <div class="col-xl-8 col-lg-8" id="contact-us-section-div">
              <section id="contact" class="margin-bottom-50">
                <div class="utf-boxed-list-headline-item margin-bottom-35">
                  <h3><i class="icon-material-outline-description"></i> Enquiry Form</h3>
                </div>
                <form name="contactform" id="js_contactus_form" method="POST" action="{{ url('contactusmail') }}">
                  <input type="hidden" name="_token" value="{{ csrf_token() }}">
                  <div class="form-container fix bg-opacity-blue-85 padding-top-50">
                    <div class="row">
                      <div class="col-md-6">
                        <label>Name *</label>
                        <input type="text" class="form-control" name="name" id="name"/>
                      </div>
                      <div class="col-md-6 country_code_div country_code_div_exam" id="online_exam_country_code_div">
                        <label>Mobile Number *</label>
                        <input type="hidden" name="countryCode" id="countryCode">
                        <input type="hidden" class="dial_code_exam" name="dialCode" id="dialCode" value="-1">
                        <input type="hidden"  id="code" name ="code" value="-1" >
                        <input class="form-control" id="exam_mobile_code" name="exam_mobile_code" type="text" value="+91" style="padding: 1px;" readonly/>
                        <input class="form-control phone mobile11" id="mobile_number" name="mobile_number" placeholder="Mobile Number *" type="tel" maxlength="15" value="" onkeypress="return onlyNumberKey(event,11)"/>
                      </div>
                      <div class="col-md-6">
                        <label>Email Address *</label>
                        <input type="email" class="form-control" name="email_address" />
                      </div>
                      
                      <div class="col-md-6">
                        <div class="form-group contactEnqu">
                          <label>Subject </label>
                           <select name="csubject" class="selectpicker" data-live-search="true">
                                <option disabled selected value>Choose Subject</option> 
                                <option value="1">Candidate - General</option>
                                <option value="2">Candidate - Others</option>
                                <option value="3">Candidate - Assessment Related Queries</option>
                                <option value="4">College - General</option>
                                <option value="5">College - Others</option>
                                <option value="6">College - Assessment Related Queries</option>
                                <option value="7">Corporate - General</option>
                                <option value="8">Corporate - Others</option>
                                <option value="9">Media - General</option>
                                <option value="10">Media - Others</option>
                            </select>
                         
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label>Your Comment  </label>
                          <textarea class="utf-with-border" name="contact_message" id="contactus_message" cols="30" rows="3" placeholder="Comment"></textarea>
                        </div>
                      </div>

                      <div class="col-md-5"> 
                        {!! NoCaptcha::renderJs() !!}
                           {!! NoCaptcha::display() !!}
                          <div id="js-error-cap"></div>
                     </div>
                      <div class="form-group col-md-12 termAndCondition captcha margin-bottom-20">
                        <input type="checkbox" name = "termCheck" class="termCheck"/> <span>I agree to the <a href="/termsofuse" target="_blank"><u>Terms and conditions</u> </a> & <a href="/privacypolicy" target="_blank"><u>Privacy Policy</u> </a></span>
                      </div>
                    </div>
                    <button type="Submit" class="theme-btn log-in-button margin-bottom-30" id="js_contactus_button" style="margin-top: 14px;">Submit Query </button>
                  </div>
                </form>
              </section>
            </div>
          </div>







      </div>
    </section>
    {{--@include('hiremee-revamp.partials.new-subscription') --}}
  </div><!-- Wrapper -->

<script type="text/javascript">
LoadMobileCountryCode();
  function LoadMobileCountryCode()
  {
      const inputs = document.querySelectorAll(".mobile11");
      window.telinputmain = [];
      var phone_number = inputs.forEach((input,index) => {
        refreshCountryDropdownData(input,index,'');
      });
  }
  
function refreshCountryDropdownData(inputele,index,selectedCountry){
    var mobile = intlTelInput(inputele, {
      separateDialCode: true,
      autoPlaceholder: true,
      initialCountry: (selectedCountry!=='') ? selectedCountry : "in",
      geoIpLookup: function(callback) {
            $.get('proxy.php', function() {}).always(function(resp) {
              var countryCode = (resp && resp.country) ? resp.country : "";
              callback(countryCode);
            });
          },
      // utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
      utilsScript: "{{ secure_asset('assets/hiremee-revamp/intl-tel-input-master/build/js/utils.js?1711489147110')}}"
  });
    inputele.addEventListener('countrychange',function(){
    if(inputele.closest('.country_code_div').id == 'online_exam_country_code_div'){
      $('.country_code_div_exam').find("#exam_mobile_code").val("+" + mobile.getSelectedCountryData().dialCode);
    }else{
      $('.country_code_div_reset').find("#mobile_code").val("+" + mobile.getSelectedCountryData().dialCode);
    }
    $("#dialCode").val(mobile.getSelectedCountryData().dialCode);
    $('.iti__dropdown-content').find(".iti__search-input").val('');
    refreshCountryDropdownData(inputele,index,mobile.getSelectedCountryData().iso2);
    // $("#countryCode").val($(this).data('country-code-code'));
  });
  window.telinputmain[index] = mobile;
}

function onlyNumberKey(evt,type=0) {
  var ASCIICode = (evt.which) ? evt.which : evt.keyCode
  if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)){
      return false;
  }else{
    let result = evt.target.value.replaceAll(' ','');
    // let result = $("#mobile_number").val().replaceAll(' ','');
    // $("body").find(".cls_mob_number").val(result).trigger('change');
    if(type == 11){
      var str = $(".country_code_div_exam").find("#mobile_number").val();
    }else{
      var str = $("#mobile_number").val();
    }
    var regex = /[0-9]/g; // only count numbers
    // var regex = /[a-zA-Z0-9]/g; // only count letters and numbers
    if(str.match(regex).length > 14){
      return false;
    }
    return true;
  }
  return true;
}
window.onload = Scrolldown;
function Scrolldown() {
  var a = window.location.hash.substring(1);
  if(a === 'contact-us-section'){
    setTimeout(() => {
      let destination = document.getElementById("contact-us-section-div");
      let scrollPosition = destination.offsetTop;
      let animationDuration = 1000;
      $('html, body').animate({
          scrollTop: scrollPosition
      }, animationDuration, function() {
      document.getElementById('name').focus(); // Set focus to the input field
    });
    }, 50);    
  }
}
</script>

@endsection