osb/resources/views/theme/backend/adminlte/service/widget/active.blade.php

<!-- $o=App\Models\User -->
<!-- Show active services -->
<div class="card card-dark">
	<div class="card-header">
		<h3 class="card-title">Active Services</h3>
	</div>

	<div class="card-body">
		@if ($o->services->count())
			<table class="table table-striped table-hover" id="services_active">
				<thead>
				<tr>
					<th>ID</th>
					<th>Category</th>
					<th>Service</th>
					<th>Product</th>
					<th>Next Invoice</th>
				</tr>
				</thead>

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

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

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

	<style>
		table.dataTable tr.dtrg-group.dtrg-end.dtrg-level-0 {
			font-size: 75%;
			background-color: #eeeeee !important;
		}
		table.dataTable tr.dtrg-group.dtrg-end.dtrg-level-0 td {
			background-color: #fefefe !important;
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#services_active').DataTable({
				order: [[1,'asc'],[2,'asc']],
				rowGroup: {
					dataSrc: 1,
					endRender: function ( rows, group ) {
						return rows.count()+' x ' + group;
					},
				},
			});

			$('#services_active tbody').on('click','tr', function () {
				$(this).toggleClass('selected');
			});
		});
	</script>
@append