    <div class="sidebar" id ="task-sidebar">
				
	</div>
	<style type="text/css">
		.sidebar {
	position: absolute;
	right: 0;
	bottom: 0px;
	width: 300px;
	text-align: right;
}
.notification {
	transition: all .3s linear;
	-webkit-transition: all .3s linear;
	width: 60%;
	height: 40px;
	overflow: hidden;
	display: inline-block;
	margin-bottom: 5px;
	padding: 10px 15px;
	background-color: #f6f6f6;
	border-radius: 4px 0 0 4px;
	text-align: left;
	font-size: 14px;
	color: #000;
	line-height: 1.4;
	cursor: pointer;
}
.notification h6 {
	display: block;
	font-weight: bold;
}
.notification p {
	opacity: 0;
	visibility: hidden;
	transition: all .3s linear;
	-webkit-transition: all .3s linear;
}
.notification.active {
	width: 100%;
	height: auto;
	background-color: #009688;
	color: #fff;
}
.notification.active p {
	opacity: 1;
	visibility: visible;
}
	</style>
	<script>
	$('doucment').ready(function() {
		disTask();
	setInterval(function()
	{
		
		$.get('/leads/leadtask', function (data) {	
			var json_x = $.parseJSON(data);
			if(json_x.status!=null && json_x.status =='pass'){
			var tdata = json_x.tdata;
			Cookies.set('tdata', tdata, { expires: 1 });
			disTask();			
		}
	   	 
	    });
	}, 10000); //10000 milliseconds = 10 seconds  60000*60*30
	function disTask() {
	    var data = Cookies.get('tdata');
	    if(typeof data !=='undefined'){
		    var tdata = $.parseJSON(data);	    
			let container = '';	
			for(var i = 0; i < tdata.length; i++) {
			    var obj = tdata[i];
			   container += '<div class="notification"><h6>Hi '+obj.user_name+',</h6><p>Task Type : '+obj.task_type+'</p><p>Comment : '+obj.comments+' <a target="_blank" href="/leads/lead_details/'+obj.lead_id+'">View Details</a></p></div>';
		    }
		    $("#task-sidebar").html(container);
		}		
    }
  	$(document).on("click", ".notification" , function() {
  		$('.notification').not(this).removeClass('active');
  		$(this).addClass('active');
  	});
  	$(document).mouseup(function(e){
    	var container = $(".notification");
        if(!container.is(e.target) && container.has(e.target).length === 0){
            $('.notification').removeClass('active');
        }
    });
  });
</script>
