<div class="box box-info small"> <div class="box-header"> <h3 class="box-title">Invoices Due</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"> <i class="fa fa-minus"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"> <i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> @if ($user->invoices_due->count()) <table class="table table-bordered table-striped table-hover" id="invoices" style="width: 100%;"> <thead> <tr> <th>Invoice</th> <th>Total</th> <th>Due</th> <th>Date Date</th> </tr> </thead> <tfoot> <tr> <th>Count {{ $user->invoices_due->count() }}</th> {{-- @todo Number format should configured by currency --}} <th class="right">{{ number_format($user->invoices_due->sum('total'),2) }}</th> <th class="right">{{ number_format($user->invoices_due->sum('due'),2) }}</th> <th> </th> </tr> </tfoot> </table> @else <p>No invoices due</p> @endif </div> </div> @section('page-scripts') @css('https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css') @css('https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css') @js('https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js') @js('https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js') <style> table.dataTable { width: 100%; } table.dataTable td { outline: none; } </style> <script type="text/javascript"> $(document).ready(function() { $('#invoices').DataTable( { responsive: true, ajax: { url: "/api/u/invoices" }, columns: [ { data: "invoice_id_url" }, { data: "total" }, { data: "due" }, { data: "date_due" } ], language: { emptyTable: "No Invoices Due" }, order: [3, 'asc'] }); $('#invoices tbody').on('click','tr', function () { $(this).toggleClass('selected'); }); }); </script> @append