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

@section('htmlheader_title')
	{{ $o->SID }}
@endsection

@section('contentheader_title')
	Service: {{ $o->SID }}
@endsection
@section('page_title')
	{{ $o->SID }}
@endsection
@section('contentheader_description')
	{{ $o->type->name_full }}
@endsection

@section('main-content')
	<div class="content">
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header p-2">
						<ul class="nav nav-pills">
							<li class="nav-item"><a class="nav-link active" href="#tab-service" data-toggle="tab">Service</a></li>
							<li class="nav-item"><a class="nav-link" href="#tab-invoice" data-toggle="tab">Invoices</a></li>
							<li class="nav-item"><a class="nav-link" href="#tab-email" data-toggle="tab">Emails</a></li>
							<li class="nav-item"><a class="nav-link" href="#tab-traffic" data-toggle="tab">Traffic</a></li>
						</ul>
					</div>

					<div class="card-body">
						<div class="tab-content">
							<div class="active tab-pane" id="tab-service">
								<div class="row">

									<div class="card-group w-100">
										@include('common.service.widget.info')

										<div class="card card-primary card-outline">
											<div class="card-header">
												<strong>Service Details</strong>
											</div>

											<div class="card-body">
												<table class="table table-borderless">
													<tr>
														<th>Number</th>
														<td>{{ $o->type->service_number }}</td>
													</tr>
													<tr>
														<th>Address</th>
														<td>{{ $o->type->service_address }}</td>
													</tr>
													<tr>
														<th>Connected</th>
														<td>{{ $o->type->service_connect_date->format('Y-m-d') }}</td>
													</tr>
													<tr>
														<th>Contract</th>
														<td>{{ $o->type->contract_term }} mths <small>(until {{ $o->type->service_contract_date ? $o->type->service_contract_date->addMonths($o->type->contract_term)->format('Y-m-d') : 'N/A' }})</small></td>
													</tr>
													<tr>
														<th>Username</th>
														<td>{{ $o->type->service_username }}</td>
													</tr>
													<tr>
														<th>Password</th>
														<td>{{ $o->type->service_password }}</td>
													</tr>
													<tr>
														<th>IP Address</th>
														<td>{{ $o->type->ipaddress ? $o->type->ipaddress : 'Dynamic' }}</td>
													</tr>
												</table>
											</div>
										</div>

										<div class="card card-primary card-outline">
											<div class="card-header">
												<strong>DSL Details</strong>
											</div>

											<div class="card-body">
												<table class="table table-borderless">
													<tr>
														<th>Speed</th>
														<td>{{ $o->product->type->speed }}</td>
													</tr>
													@if ($o->product->type->base_down_peak)
													<tr>
														<th>Peak Included Downloads</th>
														<td>{{ number_format($o->product->type->base_down_peak,0) }}GB</td>
													</tr>
													@endif
													@if ($o->product->type->base_down_offpeak)
														<tr>
															<th>Peak Included Downloads</th>
															<td>{{ number_format($o->product->type->base_down_offpeak,0) }}MB</td>
														</tr>
													@endif
													<tr>
														<th>Traffic Last Month</th>
														<td>TBA</td>
													</tr>
													<tr>
														<th>Traffic This Month</th>
														<td>TBA</td>
													</tr>
													<tr>
														<th>Excess Traffic Charges to Bill</th>
														<td>TBA</td>
													</tr>
												</table>
											</div>
										</div>

									</div>
								</div>
							</div>

							<div class="tab-pane" id="tab-invoice">
								<div class="row">
									<div class="col-4">
										@include('common.service.widget.invoice')

										{{-- @todo show list of outstanding invoices --}}
									</div>

									{{-- Workaround since col-offset-x is not in our CSS? --}}
									<div class="col-2">
										&nbsp;
									</div>

									<div class="col-6">
										@include('common.invoice.widget.list')
									</div>
								</div>
							</div>

							<div class="tab-pane" id="tab-email">
							</div>

							<div class="tab-pane" id="tab-traffic">
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
@endsection