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']);
@endphp

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

	<div class="card-body">
		@if (($x=$o->services_active)->count())
			<table class="table table-striped table-hover w-100" 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>

@section('page-styles')
	@css(datatables,bootstrap4|rowgroup)
@append

@section('page-scripts')
	@js(datatables,bootstrap4|rowgroup)

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