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

<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<label class="control-label">Item code</label>
			<input type="text" class="form-control clear code" name="code">
		</div>
		<div class="form-group">
			<label class="control-label">Item name</label>
			<input type="text" class="form-control clear name" name="name">
		</div>
		<div class="form-group">
			<label class="control-label">Item volume (CBM)</label>
			<input type="text" class="form-control clear volume" name="volume">
		</div>
		<div class="form-group">
			<label class="control-label">Item weight (Kg)</label>
			<input type="text" class="form-control clear weight" name="weight">
		</div>
		<div class="form-group">
			<div class="saveWrapper" style="display: none;">
				<button class="btn btn-primary save">Save</button>
			</div>
			<div class="updateWrapper" style="display: none;">
				<button class="btn btn-warning update">Update</button>
				<button class="btn btn-info cancel">Cancel</button>
			</div>
		</div>
	</div>
	<div class="col-md-8">
		<div class="table-responsive" style="max-height: 450px;">
			<div class="form-group tableItemsWrapper">
				Showing page <input type="text" style="width: 50px;" value="1" class="tableItemsPage"> of <span class="tableItemsCount">1</span> <button class="btn btn-success btn-xs tableItemsFilter">Filter</button>
			</div>
			<table class="table table-bordered table-condensed items">
				<thead>
					<tr>
						<th>#</th>
						<th>Code</th>
						<th>Name</th>
						<th>Volume</th>
						<th>Weight</th>
						<th class="text-center" style="width: 70px; min-width: 70px;"><i class="fa fa-gear"></i></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th class="text-center" colspan="6">Sorry, No results found.</th>
					</tr>
				</tbody>
			</table>
		</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');
		});

		resetForm('save');
		loadItems();

		$(document).on('click', '.edit', function(){
			resetForm('update');
			$('.update').data('id', $(this).data('id'));
			$('.code').val($(this).data('code'));
			$('.name').val($(this).data('name'));
			$('.volume').val($(this).data('volume'));
			$('.weight').val($(this).data('weight'));
		});

		$(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){
					deleteItem(id);
				}
			});
		});

		$(".tableItemsFilter").click(function(e){
			// e.preventDefault();
			// console.log(window.location.hash);
			// var data = {
			// 	page: $(this).closest(".tableItemsWrapper").find(".tableItemsPage").val()
			// };
			// console.log(data);
			loadItems();
		});

		$('.update').click(function(){
			var data = {
				id: $(this).data('id'),
				code: $('.code').val(),
				name: $('.name').val(),
				volume: $('.volume').val(),
				weight: $('.weight').val()
			};
			updateItem(data);
		});

		$('.save').click(function(){
			var data = {
				code: $('.code').val(),
				name: $('.name').val(),
				volume: $('.volume').val(),
				weight: $('.weight').val()
			};
			saveItem(data);
		});

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

		function loadItems(data){
			$_page = $(".tableItemsWrapper").find(".tableItemsPage");
			$_count = $(".tableItemsWrapper").find(".tableItemsCount");
			
			var data = {
				page: $(".tableItemsWrapper").find(".tableItemsPage").val()
			};

			var $tbody = $('.items tbody');
			$.post("{{ url('/item/loadItems') }}", {_token: _token, data: data}, function(e){
				var dom = '';
				if(e != undefined && typeof(e) == 'object'){
					if(e.hasOwnProperty("page") && e.hasOwnProperty("count")){
						$_page.val(e.page);
						$_count.html(e.count);
					}

					if(e.hasOwnProperty("items") && e.hasOwnProperty("index") && Object.keys(e.items).length > 0){
						$.each(e.items, function(i, k){
							dom += '<tr>';
							dom += '<td>'+ (e.index + i) +'</td>';
							dom += '<td>'+ k.code +'</td>';
							dom += '<td>'+ k.name +'</td>';
							dom += '<td>'+ k.volume +'</td>';
							dom += '<td>'+ k.weight +'</td>';
							dom += '<td class="text-center">';
							dom += '	<div class="btn-group">';
							dom += '		<button class="btn btn-warning btn-xs edit" data-id="'+ k.id +'" data-code="'+ k.code +'" data-name="'+ k.name +'" data-volume="'+ k.volume +'" data-weight="'+ k.weight +'">';
							dom += '			<i class="fa fa-pencil fa-lg"></i>';
							dom += '		</button>';
							dom += '		<button class="btn btn-danger btn-xs delete" data-id="'+ k.id +'">';
							dom += '			<i class="fa fa-close fa-lg"></i>';
							dom += '		</button>';
							dom += '	</div>';
							dom += '</td>';
							dom += '</tr>';
						});
					}else{
						dom = '<tr><th class="text-center" colspan="6">Sorry, No results found.</th></tr>';
					}
				}else{
					dom = '<tr><th class="text-center" colspan="6">Sorry, No results found.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}

		function deleteItem(id){
			if(id != undefined && id != ''){
				$.post("{{ url('/item/deleteItem') }}", {_token: _token, id: id}, function(e){
					$.highlightOrThrow(e, function(){
						resetForm('save');
						loadItems();
					});
				}, 'json');
			}else{
				$.notify.error('<b>Invalid item selected.</b>');
			}
		}

		function saveItem(data){
			$.post("{{ url('/item/saveItem') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadItems();
				});
			}, 'json');
		}
		
		function updateItem(data){
			$.post("{{ url('/item/updateItem') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadItems();
				});
			}, 'json');
		}

		function resetForm(method){
			$('.update').data('id', '');
			$('.clear').clear();
			$.clearHighlights();
			if(method != undefined && typeof(method) == 'string'){
				if(method == 'save'){
					$('.updateWrapper').hide();
					$('.saveWrapper').show();
				}else if(method == 'update'){
					$('.saveWrapper').hide();
					$('.updateWrapper').show();
				}
			}
		}
	});
</script>
@stop