@extends('layouts.home') 
@section('title',$title)
@section('content')

<div class="container">
  <div class="row justify-content-center pt-5">
    <div class="col-xl-7 col-12">
      <div class="text-center pb-5">
        <a href="{{ secure_url('/') }}"><img class="img-responsive" width="33%" src="{{secure_asset('assets/images/HireMee.png')}}"></a>
      </div>
               <span id="msgs"></span>

     @if($message = Session::get('success'))
              <div class="alert alert-success alert-dismissible d-flex flex-row-reverse justify-content-between align-items-center" role="alert">
               <button type="button" class="close p-0" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               {{ $message }}
              </div>
      @elseif($message = Session::get('error'))
       <div class="alert alert-danger alert-dismissible d-flex flex-row-reverse justify-content-between align-items-center" role="alert">
               <button type="button" class="close p-0" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               {{ $message }}
              </div>
        @endif
        <span id="common-error"></span>
        {{ Form::open(array('url'=>'otp-verify','method'=>'POST','id'=>'pooled-otp-verify','class'=>'form-horizontal')) }}
          {{  Form::hidden('temp_id',$temp_id,array('id'=>'temp_id')) }}
          {{  Form::hidden('mobile_number',$mobile_number) }}
          {{  Form::hidden('email',$email_address) }}


      <div class="card borderless-card ">
        <div class="card-block z-depth-5">
          <div class="row p-15">
            <div class="col-xl-12">
              <h4 class="f-20 g-l-b">{{ $title }}</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:;" title="Step 1" class="nav-link active">
                        <span class="round-tab">
                          1
                        </span>
                        <span class="wizard-text-reg">
                          Registration
                        </span>
                      </a>
                    </li>
                                        <li></li>

                    <li role="presentation" class="nav-item">
                      <a href="javascript:;" title="Step 2" class="nav-link active">
                        <span class="round-tab">
                          2
                        </span>
                        <span class="wizard-text-reg">
                          OTP Verification
                        </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="row p-15">
            <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="assets/images/regMobile.png">
                </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="6" 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="5" 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_code','',array('class'=>'form-control','required','placeholder'=>'OTP','autocomplete'=>'off' )) }}
                  </div>
                </div>
                <div class="col-sm-12 form-group col-lg-12">
                  <div class="media">
                    <p class="p-t-5"><i class="text-info hiremee-info f-18"></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 class="timer" id="timer">  </span></h3>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row p-t-30 justify-content-center">
            <div class="col-xl-6 col-md-6 col-sm-6 col-12">
               {{ Form::submit(\Lang::get('validation.pooled_campus_submit'),array('class'=>'btn f-16 btn-primary btn-block','id'=>'pooled-otp-verify')) }}
               
                <p class="text-center"><span class="text-center resend-error"></span></p>
                <span class="resend-msg d-none" id="sending" >Sending...</span>
                  {{ Form::close() }}
            </div>
            <div class="col-xl-6 col-md-6 col-sm-8 col-12 d-flex align-items-center">
                <a href="javascript:;" class="btn text-warning btn-sm f-14 waves-effect resend" id="resend_otp"><i class="hiremee-refresh"></i> Resend</a>
            </div>
          </div>
            </div>
          </div>
          <div class="clearfix"></div>
          
        </div>
      </div>

      <div class="text-center">

        <ul class="list-inline">
          <li class="list-inline-item p-10"><a class="text-333" href="{{ secure_url('/') }}">Home</a></li>
          <li class="list-inline-item p-10"><a class="text-333" href="{{ secure_url('contact-us') }}">Contact us</a></li>
          <li class="list-inline-item p-10"><a class="text-333" href="{{ secure_url('privacypolicy') }}">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 src="{{ secure_asset('assets/js/pooled-campus-custom.js') }}"></script>
  <script type="text/javascript">

    $(document).ready(function(){
      var timer;
      var bind_count = 0;
      var gentime = new Date('{{$now}}').getTime();
      $(document).ready(function(){
          var est_time =moment('{{$start_otp_time}}').add(3,'m').toDate();
          timer_function(gentime,est_time);
      });
    });


    function timer_function(starttime,endtime){
      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("timer").innerHTML =  minutes + "m " + seconds + "s";
        ii++;
        if (distance < 0) {
          clearInterval(timer);
          document.getElementById("timer").innerHTML = "OTP Expired";
        }
      }, 1000);
    }

    //function call twice so i used unbind method.
    $('#resend_otp').unbind().click(function(){
        var temp_id = $('#temp_id').val();
        
        swal({
        html: true, 
        title: '<span class="sweet-info-text">Are you sure to resend OTP?</span>', 
        type: "info",
        showCancelButton: true,
        confirmButtonText: "OK",
        closeOnConfirm: false,
        confirmButtonColor: '#28e1bd',
    },function(isConfirm) {
      swal.close();
        if (isConfirm) {

          //$("#sending").removeClass('d-none');
          $("#resend_otp").hide();

          $.ajax({
              type:'POST',
              url:'{{ url("otp/resend") }}',
              data:{temp_id:temp_id,_token:"{{ csrf_token() }}"},
              dataType:'JSON',
              success:function(data){
                $("#sending").addClass('d-none');
                if(data.code=='200'){                  
                    swal({
                      html: true, 
                      title: '<span class="sweet-success-text">OTP resent successfully</span>', 
                      text: 'OTP resent successfully.Please check your email or mobile',
                      type: 'success',
                      showCancelButton: false,
                      confirmButtonText: "OK",
                      closeOnConfirm: false
                      });
                      var now = new Date(data.now).getTime();
                      var endtime = moment(now).add(3,'m').toDate();
                      timer_function(now,endtime);
                    $("#resend_otp").show();
                }else{
                  $("#resend_otp").show();
                    //$('#resend_otp').remove();
                    $('#common-error').html("<div class='alert alert-danger'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>"+data.message+"</strong></div>");
                   /*$('#msgs').html("<div class='alert alert-danger'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>"+data.message+"</strong></div>");*/
                }
              }
          });
       
        }
      });

       
    });

  </script>
@endsection