$(document).ready(function() {
	var oTableUserLst = $('#tblUserLst').DataTable({
		"processing": true,
	    "serverSide": true,
	    'responsive': true,
	    'destroy' : true,
	    "columns": [
				{ "data": "status", "orderable" : false, 
	            	"render": function ( data, type, row ) {
	            		var status = "-", statusDesc;
  	            		if(data) {
  	            			var color = "badge-primary";
  	            			if(data == 'A') {
  	            				color = "badge-success"; 
  	            				statusDesc = "ACTIVE";
  	            			} else if(data == 'F') {
  	            				color = "badge-warning";
  	            				statusDesc = "PENDING";  
  	            			} else  {
  	            				color = "badge-danger";
  	            				statusDesc = "INACTIVE";
  	            			}
  	            			status = "<span class='badge badge-pill " + color + "'>" + statusDesc + "</span>";
  	            		}
            			return status;
	            	}
	            },
	    		{ "data": null,
					"render": function ( data, type, row ) {
						return "<div>" + row.firstName + " " + row.lastName + "</div><i>" + row.email + "</i>" ;
					}
				},
	            { "data": "userId" },
	            { "data": "userRoleGroup.userGroupDesc" },
	            { "data": "createDt", "render": function ( data, type, row ) {
						return data ? data : "";
					}
	 			},
	            { "data": "lastLogin", "render": function ( data, type, row ) {
						return data ? data : "";
					}
				},
	            { "data": null, className: 'td-actions text-right', "orderable" : false, 
	            	"render": function ( data, type, row ) {
						var buttons = '<button type="button" rel="tooltip" class="btn btn-info btn-round ml-1 view" data-original-title="View" title="View">' +
                          '<i class="material-icons">person</i>' +
                        '</button>' +
                        '<button type="button" rel="tooltip" class="btn btn-success btn-round ml-1 edit" data-original-title="Edit" title="Edit">' +
                         ' <i class="material-icons">edit</i>' +
                        '</button>' +
                        '<button type="button" rel="tooltip" class="btn btn-danger btn-round ml-1 deactivate" data-original-title="Deactivate" title="Deactivate">' +
                          '<i class="material-icons">close</i>' +
                        '</button>'
            			return buttons;
	            	}
	            },
	          ],
		"ajax": $.fn.dataTable.pipeline({
			"pages" : 1,
        	"type" : "GET",
            "url": contextPath + "/users/paginated",
            "action": 'xhttp',
            'beforeSend': dtRequestHeader,
            "dataSrc": dtDataSrc,
            "data": function ( data ) {
            	data.firstName = $("#firstName").val();
            	data.lastName = $("#lastName").val();
            	data.status = $('#status').find(":selected").val();
            	data.userRoleGroupCode = $('#userRoleGroupCode').find(":selected").val();
            },
            "error": function(){  // error handling
            	console.log("error");
            }
      	 }),
      	"initComplete": function(settings, json) {
      		$('input#firstName').unbind();
      		$('input#lastName').unbind();
      		$('input#status').unbind();
      		$('#searchFilter').bind('click', function(e) {
            	portalUtil.showMainLoading(true);
            	oTableUserLst
            	.column(1).search($('input#firstName').val())
            	.column(2).search($('input#lastName').val())
                .column(4).search($('#status').find(":selected").val())
                if($('#userRoleGroupCode') != undefined) {
                	oTableUserLst.column(3).search($('#userRoleGroupCode').find(":selected").val())
                }
                oTableUserLst.draw();
            	$(".em-toggle").click();
            });
            $('#searchClear').bind('click', function(e) {
            	$('input#firstName').val("")
            	$('input#lastName').val("")
            	$("#status").val("").select2();
            	$("#userRoleGroupCode").val("").select2();
            	oTableUserLst.columns().search("").draw();
            	$(".em-toggle").click();
            });
           
        },
      	"fnDrawCallback": function ( oSettings ) { hidePagination(this,"#tblUserLst"); portalUtil.showMainLoading(false);} 
	});
	
	$('#tblUserLst').dataTable().fnSetFilteringEnterPress();
	$('#tblUserLst tbody').on( 'click', 'button.view', function () {	
        var d = oTableUserLst.row( $(this).parents('tr') ).data();
        location.href = contextPath + "/users/user?id=" + d.userId;
    });
	$('#tblUserLst tbody').on( 'click', 'button.edit', function () {	
        var d = oTableUserLst.row( $(this).parents('tr') ).data();
        location.href = contextPath + "/users/edit?id=" + d.userId;
    });
	/*$('#tblUserLst tbody').on( 'click', 'button.btn-view', function () {	
        var d = oTableUserLst.row( this ).data();
        location.href = contextPath + "/users/user?id=" + d.userId;
    });*/
	/*$('#tblUserLst tbody').on( 'mouseover', 'tr', function () {
		var d = oTableUserLst.row( this ).data();
		if(d != undefined) { $(this).addClass('cursor-pointer'); }
    });*/
});