@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>Supplier ID</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>{{ $o->supplierid }}</td>
							<td class="text-right">{{ number_format($o->billing_charge_normalised_taxed,2) }}</td>
							<td class="text-right">{{ number_format($o->billing_cost_normalised,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>
					<tfoot>
					<tr>
						<td></td>
						<th>TOTAL:</th>
						<td></td>
						<td class="text-right"></td>
						<td class="text-right"></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					</tfoot>
				</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],
					endRender: function (rows, group) {
						// Remove the formatting to get integer data for summation
						let intVal = function (i) {
							return typeof i === 'string'
								? i.replace(/[\$,]/g, '') * 1
								: typeof i === 'number'
									? i
									: 0;
						};

						// Total over all pages
						let month = rows
							.data()
							.pluck(4)
							.reduce((a, b) => intVal(a) + intVal(b), 0);

						let cost = rows
							.data()
							.pluck(5)
							.reduce((a, b) => intVal(a) + intVal(b), 0);

						let usage = rows
							.data()
							.pluck(6)
							.reduce((a, b) => intVal(a) + intVal(b), 0);

						return $('<tr/>')
							.append('<td/>')
							.append('<td><strong>SUB-TOTAL:</strong></td>')
							.append('<td/>')
							.append('<td class="text-right"><strong>'+month.toFixed(2)+'</strong></td>')
							.append('<td class="text-right"><strong>'+cost.toFixed(2)+'</strong></td>')
							.append('<td class="text-right"><strong>'+usage.toFixed(2)+'</strong></td>')
							.append('<td/>');
					}
				},
				columnDefs: [
					{
						targets: [2],
						visible: false,
					},
					{
						targets: [0,1,4,5,6],
						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>>',
				footerCallback: function (row, data, start, end, display) {
					let api = this.api();

					// Remove the formatting to get integer data for summation
					let intVal = function (i) {
						return typeof i === 'string'
							? i.replace(/[\$,]/g, '') * 1
							: typeof i === 'number'
								? i
								: 0;
					};

					// Total over all pages
					month = api
						.column(4,{ search: 'applied' })
						.data()
						.reduce((a, b) => intVal(a) + intVal(b), 0);

					// Total over this page
					monthTotal = api
						.column(4, { page: 'current' })
						.data()
						.reduce((a, b) => intVal(a) + intVal(b), 0);

					// Total over all pages
					cost = api
						.column(5,{ search: 'applied' })
						.data()
						.reduce((a, b) => intVal(a) + intVal(b), 0);

					// Total over this page
					costTotal = api
						.column(5, { page: 'current' })
						.data()
						.reduce((a, b) => intVal(a) + intVal(b), 0);

					// Update footer
					api.column(4).footer().innerHTML = monthTotal.toFixed(2)+'<br><small>('+month.toFixed(2)+')</small>';
					api.column(5).footer().innerHTML = costTotal.toFixed(2)+'<br><small>('+cost.toFixed(2)+')</small>';
				}
			});
		});
	</script>
@append