<div class="content-top-1 box box-default">
    <div class="box-body">
        <div class="row">
            <div class="col-md-4">
                <div class="input-daterange input-group col-md-12" id="datepicker">
                    <input type="text" class="input-sm form-control" id="from" name="start" placeholder="From date" />
                    <span class="input-group-addon">to</span>
                    <input type="text" class="input-sm form-control" id="to" name="end" placeholder="To date" />
                </div>
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary col-md-6" id="btnsearch"><i class="fa fa-search"></i></button>
            </div>
        </div>
        <br>


        <div class="row">
            <div class="col-md-12" style="padding-left: 30px">
                <table class="ui celled table stripe" width="100%" id="datatable">
                    <thead>
                        <th>Loaned On</th>
                        <th>Amount (Kes)</th>
                        <th>Added On</th>
                        <th>By</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="/_public/js/mburu.js"></script>

<script type="text/javascript">
    var chart1;
    $(document).ready(function() {
        $('.input-daterange').datepicker({});
        $('#from').val(moment().subtract(2, 'months').format('MM/DD/YYYY'));
        $('#to').val(moment().endOf('month').format('MM/DD/YYYY'));

        $('#btnsearch').click(function() {
            var table = $('#datatable').DataTable({
                destroy: true,
                responsive: false,
                "ajax": {
                    url: '/tables/leta_float_history',
                    type: 'get',
                    data: {
                        from: $('#from').val(),
                        to: $('#to').val(),
                        id: '<?= base64_decode(urldecode($this->uri->segment(4))); ?>',
                        type: '<?= base64_decode(urldecode($this->uri->segment(5))); ?>',
                    }
                },
                "order": [
                    [0, "asc"]
                ],
                scrollY: "800px",
                scrollX: true,
                scrollCollapse: true,
                paging: true,
                fixedColumns: true,
                lengthChange: true,
                "rowCallback": function(nRow, aData) {
                    $('td', nRow).eq(1).html(parseFloat(aData[1]).toLocaleString()) 
                }
            });

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

        $('#btnsearch').click();
    });
</script>