@extends('themes.cp.'.setting('active_cp_theme').'.layouts.default')
	@section('content')
		@push('custom-css')
		@endpush

@php
	$t = new Handbook_tab();
	$tabs = $t->order_by('order','asc')->get();
@endphp
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{setting('google_maps_api_key')}}"></script>
<!-- begin panel -->
<div class="panel panel-cpheading panel-with-tabs" data-sortable-id="ui-widget-10">
	<div class="panel-heading">
		@if($tabs->exists())
			<ul class="nav nav-tabs pull-right">
				@php $i = 0; @endphp
				@foreach($tabs as $tab)
					@php $class = ($i === 0) ? 'active' : ''; @endphp
					<li class="nav-item"><a href="#tab-{{$tab->id}}" data-toggle="tab" class="nav-link cp-tabs-a-handbook {{$class}}"><i class="fas fa-info handbook-sections-tab-i"></i>  <span class="d-none d-md-inline">{{ ucwords($tab->title) }}</span></a></li>
					@php $i++; @endphp
				@endforeach
			</ul>
		@endif
		<h4 class="panel-title">{{ __('cp.handbook.title') }}</h4>
	</div>
	<div class="tab-content tab-content-cp-padding">
		@if($tabs->exists())
			@php $z = 0; @endphp
			@foreach($tabs as $tab)
				@php $classZ = ($z === 0) ? 'show active' : ''; @endphp
				@php $s = new Handbook_section();
					$sections = $s->where('handbook_tab_id', $tab->id)->order_by('order', 'asc')->get();
				@endphp
				<div class="tab-pane fade {{$classZ}}" id="tab-{{$tab->id}}">
					<div class="row">
						<div class="col-lg-8">
							<div class="card">
							<div class="card-block card-block-outline">
							@if($sections->exists())
								@foreach($sections as $section)
									@php
										$it = new Handbook_item();
										$itms = $it->where('handbook_section_id', $section->id)->order_by('order','asc')->get();
									@endphp
									<h4 class="card-title m-t-0">{{ucwords($section->title)}}</h4>
									@if($itms->exists())
										<div id="accordion{{$tab->id.$section->id}}" class="handbook-sections-space">
											@php $j = 0; @endphp
											@foreach($itms as $it)
												@php $classI = ($j === 0) ? 'show' : ''; @endphp
												<div class="card handbook-sections-card-bottom">
													<div class="card-header bg-grey pointer-cursor" id="headingOne" data-toggle="collapse" data-target="#collapseOne{{$tab->id.$section->id.$it->id}}" aria-expanded="true" aria-controls="collapseOne">
														{{ucwords($it->title)}}
													</div>

													<div id="collapseOne{{$tab->id.$section->id.$it->id}}" class="collapse {{$classI}}" aria-labelledby="headingOne" data-parent="#accordion{{$tab->id.$section->id}}">
														<div class="card-body handbook-sections-card-body">
															{!! $it->content !!}
															@if($it->files()->exists())

																@foreach($it->files() as $file)
																	<a href="{{url($file->url)}}" class="btn btn-sm btn-default handbook-sections-card-button">View {{strtoupper($file->type)}} Details</a>
																@endforeach
															@endif
														</div>
													</div>
												</div>
												@php $j++; @endphp
											@endforeach
										</div>
									@else
										<div class="alert alert-info">
											<p><i class="fa fa-info-circle"></i> No Handbook Section Items yet</p>
										</div>
									@endif
								@endforeach
							@else
								<div class="alert alert-info">
									<p><i class="fa fa-info-circle"></i> No Handbook Sections Created yet</p>
								</div>
							@endif
							</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card card-first-only">
								<div class="card-block card-block-outline">
									<h4 class="card-title m-t-0">{{ __('cp.handbook.title_location') }}</h4>
										<!-- begin widget-map -->
										<div class="widget-map widget-map-rounded">
										  <!-- begin widget-map-body -->
										  <div class="widget-map-body">
											  <div id="map_canvas{{$tab->id}}" style="width:100%; height:350px;"></div>
										  </div>
										  <!-- end widget-map-body -->
										  <!-- begin widget-map-list -->
										  <div class="widget-map-list">
											<div class="widget-list cp-handbook-address">
												<h5 class="card-title m-t-0">Postal Address:</h5>
												<address>
													{{ucwords($company->name)}},<br>
													{{$company->address}},<br>
													{{$company->city}},<br>
													Ireland.
												</address>
											</div>
										  </div>
										  <!-- end widget-map-list -->
										</div>
										<!-- begin widget-map -->
								</div>
							</div>
						</div>
						<script type="text/javascript">
							var geocoder{{$tab->id}};
							var map{{$tab->id}};
							var address{{$tab->id}} = "{{$company->address.', '.$company->city.', '.$company->country}}";
							codeAddress(address{{$tab->id}},'map_canvas{{$tab->id}}');

							function codeAddress(address{{$tab->id}},elementId) {
								geocoder{{$tab->id}} = new google.maps.Geocoder();
								geocoder{{$tab->id}}.geocode({
									'address': address{{$tab->id}}
								}, function(results, status) {
									if (status === google.maps.GeocoderStatus.OK) {
										var myOptions = {
											zoom: 14,
											center: results[0].geometry.location,
											mapTypeId: google.maps.MapTypeId.ROADMAP
										}
										map{{$tab->id}} = new google.maps.Map(document.getElementById(elementId), myOptions);

										var marker{{$tab->id}} = new google.maps.Marker({
											map: map{{$tab->id}},
											position: results[0].geometry.location,
										});
									}
								});
							}
						</script>
					</div>
				</div>
				@php $z++; @endphp
			@endforeach
		@else
			<div class="col-md-12 alert alert-info">
				<p><i class="fa fa-info-circle"></i> No Handbook Info yet</p>
			</div>
		@endif
	</div>
</div>
<!-- end panel -->
		@push('custom-js')
		@endpush
	@endsection