<div id="story" class="light-wrapper wrapper">
    <div class="container-fluid inner-customer-dashboard">
        <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" style="list-style: none;">   
                        <li class="list-group-item text-center"><h3 class="lead">Your New Password, Please</h3></li>
                        <form class="form-horizontal" action="<?php echo site_url('user/save_password') ?>" method="post" id="userVerificationForm">
                            <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;'>New Password</label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                        <input type='password' class="form-control input-sm" name='password' id='userPassword'>
                                        <input type='hidden' class="form-control input-sm" name='recovery_email' value='<?php isset($recovery_email) ? print $recovery_email : '' ?>'>
                                    </div>
                                </div>
                                <div class="clear-fix" style="margin: 3px 0px;"></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;'>Confirm Password</label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                        <input type='password' class="form-control input-sm" name='confirm_password'>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item"> 
                                <input class="btn btn-danger" style="width: 100%; margin: 0 auto; height: 50px;" 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" style="list-style: none;"></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: {
                password: {
                    required: true
                },
                confirm_password: {
                    equalTo: "#userPassword"
                }
            },
            messages: {
                password: "Password is a required field",
                confirm_password: "Confirmed Password does not match",
            }
        });
    }
</script>