<div class="col-lg-4 col-sm-6 col-xs-12">
    <div style="height:auto" class="databox databox-vertical databox-xxxlg radius-bordered databox-shadowed">
        <div class="databox-top bg-palegreen text-align-left padding-left-10">
            <span class="databox-header"><i id="payments_spinner" style="display: none;" class="fa fa-spinner fa-spin"></i>
            <?php echo $this->lang->line("PAYMENTS"); ?></span>
        </div>
        <div class="databox-row no-padding bg-sky">
            <div class="databox-row bg-yellow padding-20 text-align-left">
                <span class="databox-text padding-bottom-5" style="font-size:20px;" id="paymentcount"><?php echo $this->lang->line("PAYMENTS"); ?> 0</span>
                <span class="databox-number" style="font-size:44px;" id="paymenttotal">0.00</span>
            </div>
            <div id="payments">
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $("#payments_spinner").show();
        $.ajax({ url: "<?= base_url() ?>dashboard/databoxes/payments",
                    data: {},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        var html = '';
                var len = data[0].length;
                for (var i = 0; i< len; i++) {
                 
            html+="<div class='databox-row row-1 padding-5 padding-left-20 text-align-left bordered-bottom bordered-whitesmoke'>"+
                    "<div class='databox-cell cell-8'>"+
                    "<span class='databox-title no-margin'>"+data[0][i].payment+data[0][i].notes+"</span>"+
                        "</div>"+
                            "<div class='databox-cell cell-4'>"+
                            "<span class='databox-number text-align-right'>"+data[0][i].total+"</span>"+
                        "</div></div>";
                }
$("#paymentcount").text('Payments '+data[1][0].payments);
$("#paymenttotal").text(data[1][0].total);
$("#payments").append(html);
$("#payments_spinner").hide();
                
                
                    }
                });
    
});
</script>