@extends('Layouts.authFrontLayout',['classBody'=>"  page-template-default page   page-wrapper-account page-wrapper-page  container-max-width show-bottom-nav"])
@section('title')
   {{__('Validation Code')}}
@endsection
@section('content')
     <main id="main">
      <div class="container container-single-post">
        <nav class="breadcrumb">
          <nav class="page-wrapper-breadcrumb breadcrumb">
            <a href="/">{{__('Home')}}</a>&nbsp;&#47;&nbsp;{{__('Validation Code')}}
          </nav>
        </nav>
        <div class="row">
          <div class="col-12  post-main-content">
            <article class="post-single post-12 page type-page status-publish hentry">
              <header class="post-header">
                <h1 class="post-title">{{__('Validation Code')}}</h1>
                </h1>
              </header>
              <div class="post-content">
                <div class="page-wrapper">
                  <div class="page-wrapper-notices-wrapper"></div>
                  <div class="my-account-content login">
                    <div class="logo-wrapper">
                      <a href="/" class="site-logo">
                        <img width="200" height="40" src="/{{(isset($settings['logo_'.$lang]))?$settings['logo_'.$lang]:''}}" class="logo-desktop img-fluid" alt="{{(isset($settings['site_title_'.$lang]))?$settings['site_title_'.$lang]:''}}"   />
                        <img width="200" height="40" src="/{{(isset($settings['logo_'.$lang]))?$settings['logo_'.$lang]:''}}" class="logo-mobile img-fluid" alt="{{(isset($settings['site_title_'.$lang]))?$settings['site_title_'.$lang]:''}}"  />
                      </a>
                    </div>
                    <div class="u-columns col2-set" id="customer_login">
                      <div class="u-column1 col-1">
                        <h2>{{__('Validation Code')}}</h2>
                        <form class="page-wrapper-form page-wrapper-form-login login" action="{{route('Auth.doLoginValidation')}}" method="POST" >
						  <input name="routeBack" value="{{$routeBack}}" type="hidden">
						  @CSRF
                          <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('code') ? ' is-invalid' : '' }} ">
                            <label for="code">{{__('Code')}}<span class="required">*</span>
                            </label>
                            <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="code" id="code" autocomplete="code" value="{{ old('code') }}"  />
							  @if ($errors->has('code'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('code') }}</strong>
                                 </span>
                               @endif
                          </p>
                          <p class="form-row">
                            <button type="submit" class="page-wrapper-button button page-wrapper-form-login__submit lara-element-button" name="login" value="{{__('Sign In')}}">{{__('Sign In')}}</button>
                          </p>
                        </form>
                      </div>
                    </div>
				  <div class="my-account-footer">
                   <div class="otp-timer">
                        <span class="text">{{__('Remaining Time')}} :</span>
                         <span id="seconds">00</span>
                         <span class="dot">:</span>
                         <span id="minutes">00</span>
                     </div>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </main>
<style type="text/css">
      .otp-timer span{
        margin-left: 5px;
      }
      #minutes, #seconds{
        padding: 6px;
        max-width: 30px;
        border-radius: 3px;
        background-color: #ef4056;
        color:white;
      }
  </style>
@endsection
  @section('script')
 
<script>
jQuery(document).ready(function($) {
     var minutes;
    var seconds;
    var set_inteval;
    function otp_timer() {
        seconds -= 1;
        document.getElementById('seconds').innerHTML = seconds;
        document.getElementById('minutes').innerHTML = minutes;
        if (seconds == 0) {
            if (minutes > 0) {
                seconds = 60;
                minutes -= 1;
            } else {
				window.location.href="/Auth/login";
                minutes = 0;
                document.getElementById('minutes').innerHTML = minutes;
                clearInterval(set_inteval);
                minutes = 0;
                seconds = 0;
                document.getElementById('seconds').innerHTML = '00';
                document.getElementById('minutes').innerHTML = '0';
            }
        }
    }
 
        minutes = 2;
        seconds = 60;
        document.getElementById('seconds').innerHTML = seconds;
        document.getElementById('minutes').innerHTML = minutes; 
        set_inteval = setInterval(otp_timer, 1000 );
     
});
 
</script>
@endsection