<?php $__env->startSection('title'); ?> <?php echo e(Config::get('item.title')); ?> <?php $__env->stopSection(); ?>
<?php $__env->startSection('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;">
			<table class="table table-bordered items">
				<thead>
					<tr>
						<th>#</th>
						<th>Code</th>
						<th>Name</th>
						<th>Volume</th>
						<th>Weight</th>
						<th class="text-center" style="width: 90px; min-width: 90px;"><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>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('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);
				}
			});
		});

		$('.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(){
			var $tbody = $('.items tbody');
			$.post("<?php echo e(url('/item/loadItems')); ?>", {_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>'+ (++i) +'</td>';
						dom += '<td>'+ k.code +'</td>';
						dom += '<td>'+ k.name +'</td>';
						dom += '<td>'+ k.volume +'</td>';
						dom += '<td>'+ k.weight +'</td>';
						dom += '<td>';
						dom += '	<div class="btn-group">';
						dom += '		<button class="btn btn-warning btn-sm 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-sm 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>';
				}
				$tbody.html(dom);
			}, 'json');
		}

		function deleteItem(id){
			if(id != undefined && id != ''){
				$.post("<?php echo e(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("<?php echo e(url('/item/saveItem')); ?>", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadItems();
				});
			}, 'json');
		}
		
		function updateItem(data){
			$.post("<?php echo e(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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>