<?php require_once('../auth/auth.php'); ?>
<?php 
  $emq = mysqli_query($conn,"SELECT em_acname,join_date,desig_name,accounts.picture FROM em_employee 
  LEFT JOIN em_designation ON (em_employee.em_dis_id=em_designation.em_desid)
  LEFT JOIN accounts ON (accounts.acid=em_employee.em_acid)
  WHERE em_employee.em_id='$us_em_id' LIMIT 1 ") or die (mysqli_error($conn));
  $rem= mysqli_fetch_assoc($emq);
   $picture=$rem['picture'];
?>
<section class="content">
	<div class="container-fluid">
		<div class="row">
			<div class="col-12">
				<div class="card card-primary">
					<div class="card-header">
						<h3 class="card-title">Wellcome Support Center . Chooche Your Best Option</h3>
					</div>

					<div class="card-body">
						<div class="row">
							<div class="col-sm-4">
								<div class="position-relative p-3 bg-gray" style="height: 180px">
									<div class="ribbon-wrapper ribbon-xl">
										<div class="ribbon bg-primary">
											Call Center
										</div>
									</div>
									Md Jamrul Islam   <br />
									<small>+88 01790126565</small>
									<hr>
									Md Abu Saeid  <br />
									<small>+88 01790121414</small>
									<center>
										<p class="text-sm" style="border: 1px solid whitesmoke;margin-top: 10px;">
											Notice 10 Am To 11 am  Bangladesh Time
										</p></center>
									</div>
								</div>


								<div class="col-sm-8">
								<div class="card direct-chat direct-chat-primary">
									<div class="card-header">
										<h3 class="card-title">Live Support</h3>
										<div class="card-tools">
											<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
											<i class="fas fa-comments"></i>
											</button>
											<button type="button" class="btn btn-tool" data-card-widget="remove">
											<i class="fas fa-times"></i>
											</button>
										</div>
									</div>
									<div class="card-body">
										<div class="direct-chat-messages">
											<div class="formm direct-chat-msg">
												<div class=" direct-chat-infos clearfix">
													<span class="direct-chat-name float-left"> WellDiv Ai Person </span>
													<span class="direct-chat-timestamp float-right"><?php echo $datetime; ?></span>
												</div>
												<img class="direct-chat-img" src="../../dist/img/no_img.jpg" alt="message user image">
												<div class="direct-chat-text msg-header">
													হ্যালো এবং আমাদের সাথে যোগাযোগ করার জন্য ধন্যবাদ! আজকে আপনাকে কী সাহায্য করতে পারে?
												</div>
											</div>
										</div>
										<div class="direct-chat-contacts">
											<ul class="contacts-list">
												<li>
													<a href="#">
														<img class="contacts-list-img" src="../../dist/img/no_img.jpg" alt="User Avatar">
														<div class="contacts-list-info">
															<span class="contacts-list-name">
																 WellDiv Ai Person 
																<small class="contacts-list-date float-right"><?php echo $datetime; ?></small>
															</span>
															<span class="contacts-list-msg">How have you been? I was...</span>
														</div>
													</a>
												</li>
											</ul>
										</div>
									</div>

									<div class="card-footer">
									      <form >
											<div class="input-group">
											  

												<input type="text" id="data" placeholder="Type Message..." required="true" class="form-control">
												<span class="input-group-append">
													<button type="submit" id="send-btn" class="btn btn-primary">Send</button>
												</span> 
											
											</div>
												</form>
								</div>
						  </div>
							</div>
							<script>
						        $(document).ready(function(){
						            $("#send-btn").on("click", function(){
						                $value = $("#data").val();
						                $msg = '<div class="direct-chat-msg right"><div class="direct-chat-infos clearfix"><span class="direct-chat-name float-right"><?php echo $rem['em_acname']; ?></span><span class="direct-chat-timestamp float-left"><?php echo $datetime; ?></span></div><?php if($picture != ""): ?><img src="data:image/gif;base64,<?php echo $picture;?>" class="direct-chat-img" alt="User Image"><?php else : ?> <img src="../../dist/img/no_img.jpg" class="user-image img-circle elevation-2" alt="User Image"><?php endif; ?><div class="direct-chat-text text-right">'+ $value +'</div></div>';
						                $(".formm").append($msg);
						                $("#data").val('');
						                $.ajax({
						                    url: '../auth/message.php',
						                    type: 'POST',
						                    data: 'text='+$value,
						                    success: function(result){
						                        $replay = '<div class="direct-chat-msg"><div class=" direct-chat-infos clearfix"><span class="direct-chat-name float-left"> WellDiv Ai Person </span><span class="direct-chat-timestamp float-right"><?php echo $datetime; ?></span></div><img class="direct-chat-img" src="../../dist/img/no_img.jpg" alt="message user image"><div class="direct-chat-text msg-header">'+ result +'</div></div>';
						                        $(".formm").append($replay);
						                        $(".formm").scrollTop($(".formm")[0].scrollHeight);
						                    }
						                });
						            });
						        });
    </script>



							</div>


						</div>

					</div>

				</div>

			</div>

		</div>

	</section>
