@extends('themes.cp.'.setting('active_cp_theme').'.layouts.default')
@section('content')
	@push('custom-css')
	@endpush
	@php
		$hub_ids = [];
/*		if(setting('multihub')){
    		$h = new Company();
    		if(!auth()->user()->is_admin){
				$hubs = $h->where('type','hub')->where('status', 1)->get();
				foreach($hubs as $hub){
					if(auth()->user()->hasAnyRole($hub->get_basic_usergroups()))
						$hub_ids[] = $hub->id;
				}
				if(count($hub_ids) > 0){
					$t = new Company();
					$tabs = $t->where_in('id', $hub_ids)->get();
				}
    		}else{
    		    if(auth()->user()->isHubAdmin()){
					$t = new Company();
					$tabs = $t->where_in('id', get_active_hub_ids())->get();
					foreach($tabs as $hub){
						$hub_ids[] = $hub->id;
					}
    		    }else{
					$h = new Company();
					$hubs = $h->where('type','hub')->get();
					foreach($hubs as $hub){
						$hub_ids[] = $hub->id;
					}
					$t = new Company();
					$tabs = $t->where_in('id', $hub_ids)->get();
    		    }
    		}
		}else{
    		$h = new Company();
    		$hubs = $h->where('type','main')->get();
    		foreach($hubs as $hub){
				$hub_ids[] = $hub->id;
    		}
    		$t = new Company();
    		$tabs = $t->where_in('id', $hub_ids)->get();
		}*/
	@endphp
	<script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{'asd'/*$this->ci->Settings->get('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(count($hub_ids) > 0)
				<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->name) }}</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(count($hub_ids) > 0)
				@php $z = 0; @endphp
				@foreach($tabs as $tab)
					@php $classZ = ($z === 0) ? 'show active' : '';
						$hb = new Handbook();
						$handbook = $hb->where('company_id', $tab->id)->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">
										{!! $handbook->content !!}
										@if($handbook->file)
											<hr/>
											<a href="{{url($handbook->file)}}" class="btn btn-2 btn-book"><i class="fa fa-cloud-download-alt"></i> View Document</a>
										@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($tab->name)}},<br>
														{{$tab->address}},<br>
														{{$tab->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}} = "{{$tab->address.', '.$tab->city.', '.$tab->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