@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">Traffic (GB)</th>
						<th>Supplier</th>
					</tr>
					</thead>

					<tbody>
					{{-- @todo This query is expensive still --}}
					@foreach (\App\Models\Service::active()->with(['type','product.type.supplied.supplier_detail.supplier','product.translate'])->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_monthly_price,2) }}</td>
							<td class="text-right">{{ number_format($o->product->cost_normalized(),2) }}</td>
							<td class="text-right">{{ $o->category == 'broadband' ? 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

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

	<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() {
            $('#table').DataTable({
                //oSearch: { sSearch: searchString ? decodeURIComponent(searchString) : '' },
                aLengthMenu: [
                    [25, 50, 100, 200, -1],
                    [25, 50, 100, 200, "All"]
                ],
                paging: true,
                pageLength: 25,
                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,
                    },
                ],
            });
        });
    </script>
@append