@use(App\Models\Service)

@extends('adminlte::layouts.app')

@section('htmlheader_title')
	Service List
@endsection
@section('page_title')
	Service List
@endsection

@section('contentheader_title')
	Service List
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="col-md-12">
		<div class="card">
			<div class="card-body">
				<table class="table table-sm table-striped" id="table">
					<thead>
					<tr>
						<th>ID</th>
						<th>Service</th>
						<th>Product</th>
						<th class="text-right">Monthly</th>
						<th class="text-right">Cost</th>
						<th class="text-right">Usage</th>
						<th>Supplier</th>
					</tr>
					</thead>

					<tbody>
					@foreach (Service::ServiceActive()->with(['account.taxes','type','product.type.supplied.supplier_detail.supplier','product.translate','type.traffic'])->get() as $o)
						<tr>
							<td><a href="{{ url('u/service',[$o->id]) }}">{{ $o->id }}</a></td>
							<td>{{ $o->name }}</td>
							<td>{{ $o->product->name }}</td>
							<td class="text-right">{{ number_format($o->billing_charge_normalised,2) }}</td>
							<td class="text-right">{{ number_format($o->product->cost_normalized(),2) }}</td>
							<td class="text-right">{{ $o->product->hasUsage() ? number_format($o->type->usage_summary(0)->sum()/1000,1) : '-' }}</td>
							<td>{{ $o->product->supplier->name }}</td>
						</tr>
					@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>
@endsection

@pa(datatables,rowgroup|conditionalpaging|select|searchpanes|searchpanes-left)

@section('page-scripts')
	<script type="text/javascript">
		$(document).ready(function() {
			$('#table').DataTable({
				//oSearch: { sSearch: searchString ? decodeURIComponent(searchString) : '' },
				aLengthMenu: [
					[25, 50, 100, 200, -1],
					[25, 50, 100, 200, "All"]
				],
				paging: true,
				pageLength: 25,
				conditionalPaging: true,
				lengthChange: true,
				searching: true,
				ordering: true,
				info: true,
				autoWidth: false,
				fixedHeader: true,
				order: [
					[2,'asc'],
					[1,'asc'],
				],
				rowGroup: {
					dataSrc: [2],
				},
				columnDefs: [
					{
						targets: [2],
						visible: false,
					},
					{
						targets: [0,1,3,4,5],
						searchPanes: {
							show: false,
						}
					},
				],
				language: {
					searchPanes: {
						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>>',
			});
		});
	</script>
@append