<div style="display: none;">
    <div id="orderDetailContent">
        <div class="popup-header toolbar-header">
            <div class="popup-title"><?php echo $this->lang->line('order_info') ?></div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="popup-content">
            <div class="pane" id="orderDetailHtml"></div>
        </div>
        <div class="tab-group">
            <div class="tab-item zaman-epos-nav quantity-digit" style="padding: 15px;" onclick="zamanEposPopupcloser()"><i class="icon icon-cancel"></i>&nbsp;Close</div>
            <div class="tab-item zaman-epos-nav quantity-digit" style="padding: 15px;" onclick="printBill(0)"><i class="icon icon-print"></i>&nbsp;Print</div>
            <?php if ($this->session->userdata('group') <= 5): ?>
                <div class="tab-item zaman-epos-nav quantity-digit" style="padding: 15px;" onclick="deleteOrder(0)"><i class="icon icon-trash"></i>&nbsp;Delete</div>
            <?php endif; ?>
        </div>
        <input type="hidden" id="detailedOrderId">
    </div>
</div>
<script type="text/javascript">
    function zamanOrderDetailPopupController(orderId) {
        $.colorbox({
            inline: true,
            scrolling: false,
            href: "#orderDetailContent",
            width: '70%',
            height: 'auto',
            maxWidth: "100%",
            open: true,
            closeButton: false,
            transition: 'elastic',
            overlayClose: false,
            onOpen: function () {
                $('#orderDetailContent .popup-content').css({'min-height': '50vh', 'max-height': '70vh', 'overflow-y': 'auto'});
                $('#orderDetailHtml').html('');
                $('#detailedOrderId').val('');
            },
            onLoad: function () {
                $('#detailedOrderId').val(orderId);
            },
            onComplete: function () {
                $.ajax({
                    url: '<?php echo site_url('report/listItem/') ?>' + orderId,
                    type: 'GET',
                    success: function (html) {
                        $('#orderDetailHtml').html(html);
                        $('#colorbox').colorbox.resize();
                    }
                });
            },
            onClosed: function () {
                $('#orderDetailHtml').html('');
                $('#detailedOrderId').val('');
            }
        });
    }
</script>