@extends('layouts.admin.master')
@section('style')
	<link rel="stylesheet" href="{{asset('assets/frontend/plugins/sky-forms-pro/skyforms/css/sky-forms.css')}}">
	<link rel="stylesheet" href="{{asset('assets/frontend/plugins/sky-forms-pro/skyforms/custom/custom-sky-forms.css')}}">
	<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<style type="text/css">
	.inline-block{
		padding:0px;
		margin: 0px;
	}
	.border-0{
		border: 0px solid #bdbdbd !important;
	}
	.border-bottom-1{
		border-bottom: 1px solid #bdbdbd !important;
	}
	.ui-widget.ui-widget-content{
		width:250px;
	}
	.profilephoto img{
		width:200px;
	}
	header span{
		color: green;
	}

     #map_wrapper {
        height: 600px;
    }

	#map_canvas {
        width: 100%;
        height: 100%;
    }
    .bt_save{
    	font-size: 20px;
    	font-weight: bold;
    	font-family: 'Khla';
    }
	</style>
@endsection
@section('content')
	<div id="content">
	<div class="wrapper">
		<div class="container" style="margin-top:0px;width:100%;">
			<form id="new_term-frm" class="ajxfrm sky-form" data-validate="true" data-reload="true" enctype="multipart/form-data" >
				<input type="hidden"  name="cmd" value="mot_asean">	

					<div class="col-lg-4" id="testtest" >						
							 	
	                          <div class="row" id="toilet_photo">									
								@foreach($tphotos as $tphoto)
								@php 
									$photo_path="https://cdn1.iconfinder.com/data/icons/rcons-user-action/512/user-512.png";
									if($tphoto->photo_name!=''){
										$photo_path=Storage::url('TID-'.$tphoto->toilet_id.'/' . $tphoto->photo_name);
									}
								@endphp
									<div class="col-lg-12 col-md-12"> 
	                                    <img src="{{$photo_path}}" class="img img-responsive img-thumbnail" 
	                                        style="width:100%"  title="Toilet photo"/>	
	                                 </div>
								@endforeach
							</div>
					</div>
					<div class="col-lg-8" >				
								<header >
									<i class="fab fa-accessible-icon"></i>
									<span class="fnt-khla">{{ $layout->label->indicator_mot_survey->title }}</span>
								</header>

								<fieldset>
									<div  class="row mot_survey">
									<div class="row">
										@if(Session::has('inserted'))
											<section class="col col-lg-12">											
												{!! Helper::alert('success',Session::get('inserted'), 'block font-15') !!}
											</section>
										@endif
									</div>	
									<div class="row">
										<section class="col col-lg-12">		
										<a class="btn btn-primary" style="font-size:16px;color:white">Total Score: <b>[{{Helper::total_asean_score_by_toilet($toilet->id)}}]</b></a>
										</section>
									</div>			

									@php $testloop=0;@endphp
									@foreach($indicator_types as $indicator_type)  
										@php
											$no=1;
									    	$sub_indicator_type= ContentTerms::sub_terms_by_orderBy(['taxonomy' => 'indicator_type_asean'],$indicator_type->term_id);									    		
									    @endphp
									  <button type="button" class="btn btn-info btnindicatortype" style="width:100%" data-toggle="collapse" data-target="#{{$indicator_type->term_id}}">
									  		<span class="pull-left"> <i class="fas fa-list-ul"></i> &nbsp;{{$indicator_type->title}} &nbsp;(
									  		{{Helper::total_score_by_indicator_type($toilet->id,$indicator_type->term_id)}}  scores)</span>
									  		<span class="pull-right"><i class="fas fa-caret-down"></i></span>
									  	</button>
										  @if($testloop<1)
										 	 <div id="{{$indicator_type->term_id}}"  class="collapse in ">
										  @else
										 	 <div id="{{$indicator_type->term_id}}"  class="collapse ">
										  @endif
									    <ul class="list-group">
									    	@foreach($sub_indicator_type as $sub)
									    		<li class="list-group-item">
									    			<span >{{$no}}) {{$sub->title}}</span>
									    			<span class="pull-right">
									    				<input type="radio"  name="rd[{{$sub->term_id}}]" {{Helper::check_survey_asean(encrypt($toilet->id),$sub->term_id,1)}}   value="1"/> Yes
									 					<input type="radio"   name="rd[{{$sub->term_id}}]"   {{Helper::check_survey_asean(encrypt($toilet->id),$sub->term_id,0)}}  value="0" /> No
									    			</span>
									    		</li>
									    		@php
									    			$no++;
									    		@endphp
									    	@endforeach
									    </ul>
									  </div>
									  <div class="clear:both"></div>

									  @php 
									  		$testloop++;
									
									  @endphp
									@endforeach
									
									
									</div><!--end mot class survey-->

									<footer>
											
										{{ csrf_field() }}
										<input type="hidden" name="toilet_id" value="{{encrypt($toilet->id)}}">
										 <button type="submit" name="save" value="true" class="bt_save btn btn-default btn-primary">
												<i class="fas fa-save"></i> &nbsp; {{ $layout->label->save->title }}
										  </button>
									</footer>


								</fieldset>		
					</div>

					

					
					</form><!--end form-->
							<!-- End Reg-Form -->
		</div>
			
	</div><!--end wrapper class-->
	</div>
	<!-- END MAIN CONTENT -->



@endsection
@section('script')

<!-- ALERT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script type="text/javascript">
	    var currentLatitude=0;
    	var currentLongitude=0;
      function initMap() {
        var uluru = {lat: {{$toilet->lat}}, lng: {{$toilet->lng}}};
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 8,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon: 'https://www.speedrun.com/themes/gotcha/logo.png?v=5f6f5b0e',
          draggable:true,
          title: 'My Phnom Penh'
        });
         
        google.maps.event.addListener(marker, 'dragend', function(marker){
        var latLng = marker.latLng; 
        currentLatitude = latLng.lat();
         currentLongitude = latLng.lng();

            document.getElementById("lat").value=currentLatitude;
            document.getElementById("lng").value=currentLongitude;
        }); 
      }
</script>
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDoOogpj3yfZsmqguKdSIAzfLZ7v5sjeWM&callback=initMap"></script>
  

@endsection