@extends('layouts.home')
@section('title',trans('core.title_candidate_register'))
@section('content')
<div class="container">
	<div class="hme-loading-mask">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
  </div> 
	<div class="row mt-8 justify-content-center pt-5">
		<div class="col-xl-7 col-12">
			<div class="text-center pb-5">
				<a href=""><img class="img-responsive" width="33%"  src="{{ secure_asset('assets/images/hiremee-logo.png') }}" alt="HireMee logo"></a>
			</div>
			<div class="card borderless-card ">
				@if($token)
					{{ Form::open(array('url'=>'candidate/page_otp_verification'.'?token='.$token,'method'=>'POST','name'=>'OTPForm','id'=>'OTPForm','class'=>'','autocomplete'=>'off')) }}
				@else
					{{ Form::open(array('url'=>'candidate/page_otp_verification','method'=>'POST','name'=>'OTPForm','id'=>'OTPForm','class'=>'','autocomplete'=>'off')) }}
				@endif
				{!! Form::hidden('is_gold_updrade',$token ? $token:"",array('id'=>'is_gold_updrade')) !!}

				<div class="card-block z-depth-5">
					<div class="row p-10">
						<div class="col-xl-12">
							<h4 class="f-20 g-l-b">Candidate Registration</h4>
							<div class="reg-wizard m-b-10">
								<div class="wizard-inner">
									<div class="connecting-line1"></div>
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="nav-item">
											<a href="javascript:void(0)" title="Step 1" class="nav-link active">
												<span class="round-tab">
													1
												</span>
												<span class="wizard-text-reg">
													Registration
												</span>
											</a>
										</li>
										<li role="presentation" class="nav-item">
											<a href="javascript:void(0)" title="Step 2" class="nav-link active">
												<span class="round-tab">
													2
												</span>
												<span class="wizard-text-reg">
													OTP Verification
												</span>
											</a>
										</li>
										<li role="presentation" class="nav-item">
											<a href="javascript:void(0)" title="Step 3" class="nav-link disabled">
												<span class="round-tab">
													3
												</span>
												<span class="wizard-text-reg">
													Set Password
												</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<span id="success-message"></span>
					 <span id="otpre-error"></span>
					<div class="row p-10">
						<div class="col-xl-6 col-md-6 col-sm-6 col-12">
							<div class="row">
								<div class="col-sm-12 text-center form-group col-lg-12">
									<img src="{{ secure_url('assets/images/OTP-Phone.png') }}" style="width: 70%!important">
								</div>
							</div>
						</div>
						<div class="col-xl-6 col-md-6 col-sm-6 col-12">
							<div class="row">
								<div class="col-sm-12 form-group col-lg-12 form-radio">
                                    <div class="input-group input-group-primary2">
                                       
                                       <div class="p-t-5 p-l-10">
                                            <div class="radio radio-inline">
                                                <label>
                                                    <input type="radio" name="otp_verify_type" value="1" required checked class="js-pro-otp_verify_type">
                                                    <i class="helper"></i>E-Mail
                                                </label>
                                            </div>
                                            <div class="radio radio-inline">
                                                <label>
                                                    <input type="radio" name="otp_verify_type" value="2" class="js-pro-otp_verify_type">
                                                    <i class="helper"></i>Mobile
                                                </label>
                                          </div>
                                        </div>
                                    </div>
                                </div>

								<div class="col-sm-12 col-lg-12">
									<div class="input-group input-group-primary2">
										<span class="input-group-addon" id="basic-addon1"><i class="hiremee-closed-lock"></i> <sup class="mandatory">*</sup></span>
										{{ Form::text('otp','',array('id'=>'js-OTP','class'=>'form-control js-pro-otp_input','placeholder'=>'Enter the OTP')) }}
									</div>
										{{ Form::hidden('hmobile_number',$mobile_number,array('id'=>'js-hmobile_number')) }}
										{{ Form::hidden('hregister_id',$register_id,array('id'=>'js-hregister_id')) }}
                                        
								</div>
								<div class="col-sm-12 form-group col-lg-12">
									<div class="media">
										<p class="p-t-5"><i class="icofont round-info f-16 icofont-info"></i></p>
										<div class="media-body m-l-10">
											<p class="text-info l-h-16 f-11">Do not press refresh OR back button <br> The OTP code will be valid only for 3 minutes</p>
											<h3 class="text-danger f-w-400 f-18"><i class="hiremee-clock p-t-5"> </i> <span id="timelimit" ></h3>
										</div>
									</div>
								</div>
							</div>
							       <div class="row p-t-30 justify-content-center">
                        <div class="col-xl-6 col-md-6 col-sm-8 col-12">
                         {{ Form::submit("Validate OTP",array('class'=>'btn f-16 btn-primary waves-effect md-trigger','id'=>'pooled_register')) }}
                        </div>
                         <div class="col-xl-6 col-md-6 col-sm-8 col-12 d-flex align-items-center">
                    <a href="javascript:://" id="js-resend" class="btn text-warning btn-sm p-l-0 f-14 waves-effect"><i class="hiremee-refresh"></i> Resend OTP</a>     
                      </div>
                    </div>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
				{{ Form::close() }}
			</div>

			<div class="text-center">

				<ul class="list-inline">
					<li class="list-inline-item p-10"><a class="text-333" href="#">Home</a></li>
					<li class="list-inline-item p-10"><a class="text-333" href="#">Contact us</a></li>
					<li class="list-inline-item p-10"><a class="text-333" href="#">Privacy Policy</a></li>
					<li class="list-inline-item p-10"><a class="text-333" href="{{ secure_url('termsofuse') }}">Terms of use</a></li>
				</ul>
				<p class="f-11">Copyright &copy; {{date('Y')}}. All Rights Reserved</p>
			</div>
		</div>
	</div>
</div>
@endsection
@section('footer')
	<script type="text/javascript" src="{{ secure_asset('assets/js/moment.js') }} "></script>
   @include("candidate.registration.regpage2_script")
@endsection