<!-- $o = Product::class -->
<div class="row">
	@if(count($o->services))
		<div class="col-7">
			<table class="table table-hover w-100" id="table">
				<thead>
				<tr>
					<th>ID</th>
					<th>Date Start</th>
					<th>Date Stop</th>
					<th>Data Invoiced</th>
					<th>Active</th>
					<th class="text-right"><small>Normalized</small><br>Charge</th>
					<th class="text-right"><small>Normalized</small><br>Cost</th>
					<th>&nbsp;</th>
				</tr>
				</thead>

				<tbody>
				@foreach ($o->services as $so)
					<tr>
						<td><a href="{{ url('u/service',[$so->id]) }}">{{ $so->sid }}</a></td>
						<td>{{ $so->start_at ? $so->start_at->format('Y-m-d') : '-' }}</td>
						<td>{{ $so->stop_at ? $so->stop_at->format('Y-m-d') : '-' }}</td>
						<td>{{ $so->invoice_to ? $so->invoice_to->format('Y-m-d') : '-' }}</td>
						<td>{{ $so->active ? 'YES' : 'NO' }}</td>
						<td class="text-right">{{ $a=number_format($so->billing_charge_normalised,2) }}</td>
						<td class="text-right">{{ $b=number_format($so->product->cost_normalized(),2) }}</td>
						<td><button class="btn btn-sm @if($a<$b)btn-danger @else btn-success @endif"><small>@if($a<$b)<i class="fas fa-fw fa-exclamation"></i> @else <i class="fas fa-fw fa-check"></i> @endif</small></button></td>
					</tr>
				@endforeach
				</tbody>
			</table>
		</div>

	@else
		<p>No services use this product.</p>
	@endif
</div>

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

	<style>
		tr.odd td:first-child,
		tr.even td:first-child {
			padding-left: 3em;
		}
		table.dataTable tr.dtrg-group.dtrg-level-1 td {
			background-color: #e0e0e0;
			color: #4c110f;
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function() {
			@if(count($o->services))
				$('#table').DataTable({
					paging: true,
					pageLength: 25,
					lengthChange: true,
					searching: true,
					ordering: true,
					info: true,
					autoWidth: false,
					fixedHeader: true,
					order: [[4,'desc'],[0,'asc']],
					rowGroup: {
						dataSrc: 4,
					},
					columnDefs: [
						{
							targets: [4],
							visible: false,
						}
					],
					language: {
						searchPanes: {
							clearMessage: 'Clear',
							title: 'Filters: %d',
							collapse: 'Filter',
						}
					},
					searchPanes: {
						cascadePanes: true,
						viewTotal: true,
						layout: 'columns-1',
						dataLength: 20,
						controls: false,
					},
					dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"Bfrtip>>',
				});

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