<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>
                    <tr>
                        <td><?php echo $this->lang->line('epos_style') ?></td>
                        <td>
                            <label><input data-error="#userEposStyle" type="radio" name="eposStyle" value="LTR"  <?php $this->session->userdata('eposStyle') === 'LTR' ? print 'checked="checked"' : '' ?>>&nbsp;<?php echo $this->lang->line('left_to_right_style') ?>&nbsp;</label>
                            <label><input data-error="#userEposStyle" type="radio" name="eposStyle" value="RTL"  <?php $this->session->userdata('eposStyle') === 'RTL' ? print 'checked="checked"' : '' ?>>&nbsp;<?php echo $this->lang->line('right_to_left_style') ?></label>
                        </td>
                    </tr>
                    <tr>
                        <td><?php echo $this->lang->line('play_beep_sound') ?></td>
                        <td>
                            <label><input data-error="#userEposStyle" type="radio" name="beep" value="yes"  <?php $this->session->userdata('beep') === 'yes' ? print 'checked="checked"' : '' ?>>&nbsp;<?php echo $this->lang->line('yes') ?>&nbsp;</label>
                            <label><input data-error="#userEposStyle" type="radio" name="beep" value="no"  <?php $this->session->userdata('beep') === 'no' ? print 'checked="checked"' : '' ?>>&nbsp;<?php echo $this->lang->line('no') ?></label>
                        </td>
                    </tr>
                    <tr>
                        <td><?php echo $this->lang->line('beep_volume_lavel') ?></td>
                        <td>
                            <select class="form-control" name="beepLabel">
                                <option value="0.1"<?php (double) $this->session->userdata('beepLabel') === (double) '0.1' ? print 'selected="selected"' : '' ?>>10%</option>
                                <option value="0.2"<?php (double) $this->session->userdata('beepLabel') === (double) '0.2' ? print 'selected="selected"' : '' ?>>20%</option>
                                <option value="0.3"<?php (double) $this->session->userdata('beepLabel') === (double) '0.3' ? print 'selected="selected"' : '' ?>>30%</option>
                                <option value="0.4"<?php (double) $this->session->userdata('beepLabel') === (double) '0.4' ? print 'selected="selected"' : '' ?>>40%</option>
                                <option value="0.5"<?php (double) $this->session->userdata('beepLabel') === (double) '0.5' ? print 'selected="selected"' : '' ?>>50%</option>
                                <option value="0.6"<?php (double) $this->session->userdata('beepLabel') === (double) '0.6' ? print 'selected="selected"' : '' ?>>60%</option>
                                <option value="0.7"<?php (double) $this->session->userdata('beepLabel') === (double) '0.7' ? print 'selected="selected"' : '' ?>>70%</option>
                                <option value="0.8"<?php (double) $this->session->userdata('beepLabel') === (double) '0.8' ? print 'selected="selected"' : '' ?>>80%</option>
                                <option value="0.9"<?php (double) $this->session->userdata('beepLabel') === (double) '0.9' ? print 'selected="selected"' : '' ?>>90%</option>
                                <option value="1"<?php (double) $this->session->userdata('beepLabel') === (double) '1' ? print 'selected="selected"' : '' ?>>100%</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tab-group config-submit">
            <button type="submit" onclick="updateUserProfileInformationFromEpos('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,
            className: 'transparent-overlay',
            onOpen: function () {
                playBeepSound();
            }
        });
    }
    function updateUserProfileInformationFromEpos(formId) {
        $('#' + 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) {
                            zamanEposPopupcloser();
                            location.reload();
                        } 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>