<style>
    .table thead tr>th {
        background-color: #4c0870;
        width: 16% !important;
        color: #fff;
    }

    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }

    .bg-master-lighter {
        border: none;
        background-color: #fff;
        border-top: 1px solid #ddd;
    }
</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('customer_limit_balance'); ?></div>

            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">

                    <div><label><?php print CommonLanguage::getMessage('hide_zero_limit'); ?></label></div>

                    <input type="checkbox" id="hide_zero_limit" checked="checked" name="hide_zero_limit" />
                </div>
                <div class="col-md-3">
                    <div><label><?php print CommonLanguage::getMessage('show_stop_only'); ?></label></div>

                    <input type="checkbox" id="show_stop_only" name="show_stop_only" />
                </div>
                <div class="col-md-3">
                    <div><label><?php print CommonLanguage::getMessage('hide_zero_balance'); ?></label></div>
                    <input type="checkbox" id="hide_zero_balance" name="hide_zero_balance" />
                </div>
            </div>
            <br>
            <div class="row <?php echo $permissions->hasPermission('Branches') ? '':'hidden'; ?>">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                    <input id="search_branch_id" type="hidden" class="full-width" name="search_branch_id" >
                </div>
            </div>
            <br>

            <div class="row">
                <table class="table table-bordered table-hover demo-table-search " id="tableWithSearch">
                    <thead>
                        <tr>
                            <th class="text-center"><?php print CommonLanguage::getMessage('Code'); ?></th>
                            <th class="text-center" style="width:25%"><?php print CommonLanguage::getMessage('Name'); ?></th>
                            <th class="text-center"><?php print CommonLanguage::getMessage('company'); ?></th>
                            <th class="text-center"> <?php print CommonLanguage::getMessage('limit'); ?></th>
                            <th class="text-center"><?php print CommonLanguage::getMessage('balance'); ?></th>
                            <th class="text-center"><?php print CommonLanguage::getMessage('status'); ?></th>


                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('customer_limit_balance')); ?>;
    $(function() {
        build_select2($("#search_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");

        new Switchery($("#hide_zero_limit").get(0), {
            color: $.Pages.getColor("primary")
        })
        new Switchery($("#show_stop_only").get(0), {
            color: $.Pages.getColor("primary")
        })
        new Switchery($("#hide_zero_balance").get(0), {
            color: $.Pages.getColor("primary")
        })
        rebuild_table();
        $("#hide_zero_limit,#hide_zero_balance,#show_stop_only,#search_branch_id").on("change", function() {
            rebuild_table();
        })
        
    })

    function rebuild_table() {
        var data = {
            hide_zero_limit: ($("#hide_zero_limit").is(":checked") ? 1 : 0),
            hide_zero_balance: ($("#hide_zero_balance").is(":checked") ? 1 : 0),
            show_stop_only: ($("#show_stop_only").is(":checked") ? 1 : 0),
            search_branch_id: ($("#search_branch_id").val())
        }
        RebuildDataTable(title, [0, 1, 2, 3, 4], 'InventoryAjax/CustomerLimitBalanceRequest', data);
    }
</script>