<div class="container-fluid body">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left-item">
            <div class="pages-height"> </div>
            <div class="userlogingbg">
                <div class="clearfix"></div>
                <?php if (!empty($male_users)): ?>
                    <div class="user-part male">
                        <ul>
                            <?php foreach ($male_users as $muser): ?>
                                <li onclick="get_user(<?php echo $muser->id ?>);" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <?php if (isset($muser->image) && trim($muser->image) != null): ?>
                                        <?php $mimage = UPLOAD_PATH . 'gkpos/user/' . $muser->image ?>
                                    <?php else: ?>
                                        <?php $mimage = $muser->gender == 1 ? ASSETS_GKPOS_PATH . 'images/user2.png' : ASSETS_GKPOS_PATH . 'images/user1.png' ?>
                                    <?php endif; ?>
                                    <?php $name = trim($muser->last_name) != null ? $muser->last_name : $muser->first_name . ' ' . $muser->last_name ?>
                                    <a href="javascript:void(0)" class="text-center"><img src="<?php echo $mimage ?>" class="img-responsive thumbnail center-block"  style="min-height: 100px;max-height: 100px; margin-bottom: 0px"/> <span class="usernamebg text-capitalize"><?php echo ucfirst(strtolower(substr($name, 0, 12))) ?></span></a> 
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bodyitem no-padding">
            <div class="body-vertical-align-center content-center">
                <div class="user-label text-uppercase"><span id="userinfo"><?php echo $this->lang->line('gkpos_who_are_you') ?></span></div>
                <div class="numpad">
                    <div class="pin-calculatorbg">
                        <div class="text-center text-uppercase" id="pinCodeMessage"></div>
                        <p class="text-center"> <input type="password" name="password" id="password" class="password-input"/></p>
                        <ul>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key1') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key2') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key3') ?></li>
                        </ul>
                        <ul>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key4') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key5') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key6') ?></li>
                        </ul>
                        <ul>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key7') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key8') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key9') ?></li>
                        </ul>
                        <ul>
                            <li class="btnPin"><?php echo $this->lang->line('gkpos_numpad_key_del') ?></li>
                            <li class="numkey"><?php echo $this->lang->line('gkpos_numpad_key0') ?></li>
                            <li class="btnPin"><?php echo $this->lang->line('gkpos_numpad_key_clr') ?></li>
                        </ul>
                    </div>

                    <div class="last-calculatorbg" id="MiddleContent">
                        <form id="loginForm" name="loginForm">
                            <input type="hidden" name="email" id="email"/>
                            <input type="hidden" name="username" id="username"/>
                            <ul>
                                <li onclick="submit_form();"><?php echo $this->lang->line('gkpos_numpad_key_enter') ?></li>
                            </ul>
                        </form> 
                    </div>
                </div>
                <div class="clockdiv">
                    <p><?php echo date($this->config->item('timeformat')) ?></p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 right-item">
            <div class="paginationbg">
                <div class="logobg">
                    <div class="pages-height"></div>
                    <?php if ($this->config->item('gk_name_show') != null): ?>
                        <h1 class="text-uppercase text-center" style="color: #ffffff;"><?php echo $this->config->item('gk_name') ?></h1>
                    <?php endif; ?>
                    <a href="javascript:void(0)"><img src="<?php echo UPLOAD_PATH . 'gkpos/logo/' . $this->config->item('gk_logo') ?>" width="196" height="152" class="img-responsive" style="display:inline" /></a>
                    <p style="font-size:35px; font-weight:bold;"><?php echo date($this->config->item('dateformat')) ?></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        manageWindowHeight();
        jQuery('#email').val('');
        jQuery('#username').val('');
        jQuery('#password').val('');
        setLoginNumKeys('password');
    });
    function get_user(id) {
        new Audio('<?php echo ASSETS_GKPOS_PATH . 'beep.mp3' ?>').play();
        jQuery('#email').val('');
        jQuery('#username').val('');
        jQuery('#password').val('');
        jQuery.ajax({
            type: "POST",
            url: '<?php echo site_url("gkpos/entry/get_user") ?>',
            data: {
                'id': id
            },
            success: function (response) {
                $('#pinCodeMessage').html('');
                $("#password").removeAttr("disabled");
                jQuery('#email').val(response.email);
                jQuery('#username').val(response.username);
                jQuery('#userinfo').text(response.first_name + " " + response.last_name);
            },
            dataType: 'json'
        });
    }
    function submit_form() {
        
        var username = jQuery("#username").val();
        var email = jQuery("#email").val();
        var password = jQuery("#password").val();
        ALERT_TITLE = "<?php echo $this->lang->line('gkpos_alert_title_warning') ?>";
        if (username === '' || email === '') {
            alert("<?php echo $this->lang->line('gkpos_who_are_you_desc') ?>");
        } else if (password == '') {
            alert("<?php echo $this->lang->line('gkpos_pin_empty_warning') ?>");
        } else {
            jQuery.ajax({
                type: "POST",
                url: '<?php echo site_url("gkpos/entry/validate") ?>',
                data: {'username': username, 'email': email, 'password': password},
                success: function (response) {
                    if (response.status) {
                        window.location.replace(base_url + "gkpos");
                    } else {
                        ALERT_TITLE = "<?php echo $this->lang->line('gkpos_alert_title_error') ?>";
                        alert("<?php echo $this->lang->line('gkpos_pin_invalid_warning') ?>");
                    }
                },
                dataType: 'json'
            });
        }
    }

    function setLoginNumKeys(inputFiledId) {
        ALERT_TITLE = "<?php echo $this->lang->line('gkpos_alert_title_warning') ?>";
        var username = jQuery("#username").val();
        var email = jQuery("#email").val();
        if (username === '' || email === '') {
            $("#" + inputFiledId).attr("disabled", true);
        } else {
            $("#" + inputFiledId).removeAttr("disabled", false);
        }
        jQuery('.numkey').click(function (event) {
            new Audio('<?php echo ASSETS_GKPOS_PATH . 'beep.mp3' ?>').play();
            username = jQuery("#username").val();
            email = jQuery("#email").val();
            if (username === '' || email === '') {
                $("#" + inputFiledId).attr("disabled", 'disabled');
                alert("<?php echo $this->lang->line('gkpos_who_are_you_desc') ?>");
            } else {
                $("#" + inputFiledId).removeAttr("disabled");
                var numBox = document.getElementById(inputFiledId);
                if (this.innerHTML == '0') {
                    if (numBox.value.length > 0)
                        numBox.value = numBox.value + this.innerHTML;
                } else
                    numBox.value = numBox.value + this.innerHTML;
                event.stopPropagation();
            }
        });
        $('.btnPin').click(function (event) {
            new Audio('<?php echo ASSETS_GKPOS_PATH . 'beep.mp3' ?>').play();
            if (this.innerHTML == 'DEL') {
                var numBox = document.getElementById(inputFiledId);
                if (numBox.value.length > 0) {
                    numBox.value = numBox.value.substring(0, numBox.value.length - 1);
                }
            } else {
                document.getElementById(inputFiledId).value = '';
            }
            event.stopPropagation();
        });
    }

</script>
