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

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

@section('contentheader_title')
	Service: {{ $o->sid }} <strong>{{ $o->product->name }}</strong>
@endsection
@section('contentheader_description')
	{{ $o->sname }}: {{ $o->sdesc }}
@endsection

@section('main-content')
	<div class="row">
		<!-- Service Details -->
		<div class="col-5">
			@include('u.service.widgets.'.$o->stype.'.details',['o'=>$o->type])
			@include('u.service.widgets.information')
		</div>

		<div class="col-7">
			<div class="card">
				<div class="card-header bg-dark d-flex p-0">
					<span class="p-3"><i class="fa fa-bars"></i></span>
					<ul class="nav nav-pills p-2">
						<li class="nav-item"><a class="nav-link active" href="#product" data-toggle="tab">Product</a></li>
						<li class="nav-item"><a class="nav-link" href="#traffic" data-toggle="tab">Traffic</a></li>
						<li class="nav-item"><a class="nav-link" href="#invoice_next" data-toggle="tab">Next Invoice</a></li>
						<li class="nav-item"><a class="nav-link" href="#invoices" data-toggle="tab">Invoices</a></li>
						<li class="nav-item"><a class="nav-link" href="#emails" data-toggle="tab">Emails</a></li>
					</ul>

					@can('update',$o)
						<ul class="nav nav-pills ml-auto p-2">
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
									ACTION <span class="caret"></span>
								</a>
								<div class="dropdown-menu dropdown-menu-right">
									<a class="dropdown-item" tabindex="-1" href="#tab_3">Action</a>
									<a class="dropdown-item" tabindex="-1" href="#">Another action</a>
									<a class="dropdown-item" tabindex="-1" href="#">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" tabindex="-1" href="#">Separated link</a>
								</div>
							</li>
						</ul>
					@endcan
				</div><!-- /.card-header -->

				<div class="card-body">
					<div class="tab-content">
						<div class="tab-pane fade" id="traffic" role="tabpanel">
							Traffic.
						</div>
						<div class="tab-pane fade show active" id="product" role="tabpanel">
							Product.
						</div>
						<div class="tab-pane fade" id="invoice_next" role="tabpanel">
							@include('common.service.widget.invoice')
						</div>
						<div class="tab-pane fade" id="invoices" role="tabpanel">
							Invoices.
						</div>
						<div class="tab-pane fade" id="emails" role="tabpanel">
							Email.
						</div>
					</div>
				</div>
				<!-- /.card -->
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
	<style>
		.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
			 background-color: #ffffff;
			 color: #343a40;
		 }

		.nav-pills .nav-link:hover {
			background-color: #6c757d;
			color: #ffffff;
		}

		.nav-pills .nav-link:not(.active):hover {
			background-color: #6c757d;
			color: #ffffff;
		}
	</style>
@append