<style>
    .item-code-numpad {
        position: fixed;
        z-index: 9;
        margin-top: -5px;
        background: #008cb0;
        width: 24.3%;
    }
</style>
<form id="searchAddToCArtCartItemForm" class=" caller-box clearfix padded-less" method="post">
    <table class="report-table" style="background: transparent;margin-top: -6px;">
        <tr><th style="border: none"><input id="itemCodeSearch" onfocus="setKeypad(this.value)" type="search"placeholder="Item code" min="4" class="form-control" style="margin-top: -10px; width:100%; border-radius: 0px; height: 40px;"></th></tr>
    </table>
    <div class="item-code-numpad" style="display: none" id="itemNumPad">
        <div class="tab-group keypad">
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '1')">1</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '2')">2</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '3')">3</div>
        </div>
        <div class="tab-group keypad">
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '4')">4</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '5')">5</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '6')">6</div>
        </div>
        <div class="tab-group keypad">
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '7')">7</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '8')">8</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '9')">9</div>
        </div>
        <div class="tab-group keypad">
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '00')">00</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', '0')">0</div>
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" onclick="ItemCodeNumpad('itemCodeSearch', 'CLR')">CLR</div>
        </div>
        <div class="tab-group keypad">
            <div class="tab-item zaman-epos-nav quantity-digit keypad-key" style="background: #D33" onclick="ItemCodeNumpad('itemCodeSearch', 'Close')">Close</div>
        </div>
    </div>
</form>

<script>
    $(document).ready(function () {
        zamanPrimaryNumpad('itemCodeSearch', 'itemCodeSearchPrimaryNumKey', 'itemCodeSearchPrimaryActionKey');
    });
    function getItemCode(value) {
        var length = value.length;
        if (Number(value) > 0 && length >= 3) {
            zamanEposDb.transaction('rw', [zamanEposDb.epos_branch, zamanEposDb.epos_configuration, zamanEposDb.epos_menucategory, zamanEposDb.epos_menu, zamanEposDb.epos_menuselection, zamanEposDb.epos_menuattrcategory, zamanEposDb.epos_modifiercategory, zamanEposDb.epos_menufixeddeal, zamanEposDb.epos_menuset, zamanEposDb.epos_menusetitem, zamanEposDb.epos_order, zamanEposDb.epos_discountplan, zamanEposDb.epos_discountmulti], function () {
                zamanEposDb.epos_menu.get({'code': value}, function (menu) {
                    zamanEposDb.epos_menuselection.get({'code': value}, function (selection) {
                        if (typeof (menu) !== 'undefined' || typeof (selection) !== 'undefined') {
                            $('#itemCodeSearch').val('');
                            if (typeof (selection) !== 'undefined') {
                                processMe(selection.category, selection.menu, selection.id);
                                zamanEposMenu(selection.category)
                            } else {
                                processMe(menu.category, menu.id, '0');
                                zamanEposMenu(menu.category)
                            }
                            $('#itemCodeSearch').focus();
                        } else {
                            warning('Not Found', 'No item found with this code ' + value, 'close');
                            ItemCodeNumpad('itemCodeSearch', 'CLR');
                        }
                    });
                });
            });
        }
    }
    function setKeypad() {
        $('#callerPhoneOrderType').show();
        $('#callerDevicePhonePad').hide();
        $('#callerPhoneOrderType').hide();
        if ($('#Keyboard').length > 0) {
            $('#Keyboard').empty();
            $('#Keyboard').removeAttr('id');
        }
        $('#itemNumPad').show();
    }
    function ItemCodeNumpad(input, value) {
        if (value === 'DEL') {
            if ($('#' + input).val().length > 0) {
                var currentInputValue = $('#' + input).val();
                $('#' + input).val(currentInputValue.substring(0, currentInputValue.length - 1));
            }
        } else if (value === 'CLR') {
            $('#' + input).val('');
        } else if (value === 'Close') {
            $('#' + input).val('');
            $('#itemNumPad').hide();
        } else {
            $('#' + input).val($('#' + input).val() + value);
            getItemCode($('#' + input).val());
        }

    }
</script>
