@extends('layouts.app')
@section('content')
<style>
    .digit-group input {
        width: 40px;
        height: 40px;
        background-color: #e7e7e7;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        font-weight: 200;
        color: #6e6e6e;
        margin: 0 2px;
        border: 1px solid #acacac;
        border-radius: 5px;
    }

    .digit-group .splitter {
        padding: 0 5px;
        color: white;
        font-size: 24px;
    }

    .prompt {
        margin-bottom: 20px;
        font-size: 20px;
        color: white;
    }

    .card.cards {
        box-shadow: none;
        margin-bottom: 0;
    }

    .otp-modal-content {
        border-radius: 10px;
    }

    .otp-modal-content h5 {
        margin-bottom: 10px;
        font-size: 20px;
    }
</style>
    <section class="flexbox-container">
        <div class="col-12 d-flex align-items-center justify-content-center">
            <div class="col-md-4 col-10 box-shadow-2 p-0">
                <div class="card border-grey border-lighten-3 m-0">
                    <div class="card-header border-0">
                        <div class="card-title text-center">
                            <div class="p-1"><img src="{{asset('app-assets/images/ico/logo.png')}}" width="50"
                                    height="50" alt="branding logo"></div>
                        </div>
                        <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2">
                            <span>OTP with Garbh Sanskar</span>
                        </h6>
                    </div>
                    <form method="post" method="post" name="login_form" id="login_form" action="{{route('checkverificationcode')}}" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="col-12 mx-auto text-center">
                                        @csrf
                                        <input type="hidden" name="verificationString" id="verificationString" value="{{ Crypt::encryptString(collect(request()->segments())->last()) }}">
                                        <input type="text" id="digit-1" name="digit1" value="{{old('digit1')}}" data-next="digit-2" autofocus required/ onkeypress="return event.charCode != 32">
                                        <input type="text" id="digit-2" name="digit2" value="{{old('digit2')}}" data-next="digit-3" data-previous="digit-1" required onkeypress="return event.charCode != 32"/>
                                        <input type="text" id="digit-3" name="digit3" value="{{old('digit3')}}" data-next="digit-4" data-previous="digit-2" required onkeypress="return event.charCode != 32"/>
                                        <input type="text" id="digit-4" name="digit4" value="{{old('digit5')}}" data-next="digit-5" data-previous="digit-3" required onkeypress="return event.charCode != 32"/>
                                        <input type="text" id="digit-5" name="digit5" value="{{old('digit5')}}" data-next="digit-6" data-previous="digit-4" required onkeypress="return event.charCode != 32"/>
                                        <input type="text" id="digit-6" name="digit6" value="{{old('digit6')}}" data-previous="digit-5" required onkeypress="return event.charCode != 32"/>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="col-12 mx-auto text-center mt-2">
                                <button type="submit" id="v_btn" class="btn btn-success px-4">Submit</button>
                            </div>
                            <div class="col-12 text-center mt-2" id="resendOtp">
                                <a href="javascript:void(0);" onclick="resendUserOTP()"  class="text-primary" disabled>Resend OTP !</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('jssection')
<script>
    var requestUrl = "{{ route('resendadminotp') }}";
    var tomanyAttempt = 'manyattempt';
    var token = "{{ csrf_token() }}";
</script>
<script src="{{asset('app-assets/js/verificationcode.js')}}"></script>
@endsection