<header class="toolbar toolbar-header">
    <h1 class="text-center" style="font-size: 12px;"><?php echo $this->lang->line('company_epos') ?></h1>
</header>
<div class="window-content" id="WindowContent">
    <div class="page-loader" style="display: none;"></div>
    <div class="pane-group">
        <div class="pane sidebar login-sidebar">
            <div class="user-list" style="top: 20%">
                <div class="user-image text-center" onclick="location.reload()">
                    <img src="<?php echo EPOS_UPLOAD_PATH . $this->config->item('general_logo') ?>" alt="<?php echo $this->config->item('general_name') ?>">
                </div>
                <div>
                    <div class="clearfix brand-time text-center" id="ZamanEposClock"></div>
                </div>
            </div>
        </div>
        <div class="pane-one-half">
            <div class="account-subscription-msg text-center">
                <span class="icon icon-alert">&nbsp;<?php echo $this->lang->line('notice') ?></span><br/>
                <?php echo $this->lang->line('account_subscription_msg') ?>
            </div>
            <div class="hilisoft-epos-access whole-part user-list" style="top: 10%">
                <div class="access-form-part">
                    <div class="caption">
                        <div class="caption-inner" style="padding: 9px;"><span class="icon icon-lock"></span>&nbsp; <?php echo $this->lang->line('supply_api_credentials') ?> </div>
                    </div>
                    <div class="gateway-block">
                        <?php echo form_open('user/passport/tovalidate', array('id' => 'eposApiCredentialsForm')); ?>
                        <div class="form-group" style="margin-bottom: 10px"><input type="password" name="primary" autocomplete="off"  class="form-control" readonly placeholder="<?php echo $this->lang->line('primary') ?>" onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');this.blur();this.focus();}" /></div>
                        <div class="form-group" style="margin-bottom: 10px"><input type="password" name="secondary" autocomplete="off"  class="form-control"  readonly type="text" placeholder="<?php echo $this->lang->line('secondary') ?>" onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');this.blur();this.focus();}" /></div>
                        <div class="form-group" style="margin-bottom: 10px"><input type="password" name="tertiary" autocomplete="off"  class="form-control" readonly type="text" placeholder="<?php echo $this->lang->line('tertiary') ?>" onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');this.blur();this.focus();}" /></div>
                        <div class="clearfix"></div>
                        <div class="tab-group config-submit"><button type="submit" onclick="validateApi('eposApiCredentialsForm')"><span class="icon icon-login"></span>&nbsp;<?php echo $this->lang->line('go') ?></button></div>
                        <?php form_close() ?>
                        <div class="setting-general-keyboard text-center"></div>
                        <div class="clearfix padded-top-more text-right"><span class="icon icon-keyboard btn-keyboard-close" onclick="zamanToogleEposVirtualKeyboard('setting-general-keyboard')">&nbsp;<?php echo $this->lang->line('open_virtual_keyboard') ?></span></div>
                    </div>
                </div>
            </div>
            <div class="hilisoft-epos-keyboard whole-part">
                <div class="keyboard-part">
                    <div id="Keyboard" class="login-keyboard"></div>
                </div>
            </div>
        </div>
        <div class="pane sidebar login-sidebar">
            <div class="user-list" style="top: 31%">
                <div class="user-image text-center" onclick="location.reload()">
                   <img class="logo-lg" alt="GkSoft" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAACWAQMAAADNFAdfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwTEBAAAAwqD1T20Gf6AAAAAAgM8AE1YAARzmcjEAAAAASUVORK5CYII=">
                </div>
                <div>
                    <div class="clearfix brand-time text-center"><?php echo date('d/m/Y') ?></div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $this->load->view('settings/partials/footer') ?>
<script type="text/javascript">
    function validateApi(formId) {
        if (!$('.page-loader').is(":visible")) {
            $('#' + formId).validate({
                submitHandler: function () {
                    var myform = document.getElementById(formId);
                    var formdata = new FormData(myform);
                    if (checkInternetConnection()) {
                        $.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) {
                                    window.location.href = '<?php echo site_url('user/passport/index/' . $this->session->userdata('loginBranch') . '/' . $this->session->userdata('loginTeam')) ?>';
                                } else {
                                    warning('<?php echo $this->lang->line('warning') ?>', response.message, '<?php echo $this->lang->line('ok') ?>');
                                }
                            }
                        });
                    } else {
                        warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_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: {
                    primary: {required: true},
                    secondary: {required: true},
                    tertiary: {required: true}
                },
                messages: {
                    primary: '<?php echo sprintf($this->lang->line('item_required'), $this->lang->line('primary')) ?>',
                    secondary: '<?php echo sprintf($this->lang->line('item_required'), $this->lang->line('secondary')) ?>',
                    tertiary: '<?php echo sprintf($this->lang->line('item_required'), $this->lang->line('tertiary')) ?>'
                },
                errorPlacement: function (error, element) {
                    errorPlacement(error, element);
                }
            });
        }
    }
</script>