@extends('layout.guest.guest') @section('title') {{{ trans('site/user.login') }}} :: @parent @stop @section('content')

<!-- BEGIN: Content-->

<div class="container-fluid p-0 h-100">
                <div class="row h-100 m-0">
                    
                    <div class="col-md-8 col-lg-8 d-flex flex-column">
                        <img class="login-logo"  src="{{ url('images/thepresence.png') }}" alt="">
                        <div class="mt-auto d-none d-sm-block">
                            <div class="row justify-content-center">
                                <div class="col-md-8 text-right loginleftimage">
                                    <img src="/app-assets/images/pages/reset-password-v2.svg" alt="Register V2" class="img-fluid" />
                                    <p class="logincopyright">COPYRIGHT © 2022 <span>Staqo</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-4 bg-white loginsidebg-color">
                        <div class="px-sm-2 py-1 px-0">
                            <div class="row">
                                <div class="col-6 col-md-6">
                                    <a class="nav-link nav-link-style"><i class="ficon" data-feather="moon"></i></a>
                                </div>
                                <div class="col-6 col-md-6">
                                    <div class="nav-item dropdown dropdown-language nav justify-content-end"><a
                                            class="nav-link dropdown-toggle" id="dropdown-flag" href="#"
                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false"><i
                                                class="flag-icon flag-icon-us"></i><span
                                                class="selected-language">English</span></a>
                                        <div class="dropdown-menu dropdown-menu-end"
                                            aria-labelledby="dropdown-flag"><a class="dropdown-item"
                                                href="#" data-language="en"><i
                                                    class="flag-icon flag-icon-us"></i>
                                                English</a>
                                                <!-- <a class="dropdown-item" href="#"
                                                data-language="fr"><i class="flag-icon flag-icon-sd"></i>
                                                Spanish</a> -->
                                            </div>
                                    </div>
                                </div>
                            </div>



                            <div class="p-sm-4 py-3 px-2">
                                <div class="login-head mb-2">
                                    <h2 class="card-title font-weight-bold">Two Step Verification 💬</h2>
                                    <p class="card-text mb-2">We sent a verification code to your {{$authType}}. Enter the code from the {{$authType}} in the field below.</p>
                                    @if($authType=='mobile')
                                    <span class="numberverficnou">******{{substr($user, -4)}}</span>
                                    @else
                                    <span class="numberverficnou">{{$user}}</span>
                                    @endif
                                </div>
                                                                <form class="auth-reset-password-form mt-2" action="{{$action}}" method="POST">
                                    <input type="hidden" name="remember_token" value="{{$remember_token}}">
                                    <input type="hidden" name="type" value="{{$authType}}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">

                                    <div class="containering login-input-form verficationcodeinput">
                                        <div class="mb-6 text-center form-group">
                                            <label for=""  class="d-flex form-label">Type your 6 digit security code</label>

                                            <div id="otp" class="d-flex justify-center  form-group">
                                                <input class="form-control mr-1" id="first" type="text"
                                                    name="otp[]" aria-describedby="first" autofocus="" 
                                                    tabindex="1" maxlength="1" oninput="inputInsideOtpInput(this)" />
                                                <input class="form-control mr-1" id="second" type="text"
                                                    name="otp[]" aria-describedby="second" autofocus=""
                                                    tabindex="2" maxlength="1" oninput="inputInsideOtpInput(this)" />
                                                <input class="form-control mr-1" id="third" type="text"
                                                    name="otp[]" aria-describedby="third" autofocus=""
                                                    tabindex="3" maxlength="1" oninput="inputInsideOtpInput(this)" />
                                                <input class="form-control mr-1" id="fourth" type="text"
                                                    name="otp[]" aria-describedby="fourth" autofocus=""
                                                    tabindex="4" maxlength="1" oninput="inputInsideOtpInput(this)" />
                                                <input class="form-control mr-1" id="fifth" type="text"
                                                    name="otp[]" aria-describedby="fifth" autofocus=""
                                                    tabindex="5" maxlength="1" oninput="inputInsideOtpInput(this)" />
                                                <input class="form-control mr-1" id="sixth" type="text"
                                                    name="otp[]" aria-describedby="sixth" autofocus=""
                                                    tabindex="6" maxlength="1" oninput="inputInsideOtpInput(this)" />
                                            </div>
                                        </div>
                                        @if($errors->first())
                                            <label class="control-label error" for="email">{{$errors->first()}}</label>
                                        @endif
                                        <button class="btn btn-primary btn-block w-100">Submit</button>
                                    </div>
                                    
                                </form>
                                <p class="mt-2 text-center"><a href="/login"><i data-feather="chevron-left"></i> Back to login</a></p>

                                    
 
                                        
                                     
                            </div>

                            </div>

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


    
    <!-- END: Content-->

@push('footer-script')
<script>
    function inputInsideOtpInput(el) {
        if (el.value.length > 1){
            el.value = el.value[el.value.length - 1];
        }
        try {
            if(el.value == null || el.value == ""){
                this.foucusOnInput(el.previousElementSibling);
            }else {
                this.foucusOnInput(el.nextElementSibling);
            }
        }catch (e) {
            console.log(e);
        }
    }

    function foucusOnInput(ele){
        ele.focus();
        let val = ele.value;
        ele.value = "";
        setTimeout(()=>{
            ele.value = val;
        })
    }
</script>
@endsection