@extends('hiremee-revamp.layouts.main-layout')
@section('pageTitle', 'HireMee - Event Registration')
@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 input[type="text"]{
        margin-bottom: 0px;
  }
  .iti__search-input{
    margin-bottom: 0px !important;
  }
  /*#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>Registration</li>
        </ul>
      </nav>
    </div>
    <section class="promo active padding-top-70 padding-bottom-50 promo_event_registration" style="height: 600px;">
      <!-- <div class="container text-center">
        <div class="row">
          <div class="promo__content aos-animate col-md-12">
            <h1>
              Registration</span>
            </h1>

          </div>

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

<section class="margin-bottom-70 margin-top-70">
      <div class="container">
        <div class="row">
          <div class="col-xl-4 col-lg-4">
              <div class="utf-boxed-list-headline-item margin-bottom-35">
                  <h3><i class="icon-material-outline-description"></i>About Webinar</h3>
              </div>
          <div class="utf-contact-location-info-aera margin-bottom-50">             
            <div class="contact-address">             
              <ul style="padding: 0px 5px 0px 5px;">
                <!-- <h3>Registered Office Address</h3> -->
                <li style="font-size: 18px; line-height: 30px !important;">
                  <strong>Shaping the Future :</strong> Empowering Students Through Career Readiness.<br>
                  Join Us for the Ultimate Career Readiness Webinar!<br>
                  <strong>Date - </strong> 23rd May 2024<br>
                  <strong>Time - </strong>11 AM IST<br>
                  <strong>To Know more </strong><a href="https://hiremee.co.in/events/unlock-your-potential-join-us-for-the-ultimate-career-readiness-webinar" style="color: #52cf04;">Click Here</a>
                </li>
              </ul>
             
            </div>
          </div>        
          </div>
          <div class="col-xl-8 col-lg-8">
              <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>Event Registration Form</h3>
                </div>
                <form name="contactform" id="js_event_registration_form" method="POST" action="{{ url('eventregistration') }}">
                  <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 <span style="color:red">*</span></label>
                        <input type="text" class="form-control" name="name" />
                      </div>
                      <div class="col-md-6">
                        <label>Email Address <span style="color:red">*</span></label>
                        <input type="email" class="form-control" name="email_address" />
                      </div>
                      <div class="col-md-6 country_code_div country_code_div_exam" id="online_exam_country_code_div">
                        <label>Mobile Number <span style="color:red">*</span></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" value="" onkeypress="return onlyNumberKey(event,11)"/> -->

                      <input type="hidden" class="dial_code" name="dialCode" id="dialCode" value="-1">
                      <input class="utf-with-border phone cls_mob_number mobile_number_loader" id="mobile_number" name="mobile_number" type="tel" value="" data-form="1" maxLength="20"/>
                      </div>
                      <div class="col-md-6">
                        <label>School Name </label>
                        <input type="text" class="form-control" name="school_name" maxlength="250" />
                      </div>
                      <div class="col-md-6">
                        <label>State </label>
                        <input type="text" class="form-control" name="state_name" maxlength="200"/>
                      </div>
                      <div class="col-md-6">
                        <label>District </label>
                        <input type="text" class="form-control" name="district_name" maxlength="200"/>
                      </div>
                      <div class="col-md-5" style="margin-top: 10px;"> 
                        {!! 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 js_event_registration_button" id="js_event_registration_button" style="margin-top: 14px;">Register</button>
                  </div>
                </form>
              </section>

            </div>
          </div>
      </div>
    </section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script type="text/javascript">
  // $(document).ready(function() { loadMobileCodeWithCountry1(); });
  loadMobileCodeWithCountry1();

</script>
<!-- <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;
}
</script> -->

@endsection