@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">

	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.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%;
    }


	
	</style>
@endsection
@section('content')
	<div id="content">
	<div class="wrapper">
		<div class="container" style="margin-top:20px;width:100%;background-color:white">
			
			<form action="{{URL::asset('toiletscustomupdate')}}" id="sky-form5" class="sky-form" class="smart-form" method="post" enctype="multipart/form-data" >
				<div class="col-lg-5" >				
								<header>
									<i class="fab fa-accessible-icon"></i>
									<span>{{ $layout->label->toilet_form->title }}</span>
								</header>

								<fieldset>
									<div class="row">
										@if(Session::has('update'))
											<section class="col col-12">											
												{!! Helper::alert('success', $layout->label->update_success->title, 'block font-15') !!}
											</section>
										@endif
									</div>
									
									
									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->toilet_name->title }} <code>*</code>
														@if($errors->has('toilet_title'))
															<div class="error-badge" id="for-toilet_title">
																{!! Helper::alert('danger', $errors->first('toilet_title')) !!}
															</div>
														@endif
											</label>
											<label class="input">
												<input type="text" value="{{ $toilet->toilet_title }}" name="toilet_title" placeholder="">
											</label>
									</section>

									<!-- check if Owner or MOT | 2 is MOT-->
									@if(isset(Auth::user()->id) && Auth::user()->role_id==2)
									<section class="flexibled-error">
										<label class="label">
													Toilet Owner <code>*</code> 
													@if($errors->has('owner_id'))
														<div class="error-badge" id="for-owner_id">
															{!! Helper::alert('danger', $errors->first('owner_id')) !!}
														</div>
													@endif
										</label>
									
										
									
					                       <select  class="selectpicker form-control" data-show-subtext="true" data-live-search="true"  
					                       		value="{{ old('owner_id') }}" name='owner_id' id="owner_id"  >
					                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>
					                           @foreach($owners as $owner)
					                           		@if($owner->id ==$toilet->toilet_owner)
						                                <option value="{{$owner->id}}" selected >{{$owner->fullname_kh}}</option>
						                            @else
					                                    <option value="{{$owner->id}}">{{$owner->fullname_kh}}</option>
					                                @endif
					                           @endforeach
					                      </select>
									</section>
									@endif


									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->toilet_standing->title }} <code>*</code>
														@if($errors->has('toilet_standing'))
															<div class="error-badge" id="for-toilet_standing">
																{!! Helper::alert('danger', $errors->first('toilet_standing')) !!}
															</div>
														@endif
											</label>
											<label class="select">
						                       <select value="{{ old('toilet_standing') }}" name="toilet_standing" id="toilet_standing" >
						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>
						                              @foreach($toilet_standing as $standing)
						                                   @if($toilet->toilet_category ==$standing->term_id)
						                                      <option value="{{$standing->term_id}}" selected >{{$standing->title}}</option>
						                                   @else
						                                      <option value="{{$standing->term_id}}">{{$standing->title}}</option>
						                                  @endif
						                              @endforeach
						                      </select>
						                      <i></i>
						                    </label>
									</section>
									<section class="flexibled-error">
										<label class="label">
														{{ $layout->label->toilet_description->title }}<code>*</code>
														@if($errors->has('toilet_description'))
															<div class="error-badge" id="for-toilet_description">															
																{!! Helper::alert('danger', $errors->first('toilet_description')) !!}
															</div>
														@endif
										</label>
										<label class="textarea">
											<i class="icon-append fa fa-comment"></i>
											<textarea  rows="4" name="toilet_description" id="toilet_description">{{ $toilet->toilet_description }}</textarea>
										</label>
									</section>
									<hr/>

									<section class="flexibled-error">
											<label class="label">
														Latitute <code>*</code>
														@if($errors->has('lat'))
															<div class="error-badge" id="for-lat">
																{!! Helper::alert('danger', $errors->first('lat')) !!}
															</div>
														@endif
											</label>
											<label class="input">
												<input type="text" name="lat" id="lat" value="{{$toilet->lat}}">
											</label>
									</section>
										<section class="flexibled-error">
											<label class="label">
														Longtitute <code>*</code>
														@if($errors->has('lng'))
															<div class="error-badge" id="for-lng">
																{!! Helper::alert('danger', $errors->first('lng')) !!}
															</div>
														@endif
											</label>
											<label class="input">
												<input type="text" name="lng" id="lng" value="{{$toilet->lng}}">
											</label>
									</section>
									<hr/>

									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->provinces->title }} <code>*</code> 
														@if($errors->has('province_id'))
															<div class="error-badge" id="for-province_id">
																{!! Helper::alert('danger', $errors->first('province_id')) !!}
															</div>
														@endif
											</label>
											<label class="select">
						                       <select value="{{ $toilet->province_id}}" name='province_id' id="province_id" onchange="provinceTrigger()" >
						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>
						                           {{Helper::select_toilet_province($toilet->province_id)}}
						                      </select>
						                      <i></i>
						                    </label>
									</section>
									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->districts->title }} <code>*</code>
														@if($errors->has('district_id'))
															<div class="error-badge" id="for-district_id">
																{!! Helper::alert('danger', $errors->first('district_id')) !!}
															</div>
														@endif
											</label>
											<label class="select">
						                       <select value="{{ $toilet->district_id }}" name='district_id'   id="district_id" onchange="districtTrigger()" >
						                           <option value="" selected disabled>{{$layout->label->please_select_below->title}}</option>
						                           {{Helper::select_toilet_district($toilet->province_id,$toilet->district_id)}}
						                      </select>
						                      <i></i>
						                    </label>
									</section>
									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->communes->title }} <code>*</code>
														@if($errors->has('commune_id'))
															<div class="error-badge" id="for-commune_id">
																{!! Helper::alert('danger', $errors->first('commune_id')) !!}
															</div>
														@endif
											</label>
											<label class="select">
						                       <select value="{{ $toilet->commune_id }}" name="commune_id" id="commune_id"  onchange="communeTrigger()" >
						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>
						                             {{Helper::select_toilet_commune($toilet->district_id,$toilet->commune_id)}}  
						                      </select>
						                      <i></i>
						                    </label>
									</section>
									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->villages->title }} <code>*</code>
														@if($errors->has('village_id'))
															<div class="error-badge" id="for-village_id">
																{!! Helper::alert('danger', $errors->first('village_id')) !!}
															</div>
														@endif
											</label>
											<label class="select">
						                       <select value="{{ $toilet->village_id}}" name="village_id" id="village_id" >
						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>
						                              {{Helper::select_toilet_village($toilet->commune_id,$toilet->village_id)}}
						                      </select>
						                      <i></i>
						                    </label>
									</section>

									<section class="flexibled-error">
											<label class="label">
														{{ $layout->label->toilet_type->title }} <code>*</code>
														@if($errors->has('toilet_type'))
															<div class="error-badge" id="for-toilet_type">
																{!! Helper::alert('danger', $errors->first('toilet_type')) !!}
															</div>
														@endif
											</label>
											<label class="select">
						                       <select value="{{ old('toilet_type') }}" name="toilet_type" id="toilet_type" >
						                          <option value="" selected >{{$layout->label->please_select_below->title}}</option>
						                              @foreach($toilet_type as $type)
						                                   @if($toilet->toilet_type ==$type->term_id)
						                                      <option value="{{$type->term_id}}" selected >{{$type->title}}</option>
						                                   @else
						                                      <option value="{{$type->term_id}}">{{$type->title}}</option>
						                                  @endif
						                              @endforeach					                          
						                      </select>
						                      <i></i>
						                    </label>
									</section>


									<hr/>	
									
									<div class="row">
										 <section class="flexibled-error">
	                                        <label class="label">
	                                             <span class="error">*</span>
	                                            <div class="inline-block" id="for-village_id"></div>
	                                        </label>
	                                         <label class="select">
	                                            <input id="fileupload" name="upload_images[]" type="file" multiple="multiple" />
	                                                <hr />
	                                                <b>Live Preview</b>
	                                                <br />
	                                                <br />
	                                                <div id="dvPreview">
	                                                </div>
	                                        </label>
                                   		 </section>
									</div>	


									 <!-- Add Number of toilet in place***********************************************-->
                                   		<div class="row" class="number_of_toilet" style="border:1px solid gray;padding:5px">
                                   			<h4 class="text text-info">* ចំនួនបង្គន់អនាម័យ</h4>
                                   			<div class="col-lg-6">
		                                   		<section class="flexibled-error">
													<label class="label">
																ចំនួនបង្គន់សម្រាប់បុរស <code>Number Only</code>
																@if($errors->has('num_male_toilet'))
																	<div class="error-badge" id="for-num_male_toilet">
																		{!! Helper::alert('danger', $errors->first('num_male_toilet')) !!}
																	</div>
																@endif
													</label>
														<label class="input">
															<input type="number" value="{{ $toilet->num_male_toilet }}" name="num_male_toilet" placeholder="0">
													</label>
												</section>
											</div>
											<div class="col-lg-6">
		                                   		<section class="flexibled-error">
													<label class="label">
																ចំនួនបង្គន់សម្រាប់នារី <code>Number Only</code>
																@if($errors->has('num_female_toilet'))
																	<div class="error-badge" id="for-num_female_toilet">
																		{!! Helper::alert('danger', $errors->first('num_female_toilet')) !!}
																	</div>
																@endif
													</label>
														<label class="input">
															<input type="number" value="{{ $toilet->num_female_toilet }}" name="num_female_toilet" placeholder="0">
													</label>
												</section>
											</div>
											<div class="col-lg-6">
		                                   		<section class="flexibled-error">
													<label class="label">
																ចំនួនបង្គន់សម្រាប់កូនក្មេង<code>Number Only</code>
																@if($errors->has('num_children_toilet'))
																	<div class="error-badge" id="for-num_children_toilet">
																		{!! Helper::alert('danger', $errors->first('num_children_toilet')) !!}
																	</div>
																@endif
													</label>
														<label class="input">
															<input type="number" value="{{ $toilet->num_children_toilet}}" name="num_children_toilet" placeholder="0">
													</label>
												</section>
											</div>
											<div class="col-lg-6">
		                                   		<section class="flexibled-error">
													<label class="label">
																ចំនួនបង្គន់សម្រាប់ជនពិការ<code>Number Only</code>
																@if($errors->has('num_disability_toilet'))
																	<div class="error-badge" id="for-num_disability_toilet">
																		{!! Helper::alert('danger', $errors->first('num_disability_toilet')) !!}
																	</div>
																@endif
													</label>
														<label class="input">
															<input type="number" value="{{ $toilet->num_disability_toilet }}" name="num_disability_toilet" placeholder="0">
													</label>
												</section>
											</div>
										</div>										
									
									<div class="row">
										<section class="col col-lg-12">
											<label class="label">
																
																@if($errors->has('agree'))
																	<div class="error-badge" id="for-agree">															
																		{!! Helper::alert('danger', $errors->first('agree')) !!}
																	</div>
																@endif
											</label>
											<label class="checkbox">
												@if(old('agree')!=='')
													<input type="checkbox"  name="agree" id="agree"><i></i>{{ $layout->label->i_agree_term->title }}
												@else
													<input type="checkbox" value="{{old('agree')}}" name="agree" id="agree"><i></i>{{ $layout->label->i_agree_term->title }}
												@endif
												
											</label>
										</section>
										<footer>											
											
											<input type="hidden" name="id" value="{{encrypt($toilet->id)}}">
											{{ csrf_field() }}
											<button type="submit"  class="btn-u btn btn-primary">Submit</button>
										</footer>
							</div>
									
								</fieldset>		
					</div>

				
					<div class="col-lg-7" id="testtest" >						
							 <div id="map_wrapper">
	                              <div id="map_canvas" class="mapping"></div>
	                          </div>  
	                          <hr/>
	                          <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-4 col-md-4">  
	                                    <a  onclick="remove_toilet_photo('{{encrypt($tphoto->id)}}','{{encrypt($tphoto->toilet_id)}}')" 
	                                    	class="btn-u btn-u-xs btn-u-green custom margin-bottom-5 customEvt tooltips">
	                                    	<img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/512/Cancel_delete_remove_stop_x_no_close_cross.png" 
	                                            style="float:right;width:30px;height:30px;vertical-align:top;cursor:pointer;padding:3px;z-index:1200"/>
	                                    </a>
	                                    <img src="{{$photo_path}}" class="img img-responsive img-thumbnail" 
	                                        style="height:250px;width:100%"  title="Toilet photo"/>	
	                                 </div>
								@endforeach
							</div>

					</div>

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



@endsection
@section('script')
@include('backend.toilets.inc_toiletscript')
<!-- 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 markerposition()
    {
    	var lat=parseFloat($("#lat").val());
		var lng=parseFloat($("#lng").val());
		console.log(lat+"-----"+lng);

	     var uluru = {lat: lat, lng: 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://pt.cambodiacleanup.com/img/location.png',
          draggable:true,
          title: 'Toilets'
        });
    }
	$("#lat").keyup(function(){
			markerposition();
	});
	$("#lng").keyup(function(){
			markerposition();
	});


      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://pt.cambodiacleanup.com/img/location.png',
          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=AIzaSyBtz8fKXA8NNMOuIxhFZAOtXYIg5-3HPGE&callback=initMap"></script>
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

@endsection