@extends('layouts.frontend.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">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<style type="text/css">
     #map_wrapper {
        height: 650px;
	    }
		#map_canvas {
	        width: 100%;
	        height: 100%;
	    }
        .nopadding{
            padding:0px;
        }
        .nomargin{
            margin: 0px;
        }
        .nomp{
            margin: 0px;
            padding: 0px;
        }
        .mySlides {display:none;}

                /* 
          ##Device = Desktops
          ##Screen = 1281px to higher resolution desktops
        */

        @media (min-width: 1281px) {
          
    
          
        }

        /* 
          ##Device = Laptops, Desktops
          ##Screen = B/w 1025px to 1280px
        */

        @media (min-width: 1025px) and (max-width: 1280px) {
      
          
        }

        /* 
          ##Device = Tablets, Ipads (portrait)
          ##Screen = B/w 768px to 1024px
        */

        @media (min-width: 768px) and (max-width: 1024px) {
     
          
        }

        /* 
          ##Device = Tablets, Ipads (landscape)
          ##Screen = B/w 768px to 1024px
        */

        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
          
    
          
        }

        /* 
          ##Device = Low Resolution Tablets, Mobiles (Landscape)
          ##Screen = B/w 481px to 767px
        */

        @media (min-width: 481px) and (max-width: 767px) {
          
        
          
        }

        /* 
          ##Device = Most of the Smartphones Mobiles (Portrait)
          ##Screen = B/w 320px to 479px
        */

        @media (min-width: 320px) and (max-width: 480px) {
          .processtitle h1{
            font-size: 14px;
          }
         
          
        }

	</style>
@endsection
@section('content')
<div id="content" class="mycontent"  >
	<div class="row nomp">
		<div class="col-lg-8 col-xs-12 col-lg-offset-2" style="margin-top:10px">
			<div class="col-lg-4 col-xs-12">
				<img src="{{URL::asset('assets/public_toilet/featured.jpg')}}" class="img img-responsive img-thumbnail" alt="feature">
			</div>
			<div class="col-lg-4 col-xs-12">
				<center>
                @if(Session::get('type')=='asian')
                    <img src="{{asset('assets/public_toilet/asian/asian_logo.png')}}"  class="img img-responsive" alt="Logo" >
                @else
                    <img src="{{URL::asset('assets/public_toilet/label-updated.png')}}" class="img img-responsive" alt="label-update">
                @endif
				
				</center>
			</div>
			<div class="col-lg-4 hidden-xs">
				<img src="{{URL::asset('assets/public_toilet/featured2.jpg')}}" class="img img-responsive img-thumbnail" alt="feature">
			</div>
		</div>
	</div>
    <div class="row">
        <div class="col-lg-12">
          <img class="mySlides" src="{{URL::asset('assets/slideshow/pt_slider/IMG_7676.JPG')}}" style="width:100%">
          <img class="mySlides" src="{{URL::asset('assets/slideshow/pt_slider/IMG_7677.JPG')}}" style="width:100%">
          <img class="mySlides" src="{{URL::asset('assets/slideshow/pt_slider/IMG_7678.JPG')}}" style="width:100%">
          <img class="mySlides" src="{{URL::asset('assets/slideshow/pt_slider/IMG_7679.JPG')}}" style="width:100%">
          <img class="mySlides" src="{{URL::asset('assets/slideshow/pt_slider/IMG_7681.JPG')}}" style="width:100%">
        </div>
    </div>
   
	<div class="row" style="width:95%;margin:0 auto;border-top:1px dashed green">
		<div class="col-lg-12">
			<center>
				<div class="row">
					
				</div>
				<div class="row" style="margin-top:15px">	
                    <div class="col-lg-7">
                         <div id="map_wrapper">
                              <div id="map_canvas" class="mapping"></div>
                          </div>    
                    </div>				
                    <div class="col-lg-5">
                        <div class="col-lg-12 nomp">                            
                            <img  src="{{URL::asset('assets/public_toilet/smiley_face.png')}}" class="img img-responsive" alt="smileyface" width="100%">
                        </div>
                        <div class="col-lg-12 nomp processtitle">              
                            <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><!--end class row-->
			</center>
		</div>		
	</div>


     <div class="row" style="width:95%;margin:0 auto;border-top:1px dashed green">
        <div class="col-lg-12">
            <img src="{{URL::asset('assets/public_toilet/competition1.jpg')}}" class="img img-responsive">
        </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(7);
        google.maps.event.removeListener(boundsListener);
    });


    




    
}
  </script>
  <script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
	  <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtz8fKXA8NNMOuIxhFZAOtXYIg5-3HPGE&callback=initMap"></script>
@endsection