<div id="story" class="light-wrapper wrapper">
    <div class="container-fluid inner">
        <div class="row">
            <div id="forgetPasswordForm" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-block">
                    <ul class="list-group">
                        <form class="form-horizontal" action="<?php echo site_url('user/update_verification') ?>" method="post" id="userVerificationForm">
                            <li class="list-group-item text-center"><h3 class="lead">Please use verification code here and press Enter</h3>
                            <li class="list-group-item">
                                <div id='ShowVerificationFailedMessage'></div>
                                <div class="form-group" style='margin-bottom: 0px'>
                                    <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label" style='padding-top: 15px;color: #000;'>Verification Code</label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                        <input type='text' class="form-control input-sm" name='verified_code'>
                                        <input type='hidden' class="form-control input-sm" name='return' value='<?php isset($return) ? print $return : '' ?>'>
                                    </div>
                                </div>
                            </li>
                            <li> 
                                <input class="btn btn-danger" style="width: 100%; height: 50px; margin: 0 auto;" type="submit" name="submit_form" tabindex="4" value="<?php echo $this->lang->line('gkpos_numpad_key_enter') ?>" onclick="verify('userVerificationForm', 'userVerificationFormError')">
                            </li>
                        </form>
                        <li><ul id="userVerificationFormError" class="error_message_box list-group"></ul></li>
                    </ul>
                </div>
            </div> 
        </div>
    </div>
</div>
<script>
    function verify(formId, error_message_box) {
        $('#' + formId).validate({
            submitHandler: function () {
                var myform = document.getElementById(formId);
                var formdata = new FormData(myform);
                $.ajax({
                    url: $('#' + formId).attr('action'),
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            location.replace('<?php echo site_url('user') ?>');
                        } else {
                            $("#ShowVerificationFailedMessage").html('');
                            $('#ShowVerificationFailedMessage').text(response.message);
                            $('#ShowVerificationFailedMessage').addClass('alert alert-dismissible alert-danger');
                        }
                    }
                });
            },
            errorClass: "has-error",
            errorLabelContainer: "#" + error_message_box,
            wrapper: "li",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
                $('.error_message_box').addClass('block');
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
            },
            rules: {
                verified_code: "required"
            },
            messages: {
                verified_code: "Please use that verified code sent to you mail"
            }
        });
    }
</script>