$('document').ready(function(){
	// Botones
	$("#animals").click(function(){
		$.get( "/animal", function( data ) {
			$( "#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" );
			})
			dataSet = data.data.map(function(item) {
	                        return [item._id, item.name, item.initial_level + " - " + item.level];
			});
			$('#animals-table').DataTable({
				data: dataSet,
				responsive: true,
        			columns: [
				    { title: "id", visible: false},
				    { title: "Name" },
			            { title: "Level" },
				    { 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" );
	});
});

//Funtions
function onSubmitAnimal(form){
    	var data = {};
	$.map($(form).serializeArray(), function(n, i){
		if(n['value']!= "") data[n['name']] = n['value'];
	});
	
	if(data._id){
                $.ajax({
                        type: "PUT",
                        url: "/animal/"+data._id,
                        data: JSON.stringify(data),
                        success: function() { $("#animals").click() },
                        contentType : "application/json"
                });
	}else{
		$.ajax({
	        	type: "POST",
		        url: "/animal",
        		data: JSON.stringify(data),
		        success: function() { $("#animals").click() },
	        	contentType : "application/json"
		});
	}
	return false;
};

function editAnimal(id){
	$( "#body" ).load( "/templates/animal-form.html", function(){
		$.get( "/animal/"+id, function( data ) {
			for(key in data.data[0])
			{
				if(data.data[0].hasOwnProperty(key)){
					if(key == "father" || key == "mother" || key == "specie" || key == "sex"){
						let a = key;
						setTimeout(function(){
                                                        $('#a-'+a+' option[value='+data.data[0][a]+']').attr('selected','selected');
                                                        console.log(data.data[0][a]);
							console.log(a);
						}, 200)
                                        }else{
						$('input[name='+key+']').val( data.data[0][key].$numberDecimal ? data.data[0][key].$numberDecimal :  data.data[0][key]);
					}

				}
			}
                });

	});
}

function showAnimal(id){
        $( "#body" ).load( "/templates/animal-show.html", function(){
		$.get( "/animal/"+id, function( data ) {
			$.get( "/animal", function( animalsData ) {
				$.each(data.data[0], function(i, val) {
					$("#data").append( "<div>"+i+": "+(val.$numberDecimal ? val.$numberDecimal :  val)+"</div>");
				});
			});
		});
	});
}

function removeAnimal(id){
	if(confirm("¿Surely you want to erase this dino?")){
		$.ajax({
   			url: '/animal/'+id,
			type: 'DELETE',
			success: function() { $("#animals").click() }
		});
	}
}