@extends('Dashboard.auth_master_page')




@section('meta_title')
    {{ 'Two Factor Authentication - AryanIct.com' }}
@endsection


@section('title')
    <span>Two-Factor Verification</span>
@endsection


@section('description')
    <p>
      Please enter the code generated by your mobile application:
    </p>
@endsection



@section('content')
    <div class="row g-0 justify-content-center">
        <div class="col-sm-8 col-xl-5">
            <form class="js-validation-reminder" action="{{ route('auth.verify.google2fa') }}" id="otp-screen" method="POST">
                @csrf
                <div class="mb-4">
                    
                     <div class="form-floating mb-2">
                      <input type="text" class="form-control" id="example-text-input-floating" name="secret" placeholder="Code">
                      <label for="example-text-input-floating">Code</label>
                    </div>

                    <!--<div id="otp" class="inputs d-flex flex-row justify-content-center mt-2"> -->
                    <!--  <input class="m-2 text-center form-control rounded" name="s_1" placeholder="*" type="text" id="first" maxlength="1" /> -->
                    <!--  <input class="m-2 text-center form-control rounded" name="s_2" placeholder="*" type="text" id="second" maxlength="1" /> -->
                    <!--  <input class="m-2 text-center form-control rounded" name="s_3" placeholder="*" type="text" id="third" maxlength="1" /> -->
                    <!--  <input class="m-2 text-center form-control rounded" name="s_4" placeholder="*" type="text" id="fourth" maxlength="1" /> -->
                    <!--  <input class="m-2 text-center form-control rounded" name="s_5" placeholder="*" type="text" id="fifth" maxlength="1" /> -->
                    <!--  <input class="m-2 text-center form-control rounded" name="s_6" placeholder="*" type="text" id="sixth" maxlength="1" /> -->
                    <!--</div>-->



                    @if (Session::has('success_message'))
                    <div style="color:green;font-size: .875rem;margin-top: .375rem;width:100%">
                        {{ Session::get('success_message') }}</div>
                @endif

                @if (Session::has('error_message'))
                    <div style="color:#dc2626;font-size: .875rem;margin-top: .375rem;width:100%">
                        {{ Session::get('error_message') }}</div>
                @endif
                @error('secret')
                    <div style="color:#dc2626;font-size: .875rem;margin-top: .375rem;width:100%">
                        {{ $message }}</div>
                @enderror


                </div>




                <div class="text-center">


                    <button type="submit" class="btn btn-lg btn-alt-primary">
                      Confirm
                    </button>

                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {

            function OTPInput() {
                const editor = document.getElementById('first');
                editor.onpaste = pasteOTP;

                const inputs = document.querySelectorAll('#otp > *[id]');
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].addEventListener('input', function(event) {
                        if (!event.target.value || event.target.value == '') {
                            if (event.target.previousSibling.previousSibling) {
                                event.target.previousSibling.previousSibling.focus();
                            }

                        } else {
                            if (event.target.nextSibling.nextSibling) {
                                event.target.nextSibling.nextSibling.focus();
                            }
                        }
                    });
                }
            }
            OTPInput();
        });

        function pasteOTP(event) {
            event.preventDefault();
            let elm = event.target;
            let pasteVal = event.clipboardData.getData('text').split("");
            if (pasteVal.length > 0) {
                while (elm) {
                    elm.value = pasteVal.shift();
                    elm = elm.nextSibling.nextSibling;
                }
            }
        }
    </script>
@endsection
