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

	<div class="row">

		<div class="col-md-4">
			<div class="form-group">
				<label class="control-label">Location Combination </label>
				<input type="text" class="form-control clear name" name="name">
			</div>
			<div class="form-group">
				<label class="control-label">Cost</label>
				<input class="form-control clear cost" name="cost" cols="2" style="resize: vertical;" />
			</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="control-label">List of location combination</label>
				<div class="table-responsive">
					<table class="table table-bordered shuttlelocationcombination">
						<thead>
							<tr>
								<th width="100px">#</th>
								<th>Location Combination</th>
								<th>Cost</th>
								<th class="text-center" width="100px;"><i class="fa fa-gear"></i></th>
							</tr>
						</thead>
						<tbody>
							<tr><th class="text-center" colspan="3">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');
		loadAllCombination();

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

			$('.update').val($(this).data('id'));
			$('.name').val($(this).data('name'));
			$('.cost').val($(this).data('cost'));
		});

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

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

		$('.save').click(function(){
			var data = {
				name: $('.name').val(),
				cost: $('.cost').val()
			};
			save(data);
		});

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

		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 deleteShuttlelocationcombination(id){
			$.post("{{ url('/shuttlelocationcombination/delete') }}", {_token: _token, id: id}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadAllCombination();
				});
			}, 'json');
		}

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

		function update(data){
			$.post("{{ url('/shuttlelocationcombination/update') }}", {_token: _token, data: data}, function(e){
				$.highlightOrThrow(e, function(){
					resetForm('save');
					loadAllCombination();
				});
			}, 'json');
		}

		function loadAllCombination(){
			var $tbody = $('.shuttlelocationcombination tbody');
			$.post("{{ url('/shuttlelocationcombination/getAll') }}", {_token: _token}, function(e){
				var dom = '';//$(".control-label").html(e);
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
						dom += '<tr>';
						dom += '<td>'+ (++i) +'</td>';
						dom += '<td>'+ (k.name) +'</td>';
						dom += '<td>'+ (k.cost) +'</td>';
						dom += '<td class="text-center"><div class="btn-group">';
						dom += '<button class="btn btn-sm btn-warning edit" data-id="'+ k.id +'" data-name="'+ k.name +'" data-cost="'+ k.cost +'"><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="3">Sorry, No results found.</th></tr>';
				}
				$tbody.html(dom);
			}, 'json');
		}
	});
</script>
@stop