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

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-labe">Trip</label>
			<select class="form-control trip"></select>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<div class="table-responsive">
			<table class="table table-bordered vehiclesTable">
				<thead>
					<tr>
						<th>Vehicle</th>
						<th>Items</th>
						<th>Qty</th>
						<th>Drop Points</th>
						<th width="40px" class="text-center"><i class="fa fa-gear"></i></th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-12 form-group">
		<div class="img-thumbnail col-md-12 route_edit_area">
			<h3 class="vnumber" style="margin-top: 0px; margin-bottom: 0px; display: inline;">....</h3>
			<div class="segmentDeleteWrapper" style="display: inline">
				
			</div>
			<hr style="margin: 20px 0px 10px 0px;">
			<h3 style="margin: 0px 0px 20px 0px;"><small>Drop points</small></h3>
			<div class="droppoints">
				
			</div>
		</div>
	</div>
</div>


<style type="text/css">
	.route_edit_area{
		min-height: 300px;
		padding: 20px;
	}
	.route_edit_area .droppoints .point{
		display: inline-block;
		/*margin: 0px !important;*/
		min-width: 100px;
		padding: 10px;
	}
	.route_edit_area .droppoints .btn-wrapper{
		display: inline-block;
		/*margin-top: 10px;*/
		margin: 0px 10px 0px 10px;
	}
	.route_edit_area .droppoints .arrow{
		display: list-item;
		width: 100px;
		height: 10px;
	}
	.route_edit_area .droppoints .btn-wrapper .btn{
		display: list-item;
		margin: 0px auto 0px;
	}
</style>

<div class="modal fade modal_addMiddlePoint" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<div class="modal-header" style="border-bottom: none;">
				<div class="row">
					<div class="form-group col-md-12">
						<button class="btn btn-info prev"><i class="fa fa-arrow-left"></i>&nbsp;<span>Create New Segment</span></button>
					</div>
				</div>
			</div>

			<div class="modal-body" style="position: relative;">

				<div id="modal-body-wrapper-carousel" class="carousel slide" data-ride="carousel" data-interval="">
					<div class="carousel-inner" role="listbox">
						
						<div class="item active" data-title="Create Route">

							<div class="segment1">

								<div class="row">

									<div class="form-group col-md-6">
										<label class="control-label">From</label>
										<div class="form-control from"></div>
									</div>
									<div class="form-group col-md-6">
										<label class="control-label">To</label>
										<select class="form-control to location"></select>
									</div>
									
									

								</div>
								<div class="row">
									<div class="form-group col-md-12">
										<div class="table-responsive">
											<table class="table table-condensed table-bordered segmentTable">
												<thead>
													<tr>
														<th width="60px">#</th>
														<th>Description</th>
														<th>Distance</th>
														<th>Cost</th>
														<th width="60px" class="text-center"><i class="fa fa-gear"></i></th>
													</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>

								</div>
								
								<div class="row">

									<div class="col-md-12">
										<div class="table-responsive">
											<table class="table table-bordered table-bordered routeTable">
												<thead>
													<tr>
														<th>From</th>
														<th>To</th>
														<th>Description</th>
														<th width="100px">km</th>
														<th width="120px">cost</th>
														<th width="60px" class="text-center"><i class="fa fa-gear"></i></th>
													</tr>
												</thead>
												<tbody>
													
												</tbody>
												<tfoot>
													<tr>
														
													</tr>
												</tfoot>
											</table>
										</div>
									</div>

								</div>

								<div class="row">
									<div class="col-md-12">
										<button class="btn btn-primary pull-right saveRoute">Add Segments</button>
									</div>
								</div>

							</div><!-- end of segment -->

						</div>
						<div class="item" data-title="Create New Segment">
							<div class="segment">
								<div class="row">
									<div class="col-md-4">
										<div class="form-group">
											<button class="btn btn-primary addLocation" data-toggle="modal" data-target=".locationModal">Add New Location</button>
										</div>

										<div class="form-group">
											<label class="control-label">From</label>
											<select class="form-control cnstart clear" name="start">
												<option value="0">--</option>
											</select>
										</div>

										<div class="form-group">
											<label class="control-label">To</label>
											<select class="form-control cnend clear" name="end">
												<option value="0">--</option>
											</select>
										</div>

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

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

										<div class="form-group">
											<label class="control-label">Average Time (h)</label>
											<input type="text" class="form-control cntime clear" name="time">
										</div>

										<div class="form-group">
											<label class="control-label">Cost (Rs)</label>
											<input type="text" class="form-control cncost clear" name="cost">
										</div>

										<div class="form-group saveWrapper" style="display: none;">
											<button class="btn btn-primary cnsave">Save</button>
										</div>
										<div class="form-group updateWrapper" style="display: none;">
											<button class="btn btn-warning clear cnupdate">Update</button>
											<button class="btn btn-info cncancel">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="segmentMap" style="width: 100%; height: 400px;">
											
										</div>
									</div>
								</div>
								

								<div class="row">
									<div class="col-md-12">
										<label class="control-label">List of segments</label>
										<div class="table-responsive" style="height: 400px;">
											<table class="table table-bordered cnsegments">
												<thead>
													<tr>
														<th width="90px">#</th>
														<th>From</th>
														<th>To</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><!-- end of segment -->
						</div><!-- end of item 2 -->
					</div>
				</div>

				

			</div><!-- end of modal body -->

		</div>
	</div>
</div><!-- end of modal -->

<!-- location modal -->
<div class="modal fade locationModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<!-- <div class="modal-header" style="border-bottom: none;">
				<h3 style="margin-bottom: 0px; margin-top: 0px;">Add New Location</h3>
			</div> -->
			<div class="modal-body">
				<div class="form-group">
					<div class="thumbnail" id="locationMap" style="margin-bottom: 0px; height: 400px !important; width: 100% !important;">

					</div>
				</div>
				<div class="form-group">
					<label class="control-label">Location Name</label>
					<input type="text" class="form-control lm_location">
				</div>
				<div class="form-group">
					<label class="control-label">Coordinates</label>
					<input type="text" class="form-control coordinates clear" id="coordinates" name="coordinates" disabled></input>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary lm_saveLocation">Save Location</button>
			</div>
		</div>
	</div>
</div>
<!-- end of location modal -->

<button class="btn btn-primary btn_saveTripRoute">Save</button>



@stop
@section('script')
@include('triproute::scripts.createSegment');

<script>
window.routeCollection = [];
window.availablePoints = [];
window.changed = false;

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

$(function(){
	var _token = $('meta[name="_token"]').attr('content');

	$('.carousel').carousel();

	loadTrips(function(){
		loadVehiclesTable();
	});

	$('.modal_addMiddlePoint').on('show.bs.modal', function (event) {
		var $routeTable = $('.routeTable');
		$('tbody', $routeTable).html('');
		$('tfoot', $routeTable).html('');
	});

	$('#modal-body-wrapper-carousel').on('slide.bs.carousel', function () {
	  	$('.prev span').html($(this).find('.active').data('title'));
	  	loadLocations(function(){
		  	loadSegments();
	  	});
	});

	$('.prev').click(function(){
		$('.carousel').carousel('prev');
	});
	

	$('.trip').change(function(e){
		loadVehiclesTable();
	});

	$('.modal_addMiddlePoint .to').change(function(){
		loadSegments();
	});

	
	$(document).on('click', '.saveRoute', function(){
		var subRoutes = [];
		var _this = $(this);
		var $routeTbody = $('.routeTable tbody');
		$trLast = $('tr:last-child()', $routeTbody);

		if($trLast.length > 0){
			var lasttrtid = $('.trto', $trLast).data('trtid');
			var nextid = $(_this).data('id');

			if(lasttrtid != undefined && nextid != undefined && lasttrtid == nextid){

				//check if created route is in correct order
				var segments = [];
				$('tr', $routeTbody).each(function(){
					var sid = $(this).data('segment_id');
					var fid = $('td.trfrom', $(this)).data('trfid');
					var fname = $('td.trfrom', $(this)).html();
					var tid = $('td.trto', $(this)).data('trtid');
					var tname = $('td.trto', $(this)).html();
					var description = $('td.trdescription', $(this)).html();
					var distance = $('td.trdistance', $(this)).html();
					var cost = $('.trcost', $(this)).val();
					
					segments.push({sid: sid, fid: fid, fname: fname, tid: tid, tname: tname, description: description, distance: distance, cost: cost});
				});
				var size = segments.length;
				$.each(segments, function(i, k){
					var next = i+1;
					if(next < size){
						if(segments[i].tid != segments[next].fid){
							$.notify.error('<b>The route is not in correct order</b>');
							return false;
						}
					}
					if(next == size){
						//last element
						updateCollection($(_this).data('tvlid'), segments);
						changed = true;
						$('.modal_addMiddlePoint').modal('hide');
					}
				});

			}else{
				var destination = $(this).data('name') != undefined ? $(this).data('name') : 'next end point';
				$.notify.error('<b>This route must end with '+ $(this).data('name') +'</b>');
			}
		}else{
			$.notify.error('<b>No routes created.</b>');
		}
	});


	function updateCollection(tvlid, segments){
		var size = routeCollection.length;
		
		var index = undefined;

		if(size == 0){
			routeCollection.push({'tvlid': tvlid, 'segments': segments});
		}else{
			$.each(routeCollection, function(i, k){
				if(k != undefined && typeof(k) == 'object' && k.hasOwnProperty('tvlid') && k.tvlid == tvlid){
					index = i;
				}
				if((i+1) == size){
					//last one
					if(index != undefined){
						routeCollection[index].segments = segments;
					}else{
						routeCollection.push({'tvlid': tvlid, 'segments': segments});
					}
				}
			});
		}
	}

	function hasTvlid_routeCollection(tvlid, callback){
		var size = routeCollection.length;
		var result = null;
		$.each(routeCollection, function(i, k){
			if(k.tvlid == tvlid){
				result = k;
			}

			if((++i) == size){
				if(callback != undefined && typeof(callback) == 'function'){
					callback(result);
				}
			}
		});
	}

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

		if(Object.keys(routeCollection).length + 1 == Object.keys(availablePoints).length){

			var collection = [];
			var size = Object.keys(availablePoints).length;
			$.each(availablePoints, function(i, k){
				hasTvlid_routeCollection(k.tvlid, function(result){
					
					if(result != null && i > 0){

						collection.push({
							from: availablePoints[(i-1)].tvlid,
							to: k.tvlid,
							segments: result.segments
						});

					}
				});

				if((++i) == size){
					//callback
					saveTripRoute(collection);
				}
			});

		}else{
			$.notify.error('All droppoints have to have segments added.');
		}

	});

	function saveTripRoute(collection){
		$.post("{{ url('/triproute/saveTripRoute') }}", {_token: _token, collection: collection}, function(e){
			$.highlightOrThrow(e, function(){
				changed = false;
			});
		}, 'json');
	}

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

	$(document).on('click', '.addSegment', function(){
		var _this = $(this);
		var data;
		var $tbody = $('.segmentTable tbody');
		var $routeTbody = $('.routeTable tbody');

		var $tr1 = $('tr:first-child()', $routeTbody);

		data = {
			fid: $('.modal_addMiddlePoint .from').data('id'),
			fname: $('.modal_addMiddlePoint .from').data('name'),
			tid: $('.modal_addMiddlePoint .to').val(),
			tname: $('.modal_addMiddlePoint .to option[value="'+ $('.modal_addMiddlePoint .to').val() +'"]').text(),
			description: $(_this).closest('tr').find('.description').html(),
			distance: $(_this).closest('tr').find('.distance').html(),
			cost: $(_this).closest('tr').find('.cost').html(),
			segment: $(_this).data('segment')
		};

		$('.modal_addMiddlePoint .from').data('id', data.tid);
		$('.modal_addMiddlePoint .from').data('name', data.tname);
		$('.modal_addMiddlePoint .from').html(data.tname);

		$routeTbody.append(getSegmentTr(data));
		loadSegments();
	});

	$(document).on('click', '.selectVehicle', function(){
		var tvid = $(this).val();
		var trip = $('.trip').val() != undefined ? $('.trip').val() : '';
		var number = $(this).closest('tr').find('.number').html();
		number = number != undefined ? number : '';


		$('.vnumber').html('Trip #' + trip + ' - ' + number);

		var btn = '<button class="btn btn-danger pull-right segmentDelete" data-trip="'+ trip +'" data-tvid="'+ tvid +'">Delete Segments</button>';
		$('.segmentDeleteWrapper').html(btn);

		if(changed){
			bootbox.confirm("<span class='text-danger'><b>Changes wont be saved if you continue! Are you sure?</b></span>", function(r){
				if(r){
					changed = false;
					selectVehicle(tvid);
				}
			});
		}else{
			selectVehicle(tvid);
		}

	});
	

	$(document).on('click', '.segmentDelete', function(e){
		var data = {
			trip: $(this).data('trip'),
			tvid: $(this).data('tvid')
		};

		deleteSegment(data);
	});


	$(document).on('click', '.addMiddlePoint', function(e){
		var _this = $(this);

		var $prev = $(_this).parent('.btn-wrapper').prev('.point');
		var $next = $(_this).parent('.btn-wrapper').next('.point');

		if($prev != undefined && $prev.data('id') != undefined && $prev.data('name') != undefined){
			$('.modal_addMiddlePoint .from').html($prev.data('name'));
			$('.modal_addMiddlePoint .from').data('id', $prev.data('id'));
			$('.modal_addMiddlePoint .from').data('name', $prev.data('name'));
			$('.modal_addMiddlePoint .saveRoute').data('id', $next.data('id'));
			$('.modal_addMiddlePoint .saveRoute').data('name', $next.data('name'));
			$('.modal_addMiddlePoint .saveRoute').data('tvlid', $(this).data('tvlid'));

			loadLocations(function(){
				loadSegments();
			});

			preloadSegments(_this);
		}else{
			$.notify.error('<b>Invalid previous location.</b>');
		}
		
	});

	function deleteSegment(data){
		if(typeof(data) == 'object' && data.hasOwnProperty('trip') && data.hasOwnProperty('tvid')){
			if(data.trip != undefined && data.trip != '' && data.tvid != undefined){
				$.post("{{ url('/triproute/deleteSegment') }}", {_token: _token, data: data}, function(e){
					$.highlightOrThrow(e, function(){
						routeCollection = [];
					});
				}, 'json');
			}else{
				$.notify.error('Invalid record selected');
			}
		}else{
			$.notify.error('Invalid record selected');
		}

	}

	function preloadSegments(_this){
		var tvlid = $(_this).data('tvlid');
		var $routeTbody = $('.routeTable tbody');
		$routeTbody.html('');
		if(tvlid != undefined){
			hasTvlid_routeCollection(tvlid, function(r){
				if(r != undefined && typeof(r) == 'object' && r.hasOwnProperty('segments')){
					$.each(r.segments, function(i, k){
						var data = {
							segment: k.sid,
							tid: k.tid,
							fid: k.fid,
							fname: k.fname,
							tname: k.tname,
							description: k.description,
							distance: k.distance,
							cost: k.cost
						};
						$routeTbody.append(getSegmentTr(data));
					});
				}
			});
		}
	}

	function getSegmentTr(data){
		var dom = '<tr data-segment_id="'+ data.segment +'">';
		dom += '<td class="trfrom" data-trfid="'+ data.fid +'">'+ data.fname +'</td>';
		dom += '<td class="trto" data-trtid="'+ data.tid +'">'+ data.tname +'</td>';
		dom += '<td class="trdescription">'+ data.description +'</td>';
		dom += '<td class="trdistance">'+ data.distance +'</td>';
		dom += '<td><input type="text" class="form-control trcost" value="'+ data.cost +'"></td>';
		dom += '<td class="text-center"><button class="btn btn-danger btn-xs segmentTrDelete"><i class="fa fa-close"></i></button></td>';
		dom += '</tr>';
		return dom;
	}

	function loadSegments(callback){
		var $tbody = $('.modal_addMiddlePoint .segmentTable tbody');
		var from = $('.modal_addMiddlePoint .from').data('id');
		var to = $('.modal_addMiddlePoint .to').val();

		from = from != undefined ? from : '';
		to = to != undefined ? to : '';

		$.post("{{ url('/triproute/loadSegments') }}", {_token: _token, from: from, to: to}, function(e){
			dom = '';
			if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){

				$.each(e, function(i, k){
					dom += '<tr>';
					dom += '<td>'+ (++i) +'</td>';
					dom += '<td class="description">'+ k.description +'</td>';
					dom += '<td class="distance">'+ k.distance +'</td>';
					dom += '<td class="cost">'+ k.cost +'</td>';
					dom += '<td class="text-center"><button data-segment="'+ k.id +'" class="btn btn-xs btn-success addSegment">';
					dom += '<i class="fa fa-check"></i>';
					dom += '</button></td>';
					dom += '</tr>';
				});

			}else{
				dom = '<tr><th colspan="4" class="text-center">No segments found.</th></tr>';
			}
			$tbody.html(dom);

		}, 'json');
	}

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

	function selectVehicle(tvid){
		var $droppoints = $('.droppoints');

		$.post("{{ url('/triproute/selectVehicle') }}", {_token: _token, tvid: tvid}, function(e){
			availablePoints = [];
			routeCollection = [];
			dom = '';
			if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
				$.each(e, function(i, k){
					var dp = k.dropPoints;
					var segments = k.segments;
					availablePoints.push({
						tvlid: dp.tvlid,
						id:dp.id
					});

					var set = [];
					$.each(segments, function(l, m){
						set.push({
							sid: m.sid,
							tid: m.tid,
							fid: m.fid,
							fname: m.fname,
							tname: m.tname,
							distance: m.distance,
							description: m.description,
							cost: m.cost
						});
					});

					if(set.length > 0){
						routeCollection.push({
							tvlid: dp.tvlid,
							segments: set
						});
					}


					if(i == 0){
						dom += '<label data-tvlid="'+ dp.tvlid +'" data-id="'+ dp.id +'" data-name="'+ dp.name +'" class="label label-default point">'+ dp.name +'</label>';
					}else{
						dom += '<div class="btn-wrapper">';
						dom += '		<img class="arrow" src="{{ url("/images/right.png") }}" />';
						dom += '			<button class="btn btn-xs btn-round btn-primary addMiddlePoint" data-toggle="modal" data-tvlid="'+ dp.tvlid +'" data-target=".modal_addMiddlePoint"><i class="fa fa-plus"></i></button>';
						dom += '</div>';
						dom += '<label data-tvlid="'+ dp.tvlid +'" data-id="'+ dp.id +'" data-name="'+ dp.name +'" class="label label-default point">'+ dp.name +'</label>';
					}

				});
			}
			$droppoints.html(dom);
		}, 'json')
	}

	function loadTrips(callback){
		var $select = $('.trip');
		$.post("{{ url('/triproute/loadTrips') }}", {_token: _token}, function(e){
			var dom = '';
			if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
				$.each(e, function(i, k){
					dom += '<option value="'+ k.id +'">Trip #'+ k.id +'</option>';
				});
			}
			$select.html(dom);
			if(callback != undefined && typeof(callback) == 'function'){
				callback();
			}
		}, 'json');
	}

	function loadVehiclesTable(){
		$('.vnumber').html('...');
		$('.segmentDeleteWrapper').html('');
		$('.droppoints').html('');

		var trip = $('.trip').val();
		var $table = $('.vehiclesTable');

		var arrow = '<div class="arrow" style="display: inline-block; margin-top: 10px; padding: 0px 10px 0px 10px;">';
		arrow += '<i class="fa fa-long-arrow-right"></i>';
		arrow += '</div>';

		$.post("{{ url('/triproute/loadVehiclesTable') }}", {_token: _token, trip: trip}, function(e){
			var dom = '';
			if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
				$.each(e, function(i, k){
					var vehicle = k.vehicle;
					var items = k.items;
					var points = k.points;

					var pointsDom = '';
					$.each(points, function(p, q){

						if(p == 0){
							pointsDom += q.name;
						}else{
							pointsDom += arrow + q.name;
						}

					});

					dom += '<tr>';
					dom += '<td class="number" rowspan="'+ k.rowspan +'">'+ vehicle.number +'</td>';

					$.each(items, function(l, m){
						if(l == 0){
							dom += '<td>'+ m.name +'</td>';
							dom += '<td>'+ m.qty +'</td>';
							dom += '<td rowspan="'+ k.rowspan +'">'+ pointsDom +'</td>';
							dom += '<td rowspan="'+ k.rowspan +'">';
							dom += '	<button class="btn btn-xs btn-primary selectVehicle" value="'+ vehicle.id +'"><i class="fa fa-check"></i></button';
							dom += '</td>';
							dom += '</tr>';

						}else{

							dom += '<tr>';
							dom += '<td>'+ m.name +'</td>';
							dom += '<td>'+ m.qty +'</td>';
							dom += '</tr>';

						}
					});

					dom += '</tr>';
				});
			}else{
				dom = '<tr><th colspan="5">Sorry, No results found.</th></tr>';
			}
			$('tbody', $table).html(dom);
		}, 'json');
	}


});

</script>


@stop