@extends('layouts.master')
@section('title') {{ Config::get('segment.title') }} @stop
@section('body')

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">From</label>
			<select class="form-control start clear" id="start" name="start">
				<option value="0">--</option>
			</select>
		</div>
		<div class="form-group">
			<label class="control-label">To</label>
			<select class="form-control end clear" id="end" name="end">
				<option value="0">--</option>
			</select>
		</div>

		<div class="form-group">
			<label class="control-label">Description</label>
			<textarea class="form-control clear description" name="description" cols="2" style="resize: vertical;"></textarea>
		</div>

		<div class="form-group">
			<label class="control-label">Distance (km)</label>
			<input type="text" class="form-control distance clear" id="distance" name="distance">
		</div>

		<div class="form-group">
			<label class="control-label">Average Time (h)</label>
			<input type="text" class="form-control time clear" name="time">
		</div>
		<div class="form-group">
			<label class="control-label">Cost (Rs)</label>
			<input type="text" class="form-control cost clear" name="cost">
		</div>
		<div class="form-group saveWrapper" style="display: none;">
			<button class="btn btn-primary save">Save</button>
		</div>
		<div class="form-group updateWrapper" style="display: none;">
			<button class="btn btn-warning clear update">Update</button>
			<button class="btn btn-info cancel">Cancel</button>
		</div>
	</div>

	<div class="col-md-8">
		<button class="btn btn-danger reset">Reset Route</button>
		<button class="btn btn-success panOut">Pan Out</button>
		<div class="thumbnail" id="map" style="width: 100%; height: 400px;">
			
		</div>
	</div>

</div>

<div class="row">
	<div class="col-md-12">
		<div class="form-group">
			<label class="control-label">List of segments</label>
			<div class="table-responsive">
				<table class="table table-bordered segments">
					<thead>
						<tr>
							<th width="90px">#</th>
							<th>From</th>
							<th>To</th>
							<th>Description</th>
							<th width="150">Km</th>
							<th class="text-center" width="100px"><i class="fa fa-gear"></i></th>
						</tr>
					</thead>
					<tbody>
						<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

@stop
@section('script')
<script type="text/javascript">

	var map; //@global scope
	var markerA; //@global scope
	var markerB; //@global scope
	var directionsService; //@global scope
	var directionsRenderer; //@global scope
	
	function initMap(){
		var center = {lat: 7.641309304668609, lng: 80.6396484375};
		map = new google.maps.Map(document.getElementById('map'), {
			zoom: 8,
			center: center,
			streetViewControl: false
		});

		markerA = new google.maps.Marker();
		markerB = new google.maps.Marker();

		directionsService = new google.maps.DirectionsService;

		directionsRenderer = new google.maps.DirectionsRenderer({
			draggable: true,
			suppressMarkers: true
		});
		
		directionsRenderer.addListener('directions_changed', function(){
			computeDistance();
		});
	}
	
	function panOut(){
		var center = {lat: 7.641309304668609, lng: 80.6396484375};
		if(typeof(map) != 'undefined'){
			map.setZoom(8);
			map.setCenter(center);
		}
	}

	function setStart(lat, lng){
		if(typeof(map) != 'undefined' && typeof(markerA) != 'undefined'){
			if(lat != undefined && lat != '' && lng != undefined && lng != ''){
				markerA.setPosition({lat: lat, lng: lng});
				markerA.setMap(map);
				drawRoute();
			}else{
				markerA.setPosition(null);//remove existing position
				markerA.setMap(null);
			}
		}
	}

	function setEnd(lat, lng){
		if(typeof(map) != 'undefined' && typeof(markerB) != 'undefined' ){
			if(lat != undefined && lat != '' && lng != undefined && lng != ''){
				markerB.setPosition({lat: lat, lng: lng});
				markerB.setMap(map);
				drawRoute();
			}else{
				markerB.setPosition(null);//remove existing position
				markerB.setMap(null);
			}
		}
	}
	
	function drawRoute(waypoints){
		waypoints = waypoints || [];
		for(var i = 0; i < waypoints.length; i++){
			waypoints[i].stopover = false;
		}
		
		if(typeof(markerA) != 'undefined' && typeof(markerB) != 'undefined'){
			var aPos = markerA.getPosition();
			var bPos = markerB.getPosition();

			if(aPos != undefined && bPos != undefined && aPos.lat() != bPos.lat() && aPos.lng() != bPos.lng()){
				
				var routeSettings = {
					origin: markerA.getPosition(),
					destination: markerB.getPosition(),
					waypoints: waypoints,
					// optimizeWaypoints: true,
					travelMode: 'DRIVING',
					provideRouteAlternatives: false
				};

				directionsRenderer.setMap(null);

				directionsService.route(routeSettings, function(response, status){
					if(status === 'OK'){
						directionsRenderer.setDirections(response);
						directionsRenderer.setMap(map);
					}else{
						console.log('Directions request failed due to ' + status);
					}
				});
			}else{
				directionsRenderer.setMap(null);
			}
		}

	}

	function computeDistance(){
		var directions = directionsRenderer.getDirections();
		var total = 0;
		if(directions != undefined){
			var route = directions.routes[0];
			for (var i = 0; i < route.legs.length; i++) {
				total += route.legs[i].distance.value;
			}
			total = total / 1000;
		}
		document.getElementById('distance').value = total;
	}

	function getWayPoints(){
		directions = directionsRenderer.getDirections();
		var waypoints = []; //@clearing global variable
		if(directions != undefined){
			if(Object.keys(directions.routes[0].legs[0].via_waypoints).length > 0){
				var points = directions.routes[0].legs[0].via_waypoints;
				for(var i = 0; i < points.length; i++){
					waypoints.push({location: {lat: points[i].lat(), lng: points[i].lng()}});
				}
			}
			return waypoints;
		}
	}

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxs5MnILDCN8Qz01-5fHUGKBQ85B34gHE&callback=initMap"></script>

<script type="text/javascript">
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');

		$(document).ajaxStart(function() {
			$('button').data('loading-text', '...');
			$('button').button('loading');
		}).ajaxStop(function(){
			$('button').button('reset');
		});

		resetForm('save');
		loadLocations(function(){
			loadSegmentsTable();
		});

		$(document).on('click', '.edit', function(){
			var waypoints = JSON.parse(window.atob($(this).data('waypoints')));
			
			resetForm('update');
			$('.update').val($(this).data('id'));

			$('.start').val($(this).data('start'));
			$('.end').val($(this).data('end'));
			$('.distance').val($(this).data('distance'));
			$('.description').val($(this).data('description'));
			$('.time').val($(this).data('time'));
			$('.cost').val($(this).data('cost'));

			setStart($('option:selected', $('.start')).data('lat'), $('option:selected', $('.start')).data('lng'));
			setEnd($('option:selected', $('.end')).data('lat'), $('option:selected', $('.end')).data('lng'));
			drawRoute(waypoints);

		});

		$(document).on('click', '.delete', function(){
			var id = $(this).data('id');
			bootbox.confirm("Are you sure you want to delete this record?", function(r){ 
				if(r){
					deleteSegment(id);
				}
			});
		});

		$('.reset').click(function(){
			bootbox.confirm('Are you sure you want to reset your route back to original?', function(r){
				if(r){
					drawRoute();
				}
			});
		});

		$('.panOut').click(function(){
			panOut();
		});

		$('.cancel').click(function(){
			resetForm('save');
		});

		$('.save').click(function(){

			var data = {
				start: $('.start').val(),
				end: $('.end').val(),
				description: $('.description').val(),
				distance: $('.distance').val(),
				time: $('.time').val(),
				cost: $('.cost').val(),
				waypoints: getWayPoints()
			};
			saveSegment(data);
		});

		$('.update').click(function(){
			var data = {
				id: $(this).val(),
				start: $('.start').val(),
				end: $('.end').val(),
				description: $('.description').val(),
				distance: $('.distance').val(),
				time: $('.time').val(),
				cost: $('.cost').val(),
				waypoints: getWayPoints()
			};
			updateSegment(data);
		});

		$('.start').change(function(){
			var _this = $(this);
			uniqueSelection($('.start'), $('.end'), function(){
				var lat = $('option:selected', $(_this)).data('lat');
				var lng = $('option:selected', $(_this)).data('lng');
				setStart(lat, lng);
			});
		});

		$('.end').change(function(){
			var _this = $(this);
			uniqueSelection($('.end'), $('.start'), function(){
				var lat = $('option:selected', $(_this)).data('lat');
				var lng = $('option:selected', $(_this)).data('lng');
				setEnd(lat, lng);
			});
		});

		function resetForm(method){
			setStart();
			setEnd();
			drawRoute();
			panOut();

			$('.clear').clear();
			$.clearHighlights();
			if(typeof(method) == 'string' && method.length > 0){
				if(method == 'save'){
					$('.updateWrapper').hide();
					$('.saveWrapper').show();
				}else if(method == 'update'){
					$('.saveWrapper').hide();
					$('.updateWrapper').show();
				}
			}
		}

		function deleteSegment(id){
			$.post("{{ url('/segment/deleteSegment') }}", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadSegmentsTable();
				});
			}, 'json');
		}

		function updateSegment(data){
			$.post("{{ url('/segment/updateSegment') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadSegmentsTable();
				});
			}, 'json');
		}

		function saveSegment(data){
			$.post("{{ url('/segment/saveSegment') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadSegmentsTable();
				});
			}, 'json');
		}

		function uniqueSelection($a, $b, callback){
			if($a.val() == $b.val()){
				$b.val($('option:first-child', $b).val());
			}
			if(callback != undefined && typeof(callback) == 'function'){
				callback();
			}
		}

		function loadLocations(callback){
			$select = $('.start, .end');
			$.post("{{ url('/segment/loadLocations') }}", {_token: _token}, function(e){
				var dom = '<option value="">Select a location</option>';
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						var coordinates = JSON.parse(k.coordinates);
						var lat = coordinates != null ? coordinates.lat : '';
						var lng = coordinates != null ? coordinates.lng : '';

						dom += '<option value="'+ k.id +'" data-lat="'+ lat +'" data-lng="'+ lng +'">'+ k.name +'</option>';
					});
				}
				$select.html(dom);
				if(callback !== undefined && typeof(callback) == 'function'){
					callback();
				}
			}, 'json');
		}

		function loadSegmentsTable(){
			var $tbody = $('.segments tbody');
			$.post("{{ url('/segment/loadSegmentsTable') }}", {_token: _token}, function(e){
				var dom = '';
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<tr>';
						dom += '<td>'+ (++i) +'</td>';
						dom += '<td>'+ (k.start) +'</td>';
						dom += '<td>'+ (k.end) +'</td>';
						dom += '<td>'+ (k.description) +'</td>';
						dom += '<td>'+ (k.distance) +'</td>';
						dom += '<td class="text-center"><div class="btn-group">';
						dom += '<button class="btn btn-sm btn-warning edit" data-id="'+ k.id +'" data-start="'+ k.location_start +'" data-end="'+ k.location_end +'" data-description="'+ k.description +'" data-distance="'+ k.distance +'" data-time="'+ k.time +'" data-cost="'+ k.cost +'" data-waypoints="'+ k.waypoints +'"><i class="fa fa-pencil"></i></button>';
						dom += '<button class="btn btn-sm btn-danger delete" data-id="'+ k.id +'"><i class="fa fa-trash"></i></button>';
						dom += '</div></td>';
						dom += '</tr>';
					});
				}else{
					dom = '<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}

	});
</script>
@stop