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

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">Delivery Notes</label>
			<div class="input-group">
				<select class="form-control notesList" name="notesList">
					<option value="">Select a delivery note.</option>
				</select>
				<span class="input-group-addon" style="padding: 0px 1px 0px 0px;"><button class="btn btn-sm btn-primary notesModal"><i class="fa fa-edit fa-lg"></i></button></span>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="notesModal" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h3 style="margin: 0px;" class="no_title">Manage Delivery Notes</h3>
			</div>
			<div class="modal-body">

				<div class="row">
					<div class="col-md-4 noteSection">
						<div class="form-group">
							<label class="control-label">From</label>
							<select class="form-control clear noteFrom" name="noteFrom">
								<option value="">Select a location.</option>
							</select>
						</div>
						<div class="form-group">
							<label class="control-label">To</label>
							<select class="form-control clear noteTo" name="noteTo">
								<option value="">Select a location.</option>
							</select>
						</div>
						<div class="form-group">
							<div class="noteSaveWrapper">
								<button class="btn btn-primary noteSave">Save</button>
							</div>
							<div class="noteUpdateWrapper">
								<button class="btn btn-warning noteUpdate">Update</button>
								<button class="btn btn-info noteCancel">Cancel</button>
							</div>
						</div>
					</div>
					<div class="col-md-8">
						<div class="form-group">
							<h4 style="margin: 0px 0px 5px 0px; height: 20px;"><label class="label label-default noteTitle"></label></h4>
							<div class="table-responsive" style="max-height: 400px;">
								<table class="table table-bordered table-condensed notes">
									<thead>
										<tr>
											<th>Note #</th>
											<th>From</th>
											<th>To</th>
											<th class="text-center" style="width: 70px;"><i class="fa fa-gear"></i></th>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>

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

<div class="row">
	<div class="col-md-4 itemSection">
		<div class="form-group">
			<label class="control-label">Item</label>
			<select class="form-control clear itemsList" name="itemsList">
				<option value="">Select an item.</option>
			</select>
		</div>
		<div class="form-group">
			<label class="control-label">Code</label>
			<input type="text" class="form-control clear itemCode" disabled>
		</div>
		<div class="form-group">
			<label class="control-label">Name</label>
			<input type="text" class="form-control clear itemName" disabled>
		</div>
		<div class="form-group">
			<label class="control-label">Volume (CBM)</label>
			<input type="text" class="form-control clear itemVolume" disabled>
		</div>
		<div class="form-group">
			<label class="control-label">Weight (Kg)</label>
			<input type="text" class="form-control clear itemWeight" disabled>
		</div>
		<div class="form-group">
			<label class="control-label">Qty</label>
			<input type="text" class="form-control clear itemQty" name="itemQty">
		</div>
		<div class="form-group">
			<div class="itemUpdateWrapper" style="display: none;">
				<button class="btn btn-warning itemUpdate">Update</button>
				<button class="btn btn-info itemCancel">Cancel</button>
			</div>
			<div class="itemSaveWrapper" style="display: none;">
				<button class="btn btn-primary itemSave">Save</button>
			</div>
		</div>
	</div>
	<div class="col-md-8">
		<div class="form-group">
			<div class="table-responsive" style="margin-top: 25px; max-height: 400px;">
				<table class="table table-bordered table-condensed items">
					<thead>
						<tr>
							<th>Item Code</th>
							<th>Item Name</th>
							<th>Qty</th>
							<th class="text-center" style="width: 70px;"></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
</div>

@stop
@section('script')
<script type="text/javascript">
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');
		
		$(document).ajaxStart(function() {
			$('button').data('loading-text', '...');
			$('button').button('loading');
		}).ajaxStop(function(){
			$('button').button('reset');
		});

		reset_environment(['item', 'note'], 'save');

		loadNotes();
		loadLocations();
		loadNotesList(function(){
			loadItems();
		});

		loadItemsList(function(){
			$('.itemCode').val($('.itemsList option:selected').data('code'));
			$('.itemName').val($('.itemsList option:selected').data('name'));
			$('.itemVolume').val($('.itemsList option:selected').data('volume'));
			$('.itemWeight').val($('.itemsList option:selected').data('weight'));
		});


		$(document).on('click', '.noteEdit', function(){
			reset_environment(['note'], 'update');
			$('.noteUpdate').data('id', $(this).data('id'));
			$('.noteFrom').val($(this).data('from'));
			$('.noteTo').val($(this).data('to'));
		});

		$(document).on('click', '.noteEdit', function(){
			reset_environment(['note'], 'update');
			$('.noteUpdate').data('id', $(this).data('id'));
			$('.noteFrom').val($(this).data('from'));
			$('.noteTo').val($(this).data('to'));
		});

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

		$(document).on('click', '.itemEdit', function(){
			reset_environment(['item'], 'update');
			$('.itemUpdate').data('id', $(this).data('id'));
			$('.itemsList').val($(this).data('item_id'));
			$('.itemCode').val($(this).data('code'));
			$('.itemName').val($(this).data('name'));
			$('.itemVolume').val($(this).data('volume'));
			$('.itemWeight').val($(this).data('weight'));
			$('.itemQty').val($(this).data('qty'));
		});

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

		$('.notesList').change(function(){
			loadItems();
			$('.itemsList').val($('option:first-child', $('.itemsList')).val());
			$('.itemCode').val($('.itemsList option:selected').data('code'));
			$('.itemName').val($('.itemsList option:selected').data('name'));
			$('.itemVolume').val($('.itemsList option:selected').data('volume'));
			$('.itemWeight').val($('.itemsList option:selected').data('weight'));
			$('.itemQty').val('');
		});

		$('.itemsList').change(function(){
			$('.itemCode').val($('.itemsList option:selected').data('code'));
			$('.itemName').val($('.itemsList option:selected').data('name'));
			$('.itemVolume').val($('.itemsList option:selected').data('volume'));
			$('.itemWeight').val($('.itemsList option:selected').data('weight'));
		});


		$('.notesModal').click(function(){
			$('#notesModal').modal('show');
		});

		$('.itemCancel').click(function(){
			reset_environment(['item'], 'save');
		});

		$('.noteCancel').click(function(){
			reset_environment(['note'], 'save');
		});


		$('.noteSave').click(function(){
			var data = {
				noteFrom: $('.noteFrom').val(),
				noteTo: $('.noteTo').val()
			};
			noteSave(data);
		});

		$('.noteUpdate').click(function(){
			var data = {
				id: $(this).data('id'),
				noteFrom: $('.noteFrom').val(),
				noteTo: $('.noteTo').val()
			};
			noteUpdate(data);
		});

		$('.itemSave').click(function(){
			var data = {
				notesList: $('.notesList').val(),
				itemsList: $('.itemsList').val(),
				itemQty: $('.itemQty').val()
			};

			itemSave(data);
		});

		$('.itemUpdate').click(function(){
			var data = {
				id: $(this).data('id'),
				notesList: $('.notesList').val(),
				itemsList: $('.itemsList').val(),
				itemQty: $('.itemQty').val()
			};
			itemUpdate(data);
		});

		function itemDelete(id){
			$.post("{{ url('/delivery/itemDelete') }}", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					loadItems();
					reset_environment(['item'], 'save');
				});
			}, 'json');
		}

		function itemUpdate(data){
			$.post("{{ url('/delivery/itemUpdate') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					loadItems();
					reset_environment(['item'], 'save');
				});
			}, 'json');
		}

		function itemSave(data){
			$.post("{{ url('/delivery/itemSave') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					loadItems();
				});
			}, 'json');
		}

		function noteDelete(id){
			$.post("{{ url('/delivery/noteDelete') }}", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					loadNotes();
					reset_environment(['note'], 'save');
				});
			}, 'json');
		}

		function noteUpdate(data){
			$.post("{{ url('/delivery/noteUpdate') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					loadNotes();
					reset_environment(['note'], 'save');
				});
			}, 'json');
		}

		function noteSave(data){
			$.post("{{ url('/delivery/noteSave') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					loadNotes();
				});
			}, 'json');
		}

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

		function loadItemsList(callback){
			var $select = $('.itemsList');
			$.post("{{ url('/delivery/loadItemsList') }}", {_token: _token}, function(e){
				var dom = '<option value="">Select an item.</option>';
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<option value="'+ k.id +'" data-code="'+ k.code +'" data-name="'+ k.name +'" data-volume="'+ k.volume +'" data-weight="'+ k.weight +'">'+ k.name +'</option>';
					});
				}
				$select.html(dom);
				if(callback != undefined && typeof(callback) == 'function'){
					callback();
				}
			}, 'json');
		}

		function loadItems(){
			var $tbody = $('.items tbody');
			var note_id = $('.notesList').val();
			$.post("{{ url('/delivery/loadItems') }}", {_token: _token, note_id: note_id}, function(e){
				var dom = '';
				if(e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<tr>';
						dom += '<td>'+ k.code +'</td>';
						dom += '<td>'+ k.name +'</td>';
						dom += '<td>'+ k.qty +'</td>';
						dom += '<td class="text-center">';
						dom += '	<div class="btn-group">';
						dom += '		<button class="btn btn-warning btn-xs itemEdit" data-id="'+ k.id +'" data-item_id="'+ k.item_id +'" data-name="'+ k.name +'" data-code="'+ k.code +'" data-volume="'+ k.volume +'" data-weight="'+ k.weight +'" data-qty="'+ k.qty +'"><i class="fa fa-pencil"></i></button>';
						dom += '		<button class="btn btn-danger btn-xs itemDelete" data-id="'+ k.id +'"><i class="fa fa-trash fa-lg"></i></button>';
						dom += '	</div>';
						dom += '</td>';
						dom += '</tr>';
					});
				}else{
					dom = '<tr><th colspan="4" class="text-center">Sorry, No results found.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}

		function loadNotes() {
			var $tbody = $('.notes tbody');
			$.post("{{ url('/delivery/loadNotes') }}", {_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>'+ k.id +'</td>';
						dom += '<td>'+ k.txtFrom +'</td>';
						dom += '<td>'+ k.txtTo +'</td>';
						dom += '<td class="text-center">';
						dom += '	<div class="btn-group">';
						dom += '		<button class="btn btn-xs btn-warning noteEdit" data-id="'+ k.id +'" data-from="'+ k.from +'" data-to="'+ k.to +'"><i class="fa fa-pencil"></i></button>';
						dom += '		<button class="btn btn-xs btn-danger noteDelete" data-id="'+ k.id +'"><i class="fa fa-trash fa-lg"></i></button>';
						dom += '	</div>';
						dom += '</td>';
						dom += '</tr>';
					});
				}else{
					dom = '<tr><th class="text-center" colspan="4">No delivery notes added.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}

		function loadLocations(){
			var $select = $('.noteFrom, .noteTo');
			$.post("{{ url('/delivery/loadLocations') }}", {_token: _token}, function (e) {
				var dom = '<option value="">Select a location.</option>';
				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="">Select a location.</option>'
				}
				$select.html(dom);
			}, 'json');
		}

		function reset_environment(where, method){
			$.clearHighlights();
			if(typeof(where) == 'object' && typeof(method) == 'string'){
				if(Object.keys(where).length > 0){
					$.each(where, function(i, w){
						if(typeof(w) == 'string' && w == 'item'){
							$('.itemUpdate').data('id', '');
							$('.itemSection .clear').clear();
							if(method == 'save'){
								$('.itemUpdateWrapper').hide();
								$('.itemSaveWrapper').show();
							}else if(method == 'update'){
								$('.itemSaveWrapper').hide();
								$('.itemUpdateWrapper').show();
							}
						}

						if(typeof(w) == 'string' && w == 'note'){
							$('.noteUpdate').data('id', '');
							$('.noteSection .clear').clear();
							if(method == 'save'){
								$('.noteUpdateWrapper').hide();
								$('.noteSaveWrapper').show();
							}else if(method == 'update'){
								$('.noteSaveWrapper').hide();
								$('.noteUpdateWrapper').show();
							}
						}

					});
				}
			}
		}
	});
</script>
@stop