<div id="story" class="light-wrapper customer-wrapper">
    <div class="container-fluid inner-customer-dashboard ">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <?php echo $this->load->view('customer/site_nav') ?>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
            <h3 class="text-center"><?php echo $current_section ?></h3>
            <div id="registrationForm" style="margin-top: 30px;">
                <ul id="userRegistrationFormError" class="error_message_box"></ul>
                <?php echo $template['partials']['flash_messages'] ?>
                <?php echo form_open('customer/savechanged_password', array('class' => 'form-horizontal', 'id' => 'userChangePasswordForm')) ?>
                <ul class="list-group" style="list-style: none;">
                    <li class="list-group-item">
                        <div class='block'>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Current Password</label>
                                <div class="col-sm-8">
                                    <input type='password' data-error="#currentPasswordError" class="form-control input-sm" name='current_password' value="">
                                </div>
                                <div id="currentPasswordError"  class="col-sm-offset-4 col-sm-8"></div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">Password</label>
                                <div class="col-sm-8">
                                    <input type='password' data-error="#changedPasswordError" class="form-control input-sm" name='password' value="" id="changePassword">
                                </div>
                                <div id="changedPasswordError"  class="col-sm-offset-4 col-sm-8"></div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">Confirm Password</label>
                                <div class="col-sm-8">
                                    <input type='password' data-error="#confirmChangedPasswordError" class="form-control input-sm" name='confirm_password'>
                                </div>
                                <div id="confirmChangedPasswordError"  class="col-sm-8"></div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4  col-sm-8">
                                    <input class="btn btn-danger round" style="width: 100%; margin: 0 auto;" type="submit" name="submit_form" tabindex="4" value="<?php echo $this->lang->line('gkpos_numpad_key_enter') ?>" onclick="ChangePassword('userChangePasswordForm')">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <?php echo form_close() ?>
            </div> 
        </div>
    </div>
</div>
<script>
    function ChangePassword(formId) {
        addjqueryValidatorFunction();
        $('#' + 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) {
                            alert(response.message);
                        } else {
                            alert(response.message);
                        }
                    }
                });
            },
            errorClass: "has-error",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
            },
            rules: {
                current_password: {required: true},
                password: {required: true},
                confirm_password: {equalTo: "#changePassword"}
            },
            messages: {
                current_password: "Please specify your current password",
                password: "Password is a required field",
                confirm_password: "Confirmed Password does not match",
            },
            errorPlacement: function (error, element) {
                errorPlacement(error, element);
            }
        });
    }
</script>

