HOME

Mini Shell 1.0
DIR:/home/costmasters.in/www/application/modules/admin/views/messages/
Current File : /home/costmasters.in/www/application/modules/admin/views/messages/messages_history.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<html lang="en-IN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="content-language" content="en-IN" />
		<meta name="google" content="notranslate">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />		
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
		<link href="<?= base_url('assets/frontend/'); ?>css/bootstrap.min.css" rel="stylesheet">
		<link href="<?= base_url('assets/frontend/'); ?>css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">        
		<link href="<?= base_url('assets/frontend/'); ?>css/grid.min.css" rel="stylesheet">
		<link href="<?= base_url('assets/frontend/'); ?>style.css" rel="stylesheet">
		<link href="<?= base_url('assets/frontend/'); ?>css/custom_style.css" rel="stylesheet">
		<link href="<?= base_url('assets/frontend/'); ?>css/animate.css" rel="stylesheet">
		<link href="<?= base_url('assets/frontend/'); ?>font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="<?= base_url('assets/frontend/'); ?>css/message_chat.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<?php $CI =& get_instance(); ?>
		<main id="panel-main" class=" slideout-panel">
			<section class="white tight" id="message-board" style="bottom: 78px;">        
				<div id="messages">
					<ul class="conversation">
						<?php foreach($messages as $message){ ?>			
						<?php
						if($message["from_user_id"] == $this->uri->segment(5))
						{
							$class = 'me';							
						}
						else
						{
							$class = '';							
						} 
						/*get user name of the message*/			
						$message_user = $CI->Messages_model->getMessageUser($message['from_user_id']);
                        /*get product info of chatting*/
						$listing_data = $CI->Messages_model->getListing($message['listing_id']);
						?>
						<li class="<?= $class; ?>" data-timestamp="<?= $message['message_time']; ?>" data-id="5625217">
							<div class="conversation-inner">
							
							   <?php /* Get User Profile Pic By Each Message*/ ?>
								<?php if($class == 'me'){ 
								/*do nothing*/
								} else{ ?>
								
								<?php if($message_user[0]['social_picture']){ ?>                    
								<img src="<?php if($message_user[0]['social_picture']){echo $message_user[0]['social_picture'];}else{echo base_url('uploads/profile/profile_demo/demo.png');} ?>" class="avatar round">
								<?php }else{ ?>
								<img src="<?php if($message_user[0]['profile_pic']){echo base_url('uploads/profile/').$message_user[0]['profile_pic'];}else{echo base_url('uploads/profile/profile_demo/demo.png');} ?>" class="avatar round">								
								<?php } ?>
								
								<?php } ?>
								
								<div class="message"><p><?= $message['message']; ?></p></div>
								
							</div>
							<div class="conversation-inner">
								<div class="bottom">
									<?php if($class == 'me'){ ?>
									<div class="dropup d-inline-block mr-2">
										<a class="text-muted px-2 small" href="#" role="button" data-toggle="dropdown" data-flip="false">
											<i class="fa fa-ellipsis-h"></i>
										</a>
										<div class="dropdown-menu dropdown-menu-right shadow-sm">
											<a class="dropdown-item delete-message" href="#"><i class="fa fa-trash-alt fa-fw ml-1 float-right"></i>Delete</a>
										</div>
									</div>
									<?php }else{						
									echo $message_user[0]['name'];
									?>						
									<?php } ?>
									<small>
										<span data-toggle="tooltip" data-placement="top" title="" data-original-title="<?= $message['message_time']; ?>"><?= $this->time_elapsed_string($message['message_time'], false); ?></span> &nbsp; <?php if($class == 'me'){ ?><?php if($message['status'] == 0){ ?><span data-toggle="tooltip" data-placement="top" title="" data-original-title="Seen 4 weeks ago"><i class="fa fa-check fa-fw"></i> Seen</span> <?php } } ?>
									</small>
								</div>
							</div>
						</li>
						<?php } ?>			
					</ul>		
				</div>
				<div class="thebottom"></div>	
			</section>
			<?php
			/*get user name of the from other User, Who messaged*/   
			if($messages[0]["from_user_id"] == $this->uri->segment(5)){
				$user = $CI->Messages_model->getMessageUser($messages[0]['to_user_id']); 
			}
			if($messages[0]["to_user_id"] == $this->uri->segment(5)){
				$user = $CI->Messages_model->getMessageUser($messages[0]['from_user_id']); 
			}
			?>
			<header>
				<nav class="header header-inner fixed-top">
					<div class="container-fluid">
						<div class="row no-gutters">
							<div class="col-3 header-inner-side text-left">
								<a href="<?= base_url('admin/messages/messages/index/'.$this->uri->segment(5)); ?>">
									<i class="fa fa-chevron-left fa-fw"></i><span class="hidden-sm-down">Messages</span>
								</a>
							</div>
							<div class="col-6 text-center">
								<div class="header-inner-title d-flex justify-content-center align-items-center">
									<div class="header-inner-title-text w-semibold">
										<?php
										/*time_elapsed_string function from - My Loader*/
										$lastlogin = $user[0]['last_activity']; 
										$full_date_format_lastlogin = date('Y-m-d H:i:s',$lastlogin); 
										$user_active_ago = $this->time_elapsed_string($full_date_format_lastlogin, false);
										?>
										
										<?= $user[0]['name']; ?> <small class="text-muted">Active <?= $user_active_ago; ?></small>
									</div>
								</div>
							</div>
							<div class="col-3 header-inner-side text-right">
								
							</div>
						</div>
					</div>
				</nav>
			</header>
				
				
			<section id="compose" class="py-1 py-md-3">

				<div class="progress progress-photo">
					<div class="progress-bar"></div>
				</div>

				
				<form action="<?= base_url('admin/messages/messages/chat/').$this->uri->segment(6); ?>" method="post">
					<input type="hidden" name="id" value="<?= $this->uri->segment(6); ?>">
					<input type="hidden" name="autosave" value="0">
					<input type="hidden" name="to_id" value="<?= $user[0]['user_id']; ?>">
					<input type="hidden" name="security">

					<div class="compose-bar">

						<div class="compose-bar-send">
							<button id="send" class="rounded-circle" name="task" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send Message"><i class="fa fa-paper-plane"></i></button>
							<div class="preloader-send rounded-circle small hide">
								<div class="spinner"><div class="dot1"></div><div class="dot2"></div><div class="dot3"></div></div>               
							</div>
						</div>

						<div class="compose-bar-input">
							<div class="row no-gutters align-items-start">
								<div class="col">
									<textarea name="content" id="message" class="form-control autogrow" placeholder="Type a message..." style="height: 42px;"></textarea>
								</div>
								<div class="col-auto">
									<div class="compose-bar-input-options">
										<button type="button" class="text-muted fileinput-button" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send Photo">
											<i class="fa fa-camera"></i>
											<input id="fileupload" type="file" name="image" multiple="">
										</button>
										<button type="button" class="text-muted hide" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add Payment Request">
											<i class="fa fa-credit-card"></i>
										</button>
									</div>
								</div>
							</div>
						</div>

					</div>

				</form>

			</section>

			<div class="fullscreen preloader-page" style="display: none;">
				<div class="fullscreen-inner">            
					<div class="spinner"><div class="dot1"></div><div class="dot2"></div><div class="dot3"></div></div>        
				</div>
			</div>
			<div class="fullscreen inactive hide">
				<div class="fullscreen-inner text-center">
					<h4 class="w-bold mb-4">Are you still talking?</h4>
					<div class="mb-2"><button class="btn btn-outline-dark">Continue talking</button></div>
					<a href="<?= base_url('admin/messages/messages/index/'.$this->uri->segment(5)); ?>" class="btn btn-link text-dark">Back</a>
				</div>
			</div>
		</main>
		
		<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/vendor/jquery-ui.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/vendor/jquery.ui.widget.js"></script> 
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.iframe-transport.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload-process.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload-image.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload-audio.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload-video.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload-validate.js"></script>
		<script src="<?= base_url(); ?>assets/frontend/file_upload/js/jquery.fileupload-ui.js"></script>
		<script type="text/javascript" src="<?= base_url(); ?>assets/frontend/js/scrollTo.js"></script>
		
		<?php $chatId =$this->uri->segment(6); ?>
        <?php $uId =$this->uri->segment(5); ?>
		
		<script>
			var $base = "<?= base_url(); ?>";
			var $spinner = '<div class="spinner"><div class="dot1"></div><div class="dot2"></div><div class="dot3"></div></div>';
			
			$(function() {

				$poll_seconds = 10;
				$timeout_seconds = 3600;
				$inactive_seconds = 0;

				$(window).bind('resizeEnd', function() {
					$inactive_seconds = 0;
					sizeBoard();
				});
				
				$("#compose .compose-bar-input textarea").keyup(function(){
					$inactive_seconds = 0;
					if($(this).val().trim().length) {
						$("#compose .compose-bar-send button").addClass("active");
					} else {
						$("#compose .compose-bar-send button").removeClass("active");
					}
				}).keyup();

				$("#compose button").click(function(e){
					$inactive_seconds = 0;
				});

				/* Inactive */

				$(".inactive button").click(function(e){
					$inactive_seconds = 0;
					pollNew($poll_seconds, false);
					$(".inactive").addClass('hide');
				});

				$("#message-board").mousemove(function(e) {
					$inactive_seconds = 0;
				});

				$("#message-board").scroll(function() {
					$inactive_seconds = 0;
				});        
				$("#messages").load($base+"admin/messages/messages/conversation/<?= $uId; ?>/<?= $chatId; ?>", function(){
					$("#messages").imagesLoaded().then(function(){
						
						$countdown();
						sizeBoard();

						pollNew($poll_seconds, true);

						$("#message-board").scrollTo(".thebottom");
						$(".preloader-page").fadeOut("fast");

						$("#message-board").focus();
					});
				});

				$("#send").on("click", function(e) {
					e.preventDefault();

					$inactive_seconds = 0;

					if($("#compose textarea").val().trim().length > 0){

						$vSecurity = $("#compose input[name=security]").val();

						if(contactFound($("#compose textarea").val()) && $vSecurity != 1) {

							modalOpen($base+"/my/modal/security?id=1331692", 'modal-lg');

						} else {

							$("#send").addClass("hide");
							$("#compose .preloader-send").removeClass("hide");

							$.post(
								$base+"admin/messages/messages/conversation_send",
								$("#compose form").serialize(),
								function(data) {

									$("#compose textarea").val("").keyup();

									$("#compose .preloader-send").addClass("hide");
									$("#send").removeClass("hide");

									$("#messages").html(data).imagesLoaded().then(function () {
										
										/*$("[data-toggle='tooltip']").tooltip();
										$("[data-toggle='popover']").popover();*/

										$countdown();
										sizeBoard();
										scrollBottom();

										/*gtag('event', 'reply', {
											'event_category': 'message',
											'event_label': ''
										});*/

									});

								}
							);

						}

					}

				});

				function contactFound($pText){

					var re = /([0-9+()-][0-9+() -]{7,50}[)0-9])|[^@\s]*@[^@\s]*\.[^@\s]*/;
					return re.test($pText)
				}

				$("#restore").click(function(e){
					e.preventDefault();
					callbackRestore();
				});

				$("#message-board").on("touchstart", function(e) {
					$("#message-board").focus();
				});

				$("#compose textarea").on("touchstart", function(e) {
					$("#message-board").scrollTo(".thebottom");
				});

				$("#compose textarea").focus(function(){
					$inactive_seconds = 0;
					scrollBottom();
					$(this).removeClass("is-invalid");

				});        

				$(document).on('reveal:close', function () {
					$("body").removeClass("modal");
					$("#message-board").scrollTo(".thebottom");
				});

				$(document).on("click", ".event-reveal", function(e) {
					e.preventDefault();
					modalOpen("/my/modal/reveal?id=1331692", "modal-lg");
				});

				
				// Actions

				$(document).on("click", "a[data-callback]", function(e) {
					e.preventDefault();
					eval($(this).attr("data-callback") + "();");
				});
				

				var $upload_progress = 0;

				$("#fileupload").fileupload({
					url: $base+'admin/messages/messages/conversation_upload/<?= $uId; ?>',
					sequentialUploads: true,
					dataType: 'json',
					add: function (e, data) {
						$.each(data.files, function (index, file) {
							var error = 0;

							if (!(/\.(gif|jpe?g|png)$/i).test(file.name)) {
								alert('File type not allowed. (JPG, GIF or PNG)');
								error = 1;
							}

							if(file.size > 20971520) {
								alert('Filesize is too large. (Maximum 20MB)');
								error = 1;
							}

							if(error == 1) {
								$(data.context).remove();
							} else {
								data.submit();
							}
						});
					},
					progressall: function (e, data) {

						$upload_progress = parseInt(data.loaded / data.total * 100, 10);

						$('.progress-photo .progress-bar').show().css('width', $upload_progress + '%');

					},
					done: function (e, data) {
						if(data.result) {

							$.post(
								$base+"admin/messages/messages/conversation/<?= $uId; ?>/<?= $chatId; ?>",
								function(data) {

									$("#messages").html(data).imagesLoaded().then(function () {

										$countdown();
										sizeBoard();
										scrollBottom();

									});
									
                                    console.log('messae');
									if($upload_progress == 100){
                                        console.log('progerss');
										$('.progress-photo .progress-bar').fadeOut("slow", function() {
											$('.progress-photo .progress-bar').css('width', '0%');
										});

									}

								}
							);

						}
					},
					stop: function (e, data) {}
				});

				$.fn.imagesLoaded = function () {

					// get all the images (excluding those with no src attribute)
					var $imgs = this.find('img[src!=""]');
					// if there's no images, just return an already resolved promise
					if (!$imgs.length) {return $.Deferred().resolve().promise();}

					// for each image, add a deferred object to the array which resolves when the image is loaded (or if loading fails)
					var dfds = [];
					$imgs.each(function(){

						var dfd = $.Deferred();
						dfds.push(dfd);
						var img = new Image();
						img.onload = function(){dfd.resolve();}
						img.onerror = function(){dfd.resolve();}
						img.src = this.src;

					});

					// return a master promise object which will resolve when all the deferred objects have resolved
					// IE - when all the images are loaded
					return $.when.apply($,dfds);

				}


				// Events

				var $events = Array();
				$events['notice'] = Array();
				$events['action'] = Array();

				$("#message-board").on("touchstart mouseover", ".conversation .message .event-notice", function(e) {

					$text = $(this).text().toLowerCase();

					if($events['notice'].indexOf($text) < 0){ //has not yet been tracked

						$events['notice'].push($text);
					}

				});

				$("#message-board").on("click", ".conversation li.actions a", function(e) {

					$text = $(this).text().toLowerCase();

					if($events['action'].indexOf($text) < 0){ 
						$events['action'].push($text);
					}

				});

			});

			/* Start: Generic Callbacks */

			function callbackBuyAdded(data) {

				$('#modal-blank').modal('hide');
				load_messages();

			}

			function callbackRefresh() {

				$('#modal-blank').modal('hide');
				load_messages();

			}

			function callbackPhoto(data) {

				$("#fileupload").trigger("click");

			}

			function callbackReturn(data) {

				$(".preloader-page").show();
				window.location = $base+"messages/messages/index/<?= $uId; ?>";

			}

			function callbackTracking(data) {

				callbackRefresh();

			}

			function pollNew(pSeconds, pFirst) {

				if(!pFirst){

					if($("#compose textarea[name='content']").val().length > 0) {
						$("#compose input[name='autosave']").val(1);
					}

					$send = $("#compose form textarea[name='content']").serialize() +
						"&last=" + $("ul.conversation li[data-timestamp]:last").attr("data-timestamp") +
						"&autosave=" + $("#compose input[name='autosave']").val() +
						"&id=<?= $chatId; ?>&to=<?= $user[0]['user_id']; ?>";

					$.ajax({
						type: "POST",
						url: $base+"admin/messages/messages/conversation/<?= $uId; ?>/<?= $chatId; ?>",
						data: $send,
						cache: false,
						success: function(data) {
							if(data.length > 0) {

								$("#messages").html(data);
								$countdown();
							}
						}
					});

					if($("#compose textarea[name='content']").val().length == 0) {
						$("#compose input[name='autosave']").val(0);
					}

				}

				window.setTimeout(function() {

					$inactive_seconds += pSeconds;

					if($inactive_seconds > $timeout_seconds) {
						$(".inactive").removeClass("hide");
					} else {
						pollNew(pSeconds, false);
					}

				}, pSeconds * 1000);

			}

			function sizeBoard() {

				$("#message-board").css("bottom", $("#compose").outerHeight());
				if( $("header").css("display") == "none"){
					$("#message-board").css("top", $("section.top").outerHeight());
				} else {
					$("#message-board").css("top", $("header").outerHeight() + $("section.top").outerHeight());
				}

			}

			function scrollBottom() {
				$("#message-board").scrollTo(".thebottom", 500);
			}

			function load_messages() {

				$.get($base+"admin/messages/messages/conversation/<?= $uId; ?>/<?= $chatId; ?>", function(data) {
					$("#messages").html(data).imagesLoaded().then(function() {

						$("[data-toggle='tooltip']").tooltip();
						$("[data-toggle='popover']").popover();

						$countdown();
						sizeBoard();
						scrollBottom();

					});
				});

			}
			
			$countdown=function(){if(typeof $countdown_timer!=='undefined'){clearInterval($countdown_timer)}
			if($(".countdown").length>0){$countdown_timer=setInterval(function(){$i=0;$now=moment.utc();$(".countdown").each(function(){$then=moment.unix($(this).attr("data-timestamp"));$seconds=moment($then).diff($now);if($seconds<=0){$(this).html(($(this).attr("data-expired")?$(this).attr("data-expired")+" ":"")).removeClass("countdown");if($(this).attr("data-callback")){eval($(this).attr("data-callback"))}}else{if($seconds<86400000){$(this).html(($(this).attr("data-prefix")?$(this).attr("data-prefix")+" ":"")+moment.utc($seconds).format("HH:mm:ss"))}else{$(this).html(($(this).attr("data-prefix")?$(this).attr("data-prefix")+" ":"")+moment.utc($then).fromNow(!0))}
			$i++}});if($i==0){clearInterval($countdown_timer)}},1000)}}

		</script>
	</body>
</html>