$('document').ready(function(){
	$( "#body" ).load( "/templates/home.html" );

	// Botones
	$("#home").click(function(){
		$( "#body" ).load( "/templates/home.html" );
		$.get("/info", function( data ) {
			var text = "<table class=\"info\">"
			$.each(data, function(i, obj) {
				text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
			});
			text += "</table>"
			$( "#info" ).html( text );
		});
	});

	$("#animals").click(function(){
		$.get( "/animal", function( data ) {
			$.get( "/species", function( species_r ) {
				var species = {};
				species_r.data.map(function(item) {
					species[item._id] = item.name
				});

				$( "#body" ).html("<h1>Yours Dinos</h1><button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button><br><br><table id='animals-table'></table>");
				$( "#animal-add").click(function(){
					$( "#body" ).load( "/templates/animal-form.html", function (){
						set_animal_include("");
					});
				})
				dataSet = data.data.map(function(item) {
					return [item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]];
				});

				// dataSet = data.data.reduce(function(acc, item, i) {
				// 	if(i == 1) acc = []
				// 	acc.push([item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]]);
				// 	return acc
				// });

				$('#animals-table').DataTable({
					data: dataSet,
					responsive: true,
					columns: [
						{ title: "id", visible: false},
						{ title: "Name" },
						{ title: "Level" },
						{ title: "Specie" },
						{ title: "Options", className: "options-table", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
							return '<button class="btn btn-primary btn-sm" onclick="showAnimal(\''+ full[0] +'\')">Show</button>&nbsp;&nbsp;<button class="btn btn-info btn-sm" onclick="editAnimal(\''+ full[0] +'\')">Edit</button>&nbsp;&nbsp;<button class="btn btn-danger btn-sm" onclick="removeAnimal(\''+full[0]+'\')">Remove</button>';
						}}
					]});
			});
		});
	});
	$("#species").click(function(){
		$.get( "/species", function( data ) {
			$( "#body" ).html("<h1>All Species</h1><table id='species-table'></table>");
				dataSet = data.data.map(function(item) {
				return [item.name, item.description]; 
			});
			$('#species-table').DataTable({
				data: dataSet,
				responsive: true,
				columns: [
					{ title: "Name" },
					{ title: "Description" },
					{ title: "Options", className: "options-table-species", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
						return '<button class="btn btn-primary btn-sm" onclick="alert(\'En desarollo\')">Show</button>'
					}}
				]
			});
		});
	}); 

	$("#about").click(function(){
		$( "#body" ).load( "/templates/about.html" );
	});
});