@extends('layout')

@section('title', 'Register')

@section('meta:title', 'AccessWorld: Register')
@section('meta:description', 'Sign up for a new account.')

@section('content')
    <section class="no-banner" id="awtSignUpSection">
        <div class="container">
            <div class="section-body">
                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="card awtsignUpCard">
                        <div class="card-head">
                            <h2 class="text-center sign-up-card-header">Verification</h2>
                            <p class="text-center awtTitleCaption">Please enter the six digit OTP verification code sent to your registered number</p>   
                        </div>
                        <div class="card-body">
                            <form action="{{ route('verifyOtp') }}" method="POST" class="otpVerifyForm" id="otpVerifyForm">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                <div class="col-sm-12" id="otpCol">
                                    <div class="mm-number">
                                        <div class="mm-number-container">
                                            <div class="mm-number-input">
                                                <div class="mm-number-input-container animated">
                                                    <div class="mm-number-input-item">
                                                        <input type="text" pattern="\d*" class="animated" min="0" max="9" maxlength="1"
                                                            placeholder="X" name="otp[]">
                                                    </div>
                                                    <div class="mm-number-input-item">
                                                        <input type="text" pattern="\d*" class="animated" min="0" max="9" maxlength="1"
                                                            placeholder="X" name="otp[]">
                                                    </div>
                                                    <div class="mm-number-input-item">
                                                        <input type="text" pattern="\d*" class="animated" min="0" max="9" maxlength="1"
                                                            placeholder="X" name="otp[]">
                                                    </div>
                                                    <div class="mm-number-input-item">
                                                        <input type="text" pattern="\d*" class="animated" min="0" max="9" maxlength="1"
                                                            placeholder="X" name="otp[]">
                                                    </div>
                                                    <div class="mm-number-input-item">
                                                        <input type="text" pattern="\d*" class="animated" min="0" max="9" maxlength="1"
                                                            placeholder="X" name="otp[]">
                                                    </div>
                                                    <div class="mm-number-input-item">
                                                        <input type="text" pattern="\d*" class="animated" min="0" max="9"  maxlength="1"
                                                            placeholder="X" name="otp[]">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12" id="wrongOtpMsg" style="display: none;">
                                    <div class="justify-content-center">
                                        <span class="text text-danger">Incorrect OTP. Please try again</span>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="justify-content-center">
                                        <button type="submit" class="btn btn-default pull-right ink-reaction verifyOtpBtn"
                                        id="verifyOtpBtn">
                                        Verify OTP
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="text-center">
                                        <p class="fw-600 resend-code">Didn't get the code yet?
                                            <form action="#" method="POST" novalidate>
                                                {{csrf_field()}}
                                                <input type="hidden" class="form-control" name="phone" id="phone" value="{{$phone->phone}}">
                                                <button class="btn btn-no-bg" type="button">Resend OTP</button>
                                            </form>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@push('scripts')
    <script>
        var check_email = "{{ route('api.check.email') }}";
        var check_username = "{{ route('api.check.username') }}";
    </script>
    <script src="{{ asset('js/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/libs/jquery-validation/dist/additional-methods.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/pages/register_validation.min.js') }}"></script>
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        var sendOtp = "{{ route('sendOtp') }}";
        var verifyOtp = "{{ route(verifyOtp) }}";
    </script>
    <script>
        jQuery(document).ready(function() {

            var password = 111111;
            jQuery('.mm-number-input-item:nth-child(1) input').focus();

            jQuery('.mm-number-input-item').each(function(index) {
                var item, id, input;
                item = jQuery(this);
                id = index + 1;
                input = item.children('input');
                item.addClass('mm-number-input-item-' + id);
                input.data('id', id);
            });

            jQuery('.mm-number-input-item input').on('keyup', function(e) {

                var item, value, id, count, pass = [];
                item = jQuery(this);
                value = item.val();
                id = item.data('id');
                count = jQuery('.mm-number-input-item').length;

                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    jQuery('.mm-number-input-item-' + (id) + ' input').val('');
                } else {
                    if (!value) {
                        jQuery('.mm-number-input-item-' + id + ' input').focus().select();
                    } else {
                        if (id < count) {
                            jQuery('.mm-number-input-item-' + (id + 1) + ' input').focus().select();
                        } else {
                            //
                        }
                    }

                    jQuery('.mm-number-input-item input').each(function() {
                        var x;
                        x = jQuery(this);
                        pass.push(x.val());
                    });

                    var number = pass.join("");
                }

                if (id === count) {
                    if (parseInt(number) === password) {
                        $('#wrongOtpMsg').hide();
                        console.log("Correct");
                    } else {
                        // $('#wrongOtpMsg').show();
                        console.log("incorrect");
                        jQuery('.mm-number-input-item input').addClass('shake');
                        setTimeout(function() {
                            jQuery('.mm-number-input-item input').removeClass('shake');
                            jQuery('.mm-number-input-item-1 input').focus();
                        }, 500);
                    }
                } else {
                    //
                }

            });

        });
    </script>
@endpush