<div style="display: none;">
    <div id="itemInfoContent">
        <div class="popup-header toolbar-header">
            <div class="popup-title">Item information</div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="popup-content">
            <div class="pane">
                <table id="itemInformationTableOnOrderPage" class="table-striped"></table>
                <div id="itemInfoDiscription" style="padding: 10px; font-size: 10px;"></div>
            </div>
        </div>
        <div class="tab-group" id="processItemAfterInfo"></div>
    </div>
</div>
<script type="text/javascript">
    function zamanItemInfoControllerPopup(categoryObject, menuObject, selectionObject) {
        $.colorbox({
            inline: true,
            scrolling: false,
            href: "#itemInfoContent",
            width: '40%',
            height: 'auto',
            maxWidth: "100%",
            open: true,
            closeButton: false,
            transition: 'elastic',
            overlayClose: false,
            onOpen: function () {
                playBeepSound();
                $('#showItemInfo').val('no');
                $('#itemInfoShower').removeClass('active');
                $('#itemInformationTableOnOrderPage').html('');
                $('#itemInfoDiscription').text('');
                $('#processItemAfterInfo').html('');
            },
            onLoad: function () {
                var itemName = ''
                var basePrice = 0;
                var inPrice = 0;
                var outPrice = 0;
                var itemDescription = '';
                if (!jQuery.isEmptyObject(selectionObject)) {
                    itemName += selectionObject.title + '-' + menuObject.title;
                    basePrice = selectionObject.base_price;
                    inPrice = selectionObject.in_price;
                    outPrice = selectionObject.out_price;
                    itemDescription += selectionObject.content;
                } else {
                    itemName += menuObject.title;
                    basePrice = menuObject.base_price;
                    inPrice = menuObject.in_price;
                    outPrice = menuObject.out_price;
                    itemDescription += menuObject.content;
                }
                var itemHtml = `
                        <tr>
                            <td class="text-left"><?php echo $this->lang->line('name') ?></td>
                            <td class="text-left">` + itemName + `</td>
                         </tr>
                        <tr>
                            <td class="text-left"><?php echo $this->lang->line('base_price') ?></td>
                            <td class="text-left">` + toCurrency(basePrice) + `</td>
                         </tr> 
                          <tr>
                            <td class="text-left"><?php echo $this->lang->line('dine_in_price') ?></td>
                            <td class="text-left">` + toCurrency(inPrice) + `</td>
                         </tr>
                          <tr>
                            <td class="text-left"><?php echo $this->lang->line('takeaway_or_out_price') ?></td>
                            <td class="text-left">` + toCurrency(outPrice) + `</td>
                         </tr>
                         <tr>
                            <td class="text-left"><?php echo $this->lang->line('category') ?></td>
                            <td class="text-left">` + categoryObject.title + `</td>
                         </tr>       
                        `;
                $(itemHtml).appendTo('#itemInformationTableOnOrderPage');
                $('#itemInfoDiscription').text(itemDescription);
                var processItemAfterInfo = '';
                if (!jQuery.isEmptyObject(selectionObject)) {
                    processItemAfterInfo += `<div class="tab-item zaman-epos-nav quantity-digit" style="padding: 15px;" onclick="processMe('` + selectionObject.category + `','` + selectionObject.menu + `','` + selectionObject.id + `')"><span><?php echo $this->lang->line('add') ?></span></div>`
                } else {
                    processItemAfterInfo += `<div class="tab-item zaman-epos-nav quantity-digit" style="padding: 15px;" onclick="processMe('` + menuObject.category + `','` + menuObject.id + `','` + 0 + `')"><span><?php echo $this->lang->line('add') ?></span></div>`
                }
                $('#processItemAfterInfo').html(processItemAfterInfo);
                $('#colorbox').colorbox.resize();
            },
            onComplete: function () {
            },
            onCleanup: function () {
            },
            onClosed: function () {
                $('#showItemInfo').val('no');
                $('#itemInfoShower').removeClass('active');
                $('#itemInformationTableOnOrderPage').html('');
                $('#itemInfoDiscription').text('');
                $('#processItemAfterInfo').html('');
            }
        });
    }
</script>