<?php
$encodeChat = json_decode($chats);
?>

<div class="container">
	<div class="card">
		<div class="card-header">
			<h3 class="text-center"> <b> <?= $encodeChat->title ?> </b> : Chat</h3>
		</div>

		<div class="card-body">
			<div class="row">
				<div class="col-lg-2"></div>
				<div class="col-lg-8">

					<!-- Logged in id == merchant_id_1 or 2  then am right section -->
					<?php

					foreach ($encodeChat->chats as $key => $chat) :
					?>
						<?php

						if ($chat->merchant_id_2 == $user->id) {
							echo '
										<!-- Right-aligned -->
										<div class="media mediaStyle">
										  <div class="media-body">
											<h4 class="media-heading text-right">' . $chat->merchant_name_2 . '</h4>
											<p class="text-right">' . $chat->message . '</p>
										  </div>
										  <div class="media-right">
											<img src="https://work.mali-mart.com/app-assets/images/members/avater_7.png" class="media-object" style="width:60px">
										  </div>
										</div>
										
									';
						} else {
							echo '
										<div class="media mediaStyle">
										 	<div class="media-left">
												<img src="https://work.mali-mart.com/app-assets/images/members/avater_7.png" class="media-object" style="width:60px">
											  </div>
										  
											  <div class="media-body text-left">
												<h4 class="media-heading text-left">' . $chat->merchant_name_2 . '</h4>
												<p >' . $chat->message . '</p>
											  </div>
										</div>
									';
						}

						?>

					<?php endforeach; ?>
					<hr>
				</div>

				<div class="col-lg-12">
					<div class="form-group">
						<textarea name="message" id="" cols="30" rows="10" class="form-control message" placeholder="Your Message"></textarea>
					</div>

					<br>

					<input type="button" value="Sent" class="btn btn-success sentMessage">

				</div>

			</div>
		</div>
	</div>
</div>

<style>
	.mediaStyle {

		border: 1px solid #FFE000;
		padding: 5px;
		border-radius: 5px;
		margin-bottom: 9px;

	}
</style>

<script>
	$(".sentMessage").click(function() {
		var message = $(".message").val();
		if (message) {
			$.ajax({
				method: "post",
				url: 'https://myadmin.mali-mart.com/api/chat-store',
				data: {
					job_bid_id: '<?= $bid_id ?>',
					merchant_id_2: '<?= $user->id ?>',
					message: message,
					merchant_name_2: '<?= $user->name ?>'
				},
				dataType: 'json',
				success: function(res) {
					location.reload();
					console.log(res);
				}
			});
		}
	});
</script>