
<div class="row"> 
    <div class="col-md-12">
        <div class="content-top-1 box box-default">
            <div class="box-body"> 
                <table class="ui celled table stripe" width="100%" id="customerfloat">
                    <thead>
                        <th>Customer</th>
                        <th>Loan Amount (Kes)</th>
                        <th>Paid (Kes)</th>
                        <th>Outstanding Balance (Kes)</th>
                        <th> </th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/_public/js/mburu.js"></script>
<script type="text/javascript"> 
    var chartdata = {
        labels: [],
        datasets: []
    };

    $(document).ready(function() {  
        
        var table2 = $('#customerfloat').DataTable({
            destroy: true,
            responsive: false,
            "ajax": {
                url: '/tables/customerfloat',
                type: 'get'
            },
            scrollY: "800px",
            scrollX: true,
            scrollCollapse: true,
            paging: true,
            fixedColumns: true,
            lengthChange: true,
            "rowCallback": function(nRow, aData) { 
                $('td', nRow).eq(4).html("<a href='/clientfloat/sendcomms/" + encodeURIComponent( btoa(aData[4].trim()) )  + "' class='btn btn-sm btn-default'> Send Status SMS</a>");
                $('td', nRow).eq(1).html(parseFloat(aData[1]).toLocaleString())
                $('td', nRow).eq(2).html(parseFloat(aData[2]).toLocaleString())
                $('td', nRow).eq(3).html(parseFloat(aData[3]).toLocaleString())
            },
        });

        var buttons = new $.fn.dataTable.Buttons(table2, {
            buttons: ['excelHtml5', 'pdfHtml5']
        });
        buttons.container().appendTo($('div.right.aligned.eight.column:eq(0)', table2.table().container()));
    })
</script>