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

@section('htmlheader_title')
	{{ $o->role }} Home
@endsection
@section('page_title')
	{{ $o->full_name }}
@endsection

@section('contentheader_title')
	{{ $o->full_name }}
@endsection
@section('contentheader_description')
	{{ $o->role }}
@endsection

@section('main-content')
	<!-- Our Summary Home Page Boxes -->
	<div class="row">
		@include('common.account.widget.summary')
	</div>

	<div class="card card-light card-tabs">
		<div class="card-header p-0 pt-1">
			<ul class="nav nav-tabs" id="accounts-tab" role="tablist">
				<li class="pt-2 px-3"><h3 class="card-title">Accounts</h3></li>
				@foreach($o->my_accounts as $ao)
					<li class="nav-item">
						<a class="nav-link @if(! $loop->index)active @endif" href="#account_{{ $ao->id }}" data-toggle="tab" aria-controls="account_{{ $ao->id }}" aria-selected="true">{{ $ao->name }}</a>
					</li>
				@endforeach

				@canany('reseller','wholesaler')
					@if ($o === $user)
						<li class="nav-item ml-auto">
							<a class="nav-link" href="#tab-reseller" data-toggle="tab">Reseller</a>
						</li>
					@endif
				@endcanany
			</ul>
		</div>

		<div class="card-body">
			<div class="tab-content" id="accounts-tab-content">
				@foreach($o->my_accounts as $ao)
					<div class="tab-pane fade @if(! $loop->index)show active @endif" id="account_{{ $ao->id }}" role="tabpanel" aria-labelledby="account_{{ $ao->id }}">
						<div class="row">
							<div class="col-12">
								<div class="card-header bg-white">
									<ul class="nav nav-pills">
										<li class="nav-item"><a class="nav-link {{ (! session()->has('supplier_update')) ? 'active' : '' }}" href="#tab-services" data-toggle="tab">Services</a></li>
										{{--
										<!-- @todo this is not working -->
										<li class="nav-item"><a class="nav-link" href="#tab-nextinvoice" data-toggle="tab">Next Invoice</a></li>
										--}}
										<li class="nav-item"><a class="nav-link" href="#tab-futureinvoice" data-toggle="tab">Future Invoice</a></li>
										<li class="nav-item ml-auto">
											<a class="nav-link {{ session()->has('supplier_update') ? 'active' : '' }}" href="#tab-supplier" data-toggle="tab">Supplier</a>
										</li>
									</ul>
								</div>

								<div class="card-body pl-0 pr-0">
									<div class="tab-content">
										<div class="tab-pane {{ (! session()->has('supplier_update')) ? 'active' : '' }}" id="tab-services">
											<div class="row">
												<div class="col-12 col-xl-7">
													@include('service.widget.active',['o'=>$ao])
												</div>

												<div class="col-12 col-xl-5">
													@include('invoice.widget.due',['o'=>$ao])

													@include('invoice.widget.list',['o'=>$ao])

													@include('payment.widget.list',['o'=>$ao])
												</div>
											</div>
										</div>

										{{--
										<!-- @todo this is not working -->
										<div class="tab-pane" id="tab-nextinvoice">
											<div class="row">
												<div class="col-12">
													@include('u.invoice.widgets.next',['future'=>FALSE])
												</div>
											</div>
										</div>
										--}}

										<div class="tab-pane" id="tab-futureinvoice">
											<div class="row">
												<div class="col-12 col-xl-9">
													@include('invoice.widget.next',['future'=>TRUE])
												</div>
											</div>
										</div>

										@canany('reseller','wholesaler')
											<div class="tab-pane {{ session()->pull('supplier_update') ? 'active' : '' }}" id="tab-supplier" role="tabpanel">
												@include('user.widget.supplier')
											</div>
										@endcanany
									</div>
								</div>
							</div>
						</div>
					</div>
				@endforeach

				@if ($o == $user)
					@canany('reseller','wholesaler')
						<div class="tab-pane" id="tab-reseller" role="tabpanel">
							@include('r.home.widgets.home')
						</div>
					@endcanany
				@endif
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
<script>
	$(document).ready(function() {
		$('body')
			.addClass('sidebar-collapse')
			.delay(500)
			.queue(function () {
				window.dispatchEvent(new Event('resize'));
				$(this).dequeue();
			});
	});
</script>
@append