@extends('layouts.frontend.asean.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/css/homepage.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">
     #map_wrapper {
        height: 500px;
	    }
		#map_canvas {
	        width: 100%;
	        height: 100%;
	    }
	   
	</style>
@endsection
@section('content')
<div id="content" class="mycontent">
	<div class="row" style="width:80%;margin:0 auto">
		<div class="col-lg-8 col-lg-offset-2" style="margin-top:10px">
			<div class="col-lg-4">
				<img src="{{URL::asset('assets/public_toilet/featured.jpg')}}" class="img img-responsive img-thumbnail" alt="feature">
			</div>
			<div class="col-lg-4">
				<center>
				<img src="{{URL::asset('assets/public_toilet/label-updated.png')}}" class="img img-responsive" alt="label-update">
				</center>
			</div>
			<div class="col-lg-4">
				<img src="{{URL::asset('assets/public_toilet/featured2.jpg')}}" class="img img-responsive img-thumbnail" alt="feature">
			</div>
		</div>
	</div>
	<div class="row" style="width:80%;margin:0 auto;border-top:1px dashed green">
		<div class="col-lg-9">
			<center>
				<div class="row">
					<div class="col-lg-6">
					<h1 class="text text-primary" style="padding-bottom:0px;margin-bottom:0px">ប្រភេទនៃការផ្តល់ស្នាមញញឹម</h1>			
					<img src="{{URL::asset('assets/public_toilet/smiley_face.png')}}" class="img img-responsive" alt="smileyface" width="100%">
					</div>
					<div class="col-lg-6">				
					<h1 class="text text-primary" style="padding-bottom:0px;margin-bottom:0px">ដំណើរការវាយតម្លៃបង្គន់សាធារណៈកម្ពុជា</h1>
					<img src="{{URL::asset('assets/public_toilet/rate_flow.png')}}" class="img img-responsive" alt="smileyface" width="100%">
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
                         <div id="map_wrapper">
                              <div id="map_canvas" class="mapping"></div>
                          </div>    
	                </div>	                 
	             </div><!--end class row-->
			</center>
		</div>
		<div class="col-lg-3">
			<hr/>
			<img src="{{URL::asset('assets/public_toilet/right.jpg')}}" class="img img-responsive" alt="smileyface">
		</div>
	</div>
</div><!-- END MAIN CONTENT -->
	

@endsection
@section('script')
@php
//get data from controller
$dataPoints=$dataPoints;
$dataInformation=$infoWindowContent;
@endphp


 <script type="text/javascript">
function initMap() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
                    
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
        
    // Multiple Markers
  /*  var markers = [
        ['London Eye', 51.503454,-0.119562],
        ['Palace of Westminster', 51.499633,-0.124755]
    ];*/
  
       var markers=null                 
    // Info Window Content
    /*var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];*/
     var infoWindowContent=null        
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            icon: '{{URL::asset("assets/public_toilet/map_icon.png")}}',
            map: map,
            draggable:false,
            title: markers[i][0]
        });
        
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

         google.maps.event.addListener(marker, 'dragend', function(marker){
        var latLng = marker.latLng; 
        currentLatitude = latLng.lat();
         currentLongitude = latLng.lng();
          alert(currentLatitude+"-----"+currentLongitude);
      }); 

         

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(8);
        google.maps.event.removeListener(boundsListener);
    });


    




    
}
  </script>
	  <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDoOogpj3yfZsmqguKdSIAzfLZ7v5sjeWM&callback=initMap"></script>
@endsection