<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 right-item">
    <div class="paginationbg" style="padding-bottom:5px">
        <div class="text-center text-capitalize">
            <div style='margin-top: 10px'><a href="<?php echo site_url('gkpos') ?>" class="btn btn-block btn-danger sharp round" style="font-size: 20px;"><i class="fa fa-refresh fa-2x"></i><?php echo $this->lang->line('gkpos_refresh') ?></a></div>
        </div>
        <?php if (detectDevice()): ?>
            <div style='position: fixed; top: 52%; right:5'>
                <div style="margin-top: 5px;"><a href="javascript:void(0)" onclick="getPage('<?php echo site_url('gkpos/table') ?>', 'table')" id="table" class="btn btn-block btn-primary sharp round btn-lg" style="font-size: 20px;"><i class="fa fa-shopping-cart fa-2x"></i>&nbsp;&nbsp;<?php echo $this->lang->line('gkpos_new_order') ?></a></div>
                <div style="margin-top: 5px;"><a href="<?php echo site_url('gkpos/logoff') ?>"class="btn btn-block btn-danger sharp round btn-lg" style="font-size: 20px;" onclick=""><i class="fa fa-power-off fa-2x"></i>&nbsp;&nbsp;<?php echo $this->lang->line('gkpos_logoff') ?></a></div>
            </div>
        <?php else: ?>
            <div class="center-div extra-bg" style="margin-top:10px">
                <div><a href="javascript:void(0)" class="btn btn-block round gradient btn-success">Caller's Information<i class="fa fa-phone fa-2x"></i></a></div>
                <form>
                    <div class="form-group">
                        <label for="caller_name"><?php echo $this->lang->line('gkpos_name') ?></label>
                        <input class="customernambg" type="text" name="caller_name" id="caller_name"  placeholder="<?php echo $this->lang->line('gkpos_name') ?>"  />
                    </div>
                    <div class="form-group">
                        <label for="caller_phone"><?php echo $this->lang->line('gkpos_phone') ?></label>
                        <div class="input-group">
                            <input class="customernambg" type="text" name="caller_phone" id="caller_phone" placeholder="<?php echo $this->lang->line('gkpos_phone') ?>"/>
                            <span class="input-group-addon" style="background-color: #FF0000; cursor: pointer" data-toggle="caller-phone-tooltip" data-placement="top"  title="<?php echo $this->lang->line('gkpos_click_to_get_caller_name') ?>" onclick="searchCaller('phone')"><i class="fa fa-search" aria-hidden="true"></i></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="stylish">
                            <label for="caller_order_type"><?php echo $this->lang->line('gkpos_order_type') ?></label>
                            <span>
                                <input onclick="$(this).closest('div').find('select').slideToggle(110)" class="form-control customernambg" readonly="1" type="text" name="caller_order_type" id="caller_order_type"  placeholder="<?php echo $this->lang->line('gkpos_order_type') ?>"/>
                                <br>
                                <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').val());" class="customernambg" style="min-height:112px; margin: 0 auto; left:0px; margin-top: -20px">
                                    <option value="collection" class="btn btn-default btn-lg btn-block text-lowercase" style="font-size: 12px"><?php echo $this->lang->line('gkpos_collection') ?></option>
                                    <option value="delivery" class="btn btn-default btn-lg btn-block text-lowercase" style="font-size: 12px"><?php echo $this->lang->line('gkpos_delivery') ?></option>
                                </select>
                            </span>
                        </div>
                        <a href="javascript:void(0)" onclick="checkCallerInfo()"><div class="form-submit-button mainsystembg2 waiting-bg img-responsive delivery-info-submit-btn"><?php echo $this->lang->line('gkpos_numpad_key_enter') ?></div></a>
                    </div>
                </form>
            </div>
            <div style='position: fixed; top: 69.3%; right:5'>
                <div style="margin-top: 5px;"><a href="javascript:void(0)" onclick="getPage('<?php echo site_url('gkpos/takeaway') ?>', 'takeaway')"  id="takeaway" class="btn btn-block btn-primary sharp round btn-lg" style="font-size: 20px;"><i class="fa fa-shopping-cart fa-2x"></i>&nbsp;&nbsp;<?php echo $this->lang->line('gkpos_new_order') ?></a></div>
                <div style="margin-top: 5px;"><a href="<?php echo site_url('gkpos/logoff') ?>"class="btn btn-block btn-danger sharp round btn-lg" style="font-size: 20px;" onclick=""><i class="fa fa-power-off fa-2x"></i>&nbsp;&nbsp;<?php echo $this->lang->line('gkpos_logoff') ?></a></div>
            </div>
        <?php endif; ?>

    </div>
    <script>
        $(document).ready(function () {
            var callerPhone = $('#CallerPhoneNumber').val();
            var callerPhoneName = $('#CallerPhoneName').val();
            $('#caller_phone').val(callerPhone);
            $('#caller_name').val(callerPhoneName);
            $("#caller_name").autocomplete({
                delay: 0,
                source: '<?php echo site_url('gkpos/get_customer') ?>',
                minLength: 2
            });
            $("#caller_phone").autocomplete({
                delay: 0,
                source: '<?php echo site_url('gkpos/get_customer_phone') ?>',
                minLength: 6
            });
            $('[data-toggle="caller-phone-tooltip"]').tooltip();
        });
        function checkCallerInfo() {
            
            ALERT_TITLE = "<?php echo $this->lang->line('gkpos_alert_title_warning') ?>";
            var callerName = $("#caller_name").val();
            var callerPhone = $("#caller_phone").val();
            var CallerOrderType = $("#caller_order_type").val();
            if (callerPhone === '' || callerPhone === null) {
                alert('<?php echo $this->lang->line('gkpos_caller_phone_error') ?>');
            } else if (CallerOrderType === '' || CallerOrderType === null) {
                alert('<?php echo $this->lang->line('gkpos_caller_order_type_error') ?>');
            } else {
                if (CallerOrderType == 'collection' || CallerOrderType == 'delivery') {
                    $("#caller_name").val('');
                    $("#caller_phone").val('');
                    getPage(base_url + "gkpos/" + CallerOrderType.toLowerCase(), [callerName, callerPhone, CallerOrderType, "yes"]);
                } else {
                    alert('<?php echo $this->lang->line('gkpos_caller_order_type_error') ?>');
                }
            }
        }
        function searchCaller(key) {
            
            var value = $('#caller_' + key).val();
            if (value === '') {
                ALERT_TITLE = "<?php echo $this->lang->line('gkpos_caller_information_error') ?>";
                alert("<?php echo $this->lang->line('gkpos_caller_field_alert') . ' ' ?>" + key);
            } else {
                $.ajax({
                    url: "<?php echo site_url('gkpos/search_customer') ?>",
                    type: "POST",
                    data: {
                        key: key,
                        value: value
                    },
                    success: function (output) {
                        var obj = $.parseJSON(output);
                        if (true == obj.status) {
                            var customer = obj.customer;
                            $("#caller_phone").val(customer.phone);
                            $("#caller_name").val(customer.name);
                        } else {
                            ALERT_TITLE = "<?php echo $this->lang->line('gkpos_invalid_customer') ?>";
                            alert("<?php echo $this->lang->line('gkpos_customer_not_found') . ' ' ?>" + key + "=>" + value);

                        }
                    }
                });
            }
        }
    </script>
</div>