jQuery(function($){
	var isOdd = false;
	//Tarea de JQuery

	/**
	* ******TAREA DE JQUERY*******
	* Las funciones que solicita el ejercicio está señalado por comentarios
	* que indican a que item corresponden.
	* En algunas funcionalidades se imprimen mensajes en la consola para comprobar
	* que realmente funcionan.

	* El item 8 está dentro de la función que genera las filas. generarFila().
	*/

    //1. Obtener lista de tareas y mostrar en la tabla
	cargarTabla();
	function cargarTabla(){
		$.ajax({
	        url: 'https://inthe.am/api/v2/tasks/',
	        type: "GET",
	        headers: {
	            "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
	        },
	        dataType: "json",
	        success: function(data, textStatus, jqXHR) {
	            generarTabla(data);
	        }
	    });
	}


    //2. Eliminar una tarea especifica seleccionando un registro de la fila
	$("table").on("click", "#botonEliminar", function(){
		var id = $(this).val();
		$(this).parent('td').parent('tr').fadeOut(400);

		$.ajax({
			url: 'https://inthe.am/api/v2/tasks/'+ id +'/delete/',
			type: "POST",
			headers: {
				"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
			},
			dataType: "json",
			success: function(data, textStatus, jqXHR) {
				//generarTabla(data);
				console.log("***Tarea eliminada! id: "+$("td:first", this).text());
			},
			complete: function(f){
				console.log(f);
				if(f.statusText=="OK" && f.status==200){
					console.log("***Tarea eliminada! id: "+ id +"*****");
				}
			}
		});
	});


    //3. Mostrar el detalle de una tarea utilizando jQuery UI Dialog (https://jqueryui.com/dialog/)
	$("table").on("click", "#botonDetalle", function(){
		var id=$(this).val();

		$.ajax({
            url: 'https://inthe.am/api/v2/tasks/'+ id +'/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                //generarTabla(data);
                console.log(data);
				$("#dialogDetail").html("<b>ID:</b> "+data.id+
				"<br><b>Actividad:</b> "+data.description+
				"<br><b>Proyecto:</b> "+data.project);
				$("#dialogDetail").dialog("open");
            }
        });

	});

	//Setea algunas opciones del dialog
	$("#dialogDetail").dialog({
		autoOpen: false,
		modal: true,
		title: "Mirá como está este detalle papá!",
		dialogClass: 'fixed-dialog'

	});


	//4. Crear una tarea, crear un form donde se pueda seleccionar el proyecto y la descripcion de la tarea,
	//enviar los datos al servidor
	$("#botonAgregar").on("click", function(){
		if($("#descripcion").val()=="" || $("#proyecto")==""){
			alert("el campo no puede estar vacio");
			//$("#descripcion").fadeOut(3000);

			return;
		}
		/**********************************************/
		console.log("Agregando");
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/',
            type: "POST",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            data: {
                "id": "d8ff7cba-1530-4e0b-a780-6b7cd9923840",
                "uuid": "d8ff7cba-1530-4e0b-a780-6b7cd9923840",
                "short_id": 1,
                "status": "pending",
                "urgency": 1,
                "description": $("#descripcion").val(),//"sacar la ropa",
                "project": $("#proyecto").val(),//"casa",
                "entry": "2018-09-12T15:37:27Z",
                "modified": "2018-09-13T18:28:41Z",
                "blocks": [],
                "udas": {
                    "intheamtrelloboardid": "5b99354d32a0c4368a4bd498",
                    "intheamtrellolistid": "5b99354d32a0c4368a4bd499",
                    "intheamtrellolistname": "To Do",
                    "intheamtrelloid": "5b9aac56cc3f7b3233b1f629",
                    "intheamtrellourl": "https://trello.com/c/Il6tNSaw/2-limpiar-banho"
                }
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                console.log(data);
                console.log(textStatus);
				generarFila(data);
				$("#descripcion").val("");
				$("#proyecto").val("");
            },
            error: function(e){
            	console.log(e);
            }
        });
    });


	// 	5. Actualizar la tarea, seleccionar un registro de la tabla, mostrar un formulario de edicion y enviar los
	// datos al servidor

	//Esta funcion abre el dialogo con un formulario para editar al hacer
	//click sobre el botón editar en una de las filas
	// Setea todos los campos con los valores actuales del registro
	$("table").on("click", "#botonEditar", function(){
		var id= $(this).val();

		$.ajax({
            url: 'https://inthe.am/api/v2/tasks/'+ id +'/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                //generarTabla(data);
                console.log(data);
				$("#idEditar").val(data.id);
				$("#fechaEditar").val(data.entry);
				$("#descripcionEditar").val(data.description);
				$("#prioridadEditar").val(data.priority);
				$("#estadoEditar").val(data.status);
				$("#proyectoEditar").val(data.project);
				$("#formularioEditar").dialog("open");

				$("#botonGuardarCambios").on("click", function(){
					var id = $("#idEditar").val();
					var fecha = $("#fechaEditar").val();
					var descripcion = $("#descripcionEditar").val();
					var prioridad = $("#prioridadEditar").val();
					var estado = $("#estadoEditar").val();
					var proyecto = $("#proyectoEditar").val();

					$.ajax({
						url:'https://inthe.am/api/v2/tasks/'+id+'/',
						type:'PUT',
						headers:{
							"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
						},
						dataType:"json",
						data: {
						        "id": id,
						        "uuid": id,
						        "short_id": 1,
						        "status": estado,
						        "urgency": 11,
						        "description": descripcion,
						        "priority": prioridad,
						        "project": proyecto,
						        "due": "2018-09-29T19:37:00Z",
						        "entry": fecha,
						        "modified": "2018-09-27T19:39:18Z",
						        "blocks": [],
						        "tags": [
						            "visita",
						            "diaria"
						        ],
						        "udas": {
						        		"telefono1":"0971410692",
						        		"telefono2":"0985301614"
						        }
						},
						success: function(){
							$("#formularioEditar").dialog("close");
						},
						error: function(e){
							console.log(e);
						},
						complete: function(e){
							//$("#formularioEditar").dialog("close");
						}

					});


				});

				alert("termino la funcion")
            }
        });
	});

	//Esta función realiza el cambio al hacer click en el botón guardar boton
	//Guardar cambios en el formulario para editar
	// $("#botonGuardarCambios").on("click", function(){
	// 	var id = $("#idEditar").val();
	// 	var fecha = $("#fechaEditar").val();
	// 	var descripcion = $("#descripcionEditar").val();
	// 	var prioridad = $("#prioridadEditar").val();
	// 	var estado = $("#estadoEditar").val();
	// 	var proyecto = $("#proyectoEditar").val();
	//
	// 	$.ajax({
	// 		url:'https://inthe.am/api/v2/tasks/'+id+'/',
	// 		type:'PUT',
	// 		headers:{
	// 			"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
	// 		},
	// 		dataType:"json",
	// 		data: {
	// 		        "id": id,
	// 		        "uuid": id,
	// 		        "short_id": 1,
	// 		        "status": estado,
	// 		        "urgency": 11,
	// 		        "description": descripcion,
	// 		        "priority": prioridad,
	// 		        "project": proyecto,
	// 		        "due": "2018-09-29T19:37:00Z",
	// 		        "entry": fecha,
	// 		        "modified": "2018-09-27T19:39:18Z",
	// 		        "blocks": [],
	// 		        "tags": [
	// 		            "visita",
	// 		            "diaria"
	// 		        ],
	// 		        "udas": {
	// 		        		"telefono1":"0971410692",
	// 		        		"telefono2":"0985301614"
	// 		        }
	// 		},
	// 		success: function(){
	// 			$("#formularioEditar").dialog("close");
	// 		},
	// 		error: function(e){
	// 			console.log(e);
	// 		},
	// 		complete: function(e){
	// 			//$("#formularioEditar").dialog("close");
	// 		}
	//
	// 	});
	//
	//
	// });

	$("#formularioEditar").dialog({
		autoOpen:false,
		modal: true,
		width: "50%",
		title: "Editar tarea papu",
		dialogClass: 'fixed-dialog'
	});



	$("#papa").on("click", function(){
		//console.log(    $("tr:eq(1)").children());
		console.log( $("tr:eq(1) td").eq(0).text("falope")  );

		//$("tr:eq(0)").hide();

	});


	//Funciones útiles
    function generarTabla(data) {
        for (var i = 0; i < data.length; i++) {
            generarFila(data[i]);
        }
    }

    function mostrarDetalle(registro){
        generarFila(registro);
    }

    function generarFila(rowData) {
        var row = $("<tr></tr>");
        $("#listaTareas").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.entry + "</td>"));
        row.append($("<td>" + rowData.description + "</td>"));
        row.append($("<td>" + rowData.priority + "</td>"));
        row.append($("<td>" + rowData.status + "</td>"));
		row.append($("<td><button id='botonEliminar' value="+rowData.id+">Eliminar</button></td>"));
        row.append($("<td><button id='botonDetalle' value=" + rowData.id + ">Detalle</button></td>"));
		row.append($("<td><button id='botonEditar' value=" + rowData.id + ">Editar</button></td>"));

		//8. Mostrar las tareas de las filas pares con un color diferente a las de las filas impares
		$("tr:odd").css("background-color","red");
		$("tr:even").css("background-color","green");
    }



	// //Permite hacer click sobre un td específico
	// $("table").on("click", "tr", function(){
	// 	$(this).on("click","td:eq(0)", function(){
	// 		$(this).css("color", "red");
	// 	})
	// })











});