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

@include('route::layouts.addSegmentModal')

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">Locations to be covered</label>
			<select class="chosen-select form-control locations" multiple="" data-placeholder="Select Locations">
				
			</select>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">

		<div class="form-group">
			<label class="control-label">Suggested routes</label>
			<div class="table-responsive">
				<table class="table tabel-bordered">
					<tbody>
						<tr><td></td></tr>
					</tbody>
				</table>
			</div>
		</div>

	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<h3><label class="label label-default">Create a custom route</label></h3>
	</div>
	<div class="col-md-5">
		<div class="form-group">
			<label class="control-label">From</label>
			<select class="form-control chosen-select start" name="start" data-placeholder="Select a location"></select>
		</div>
	</div>
	<div class="col-md-5">
		<div class="form-group">
			<label class="control-label">To</label>
			<select class="form-control chosen-select end" name="end" data-placeholder="Select a location"></select>
		</div>
	</div>
	<div class="col-md-2">
		<div class="form-group" style="margin-top: 20px;">
			<button class="btn btn-primary addSegment"><i class="fa fa-plus"></i>&nbsp;New Segment</button>
		</div>
	</div>
	<div class="col-md-12">
		<div class="form-group">
			<div class="table-responsive">
				<table class="table table-bordered table-hover segmentListTable">
					
				</table>
			</div>
		</div>
	</div>
</div>

<!-- created route -->
<div class="row">
	<div class="col-md-12">
		<div class="table-responsive">
			<table class="table segmentLinks">
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">Route Description</label>
			<textarea class="form-control description" cols="2" style="resize: vertical;"></textarea>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<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>


@stop
@section('script')
<script>
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');
		resetForm('save');
		$('.chosen-select').chosen();


		loadLocations(function(){
			uniqueSelection($('.start'), $('.end'), function(){
				loadMultipleSegments();
			});
		});

		$('body').on('hidden.bs.modal', '.modal', function () {
			$(this).removeData('bs.modal');
		});

		$('.start').on('change', function(){
			uniqueSelection($('.start'), $('.end'), function(){
				loadMultipleSegments();
			});
		});

		$('.end').on('change', function(){
			uniqueSelection($('.end'), $('.start'), function(){
				loadMultipleSegments();
			});
		});

		$(document).on('click', '.msave', function(){
			$modal = $(this).closest('#addSegmentModal');

			var data = {
				start: $(this).data('location_start'),
				end: $(this).data('location_end'),
				description: $('.mdescription', $modal).val(),
				distance: $('.distance', $modal).val(),
				time: $('.time', $modal).val(),
				cost: $('.cost', $modal).val()
			};
			saveSegment(data);
		});

		$(document).on('click', '.segmentDelete', function(){
			$(this).closest('tr').remove();
		});

		$(document).on('click', '.pushSegment', function(){
			var segment = {
				start: $(this).data('start'),
				end: $(this).data('end'),
				location_start: $(this).data('location_start'),
				location_end: $(this).data('location_end'),
				distance: $(this).data('distance'),
				description: $(this).data('description')
			};

			addLink(segment);
		});

		$('.addSegment').click(function(){
			var segment = {};

			segment.location_start = $('.start').val();
			segment.location_end = $('.end').val();
			segment.start = $('.start option:selected').text();
			segment.end = $('.end option:selected').text();

			$modal = $('#addSegmentModal');
			$modal.find('.mstart').html(segment.start);
			$modal.find('.mend').html(segment.end);
			$modal.find('.msave').data('location_start', segment.location_start);
			$modal.find('.msave').data('location_end', segment.location_end);
			$modal.modal('show');

		});

		$('.save').click(function(){
			saveRoute();
		});

		function saveRoute(){
			var data = {
				description: $('.description').val(),
				segments: []
			};
			$('.segmentLinks tbody tr').each(function(i){
				data.segments[i] = {
					start: $(this).data('location_start'),
					end: $(this).data('location_end')
				};
			});
			$.post("{{ url('/route/saveRoute') }}", {_token: _token, data: data}, function(e){
				console.log(e);
			}, 'json');
		}

		function saveSegment(data){
			$.post("{{ url('/segment/saveSegment') }}", {_token: _token, data: data}, function(e){
				if(typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('ok')){

					if(e.ok == 1){
						$('#addSegmentModal').modal('hide');
						loadMultipleSegments();
					}else if(e.ok == 0){
						$.notify.error(e.msg);
					}

				}else{
					$.notify.error('<b>Please check all the fields.</b>');
				}
			}, 'json');
		}

		function getSegmentDom(segment){
			var dom = '';
			dom += '<tr data-end="'+ segment.end +'" data-location_end="'+ segment.location_end +'" data-location_start="'+ segment.location_start +'">';
			dom += '<td class="text-right sstart">'+ segment.start +'</td>';
			dom += '<td class="text-center" width="30px"><i class="fa fa-long-arrow-right"></i></td>';
			dom += '<td class="text-left send">'+ segment.end +'</td>';
			dom += '<td class="text-left">'+ segment.description +'</td>';
			dom += '<td class="text-right" width="150px">'+ segment.distance +' km</td>';
			dom += '<td class="text-center" width="30px"><button class="btn btn-danger btn-xs segmentDelete"><i class="fa fa-close"></i></button></td>';
			dom += '</tr>';
			return dom;
		}

		function addLink(segment){			
			
			//this variable holds the location end of the last tr. so next segment should contain this location
			var location_end = $('.segmentLinks tr:last-child()').data('location_end');
			if($('.segmentLinks tbody tr').length == 0){
				$('.segmentLinks tbody').html(getSegmentDom(segment));
			}else if($('.segmentLinks tbody tr').length > 0 && (segment.location_start == location_end || segment.location_end == location_end)){
				
				//all good. now we need to swap segment start and ends in the correct order
				
				//to swap, following condition has to be true
				if(segment.location_end == location_end){
					var tls = segment.location_start;
					var ts = segment.start;

					segment.location_start = segment.location_end;
					segment.location_end = tls;

					segment.start = segment.end;
					segment.end = ts;
				}
				$('.segmentLinks tbody').append(getSegmentDom(segment));

			}else{
				var end = $('.segmentLinks tr:last-child()').data('end');
				$.notify.error("<b>Next segment sould contain '"+ end +"'</b>");
			}
		}


		function resetForm(method){
			$('.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 loadMultipleSegments(){
			var data = {
				start: $('.start').val(),
				end: $('.end').val()
			};
			$tbody = $('.segmentListTable');

			$tbody.html('');

			$.post("{{ url('/route/segmentProperties') }}", {_token: _token, data: data}, function(e){
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					
					var dom = '';
					dom += '<thead>';
					dom += '<th>From</th>';
					dom += '<th>To</th>';
					dom += '<th>km</th>';
					dom += '<th>description</th>';
					dom += '<th class="text-center" width="30px"><i class="fa fa-gear"></i></th>';
					dom += '</thead>';
					dom += '<tbody>';
					$.each(e, function(i, k){
						dom += '<tr>';
						
						dom += '<td>'+ k.start +'</td>';
						dom += '<td>'+ k.end +'</td>';
						dom += '<td>'+ k.distance +'</td>';
						dom += '<td>'+ k.description +'</td>';
						dom += '<td><button class="btn btn-primary btn-sm pushSegment" data-start="'+ k.start +'" data-location_start="'+ k.location_start +'" data-end="'+ k.end +'" data-location_end="'+ k.location_end +'" data-distance="'+ k.distance +'" data-description="'+ k.description +'" data-id="'+ k.id +'"><i style="transform: rotate(180deg);" class="fa fa-mail-forward"></i></button></td>';
						dom += '</tr>';
					});
					dom += '</tbody>';
					$tbody.html(dom);
				}
			}, 'json');
		}

		function uniqueSelection($a, $b, callback){
			$('option', $b).removeAttr('disabled');

			$('option[value="'+ $a.val() +'"]', $b).attr('disabled', true);
			if($b.val() == null){
				//?
				$b.val($('option:not(:disabled)', $b).first().val());
			}

			$b.trigger('chosen:updated');

			if(callback !== undefined && typeof(callback) == 'function'){
				callback();
			}
		}

		function loadLocations(callback){
			$select = $('.locations, .end, .start');
			$.post("{{ url('/route/loadLocations') }}", {_token: _token}, function(e){
				var dom = '';
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<option value="'+ k.id +'">'+ k.name +'</option>';
					});
				}
				$select.html(dom);

				$select.trigger('chosen:updated');

				if(callback !== undefined && typeof(callback) == 'function'){
					callback();
				}
				
			}, 'json');
		}

	});
</script>
@stop