<div style="display: none;">
    <div id="toppingsContent">
        <div class="popup-header toolbar-header">
            <div class="popup-title">Toppings</div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="popup-content">
            <div class="clearfix item-group">
                <div class="menu-list special-modify-btn-groups" id="gloablToppingList"></div>
            </div>
            <form class="clearfix" id="orderCustomToppingForm">
                <div class="neworder-waiting">
                    <div class="neworder-table-number collection-customer" style="width: 60%">
                        <div class="form-group">
                            <label><?php echo $this->lang->line('title') ?></label>
                            <input type="text" name="name" id="orderCustomToppingName" class="form-control" placeholder="<?php echo $this->lang->line('title') ?>">
                        </div>
                        <div class="clearfix"></div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">q</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">w</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">e</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">r</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">t</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">y</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">u</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">i</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">o</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">p</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">a</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">s</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">d</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">f</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">g</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">h</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">j</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">k</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">l</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">z</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">x</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">c</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">v</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">b</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">n</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey">m</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaActionKey">DEL</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaKey"> </div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingAlphaActionKey">CLR</div>
                        </div>
                    </div>
                    <div class="neworder-table-guest collection-phone" style="width: 20%">
                        <div class="form-group">
                            <label><?php echo $this->lang->line('price') ?></label>
                            <input type="text" name="price" id="orderCustomToppingPrice" class="form-control" placeholder="<?php echo $this->lang->line('price') ?>">
                        </div>
                        <div class="clearfix"></div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">1</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">2</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">3</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">4</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">5</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">6</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">7</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">8</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">9</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">0</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryNumKey">.</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingPrimaryActionKey">CLR</div>
                        </div>
                    </div>
                    <div class="neworder-table-guest collection-time" style="width: 20%">
                        <div class="form-group">
                            <label><?php echo $this->lang->line('quantity') ?></label>
                            <input type="text" name="quantity" id="orderCustomToppingQuantity" class="form-control" placeholder="<?php echo $this->lang->line('quantity') ?>">
                        </div>
                        <div class="clearfix"></div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">1</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">2</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">3</div>

                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">4</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">5</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">6</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">7</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">8</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">9</div>
                        </div>
                        <div class="tab-group keypad">
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryActionKey">DEL</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryNumKey">0</div>
                            <div class="tab-item zaman-epos-nav quantity-digit keypad-key toppingSecondaryActionKey">CLR</div>
                        </div>
                    </div>
                </div>
                <div class="tab-group config-submit">
                    <button type="submit" onclick="initiateOrderCustomToppingForm('orderCustomToppingForm')"><span class="icon icon-plus"></span>&nbsp;<?php echo $this->lang->line('add') ?></button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    function zamanOrderToppingControllerPopup() {
        zamanEposDb.epos_order.get({orderId: Number(zamanEposCart.getEposCurrentId())}).then(function (anOrder) {
            if (typeof (anOrder) !== 'undefined') {
                if (Number(anOrder.isPaid) === 3) {
                    orderPaymentPreProcessor(anOrder);
                } else {
                    if ($.trim($('#cartSelectedLine').val())) {
                        $.colorbox({
                            inline: true,
                            scrolling: false,
                            href: "#toppingsContent",
                            width: '100%',
                            height: 'auto',
                            maxWidth: "100%",
                            bottom: '0',
                            open: true,
                            closeButton: false,
                            transition: 'none',
                            overlayClose: false,
                            left: '0px',
                            className: 'transparent-overlay',
                            onOpen: function () {
                                playBeepSound();
                            },
                            onLoad: function () {
                                $('#gloablToppingList').html('');
                            },
                            onComplete: function () {
                                zamanEposDb.transaction('rw', [zamanEposDb.epos_nattrcategory, zamanEposDb.epos_nattr], () => {
                                    zamanEposDb.epos_nattrcategory.where({status: '3'}).toArray().then(function (nattrCats) {
                                        if (nattrCats.length > 0) {
                                            nattrCats.forEach(function (nattrCat) {
                                                zamanEposDb.epos_nattr.where({nattrcategory: nattrCat.id}).toArray().then(function (nattrCatItems) {
                                                    var html = '';
                                                    if (nattrCatItems.length > 0) {
                                                        nattrCatItems.forEach(function (nattrCatItem) {
                                                            html += '<div class="menu-button" onclick="AddGlobalToppingToItem(\'' + nattrCatItem.title + '\',\'1\',\'' + nattrCatItem.price + '\')"><div class="menu-button-inner">' + nattrCatItem.title + '</div></div>';
                                                        });
                                                    }
                                                    $('#gloablToppingList').append(html);
                                                    $('#colorbox').colorbox.resize();
                                                });
                                            });
                                        }
                                    });
                                });
                            },
                            onCleanup: function () {
                            },
                            onClosed: function () {
                                resetForm('orderCustomToppingForm');
                            }
                        });
                    } else {
                        warning('<?php echo $this->lang->line('warning') ?>', '<?php echo $this->lang->line('cart_item_select_msg') ?>', '<?php echo $this->lang->line('close') ?>');
                    }
                }
            } else {
                warning('<?php echo $this->lang->line('warning') ?>', '<?php echo $this->lang->line('load_order_in_cart') ?>', '<?php echo $this->lang->line('ok') ?>');
            }
        });
    }
    function AddGlobalToppingToItem(title, qty, price) {
        if ($.trim(title) && $.trim(qty) && $.trim(price)) {
            var line = $('#cartSelectedLine').val();
            var itemTopData = {};
            itemTopData.title = title;
            itemTopData.qty = parseInt(Number(qty));
            itemTopData.price = parseFloat(Number(price));
            itemTopData.set = '0';
            var activeLine = zamanEposCart.addGlobalTop(line, itemTopData);
            displayEposCart();
            setCartLine(activeLine);
            zamanEposPopupcloser();
        }
    }

    function initiateOrderCustomToppingForm(formId) {
        $('#' + formId).validate({
            submitHandler: function () {
                var orderCustomToppingName = $('#orderCustomToppingName').val();
                var orderCustomToppingPrice = Number($('#orderCustomToppingPrice').val());
                var orderCustomToppingQuantity = Number($('#orderCustomToppingQuantity').val());
                AddGlobalToppingToItem(orderCustomToppingName, orderCustomToppingQuantity, orderCustomToppingPrice);
            },
            errorClass: "has-error",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
                $.colorbox.resize();
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
                $.colorbox.resize();
            },
            rules: {
                name: {required: true},
                price: {number: true, min: 0, required: true},
                quantity: {number: true, min: 1, required: true}
            },
            messages: {name: 'Customer name is required', phone: 'Customer phone is required'},
            errorPlacement: function (error, element) {
                errorPlacement(error, element);
            }
        });
    }

</script>