<style>
.newmsg{background:#FC3;}
.activeuser{background:#CCC;}
</style>
<div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                   Users
                    <small>Chat</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="<?php echo base_url();?>"><i class="fa fa-puzzle-piece"></i>Users</a></li>
                    <li class="active">Chat</li>
                </ol>
            </section>
            <!-- Main content -->
              <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <!-- User Activity -->
                        
                        <!-- End User Activity -->
                        <!-- User lists -->
                        <div class="col-md-4">
                            <div class="panel">
                                <h3 class="panel-heading">Users List</h3>
                                <div class="panel-body">
                                    <ul class="chat-list-wrap">
                                        <li class="chat-list">
                                            <div class="chat-body">
                                            <div class="chat-body1">
                                            
                                            </div>
                                            <?php foreach($chat_users as $user){?><button id="<?php //echo $user->cuid;?>" class="btn btn-xs btn-danger pull-right deluchat"><i class="fa fa-trash-o"></i></button>
                                                <a class="loadchat"   href="<?php echo $user->cuname;?>" id="<?php echo $user->cuid;?>">
                                                    <div class="chat-data">
                                   <img class="user-img img-circle" src="<?php echo base_url();?>newadminassets/img/avatars/avatar.png" alt="user">
                                                        <div class="user-data">
                                                            <span class="name block capitalize-font"><?php echo $user->cuname;?></span>
                                                            <span class="time block text-gray"><?php echo $user->cuemail;?></span>
                                                        </div>
                                                        
                                                        <div class="status online"></div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </a>
												 
												<?php }?>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- end User lists -->
                        <!-- Chat Room -->
                        <style>
#msg{ 
  margin: 0;
  padding: 0 10px 10px;
  max-height:300px;
  overflow-x:hidden;
}
						</style>
                        <div class="col-md-8">
                            <div class="panel panel-border-color panel-border-color-success">
                                <div class="panel-heading text-center" id="username"></div>
                                <div class="panel-body">
                                    <div class="chat-content">
                                        <ul id="msg">
                                          
                                            
                                        </ul>
                                    </div>
                                    <div class="form-group">
                                    <form action="" method="post" id="replyform" style="display:none;">
                                    	<input type="hidden" id="userid" name="userid" value=""  required/>
                                        <input type="text" id="input_msg_send" name="msg" class="form-control" placeholder="Type something">
                                        <button class="btn btn-xs btn-success" type="submit">Send</button>
                                    </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Chat Room -->
                    </div>
                </div>
            </div>
            <!-- /.content -->
        </div><footer class="main-footer">
            <!-- To the right -->
           <!-- <div class="pull-right hidden-xs">
                Developed by <i class="fa fa-heart"></i> Floatin
            </div>-->
            <!-- Default to the left -->
            <strong>Copyright &copy; 2017 <a href="#">Vector Khazana</a>.</strong> All rights reserved.
        </footer>
    </div>
  <script>
	$(document).ready(function(){
		$(".deluchat").click(function(){
			var cuid=$(this).attr("id");
			$.ajax({
								 type: "POST",
								 url: '<?php echo base_url();?>admin/deluchat',
								 data: {id:cuid},
								 success: function(res){
								 }
								 });
			});
					setInterval(function(){
					var uid=$("#userid").val();//alert(uid);
					if(uid!=""){
						var wtf    = $('ul#msg');
								    var height = wtf[0].scrollHeight;
								    //wtf.scrollTop(height);
						$.ajax({
								 type: "POST",
								 url: '<?php echo base_url();?>admin/loadchat',
								 
								 data: {id:uid},
								 success: function(res){//alert(res);
									if(res!=0){
									$("ul#msg").html(res);
									wtf.scrollTop(height);
									}
									
								 }
								 }); 
					}
					
					$.ajax({
								 type: "POST",
								 url: '<?php echo base_url();?>admin/chknewmsguser',
								 dataType: 'json',
								 data: {},
								 success: function(res){//alert(res);
								 for(var i=0;i<res.length;i++){
									 var id='#'+res[i]['cuid'];
									$(id).addClass("newmsg"); 
								 }
									//$(".chat-body1").html(res);
								 }
								 }); 
					
					}, 1000);
					
		
		$(".loadchat").click(function(e){e.preventDefault();
			$(".loadchat").removeClass("activeuser");
			$(this).removeClass("newmsg");
			$(this).addClass("activeuser");
			var name=$(this).attr("href");
			var id=$(this).attr("id");
			$("#username").text(name);
			$("#userid").val(id);
			$("#replyform").show();
			$("#input_msg_send").val("");
			$.ajax({
							 type: "POST",
							 url: '<?php echo base_url();?>admin/fload',
							 data: {id:id},
							 success: function(response){
								// alert(response);
								 $("ul#msg").html(response);
var wtf    = $('ul#msg');
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
							 }
							 });
		});
		$("#replyform").submit(function(e){e.preventDefault();
		var formdata=$(this).serialize();
						$.ajax({
								 type: "POST",
								 url: '<?php echo base_url();?>admin/adminreply',
								 data: {formdata:formdata},
								 success: function(res){//alert(res);
									$("#input_msg_send").val("");
								 }
								 }); 
		});
	});
</script>
   <!-- <script>
	$(document).ready(function(){
   function readURL(input,id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {alert("asfda");
                $('#i'+id).attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
	$("#imgInp").change(function(){
        readURL(this,"front");
    });
	});
</script>-->
    <script src="<?php echo base_url();?>newadminassets/plugins/js/jquery-3.1.1.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/js/bootstrap.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/js/material.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/js/ripples.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/js/jquery.slimscroll.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/jszip.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/pdfmake.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/vfs_fonts.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/buttons.html5.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/buttons.print.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/plugins/datatables/buttons.colVis.min.js"></script>
    <script src="<?php echo base_url();?>newadminassets/js/datatables.js"></script>
    <script src="<?php echo base_url();?>newadminassets/js/app.js"></script>
  

</body>

