<!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">-->
<!--<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>-->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!------ Include the above in your HEAD tag ---------->

<!DOCTYPE html>
<html>
	<head>
		<title>Chat</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
		<style>
				body,html{
					height: 100%;
					margin: 0;
					background: #7F7FD5;
				    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
					background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
				}

				.chat{
					margin-top: auto;
					margin-bottom: auto;
				}
				.card{
					height: 100%;
					background-color: rgba(0,0,0,0.4) !important;
				}
				.contacts_body{
					padding:  0.75rem 0 !important;
					overflow-y: auto;
					white-space: nowrap;
				}
				.msg_card_body{
					overflow-y: auto;
				}
				.card-header{
					border-radius: 15px 15px 0 0 !important;
					border-bottom: 0 !important;
				}
			 .card-footer{
				border-radius: 0 0 15px 15px !important;
					border-top: 0 !important;
			}
				.container{
					align-content: center;
				}
				.search{
					border-radius: 15px 0 0 15px !important;
					background-color: rgba(0,0,0,0.3) !important;
					border:0 !important;
					color:white !important;
				}
				.search:focus{
					 box-shadow:none !important;
				   outline:0px !important;
				}
				.type_msg{
					background-color: rgba(0,0,0,0.3) !important;
					border:0 !important;
					color:white !important;
					height: 60px !important;
					overflow-y: auto;
				}
					.type_msg:focus{
					 box-shadow:none !important;
				   outline:0px !important;
				}
				.attach_btn{
			border-radius: 15px 0 0 15px !important;
			background-color: rgba(0,0,0,0.3) !important;
					border:0 !important;
					color: white !important;
					cursor: pointer;
				}
				.send_btn{
			border-radius: 0 15px 15px 0 !important;
			background-color: rgba(0,0,0,0.3) !important;
					border:0 !important;
					color: white !important;
					cursor: pointer;
				}
				.search_btn{
					border-radius: 0 15px 15px 0 !important;
					background-color: rgba(0,0,0,0.3) !important;
					border:0 !important;
					color: white !important;
					cursor: pointer;
				}
				.contacts{
					list-style: none;
					padding: 0;
				}
				.contacts li{
					width: 100% !important;
					padding: 5px 10px;
					margin-bottom: 15px !important;
				}
			.active{
					background-color: rgba(0,0,0,0.3);
			}
				.user_img{
					height: 70px;
					width: 70px;
					border:1.5px solid #f5f6fa;
				
				}
				.user_img_msg{
					height: 40px;
					width: 40px;
					border:1.5px solid #f5f6fa;
				
				}
			.img_cont{
					position: relative;
					height: 70px;
					width: 70px;
			}
			.img_cont_msg{
					height: 40px;
					width: 40px;
			}
			.online_icon{
				position: absolute;
				height: 15px;
				width:15px;
				background-color: #4cd137;
				border-radius: 50%;
				bottom: 0.2em;
				right: 0.4em;
				border:1.5px solid white;
			}
			.offline{
				background-color: #c23616 !important;
			}
			.user_info{
				margin-top: auto;
				margin-bottom: auto;
				margin-left: 15px;
			}
			.user_info span{
				font-size: 20px;
				color: white;
			}
			.user_info p{
			font-size: 10px;
			color: rgba(255,255,255,0.6);
			}
			.video_cam{
				margin-left: 50px;
				margin-top: 5px;
			}
			.video_cam span{
				color: white;
				font-size: 20px;
				cursor: pointer;
				margin-right: 20px;
			}
			
			.msg_cotainer{
				margin-top: auto;
				margin-bottom: 20px;
				margin-left: 10px;
				border-radius: 25px;
				background-color: #82ccdd;
				padding: 10px;
				position: relative;
				min-width: 200px;
			}
			.msg_cotainer_send{
				margin-top: auto;
				margin-bottom: 10px;
				margin-right: 10px;
				border-radius: 25px;
				background-color: #78e08f;
				padding: 10px;
				position: relative;
				min-width: 200px;
			}
			.msg_time{
				position: absolute;
				left: 0;
				bottom: -15px;
				color: rgba(255,255,255,0.5);
				font-size: 10px;
			}
			.msg_time_send{
				position: absolute;
				right:0;
				bottom: -15px;
				color: rgba(255,255,255,0.5);
				font-size: 10px;
			}
			.msg_time{
				position: absolute;
				left: 0;
				bottom: -15px;
				color: rgba(255,255,255,0.5);
				font-size: 10px;
			}
			.msg_user{
				position: absolute;
				left:0;
				top: -15px;
				color: rgba(255,255,255,0.5);
				font-size: 10px;
			}
			#action_menu_btn{
				position: absolute;
				right: 10px;
				top: 10px;
				color: white;
				cursor: pointer;
				font-size: 20px;
			}
			.action_menu{
				z-index: 1;
				position: absolute;
				padding: 15px 0;
				background-color: rgba(0,0,0,0.5);
				color: white;
				border-radius: 15px;
				top: 30px;
				right: 15px;
				display: none;
			}
			.action_menu ul{
				list-style: none;
				padding: 0;
			margin: 0;
			}
			.action_menu ul li{
				width: 100%;
				padding: 10px 15px;
				margin-bottom: 5px;
			}
			.action_menu ul li i{
				padding-right: 10px;
			
			}
			.action_menu ul li:hover{
				cursor: pointer;
				background-color: rgba(0,0,0,0.2);
			}
			@media(max-width: 576px){
			.contacts_card{
				margin-bottom: 15px !important;
			}
			}
			
			#sidebar-slider{
				width:111%;
				margin-left: -20px;
				margin-top: -4px;
			}
			
			
			/* custom scroll */
			::-webkit-scrollbar {
			  width: 7px;
			}

			/* Track */
			::-webkit-scrollbar-track {
			  background: #f1f1f1; 
			}
			 
			/* Handle */
			::-webkit-scrollbar-thumb {
			  background: #888; 
			}

			/* Handle on hover */
			::-webkit-scrollbar-thumb:hover {
			  background: #555; 
			}
		</style>
	</head>
	<!--Coded With Love By Mutiullah Samim-->
	<body>
		<?php
			//var_dump($komentar);
		?>
		<div style="display:none;">
			<p id="key_id">{{ $id }}</p>
			<p id="me">{{ $me->id }} </p>
			<input id="tabel" value="{{ $tabel }}" />
			<p id="my_photo">{{ $storage . $me->photo }}</p>
		</div>
		
		<div class="container-fluid">
			<div class="row justify-content-center">
				<div class="col-md-16 col-xl-16 chat">
					<div class="card">
						<div class="card-header msg_head">
							<div class="d-flex bd-highlight">
								<div class="img_cont">
									<img src="{{ $storage .'/' . $tentang->photo }}" class="rounded-circle user_img">
									<span class="online_icon"></span>
								</div>
								<div class="user_info">
									<span>{{$tentang->nama }} oleh :  {{ $tentang->name }}</span>
									<p>{{$counter}} Pesan</p>
								</div>
								<!-- <div class="video_cam">
									<span><i class="fas fa-video"></i></span>
									<span><i class="fas fa-phone"></i></span>
								</div> -->
							</div>
							<!-- <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
							<div class="action_menu">
								<ul>
									<li><i class="fas fa-user-circle"></i> View profile</li>
									<li><i class="fas fa-users"></i> Add to close friends</li>
									<li><i class="fas fa-plus"></i> Add to group</li>
									<li><i class="fas fa-ban"></i> Block</li>
								</ul>
							</div> -->
							<div class="card-header">
								<div class="input-group">
									<input type="text" placeholder="Search..." name="" class="form-control search">
									<div class="input-group-prepend">
										<span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
									</div>
								</div>
							</div>
						</div>
						<div id="komen_line" class="card-body msg_card_body">
							@foreach($komentar as $komen)
								@if($komen->user_id==$me->id)
									<div id="msg{{$komen->id}}" class="d-flex justify-content-end mb-4">
										<div class="msg_cotainer_send">
										  {{$komen->isi}}
											<span class="msg_time_send">{{ $komen->created_at }}</span>
										</div>
										<div class="img_cont_msg">
											<img src="{{ $storage . $komen->photo }}" class="rounded-circle user_img_msg">
										</div>
									</div>
								@else
									<div id="msg{{$komen->id}}" class="d-flex justify-content-start mb-4">
										<div class="img_cont_msg">											
											<img src="{{$storage . $komen->photo }}" class="rounded-circle user_img_msg">
										</div>
										<div class="msg_cotainer">
											<p class="msg_user">{{ CRUDBooster::whoAmI($komen->user_id)->name }}</p>
											{{$komen->isi}}
											<span class="msg_time_send">{{ $komen->created_at }}</span>
										</div>
									</div>
								@endif
								<?php $lastmsg = $komen->id ?>
							@endforeach
						</div>
						<div class="card-footer">
							<div class="input-group">
								<!-- <div class="input-group-append">
									<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
								</div> -->
								<textarea id="input_komentar" name="" class="form-control type_msg" placeholder="Type your message..."></textarea>
								<div class="input-group-append">
									<span class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
	var url_server = 'siapkk.banjarbarukota.go.id';
	var nama_table = {!! json_encode($tabel) !!};
	var tlb = {!! json_encode($terlibat) !!};
	var terlibat = [];
	
	var readed = [];
	var rdd = {!! json_encode($readed) !!};
	
	$.each(tlb, function( index, value ){		
		terlibat.push(value.nik);
	});
	
	$.each(rdd, function( index, value ){		
		readed.push(value);
	});
	
	//console.log(readed.toString());
	$(document).ready(function(){		
		$('#action_menu_btn').click(function(){
			$('.action_menu').toggle();
		});
		$('.send_btn').on('click',function(){
			//alert();
			var recode = '';
			
			recode += '<div class="d-flex justify-content-end mb-4">';
				recode += '<div class="msg_cotainer_send">';
					recode += $('#input_komentar').val();
					recode += '<span class="msg_time_send">8:55 AM, Today</span>';
				recode += '</div>';
				recode += '<div class="img_cont_msg">';
					recode += '<img src="'+ $("#my_photo").text() +'" class="rounded-circle user_img_msg">';
				recode += '</div>';
			recode += '</div>';
			//alert(recode);
			//$('#komen_line').append(recode);
			KirimKomentar(nama_table,$("#key_id").text(),$("#me").text(),$('#input_komentar').val());
			$('#input_komentar').val('');
		});
		
		//setInterval(getKomentar($("#key_id").text(),0),3000);
		setInterval(function(){
			getKomentar();
		}, 6000);
		skrolke({!! $lastmsg !!});
		
	});
	
	function skrolke(nomor){
		$('div#msg' + nomor)[0].scrollIntoView();
		//$('#komen_line').animate({ scrollTop:  $('#msg'+nomor).offset().top - 50 }, 'slow');
		//console.log('offset:' + $('#msg'+nomor).offset().top);
	}
	
	function skrolbawah(h){
		$('#komen_line').animate({ scrollTop:  h }, 'slow');
	}
	
	function getKomentar(){
		//terlibat = [];
		$.ajax({
				 type: 'GET',
				 url: 'https://' + url_server + '/api/komentar?key_id=' + $("#key_id").text() + '&nama_table='+nama_table,
				 async: true,
				 cache: false,
				 timeout: 5000,
				 success: function(json) {
					  var idx =0;
					  var recode = '';
					  $.each(json.data, function(index, komenObj){	
							if(jQuery.inArray(komenObj.id, readed ) < 0){					  
								if(komenObj.user_id!=$("#me").text()){
									 recode += '<div id="msg'+ komenObj.id +'" class="d-flex justify-content-start mb-4">';
										recode += '<div class="img_cont_msg">';
											recode += '<img src="'+ komenObj.photo+'" class="rounded-circle user_img_msg">';
										recode += '</div>';
										recode += '<div class="msg_cotainer">';
											recode += '<p class="msg_user">'+komenObj.nama+'</p>';
											recode += komenObj.isi;
											recode += '<span class="msg_time_send">'+komenObj.created_at+'</span>';
										recode += '</div>';								
									recode += '</div>';
								}else{
									if(jQuery.inArray(komenObj.nik, terlibat ) < 0){
										terlibat.push(komenObj.nik);
									}							
									recode += '<div id="msg'+ komenObj.id +'" class="d-flex justify-content-end mb-4">';									
										recode += '<div class="msg_cotainer_send">';
											recode += komenObj.isi;
											recode += '<span class="msg_time_send">'+komenObj.created_at+'</span>';
										recode += '</div>';	
										recode += '<div class="img_cont_msg">';
											recode += '<img src="' + komenObj.photo+'" class="rounded-circle user_img_msg">';
										recode += '</div>';
									recode += '</div>';
								}
								$('#komen_line').append(recode);
								readed.push(komenObj.id);
								skrolke(komenObj.id);
								
							}						
					  });
				 },
				 complete : function(json){
					 //console.log(json);
				 }
			});
	}
	
	function KirimKomentar(table,key_id,user_id,pesan){
		var postForm = { //Fetch form data
            'nama_table' : table,
			'key_id' : key_id,
			'user_id' : user_id,
			'isi' : pesan,
			'terlibat' : terlibat.toString()
        };

        $.ajax({ //Process the form using $.ajax()
            type      : 'POST', //Method type
            url       : 'https://' + url_server + '/api/add_komentar',
            data      : postForm, //Forms name
            dataType  : 'json',
            success   : function(data) {
                            // if (!data.success) { //If fails
                                // if (data.errors.name) { //Returned if any error from process.php
                                    // $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error
                                // }
                            // }
                            // else {
                                    // $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message
                                // }
                            }
        });
	}
	
	</script>
</html>

