@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%;

    }

    .number_of_toilet{

    	border:1px solid green;

    }





	

	</style>

@endsection

@section('content')

	<div id="content">

	<div class="wrapper">

		<div class="container" style="margin-top:20px;width:100%;background-color:white">

			<form action="{{ route('toilets.index') }}" 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('inserted'))

											<section class="col col-12">

												{!! Helper::alert('success', Session::get('inserted'), 'block font-15') !!}

											</section>

										@endif

									</div>

									<div class="row">

										@if(Session::has('info'))

											<section class="col col-12">

												{!! Helper::alert('danger', Session::get('info'), '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="{{ old('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)

				                           	<option value="{{$owner->id}}">{{($owner->fullname_kh)}}</option>

				                           @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(old('toilet_standing') ==$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" value="NA Description" id="toilet_description" placeholder="Make the description here...">{{ old('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="11.5890151907032">

											</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="104.94895980468755">

											</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="{{ old('province_id') }}" name='province_id' id="province_id" onchange="provinceTrigger()" >

						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>

						                           {{Helper::select_toilet_province(old('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="{{ old('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(old('province_id'),old('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="{{ old('commune_id') }}" name="commune_id" id="commune_id"  onchange="communeTrigger()" >

						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>

						                             {{Helper::select_toilet_commune(old('district_id'),old('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="{{ old('village_id') }}" name="village_id" id="village_id" >

						                           <option value="" selected >{{$layout->label->please_select_below->title}}</option>

						                              {{Helper::select_toilet_village(old('commune_id'),old('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(old('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/>	

									

										 <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 />

	                                                <hr />

	                                                <b>Live Preview</b>

	                                                <br />

	                                                <br />

	                                                <div id="dvPreview">

	                                                </div>

	                                        </label>

                                   		 </section>

                                   		 <!-- 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="{{ old('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="{{ old('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="{{ old('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="{{ old('num_disability_toilet') }}" name="num_disability_toilet" placeholder="0">

													</label>

												</section>

											</div>

										</div>



																		

								

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

											{{ csrf_field() }}

											<button type="submit"  class="btn-u btn btn-primary">Submit</button>

										</footer>

						

									

							</fieldset>		

					</div>



				

					<div class="col-lg-7" id="testtest" >						

							 <div id="map_wrapper">

	                              <div id="map_canvas" class="mapping"></div>

	                          </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>

    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: 11.562108, lng: 104.888535};

        var uluru2 = {lat: 13.364047, lng: 103.860313};

        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