osb/resources/views/theme/backend/adminlte/account/widget/service_active.blade.php

<!-- $o=Account::class -->
@php($o->load(['services_active.invoiced_service_items_active_recent']))

<!-- Show active services -->
<div class="card card-light">
	<div class="card-header p-2">
		<h3 class="card-title">Active Services</h3>
	</div>

	<div class="card-body p-2">
		@if(($x=$o->services_active)->count())
			<table class="table table-sm table-striped table-hover" id="services_active_{{ $ao->id }}">
				<thead>
				<tr>
					<th>ID</th>
					<th>Category</th>
					<th>Service</th>
					<th>Product</th>
					<th>Next Invoice</th>
				</tr>
				</thead>

				<tbody>
				@foreach ($x as $so)
					<tr>
						<td><a href="{{ url('u/service',[$so->id]) }}">{{ $so->sid }}</a></td>
						<td>{{ $so->product->category_name }}</td>
						<td>{{ $so->name_short }}</td>
						<td>{{ $so->product->name }}</td>
						<td>{{ $so->external_billing ? '-' : $so->invoice_next->format('Y-m-d') }}</td>
					</tr>
				@endforeach
				</tbody>
				<tfoot>
				<tr>
					<th>Count {{ $x->count() }}</th>
					<th colspan="4">&nbsp;</th>
				</tr>
				</tfoot>
			</table>

		@else
			<p>No services active</p>
		@endif
	</div>
</div>

@pa(datatables,rowgroup|conditionalpaging)

@section('page-scripts')
	<script type="text/javascript">
		$(document).ready(function() {
			@if($x->count())
				$('#services_active_{{ $ao->id }}').DataTable({
					conditionalPaging: true,
					order: [[1,'asc'],[2,'asc']],
					rowGroup: {
						dataSrc: 1,
						endRender: function (rows,group) {
							return rows.count()+' x '+group;
						},
					},
					columnDefs: [
						{
							targets: [1],
							visible: false,
						},
					],
				});
			@endif
		});
	</script>
@append