<div class="category-list">
    <?php if (!empty($categories)): ?>
        <div class="paginate-category">
            <?php $listCatindex = 1; ?>
            <?php foreach ($categories as $category): ?>
                <div class="btn btn-success raised btn-block round item-btn item-btn-<?php echo $listCatindex ?> off-click" onclick="listMenus('<?php echo $category->id ?>', '<?php echo $listCatindex ?>', '<?php echo 0 ?>', '<?php echo $category->is_special ?>')"><?php echo ucwords(strtolower($category->title)) ?></div>
                <?php $listCatindex++; ?>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <div class="btn btn-success btn-block round raised item-btn item-btn-1 off-click"><?php echo ucwords(strtolower('No More Category')) ?></div>
    <?php endif; ?>
</div>
<div class="clear-fix"></div>
<script>
    var prevBtn = '<?php isset($prevPage) ? print $prevPage : print 0 ?>';
    var nextBtn = '<?php isset($nextPage) ? print $nextPage : print 1 ?>';
    var segment = '<?php isset($segment) ? print $segment + 1 : print 1 ?>';
    var pages = '<?php isset($ajaxpages) ? print $ajaxpages : print 1 ?>';
    var catPages = segment + ' OF ' + pages;
    $('#catPages').text(catPages);
    $('#prevBtn').val(prevBtn);
    $('#nextBtn').val(nextBtn);
    function listMenus(category, index, offset, is_special) {
        
        $.ajax({
            url: '<?php echo site_url('gkpos/orders/listmenus/') ?>' + offset,
            type: 'POST',
            data: {
                category: category,
                index: index,
                is_special: is_special,
            },
            success: function (output) {
                $('#listingMenus').html(output);
                $('div').html();
            }
        });
    }
    function listMenusPage(category, index, offset, is_special) {
        $.ajax({
            url: '<?php echo site_url('gkpos/orders/listmenus/') ?>' + offset,
            type: 'POST',
            data: {
                category: category,
                index: index,
                is_special: is_special,
            },
            success: function (output) {
                $('#listingMenus').html(output);
            }
        });
    }
    function menuNavigation(btn) {
        
        if ($('#ListCategoryIndex').length > 0 && $('#menuPrevPage').length > 0 && $('#menuNextPage').length > 0) {
            var category = $('#ListCategoryId').val()
            var is_special = $('#ListCategoryIsSpecial').val()
            var index = $('#ListCategoryIndex').val();
            var offset = null;
            if (btn == 'next') {
                offset = $('#menuNextPage').val();
            }
            if (btn == 'prev') {
                offset = $('#menuPrevPage').val();
            }
            listMenus(category, index, offset, is_special);
        } else {
            alert('Please select a category first');
        }

    }
    function openPopupBox(boxId, itemForm) {
        
        var showDescription = $('#showItemDescription').val();
        if (showDescription == 'yes' && itemForm != 'noForm') {
            var myform = document.getElementById(itemForm);
            var formdata = new FormData(myform);
            var menu = formdata.get('menu_title');
            var sel = formdata.get('selection_title');
            var title = null;
            if ($.trim(sel)) {
                title = sel + '-' + menu;
            } else {
                title = menu;
            }
            var description = formdata.get('content');
            var price = formdata.get('price');
            var priceString = '<br/><STRONG>PRICE:' + '<?php echo $this->config->item('currency_symbol') ?>' + Number(price).toFixed(2) + '</STRONG>';
            $.confirm({
                'title': title ? title : 'No Title To Show',
                'message': description ? description + priceString : 'No Description available to show' + priceString,
                'buttons': {
                    'OK': {
                        'class': 'btn btn-success',
                        'action': function () {
                        }
                    }
                }
            });
            $('#confirmBox').css({'left': '46%'});
        } else {
            $('#' + boxId).modal({
                keyboard: false,
                backdrop: 'static',
                show: true
            });
        }

    }
    function  showExtra(extra, itemForm) {
        var showDescription = $('#showItemDescription').val();
        if (showDescription == 'yes' && itemForm != 'noForm') {
            var myform = document.getElementById(itemForm);
            var formdata = new FormData(myform);
            var menu = formdata.get('menu_title');
            var sel = formdata.get('selection_title');
            var title = null;
            if ($.trim(sel)) {
                title = sel + '-' + menu;
            } else {
                title = menu;
            }
            var description = formdata.get('content');
            var price = formdata.get('price');
            var priceString = '<br/><STRONG>PRICE:' + '<?php echo $this->config->item('currency_symbol') ?>' + Number(price).toFixed(2) + '</STRONG>';
            $.confirm({
                'title': title ? title : 'No Title To Show',
                'message': description ? description + priceString : 'No Description available to show' + priceString,
                'buttons': {
                    'OK': {
                        'class': 'btn btn-success',
                        'action': function () {
                        }
                    }
                }
            });
            $('#confirmBox').css({'left': '46%'});
        } else {
            $('#' + extra + '.show-extra').toggle('slow');
        }
    }


</script>