<div style="display:none">
    <div id="QuantityPopup" class="popupouter">
        <fieldset style="margin: 0 auto;padding: 0px">
            <style>
                #QuantityPopupContent .payment-pin-calculatorbg ul li {
                    font-size: 13px;
                    line-height: 50px;
                    padding: 12px 24px;
                }
                
            </style>
            <div class="popup-body row">
                <div id="QuantityPopupContent" class="warningPopupContent col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group form-group-sm" style="padding-bottom: 20px;">	
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="pin-calculatorbg payment-pin-calculatorbg">
                                <input type="text" id="customQuantity" name="quantity" class="form-control input-lg" style="width: 330px; margin: 0 auto;height: 30px;">
                                <ul>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key1') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key2') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key3') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key4') ?></li>
                                </ul>
                                <ul>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key5') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key6') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key7') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key8') ?></li>
                                </ul>
                                <ul>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key9') ?></li>
                                    <li class="numkey quantityNumKey"><?php echo $this->lang->line('gkpos_numpad_key0') ?></li>
                                    <li class="btnPin quantityBtnPin" style="padding: 12px 15px !important"><?php echo $this->lang->line('gkpos_numpad_key_clr') ?></li>
                                    <li class="btnPin quantityBtnPin" style="padding: 12px 15px !important"><?php echo $this->lang->line('gkpos_numpad_key_del') ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-md">	
                        <div class="col-md-12">
                            <ul id="custom_quantity_form_error_message_box" class="error_message_box text-left" style="width: 330px; margin: 0 auto "></ul>
                            <input class="form-submit-button mainsystembg2 waiting-bg img-responsive delivery-info-submit-btn" type="submit" name="submit_form" value="<?php echo $this->lang->line('gkpos_numpad_key_enter') ?>" onclick="saveQuantity()" style="width: 330px; margin: 0 auto;padding: 20px 0px;">
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <script>
            function addQuantity() {
                
                $('#popUpQuantity').val('');
                var QuantityPopup = $("#QuantityPopup").html();
                $('#categoryTitle').html('<p class="sidebar-heading text-uppercase"><?php echo $this->lang->line('gkpos_add_quantity') ?></p>');
                $('#menuListArea').html(QuantityPopup);
                setQuantityNumKeys('customQuantity');
                return false;
            }
            function setQuantityNumKeys(inputFiledId) {
                jQuery('.quantityNumKey').click(function (event) {
                    
                    var numBox = document.getElementById(inputFiledId);
                    numBox.value = numBox.value + this.innerHTML;
                    event.stopPropagation();
                });
                $('.quantityBtnPin').click(function (event) {
                    
                    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();
                });
            }
            function saveQuantity() {
                
                var Quantity = $('#customQuantity').val();
                if ($.isNumeric(Quantity)) {
                    if (Number(Quantity) >= 1) {
                        if ($('#popUpQuantity').val(Number(Quantity))) {
                            $('#menuListArea').html('');
                            $('#categoryTitle').html('<p class="sidebar-heading text-uppercase"><?php echo $this->lang->line('gkpos_click_category_mesage') ?></p>');
                        }
                    } else {
                        $('#custom_quantity_form_error_message_box').html('<li>' + 'Only positive value please' + '</li>');
                    }
                } else {
                    $('#custom_quantity_form_error_message_box').html('<li>' + 'Only Specify valid positive number' + '</li>');
                }
            }
        </script>
    </div>
</div>