@extends('hiremee-revamp.layouts.main-layout')
@section('pageTitle', 'Global Mentorships Initiative Registration - HireMee')
@section('content')
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{ secure_asset('assets/hiremee-revamp/css/free-job-post.css') }} " />
<!-- Hiremee Icons -->
<link rel="stylesheet" type="text/css" href="{{ secure_asset('assets/css/hiremee-icons.css') }}">
      <!-- Custom.css -->
<link rel="stylesheet" type="text/css" href="{{ secure_asset('assets/css/custom.css') }}">
<link rel="stylesheet" href="{{secure_asset('assets/hiremee-revamp/css/b2c.css')}}"> 
<style>
.hme-loading-mask .hme-loading-container {
    padding: 20% 0;
}
@media screen and (width < 1210px){
  .hme-loading-mask .hme-loading-container {
      padding: 70% 0;
  }    
}
  .hiremeGoldTitle h2{
    font-size: 26px;
    text-transform: uppercase;
  }
  .logo{
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
  }
  .logo img{
    width: 220px;
  }
  .f-input-box,.f-drop-down{
    height: 48px !important;
    color: #373c41 !important;
    font-family: 'Poppins' !important;
    border:1px solid rgba(26, 15, 9, 0.1) !important;
    
  }
  .f-form-card{
    padding: 30px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    background-color:#fff;
    border-radius:10px;
   
  }
  .bg-light-green{
    background-color: #f8ffed;
  }
  .f-form-label{
    font-family: 'Poppins';
    color: #495057;
    margin-top:10px;
    margin-bottom: 0rem !important;
  }
  .bootstrap-select.btn-group .dropdown-toggle .filter-option{
    font-family: 'Poppins' !important;
    color: #373c41 !important
  }
  .btn_reset:hover {
    background-color: #df2b08 !important;
    border: 1px solid #df2b08 !important;
  }

  .invalid-text {
    width: 100%;
    margin-top: 0px;
    font-size: 14px !important;
    line-height: 1.2;
    display: block;
    color: #dc3545 !important;
    font-family: "Rubik", sans-serif !important;
  }
  @media screen and (min-width: 993px) {
   #google_captcha-error.invalid-text{
    margin-top: -20px;
   }
  }
  .success-email{
      color: green;
      font-size: 16px !important;
  }
  .hm-b2c-form-group input{
      border: 1px solid #cccccc;
  }
  .otptxt_before_input{
      color: #243d42;
      margin-bottom: 5px;
      margin-top: 15px;
      font-size: 14px;
  }
  .pricingSec{
    min-height: 100vh !important;
  }
  .hm-b2c-form-control-append > a{
    top: 10px !important;
  }

</style>

<div class="hme-loading-mask" style="display: none;">
  <div class="hme-loading-container">
   <div style="padding-left: 20px;">Processing...</div>
   <div class="hme-dual-ring"></div>
  </div>
</div> 
<div> <!-- Wrapper -->
<div class="featured-area pricingSec padding-top-45 padding-bottom-45 bg-light-green">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row justify-content-center">
 
<div class="col-md-8 f-form-card">
    <div class="hiremeGoldTitle text-center">
    <a href="\"  class="logo"><img src="{{{ URL::asset('assets/hiremee-revamp/images/logo-ver.png')}}}" alt=""></a>
      <h2>Application Form </h2>
    </div>
  {!! Form::open(['url'=>'/candidate/mentorship/registration','method'=>'POST','id'=>'mentorship_candidate_apply_form','class'=>'mentorship-candidate-apply-form']) !!}
  {!! Form::hidden('is_loaded',0,['id'=>'is_loaded']) !!}
  {!! Form::hidden('candidate_id',0,['id'=>'candidate_id']) !!}

  <input type="text" name="website" style="display:none">

    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="row">

          <div class="col-md-12 hm-b2c-form-group margin-bottom-10">
            <label class="f-form-label margin-bottom-0">Email Address<span style="color:red"> *</span></label>
            <div class="hm-b2c-form-control-append">
              <input type="email" class="f-input-box margin-bottom-0" id="email_address" name="email_address" placeholder="Your Email" />
              <a class="popup-with-zoom-anim d-none" id="student_signup_mail_verification" href="javascript:void(0)">Verify</a>
            </div>
            <input type="hidden" name="is_email_verified" value="0" id="email_verified">
            <span class="invalid-text margin-top-5 d-none" id="email_address-error"></span>
          </div>
          <div class="col-md-12 hm-b2c-form-group margin-bottom-10">
            <label class="f-form-label margin-bottom-0" >Mobile Number<span style="color:red"> *</span></label>
            <div class="hm-b2c-form-control-append">
              <input class="f-input-box  margin-bottom-0" id="mobile_number" name="mobile_number" type="text" placeholder="Mobile Number"  maxlength="10" onkeypress="return onlyNumberKey(event)"/>
              <a class="popup-with-zoom-anim d-none" id="student_signup_mobile_verification" href="javascript:void(0)">Verify</a>
            </div>
            <input type="hidden" name="is_mobile_verified" value="0" id="mobile_verified">            
            <span class="invalid-text margin-top-5 d-none" id="mobile_number-error"></span>
          </div>
          <div class="col-md-12 hm-b2c-form-group margin-bottom-10">
            <label class="f-form-label margin-bottom-0">User Name<span style="color:red"> *</span></label>
            <input type="text" class="f-input-box margin-bottom-0" name="candidate_first_name" id="candidate_first_name" placeholder="Your Name" onkeypress="return allowOnlyLetters(event,this);" maxlength="50" />
            <span class="invalid-text margin-top-5 d-none" id="candidate_first_name-error"></span>
          </div>
          <div class="col-12 margin-top-10">
            <div class="utf-no-border hm-qct-captcha">
               {!! NoCaptcha::renderJs() !!}
               {!! NoCaptcha::display() !!}
               {!! Form::hidden('google_captcha','',['id'=>'google_captcha']) !!}
               <label class="invalid-text captcha-error-class d-none" id="google_captcha-error">Please verify the captcha</label>
            </div>
         </div>
         <div class="col-md-12 form-group termTxt text-black margin-bottom-10">
            <input type="checkbox" id="terms_conditions" name="terms_conditions" class="termCheck"> <span style="color: black;font-family: 'Poppins';">I agree to the <a href="/termsofuse" class=" text-white" target="_blank"><u style="color: black;">Terms and conditions</u> </a> & <a href="/privacypolicy" target="_blank" class="text-white"><u style="color: black;">Privacy Policy</u> </a><span style="color:red">*</span> </span>
            <span class="invalid-text margin-top-5 d-none" id="terms_conditions-error"></span>
          </div>
          <div class="form-inline col-md-12">
            <div class="form-group margin-bottom-30 margin-top-20" style="display: flex;justify-content: center;">
              <button type="submit" id="mentorship_submit_btn" form="mentorship_candidate_apply_form" class="theme-btn log-in-button" style="border-radius: 22px;min-width: auto; margin-right: 20px;" title="Save">SUBMIT</button>
              <button type="button" class="theme-btn log-in-button btn_reset" style="border-radius: 22px;background: #f6664a;min-width: auto;border: 1px solid #f6664a;" title="Reset"><center>RESET</center></button>
            </div>
          </div>
      </div>
  </div>
  </div>
  {!! Form::close() !!}
</div>

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

@include('hiremee-revamp.candidate.mentorship.mentorship-signup-otp-modal')
<script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>

<script type="text/javascript">
var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/";
var is_email_edited = 0;
var email_validation_inprogress = 0;
var mobile_validation_inprogress = 0;
var is_otp_timeout = 0;
var is_otp_timeout_mobile = 0;
var otp_endtime = null; // Global variable to track OTP timer end
var otp_endtime_mobile = null; // Global variable to track OTP timer end
$(document).on('click', '.otp-close-btn', function() {
  is_otp_timeout = 0;
  is_otp_timeout_mobile = 0;
  $.magnificPopup.close(); // close OTP
  
});
$(document).on('blur',"#email_address",function(e){
  var userData  =  $(this).val();
  if(isInValidEmail(userData)) return;
  if(typeof(e.keyCode)!=undefined && userData.length>0)
  {
    emailcheckexist(userData);
  }
  else{
    $("#student_signup_mail_verification").addClass('d-none');
  }
});

function emailcheckexist(email_address){
  $('#email_verified').val(0);
  $.ajax({
    url: baseUrl + "validate-email-for-student",
    type: "get",
    data: {
      "email_address": email_address
    },
    success: function (data) { 
      if (data == '1') {
        $("#student_signup_mail_verification").addClass('d-none');
        $("#email_address-error").html('Please use your valid email address. We do not allow invalid email domain').removeClass('d-none');
      } else if (data == 'true') {
        $("#email_address-error").html('').addClass('d-none');
        $("#student_signup_mail_verification").replaceWith(`<a class="" href="javascript:void(0)" onClick="verifyEmail();" id="student_signup_mail_verification">Verify</a>`);
      } else {        
        $("#email_address-error").html('').addClass('d-none');
        $("#student_signup_mail_verification").replaceWith('<a class="popup-with-zoom-anim mail_verified_success" href="javascript:void(0)" id="student_signup_mail_verification"><span class="success-email"><i class="icon-material-outline-check-circle"></i></span></a>');
        $('#email_verified').val(1);
      }
    }
  });
  
  return false;
}
function verifyEmail()
{ 
  if(email_validation_inprogress==0 && is_otp_timeout==0)/** To check Previous Request is in Progress **/
  {
    $('#email_verified').val(0);
    email_validation_inprogress=1;
    var email_address;
    email_address = $("#email_address").val();
    $('#student_signup_mail_verification').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>');
    $('.preloader').css('opacity','0.6').show();
    $.ajax({
      url: baseUrl+'verify-email',
      type: "post",
      data: {"email": email_address},
      success: function (response) 
      {
        if (response.status == 200) {
          $.magnificPopup.close();
          setTimeout(function() {
            $.magnificPopup.open({
                items: {
                  src: '#solution_req_modal-1'
                },  
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                modal: true,
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in',
                closeOnBgClick: false,
                enableEscapeKey: false
            });
          }, 300);
      
          $('#js-resend-otp').attr('href',`javascript:verifyEmail();`);
          $('#js-resend-otp').addClass('d-none');
          is_otp_timeout = 1;          
          $('#js-otp_register').attr('disabled',false);
          $('#js-otp_register').attr('data-type',1);
          $('#js-otp_register').css('opacity','');
          $('#student_signup_mail_verification').html('Verify');  
          $(".otptxt_before_input").html("Please enter the OTP to verify your email address.");              
          var datetime = response.gentime;
          var time = new Date(datetime).getTime();  
          if (!otp_endtime) {       
            otp_endtime = moment(time).add(3,'m').toDate(); 
          }        
          countdown_timer_function(time,otp_endtime);   
        }
        else{
          $('#student_signup_mail_verification').html('Verify');
          alertMessage('warning',response.message,"Sorry");
          $(".otp-close-btn").trigger('click');
        }
        $('.preloader').css('opacity','0.6').hide();
        $('body').css('overflow-y','');
        email_validation_inprogress = 0;
      },
      error: function (response) {
          email_validation_inprogress = 0;
          $('.preloader').css('opacity','0.6').hide();
          $('body').css('overflow-y','');
          $(".otp-close-btn").trigger('click');
          $('#student_signup_mail_verification').html('Verify');
          alertMessage('danger',"Your action  has been suspended, Sorry for the inconvenience. Please try again later","Something Went Wrong");
      }
    });
  }
}
var timer;
function countdown_timer_function(starttime,endtime){
  $('#email_otp_section_timer').removeClass('d-none');
  $('#mobile_otp_section_timer').addClass('d-none');
    var ii = 0;
    clearInterval(timer);
    timer = setInterval(function() {
      var countDownDate = new Date(endtime).getTime();
      var now = moment(starttime).add(ii,'seconds');
      var distance = countDownDate - now;
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      document.getElementById("timelimit").innerHTML =  minutes + "m " + seconds + "s";
      ii++;
      // if (distance < 170000) {
      if (distance < 0) {
        clearInterval(timer);
        is_otp_timeout = 0;
        otp_endtime = null;
        document.getElementById("timelimit").innerHTML = "Time out";
        $('#js-otp_register').css('opacity','0.4');
        $('#js-otp_register').attr('disabled',true);
        $('#js-resend-otp').removeClass('d-none');
      }
    }, 1000);
}
$(document).on('blur',"#mobile_number",function(e){
  var userData  =  $(this).val();
  if(isInValidMobile(userData)) return;
  if(typeof(e.keyCode)!=undefined && userData.length>0)
  {
    mobilecheckexist(userData);    
  }
  else{
    $("#student_signup_mobile_verification").addClass('d-none');
  }
});
function mobilecheckexist(mobile){
  $('#mobile_verified').val(0);
  $.ajax({
    url: baseUrl + "validate-mobile-for-student",
    type: "get",
    data: {
      "mobile": mobile
    },
    success: function (data) {
      if (data == 'true') {
        $("#mobile_number-error").html('').addClass('d-none');
        $("#student_signup_mobile_verification").replaceWith(`<a class="" href="javascript:void(0)" onClick="verifyMobile();" id="student_signup_mobile_verification">Verify</a>`);
      } else {        
        $("#mobile_number-error").html('').addClass('d-none');
        $("#student_signup_mobile_verification").replaceWith('<a class="popup-with-zoom-anim mail_verified_success" href="javascript:void(0)" id="student_signup_mobile_verification"><span class="success-email"><i class="icon-material-outline-check-circle"></i></span></a>');
        $('#mobile_verified').val(1);
      }
    }
  }); 
  return false;
}
function verifyMobile()
{
  if(mobile_validation_inprogress==0 && is_otp_timeout_mobile==0)/** To check Previous Request is in Progress **/
  {
    $('#mobile_verified').val(0);
    mobile_validation_inprogress=1;
    var mobile_number;
    mobile_number = $("#mobile_number").val();
    $('#student_signup_mobile_verification').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>');
    $('.preloader').css('opacity','0.6').show();
    $.ajax({
      url: baseUrl+'verify-mobile',
      type: "post",
      data: {"mobile": mobile_number},
      success: function (response) 
      {
        if (response.status == 200) {
          $.magnificPopup.close();
          setTimeout(function() {
            $.magnificPopup.open({
              items: {
                src: '#solution_req_modal-1'
              },  
              type: 'inline',
              fixedContentPos: false,
              fixedBgPos: true,
              overflowY: 'auto',
              modal: true,
              closeBtnInside: true,
              preloader: false,
              midClick: true,
              removalDelay: 300,
              mainClass: 'my-mfp-zoom-in',
              closeOnBgClick: false,
              enableEscapeKey: false
          });
        }, 300);

          $('#js-resend-otp').attr('href',`javascript:verifyMobile();`);
          $('#js-resend-otp').addClass('d-none');
          is_otp_timeout_mobile = 1;          
          $('#js-otp_register').attr('disabled',false);
          $('#js-otp_register').attr('data-type',2);
          $('#js-otp_register').css('opacity','');
          $('#student_signup_mobile_verification').html('Verify');  
          $(".otptxt_before_input").html("Please enter the OTP to verify your mobile number.");              
          var datetime = response.gentime;
          var time = new Date(datetime).getTime();  
          if (!otp_endtime_mobile) {       
            otp_endtime_mobile = moment(time).add(3,'m').toDate(); 
          }        
          countdown_timer_function_mobile(time,otp_endtime_mobile);   
        }
        else{
          $('#student_signup_mobile_verification').html('Verify');
          alertMessage('warning',response.message,"Sorry");
          $(".otp-close-btn").trigger('click');
        }
        $('.preloader').css('opacity','0.6').hide();
        $('body').css('overflow-y','');
        mobile_validation_inprogress = 0;
      },
      error: function (response) {
          mobile_validation_inprogress = 0;
          $('.preloader').css('opacity','0.6').hide();
          $('body').css('overflow-y','');
          $(".otp-close-btn").trigger('click');
          $('#student_signup_mobile_verification').html('Verify');
          alertMessage('danger',"Your action  has been suspended, Sorry for the inconvenience. Please try again later","Something Went Wrong");
      }
    });
  }
}

var timer_mobile;
function countdown_timer_function_mobile(starttime,endtime){
  $('#email_otp_section_timer').addClass('d-none');
  $('#mobile_otp_section_timer').removeClass('d-none');
    var ii = 0;
    clearInterval(timer_mobile);
    timer_mobile = setInterval(function() {
      var countDownDate = new Date(endtime).getTime();
      var now = moment(starttime).add(ii,'seconds');
      var distance = countDownDate - now;
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      document.getElementById("timelimit_mobile").innerHTML =  minutes + "m " + seconds + "s";
      ii++;
      if (distance < 0) {
        clearInterval(timer_mobile);
        is_otp_timeout_mobile = 0;
        otp_endtime_mobile = null;
        document.getElementById("timelimit_mobile").innerHTML = "Time out";
        $('#js-otp_register').css('opacity','0.4');
        $('#js-otp_register').attr('disabled',true);
        $('#js-resend-otp').removeClass('d-none');
      }
    }, 1000);
}
$(document).on("click","#js-otp_register",function(e){
  if($("#js-otp_register").attr('data-type')==2) {
    validateMobileOTP();
  }
  else{
    validateEmailOTP();
  }
}); 
function validateEmailOTP()
{
    $("#js-OTP-modal-error").html('').addClass('d-none');
    var email_address;    
    email_address = $("#email_address").val();
    
    var data_num = $("#js-OTP-modal").val();
    var error_message = "";
    var data_num_id = data_num.match(/^[0-9\s]*$/);
      
    if(data_num.length == 0){
      error_message = 'Please enter OTP';
    }else if(!data_num_id){
      error_message = 'Please use digits (0–9) only.';
    }else if(data_num.length != 4){
      error_message = 'Please provide valid OTP';
    }
      
    if(error_message != " " && error_message.length != 0){
      // alertMessage('warning',error_message,'OTP');
      $("#js-OTP-modal-error").html(error_message).removeClass('d-none');
      $("#js-otp_register").text("Verify").prop('disabled',false);
    }else{
      $.ajax({
        url: baseUrl + "check-otp-verified",
        dataType: "json",
        type: "get",
        data: {
            "email_address": email_address,
            "otp": data_num
        },
        success: function (data) {
          if (data.status == 200) {
              swal({
                  html: true, 
                  title: '<span class="sweet-success-text">Done</span>', 
                  text: "Email verified successfully",
                  type: "success",
                  showCancelButton: false,
                  confirmButtonText: "OK",
                  closeOnConfirm: true,
                  confirmButtonColor: '#28e1bd',
                  allowEscapeKey: false,
                  closeOnClickOutside: false
              },function(){ 
                $.magnificPopup.close(); // close OTP
                $("#student_signup_mail_verification").replaceWith('<a class="popup-with-zoom-anim mail_verified_success" href="javascript:void(0)" id="student_signup_mail_verification"><span class="success-email"><i class="icon-material-outline-check-circle"></i></span></a>');
                  $('#email_verified').val(1);
                $('.otp-close-btn').trigger('click');
                $('#email_address-error').html('').addClass('d-none');
              });
              $("#js-OTP-modal").val("");
              $("#js-otp_register").text("Verify").prop('disabled',false);
          } else {
              $("#js-OTP-modal-error").html(data.message).removeClass('d-none');
              // alertMessage('warning',data.message,'OTP');
              $("#js-otp_register").text("Verify").prop('disabled',false);
          }
        }
      });
    }
}
function validateMobileOTP() {
    $("#js-OTP-modal-error").html('').addClass('d-none');
    var mobile_num;    
    mobile_num = $("#mobile_number").val();
    
    var data_num = $("#js-OTP-modal").val();
    var error_message = "";
    var data_num_id = data_num.match(/^[0-9\s]*$/);
      
    if(data_num.length == 0){
      error_message = 'Please enter OTP';
    }else if(!data_num_id){
      error_message = 'Please use digits (0–9) only';
    }else if(data_num.length != 4){
      error_message = 'Please provide a valid OTP';
    }
      
    if(error_message != " " && error_message.length != 0){
      // alertMessage('warning',error_message,'OTP');
      $("#js-OTP-modal-error").html(error_message).removeClass('d-none');
      $("#js-otp_register").text("Verify").prop('disabled',false);
    }else{
      $.ajax({
        url: baseUrl + "check-mobile-otp-verified",
        dataType: "json",
        type: "get",
        data: {
            "mobile": mobile_num,
            "otp": data_num,
        },
        success: function (data) {
          if (data.status == 200) {
              swal({
                  html: true, 
                  title: '<span class="sweet-success-text">Done</span>', 
                  text: "Mobile verified successfully",
                  type: "success",
                  showCancelButton: false,
                  confirmButtonText: "OK",
                  closeOnConfirm: true,
                  confirmButtonColor: '#28e1bd',
                  allowEscapeKey: false,
                  closeOnClickOutside: false
              },function(){ 
                $.magnificPopup.close(); // close OTP
                $("#student_signup_mobile_verification").replaceWith('<a class="popup-with-zoom-anim mail_verified_success" href="javascript:void(0)" id="student_signup_mobile_verification"><span class="success-email"><i class="icon-material-outline-check-circle"></i></span></a>');
                  $('#mobile_verified').val(1);
                $('.otp-close-btn').trigger('click');
                $('#js-user_mobile_signup_data-error').html('').addClass('d-none');
              });
              $("#js-OTP-modal").val("");
              $("#js-otp_register").text("Verify").prop('disabled',false);
          } else {
              $("#js-OTP-modal-error").html(data.message).removeClass('d-none');
              // alertMessage('warning',data.message,'OTP');
              $("#js-otp_register").text("Verify").prop('disabled',false);
          }
        }
      });
    }
}


window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted ||( typeof window.performance != "undefined" && window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    window.location.reload();
  }
});
function allowOnlyLetters(e, t){    
 if (window.event){    
    var charCode = window.event.keyCode;    
 }    
 else if (e){    
    var charCode = e.which;    
 }    
 else { return true; }    
 if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 32))    
     return true;    
 else{    
    return false;    
 }           
}
</script>
@endsection