<style>
    .nav-tabs-fillup>li>a:after {
        background: none repeat scroll 0 0 #4c0870 !important;
        border: 1px solid #4c0870 !important;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('void_report') ?></div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="panel panel-transparent ">
                <ul class="nav nav-tabs nav-tabs-fillup">
                    <li class="active">
                        <a data-toggle="tab" href="#slide1"><span><?php print CommonLanguage::getMessage('invoices'); ?></span></a>
                    </li>
                    <li class="<?php echo smc_session()['default_setting']['activate_void_items_pos'] == 1 ? '' : 'hidden'; ?>">
                        <a data-toggle="tab" href="#slide2" id="slide_2_clicked"><span><?php print CommonLanguage::getMessage('items'); ?></span></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane slide-left active" id="slide1">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered inventory" id="invoiceVoidTable">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th><?php print CommonLanguage::getMessage('customer_name') ?></th>
                                                <th><?php print CommonLanguage::getMessage('reason') ?></th>
                                                <th><?php print CommonLanguage::getMessage('user_name') ?></th>
                                                <th><?php print CommonLanguage::getMessage('date_created') ?></th>
                                                <th><?php print CommonLanguage::getMessage('void_time') ?></th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane slide-left " id="slide2">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered inventory" id="itemVoidTable">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th><?php print CommonLanguage::getMessage('product_name') ?></th>
                                                <th><?php print CommonLanguage::getMessage('Quantity') ?></th>
                                                <th><?php print CommonLanguage::getMessage('total_price') ?></th>
                                                <th><?php print CommonLanguage::getMessage('date_time') ?></th>
                                                <th><?php print CommonLanguage::getMessage('user_name') ?></th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4, 5], "RestaurantAjax/voidInvoices",{},"#invoiceVoidTable");
        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4, 5], "RestaurantAjax/voidItems",{},"#itemVoidTable");
        $("#slide_2_clicked").on('click',function(){
            RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4, 5], "RestaurantAjax/voidItems",{},"#itemVoidTable");
            $("#itemVoidTable").css({"width":"100%"});
        });
    });
</script>