@extends('admin.administration')

@section('content')
<style>
	table {
		width: 98% !important;
		margin: 0 auto !important;
	}
	.pagination {
		margin: 10px 15px;
	}
	#excel {
	    border: none;
	    width: 70px;
	    height: 38px;
	    border-radius: 3px;
	    margin: 10px 15px;
	    background: #415F2A;
	    color: #fff;
	}

	#delst {
		border: none;
		background: none;
	}

	#modal {
		width: 600px;
		display: none;
	    margin: 10px 40%;
	    border-radius: 10px;
	    z-index: 99999;
	}
</style>
	<div class="wrapper">
		<h5 class="widget-name"><br>
			<i class="icon-th"></i>Courses
		</h5>
		<div class="depth"><a href="{{ URL::to('/admin/administration/manage-courses/add-course') }}" title=""><i class="icon-plus"></i></a></div>Add New Course
		<div class="search">
			Search courses: <input type="text" id="searchbox">
		</div>
	</div><br>
	
	<div class="table-overflow">
		<table class="table table-striped table-bordered">
			<thead>
				<tr>
					<th>Name</th>
					<th>Active</th>
					<th>Remove</th>
				</tr>
			</thead>
			<tbody id="fbody">
			@foreach($courses as $course)
				<tr id="items" data-ids="{{ $course->id }}">
					<td><a href="{{ URL::to('/admin/administration/manage-courses/') . '/' . $course->slug }}">{{ $course->name }}</a></td>
					<td>
						<input type="checkbox" name="active"  onchange="updateActiveCourse({{ $course->id }})">
					</td>	
					<td>
						<form action="{{ URL::to('/') . '/admin/administration/manage-courses/delete-course/' . $course->id }}" method="post">
							<input type="hidden" name="_method" value="delete">
							<input type="hidden" name="_token" value="{{ csrf_token() }}">
							<button type="submit" id="delst"><i class="fam-cross"></i></button>
						</form>
					</td>
				</tr>
			@endforeach
			</tbody>
		</table>
	</div>
	<div id="modal"></div>
<script>
console.log($("#items").data("ids"));
$("tbody").sortable({ axis: "y", placeholder: "ui-state-highlight" });
$("tbody").disableSelection();
var data = [];
$("tbody").on("sortstop", function(event, ui){
	data.push($("#items").data("ids")); 
	console.log(data);

	$.post("{{ URL::to('/admin/administration/manage-courses/updateCoursePosition') }}", { "data": data, "_token": $('input[name=_token]').val() } );
});

$("#searchbox").keyup(function () {
	//split the current value of searchInput
	var data = this.value.split(" ");
	//create a jquery object of the rows
	var jo = $("#fbody").find("tr");
	if (this.value == "") {
	    jo.show();
	    return;
	}
	//hide all the rows
	jo.hide();

	//Recusively filter the jquery object to get results.
	jo.filter(function (i, v) {
	    var $t = $(this);
	    for (var d = 0; d < data.length; ++d) {
	        if ($t.is(":contains('" + data[d] + "')")) {
	            return true;
	        }
	    }
	    return false;
	})
	//show the rows that match.
	.show();
}).focus(function () {
	this.value = "";
	$(this).css({
	    "color": "black"
	});
	$(this).unbind('focus');
}).css({
	"color": "#C0C0C0"
});

	function updateActiveCourse(courseId) 
	{
		$.post("{{ URL::to('/admin/administration/manage-courses/updateActiveCourse') }}", { "courseId": courseId, "_token": $('input[name=_token]').val() } );
	}
</script>
@stop