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

<style type="text/css">
	*[draggable=true] {
		-moz-user-select:none;
		-khtml-user-drag: element;
		-webkit-user-drag: element;
		-khtml-user-select: none;
		-webkit-user-select: none;
		cursor: move;
	}
	.min-width-1000{
		min-width: 1000px;
	}
	.note, .vehicle{
		width: 100%;
	}
	.note .fa-close, .vehicle .fa-close{
		float: right;
	}
</style>

<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Shuttle</a></li>
	<li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Summary</a></li>
</ul>

<div class="tab-content">
	<div role="tabpanel" class="tab-pane fade in active" id="step1">
		
		<div class="row">
			<div class="col-xs-12 notification">
				
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 action" style="padding-top: 10px;">
				<div class="createWrapper" style="display: none;">
					<button class="btn btn-primary createShuttle">Create a Shuttle</button>
				</div>

				<div class="editWrapper" style="display: none;">
					<button class="btn btn-warning finishShuttle" style="display: none;">Finish editing this shuttle</button>
				</div>
			</div>
		</div>

		<div class="editor" style="display: none;">
			<div class="row">
				<div class="min-width-1000">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label">Delivery Notes</label>
							<div class="input-group">
								<select class="form-control notesList">
									<option value="">Select a delivery note.</option>
								</select>
								<span class="input-group-addon btn btn-primary addNote"><i class="fa fa-level-down"></i></span>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label">Vehicles</label>
							<div class="input-group">
								<select class="form-control vehiclesList">
									<option value="">Select a vehicle.</option>
								</select>
								<span class="input-group-addon btn btn-primary addVehicle"><i class="fa fa-level-down"></i></span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="min-width-1000 section1">
					<div class="col-xs-6 notes">
						
					</div>
					<div class="col-xs-6 vehicles">
						
					</div>
				</div>
				<input type="hidden" class="identifier" data-id="">
			</div>
		</div>

	</div>

	<style type="text/css">
		.tab-pane{
			padding-top: 20px;
		}
		.shuttle{
			width: 100%;
			padding-bottom: 10px;
		}
		.shuttle .title{
			background-color: #1abc9c;
			margin: 0px;
			padding: 5px;
			margin-bottom: 10px;
		}
	</style>

	<div role="tabpanel" class="tab-pane fade" id="step2">
		<div class="row">
			<div class="col-xs-12 shuttle_summary">

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

<style type="text/css">
	.other_input{
		width: 100%;
		height: 25px;
		margin: 0px;
		padding: 0px 5px 0px 5px;
		font-size: 12px;
	}
	.other_textarea{
		width: 100%;
		resize: vertical;
		font-size: 12px;
	}
</style>


@stop
@section('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');
		});

		$.dragdrop({
			section: '.section1',
			ondrop: function($from, $to){
				dropItem($from, $to);
			}
		});

		$(document).on('click', '.note input[type="text"]', function(){
			$(this).select();
		});

		loadNotesList();
		loadVehiclesList();
		init_shuttle();

		$(document).on('click', '.itemDelete', function(){
			var id = $(this).data('id');
			var shuttle_id = $(this).data('shuttle_id');

			var data = {
				id: id,
				shuttle_id: shuttle_id
			};
			bootbox.confirm('Are you sure you want to delete this record?', function(r){
				if(r){
					itemDelete(data);
				}
			});
		});

		$(document).on('click', '.savePallets', function(){
			var id = $(this).data('id');
			var shuttle_id = $(this).data('shuttle_id');
			var count = $(this).closest('.input-group').find('input[type="text"]').val();
			
			if($.isInt(count) && +count > 0){
				$.clearHighlights();

				var data = {
					id: id,
					shuttle_id: shuttle_id,
					count: +count
				};
				savePallets(data);
			}else{
				$(this).closest('.input-group').find('input[type="text"]').highlightElement({msg: 'Invalid pallet capacity'})
			}
		});

		$(document).on('click', '.addOtherItem', function(){
			var data = {
				id: $(this).data('id'),
				shuttle_id: $(this).data('shuttle_id')
			};
			addOtherItem(data);
		});

		$(document).on('click', '.saveOtherItem', function(){
			var $row = $(this).closest('tbody').find('[data-row="'+ $(this).data('id') +'"]');
			var category = $row.find('.other_category').val();
			var name = $row.find('.other_name').val();
			var qty = $row.find('.other_qty').val();
			var description = $row.find('.other_description').val();
			
			var data = {
				id: $(this).data('id'),
				shuttle_id: $(this).data('shuttle_id'),
				category: category,
				name: name,
				qty: qty,
				description: description
			};
			saveOtherItem(data);
		});

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

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

		$(document).on('click', '.editShuttle', function(){
			var data = {
				id: $(this).data('id'),
				'identifier': $('.identifier').data('id')
			};
			editShuttle(data);
		});

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

		$(document).on('click', '.vehicleDelete', function(){
			var data = {
				id: $(this).data('id'),
				shuttle_id: $(this).data('shuttle_id')
			};
			bootbox.confirm('Are you sure you want ot delete this vehicle?', function(r){
				if(r){
					vehicleDelete(data);
				}
			});
		});

		$('.finishShuttle').click(function(){
			var id = $(this).data('shuttle_id');
			finishShuttle(id);
		});


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

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

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

		function vehicleDelete(data){
			$.post("{{ url('/shuttlemanagement/vehicleDelete') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function noteDelete(data){
			$.post("{{ url('/shuttlemanagement/noteDelete') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function editShuttle(data){
			$('a[href="#step1"]').tab('show');
			$.post("{{ url('/shuttlemanagement/editShuttle') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(response){
					if(typeof(response) == 'object' && response.hasOwnProperty('method') && response.hasOwnProperty('shuttle')){
						var msg = 'You are currently editing shuttle <b>#'+ response.shuttle +'</b>';
						setNotification(msg);
						reset_environment(response.method, response.shuttle);
					}
				});
			}, 'json');
		}

		function shuttleSummary(){
			var $summary = $('.shuttle_summary');
			$.post("{{ url('/shuttlemanagement/shuttleSummary') }}", {_token: _token}, function(e){
				var dom = '';
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, shuttle){

						var vehicles = shuttle.vehicles;
						var notes = shuttle.notes;

						dom += '<div class="img-thumbnail form-group shuttle">';
						dom += '	<div class="alert title">';
						dom += '		<span><b>Shuttle #'+ shuttle.id +'</b></span>';
						dom += '		<div class="btn-wrapper pull-right">';
						dom += '			<button class="btn btn-xs btn-warning editShuttle" data-id="'+ shuttle.id +'"><i class="fa fa-pencil"></i></button>';
						dom += '			<button class="btn btn-xs btn-danger deleteShuttle" data-id="'+ shuttle.id +'"><i class="fa fa-close"></i></button>';
						dom += '		</div>';
						dom += '	</div>';

						if(Object.keys(vehicles).length > 0){
							$.each(vehicles, function(i, vehicle){

								dom += '<div class="row">';
								dom += '	<div class="col-xs-12" style="margin-top: 10px;">';
								dom += '		<div class="col-xs-6">';
								if(Object.keys(vehicle.items).length > 0){
									dom += '		<b>'+ vehicle.number +'</b> Items Loaded in <b>'+ vehicle.pallet +'</b> pallet(s)';
									dom += '		<table class="table table-bordered table-condensed" style="margin-top: 10px;">';
									dom += '			<tbody>'
									$.each(vehicle.items, function(i, item){
										dom += '			<tr>';
										dom += '				<td>Delivery note #'+ item.delivery_id +' - '+ item.item_name +'</td>';
										dom += '				<td>'+ item.qty +'</td>';
										dom += '			</tr>';
									});
									dom += '			</tbody>';
									dom += '		</table>';
								}else{
									dom += 'no items added for <b>'+ vehicle.number +'</b>';
								}
								dom += '		</div>';


								dom += '		<div class="col-xs-6">';
								if(Object.keys(vehicle.other_items).length > 0){
									dom += '		Other Items';
									dom += '		<table class="table table-bordered table-condensed"style="margin-top: 10px;">';
									$.each(vehicle.other_items, function(i, other){
										dom += '		<tr>';
										dom += '			<td>'+ other.category +' - '+ other.name +'</td>';
										dom += '			<td>'+ other.description +'</td>';
										dom += '		</tr>';
									});
									dom += '		</table>';
								}else{
									dom += '-- no other items added --';
								}
								dom += '		</div>';
								dom += '	</div>';
								dom += '</div>';


								dom += '<div class="col-xs-12">';
								if(Object.keys(vehicle.locations).length > 0){
									$.each(vehicle.locations, function(i, location){
										dom += '	<div class="img-thumbnail">';
										dom += '		'+ location.txtFrom +' - '+ location.txtTo +' ';
										dom += '	</div>';
									});
								}
								dom += '</div>';
							});
							
						}else{
							dom += '-- no vehicles added --';
						}
						
						dom += '</div>';
					});

				}else{
					dom = '-- no shuttles added --';
				}
				$summary.html(dom);
			}, 'json');
		}

		function throwError(e, callback){
			if(e != undefined && e != null && e != ''){
				if(e.hasOwnProperty('errors')){
					$.each(e.errors, function(k, msg){
						$.notify.error('<b>' + msg + '</b>');
						return false;
					});
				}else{
					if(e.hasOwnProperty('ok') && e.hasOwnProperty('msg') && e.ok == 0){
						$.notify.error('<b>' + e.msg + '</b>');
					}else{
						callback(e);
					}
				}
			}
		}

		function throwResponse(e, callback){
			if(e != undefined && typeof(e) == 'object'){
				if(e.hasOwnProperty('prompt') && typeof(e.prompt) == 'object' && e.prompt.hasOwnProperty('msg')){

					bootbox.confirm(e.prompt.msg, function(r){
						if(r){
							if(callback != undefined && typeof(callback) == 'function'){
								callback();
							}
						}
					});
				}

				if(e.hasOwnProperty('response')){

					if(typeof(e.response) == 'object' && e.response.hasOwnProperty('ok') && e.response.hasOwnProperty('msg') && e.response.msg.length > 0){
						if(e.response.ok == 1){
							$.notify.success('<b>'+ e.response.msg +'</b>');
						}else if(e.response.ok == 0){
							$.notify.error('<b>'+ e.response.msg +'</b>');
						}
					}
					if(callback != undefined && typeof(callback) == 'function'){
						callback();
					}
				}
			}
		}

		function saveOtherItem(data){
			$.post("{{ url('/shuttlemanagement/saveOtherItem') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function deleteOtherItem(data){
			$.post("{{ url('/shuttlemanagement/deleteOtherItem') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function addOtherItem(data){
			$.post("{{ url('/shuttlemanagement/addOtherItem') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function addVehicle(){
			var data = {
				id: $('.vehiclesList').val(),
				shuttle_id: $('.identifier').data('id')
			};
			$.post("{{ url('/shuttlemanagement/addVehicle') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function addNote(){
			var data = {
				id: $('.notesList').val(),
				shuttle_id: $('.identifier').data('id')
			};
			$.post("{{ url('/shuttlemanagement/addNote') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function createShuttle(){
			$.post("{{ url('/shuttlemanagement/createShuttle') }}", {_token: _token}, function(e){
				throwResponse(e, function(){
					init_shuttle();
				});
			}, 'json');
		}

		function deleteShuttle(data){
			$.post("{{ url('/shuttlemanagement/deleteShuttle') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(response){
					if(typeof(response) == 'object' && response.hasOwnProperty('method')){
						if(response.method == 'create'){
							$('.notification').html('');
							reset_environment('create');
						}else if(response.method == 'edit' && response.hasOwnProperty('shuttle')){
							var msg = 'You are currently editing shuttle <b>#'+ e.shuttle +'</b>';
							setNotification(msg);
							reset_environment('edit', response.shuttle);
						}else if(response.method == 'update' && response.hasOwnProperty('shuttle')){
							var msg = 'You are currently editing shuttle <b>#'+ e.shuttle +'</b>';
							setNotification(msg);
							reset_environment('update', response.shuttle);
						}
						shuttleSummary();
					}
				});
			}, 'json');
		}

		function finishShuttle(id){
			$.post("{{ url('/shuttlemanagement/finishShuttle') }}", {_token: _token, id: id}, function(e){
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('method') && e.hasOwnProperty('shuttle')){
					$('.notification').html('');
					reset_environment(e.method, e.shuttle);
				}
				throwResponse(e);
			}, 'json');	
		}

		function setNotification(msg, type){
			type = type || 'info';
			msg = msg || '';

			var dom = '<div class="alert alert-'+ type +' alert-dismissable fade in" style="margin-bottom: 0px;">';
			dom += '	<i class="close" data-dismiss="alert" aria-label="close">&times;</i>';
			dom += 		msg;
			dom != '</div>';
			$('.notification').html(dom);
		}

		function init_shuttle(){
			$.post("{{ url('/shuttlemanagement/init_shuttle') }}", {_token: _token}, function(e){
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('method')){
					if(e.method == 'edit' && e.hasOwnProperty('shuttle')){

						var msg = 'You are currently editing shuttle <b>#'+ e.shuttle +'</b>';
						setNotification(msg);
						reset_environment(e.method, e.shuttle);

					}else if(e.method == 'create'){
						$('.notification').html('');
						reset_environment(e.method);
					}
				}
			}, 'json');
		}

		function reset_environment(method, shuttle){
			$('.editor').hide();
			$('.identifier').data('id', '');
			if(typeof(method) == 'string'){

				if(method == 'update' && shuttle != undefined && $.isInt(shuttle) && +shuttle > 0){
					$('.identifier').data('id', shuttle);

					$('.createWrapper').hide();
					$('.finishShuttle').data('shuttle_id', '');
					$('.finishShuttle').hide();

					$('.editWrapper').show();

					$('.editor').show();
				}else if(method == 'edit' && shuttle != undefined && $.isInt(shuttle) && +shuttle > 0){
					$('.identifier').data('id', shuttle);
					preload_shuttle(shuttle);
					
					$('.createWrapper').hide();
					$('.finishShuttle').data('shuttle_id', shuttle);
					$('.finishShuttle').show();

					$('.editWrapper').show();

					$('.editor').show();
				}else if(method == 'create'){

					$('.finishShuttle').show();
					$('.finishShuttle').data('shuttle_id', '');

					$('.editWrapper').hide();
					$('.createWrapper').show();

					$('.editor').hide();
				}
			}
		}

		function savePallets(data){
			$.post("{{ url('/shuttlemanagement/savePallets') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function itemDelete(data){
			$.post("{{ url('/shuttlemanagement/itemDelete') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function dropItem($from, $to){
			var shuttle_id = $from.data('shuttle_id');
			var shuttle_delivery_id = $from.data('id');
			var shuttle_vehicle_id = $to.data('id');
			var delivery_item_id = $from.data('delivery_item_id');
			var qty = $('input', $from).val();

			var data = {
				shuttle_id: shuttle_id,
				shuttle_delivery_id: shuttle_delivery_id,
				shuttle_vehicle_id: shuttle_vehicle_id,
				delivery_item_id: delivery_item_id,
				qty: qty
			};

			addItem(data);
		}

		function addItem(data){
			$.post("{{ url('/shuttlemanagement/addItem') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(shuttle){
					preload_shuttle(shuttle);
				});
			}, 'json');
		}

		function loadNotesList(){
			var $select = $('.notesList');
			$.post("{{ url('/shuttlemanagement/loadNotesList') }}", {_token: _token}, function(e){
				var dom = '<option value="">Select a delivery note.</option>';
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<option value="'+ k.id +'">Delivery note '+ k.id +'</option>';
					});
				}
				$select.html(dom);
			}, 'json');
		}

		function loadVehiclesList(){
			var $select = $('.vehiclesList');
			$.post("{{ url('/shuttlemanagement/loadVehiclesList') }}", {_token: _token}, function(e){
				var dom = '<option value="">Select a vehicle.</option>';
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<option value="'+ k.id +'">'+ k.name +' - '+ k.number +'</option>';
					});
				}
				$select.html(dom);
			}, 'json');
		}

		
		function preload_shuttle(id){
			$.post("{{ url('/shuttlemanagement/preload_shuttle') }}", {_token: _token, id: id}, function(e){
				if(typeof(e) == 'object' && e.hasOwnProperty('vehicles') && e.hasOwnProperty('notes')){
					var $notes = $('.notes');
					var $vehicles = $('.vehicles');

					var notes = e.notes;
					var vehicles = e.vehicles;

					var dom = '';
					if(typeof(notes) == 'object' && Object.keys(notes).length > 0){
						$.each(notes, function(i, note){
							dom += '<div class="img-thumbnail form-group note">';
							dom += '	<div class="heading">';
							dom += '		'+ note.txtFrom +' - '+ note.txtTo +' <span class="pull-right">Note #'+ note.delivery_id +'<i class="fa fa-close btn btn-xs text-danger noteDelete" data-id="'+ note.id +'" data-shuttle_id="'+ note.shuttle_id +'"></i></span>';
							dom += '	</div>';
							dom += '	<div class="body" style="padding-top: 10px;">';
							dom += '		<table class="table table-bordered" style="margin-bottom: 0px;">';
							dom += '			<thead>';
							dom += '				<tr>';
							dom += '					<th>Item Name</th>';
							dom += '					<th>Qty</th>';
							dom += '					<th class="text-center"></th>';
							dom += '				</tr>';
							dom += '			</thead>';
							dom += '			<tbody>';

							if(Object.keys(note.items).length > 0){
								$.each(note.items, function(i, item){
									dom += '		<tr>';
									dom += '			<td>'+ item.item_name +'</td>';
									dom += '			<td style="width: 80px;">'+ item.qty +'</td>';
									dom += '			<td style="width: 130px;">';
									dom += '				<div class="input-group drag" draggable="true" data-id="'+ note.id +'" data-delivery_item_id="'+ item.id +'" data-shuttle_id="'+ note.shuttle_id +'">';
									dom += '					<input type="text" class="form-control" value="'+ item.qty +'">';
									dom += '					<span class="input-group-addon"><i class="fa fa-arrows-alt"></i></span>';
									dom += '				</div>';
									dom += '			</td>';
									dom += '		</tr>';
								});
							}
							
							dom += '			</tbody>';
							dom += '		</table>';
							dom += '	</div>';
							dom += '</div>';
						});
					}
					$notes.html(dom);

					var dom = '';
					if(typeof(vehicles) == 'object' && Object.keys(vehicles).length > 0){
						$.each(vehicles, function(i, vehicle){
							dom += '<div class="img-thumbnail form-group vehicle drop" data-id="'+ vehicle.id +'" data-shuttle_id="'+ vehicle.shuttle_id +'">';
							dom += '	<div class="heading">';
							dom += '		'+ vehicle.number +'<span class="pull-right">'+ vehicle.name +'<i class="fa fa-close btn btn-xs text-danger vehicleDelete" data-id="'+ vehicle.id +'" data-shuttle_id="'+ vehicle.shuttle_id +'"></i></span>';
							dom += '	</div>';
							dom += '	<div class="body" style="padding-top: 10px;">';

							if(Object.keys(vehicle.items).length > 0){
								dom += '	<div class="form-group">';
								dom += '		<table class="table table-bordered table-condensed">';
								dom += '			<thead>';
								dom += '				<tr>';
								dom += '					<th style="width: 70px;">Note #</th>';
								dom += '					<th>Item Name</th>';
								dom += '					<th>Qty</th>';
								dom += '					<th class="text-center" style="width: 40px;"><i class="fa fa-gear"></i></th>';
								dom += '				</tr>';
								dom += '			</thead>';
								dom += '			<tbody>';

								$.each(vehicle.items, function(i, item){
									dom += '		<tr>';
									dom += '			<td>'+ item.delivery_id +'</td>';
									dom += '			<td>'+ item.item_name +'</td>';
									dom += '			<td>'+ item.qty +'</td>';
									dom += '			<td class="text-center">';
									dom += '				<button class="btn btn-xs btn-danger itemDelete" data-id="'+ item.id +'" data-shuttle_id="'+ vehicle.shuttle_id +'"><i class="fa fa-lg fa-trash"></i></button>';
									dom += '			</td>';
									dom += '		</tr>';
								});

								dom += '			</tbody>';
								dom += '		</table>';
								dom += '	</div>';
							}else{
								dom += '<div class="img-thumbnail form-group" style="width: 100%;">';
								dom += '-- no items added --';
								dom += '</div>';
							}

							if(Object.keys(vehicle.locations).length > 0){
								dom += '<div class="img-thumbnail form-group" style="width: 100%;">';
								var size = Object.keys(vehicle.locations).length;
								$.each(vehicle.locations, function(i, location){
									if((++i) == size){
										dom += '<span>' + location.txtFrom + ' - ' + location.txtTo + '</span>';
									}else{
										dom += '<span>' + location.txtFrom + ' - ' + location.txtTo + ', </span>';
									}
								});
								dom += '</div>';
							}


							dom += '<div class="form-group">';
							dom += '	<label class="control-label">Pallets</label>';
							dom += '	<div class="input-group">';
							dom += '		<input type="text" class="form-control palletCount" value="'+ vehicle.pallet +'" />';
							dom += '		<span class="input-group-addon" style="padding:0px 1px 0px 1px;">';
							dom += '			<button class="btn btn-sm btn-primary savePallets" data-shuttle_id="'+ vehicle.shuttle_id +'" data-id="'+ vehicle.id +'">Save Pallets</button>';
							dom += '		</span>';
							dom += '	</div>';
							dom += '</div>';


							dom += '<div class="form-group" style="margin-bottom: 0px;">';
							dom += '	<table class="table table-bordered table-condensed" style="margin-bottom: 0px;">';
							dom += '		<thead>';
							dom += '			<tr>';
							dom += '				<th colspan="4">';
							dom += '					Other Items';
							dom += '					<button class="btn btn-xs btn-primary pull-right addOtherItem" data-id="'+ vehicle.id +'" data-shuttle_id="'+ vehicle.shuttle_id +'"><i class="fa fa-plus"></i></button>';
							dom += '				</th>';
							dom += '			</tr>';
							dom += '		</thead>';
							dom += '		<tbody>';

							if(Object.keys(vehicle.other_items).length > 0){
								
								$.each(vehicle.other_items, function(i, item){
									
									dom += '	<tr data-row="'+ item.id +'">';
									dom += '		<td width="150px;">';

									dom += '			<select class="other_input other_category">';
									dom += '				<option value="">Select a category.</option>';
									if(Object.keys(item.categories).length > 0){
										$.each(item.categories, function(i, category){
											if(category.selected == 1){
												dom += '	<option value="'+ category.category_id +'" selected>'+ category.category +'</option>';
											}else{
												dom += '	<option value="'+ category.category_id +'">'+ category.category +'</option>';
											}
										});
									}
									dom += '			</select>';

									dom += '		</td>';
									dom += '		<td><input type="text" class="other_input other_name" value="'+ item.name +'" placeholder="Item name.."></td>';
									dom += '		<td width="80px;"><input type="text" class="other_input other_qty" value="'+ item.qty +'" placeholder="Qty.."></td>';
									dom += '		<td style="width: 65px;" class="text-center" rowspan="2">';
									dom += '			<button class="btn btn-xs btn-primary saveOtherItem" data-id="'+ item.id +'" data-shuttle_id="'+ vehicle.shuttle_id +'"><i class="fa fa-check"></i></button>';
									dom += '			<button class="btn btn-xs btn-danger deleteOtherItem" data-id="'+ item.id +'" data-shuttle_id="'+ vehicle.shuttle_id +'"><i class="fa fa-trash fa-lg"></i></button>';
									dom += '		</td>';
									dom += '	</tr>';
									dom += '	<tr data-row="'+ item.id +'">';
									dom += '		<td colspan="3">';
									dom += '			<textarea class="other_textarea other_description" rows="1" placeholder="Item description..">'+ item.description +'</textarea>';
									dom += '		</td>';
									dom += '	</tr>';

								});
							}

							dom += '		</tbody>';
							dom += '	</table>';
							dom += '</div>';

							dom += '	</div>';
							dom += '</div>';
						});
					}
					$vehicles.html(dom);
				}

				shuttleSummary();
			}, 'json');
		}

	});
</script>
@stop