<?php $__env->startSection('title'); ?> <?php echo e(Config::get('shuttlelocation.title')); ?> <?php $__env->stopSection(); ?>
<?php $__env->startSection('body'); ?>

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">Location</label>
			<input type="text" class="form-control name clear" name="name">
		</div>
		<div class="form-group">
			<label class="control-label">Coordinates</label>
			<div class="input-group" style="width: 100%;">
				<input type="text" class="form-control coordinates clear" id="coordinates" name="coordinates" disabled>
				<div class="input-group-addon" style="padding: 0px;">
					<div class="editLocationWrapper" style="display: none;">
						<button class="btn btn-warning btn-sm editLocation"><i class="fa fa-pencil"></i></button>
					</div>
					<div class="btn-group updateLocationWrapper" style="display: none; width: 65px;">
						<button class="btn btn-primary btn-sm pull-left updateLocation"><i class="fa fa-check"></i></button>
						<button class="btn btn-info btn-sm pull-right cancelLocation"><i class="fa fa-close"></i></button>
					</div>
				</div>
			</div>
		</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">
		<div class="thumbnail" id="map" style="margin-bottom: 0px; height: 400px !important; width: 100% !important;">

		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="form-group">
			<label class="control-label">List of locations</label>
			<div class="table-responsive">
				<table class="table table-bordered locations">
					<thead>
						<tr>
							<th width="100px">#</th>
							<th>Name</th>
							<th class="text-center" width="100px"></th>
						</tr>
					</thead>
					<tbody>
						<tr><th class="text-center" colspan="3">Sorry, No results found.</th></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
<script type="text/javascript">
	var map; // @global  scope
	var marker; // @global  scope
	
	function initMap(){
		var center = {lat: 7.641309304668609, lng: 80.6396484375};

		map = new google.maps.Map(document.getElementById('map'), {
			zoom: 7,
			center: center,
			streetViewControl: false
		});

		marker = new google.maps.Marker();

		map.addListener('click', function(e){
			marker.setPosition({lat: e.latLng.lat(), lng: e.latLng.lng()});
			marker.setMap(map);
			document.getElementById('coordinates').value = e.latLng.lat() + ', ' + e.latLng.lng();
			document.getElementsByClassName('editLocationWrapper')[0].style.display = "block";
			document.getElementsByClassName('updateLocationWrapper')[0].style.display = "none";
			document.getElementById('coordinates').disabled = true;

		});
	}

	function getLocationString(){
		if(typeof(map) != 'undefined' && typeof(marker) != 'undefined' && map != undefined && marker != undefined){
			if(typeof(marker.getPosition()) != 'undefined'){
				return marker.getPosition().lat() + ', ' + marker.getPosition().lng();
			}else{
				return '';
			}
		}else{
			return '';
		}
	}

	function setMarker(lat, lng){
		if(map != undefined && marker != undefined){
			if(lat != '' && lng != ''){
				marker.setPosition({lat: parseFloat(lat), lng: parseFloat(lng)});
				marker.setMap(map);
				map.panTo(marker.getPosition());
				map.setZoom(map.getZoom());
			}else{
				marker.setMap(null);
			}
		}
	}
</script>

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

<script>
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');
		
		$(document).ajaxStart(function() {
			$('button').data('loading-text', '...');
			$('button').button('loading');
		}).ajaxStop(function(){
			$('button').button('reset');
		});

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


		$(document).on('click', '.edit', function(){
			resetForm('update');
			$('.update').val($(this).data('id'));
			$('.name').val($(this).data('name'));
			if($(this).data('lat') != '' &&  $(this).data('lng') != ''){
				$('.coordinates').val($(this).data('lat') + ', ' + $(this).data('lng'));
			}
			setMarker($(this).data('lat'), $(this).data('lng'));
		});

		$(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){
					deleteLocation(id);
				}
			});
		});

		$('.editLocation').click(function(){
			$('.editLocationWrapper').hide();
			$('.updateLocationWrapper').show();
			$('.coordinates').prop('disabled', false);
		});

		$('.cancelLocation').click(function(){
			$('.updateLocationWrapper').hide();
			$('.editLocationWrapper').show();
			$('.coordinates').prop('disabled', true);
			$('.coordinates').val(getLocationString());
			$.clearHighlights();
		});

		$('.updateLocation').click(function(){
			$.clearHighlights();
			var coordinates = $('.coordinates').val().split(',');
			if(coordinates.length == 2){
				var lat = $.trim(coordinates[0]);
				var lng = $.trim(coordinates[1]);

				if($.isDouble(lat) && $.isDouble(lng)){
					setMarker(lat, lng);
					$('.updateLocationWrapper').hide();
					$('.editLocationWrapper').show();
					$('.coordinates').prop('disabled', true);
				}else{
					$('.coordinates').highlightElement({msg: 'Invalid coordinates'});
				}
			}else{
				$('.coordinates').highlightElement({msg: 'Invalid coordinates'});
			}

		});

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

		$('.update').click(function(){
			var coordinates = marker.getPosition() != undefined ? {lat: marker.getPosition().lat(), lng: marker.getPosition().lng()} : {};
			var data = {
				id: $(this).val(),
				name: $('.name').val(),
				coordinates: coordinates
			};
			updateLocation(data);
		});

		$('.save').click(function(){
			var coordinates = marker.getPosition() != undefined ? {lat: marker.getPosition().lat(), lng: marker.getPosition().lng()} : {};
			var data = {
				name: $('.name').val(),
				coordinates: coordinates
			};
			saveLocation(data);
		});

		function resetForm(method){
			setMarker('', '');
			$('.clear').clear();
			$.clearHighlights();
			$('.updateLocationWrapper').hide();
			$('.editLocationWrapper').show();
			$('.coordinates').prop('disabled', true);
			if(typeof(method) == 'string' && method.length > 0){
				if(method == 'save'){
					$('.updateWrapper').hide();
					$('.saveWrapper').show();
				}else if(method == 'update'){
					$('.saveWrapper').hide();
					$('.updateWrapper').show();
				}
			}
		}

		function deleteLocation(id){
			$.post("<?php echo e(url('/shuttlelocation/delete')); ?>", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadLocationsTable();
				});
			}, 'json');
		}

		function updateLocation(data){
			$.post("<?php echo e(url('/shuttlelocation/update')); ?>", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadLocationsTable();
				});
			}, 'json');
		}

		function saveLocation(data){
			$.post("<?php echo e(url('/shuttlelocation/save')); ?>", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadLocationsTable();
				});
			}, 'json');
		}

		function loadLocationsTable(){
			var $tbody = $('.locations tbody');
			$.post("<?php echo e(url('/shuttlelocation/getAll')); ?>", {_token: _token}, function(e){
				var dom = '';
				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 += '<tr>';
						dom += '<td>'+ (++i) +'</td>';
						dom += '<td>'+ (k.name) +'</td>';
						dom += '<td class="text-center"><div class="btn-group">';
						dom += '<button class="btn btn-sm btn-warning edit" data-id="'+ k.id +'" data-name="'+ k.name +'" data-lat="'+ lat +'" data-lng="'+ lng +'"><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="3">Sorry, No results found.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}
	});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>