@extends('layouts.master')
@section('title') Trip Status-Wise Report @stop
@section('body')

<div class="row">
	<div class="col-md-12">
		<div class="form-group col-md-3">
			<label class="control-label">From</label>
			<input type="text" class="form-control fromDate" name="fromDate">
		</div>
		<div class="form-group col-md-3">
			<label class="control-label">To</label>
			<input type="text" class="form-control toDate" name="toDate">
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="form-group col-md-3">
			<label class="control-label">Transporter</label>
			<select class="form-control transporters" name="transporters">
				<option value="">Please select an option</option>
			</select>
		</div>
		<div class="form-group col-md-3">
			<label class="control-label">Vehicle</label>
			<select class="form-control vehicles" name="vehicles">
				<option value="">Please select an option</option>
			</select>
		</div>
		<div class="form-group col-md-3">
			<label class="control-label">Trip Status</label>
			<select class="form-control status" name="status">
				<option value="0">Not Ended</option>
				<option value="1">Ended</option>
			</select>
		</div>
		<div class="form-group col-md-3" style="margin-top: 25px;">
			<button class="btn btn-primary generate">Generate</button>
		</div>
	</div>
</div>

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

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

			

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


@stop
@section('script')
<script type="text/javascript">

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


	$('.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()) );
		}
	});

	loadTransporters(function(){
		loadVehicles();
	});

	$('.transporters').change(function(){
		loadVehicles();
	});

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

	function highlightOrThrow(e, callback){
		$.clearHighlights();
		if(e != undefined && typeof(e) == 'object'){
			if(e.hasOwnProperty('errors')){
				$.each(e.errors, function(i, k){
					$('.'+i).highlightElement({msg: k});
				});
			}else if(e.hasOwnProperty('ok') && e.hasOwnProperty('msg') && e.ok == 0){
				$.notify.error({msg: e.msg});
			}else if(e.hasOwnProperty('ok') && e.hasOwnProperty('msg')  && e.ok == 1){
				$.notify.success({msg: e.msg});
				if(callback != undefinded && typeof(callback) == 'function'){
					callback();
				}
			}else{
				callback();
			}
		}else{
			console.log('object expected.');
		}
	}

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

	function loadVehicles(){
		var $select = $('.vehicles');
		var id = $('.transporters').val();
		var dom = '';
		$.post("{{ url('/report/loadVehicles') }}", {_token: _token, id: id}, function(e){
			if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
				$.each(e, function(i, k){
					dom += '<option value="'+ k.id +'">'+ k.number +'</option>';
				});
			}else{
				dom = '<option value="">Please select an option</option>';
			}
			$select.html(dom);
		}, 'json');
	}

	function generate(){
		var $report = $('.report');
		var data = {
			fromDate: $('.fromDate').val(),
			toDate: $('.toDate').val(),
			transporters: $('.transporters').val(),
			vehicles: $('.vehicles').val(),
			status: $('.status').val()
		};
		$report.html('-- no results found --');
		$.post("{{ url('/report2/generate') }}", {_token: _token, data: data}, function(e){
			highlightOrThrow(e, function(){

				var dom = '';
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<div class="panel panel-default">';
						dom += '	<div class="panel-heading">Trip '+ k.trip_id +' Details</div>';
						dom += '	<div class="panel-body">';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Drop Locations:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">';

						if(k.hasOwnProperty('locations') && Object.keys(k.locations).length > 0){
							var size = Object.keys(k.locations).length;
							$.each(k.locations, function(i, j){
								if((i+1) < size){
									dom += j.name + ', ';
								}else{
									dom += j.name;
								}
							});
						}else{
							dom += '-- no drop locations added --';
						}

						dom += '			</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Order Numbers:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">';

						if(k.hasOwnProperty('orders') && Object.keys(k.orders).length > 0){
							var size = Object.keys(k.orders).length;
							$.each(k.orders, function(i, o){
								if((i+1) < size){
									dom += o.num + ', ';
								}else{
									dom += o.num;
								}
							});
						}else{
							dom += '-- no orders added --';
						}

						dom += '			</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Order Value:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.goodsCost +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Trip Cost:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.cost +'</div>';
						dom += '		</div>';

						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right" style="font-weight: bold;">Additional Payments</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Direct deliveries:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.ap_direct_deliveries +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Offloading charges:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.ap_offloading_charges +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Demurrages:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.ap_demurrages +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Other</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.ap_other +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right" style="font-weight: bold;">Deductions</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Document errors:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.d_document_errors +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Other:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.d_other +'</div>';
						dom += '		</div>';
						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right" style="font-weight: bold;">Total Cost</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5" style="font-weight: bold;">'+ k.total_cost.toFixed(2) +'</div>';
						dom += '		</div>';

						dom += '		<div class="row">';
						dom += '			<div class="col-md-4 text-right">Distance:</div>';
						dom += '			<div class="col-md-1"></div>';
						dom += '			<div class="col-md-5">'+ k.distance +' km</div>';
						dom += '		</div>';
						dom += '	</div>';
						dom += '</div>';
					});
				}else{
					dom = 'Sorry, No results found.';
				}
				$report.html(dom);

			});
		}, 'json');

	}


});

</script>
@stop