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

@section('htmlheader_title')
	{{ $spo->name ?: 'New Supplier' }}
@endsection
@section('page_title')
	{{ $spo->name ?: 'New Supplier' }}
@endsection

@section('contentheader_title')
	{{ $spo->name ?: 'New Supplier' }}
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header bg-dark d-flex p-0">
					<ul class="nav nav-pills w-100 p-2">
						<li class="nav-item"><a class="nav-link active" href="#details" data-toggle="tab">Detail</a></li>
						@if($spo->exists)
							<li class="nav-item"><a class="nav-link" href="#products" data-toggle="tab">Products</a></li>
							<li class="nav-item"><a class="nav-link" href="#offerings" data-toggle="tab">Offerings</a></li>
							<li class="nav-item"><a class="nav-link" href="#connections" data-toggle="tab">Connections</a></li>
							<li class="nav-item"><a class="nav-link" href="#costs" data-toggle="tab">Costs</a></li>
						@endif
					</ul>
				</div>

				<div class="card-body">
					<div class="tab-content">
						<div class="tab-pane fade active show" id="details" role="tabpanel">
							@include('theme.backend.adminlte.supplier.widget.detail')
						</div>

						@if($spo->exists)
							<div class="tab-pane fade" id="products" role="tabpanel">
								@include('theme.backend.adminlte.supplier.widget.products')
							</div>

							<div class="tab-pane fade" id="offerings" role="tabpanel">
								@include('theme.backend.adminlte.supplier.widget.offerings')
							</div>

							<div class="tab-pane fade" id="connections" role="tabpanel">
								@include('theme.backend.adminlte.supplier.widget.connections')
							</div>

							<div class="tab-pane fade" id="costs" role="tabpanel">
								@include('theme.backend.adminlte.supplier.widget.costs')
							</div>
						@endif
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection