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

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">Transporter</label>
			<select class="form-control transporter" name="transporter">
				<option value="0">--</option>
			</select>
		</div>
		<div class="form-group">
			<label class="control-label">Vehicle number</label>
			<input type="text" class="form-control number clear" name="number">
		</div>
		<div class="form-group">
			<label class="control-label">Volume (CBM)</label>
			<input type="text" class="form-control volume clear" name="volume">
		</div>
		<div class="form-group">
			<label class="control-label">Weight (kg)</label>
			<input type="text" class="form-control weight clear" name="weight">
		</div>
		<div class="form-group">
			<label class="control-labal">Pallets</label>
			<input type="text" class="form-control pallet clear" name="pallet">
		</div>

		<div class="form-group">
			<label class="control-labal">Normal Rate (Rs)</label>
			<input type="text" class="form-control cpkm clear" name="cpkm">
		</div>

		<div class="form-group">
			<label class="control-labal">Up Country Rate (Rs)</label>
			<input type="text" class="form-control ucr clear" name="ucr">
		</div>

		<div class="form-group">
			<label class="control-labal">Return Collection Rate (Rs)</label>
			<input type="text" class="form-control rcr clear" name="rcr">
		</div>

		<div class="form-group">
			<label class="control-labal">Direct Outlets Rate (Rs)</label>
			<input type="text" class="form-control dor clear" name="dor">
		</div>


		<div class="form-group saveWrapper" style="display: none;">
			<button class="btn btn-primary save">Save</button>
		</div>
		<div class="form-group updateWrapper" style="display: none;">
			<button class="btn btn-warning clear update">Update</button>
			<button class="btn btn-info cancel">Cancel</button>
		</div>
	</div>
	<div class="col-md-8">
		<div class="form-group">
			<label class="label label-info selectedTransporter" style="font-size: 16px;"></label><label class="control-label">&nbsp;List of vehicles</label>
			<div class="table-responsive">
				<table class="table table-bordered vehicles">
					<thead>
						<tr>
							<th width="80px">#</th>
							<th>Transporter</th>
							<th>Vehicle Number</th>
							<th width="80px">Volume</th>
							<th width="80px">Weight</th>
							<th class="text-center" width="100px"><i class="fa fa-gear"></i></th>
						</tr>
					</thead>
					<tbody>
						<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

@stop
@section('script')
<script>
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');

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

		resetForm('save');

		loadTransporters(function(){
			loadVehiclesTable();
		});

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

			$('.update').val($(this).data('id'));
			$('.transporter').val($(this).data('transporter'));
			$('.number').val($(this).data('number'));
			$('.volume').val($(this).data('volume'));
			$('.weight').val($(this).data('weight'));
			$('.pallet').val($(this).data('pallet'));
			$('.cpkm').val($(this).data('cpkm'));
			$('.ucr').val($(this).data('ucr'));
			$('.rcr').val($(this).data('rcr'));
			$('.dor').val($(this).data('dor'));
		});

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

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

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

		$('.save').click(function(){
			var data = {
				transporter: $('.transporter').val(),
				number: $('.number').val(),
				volume: $('.volume').val(),
				weight: $('.weight').val(),
				pallet: $('.pallet').val(),
				cpkm: $('.cpkm').val(),
				ucr: $('.ucr').val(),
				rcr: $('.rcr').val(),
				dor: $('.dor').val(),
			};
			saveVehicle(data);
		});

		$('.update').click(function(){
			var data = {
				id: $(this).val(),
				transporter: $('.transporter').val(),
				number: $('.number').val(),
				volume: $('.volume').val(),
				weight: $('.weight').val(),
				pallet: $('.pallet').val(),
				cpkm: $('.cpkm').val(),
				ucr: $('.ucr').val(),
				rcr: $('.rcr').val(),
				dor: $('.dor').val(),
			};
			updateVehicle(data);
		});

		$('.transporter').change(function(){
			loadVehiclesTable();
		});


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

		function deleteVehicle(id){
			$.post("{{ url('/vehicle/deleteVehicle') }}", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadVehiclesTable();
				});
			}, 'json');
		}

		function updateVehicle(data){
			$.post("{{ url('/vehicle/updateVehicle') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadVehiclesTable();
				});
			}, 'json');
		}

		function saveVehicle(data){
			$.post("{{ url('/vehicle/saveVehicle') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadVehiclesTable();
				});
			}, 'json');
		}

		function loadTransporters(callback){
			$select = $('.transporter');
			$.post("{{ url('/vehicle/loadTransporters') }}", {_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.name +'</option>';
					});
				}
				$select.html(dom);
				if(callback !== undefined && typeof(callback) == 'function'){
					callback();
				}
			}, 'json');
		}
		
		function loadVehiclesTable(){
			var $tbody = $('.vehicles tbody');
			var transporter_id = $('.transporter').val();
			$('.selectedTransporter').html($('.transporter option:selected').text());
			$.post("{{ url('/vehicle/loadVehiclesTable') }}", {_token: _token, transporter_id: transporter_id}, function(e){
				var dom = '';
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<tr>';
						dom += '<td>'+ (++i) +'</td>';
						dom += '<td>'+ (k.transporter) +'</td>';
						dom += '<td>'+ (k.number) +'</td>';
						dom += '<td>'+ (k.volume) +'</td>';
						dom += '<td>'+ (k.weight) +'</td>';
						dom += '<td class="text-center"><div class="btn-group">';
						dom += '<button class="btn btn-sm btn-warning edit" data-id="'+ k.id +'" data-transporter="'+ k.transporter_id +'" data-number="'+ k.number +'" data-volume="'+ k.volume +'" data-weight="'+ k.weight +'" data-pallet="'+ k.pallet +'" data-cpkm="'+ k.cpkm +'" data-ucr="'+ k.ucr +'" data-rcr="'+ k.rcr +'" data-dor="'+ k.dor +'"><i class="fa fa-pencil"></i></button>';
						dom += '<button class="btn btn-sm btn-danger delete" data-id="'+ k.id +'"><i class="fa fa-trash"></i></button>';
						dom += '</div></td>';
						dom += '</tr>';
					});
				}else{
					dom = '<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}

	});
</script>
@stop