<div style="display: none;">
    <div id="eposUserProfileInformation">
        <div class="popup-header toolbar-header">
            <div class="popup-title"><?php echo $this->lang->line('update_profile') ?></div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <?php echo form_open('user/updateProfile', array('id' => 'updateUserProfileInformaiton')); ?>  
        <div class="popup-content">
            <div class="order-new-order">
                <table>
                    <tr>
                        <td><?php echo $this->lang->line('display') . ' ' . $this->lang->line('name') ?></td>
                        <td><input type="text" name="display" value="<?php echo $this->session->userdata('name') ?>" class="form-control"></td>
                    </tr>
                    <tr>
                        <td><?php echo $this->lang->line('username') ?></td>
                        <td><input type="text" name="username" value="<?php echo $this->session->userdata('username') ?>" class="form-control"></td>
                    </tr>
                    <tr>
                        <td><?php echo $this->lang->line('password') ?></td>
                        <td><input type="password" id="userPreviousPassword" name="password" class="form-control"></td>
                    </tr>
                    <tr>
                        <td><?php echo $this->lang->line('confirm_password') ?></td>
                        <td><input type="password" id="confirmPassword" name="confirmPassword" class="form-control"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tab-group config-submit">
            <button type="submit" onclick="updateUserProfileInformation('updateUserProfileInformaiton')"><span class="icon icon-folder"></span>&nbsp;<?php echo $this->lang->line('save') ?></button>
        </div>
        <?php echo form_close() ?>
    </div>
</div>
<script type="text/javascript">
    function zamanUserProfileControllerPopup(cssClass) {
        $('.epos-header-nav').removeClass('active');
        $('.epos-header-nav' + cssClass).addClass('active');
        $.colorbox({
            inline: true,
            scrolling: false,
            href: "#eposUserProfileInformation",
            width: '450px',
            height: 'auto',
            maxWidth: "100%",
            open: true,
            closeButton: false,
            transition: 'none',
            overlayClose: false
        });
    }
    function updateUserProfileInformation(formId) {
        if (!$('.page-loader').is(":visible")) {
            $('#' + 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',
                        beforeSend: function () {
                            $('.page-loader').show();
                        },
                        success: function (response) {
                            if (response.status) {
                                $('.page-loader').hide();
                                zamanEposPopupcloser();
                            } else {
                                warning('<?php echo $this->lang->line('error') ?>', response.message, '<?php echo $this->lang->line('close') ?>');
                            }
                        }
                    });
                },
                errorClass: "has-error",
                highlight: function (e) {
                    $(e).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                },
                rules: {
                    display: {required: true},
                    username: {required: true},
                    confirmPassword: {equalTo: "#userPreviousPassword"}
                },
                messages: {
                    display: 'X',
                    username: 'X',
                    confirmPassword: 'X'
                },
                errorPlacement: function (error, element) {
                    errorPlacement(error, element);
                }
            });
        }
    }
</script>