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

@section('content')
<!-- BEGIN: Content-->
<div class="container-fluid bg-white loginnewbg1">
        <div class="row h-100 login-newerp-bg">



        <div class="col-md-6 d-none d-md-block">
            <div class="loginerpnew-designhead">
                <h2>Endless<br />Possibilities!</h2>
                <div class="module-names">
                    <p>Financials | HRMS | Supply Chain | Process | Sales & Distribution | CRM | Add-ons</p>
                </div>
            </div>
             
        </div>

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

                    <div class="col-md-8 newdesignerpscreen">
                                <div class="text-center">
                                    <img class="login-logo"  src="{{ url('app-assets/images/thepresence.svg') }}" alt="The Presence 360" />
                                </div>
                                <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. Enter the code in the field below.</p>
                                   
                                </div>
                                <form class="auth-reset-password-form mt-2" action="/login-otp" method="POST">
                                    <input type="hidden" name="key" value="{{ $key }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" class="device_details" name="device_details">

                            
                                    <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-->
    @endsection
@push('footer-script')
<script>
    var deviceDetails;
    var locations;

    document.addEventListener('DOMContentLoaded', function() {

        // Get location using Geolocation API
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                let latitude = position.coords.latitude;
                let longitude = position.coords.longitude;
                locations = latitude + ',' + longitude;

                getDeviceDetails();

            }, function(error) {
                console.error("Error Code = " + error.code + " - " + error.message);
                getDeviceDetails();
            });
        } else {
            console.log("Geolocation is not supported by this browser.");
            getDeviceDetails();
        }

        function getDeviceDetails() {
            var data = {
                'browser': navigator.userAgent,
                'platform': navigator.platform,
                'location': locations
            };

            var jsonString = JSON.stringify(data);
            deviceDetails = btoa(jsonString);
        }

        // Event listener for form submission
        document.querySelectorAll('form').forEach(function(form) {
            form.addEventListener('submit', function(e) {
                // Create a hidden input field
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'device_details';
                input.value = deviceDetails;

                // Append hidden field to the form
                this.appendChild(input);

                // The form will now submit normally with these fields
            });
        });

    });

    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