@extends('layout.master', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Halaman Utama')
@section('sub_page_title', 'Selamat Datang ke Papan Pemuka Pegawai')
@section('name', $user->StaffDetail->full_name)
@section('img_profile', $user->StaffDetail->profile_img)

@section('content')
<style type="text/css">
	html, body {
		height: 100% !important;
	}
	body { overflow-y:hidden !important; }
	.pcoded-inner-content { padding-left: 0px !important; padding-right: 0px !important; }
	.main-body .page-wrapper {	padding: 0px !important; }
	#map {
		height: 100%;
		width: 100%;
	}
	#dataS {
		position: absolute;
		left: 10px;
		top: 0px;
		z-index: 999;
		margin: 10px 15px 0px 15px;

		border-radius: 8px 8px 0 0;
		border-bottom: 1px solid #DADCE0;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
	}

	#dataEmer {
		position: absolute;
		left: 50%;
		top: 30px;
		z-index: 999;
		margin: 10px 15px -50px 15px;

		border-radius: 8px 8px 0 0;
		border-bottom: 1px solid #DADCE0;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
	}

	.searchbox-shadow {
		box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
	}

	#dataS .card { height: 100%; }

	@media (max-width: 765px) { 
		.pcoded .pcoded-inner-content {
			padding: 0px !important; 
		}
		body.horizontal-icon .pcoded .main-body, body.horizontal-icon-fixed .pcoded .main-body {
			margin-top: 0px !important; 
		}
		#map {
			height: 100%;
			width: 100%;
		}
	}
</style>

<div class="row">
	<div class="col-xl-12 col-md-12">
		<audio id="myAudio">
		  <source src="{{ url('siren.mp3') }}" type="audio/mpeg">
		  Your browser does not support the audio element.
		</audio>
		<div id="map"></div>
		<div id="dataS">
			<div class="card" style="margin-bottom: 0px">
				<div class="card-header">
					<h5>Senarai PenguatKuasa</h5>
				</div>
				<div class="card-block">
					<form class="form-inline">
						<div class="form-group" style="padding-right: 10px;">
							<select id="pg" name="pg" class="form-control">
								<option selected value="null">Sila pilih penguatkuasa</option>
							</select>
						</div>
						<div class="form-group">
							<button type="button" id="tapis" class="btn btn-primary btn-sm waves-effect waves-light" style="padding: 6px 14px !important;">Tapis</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div id="dataEmer">
			<button id="closeEmergency">Tutup Amaran Kecemasan</button>
		</div>
	</div>
</div>
@endsection

@section('external_js')
@parent
	<script type="text/javascript">
		var origin   = window.location.origin; 
		var param = 'null', map, infowindow, markers = [], markerStore = [], infoWindowContent = [];
		var focusCenter = '', stateMap = 'init', focus = true;

		function initialize(latit, logit) {
			infowindow = new google.maps.InfoWindow();
			var myLatlng = new google.maps.LatLng(1.5371973,103.6602123);
			
			var myOptions = {
				zoom: 17,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.TERRAIN
			}
			map = new google.maps.Map(document.getElementById("map"), myOptions);
			
			setMarkers(param);
		}

		// Sets the map on all markers in the array.
		function setMapOnAll(map) {
			for (var i = 0; i < markers.length; i++) {
				markers[i].setMap(map);
			}
		}

		// Removes the markers from the map, but keeps them in the array.
		function clearMarkers() {
			setMapOnAll(null);
		}

	    // Shows any markers currently in the array.
	    function showMarkers() {
	    	setMapOnAll(map);
	    }

	    // Deletes all markers in the array by removing references to them.
	    function deleteMarkers() {
	    	clearMarkers();
	    	markerStore = [];
	    }

		function setMarkers(data){
			var bounds = new google.maps.LatLngBounds();
			$.ajax({
				type: "GET",
				url: origin+"/api/track/coordinates/"+data+"/list",
				success: function(result){
					if(result.success == true){

						if(stateMap == 'normal' && focus == false){
							if(map.getZoom() == 17){
								focus = true;
							}
						}

						for(var i=0, len=result.data.length; i<len; i++) {

							var lati = parseFloat(result.data[i].latitude); 
							var logi = parseFloat(result.data[i].longitude);
							var iconM = result.data[i].icon;

							//Do we have this marker already?
							if(markerStore.hasOwnProperty(result.data[i]._id)) {
								var marker = markerStore[result.data[i]._id];
								markerStore[result.data[i]._id].setPosition(new google.maps.LatLng(lati,logi));

								if(result.data[i].status == 'emergency'){
									stateMap = 'emergency';
									bounds.extend(new google.maps.LatLng(lati,logi));
									markerStore[result.data[i]._id].setIcon(result.data[i].icon);
									markerStore[result.data[i]._id].setAnimation(google.maps.Animation.BOUNCE);
									map.fitBounds(bounds);
								}else if(result.data[i].status == 'normal'){
									markerStore[result.data[i]._id].setIcon(result.data[i].icon);
									markerStore[result.data[i]._id].setAnimation(null);

									if(result.data[i]._id == data){
										focusSelectionStaff(lati,logi);
									}
								}

							} else {

								var html = "<b>" + result.data[i].title + "</b> <br/>" + result.data[i].content + "<br> <a target='_blank							' href='https://www.google.com/maps/search/?api=1&query="+lati+","+logi+"'>Lihat di google map</a>";
								var location = new google.maps.LatLng(lati, logi);

								var marker = new google.maps.Marker({
									position: location,
									map: map,
									icon: iconM,
								});

								markerStore[result.data[i]._id] = marker;

								google.maps.event.addListener(markerStore[result.data[i]._id], 'click', getInfoCallback(map, html), eventP());
							}
						}
					}else if(result.success == false){
						swal("Tiada Rekod", "Tiada data yang ditemui", "error");
					}
				}
			});
		}

		function getInfoCallback(map, content) {
			var infowindow = new google.maps.InfoWindow({ content: content });
			return function () {

				infowindow.setContent(content);
				infowindow.open(map, this);
			};
		};

		function focusSelectionStaff(newLat,newLng) {
			map.setCenter({
				lat : newLat,
				lng : newLng
			});
		}

		function eventP(){
			var passiveEvent = false;
			try {
			    var opts = Object.defineProperty({}, 'passive', {
			        get: function () {
			            passiveEvent = true;
			        }
			    });
			    window.addEventListener("test", null, opts);
			} catch (e) { }

			// in my case I need both passive and capture set to true, change as you need it.
			passiveEvent = passiveEvent ? { capture: true, passive: true } : true;

			return passiveEvent;
		}
	</script>
	<script type="text/javascript">

	var ellipsis = "...";
	function TrimLength(text, maxLength)
	{
		text = $.trim(text);

		if (text.length > maxLength)
		{
			text = text.substring(0, maxLength - ellipsis.length)
			return text.substring(0, text.lastIndexOf(" ")) + ellipsis;
		}
		else
			return text;
	}

	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	function setSelectedIndex(s, i){
		s.options[i-1].selected = true;
		return;
	}


	function checkStateMap(audio, callback){
		callback(param);
		setTimeout(function () {
	        if(stateMap == 'emergency'){
				$('#dataS').hide();
				$('#dataEmer').show();
				audio.play();
			}else if(stateMap == 'normal'){
				$('#dataS').show();
				$('#dataEmer').hide();
				audio.pause();
				audio.currentTime = 0;

				if(focus == false){
					param = 'null';
					setSelectedIndex(document.getElementById("pg"),1);
					focusSelectionStaff(4.4695721,101.376383);
					map.setZoom(17);
				}
			}
	    }, 5000);
	}

	function fill_staff_list(){
		$.ajax({
			type: "GET",
			url: "{{ url('api/track/staff/list') }}",
			success: function(result){
				$.each(result.data, function(i, d) {
					var full_sentences = '[' + d.no_badan + '] '+ d.nama;
					$('#pg').append('<option value="' + d.id + '">' + TrimLength(full_sentences, 30) +'</option>');
					$('#pg').prop('required',true);
				});
			}
		});
	}

	$(document).ready(function() {

		$('#dataEmer').hide();
		$(".theme-loader").animate({
			opacity: "0"
		},1000);

		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		$('[data-toggle="tooltip"]').tooltip();

		var nav = $(".pcoded-navbar").height();
		var navbar = $(".navbar").height();
		$('#map').css('height', $(window).height() - (nav+navbar) );

		fill_staff_list();

		var audio = document.getElementById("myAudio"); 
		$("#tapis").click(function(){
			var pg = $('#pg').val();
		
			if(pg == 'null'){
				focus = false;
				stateMap = 'normal';
			}else{
				param = pg;
				stateMap = 'init';
			}
			
			$('#dataEmer').hide();
		}); 

		$("#closeEmergency").click(function(){
			$.ajax({
				type: "POST",
				url: origin+"/api/update/normal/status",
				success: function(result){
					if(result.success == true){
						focus = false;
						stateMap = 'normal';
					}else if(result.success == false){
						swal("Tiada Rekod", "Tiada data yang ditemui", "error");
					}
				}
			});
		});

		setInterval(function() {
			checkStateMap(audio,setMarkers);
			var navbars = $("#map").width();
			$('#map').css('height', $(window).height() - (nav+navbar) );
			if(navbars <=  765){
				$('#map').css('height', $(window).height() - (nav) );
			}
		}, 4000);
	});
	</script>
@endsection