@extends('layouts.master')
@section('title') {{ Config::get('map.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;
	}

	.order .heading, .vehicle .heading {
		border-bottom: 1px solid #666666 !important;
		padding: 5px 0px 5px 0px;
		margin-bottom: 10px;
	}

	.order .summary {
		position: relative;
		padding-left: 60px;
		padding-top: 0px;
		margin-bottom: 8px;
	}

	.order .summary .expander {
		position: absolute;
		left: 0px;
		top: 0px;
		bottom: 0px;
		width: 20 xp;
	}

	.order .summary .editOrder {
		position: absolute;
		left: 20px;
		top: 0px;
		bottom: 0px;
		width: 40px;
	}

	.order .summary table th {
		border: none;
		padding: 2px;
	}

	.tab-content .tab-pane {
		padding-top: 10px;
	}
</style>

<style type="text/css">
	.refParent{
		position: relative;
	}
	.refParent:hover .refPopup{
		display: inline-block;
	}
	.refPopup{
		display: none;
		position: absolute;
		left: 0px;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 1px 4px;
		border-radius: 2px;
	}
</style>

<style>
	.loading_details tr td{
			border: none !important;
			padding: 0px !important;
		}
	}
</style>

<style type="text/css">
.route {
	padding-top: 20px;
	min-height: 200px;
}

.route .input-group {
	width: 100%;
}

.route .col-xs-3 {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.route .direction {
	background-color: inherit;
	border: none;
}

.route .addPointWrapper {
	background-color: inherit;
	border: none;
	padding: 0px 0px 0px 5px !important;
}

.route .input-group {
	position: relative;
}

.route .input-group .removePoint {
	position: absolute !important;
	display: none;
	border: 1px solid;
	left: 45px;
	top: 2px;
	z-index: 100;
}

.route .input-group:hover .removePoint {
	display: block;
}
</style>


<style>
.trip {
	width: 100%;
}

.trip .title {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.trip .tv_drop_points {
	margin-top: 40px;
}

.trip_summary .title {
	background-color: #1abc9c;
}
</style>


<ul class="nav nav-tabs" role="tablist">
	@if(auth()->user()->can("view_trip_first_tab"))
	<li role="presentation" class="active">
		<a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Load Vehicles</a>
	</li>
	@endif

	@if(auth()->user()->can("view_trip_second_tab"))
	<li role="presentation">
		<a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Create Route</a>
	</li>
	@endif

	@if(!auth()->user()->can("view_trip_first_tab") && auth()->user()->can("view_trip_third_tab"))
	<li role="presentation" class="active">
	@elseif(auth()->user()->can("view_trip_third_tab"))
	<li role="presentation">
	@endif
		<a href="#step3" aria-controls="step3" role="tab" data-toggle="tab">Summary</a>
	</li>
</ul>

<div class="tab-content">
	
	@if(auth()->user()->can("view_trip_first_tab"))
	<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="createTripWrapper" style="display: none;">
					<button class="btn btn-primary createTrip">Create a New Trip</button>
				</div>
				<div class="cancelTripWrapper" style="display: none;">
					<button class="btn btn-danger cancelTrip">Delete this trip and Create New</button>
				</div>
				<div class="updateTripWrapper" style="display: none;">
					<button class="btn btn-warning updateTrip">Finish editing this trip</button>
				</div>
			</div>
		</div>

		<div class="editor" style="display: none;">
			<div class="row">
				<div class="min-width-1000">
					<div class="col-xs-12">
						<div class="form-inline" style="margin-top: 15px;">
							<div class="form-group">
								<label class="control-label">From : </label>
								<input class="form-control fromDate" style="z-index: 99; position: relative;">
							</div>
							<div class="form-group">
								<label class="control-label">To : </label>
								<input class="form-control toDate" style="z-index: 99; position: relative;">
							</div>
							<div class="form-group">
								<button class="btn btn-primary filterOrders"><i class="fa fa-filter"></i> Filter Orders</button>
							</div>
						</div>
						<div class="form-group" style="margin-top: 15px;">
							<div>

								<label style="background-color: #2ecc71; padding: 0px 4px 0px 4px !important;"><input type="checkbox" class="row_filter" value="completed"/> Completed</label>

								<label style="background-color: #f39c12; padding: 0px 4px 0px 4px !important;"><input type="checkbox" class="row_filter" value="fulfilled"/> Fulfilled</label>

								<label style="background-color: #7f8c8d; padding: 0px 4px 0px 4px !important;"><input type="checkbox" class="row_filter" value="pending" checked/> Pending</label>

								<button class="btn btn-xs btn-primary btn_row_filter" style="margin-bottom: 5px;"><i class="fa fa-filter fa-lg"></i></button>

								<!-- <i class="fa fa-stop" style="color: #f39c12;"><input type="checkbox"/>Fulfilled</i>
								<i class="fa fa-stop" style="color: #7f8c8d;"> <input type="checkbox"/>Pending</i> -->
							</div>
							<div class="table-responsive" style="max-height: 200px;">
								<table class="table table-bordered table-hover table-condensed detailedOrders">
									<thead>
										<tr>
											<th>Invoice Number</th>
											<th>Location</th>
											<th width="125px;">Order Weight</th>
											<th width="125px;">Order Volume</th>
											<th width="120px;">No of Cases</th>
											<th width="135px;">Delivery Number</th>
											<th>Distributor</th>
											<th width="80px" class="text-center"><i class="fa fa-gear"></i></th>
										</tr>
									</thead>
									<tbody>
										<tr><th colspan="8" class="text-center">Sorry, No results found</th></tr>
									</tbody>
								</table> 
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="min-width-1000" style="padding-top: 10px;">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label">Orders List</label>
							<div class="input-group">
								<span class="input-group-addon" style="padding: 0px 2px 0px 1px;">
									<button class="btn btn-primary btn-sm newOrder"><i
										class="fa fa-edit fa-lg"></i></button>
									</span>
									<select class="form-control ordersList chosen-select"></select>
									<span class="input-group-addon btn btn-primary saveOrder">
										<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 List</label>
								<div class="input-group">
									<select class="form-control vehiclesList chosen-select"></select>
									<span class="input-group-addon btn btn-primary saveVehicle">
										<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 orders"></div>

						<div class="col-xs-6 vehicles"></div>

					</div>
				</div>

			</div>
		</div>
		@endif

		@if(auth()->user()->can("view_trip_second_tab"))
		<div role="tabpanel" class="tab-pane fade" id="step2">

			<div class="row">
				<div class="col-xs-12 notification">

				</div>
			</div>

			<div class="row">
				<div class="col-md-4">
					<div class="form-group" style="margin-top: 20px;">
						<label class="control-label">Select a Vehicle</label>
						<select class="form-control tripVehiclesList">
							<option value="">Select a vehicle</option>
						</select>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="img-thumbnail form-group route" style="width: 100%;">
						-- drop points not loaded --
					</div>
				</div>
			</div>

			@if(auth()->user()->can("view_trip_first_tab"))
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<label class="control-label">Select a starting Location</label>
						<select class="form-control startingLocationsList">
							<option value="">Select a starting location</option>
						</select>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label class="control-label">Select an ending Location</label>
						<select class="form-control endingLocationsList">
							<option value="">Select an ending location</option>
						</select>
					</div>
				</div>
			</div>
			@endif

			<div class="row">
				<div class="col-md-12">
					<div class="form-group">
						<button class="btn btn-primary save">Save</button>
						@if(auth()->user()->can("view_trip_first_tab"))
						<button class="btn btn-success complete">Mark as complete</button>
						@endif
					</div>
				</div>
			</div>

		</div>
		@endif
		

		@if(!auth()->user()->can("view_trip_first_tab") && auth()->user()->can("view_trip_third_tab"))
		<div role="tabpanel" class="tab-pane fade in active" id="step3">
		@elseif(auth()->user()->can("view_trip_third_tab"))
		<div role="tabpanel" class="tab-pane fade" id="step3">
		@endif
			<div class="row" style="padding-bottom: 10px;">
				<div class="col-xs-3">
					<label class="control-label">Filter trips From</label>
					<input type="text" class="form-control tripsFilterFromDate">
				</div>
				<div class="col-xs-3">
					<label class="control-label">To</label>
					<input type="text" class="form-control tripsFilterToDate">
				</div>
				<div class="col-xs-3">
					<button class="btn btn-primary filterTrips" style="margin-top: 25px;">Filter</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 form-inline">
					<div class="form-group">
						<input type="text" class="trips_filter_number" placeholder="Trip Number">
					</div>
					<button class="btn btn-xs btn-primary trips_filter_btn" style="margin-bottom: 5px;"><i class="fa fa-filter fa-lg"></i></button>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 trip_summary">


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

	@include('map::layouts.editOrder')
	@include('map::layouts.newOrder')

	@stop
	@section('script')

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

			$('.chosen-select').chosen({search_contains:true});


			$(".trips_filter_btn").click(function(){
				loadSummary();
			});

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

			var today = "2025-12-16";

			$('.fromDate').datepicker({
				dateFormat: "yy-mm-dd",
				onSelect: function(){
					$(".toDate").datepicker( "option", "minDate", new Date($('.fromDate').val()) );

				}
			});
			$(".toDate").datepicker({
				dateFormat: "yy-mm-dd",
				onSelect: function(){
					$(".fromDate").datepicker( "option", "maxDate", new Date($('.toDate').val()) );

				}
			});
			$('.order_fromDate').datepicker({
				dateFormat: "yy-mm-dd",
				onSelect: function(){
					$(".order_toDate").datepicker( "option", "minDate", new Date($('.order_fromDate').val()) );

				}
			});
			$(".order_toDate").datepicker({
				dateFormat: "yy-mm-dd",
				onSelect: function(){
					$(".order_fromDate").datepicker( "option", "maxDate", new Date($('.order_toDate').val()) );

				}
			});

			$('.tripsFilterFromDate').datepicker({
				dateFormat: "yy-mm-dd",
				onSelect: function(){
					$(".tripsFilterToDate").datepicker( "option", "minDate", new Date($('.tripsFilterFromDate').val()) );

				}
			});
			$(".tripsFilterToDate").datepicker({
				dateFormat: "yy-mm-dd",
				onSelect: function(){
					$(".tripsFilterFromDate").datepicker( "option", "maxDate", new Date($('.tripsFilterToDate').val()) );

				}
			});

			$.typeahead({
				input: '.no_distributor',
				order: 'asc',
				source: {
					distributors: {
						ajax: {
							method: "POST",
							url: "{{ url('/order/load_distributors') }}",
							data: {_token: _token}
						}
					}
				},
				minLength: 1,
				dynamic: true
			});

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

			@if(auth()->user()->can("view_trip_first_tab"))
			preload_incompleteTrip();
			@else
			loadSummary();
			@endif
			// load_ordersList();
			load_vehiclesList();
			// loadSummary();


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

			$.dragdrop({
				section: '.section1',
				drag: '.summary table',
				ondrop: function ($from, $to) {
					dropSummary($from, $to);
				}
			});

			$(document).on('click', '.setTakeOffDate', function(){
				var $input = $(this).parent('span').find('input');
				var id = $(this).val();
				var date = $input.val();
				$.clearHighlights();
				if(date.length > 0 && $.isValidDate(date)){
					saveTakeoffDate({id: id, date: date});
				}else{
					$input.highlightElement({'msg': 'Invalid date'});
				}
			});

			$(document).on("change", ".trip_types_list", function(){
				var data = {
					id: $(this).data("trip_vehicle_id"),
					type: $(this).val()
				};
				setTripType(data);
			});

			function setTripType(data){
				$.post("{{ url('/map/setTripType') }}", {_token: _token, data: data}, function(e){
					throwError(e);
				}, 'json');
			}

			$(document).on("click", ".save_loading_details", function(){
				var data = {
					id: $(this).data("id"),
					bay: $(this).closest("table").find(".loading_bay").val(),
					officer: $(this).closest("table").find(".loading_officer").val(),
					start: $(this).closest("table").find(".loading_start").val(),
					end: $(this).closest("table").find(".loading_end").val()
				};
				save_loading_details(data);
			});

			function save_loading_details(data){
				$.post("{{ url('/map/save_loading_details') }}", {_token: _token, data: data}, function(e){
					throwError(e, function(){
						loadSummary();
					});
				}, 'json');
			}

			$(document).on("click", ".printOrderSummary", function(e){
				e.stopPropagation();
				var params = {
					oid: $(this).data('order_id'),
					ovveride: 0
				}
				$.post("{{ url('/map/delivery_note_printed') }}", {_token: _token, data: params}, function(e){
					if(e != undefined && typeof(e) == "object" && e.hasOwnProperty("ok")){
						if(e.ok == 1){
							if(e.result == true){

								bootbox.dialog({
									title: "Delivery Note Reprint",
									message: "Delivery note already printed under No. " + e.number + ". Please choose an option.",
									buttons: {
									    cancel: {
									        label: "Dismiss",
									        className: 'btn-info'
									    },
									    print_under_same: {
									        label: "Reprint under same number",
									        className: 'btn-warning',
									        callback: function(){
												window.location = "{{ url('/map/pdf2?') }}" + $.param(params);
									        }
									    },
									    print_under_new: {
									        label: "Reprint under a new number",
									        className: 'btn-danger',
									        callback: function(){
									            params.ovveride = 1;
												window.location = "{{ url('/map/pdf2?') }}" + $.param(params);
									        }
									    }
									}
								});

							}else{
								window.location = "{{ url('/map/pdf2?') }}" + $.param(params);
							}
						}else{
							$.notify.error(e.msg);
						}
					}
				}, "json");
				// window.location = "{{ url('/map/pdf2?') }}" + $.param(params);
			});

			$(".filterTrips").click(function(){
				loadSummary();
			});

			$('.filterOrders').click(function(){
				load_detailedOrders();
				// load_ordersList();
			});

			$(".filterOrdersTable").click(function(){
				var data = {
					fromDate: $(".order_fromDate").val(),
					toDate: $(".order_toDate").val()
				};
				newOrder_loadOrder(data);
			});

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

			$('.cancelTrip').click(function () {
				var id = $(this).val();
				bootbox.confirm("Are you sure you want to delete this trip and create a new trip?", function (r) {
					if (r) {
						cancelTrip(id);
					}
				});
			});

			$('.updateTrip').click(function () {
				$('.notification').html('');
				resetActions('save');
			});

			$('.saveOrder').click(function () {
				saveOrder($('.ordersList').val());
			});

			$('.saveVehicle').click(function () {
				saveVehicle($('.vehiclesList').val());
			});

			$('.complete').click(function () {
				var data = {
					trip_id: $('.cancelTrip').val()
				};
				completeTrip(data);
			});

			$('.save').click(function () {
				var size = $('.route .point').length;

				var data = {
					trip_id: $('.cancelTrip').val() != undefined ? $('.cancelTrip').val() : $('.save').val(),
					vehicle_id: $('.tripVehiclesList').val(),
					starting_location: $('.startingLocationsList').val(),
					ending_location: $('.endingLocationsList').val(),
					points: []
				};

				if ($('.route .point').length > 0) {
					$($('.route .point')).each(function (i) {
						if ($('option:selected', $(this)).data('location_id') == undefined) {
							$.notify.error('<b>Some drop points are empty</b>');
							return false;
						} else {
							data.points.push({
								id: $('option:selected', $(this)).data('id'),
								location_id: $('option:selected', $(this)).data('location_id'),
								seal_number: $(this).closest(".wrapper").find(".seal_number").val(),
								feedback_sheet_number: $(this).closest(".wrapper").find(".feedback_sheet_number").val()
							});
							if ((++i) == size) {
								save(data);
							}
						}
					});
				} else {
					save(data);
				}
			});

			$('.tripVehiclesList').change(function () {
				var trip_id = $('.cancelTrip').val() != undefined ? $('.cancelTrip').val() : $(".save").val();
				preload_trip(trip_id, $(this).val());
			});

			$(document).on('click', '.goodCost', function(){
				var $input = $(this).parent('div').find('input');
				var id = $(this).val();
				var cost = $input.val();
				$.clearHighlights();
				if($.isDouble(cost) && +cost > 0){
					if(cost.length > 0){
						saveGoodsCost({id: id, cost: cost});
					}
				}else{
					$input.highlightElement({'msg': 'Invalid amount'});
				}
			});

			$(document).on('click', '.deleteItem', function () {
				var id = $(this).val();
				if (id != undefined && id != null && id != '') {
					bootbox.confirm('Are you sure you want to delete this record?', function (r) {
						if (r) {
							deleteItem(id);
						}
					});
				} else {
					$.notify.error("<b>Invalid record selected.</b>");
				}
			});

			$(document).on('click', '.deleteOrder', function () {
				var id = $(this).data('trip_order_id');
				bootbox.confirm('Are you sure you want to remove this order?', function (r) {
					if (r) {
						deleteOrder(id);
					}
				});
			});

			$(document).on('click', '.deleteVehicle', function () {
				var id = $(this).data('trip_vehicle_id');
				bootbox.confirm('Are you sure you want to remove this vehicle?', function (r) {
					if (r) {
						deleteVehicle(id);
					}
				});
			});

			$(document).on('click', '.addPoint', function () {
				var data = {
					trip_id: $('.cancelTrip').val(),
					vehicle_id: $('.tripVehiclesList').val()
				};
				addPoint(data);
			});

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

			$(document).on('click', '.editTrip', function () {
				var trip_id = $(this).data('trip_id');
				var msg = 'You are currently editing trip <strong>#' + trip_id + '</strong>.';
				setNotification(msg);
				resetActions('update', trip_id);

				@if(auth()->user()->can("view_trip_first_tab"))
				$('a[href="#step1"]').trigger('click');
				@else
				$('a[href="#step2"]').trigger('click');
				@endif

			});

			$(document).on('click', '.deleteTrip', function () {
				var id = $(this).data('trip_id');
				bootbox.confirm("Are you sure you want to delete this trip?", function (r) {
					if (r) {
						cancelTrip(id);
					}
				});
			});

			$(document).on('click', '.expander', function () {
				var target_oid = $(this).closest('.order').data('order_id');
				$('.orders .order').each(function () {
					var oid = $(this).data('order_id');
					if (oid != target_oid) {
						if ($(this).find('.results').is(':visible')) {
							$(this).find('.results').slideToggle();
						}
					}
				});
				$('.results', $(this).closest('.body')).slideToggle();
			});

			$(document).on('click', '.editOrder', function () {
				var data = {
					trip_id: $(this).data('trip_id'),
					order_id: $(this).data('order_id')
				};
				editOrder_loadOrder(data);
			});

			$(document).on('click', '.eo_editItem', function () {
				editOrder_environment('update');

				$('.eo_code').prop('disabled', true);
				$('.eo_name').prop('disabled', true);
				$('.eo_volume').prop('disabled', true);
				$('.eo_weight').prop('disabled', true);

				$('.eo_update').data('item_id', $(this).data('item_id'));
				$('.eo_code').val($(this).data('item_code'));
				$('.eo_name').val($(this).data('item_name'));
				$('.eo_volume').val($(this).data('item_volume'));
				$('.eo_weight').val($(this).data('item_weight'));
				$('.eo_qty').val($(this).data('item_qty'));
			});

			$(document).on('click', '.eo_deleteItem', function () {
				var data = {
					trip_id: $(this).data('trip_id'),
					order_id: $(this).data('order_id'),
					item_id: $(this).data('item_id')
				};
				bootbox.confirm('Are you sure you want to delete this item?', function (r) {
					if (r) {
						editOrder_deleteItem(data);
					}
				});
			});

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

			$(document).on('click', '.gatePass', function (e) {
				e.stopPropagation();
				
				var trip_id = $(this).data('trip_id');
				var gatepass_date = $(".gatepass_date", $(this).closest(".gatepass_date_tracker")).val();
				var params = {
					id: $(this).data('id'),
					orders: $(this).data('orders'),
					trip_id: $(this).data('trip_id'),
					vehicle: $(this).data('vehicle'),
					goodsCost: $(this).data('goodscost'),
					points : $(this).data('points'),
					takeoff : $(this).data('takeoff'),
					gatepass_date : gatepass_date
				}

				window.location = "{{ url('/map/pdf?') }}" + $.param(params);
			});

			$(document).on('click', '.endTrip', function (e){
				e.stopPropagation();
				var that = $(this);
				var trip_id = $(this).data('trip_id');

				$.post("{{ url('/map/endTrip') }}", {_token: _token, trip_id: $(this).data('trip_id'), vehicle: $(this).data('vehicle')}, function (e) {
					if(e.status == true){
						that.removeClass('btn-warning').addClass('btn-success')
						setTimeout(function (){
							$(".endedTrip").attr('disabled', true);
							that.html('Ended Trip <span class="fa fa-car"></span>').attr('disabled', true);
						}, 1000);
					}
				}, 'json');
			});

			function saveTakeoffDate(data){
				$.post("{{ url('/map/saveTakeoffDate') }}", {_token: _token, data: data}, function(e){
					throwError(e, function(){
						preload_trip(e);
					});
				}, 'json');
			}

			function saveGoodsCost(data){
				$.post("{{ url('/map/saveGoodsCost') }}", {_token: _token, data: data}, function(e){
					throwError(e, function(){
						preload_trip(e);
					});
				}, 'json');
			}

			// $(".row_filter").change(function(){
			// 	load_detailedOrders();
			// });

			$(".btn_row_filter").click(function(){
				load_detailedOrders();
			});

			function load_detailedOrders(){
				var row_classes = [];
				$(".row_filter:checked").each(function(){
					row_classes.push($(this).val());
				});

				var data = {
					fromDate: $('.fromDate').val(),
					toDate: $('.toDate').val()
				};
				var $tbody = $('.detailedOrders tbody');
				var $select = $('.ordersList');
				$.post("{{ url('/map/newOrder_loadOrder_filtered') }}", {_token: _token, data: data}, function(e){
					var tbody = '';
					var options = '';
					if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('orders')) {
						$.each(e.orders, function(i, k){
							if($.inArray(k.status, row_classes) == -1){ return true; }//skipping rows

							var property = '';
							var row_class = '';
							if(k.status == 'completed'){
								property = 'style="background-color: #2ecc71;"';
								row_class = "row_complete";
							}else if(k.status == 'fulfilled'){
								property = 'style="background-color: #f39c12;"';
								row_class = "row_fulfilled";
							}else if(k.status == 'pending'){
								property = 'style="background-color: #f9f9f9;"';
								row_class = "row_pending";
							}

							tbody += '<tr '+property+' class="'+ row_class +'">';
							tbody += '<td>'+ k.num +'</td>';
							tbody += '<td>'+ k.name +'</td>';
							tbody += '<td>'+ k.orderWeight +'</td>';
							tbody += '<td>'+ k.orderVolume +'</td>';
							tbody += '<td>'+ k.cases +'</td>';
							tbody += '<td>'+ k.deliveryNumber +'</td>';
							tbody += '<td>'+ k.distributor +'</td>';
							tbody += '<td class="text-center">';
							tbody += '<div class="btn-group">';
							tbody += '  <button style="border: 1px solid #CCCCCC; padding: 2px 8px 2px 8px;" class="btn btn-sm addDetailedOrder" data-id="'+ k.id +'"><i class="fa fa-lg fa-level-down"></i></button>';

							if(k.status == 'completed'){
								tbody += '	<button class="btn btn-sm undoOrderComplete" style="border: 1px solid #CCCCCC; padding: 2px 4px 2px 4px;" data-id="'+ k.id +'"><i class="fa fa-lg fa-circle-o" style="color: #C9302C;"></i></button>';
							}else{
								tbody += '	<button class="btn btn-sm markOrderComplete" style="border: 1px solid #CCCCCC; padding: 2px 4px 2px 4px;" data-id="'+ k.id +'"><i class="fa fa-lg fa-check-circle" style="color: green;"></i></button>';
							}


							tbody += '</div>';
							tbody += '</td>';
							tbody += '</tr>';

							options += '<option value="' + k.id + '">Order ' + k.num + '</option>';
						});
					}else{
						tbody = '<tr><th colspan="8" class="text-center">Sorry, No orderes found.</th></tr>';
						options = '<option>No Orders added.</option>';
					}
					$tbody.html(tbody);
					$select.html(options);

					$(".chosen-select").trigger("chosen:updated");
				}, 'json');
			}

			function bulkDropDelete(id) {
				if (id != undefined && id != '' && $.isInt(id)) {
					$.post("{{ url('/map/bulkDropDelete') }}", {_token: _token, id: id}, function (e) {
						// if (e != undefined && e != null && e != '') {
						// 	preload_trip(e);
						// }
						//above lines are commented cuz we need to check if order is already completed
						throwError(e, function(){
							preload_trip(e);
						});
					}, 'json');
				}
			}

			$('.newOrder').click(function () {
				var data = {
					fromDate: $(".order_fromDate").val(),
					toDate: $(".order_toDate").val()
				};
				newOrder_loadOrder(data);
			});

			$('#modal_editOrder').on('show.bs.modal', function (e) {
				editOrder_environment('save');
			});

			$('#modal_editOrder').on('hidden.bs.modal', function (e) {
				preload_trip($('.cancelTrip').val());
			});

			$('#modal_newOrder').on('show.bs.modal', function (e) {
				newOrder_environment('save');
			});

			$('#modal_newOrder').on('hidden.bs.modal', function (e) {
				preload_trip($('.cancelTrip').val());
				// load_ordersList();
				load_detailedOrders();
			});

			$('#modal_editOrder .eo_cancel').click(function () {
				$('.eo_code').prop('disabled', false);
				$('.eo_name').prop('disabled', false);
				$('.eo_volume').prop('disabled', false);
				$('.eo_weight').prop('disabled', false);
				editOrder_environment('save');
			});

			$('#modal_editOrder .eo_save').click(function () {
				var data = {
					trip_id: $(this).data('trip_id'),
					order_id: $(this).data('order_id'),
					item_id: $(this).data('item_id'),
					eo_code: $('.eo_code').val(),
					eo_name: $('.eo_name').val(),
					eo_volume: $('.eo_volume').val(),
					eo_weight: $('.eo_weight').val(),
					eo_qty: $('.eo_qty').val()
				};
				editOrder_saveItem(data);
			});

			$('#modal_editOrder .eo_update').click(function () {
				var data = {
					trip_id: $(this).data('trip_id'),
					order_id: $(this).data('order_id'),
					item_id: $(this).data('item_id'),
					eo_code: $('.eo_code').val(),
					eo_name: $('.eo_name').val(),
					eo_volume: $('.eo_volume').val(),
					eo_weight: $('.eo_weight').val(),
					eo_qty: $('.eo_qty').val()
				};
				editOrder_updateItem(data);
			});

			$('.eo_itemsList').change(function () {
				if ($(this).val() != '') {
					editOrder_environment('clear');

					$('.eo_code').prop('disabled', true);
					$('.eo_name').prop('disabled', true);
					$('.eo_volume').prop('disabled', true);
					$('.eo_weight').prop('disabled', true);

					var item_id = $('option:selected', $(this)).val();
					var code = $('option:selected', $(this)).data('item_code');
					var name = $('option:selected', $(this)).data('item_name');
					var volume = $('option:selected', $(this)).data('item_volume');
					var weight = $('option:selected', $(this)).data('item_weight');

					$('.eo_save').data('item_id', item_id);
					$('.eo_code').val(code);
					$('.eo_name').val(name);
					$('.eo_volume').val(volume);
					$('.eo_weight').val(weight);

				} else {
					editOrder_environment('clear');

					$('.eo_code').prop('disabled', false);
					$('.eo_name').prop('disabled', false);
					$('.eo_volume').prop('disabled', false);
					$('.eo_weight').prop('disabled', false);
				}
			});

			$('.no_cancel').click(function () {
				newOrder_environment('save');
			});

			$('.no_update').click(function () {
				var data = {
					trip_id: $('.cancelTrip').val(),
					id: $(this).data('order_id'),
					no_locationsList: $('.no_locationsList').val(),
					no_weight: $('.no_weight').val(),
					no_volume: $('.no_volume').val(),
					'no_num' : $('.no_num').val(),
					'no_noc' : $('.no_noc').val(),
					'no_value' : $('.no_value').val(),
					'no_delivery' : $('.no_delivery').val(),
					'no_distributor' : $('.no_distributor').val()
				};
				newOrder_updateOrder(data);
			});

			$('.no_save').click(function () {
				var data = {
					'no_num': $('.no_num').val(),
					'no_locationsList': $('.no_locationsList').val(),
					'no_volume': $('.no_volume').val(),
					'no_weight': $('.no_weight').val(),
					'no_noc' : $('.no_noc').val(),
					'no_value' : $('.no_value').val(),
					'no_delivery' : $('.no_delivery').val(),
					'no_distributor' : $('.no_distributor').val()
				};
				newOrder_saveOrder(data);
			});

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

			$(document).on('click', '.markOrderComplete', function(){
				var id = $(this).data('id');
				bootbox.confirm('Are you sure you want to mark this order as complete?', function(r){
					if(r){
						markOrderComplete(id);
					}
				});
			});

			$(document).on('click', '.undoOrderComplete', function(){
				var id = $(this).data('id');
				bootbox.confirm('Are you sure you want to mark this order as <b class="text-danger">incomplete?</b>', function(r){
					if(r){
						undoOrderComplete(id);
					}
				});
			});

			// $(document).on('click', '.no_edit', function () {
			// 	newOrder_environment('update');
			// 	$('.no_location_name').html($(this).data('location_name'));
			// 	$('.no_update').data('order_id', $(this).data('id'));
			// 	$('.no_locationsList').val($(this).data('location_id'));
			// 	$('.no_weight').val($(this).data('order_weight'));
			// 	$('.no_volume').val($(this).data('order_volume'));
			// 	$('.no_num').val($(this).data('order_num'));
			// 	$('.no_noc').val($(this).data('noc'));
			// 	$('.no_value').val($(this).data('value'));
			// 	$('.no_delivery').val($(this).data('delivery'));
			// 	$('.no_distributor').val($(this).data('distributor'));
			// });

			// $(document).on('click', '.no_delete', function () {
			// 	var id = $(this).data('id');
			// 	bootbox.confirm('Are you sure you want to delete this order?', function (r) {
			// 		if (r) {
			// 			newOrder_deleteOrder(id);
			// 		}
			// 	});
			// });

			$(document).on('click', '.no_orders .dropdown-menu li a', function(){
                switch($(this).data("cvalue")){

                    case "no_edit":
                        newOrder_environment('update');
						$('.no_location_name').html($(this).data('location_name'));
						$('.no_update').data('order_id', $(this).data('id'));
						$('.no_locationsList').val($(this).data('location_id'));
						$('.no_weight').val($(this).data('order_weight'));
						$('.no_volume').val($(this).data('order_volume'));
						$('.no_num').val($(this).data('order_num'));
						$('.no_noc').val($(this).data('noc'));
						$('.no_value').val($(this).data('value'));
						$('.no_delivery').val($(this).data('delivery'));
						$('.no_distributor').val($(this).data('distributor'));
						$(".chosen-select").trigger("chosen:updated");
                    break;
                    case "no_delete":
                        var id = $(this).data('id');
						bootbox.confirm('Are you sure you want to delete this order?', function (r) {
							if (r) {
								newOrder_deleteOrder(id);
							}
						});
                    break;
                    case "no_disable":

                        var id = $(this).data('id');
                        bootbox.prompt({
                            title: "A comment is required to disable this order.",
                            inputType: 'textarea',
                            callback: function (result) {
                                if(result != null){
                                    if(result.trim().length > 0){
                                        var comment = result.trim();
                                        newOrder_disableOrder(id, comment);
                                    }else{
                                        $.notify.error("<b>A comment is needed.</b>");
                                    }
                                }
                            }
                        });

                    break;

                    case "no_enable":
                        var id = $(this).data('id');
                        newOrder_enableOrder(id);
                    break;
                }
            });


            function newOrder_enableOrder(id){
                $.post("{{ url('/map/newOrder_enableOrder') }}", {_token: _token, id: id}, function(e){
                    $.highlightOrThrow(e, function () {
						newOrder_environment('save');
						newOrder_loadOrder();
					});
                }, 'json');
            }

            function newOrder_disableOrder(id, comment){
                $.post("{{ url('/map/newOrder_disableOrder') }}", {_token: _token, id:id, comment: comment}, function(e){
                    $.highlightOrThrow(e, function () {
						newOrder_environment('save');
						newOrder_loadOrder();
					});
                }, 'json');
            }


			function markOrderComplete(id){
				if(typeof(id) == 'number'){
					$.post("{{ url('/map/markOrderComplete') }}", {_token: _token, id: id}, function(e){
						$.highlightOrThrow(e, function () {
							load_detailedOrders();
						});
					}, 'json');
				}else{
					$.notify.error('<b>Invalid record selected.</b>');
				}
			}

			function undoOrderComplete(id){
				if(typeof(id) == 'number'){
					$.post("{{ url('/map/undoOrderComplete') }}", {_token: _token, id: id}, function(e){
						$.highlightOrThrow(e, function(){
							load_detailedOrders();
						});
					}, 'json');
				}else{
					$.notify.error('<b>Invalid record selected.</b>');
				}
			}

			function newOrder_deleteOrder(id) {
				$.post("{{ url('/map/newOrder_deleteOrder') }}", {_token: _token, id: id}, function (e) {
					$.highlightOrThrow(e, function () {
						newOrder_environment('save');
						newOrder_loadOrder();
					});
				}, 'json');
			}

			function newOrder_saveOrder(data) {
				$.post("{{ url('/map/newOrder_saveOrder') }}", {_token: _token, data: data}, function (e) {
					$.highlightOrThrow(e, function () {
						newOrder_environment('save');
						newOrder_loadOrder();
					});
				}, 'json');
			}

			function newOrder_updateOrder(data) {
				$.post("{{ url('/map/newOrder_updateOrder') }}", {_token: _token, data: data}, function (e) {
					$.highlightOrThrow(e, function () {
						newOrder_environment('save');
						newOrder_loadOrder();
					});
				}, 'json');
			}

			function newOrder_environment(method) {
				$.clearHighlights();
				$('.chosen-select').trigger('chosen:updated');
				
				$('.no_update').data('order_id', '');
				$('.no_location_name').html('');
				$('.no_locationsList').val('');
				$('.no_weight').val('');
				$('.no_volume').val('');

				$('.no_num').val('');
				$('.no_noc').val('');
				$('.no_value').val('');
				$('.no_delivery').val('');
				$('.no_distributor').val('');

				if (typeof(method) == 'string') {
					if (method == 'save') {
						$('.no_updateWrapper').hide();
						$('.no_saveWrapper').show();
					} else if (method == 'update') {
						$('.no_saveWrapper').hide();
						$('.no_updateWrapper').show();
					}
				}
			}

			function newOrder_loadOrder(data) {
				var data = data || {};
				newOrder_environment('save');
				$.post("{{ url('/map/newOrder_loadOrder') }}", {_token: _token, data: data}, function (e) {

					if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('locations') && e.hasOwnProperty('orders')) {

						var orders = e.orders;
						var locations = e.locations;


						var sdom = '<option value="">Select a location</option>';
						if (Object.keys(locations).length > 0) {
							$.each(locations, function (i, location) {
								sdom += '<option value="' + location.id + '">' + location.name + '</option>';
							});
						} else {
							sdom = '<option value="">No locations found</option>';
						}
						$('.no_locationsList').html(sdom);


						var tdom = '';
						if (Object.keys(orders).length > 0) {
							$.each(orders, function (i, order) {
								tdom += '<tr '+ (order.disabled ? "style=\'background-color:#7f8c8d;\' data-toggle=\'tooltip\' title=\'"+ order.comment +"\'" : "") +' >';
								tdom += '<td>' + order.num + '</td>';
								// tdom += '<td>' + order.name + '</td>';
								tdom += '<td>' + order.distributor + '</td>';
								tdom += '<td>' + order.orderWeight + '</td>';
								tdom += '<td>' + order.orderVolume + '</td>';

								tdom += '<td class="text-center">';
                                tdom += '    <div class="dropdown">';
                                tdom += '        <button type="button" class="btn btn-default btn-xs" aria-haspopup="true" data-toggle="dropdown" aria-expanded="true">';
                                tdom += '            <i class="fa fa-list"></i>';
                                tdom += '        </button>';
                                tdom += '        <ul class="dropdown-menu dropdown-menu-right">';

                                tdom += '            <li><a data-cvalue="no_edit" data-id="' + order.id + '" data-order_num="' + order.num + '" data-location_id="' + order.location_id + '" data-location_name="' + order.name + '" data-order_weight="' + order.orderWeight + '" data-order_volume="' + order.orderVolume + '" data-noc="'+ order.cases +'" data-value="'+ order.value +'" data-delivery="'+ order.deliveryNumber +'" data-distributor="'+ order.distributor +'">Update</a></li>';

                                if(order.disabled){
                                    tdom += '            <li><a data-cvalue="no_enable" data-id="' + order.id + '">Enable</a></li>';
                                }else{
                                    tdom += '            <li><a data-cvalue="no_disable" data-id="' + order.id + '">Disable</a></li>';
                                }

                                tdom += '            <li><a data-cvalue="no_delete" data-id="' + order.id + '">Delete</a></li>';
                                tdom += '        </ul>';
                                tdom += '    </div>';
                                tdom += '</td>';

								// tdom += '<td>';
								// tdom += '<div class="btn-group">';
								// tdom += '	<button class="btn btn-warning btn-xs no_edit" data-id="' + order.id + '" data-order_num="' + order.num + '" data-location_id="' + order.location_id + '" data-location_name="' + order.name + '" data-order_weight="' + order.orderWeight + '" data-order_volume="' + order.orderVolume + '" data-noc="'+ order.cases +'" data-value="'+ order.value +'" data-delivery="'+ order.deliveryNumber +'" data-distributor="'+ order.distributor +'"><i class="fa fa-pencil"></i></button>';
								// tdom += '	<button class="btn btn-danger btn-xs no_delete" data-id="' + order.id + '"><i class="fa fa-close"></i></button>';
								// tdom += '<div>';
								// tdom += '</td>';
								tdom += '</tr>';

								if(order.next_order_number != null){
                                    if(+order.num > (+order.next_order_number+1)){
                                        var missing = (+order.num - +order.next_order_number) - 1;

                                        tdom += '<tr style="background-color: #f1c40f;">';
                                        if(missing > 1){
                                            tdom += '<td colspan="5" class="text-center"><b>( ' + (+order.next_order_number + 1) + ' - ' + (order.num - 1) + ' )</b> '+ missing +' invoices missing </td>';
                                        }else{
                                            tdom += '<td colspan="5" class="text-center"><b>( '+ (+order.num - 1) +' )</b> '+ missing +' invoice missing</td>';
                                        }
                                        tdom += '</tr>';
                                    }
                                }
							});
						} else {
							tdom += '<tr><th class="text-center" colspan="5">Sorry, No orders added.</th></tr>';
						}
						$('.no_orders tbody').html(tdom);
						$('[data-toggle="tooltip"]', '.no_orders tbody').tooltip();
					}


					$('#modal_newOrder').modal('show');
				}, 'json');
			}

			function editOrder_deleteItem(data) {
				$.post("{{ url('/map/editOrder_deleteItem') }}", {_token: _token, data: data}, function (e) {
					$.highlightOrThrow(e, function () {
						editOrder_environment('save');
						editOrder_loadOrder(data);
					});
				}, 'json');
			}

			function editOrder_updateItem(data) {
				$.post("{{ url('/map/editOrder_updateItem') }}", {_token: _token, data: data}, function (e) {
					$.highlightOrThrow(e, function () {
						editOrder_environment('save');
						editOrder_loadOrder(data);
					});
				}, 'json');
			}

			function editOrder_saveItem(data) {
				$.post("{{ url('/map/editOrder_saveItem') }}", {_token: _token, data: data}, function (e) {
					$.highlightOrThrow(e, function () {
						editOrder_environment('save');
						editOrder_loadOrder(data);
					});
				}, 'json');
			}

			function editOrder_environment(method) {
				$.clearHighlights();
				$('.eo_code').val('');
				$('.eo_name').val('');
				$('.eo_volume').val('');
				$('.eo_weight').val('');
				$('.eo_qty').val('');
				if (typeof(method) == 'string') {
					if (method == 'save') {
						$('.eo_updateWrapper').hide();
						$('.eo_saveWrapper').show();
						$('.eo_newItemWrapper').show();
						$('.eo_save').data('item_id', "");
					} else if (method == 'update') {
						$('.eo_saveWrapper').hide();
						$('.eo_updateWrapper').show();
						$('.eo_newItemWrapper').hide();
					} else if (method == 'clear') {
						$('.eo_save').data('item_id', "");
					}
				}
			}

			function editOrder_loadOrder(data) {
				var $modal = $('#modal_editOrder');
				editOrder_environment('save');
				if (data.order_id != undefined && data.order_id != '') {

					$('.eo_save, .eo_update').data('trip_id', data.trip_id);
					$('.eo_save, .eo_update').data('order_id', data.order_id);

					$('.eo_code').prop('disabled', false);
					$('.eo_name').prop('disabled', false);
					$('.eo_volume').prop('disabled', false);
					$('.eo_weight').prop('disabled', false);

					$.post("{{ url('/map/editOrder_loadOrder') }}", {_token: _token, data: data}, function (e) {
						if (e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('order') && e.hasOwnProperty('items') && e.hasOwnProperty('count') && e.hasOwnProperty('itemsList') && typeof(e.items) == 'object' && typeof(e.itemsList) == 'object') {

							var order = e.order;
							var items = e.items;
							var count = e.count;
							var itemsList = e.itemsList;

							var sdom = '<option value="">Create new item</option>';
							$.each(itemsList, function (i, item) {
								sdom += '<option value="' + item.id + '" data-item_code="' + item.code + '" data-item_name="' + item.name + '" data-item_volume="' + item.volume + '" data-item_weight="' + item.weight + '">'+ item.code +' - ' + item.name + '</option>';
							});
							$('.eo_itemsList').html(sdom);
							$(".eo_itemsList").trigger("chosen:updated");


							$('.eo_title', $modal).html('Edit Order #' + order.id + '<small class="pull-right">' + order.name + '</small>');

							var tdom = '<tr>';
							tdom += '<th colspan="2">Available items : ' + count + '</th>';
							tdom += '</tr>';
							tdom += '<tr>';
							tdom += '<th>Original Volume : ' + order.orderVolume.toFixed(3) + ' CBM</th>';
							tdom += '<th>Original Weight : ' + order.orderWeight.toFixed(3) + ' Kg</th>';
							tdom += '</tr>';
							tdom += '<tr>';
							tdom += '<th>Remaining Volume : ' + order.remainingVolume.toFixed(3) + ' CBM</th>';
							tdom += '<th>Remaining Weight : ' + order.remainingWeight.toFixed(3) + ' Kg</th>';
							tdom += '</tr>';
							$('.eo_summary thead', $modal).html(tdom);


							var tdom = '';
							if (Object.keys(items).length > 0) {
								$.each(items, function (i, item) {
									tdom += '<tr>';
									tdom += '<td>' + item.code + '</td>';
									tdom += '<td>' + item.name + '</td>';
									tdom += '<td>' + item.qty + '</td>';
									tdom += '<td>' + item.remainingQty + '</td>';
									tdom += '<td>' + item.remainingVolume + '</td>';
									tdom += '<td>' + item.remainingWeight + '</td>';
									tdom += '<td>';
									tdom += '<div class="btn-group">';
									tdom += '<button class="btn btn-warning btn-xs eo_editItem" data-item_id="' + item.id + '" data-item_code="' + item.code + '" data-item_name="' + item.name + '" data-item_volume="' + item.itemVolume + '" data-item_weight="' + item.itemWeight + '" data-item_qty="' + item.qty + '"><i class="fa fa-pencil"></i></button>';
									tdom += '<button class="btn btn-danger btn-xs eo_deleteItem" data-trip_id="' + data.trip_id + '" data-order_id="' + data.order_id + '" data-item_id="' + item.id + '"><i class="fa fa-close"></i></button>';
									tdom += '</div>';
									tdom += '</td>';
									tdom += '</tr>';
								});
							} else {
								tdom = '<tr><th class="text-center" colspan="7">Sorry, No results found.</th></tr>';
							}
							$('.eo_items tbody', $modal).html(tdom);


						} else {
							$('.title', $modal).html('Sorry trip data not found.');
							$('.modal-body', $modal).html('');
						}
					}, 'json');

					$('#modal_editOrder').modal('show');

				} else {
					$.notify.error('<b>Invalid order selected</b>');
				}
			}

			function deleteOrder(trip_order_id) {
				$.post("{{ url('/map/deleteOrder') }}", {_token: _token, trip_order_id: trip_order_id}, function (e) {
					// if (e != undefined && e != null && e != '') {
					// 	preload_trip(e);
					// }
					//above lines are completed cuz if an order is completed we have to block it
					throwError(e, function(){
						preload_trip(e);
					});
				}, 'json');
			}

			function deleteVehicle(trip_vehicle_id) {
				$.post("{{ url('/map/deleteVehicle') }}", {_token: _token, trip_vehicle_id: trip_vehicle_id}, function (e) {
					// if (e != undefined && e != null && e != '') {
					// 	preload_trip(e);
					// }
					//above lines are completed cuz if an order is completed we have to block it
					throwError(e, function(){
						preload_trip(e);
					});
				}, 'json');
			}

			function loadSummary() {
				var $target = $('.trip_summary');

				var data = {
					fromDate: $(".tripsFilterFromDate").val(),
					toDate: $(".tripsFilterToDate").val()
				};


				var input = $.trim($(".trips_filter_number").val());
				var trip_number = isNaN(+input) ? 0 : input;

				
				$.clearHighlights();
				if(input.length > 0 && trip_number == 0){
					$(".trips_filter_number").highlightElement({'msg': 'Invalid trip number'});
				}
				
				
				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('/map/loadSummary') }}", {_token: _token, data: data}, function (e) {
					throwError(e);
					var dom = '';
					if (typeof(e) == 'object' && Object.keys(e).length > 0) {

						$.each(e, function (i, trip) {
							if(input.length > 0 && trip_number > 0){
								var regex = new RegExp(trip_number + '.*');
								if(String(trip.id).match(regex) == null){
									return true;
								}
							}//skipping values


							dom += '<div class="img-thumbnail form-group trip">';
							dom += '	<div class="alert title">';
							dom += '		<span><b>Trip #' + trip.id + '</b></span>';
							dom += '		<div class="btn-wrapper pull-right">';
							dom += '			<button class="btn btn-xs btn-warning editTrip" data-trip_id="' + trip.id + '"><i class="fa fa-pencil"></i></button>';
							@if(auth()->user()->can("view_trip_first_tab"))
							dom += '			<button class="btn btn-xs btn-danger deleteTrip" data-trip_id="' + trip.id + '"><i class="fa fa-close"></i></button>';
							@endif
							dom += '		</div>';
							dom += '	</div>';


							var vehicles = trip.vehicles;

							if (typeof(vehicles) == 'object' && Object.keys(vehicles).length > 0) {
								$.each(vehicles, function (i, vehicle) {

									var items = vehicle.items;
									var points = vehicle.points;
									var invoices = vehicle.invoices;

									dom += '<div class="row"><div class="col-md-12">';
									dom += '	<div class="col-xs-6" style="padding-left: 0px;">';
									dom += '		<div class="table-responsive">';
									if (typeof(items) == 'object' && Object.keys(items).length > 0) {

										dom += '			<table class="table table-bordered table-condensed" style="border:none;">';
										dom += '				<thead>';
										dom += '					<tr>';
										dom += '						<th colspan="3" style="border: none;">' + vehicle.number + ' Items Loaded</th>';
										dom += '					</tr>';
										dom += '					<tr>';
										dom += '						<th width="60px;" style="padding-left: 30px; border:none;">#</th>';
										dom += '						<th style="padding-left: 30px; border:none;">Name</th>';
										dom += '						<th width="100px;" style="padding-left: 30px; border:none;">Qty</th>';
										dom += '					</tr>';
										dom += '				</thead>';
										dom += '				<tbody>';

										// var invoice_nums = [];



										$.each(items, function (j, item) {
											// invoice_nums.push(item.num);
											
											dom += '					<tr>';
											dom += '						<td style="padding-left: 30px; border: none;">' + (++i) + '</td>';
											dom += '						<td style="padding-left: 30px; border: none;">Order #' + item.num + ' '+ item.partialStatus +' - ' + item.name + '</td>';
											dom += '						<td style="padding-left: 30px; border: none;">' + item.qty + '</td>';
											dom += '					</tr>';

										});


										dom += '				</tbody>';
										dom += '				<tfoot>';
										dom += '					<tr style="border-top: 1px solid #eee; border-bottom: 1px solid #eee;">';
										dom += '						<th style="border: none; border-right: 1px solid #eee;">Totals</th>';
										dom += '						<th colspan="2" style="white-space: nowrap; border: none;">';
										dom += '							<span style="display: inline-block; width:50%; text-align: right;">Volume : '+ vehicle.totalItemVolume +' CBM</span>';
										dom += '							<span style="display: inline-block; width:50%; text-align: right;">Weight: '+ vehicle.totalItemWeight +' Kg</span>';
										dom += '						</th>';
										dom += '					</tr>';
										dom += '				</tfoot>';
										dom += '			</table>';

									} else {
										dom += '			<table class="table table-bordered table-condensed">';
										dom += '				<thead>';
										dom += '					<tr>';
										dom += '						<td style="border: none;">-- no items added for <b>' + vehicle.number + '</b> --</td>';
										dom += '					</tr>';
										dom += '				</thead>';
										dom += '			</table>';
									}

									if(vehicle.bulk_volume > 0 || vehicle.bulk_weight > 0){
										dom += '<table class="table table-bordered table-condensed">';
										dom += '	<thead>';
										dom += '		<tr><th colspan="2">Bulk drop summary for '+ vehicle.number +'</th><tr>';
										dom += '	</thead>';
										dom += '	<tbody>';
										dom += '		<tr><td>Bulk Volume</td><td>'+ vehicle.bulk_volume +' CBM</td></tr>';
										dom += '		<tr><td>Bulk Weight</td><td>'+ vehicle.bulk_weight +' KG</td></tr>';
										dom += '	</tbody>';
										dom += '</table>';
									}
									
									if((vehicle.bulk_volume > 0 || vehicle.bulk_weight > 0) || (typeof(items) == 'object' && Object.keys(items).length > 0)){

										var destinations = "";
										if(vehicle.hasOwnProperty('points') && Object.keys(vehicle.points).length > 0){
											$.each(vehicle.points, function (p, point) {
												if (p == 0) {
													destinations += point.name;
												} else {
													destinations += ", " + point.name;
												}
											});
										}

										dom += '<div class="form-group table-responsive">';
										dom += '	<table class="table loading_details">';
										dom += '		<tr>';
										dom += '			<td><b><small>Loading Bay</small></b></td>';
										dom += '			<td><b><small>Loading officer name</small></b></td>';
										dom += '		</tr>';
										dom += '		<tr>';
										dom += '			<td><input type="text" class="loading_bay" value="'+ vehicle.loading_bay +'"></td>';
										dom += '			<td><input type="text" class="loading_officer" value="'+ vehicle.loading_officer +'"></td>';
										dom += '		</tr>';
										dom += '		<tr>';
										dom += '			<td><b><small>Loading start time</small></b></td>';
										dom += '			<td><b><small>Loading end time</small></b></td>';
										dom += '		</tr>';
										dom += '		<tr>';
										dom += '			<td><input type="text" class="loading_start datetimepicker" value="'+ vehicle.loading_start +'"></td>';
										dom += '			<td><input type="text" class="loading_end datetimepicker" value="'+ vehicle.loading_end +'"></td>';
										dom += '		</tr>';
										dom += '		<tr>';
										dom += '			<td colspan="2" style="padding-top: 5px !important;"><button class="btn btn-success btn-xs save_loading_details" data-id="'+ vehicle.id +'">Save Loading Details</button></td>';
										dom += '		</tr>';
										dom += '	</table>';
										dom += '</div>';

										dom += '			<div class="form-inline gatepass_date_tracker">';
										dom += '				<div class="form-group">';
										@if(auth()->user()->can("view_trip_first_tab"))
										dom += '					<input type="text" class="form-control gatepass_date" value="'+ vehicle.gatepass_date +'" placeholder="Gatepass Date">';
										@else
										dom += '					<input type="text" disabled class="form-control gatepass_date" value="'+ vehicle.gatepass_date +'" placeholder="Gatepass Date">';
										@endif
										dom += '				</div>';
										dom += '				<div class="form-group">';
										dom += '					<button data-trip_id="' + trip.id + '" data-id="'+ vehicle.id +'" data-vehicle="' + vehicle.transporter_vehicle_id + '" data-goodsCost="'+ vehicle.goodsCost +'" data-orders="' + invoices.join(",") + '" data-points="'+ destinations +'" data-takeoff="'+ vehicle.takeoff_date +'" class="btn btn-info gatePass">Gate Pass <span class="fa fa-print"></span></button>';
										dom += '				</div>';
										dom += '				<div class="form-group">';
										if(vehicle.complete == 0)
											dom += '            	<button data-trip_id="' + trip.id + '" data-vehicle="' + vehicle.transporter_vehicle_id + '" class="btn btn-danger endTrip">End Trip <span class="fa fa-car"></span></button> ';
										else
											dom += '            	<button disabled="true" class="btn btn-success endedTrip">Ended Trip <span class="fa fa-car"></span></button> ';
										dom += '				</div>';
										dom += '			</div>';
										dom += '<hr>';
									}

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

									if (typeof(points) == 'object' && Object.keys(points).length > 0) {

										if (Object.keys(items).length > 0) {
											dom += '	<div class="img-thumbnail tv_drop_points col-xs-6">';
										} else {
											dom += '	<div class="img-thumbnail tv_drop_points col-xs-6" style="margin-top: 0px;">';
										}

										$.each(points, function (p, point) {

											if (p == 0) {
												// dom += point.name;
												dom += '<div style="display: inline-block;">';
												dom += point.seal_number + '</br>' + point.name;
												dom += '</div>';
											} else {
												// dom += arrow + point.name;
												dom += arrow;
												dom += '<div style="display: inline-block">';
												dom += '<span data-toggle="tooltip" title="Seal number">'+ point.seal_number +'</span><br>';
												dom += '<span data-toggle="tooltip" title="Feedback sheet number">'+ point.feedback_sheet_number +'</span><br>';
												dom += point.name;
												dom += '</div>';
											}

										});

										dom += '	</div>';

									} else {
										if (Object.keys(items).length > 0) {
											dom += '	<div class="img-thumbnail tv_drop_points col-xs-6">';
										} else {
											dom += '	<div class="img-thumbnail tv_drop_points col-xs-6" style="margin-top: 0px;">';
										}
										dom += '		-- no drop points added --';
										dom += '	</div>';
									}

									dom += '</div></div>';
								});
							} else {
								dom += '<div class="row"><div class="col-md-12">';
								dom += '	<div class="col-xs-6" style="padding-left: 0px;">';
								dom += '		<div class="table-responsive">';

								dom += '			<table class="table table-bordered table-condensed">';
								dom += '				<thead>';
								dom += '					<tr>';
								dom += '						<td style="border: none;">-- no vehicles added --</td>';
								dom += '					</tr>';
								dom += '				</thead>';
								dom += '				<tbody></tbody>';
								dom += '			</table>';

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

								dom += '	<div class="img-thumbnail tv_drop_points col-xs-6" style="margin-top: 0px;">';
								dom += '		-- no drop points added --';
								dom += '	</div>';
								dom += '</div>';
							}

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

						});

					}else{
						dom += '-- no trips found --';
					}

					$target.html(dom);
					$('[data-toggle="tooltip"]', $target).tooltip();

					$('.gatepass_date').datepicker({
						dateFormat: "yy-mm-dd"
					});

					$('.datetimepicker').datetimepicker({
						dateFormat: "yy-mm-dd",
						timeFormat: "HH:mm"
					});
				}, 'json');

			}

			

			function temp() {
				var $tbody = $('.tripSummary 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('/map/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>';

							if (k.set != undefined) {
								$.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;
											}
										});

										if (Object.keys(m.items).length > 0) {
											$.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 editTrip" data-trip_id="' + i + '"><i class="fa fa-pencil"></i></button>';
													dom += '<button class="btn btn-sm btn-danger deleteTrip" data-trip_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 += '<td colspan="2"></td>';
											dom += '<td></td>';
											dom += '<td>';
											dom += '<div class="btn-group">';
											dom += '<button class="btn btn-sm btn-warning editTrip" data-trip_id="' + i + '"><i class="fa fa-pencil"></i></button>';
											dom += '<button class="btn btn-sm btn-danger deleteTrip" data-trip_id="' + i + '"><i class="fa fa-close"></i></button>';
											dom += '</div>';
											dom += '</td>';
										}


									} 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;
											}
										});
										if (Object.keys(m.items).length > 0) {
											$.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 += '<td colspan="2"></td> <td></td>';
										}
									}
								});
							} else {
								dom += '<td colspan="4"></td>';
								dom += '<td>';
								dom += '<div class="btn-group">';
								dom += '<button class="btn btn-sm btn-warning editTrip" data-trip_id="' + i + '"><i class="fa fa-pencil"></i></button>';
								dom += '<button class="btn btn-sm btn-danger deleteTrip" data-trip_id="' + i + '"><i class="fa fa-close"></i></button>';
								dom += '</div>';
								dom += '</td>';
							}

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

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

			function completeTrip(data) {
				$.post("{{ url('/map/completeTrip') }}", {_token: _token, data: data}, function (e) {
					if (e != undefined && e != '') {
						// var msg = 'You are currently editing trip <strong>#' + e + '</strong>';
						// setNotification(msg);
						// resetActions('update', e);
						// preload_incompleteTrip();
						resetActions('save');
						$('.notification').html('');
						$('a[href="#step1"]').trigger('click');
						$.notify.success('<b>Successfully marked as complete.</b>');
					}
				}, 'json');
			}

			function save(data) {
				$.post("{{ url('/map/saveRoute') }}", {_token: _token, data: data}, function (e) {
					throwError(e, function () {
						if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('trip_id') && e.hasOwnProperty('vehicle_id') && e.trip_id != undefined && e.vehicle_id != undefined) {
							preload_trip(e.trip_id, e.vehicle_id);
							$.notify.success('<b>Successfully saved.</b>');
						}
					});
				}, 'json');
			}

			function removePoint(id) {
				var data = {
					id: id,
					trip_id: $('.cancelTrip').val(),
					vehicle_id: $('.tripVehiclesList').val()
				};

				if (data.id != undefined && data.id != null && data.id != '') {
					$.post("{{ url('/map/removePoint') }}", {_token: _token, data: data}, function (e) {
						if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('trip_id') && e.hasOwnProperty('vehicle_id') && e.trip_id != undefined && e.vehicle_id != undefined) {
							preload_trip(e.trip_id, e.vehicle_id);
						}
					}, 'json');
				} else {
					$.notify.error('<b>Invalid record selected.</b>');
				}
			}

			function addPoint(data) {
				if (data.trip_id != undefined && data.trip_id != null && data.trip_id != '') {
					if (data.vehicle_id != undefined && data.vehicle_id != null && data.vehicle_id != '') {
						$.post("{{ url('/map/addPoint') }}", {_token: _token, data: data}, function (e) {
							if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('trip_id') && e.hasOwnProperty('vehicle_id') && e.trip_id != undefined && e.vehicle_id != undefined) {
								preload_trip(e.trip_id, e.vehicle_id);
							}
						}, 'json');
					} else {
						$.notify.error('<b>Select a vehicle.</b>');
					}
				} else {
					$.notify.error('<b>Invalid record selected.</b>');
				}
			}

			function preload_incompleteTrip() {
				$.post("{{ url('/map/preload_incompleteTrip') }}", {_token: _token}, function (trip_id) {
					if (trip_id != undefined && trip_id != null && trip_id != '') {
						var msg = 'Trip <strong>#' + trip_id + '</strong> is not fully completed. You can continue editing it.';
						setNotification(msg);
						resetActions('inprogress', trip_id);
					} else {
						resetActions('save');
					}
				}, 'json');
			}

			function cancelTrip(id) {
				$.post("{{ url('/map/cancelTrip') }}", {_token: _token, id: id}, function (e) {
					// if (e != undefined && e != null && e != '') {
					// 	resetActions('save');
					// 	var msg = 'Trip <strong>#' + e + '</strong> has been deleted.';
					// 	setNotification(msg, 'danger');
					// 	$.notify.success('<b>Trip #' + e + ' has been deleted</b>');
					// 	loadSummary();
					// }
					throwError(e, function(){
						resetActions('save');
						var msg = 'Trip <strong>#' + e + '</strong> has been deleted.';
						setNotification(msg, 'danger');
						$.notify.success('<b>Trip #' + e + ' has been deleted</b>');
						loadSummary();
					});
				}, 'json');
			}

			function resetActions(type, id) {
				$('.cancelTrip').val("");
				$('.finishTrip').val("");
				$('.save').val("");
				if (id != undefined && id != '') {
					$('.cancelTrip').val(id);
					$('.updateTrip').val(id);
					$('.save').val(id);
					preload_trip(id);
				}
				if (type == 'save') {
					$('.cancelTripWrapper').hide();
					$('.updateTripWrapper').hide();
					$('.createTripWrapper').show();
					$('.editor').hide();
					preload_trip();
				} else if (type == 'inprogress') {
					$('.createTripWrapper').hide();
					$('.updateTripWrapper').hide();
					$('.cancelTripWrapper').show();
					$('.editor').show();
				} else if (type == 'update') {
					$('.createTripWrapper').hide();
					$('.cancelTripWrapper').hide();
					$('.updateTripWrapper').show();
					$('.editor').show();
				}
			}

			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 createTrip() {
				$.post("{{ url('/map/createTrip') }}", {_token: _token}, function (e) {
					if (e != null && typeof(e) == 'object' && e.hasOwnProperty('msg') && e.hasOwnProperty('trip_id') && e.hasOwnProperty('method')) {
						setNotification(e.msg);
						resetActions('update', e.trip_id);
					}
				}, 'json');
			}

			function saveVehicle(vehicle_id) {
				var data = {
					trip_id: $('.cancelTrip').val(),
					vehicle_id: vehicle_id
				};

				if (data.trip_id != undefined && data.trip_id != null && data.trip_id != '') {
					if (data.vehicle_id != undefined && data.vehicle_id != '') {
						$.post("{{ url('/map/saveVehicle') }}", {_token: _token, data: data}, function (e) {
							throwError(e, function () {
								preload_trip(e);
							});
						}, 'json');
					} else {
						$.notify.error("<b>Invalid vehicle selected.</b>");
					}
				} else {
					$.notify.error("<b>Invalid trip.</b>");
				}
			}

			var oldHeight = 0;

			function setFixedHeight() {
				var currentHeight = $('.editor').height();

				if (currentHeight > oldHeight) {
					oldHeight = currentHeight;
					$('.editor').height(currentHeight);
				}
			}

			function saveOrder(order_id) {
				var data = {
					trip_id: $('.cancelTrip').val(),
					order_id: order_id
				};

				if (data.trip_id != undefined && data.trip_id != null && data.trip_id != '') {
					if (data.order_id != undefined && data.order_id != '') {

						$.post("{{ url('/map/saveOrder') }}", {_token: _token, data: data}, function (e) {
							throwError(e, function () {
								preload_trip(e);
							});
						}, 'json');
					} else {
						$.notify.error("<b>Invalid order selected.</b>");
					}
				} else {
					$.notify.error("<b>Invalid trip.</b>");
				}
			}

			function preload_trip(trip_id, selected_vehicle_id) {

				selected_vehicle_id = selected_vehicle_id || '';

				var $vehicles = $('.vehicles');
				var $orders = $('.orders');
				var $tripVehicles = $('.tripVehiclesList');
				var $route = $('.route');
				var $startingLocations = $('.startingLocationsList');
				var $endingLocations = $('.endingLocationsList');

				$vehicles.html('');
				$orders.html('');
				$tripVehicles.html('<option>Select a vehicle</option>');
				$route.html('-- drop points not loaded --');
				$startingLocations.html('<option>Select a starting location</option>');
				$endingLocations.html('<option>Select an ending location</option>');

				$.post("{{ url('/map/preload_trip') }}", {_token: _token, trip_id: trip_id, selected_vehicle_id: selected_vehicle_id}, function (e) {
					var dom = '';
					var vehicles = e.vehicles;
					var orders = e.orders;

					var dropMenu = '';
					if(vehicles != undefined && typeof(vehicles) == "object" && Object.keys(vehicles).length > 0){
						dropMenu += '	<ul class="dropdown-menu">';
						dropMenu += '		<h6 style="margin: 0px;" class="dropdown-header">SELECT A VEHICLE</h6>';
						$.each(vehicles, function(i, k){
							var v = k.vehicle;
							dropMenu += '	<li>';
							dropMenu += '		<a href="#" class="dropdown-item" data-vehicle-id="'+ v.id +'">'+ v.number +'</a>';
							dropMenu += '	</li>';
						});
						dropMenu += '	</ul>';
					}

					$.each(orders, function (i, k) {
						if (typeof(k) == 'object' && k.hasOwnProperty('order') && k.hasOwnProperty('items') && k.hasOwnProperty('total')) {
							var order = k.order;
							var total = k.total;
							var items = k.items;

							dom += '<div class="img-thumbnail form-group col-xs-12 order" data-trip_id="' + order.trip_id + '" data-trip_order_id="' + order.id + '"  data-order_id="' + order.order_id + '">';
							dom += '	<div class="heading">';
							dom += '		' + order.distributor + ' <span class="pull-right">Order ' + order.num + ' <i class="btn btn-xs deleteOrder text-danger fa fa-close" data-trip_order_id="' + order.id + '"></i></span>';
							dom += '	</div>';
							dom += '	<div class="body">';
							dom += '		<div class="form-group summary">';
							dom += '			<button class="btn btn-primary btn-xs expander">';
							dom += '				<i aria-hidden="true" class="fa fa-arrows-v fa-lg"></i>';
							dom += '			</button>';
							dom += '			<table class="table table-bordered table-condensed" draggable="true" style="margin-bottom: 0px;">';
							dom += '				<thead>';
							dom += '					<tr>';
							dom += '						<th colspan="2" width="50%">Available Items : ' + total.count + '</th>';
							dom += '						<th colspan="2" width="50%">';
							dom += '							<label class="btn btn-warning btn-xs"><input type="radio" name="'+ order.id +'_order_pick_options" class="pickFullOrder" /> Full</label>';
							dom += '							<label class="btn btn-warning btn-xs"><input type="radio" name="'+ order.id +'_order_pick_options" class="pickEmptyOrder" /> Empty</label>';
							dom += '							<label class="btn btn-warning btn-xs"><input type="radio" name="'+ order.id +'_order_pick_options" class="pickNormalOrder" /> --</label>';


							dom += '							<ul style="list-style: none; padding: 0px;" class="vehicle_dropdown pull-right">';
							dom += '								<li class="dropdown">';
							dom += '	    							<button class="btn btn-xs btn-info dropdown-toggle" data-toggle="dropdown" style="height: 25px;"><i class="fa fa-lg fa-angle-double-right" style="font-weight: bold; color: black;"></i></button>';


							dom += dropMenu;
							

							dom += '								</li>';
							dom += '							</ul>';


							dom += '						</th>';
							dom += '					</tr>';

							dom += '					<tr>';
							dom += '						<th colspan="2" width="50%">Original Volume : ' + order.orderVolume.toFixed(3) + '</th>';
							dom += '						<th colspan="2" width="50%">Original Weight : ' + order.orderWeight.toFixed(3) + '</th>';
							dom += '					</tr>';

							dom += '					<tr>';
							dom += '						<th colspan="2" width="50%">Remaining Volume : ' + order.remainingVolume.toFixed(3) + '</th>';
							dom += '						<th colspan="2" width="50%">Remaining Weight : ' + order.remainingWeight.toFixed(3) + '</th>';
							dom += '					</tr>';

							dom += '				</thead>';
							dom += '			</table>';
							dom += '			<button class="btn btn-success btn-xs editOrder" data-order_id="' + order.order_id + '" data-trip_id="' + trip_id + '">';
							dom += '				<i aria-hidden="true" class="fa fa-pencil fa-lg"></i>';
							dom += '			</button>';
							dom += '		</div>';
							dom += '		<div class="form-group results" style="display: none;">';
							dom += '			<table class="table table-bordered table-condensed items" style="margin-bottom: 0px;">';
							dom += '				<thead>';
							dom += '					<tr>';
							dom += '						<td>Item</td>';
							dom += '						<td width="80px">Tot. Vol</td>';
							dom += '						<td width="80px">Qty</td>';
							dom += '						<td class="text-center" width="120px"></td>';
							dom += '					</tr>';
							dom += '				</thead>';
							dom += '				<tbody>';

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

									dom += '			<tr>';
									dom += '				<td>' + item.item + '</td>';
									dom += '				<td>' + item.volume.toFixed(3) + '</td>';
									dom += '				<td>' + item.qty + '</td>';
									dom += '				<td>';
									dom += '					<div class="input-group drag" draggable="true" data-trip_order_id="' + order.id + '" data-trip_id="' + order.trip_id + '" data-item_id="' + item.id + '" data-order_id="' + order.order_id + '">';
									dom += '						<input class="form-control orderItem" data-item_id="' + item.id + '" type="text" value="' + item.qty + '"> <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>';
							dom += '			<button class="btn btn-xs btn-primary printOrderSummary" data-order_id="'+ order.order_id +'"><i class="fa fa-print"></i></button>';
							dom += '<span class="pull-right" style="font-size: 12px;">'+ order.location +'</span>';
							dom += '		</div>';
							dom += '	</div>';
							dom += '</div>';
						}
					});
					$orders.html(dom);


					dom = '';
					$.each(vehicles, function (i, k) {
						if (typeof(k) === 'object' && k.hasOwnProperty('vehicle') && k.hasOwnProperty('items') && k.hasOwnProperty('points')) {

							var vehicle = k.vehicle;
							var items = k.items;
							var points = k.points;

							dom += '<div class="img-thumbnail form-group col-xs-12 drop vehicle" data-trip_vehicle_id="' + vehicle.id + '">';
							dom += '	<div class="heading" style="padding-top: 0px;">';
							dom += '		' + vehicle.number + '<span class="pull-right"><select class="bg-success trip_types_list" data-trip_vehicle_id="'+ vehicle.id +'" style="height: 25px; display: inline-block; width: 85px; margin-right: 10px;">'+ vehicle.trip_types_list +'</select><input type="text" value="'+ vehicle.takeoff_date +'" class="bg-success takeoff_date" style="height: 25px; display: inline-block; width: 85px; z-index:100; position: relative;" /><button class="btn btn-xs btn-primary setTakeOffDate" value="'+ vehicle.id +'" style="display: inline-block; margin-right: 3px; height: 25px;"><i class="fa fa-check"></i></button>' + vehicle.transporter + ' <i class="btn btn-xs deleteVehicle text-danger fa fa-close" data-trip_vehicle_id="' + vehicle.id + '"></i></span>';
							dom += '	</div>';
							dom += '	<div class="body">';
							dom += '		<div class="form-group" style="margin-bottom: 8px;">';
							dom += '			<table class="table table-bordered table-condensed items" style="margin-bottom: 0px;">';
							dom += '				<thead>';
							dom += '					<td>Order #</td>';
							dom += '					<td>Product</td>';
							dom += '					<td>Volume</td>';
							dom += '					<td>Qty</td>';
							dom += '					<td class="text-center" width="40px"><i class="fa fa-gear"></i></td>';
							dom += '				</thead>';
							dom += '				<tbody>';

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

									dom += '			<tr>';
									dom += '				<td class="refParent">';
									dom += 						item.num;
									dom += '					<div class="refPopup"> Ref No : '+ $.addLeadingZeros(item.trip_vehicle_order_id, 6) +'</div>';
									dom += '				</td>';
									dom += '				<td>' + item.itemName + '</td>';
									dom += '				<td>' + item.volume.toFixed(3) + '</td>';
									dom += '				<td>' + item.qty + '</td>';
									dom += '				<td class="text-center">';
									dom += '					<button class="btn btn-danger btn-xs deleteItem" value="' + item.id + '"><i class="fa fa-trash fa-lg"></i></button>';
									dom += '				</td>';
									dom += '			</tr>';

								});
							} else {
								dom += '<tr><td colspan="5" class="text-center">-- no items added --</td></tr>';
							}

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

							if (typeof(vehicle.bulkDrops) == 'object' && Object.keys(vehicle.bulkDrops).length > 0) {


								dom += '		<div class="form-group">';
								dom += '			<table class="table table-bordered table-condensed summary">';
								dom += '				<thead>';
								dom += '					<th>Bulk Drops</th>';
								dom += '					<th>Volume</th>';
								dom += '					<th>Weight</th>';
								dom += '					<th class="text-center" width="40px"><i class="fa fa-gear"></i></th>';
								dom += '				</thead>';
								dom += '				<tbody>';

								$.each(vehicle.bulkDrops, function (i, bulkDrop) {
									dom += '<tr class="bg-success">';
									dom += '<td class="refParent">';
									dom += 'Order # ' + bulkDrop.num;
									dom += '<div class="refPopup"> Ref No : '+ $.addLeadingZeros(bulkDrop.id, 6) +'</div>';
									dom += '</td>';
									dom += '<td>' + bulkDrop.bulk_volume.toFixed(3) + '</td>';
									dom += '<td>' + bulkDrop.bulk_weight.toFixed(3) + '</td>';
									dom += '<td><button class="btn btn-xs btn-danger bulkDropDelete" data-id="' + bulkDrop.id + '"><i class="fa fa-trash fa-lg"></i></button></td>';
									dom += '</tr>';
								});


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

							}


							dom += '		<div class="form-group">';
							dom += '			<div class="img-thumbnail" style="width: 100%;">';
							dom += '				Drop Points';
							dom += '				<hr style="margin-top: 3px; margin-bottom: 10px;" />';
							dom += '				<div class="dropPoints">';


							if (typeof(points) == 'object' && Object.keys(points).length > 0) {
								var length = Object.keys(points).length;
								var c = 0;
								$.each(points, function (i, point) {
									if ((++c) < length) {
										dom += point + ', ';
									} else {
										dom += point;
									}
									c++;
								});
							} else {
								dom += '-- no drop points added --';
							}

							dom += '				</div>';
							dom += '			</div>';
							dom += '		</div>';
							dom += '		<div class="form-inline" style="margin-bottom: 5px;">';
							dom += '			<div class="form-group" style="width: 100%;">';
							dom += '				<label class="control-label" style: max-width: 50%;>Loaded Weight : ' + vehicle.loadedWeight.toFixed(3) + ' kg</label>';
							dom += '				<div style="max-width: 50%; float: right; position: relative;">';
							dom += '					<input type="text" class="form-control" value="'+ vehicle.goodsCost +'" placeholder="value of goods" style="height: 30px;" />';
							dom += '					<button class="btn btn-sm btn-'+ (vehicle.goodsCostSaved ? "primary" : "warning") +' goodCost" value="'+ vehicle.id +'"><i class="fa fa-check"></i></button>';
							dom += '				</div>';
							dom += '			</div>';
							dom += '		</div>';
							dom += '		<div class="form-group" style="margin-bottom: 0px;">';
							dom += '			<div class="progress" style="margin-bottom: 0px;">';
							if (vehicle.volumeExeeded != 1) {
								dom += '			<div class="progress-bar progress-bar-success" role="progressbar" style="width: ' + vehicle.volumePercentage + '%">';
								dom += '				<div class="text-danger" style="font-weight:bold;">';
								dom += '					<span>Vehicle&nbsp;volume&nbsp;</span><span class="capacity">' + vehicle.loadedVolume.toFixed(3) + '</span>/<span class="volume">' + vehicle.volume + '</span>';
								dom += '				</div>';
								dom += '			</div>';

							} else {
								dom += '			<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 100%">';
								dom += '				<div class="text-default" style="font-weight:bold;">';
								dom += '					<span>Vehicle&nbsp;volume&nbsp;</span><span class="capacity">' + vehicle.loadedVolume + '</span>/<span class="volume">' + vehicle.volume + '</span>';
								dom += '				</div>';
								dom += '			</div>';

							}

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


					if (e.tripVehicles != undefined && typeof(e.tripVehicles) == 'object' && Object.keys(e.tripVehicles).length > 0) {
						var dom = '<option value="">Select a vehicle</option>';
						$.each(e.tripVehicles, function (i, k) {
							if (k.selected == 1) {
								dom += '<option value="' + k.id + '" selected>' + k.transporter + ' - ' + k.number + '</option>';
							} else {
								dom += '<option value="' + k.id + '">' + k.transporter + ' - ' + k.number + '</option>';
							}
						});
						$tripVehicles.html(dom);
					}


					if (e.startingLocations != undefined && typeof(e.startingLocations) == 'object' && Object.keys(e.startingLocations).length > 0) {
						var dom = '<option value="">Select a starting location</option>';
						$.each(e.startingLocations, function (i, k) {
							if (k.selected == 1) {
								dom += '<option value="' + k.id + '" selected>' + k.name + '</option>';
							} else {
								dom += '<option value="' + k.id + '">' + k.name + '</option>';
							}
						});
						$startingLocations.html(dom);
					}

					if (e.endingLocations != undefined && typeof(e.endingLocations) == 'object' && Object.keys(e.endingLocations).length > 0) {
						var dom = '<option value="">Select an ending location</option>';
						$.each(e.endingLocations, function (i, k) {
							if (k.selected == 1) {
								dom += '<option value="' + k.id + '" selected>' + k.name + '</option>';
							} else {
								dom += '<option value="' + k.id + '">' + k.name + '</option>';
							}
						});
						$endingLocations.html(dom);
					}

					if (e.routeLocationsResult != undefined && e.routeLocationsResult != null && typeof(e.routeLocationsResult) == 'object') {
						var dom = '';
						if (Object.keys(e.routeLocationsResult).length > 0) {
							var routeLocationsCount = Object.keys(e.routeLocationsResult).length;

							$.each(e.routeLocationsResult, function (i, k) {

								var data = k.data;
								var locations = k.locations;

								dom += '<div class="col-xs-3 wrapper">';
								dom += '	<div class="form-group" style="margin-bottom: 2px; '+ (i > 0 ? "padding-left: 43px" : "") +'">';
								dom += '		<input type="text" class="form-control seal_number" value="'+ data.seal_number +'" style="height: 25px; font-size:0.9em;" placeholder="Seal number" data-toggle="tooltip" title="Seal number">';
								dom += '	</div>';
								dom += '	<div class="form-group" style="margin-bottom: 2px; '+ (i > 0 ? "padding-left: 43px" : "") +'">';
								dom += '		<input type="text" class="form-control feedback_sheet_number" value="'+ data.feedback_sheet_number +'" style="height: 25px; font-size:0.9em;" placeholder="Feedback sheet number" data-toggle="tooltip" title="Feedback sheet number">';
								dom += '	</div>';
								dom += '	<div class="form-group">';
								dom += '		<div class="input-group">';

								@if(auth()->user()->can("view_trip_first_tab"))
								dom += '			<button class="btn btn-danger btn-sm removePoint" data-id="' + data.id + '"><i class="fa fa-close"></i></button>';
								@endif

								if (i > 0) {
									dom += '			<span class="input-group-addon direction"><i class="fa fa-long-arrow-right fa-lg"></i></span>';
								}

								@if(auth()->user()->can("view_trip_first_tab"))
								dom += '			<select class="form-control point">';
								@elseif(!auth()->user()->can("view_trip_first_tab"))
								dom += '			<select class="form-control point" disabled>';
								@endif
								dom += '				<option value="">Select a drop point</option>';
								$.each(locations, function (l, m) {
									if (m.selected == 1) {
										dom += '		<option value="' + m.location_id + '" data-id="' + data.id + '" data-trip_id="' + data.trip_id + '" data-vehicle_id="' + data.transporter_vehicle_id + '" data-location_id="' + m.location_id + '" selected>' + m.name + '</option>';
									} else {
										dom += '		<option value="' + m.location_id + '" data-id="' + data.id + '" data-trip_id="' + data.trip_id + '" data-vehicle_id="' + data.transporter_vehicle_id + '" data-location_id="' + m.location_id + '">' + m.name + '</option>';
									}
								});
								dom += '			</select>';
								
								@if(auth()->user()->can("view_trip_first_tab"))
								if ((++i) == routeLocationsCount) {
									dom += '			<span class="input-group-addon addPointWrapper">';
									dom += '				<button class="btn btn-primary btn-sm addPoint"><i class="fa fa-plus"></i></button>';
									dom += '			</span>';
								}
								@endif
								dom += '		</div>';
								dom += '	</div>';
								dom += '</div>';

							});
						} else {
							@if(auth()->user()->can("view_trip_first_tab"))
							dom = '<button class="btn btn-primary btn-sm addPoint"><i class="fa fa-plus"></i></button>';
							@endif
						}
						$route.html(dom);
					} else {
						$route.html('-- drop points not loaded --');
					}

					$('[data-toggle="tooltip"]', $route).tooltip();

					$('.takeoff_date').datepicker({
						dateFormat: "yy-mm-dd"
					});

					loadSummary();
					setFixedHeight();
					load_detailedOrders();
					// load_ordersList();

				}, 'json');
			}

			function load_ordersList() {
				$.post("{{ url('/map/load_ordersList') }}", {_token: _token}, function (e) {
					var dom = '';
					if (typeof(e) == 'object' && Object.keys(e).length > 0) {
						$.each(e, function (i, k) {
							dom += '<option value="' + k.id + '">Order ' + k.num + '</option>';
						});
					} else {
						dom = '<option>No Orders added.</option>';
					}
					$('.ordersList').html(dom);
				}, 'json');
			}

			function load_vehiclesList() {
				$.post("{{ url('/map/load_vehiclesList') }}", {_token: _token}, function (e) {
					var dom = '';
					if (typeof(e) == 'object' && Object.keys(e).length > 0) {
						$.each(e, function (i, k) {
							dom += '<option value="' + k.id + '">' + k.transporter + ' - ' + k.number + '</option>';
						});
					} else {
						dom = '<option>No Vehicles added.</option>';
					}
					$('.vehiclesList').html(dom);
					$(".chosen-select").trigger("chosen:updated");
				}, 'json');
			}

			function dropItem($from, $to) {
				var data = {
					trip_id: $from.data('trip_id'),
					trip_order_id: $from.data('trip_order_id'),
					trip_vehicle_id: $to.data('trip_vehicle_id'),
					item_id: $from.data('item_id'),
					qty: +$from.find('input:text').val()
				};
				$.post("{{ url('/map/dropItem') }}", {_token: _token, data: data}, function (e) {
					throwError(e, function (trip_id) {
						preload_trip(trip_id);
					});
				}, '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 {
							if(callback != undefined && typeof(callback) == "function"){
								callback(e);
							}
						}
					}
				}
			}


			function deleteItem(id) {
				if (id != undefined && id != null && id != '') {
					$.post("{{ url('/map/deleteItem') }}", {_token: _token, id: id}, function (e) {
						// if (e != undefined && e != null && e != '') {
						// 	preload_trip(e);
						// }
						//above lines are commented cuz it needs to be block if order is completed

						throwError(e, function(){
							preload_trip(e);
						});

					}, 'json');
				} else {
					$.notify.error("<b>Invalid record selected.</b>");
				}
			}

			$(document).on("click", ".vehicle_dropdown .dropdown-menu li a", function(e){
				e.preventDefault();
				var vehicle_id = $(this).data("vehicle-id"); 

				var $from = $(this).closest(".vehicle_dropdown").closest(".table");

				var $order = $from.closest('.order');
				var $orderItems = $('.orderItem', $from.closest('.order'));
				var pickFullOrder = $('.pickFullOrder', $from).is(':checked');
				var pickEmptyOrder = $('.pickEmptyOrder', $from).is(':checked');
				var pickNormalOrder = $('.pickNormalOrder', $from).is(':checked');

				var data = {
					trip_vehicle_id: vehicle_id,
					trip_id: $order.data('trip_id'),
					trip_order_id: $order.data('trip_order_id'),
					order_id: $order.data('order_id'),
					pick_full_order: pickFullOrder,
					pick_empty_order: pickEmptyOrder,
					items: []
				};
				$orderItems.each(function () {
					var item = {
						qty: $(this).val(),
						item_id: $(this).data('item_id')
					};
					data.items.push(item);
				});

				$.post("{{ url('/map/bulkDrop') }}", {_token: _token, data: data}, function (e) {
					throwError(e, function () {
						preload_trip(e);
					});
				}, 'json');
			});

			function dropSummary($from, $to) {
				var $order = $from.closest('.order');
				var $orderItems = $('.orderItem', $from.closest('.order'));
				var pickFullOrder = $('.pickFullOrder', $from).is(':checked');
				var pickEmptyOrder = $('.pickEmptyOrder', $from).is(':checked');
				var pickNormalOrder = $('.pickNormalOrder', $from).is(':checked');


				var data = {
					trip_vehicle_id: $to.data('trip_vehicle_id'),
					trip_id: $order.data('trip_id'),
					trip_order_id: $order.data('trip_order_id'),
					order_id: $order.data('order_id'),
					pick_full_order: pickFullOrder,
					pick_empty_order: pickEmptyOrder,
					items: []
				};
				$orderItems.each(function () {
					var item = {
						qty: $(this).val(),
						item_id: $(this).data('item_id')
					};
					data.items.push(item);
				});

				$.post("{{ url('/map/bulkDrop') }}", {_token: _token, data: data}, function (e) {
					throwError(e, function () {
						preload_trip(e);
					});
				}, 'json');
			}


		});
	</script>
	@stop