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

<style type="text/css">
	.img-thumbnail h4{
		margin-top: 4px;
	}
	.img-thumbnail .progress{
		margin-bottom: 4px;
	}
	.img-thumbnail .input-group .input-group-addon{
		cursor: move;
	}
	.img-thumbnail .progress-bar span{
		display: inline;
	}

	*[draggable=true] {
		-moz-user-select:none;
		-khtml-user-drag: element;
		-webkit-user-drag: element;
		-khtml-user-select: none;
		-webkit-user-select: none;
		cursor: move;
	}

	.iclass{
		transform: scale(3,1);
	}

	.reset_all{
		/*padding-bottom: 0px;*/
		/*padding: 10px 5px 0px 5px !important;*/
		/*line-height: 0px !important;*/
	}

	.record_status{
		cursor: default !important;
		font-weight: bold;
	}

</style>


<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Load Vehicles</a></li>
	<li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Create Route</a></li>
	<li role="presentation"><a href="#step3" aria-controls="step3" 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-md-12">
				<div style="margin-top: 30px; margin-bottom: 0px;">
					<div class="form-group" style="display: inline; float: left; margin-right: 20px;">
						<button class="btn btn-primary manageOrders"><i class="fa fa-plus"></i> Add New Order</button>
					</div>
					<div class="form-group">
						<h3 style="display: inline;"><label style="margin-right: 10px;" disabled class="label label-default pull-left record_status">You are creating a new trip.</label></h3>
					</div>
					<div class="reset_all_wrapper"></div>
				</div>
			</div>
		</div>

		<!-- first section -->
		<div class="row" style="margin-top: 20px; min-width: 992px;">
			<div class="col-xs-6">
				<div class="form-group">
					<label class="control-label">Orders</label>
					<div class="input-group">
						<select class="form-control orderList">
							<option>Please select an option</option>
						</select>
						<span class="input-group-addon btn btn-primary addOrder">
							<i class="fa fa-level-down"></i>
						</span>
					</div>
				</div>
				<div class="orders section1">
					
				</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 vehicleList">
							<option>Please select an option</option>
						</select>
						<span class="input-group-addon btn btn-primary addVehicle">
							<i class="fa fa-level-down"></i>
						</span>
					</div>
				</div>
				<div class="vehicles section1">
					
				</div>
			</div>
		</div>
		<!-- end of first section -->
	</div>

	<div role="tabpanel" class="tab-pane fade" id="step2">
		<div class="row">
			<div class="col-md-12">
				<div style="margin-top: 30px; margin-bottom: 0px;">
					<h3><label style="margin-right: 10px;" disabled class="label label-default pull-left record_status">You are creating a new trip.</label></h3>
					<div class="reset_all_wrapper"></div>
				</div>
			</div>
		</div>

		<!-- second section -->
		<div class="row" style="margin-top: 20px;">
			<div class="col-md-4">
				<div class="form-group">
					<h3 style="margin-top: 0px;">Create route for vehicle</h3>
					<select class="form-control loadedVehicles">
						<option>No vehicles added.</option>
					</select>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="table-responsive">
					<table class="table table-bordered loadedOrders">
						<thead>
							<tr>
								<td colspan="4" class="text-center">Orderes</td>
							</tr>
							<tr>
								<td width="40px">#</td>
								<td width="100px">Order</td>
								<td>Product</td>
								<td width="100px">Qty</td>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
			<div class="col-md-6">
				<div class="table-responsive">
					<table class="table table-bordered loadedVehicleDetails">
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-4">
				<div class="form-group">
					<label>Starting Location</label>
					<div class="input-group startingLocationWrapper" draggable="true">
						<select class="form-control startingLocation">
							<option>-</option>
						</select>
						<span class="input-group-addon"><i class="fa fa-arrows"></i></span>
					</div>
				</div>
			</div>	
		</div>

		<div class="row">
			<div class="col-xs-4 section2">
				<div class="col-xs-12 img-thumbnail form-group" style="min-height: 150px;">
					<h3 style="margin-top: 0px;"><small>Drop points</small></h3>
					<div class="dropLocations">
						
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-primary save">Save All</button>
				</div>
			</div>
			<div class="col-xs-8 section2">
				<div class="form-group img-thumbnail col-xs-12 drop" style="min-height: 150px;">
					<h3 style="margin-top: 0px;"><small>Drag and drop locations here</small></h3>
					<div class="routes" style="padding-bottom: 10px;">
						
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-primary" data-toggle="tooltip" title="Copy Route"><i class="fa fa-copy"></i></button>
					<button class="btn btn-warning clearRoute" data-toggle="tooltip" title="Clear route"><i class="fa fa-trash"></i></button>
				</div>
			</div>
			
		</div>
		<!-- end of second section -->
	</div>

	<div role="tabpanel" class="tab-pane fade" id="step3">
		<!-- section three -->
		<div class="row">
			<div class="col-md-12">
				<h3>Summary</h3>
				<div class="table-responsive">
					<table class="table table-bordered summary">
						<thead>
							<tr>
								<th width="80px">#</th>
								<th>Vehicle</th>
								<th>Items</th>
								<th width="80px">Qty</th>
								<th>Drop points</th>
								<th class="text-center" width="80px"><i class="fa fa-gear"></i></th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- end of section three -->
	</div>
</div>

<!-- manage orders modal -->
<div class="modal fade" id="modal_manageOrders" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Manage Orders</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label class="control-label">Location</label>
							<select class="form-control modal_manageOrders_location" name="modal_manageOrders_location"></select>
						</div>
						<div class="form-group">
							<label class="control-label">Order Volume</label>
							<input type="text" class="form-control modal_manageOrders_volume" name="modal_manageOrders_volume">
						</div>
						<div class="form-group">
							<label class="control-label">Order Weight</label>
							<input type="text" class="form-control modal_manageOrders_weight" name="modal_manageOrders_weight">
						</div>
					</div>
					<div class="col-md-8">
						<div class="form-group">
							<div class="table-responsive" style="max-height: 400px;">
								<table class="table table-bordered table-condensed modal_manageOrders_orders" style="margin-top: 25px;">
									<thead>
										<tr>
											<th>Order #</th>
											<th>Location</th>
											<th>Order Volume</th>
											<th>Order Weight</th>
											<th>Available Items</th>
											<th class="text-center" style="width: 80px;"><i class="fa fa-gear"></i></th>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<div class="form-group modal_manageOrders_saveWrapper" style="display: none;">
					<button class="btn btn-primary modal_manageOrders_save">Save</button>
				</div>
				<div class="form-group modal_manageOrders_updateWrapper" style="display: none;">
					<button class="btn btn-warning clear modal_manageOrders_update">Update</button>
					<button class="btn btn-info modal_manageOrders_cancel">Cancel</button>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end of manage orders modal -->

<!-- add new item modal -->
<div class="modal fade" id="modal_updateOrder" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
			</div>
			<div class="modal-body">

				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label class="control-label">Location</label>
							<select class="form-control clear modal_updateOrder_od_location" name="modal_updateOrder_od_location"></select>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label class="control-label">Tot. Volume</label>
							<input type="text" class="form-control clear modal_updateOrder_od_volume" name="modal_updateOrder_od_volume" />
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label class="control-label">Tot. Weight</label>
							<input type="text" class="form-control clear modal_updateOrder_od_weight" name="modal_updateOrder_od_weight" />
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="form-group">
							<button class="btn btn-warning modal_updateOrder_updateOrderDetails">Update Order Details</button>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="img-thumbnail" style="width: 100%; padding-top: 20px;">
							<div class="col-md-6">
								<div class="form-group">
									<label class="control-label">Select Item</label>
									<select class="form-control modal_updateOrder_item" name="modal_updateOrder_item"></select>
								</div>
								<div class="form-group">
									<label class="control-label">Qty</label>
									<input type="text" class="form-control modal_updateOrder_qty" name="modal_updateOrder_qty" />
								</div>
								<div class="form-group">
									<div class="table-responsive">
										<table class="table table-bordered">
											<tr>
												<th width="200px;">ID</th><td class="modal_updateOrder_idTxt"></td>
											</tr>
											<tr>
												<th width="200px;">Name</th><td class="modal_updateOrder_nameTxt"></td>
											</tr>
											<tr>
												<th width="200px;">Total Weight</th><td class="modal_updateOrder_totWeightTxt"></td>
											</tr>
											<tr>
												<th width="200px;">Tot. Volume</th><td class="modal_updateOrder_totVolumeTxt"></td>
											</tr>
										</table>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="table-responsive" style="margin-top: 25px; max-height: 300px;">
									<table class="table table-bordered table-condensed modal_updateOrder_orderItems">
										<thead>
											<tr>
												<th>#</th>
												<th>Item Name</th>
												<th>Qty</th>
												<th class="text-center" style="width: 80px;"><i class="fa fa-gear"></i></th>
											</tr>
										</thead>
										<tbody></tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<div class="form-group saveWrapper" style="display: none;">
					<button class="btn btn-primary modal_updateOrder_add"><i class="fa fa-plus"></i> Add</button>
				</div>
				<div class="form-group updateWrapper" style="display: none;">
					<button class="btn btn-warning clear modal_updateOrder_update">Update</button>
					<button class="btn btn-info modal_updateOrder_cancel">Cancel</button>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end of add new modal -->

@stop
@section('script')

@include('trip::scripts.loadVehicle');

@include('trip::scripts.createRoute');

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

		window.setTimeout(function(){
			$('.addOrder').trigger('click');
			$('.addVehicle').trigger('click');

			$('.manageOrders').trigger('click');
		}, 1000);
		window.setTimeout(function(){
			// $('#modal_updateOrder').modal('show');
			// $('.btn_newItem').trigger('click');
		}, 1500);

		resetForm('save');

		$(document).ajaxStart(function() {
			$('button, .btn').data('loading-text', '...');
			$('button, .btn').button('loading');
		}).ajaxStop(function(){
			$('button, .btn').button('reset');
		});
		
		$('[data-toggle="tooltip"]').tooltip();		
		
		loadTripSummary();
		$('a[href="#step3"]').click(function(){
			loadTripSummary();
		});

		loadItems(function(){
			update_modal_updateOrder_summary();
		});

		loadModalLocations();

		$(document).on('change', '.oitemchk', function(){
			
		});
		
		$(document).on('click', '.toggle_expander', function(){
			$('.expander', $(this).closest('.img-thumbnail')).slideToggle();
		});

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

			bootbox.confirm("Are you sure you want to delete this record?", function(r){ 
				if(r){
					deleteTrip(id);
				}
			});
		});

		$(document).on('click', '.reset_all', function(){
			$('.reset_all').remove();
			config = {};
			$('.save').data('id', '');
			$('.orders').html('');
			$('.vehicles').html('');
			$('a[href="#step1"]').tab('show');
			$('.record_status').html('You are creating a new trip');
		});

		$(document).on('click', '.edit', function(){
			$('a[href="#step1"]').tab('show');

			var trip_id = $(this).data('id');
			if(trip_id != undefined && $.isInt(trip_id)){
				$('.save').data('id', trip_id);
				preLoadVehicles(trip_id);
				preLoadOrders(trip_id);
				$('.record_status').html('You are currently editing trip #' + trip_id);
				var btn = '<button class="btn btn-primary reset_all">Cancel and create a new Trip.</button>';
				$('.reset_all_wrapper').html(btn);
			}
		});

		$(document).on('click', '.orders input:text', function(){
			$(this).select();
		});

		$(document).on('click', '.btn_newItem', function(){
			var oid = $('.span_order', $(this).closest('.img-thumbnail')).data('order_id');
			var lid = $('.location', $(this).closest('.img-thumbnail')).data('location_id');
			$('#modal_updateOrder .modal_updateOrder_add').data('modal_updateOrder_orderID', oid);
			$('#modal_updateOrder .modal_updateOrder_updateOrderDetails').val(oid);
			$('#modal_updateOrder .modal_updateOrder_od_location').val(lid);
			loadModalItems(oid);
			$('#modal_updateOrder').modal('show');
		});

		$(document).on('click', '.modal_updateOrder_editItem', function(){
			resetForm('update');

			$('#modal_updateOrder .modal_updateOrder_update').val($(this).data('id'));
			$('#modal_updateOrder .modal_updateOrder_update').data('order_id', $(this).data('order_id'));
			$('.modal_updateOrder_item').val($(this).data('item_id'));
			$('.modal_updateOrder_qty').val($(this).data('qty'));

			update_modal_updateOrder_summary();
		});

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

		

		$('.modal_updateOrder_item').change(function(){
			update_modal_updateOrder_summary();
		});

		$('.modal_updateOrder_add').click(function(){
			addNewItem($(this));
		});

		$('#modal_updateOrder').on('hidden.bs.modal', function(){
			$('#modal_updateOrder .modal_updateOrder_qty').val('');
			$('.modal_updateOrder .modal_updateOrder_add').data('modal_updateOrder_orderID', '');
			update_modal_updateOrder_summary();
		});

		$('.modal_updateOrder_qty').keyup(function(){
			update_modal_updateOrder_summary();
		});

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

		$('.modal_updateOrder_update').click(function(){
			var data = {
				id: $(this).val(),
				oid: $(this).data('order_id'),
				modal_updateOrder_item: $('.modal_updateOrder_item').val(),
				modal_updateOrder_qty: $('.modal_updateOrder_qty').val() 
			};
			updateOrder_updateItems(data);
		});

		$('.modal_updateOrder_updateOrderDetails').click(function(){
			var data = {
				oid: $(this).val(),
				modal_updateOrder_od_location: $('.modal_updateOrder_od_location').val(),
				modal_updateOrder_od_weight: $('.modal_updateOrder_od_weight').val(),
				modal_updateOrder_od_volume: $('.modal_updateOrder_od_volume').val()
			};
			updateOrderDetails(data);
		});

		function updateOrderDetails(data){
			if(data.oid != undefined && data.oid != ''){
				var $imgThumbnail = $('.orders .img-thumbnail .span_order[data-order_id="'+ data.oid +'"]').closest('.img-thumbnail');
				$.post("{{ url('/trip/updateOrderDetails') }}", {_token: _token, data: data}, function(e){
					$.highlightOrThrow(e, function(){
						//refresh order
						resetForm('save');
						loadModalItems(data.oid);
						reloadOrder($imgThumbnail, data.oid);
						// $('#modal_updateOrder').modal('hide');
					});
				}, 'json');
			}else{
				$.notify.error('Invalid order selected 004.');
			}
		}

		function loadModalLocations(){
			var $select = $('.modal_updateOrder_od_location, .modal_manageOrders_location');
			$.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){
						dom += '<option value="'+ k.id +'">'+ k.name +'</option>';
					});
				}
				$select.html(dom);
			}, 'json');
		}

		function deleteOrderItem(id, oid){
			if(oid != undefined && oid != ''){
				var $imgThumbnail = $('.orders .img-thumbnail .span_order[data-order_id="'+ oid +'"]').closest('.img-thumbnail');
				$.post("{{ url('/trip/deleteOrderItem') }}", {_token: _token, id: id, oid: oid}, function(e){
					$.highlightOrThrow(e, function(){
						//refresh order
						resetForm('save');
						loadModalItems(oid);
						reloadOrder($imgThumbnail, oid);
						// $('#modal_updateOrder').modal('hide');
					});
				}, 'json');
			}else{
				$.notify.error('Invalid order selected 005.');
			}
		}

		function updateOrder_updateItems(data){
			if(data.oid != undefined && data.oid != ''){
				var $imgThumbnail = $('.orders .img-thumbnail .span_order[data-order_id="'+ data.oid +'"]').closest('.img-thumbnail');
				$.post("{{ url('/trip/updateItem') }}", {_token: _token, data: data}, function(e){
					$.highlightOrThrow(e, function(){
						//refresh order
						resetForm('save');
						loadModalItems(data.oid);
						reloadOrder($imgThumbnail, data.oid);
						// $('#modal_updateOrder').modal('hide');
					});
				}, 'json');
			}else{
				$.notify.error('Invalid order selected 001.');
			}
		}

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

		function loadModalItems(id){
			var $tbody = $('.modal_updateOrder_orderItems tbody');
			if(id != undefined && $.isInt(id)){
				$.post("{{ url('/trip/loadModalItems') }}", {_token: _token, id: id}, function(e){
					var dom = '';
					if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('order') && e.hasOwnProperty('items')){

						$('.modal_updateOrder_od_location').val(e.order.location_id);
						$('.modal_updateOrder_od_volume').val(e.order.orderVolume);
						$('.modal_updateOrder_od_weight').val(e.order.orderWeight);

						$.each(e.items, function(i, k){
							dom += '<tr>';
							dom += '<td>'+ (++i) +'</td>';
							dom += '<td>'+ k.name +'</td>';
							dom += '<td>'+ k.qty +'</td>';
							dom += '<td>';
							dom += '<div class="btn-group">';
							dom += '<button class="btn btn-sm btn-warning modal_updateOrder_editItem" data-id="'+ k.id +'" data-order_id="'+ id +'" data-item_id="'+ k.item_id +'" data-qty="'+ k.qty +'"><i class="fa fa-pencil"></i></button>';
							dom += '<button class="btn btn-sm btn-danger modal_updateOrder_deleteItem" data-id="'+ k.id +'" data-order_id="'+ id +'"><i class="fa fa-close"></i></button>';
							dom += '</div>';
							dom += '</td>';
							dom += '</tr>';
						});
					}else{
						dom = '<tr><th class="text-center" colspan="4">Sorry, No items added.</th></tr>';
					}
					$tbody.html(dom);
				}, 'json');
			}else{
				$.notify.error('<b>Invalid order selected 002.</b>');
			}
		}

		function reloadOrder($imgThumbnail, id){
			if(id != undefined && id != '' && $.isInt(id)){
				$.post("{{ url('/trip/getOrder') }}", {_token: _token, id: +id}, function(e){
					var dom = '';
					k = e[0];
					if(typeof(k) == 'object' && k.hasOwnProperty('order') && k.hasOwnProperty('items') && k.hasOwnProperty('total')){

						var total = k.total;

						dom += '	<h4><span class="location" data-location_id="'+ k.order.location_id +'">'+ k.order.location +'</span><small class="pull-right">Order <span class="span_order" data-order_id="'+ k.order.id +'">'+ k.order.id +'</span><i class="btn btn-xs text-danger thumbnailDelete fa fa-close pull-right"></i></small></h4>';

						dom += '	<div class="order_summary" style="width: 100%; position: relative; padding-left: 20px;">';
						dom += '		<button class="btn btn-primary btn-xs toggle_expander" style="padding: 0px 5px 0px 5px; position: absolute; left: 0px; height: 100%;"><i class="fa fa-arrows-v fa-lg" aria-hidden="true"></i></button>';
						dom += '		<div class="table-responsive dragSummary" draggable="true">';
						dom += '			<table class="table table-bordered" style="margin-bottom: 0px;">';
						dom += '				<tr>';
						dom += '					<th style="border: none;">Items : '+ total.count +'</th>';
						dom += '					<th style="border: none;" width="140;">Tot. Vol : <span class="remVolume">'+ k.order.remainingVolume +'</span></th>';
						dom += '					<th style="border: none;" width="140;">Tot. Weight : <span class="remWeight">'+ k.order.remainingWeight +'</span></th>';
						dom += '					<th style="border: none;" width="35px;">';
						dom += '						<span class="label label-default"><i class="fa fa-arrows-alt"></i></span>';
						dom += '					</th>';
						dom += '				</tr>';
						dom += '			</table>';
						dom += '		</div>';
						dom += '	</div>';

						dom += '	<div class="table-responsive expander" style="margin-top: 2px;">';
						dom += '		<table class="table table-bordered ordersTable" style="margin-bottom: 0px;">';
						dom += '			<thead>';
						dom += '				<tr>';
						dom += '					<td width="10px;"><i class="fa fa-check-square-o"></i></td>';
						dom += '					<td>Item</td>';
						dom += '					<td width="80px">Tot. Vol</td>';
						dom += '					<td width="80px">Qty</td>';
						dom += '					<td width="120px" class="text-center"><button class="btn btn-success btn-sm btn_newItem" ><i class="fa fa-plus"></i> <b>NEW ITEM</b></button></td>';
						dom += '				</tr>';
						dom += '			</thead>';
						dom += '			<tbody>';
						
						if(typeof(k.items) == 'object' && Object.keys(k.items).length > 0){
							$.each(k.items, function(i, l){
								
								dom += '<tr>';
								dom += '	<td><input type="checkbox" class="form-control oitemchk" checked></td>';
								dom += '	<td>'+ l.item +'</td>';
								dom += '	<td class="totalVolume" data-volume="'+ l.volume +'">'+ l.totalVolume +'</td>';
								dom += '	<td class="qty">'+ l.qty +'</td>';
								dom += '	<td>';
								dom += '		<div class="input-group drag" draggable="true" data-item="'+ l.item +'" data-order_id="'+ k.order.id +'" data-item_id="'+ l.id +'" data-id="'+ k.order.id +'_'+ l.id +'">';
								dom += '			<input type="text" class="form-control" value="'+ l.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>';

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

		function addNewItem($btn){
			var oid = $btn.data('modal_updateOrder_orderID');

			if(oid != undefined && oid != '' && $.isInt(oid)){
				$.clearHighlights();

				var $imgThumbnail = $('.orders .img-thumbnail .span_order[data-order_id="'+ oid +'"]').closest('.img-thumbnail');

				var data = {
					modal_updateOrder_item: $('.modal_updateOrder_item').val(),
					modal_updateOrder_qty: $('.modal_updateOrder_qty').val(),
					oid: oid
				};

				if(data.modal_updateOrder_item > 0 && $.isInt(data.modal_updateOrder_item)){
					if(data.modal_updateOrder_qty.length > 0 && $.isInt(data.modal_updateOrder_qty)){

						$.post("{{ url('/trip/addNewItem') }}", {_token: _token, data: data}, function(e){
							$.highlightOrThrow(e, function(){
								//refresh order
								resetForm('save');
								loadModalItems(oid);
								reloadOrder($imgThumbnail, oid);
								// $('#modal_updateOrder').modal('hide');
							});
						}, 'json');
					}else{
						$('.modal_updateOrder_qty').highlightElement({msg: 'Invalid value'});
					}
				}else{
					$('.modal_updateOrder_item').highlightElement({msg: 'Invalid Item'});
				}
			}else{
				$.notify.error('Invalid Order selected 003.');
			}
		}

		function update_modal_updateOrder_summary(){
			var id = $('.modal_updateOrder_item').val();
			var name = $('.modal_updateOrder_item option:selected').data('name');
			var weight = +$('.modal_updateOrder_item option:selected').data('weight');
			var volume = +$('.modal_updateOrder_item option:selected').data('volume');
			var qty = +$('.modal_updateOrder_qty').val();
			
			if($.isDouble(weight) && $.isDouble(volume) && $.isInt(id)){
				if($.isInt(qty) && +qty > 0){
					$('#modal_updateOrder .modal_updateOrder_idTxt').html(id);
					$('#modal_updateOrder .modal_updateOrder_nameTxt').html(name);
					$('#modal_updateOrder .modal_updateOrder_totWeightTxt').html(qty * weight + ' Kg');
					$('#modal_updateOrder .modal_updateOrder_totVolumeTxt').html(qty * volume + ' CBM');
				}else{
					$('#modal_updateOrder .modal_updateOrder_idTxt').html(id);
					$('#modal_updateOrder .modal_updateOrder_nameTxt').html(name);
					$('#modal_updateOrder .modal_updateOrder_totWeightTxt').html('');
					$('#modal_updateOrder .modal_updateOrder_totVolumeTxt').html('');
				}
			}else{
				$('#modal_updateOrder .modal_updateOrder_idTxt').html('');
				$('#modal_updateOrder .modal_updateOrder_nameTxt').html('');
				$('#modal_updateOrder .modal_updateOrder_totWeightTxt').html('');
				$('#modal_updateOrder .modal_updateOrder_totVolumeTxt').html('');
			}
		}

		function loadItems(callback){
			var $select = $('.modal_updateOrder_item');
			$.post("{{ url('/trip/loadItems') }}", {_token: _token}, function(e){
				var dom = '';
				$.each(e, function(i, k){
					dom += '<option value="'+ k.id +'" data-name="'+ k.name +'" data-volume="'+ k.volume +'" data-weight="'+ k.weight +'">'+ k.name +'</option>';
				});
				$select.html(dom);
				if(callback != undefined && typeof(callback) == 'function'){
					callback();
				}
			}, 'json');
		}

		function deleteTrip(id){
			$.post("{{ url('/trip/deleteTrip') }}", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					loadTripSummary();

					$('.reset_all').remove();
					config = {};
					$('.orders').html('');
					$('.vehicles').html('');
					$('.record_status').html('You are creating a new trip');
				});
			}, 'json');
		}

		function loadTripSummary(){
			var $tbody = $('.summary tbody');

			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('/trip/loadSummary') }}", {_token: _token}, function(e){

				var dom = '';

				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){

						dom += '<tr>';

						dom += '<td rowspan="'+ k.rowspan +'">'+ i +'</td>';

						$.each(k.set, function(l, m){

							if(l == 0){

								dom += '<td rowspan="'+ m.rowspan +'">'+ m.vehicle.number +'</td>';

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

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

								});
								
								$.each(m.items, function(n, o){

									if(n == 0){
										dom += '<td>Order '+ o.order_id +' - '+ o.name +'</td>';
										dom += '<td>'+ o.qty +'</td>';
										dom += '<td rowspan="'+ m.rowspan +'">'+ points +'</td>';
										
										dom += '<td rowspan="'+ k.rowspan +'">';
										dom += '<div class="btn-group">';
										dom += '<button class="btn btn-sm btn-warning edit" data-id="'+ i +'"><i class="fa fa-pencil"></i></button>';
										dom += '<button class="btn btn-sm btn-danger deleteTrip" data-id="'+ i +'"><i class="fa fa-close"></i></button>';
										dom += '</div>';
										dom += '</td>';

										dom += '</tr>';
									}else{
										dom += '<tr>';
										dom += '<td>Order '+ o.order_id +' - '+ o.name +'</td>';
										dom += '<td>'+ o.qty +'</td>';
										dom += '</tr>';
									}
								});

							}else{

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

								var points = '';
								$.each(m.points, function(p, q){
									if(p == 0){
										points += q.name;
									}else{
										points += arrow + q.name;
									}
								});

								$.each(m.items, function(n, o){

									if(n == 0){
										dom += '<td>Order '+ o.order_id +' - '+ o.name +'</td>';
										dom += '<td>'+ o.qty +'</td>';
										dom += '<td rowspan="'+ m.rowspan +'">'+ points +'</td>';
										dom += '</tr>';
									}else{
										dom += '<tr>';
										dom += '<td>Order '+ o.order_id +' - '+ o.name +'</td>';
										dom += '<td>'+ o.qty +'</td>';
										dom += '</tr>';
									}

								});
							}
						});

					});
				}else{
					dom = '<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>';
				}

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


		function validateTrip(callback){
			//validation
			if($('.orders .img-thumbnail').length > 0){
				
				if($('.vehicles .vehicle').length > 0){
					var msg = '';
					var end = $('.vehicles .vehicle').length;
					var counter = 0;
					$('.vehicles .vehicle').each(function(){
						counter++;

						$tbody = $('.vehicleOrdersTable tbody', $(this).closest('.img-thumbnail'));
						if($('[data-id]', $tbody).length > 0){
							
							$droppoints = $('.droppoints span', $(this).closest('.img-thumbnail'));
							if($droppoints.length > 0){

								var vid = $(this).data('vehicle_id');
								var number = $(this).data('number');
								if(vid != undefined){
									if(config.hasOwnProperty(vid)){

										if(counter == end){
											//all good

											var data = [];

											if(Object.keys(config).length > 0){
												$.each(config, function(vid, routes){

													var $tr = $('.vehicleOrdersTable tbody tr', $('[data-vehicle_id="'+ vid +'"]', '.vehicles').closest('.img-thumbnail'));

													$droppoints = $('.droppoints', $('[data-vehicle_id="'+ vid +'"]', '.vehicles').closest('.img-thumbnail'));

													var pointsList = [];
													$.each($('span', $droppoints), function(){
														if($.isInt($(this).data('location_id'))){
															pointsList.push($(this).data('location_id'));
														}
													});


													if($tr != undefined && $tr.length > 0){
														var items = [];
														$tr.each(function(){
															var id = $(this).data('id');

															$order = $('[data-id="'+ id +'"]', '.orders');
															if($order != undefined && $order.length > 0){
																var oid = $order.data('order_id');
																var iid = $order.data('item_id');
																var qty = $('.qty', $(this)).html();

																var item = {
																	order: oid,
																	id: iid,
																	qty: qty
																};
																items.push(item);
															}
														});
														if(items.length > 0 && routes.length > 0){
															if(routes.length > 0){
																data.push({
																	vid: vid,
																	routes: routes,
																	items: items,
																	points: pointsList
																});
															}
														}
													}
												});
												callback(data);
											}
											//end of validation
										}

									}else{
										$.notify.error('<b>Route not created for '+ number +'.</b>');
										return false;
									}
								}else{
									$.notify.error('<b>Route not created for some vehicles.</b>');
									return false;
								}
							}else{
								$.notify.error('<b>Some vehicles dont have drop points.</b>');
								return false;
							}
						}else{
							$.notify.error('<b>Some vehicles dont have items added.</b>');
							return false;
						}

					});
					
				}else{
					$.notify.error('<b>No vehicles added.<b>');
					return false;
				}

			}else{
				$.notify.error('<b>No orders added.</b>');
				return false;
			}
		}


		$('.save').click(function(){
			var $this = $(this);
			var id = $this.data('id') != undefined ? $this.data('id') : '';
			
			validateTrip(function(data){
				
				if(data != undefined && typeof(data) == 'object' && Object.keys(data).length > 0){
					$.post("{{ url('/trip/saveTrip') }}", {_token: _token, data: data, id: id}, function(e){
						if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('ok')){
							if(e.ok){
								
								if(e.id != null || e.id != undefined){
									$this.data('id', e.id);
									$('.record_status').html('You are currently editing trip #' + e.id);
									var btn = '<button class="btn btn-primary reset_all">Cancel and create a new Trip.</button>';
									$('.reset_all_wrapper').html(btn);

									$.notify.success('<b>Successfully saved.</b>');
								}else{
									$.notify.error('<b>Unexpected error occured.</b>');
								}

							}else{
								$.notify.error('<b>'+ e.msg +'</b>');
							}
						}else{
							$.notify.error('<b>This record cannot be saved/updated</b>');
						}
					}, 'json');

				}

			});


		});//end of click event
		
		
		function getMappedData(){
			//validation
			if($('.orders .img-thumbnail').length == 0){
				$.notify.error('<b>No orders added.</b>');
				return false;
			}

			if($('.vehicles .vehicle').length > 0){
				$('.vehicles .vehicle').each(function(){
					$tbody = $('.vehicleOrdersTable tbody', $(this).closest('.img-thumbnail'));
					if($('[data-id]', $tbody).length == 0){
						
						$.notify.error('<b>Some vehicles dont have items added.</b>');
						return false;
					}

					$droppoints = $('.droppoints', $(this).closest('.img-thumbnail'));
					if($droppoints.length == 0){
						$.notify.error('<b>Some vehicles dont have drop points.</b>');
						return false;
					}

					var vid = $(this).data('vehicle_id');
					var number = $(this).data('number');
					if(vid != undefined){
						if(!config.hasOwnProperty(vid)){
							$.notify.error('<b>Route not created for '+ number +'.</b>');
							return false;
						}
					}else{
						$.notify.error('<b>Route not created for some vehicles.</b>');
						return false;
					}
				});
			}else{
				$.notify.error('<b>No vehicles added.<b>');
				return false;
			}
			//end of validation

			var data = [];

			if(Object.keys(config).length > 0){
				$.each(config, function(vid, routes){

					var $tr = $('.vehicleOrdersTable tbody tr', $('[data-vehicle_id="'+ vid +'"]', '.vehicles').closest('.img-thumbnail'))

					if($tr != undefined && $tr.length > 0){
						var items = [];
						$tr.each(function(){
							var id = $(this).data('id');

							$order = $('[data-id="'+ id +'"]', '.orders');
							if($order != undefined && $order.length > 0){
								var oid = $order.data('order_id');
								var iid = $order.data('item_id');
								var qty = $('.qty', $(this)).html();

								var item = {
									order: oid,
									id: iid,
									qty: qty
								};
								items.push(item);
							}
						});
						if(items.length > 0 && routes.length > 0){
							if(routes.length > 0){
								data.push({
									vid: vid,
									routes: routes,
									items: items
								});
							}
						}
					}
				});
			}

			return data;
		}

		function preLoadOrders(trip_id){
			$orders = $('.orders');
			$.post("{{ url('/trip/preLoadOrders') }}", {_token: _token, trip_id: trip_id}, function(e){
				var dom = '';
				
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						if(typeof(k) == 'object' && k.hasOwnProperty('order') && k.hasOwnProperty('items')){

							var total = k.total;

							dom += '<div class="img-thumbnail col-xs-12 form-group">';

							dom += '	<h4><span class="location" data-location_id="'+ k.order.location_id +'">'+ k.order.location +'</span><small class="pull-right">Order <span class="span_order"` data-order_id="'+ k.order.id +'">'+ k.order.id +'</span><i class="btn btn-xs text-danger thumbnailDelete fa fa-close pull-right"></i></small></h4>';
							

							dom += '	<div class="order_summary" style="width: 100%; position: relative; padding-left: 20px;">';
							dom += '		<button class="btn btn-primary btn-xs toggle_expander" style="padding: 0px 5px 0px 5px; position: absolute; left: 0px; height: 100%;"><i class="fa fa-arrows-v fa-lg" aria-hidden="true"></i></button>';
							dom += '		<div class="table-responsive dragSummary" draggable="true">';
							dom += '			<table class="table table-bordered" style="margin-bottom: 0px;">';
							dom += '				<tr>';
							dom += '					<th style="border: none;">Items : '+ total.count +'</th>';
							dom += '					<th style="border: none;" width="140;">Tot. Vol : <span class="remVolume">'+ k.order.remainingVolume +'</span></th>';
							dom += '					<th style="border: none;" width="140;">Tot. Weight : <span class="remWeight">'+ k.order.remainingWeight +'</span></th>';
							dom += '					<th style="border: none;" width="35px;">';
							dom += '						<span class="label label-default"><i class="fa fa-arrows-alt"></i></span>';
							dom += '					</th>';
							dom += '				</tr>';
							dom += '			</table>';
							dom += '		</div>';
							dom += '	</div>';

							dom += '	<div class="table-responsive expander" style="margin-top: 2px;">';
							dom += '		<table class="table table-bordered ordersTable" style="margin-bottom: 0px;">';
							dom += '			<thead>';
							dom += '				<tr>';
							dom += '					<td width="10px;"><i class="fa fa-check-square-o"></i></td>';
							dom += '					<td>Item</td>';
							dom += '					<td width="80px">Tot. Vol</td>';
							dom += '					<td width="80px">Qty</td>';
							dom += '					<td width="120px" class="text-center"><button class="btn btn-success btn-sm btn_newItem" ><i class="fa fa-plus"></i> <b>NEW ITEM</b></button></td>';
							dom += '				</tr>';
							dom += '			</thead>';
							dom += '			<tbody>';
							
							if(typeof(k.items) == 'object' && Object.keys(k.items).length > 0){
								$.each(k.items, function(i, l){
									
									dom += '<tr>';
									dom += '	<td><input type="checkbox" class="form-control oitemchk" checked></td>';
									dom += '	<td>'+ l.item +'</td>';
									dom += '	<td class="totalVolume" data-volume="'+ l.volume +'">'+ l.totalVolume +'</td>';
									dom += '	<td class="qty">'+ l.qty +'</td>';
									dom += '	<td>';
									dom += '		<div class="input-group drag" draggable="true" data-item="'+ l.item +'" data-order_id="'+ k.order.id +'" data-item_id="'+ l.id +'" data-id="'+ k.order.id +'_'+ l.id +'">';
									dom += '			<input type="text" class="form-control" value="'+ l.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>';
						}
					});
				}
				$orders.html(dom);
			}, 'json');
		}


		function preLoadVehicles(trip_id){
			$vehicles = $('.vehicles');
			config = {};
			
			$.post("{{ url('/trip/preLoadVehicles') }}", {_token: _token, trip_id: trip_id}, function(e){
				if(e != undefined && typeof(e) == 'object'){
					var dom = '';
					$.each(e, function(i, k){
						
						if(typeof(k) === 'object' && k.hasOwnProperty('vehicle') && k.hasOwnProperty('items') && k.hasOwnProperty('points')){

							var vehicle = k.vehicle;
							var totalVolume = 0;
							var volume = vehicle.volume;
							var route = [];


							dom += ' <div class="img-thumbnail col-xs-12 form-group drop">';
							dom += ' 	<h4 class="vehicle" data-vehicle_id="'+ vehicle.id +'" data-number="'+ vehicle.number +'" data-transporter="'+ vehicle.transporter +'">'+ vehicle.number +'<small class="pull-right">'+ vehicle.transporter +'<i class="btn btn-xs text-danger thumbnailDelete fa fa-close pull-right"></i></small></h4>';
							dom += ' 		<div class="table-responsive">';
							dom += ' 			<table class="table table-bordered vehicleOrdersTable">';
							dom += ' 				<thead>';
							dom += '					<tr>';
							dom += '						<td class="text-center" width="40px">#</td>';
							dom += '						<td width="110px">Order</td>';
							dom += '						<td>Product</td>';
							dom += '						<td width="80px">Tot. Vol</td>';
							dom += '						<td width="80px">Qty</td>';
							dom += '						<td width="40px" class="text-center"><i class="fa fa-gear"></i></td>';
							dom += '					</tr>';
							dom += '				</thead>';
							dom += '				<tbody>';

							if(typeof(k.items) === 'object' && Object.keys(k.items).length > 0){
								$.each(k.items, function(l, m){
									
									dom += '<tr data-id="'+ m.id +'">'
									dom += '<td>'+ (++l) +'</td>';
									dom += '<td>Order '+ m.order +'</td>';
									dom += '<td>'+ m.item +'</td>';
									dom += '<td class="totalVolume">';
									dom += 	m.totalVolume;
									dom += '</td>';
									dom += '<td class="qty">';
									dom += 	m.qty;
									dom += '</td>';
									dom += '<td class="text-center"><button class="delete btn btn-xs btn-danger"><i class="fa  fa-remove"></i></button></td>';
									dom += '</tr>';

									totalVolume += +m.totalVolume;
								});
							}

							dom += '				</tbody>';
							dom += '			</table>';
							dom += '		</div>';
							dom += '		<div class="form-group thumbnail">';
							dom += '			<h4><small>Drop points</small></h4>';
							dom += '			<div class="droppoints">';

							if(typeof(k.points) === 'object' && Object.keys(k.points).length > 0){
								var c = 0;
								$.each(k.points, function(n, o){
									var point_span = '<span class="location" data-location_id="'+ o.id +'">'+ o.name +'</span>';
									route.push({
										id: o.id,
										location: o.name,
										startingPoint: o.is_starting
									});

									var result = $.grep(route, function(e){
										return ((e.id == o.id) && (e.startingPoint == '0'));
									});
									// console.log(result.length);
									//it was : result.length > 2 : before

									if(result.length > 0){
										if(c == 0){
											dom += point_span;
										}else{
											dom += ',&nbsp;' + point_span;
										}
									}

									// if(n == 0){
									// 	if(result.length > 0)
									// 		dom += point_span;
									// }else{
									// 	if(result.length > 0)
									// 		dom += ',&nbsp;' + point_span;
									// }

								});
								config[vehicle.id] = route;
							}

							dom += '			</div>';

							dom += '		</div>';
							dom += '		<div class="progress">';
							

							if(totalVolume <= volume){

								percentage = ((totalVolume)/(volume))*100;

								dom += '<div class="progress-bar progress-bar-success" role="progressbar" style="width: '+ percentage +'%">';
								dom += '	<div class="text-danger" style="font-weight:bold;"><span>Capacity&nbsp;</span><span class="capacity">'+ totalVolume +'</span>/<span class="volume">'+ volume +'</span>';
								dom += '	</div>';
								dom += '</div>';

							}else{

								percentage = 100;

								dom += '<div class="progress-bar progress-bar-danger" role="progressbar" style="width: '+ percentage +'%">';
								dom += '	<div class="text-default" style="font-weight:bold;"><span>Capacity&nbsp;</span><span class="capacity">'+ totalVolume +'</span>/<span class="volume">'+ volume +'</span>';
								dom += '	</div>';
								dom += '</div>';

							}

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

						}

					});

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

	});
</script>

@stop