<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
<%- include('./partials/csslinks') %>
</head>
<body>
<%- include('./partials/header') %>
<section class="dashboard-main-section">
<div class="container">
<div class="dashboard-main-setting profile-info mx-auto">
<div class="profile-history">
<div class="profile-person-history">
<img src="<%=
user ? (user.profilePic ? user.profilePic : '/assets/img/user-icon.webp') :
(business.profilePic ? business.profilePic : '/assets/img/business-icon.jpg')
%>" alt="">
<div class="px-3">
<h6><%= user ? user.fullName : business.fullName %></h6>
<span>Manager</span>
</div>
</div>
</div>
<h5 class="fw-bold text-center fw-head">Chat</h5>
<div class="additional-info">
<div class="row g-0">
<div class="col-lg-4 col-12 panel">
<div class="info-item-l h-100">
<div class="history-input-design">
<input type="text" class="" placeholder="Search...">
<button><i class="bi bi-search"></i></button>
</div>
<!-- <%- JSON.stringify(availableList) %> -->
<ul class="chat-list">
<!-- <%- JSON.stringify(availableList) %> -->
<% availableList.forEach(( item) => { %>
<li>
<a class="profile-person-history" href="/chat?<%= business ? 'user': 'business' %>=<%= item._id %>">
<img src="<%= item.profilePic ? item.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<div class="px-3">
<h6><%= item.fullName %></h6>
<span>Manager</span>
</div>
</a>
</li>
<% }) %>
</ul>
</div>
</div>
<div class="col-lg-8 col-12 panel">
<div class="info-item-r h-100">
<% if(recipent) { %>
<div class="main-profile">
<div class="chat-head">
<a class="profile-person-history" href="javascript:;">
<img src="<%= recipent?.profilePic ? recipent?.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<div class="px-3">
<h6><%= recipent ? recipent?.fullName : '' %></h6>
<span><%= recipent?.industry %></span>
</div>
<div class="mian-calling">
<i class="fa-solid fa-phone"></i>
<i class="fa-solid fa-video"></i>
</div>
</a>
<hr>
</div>
</div>
<div class="chat-box">
<!-- Conversation: <%- JSON.stringify(conversation) %> -->
<% if(conversation.length>0) { %>
<ul class="conversation">
<% conversation.forEach((item) => { %>
<li class="<%= item.sender?._id.toString() == recipent._id.toString() ? 'recipent' : 'user' %>">
<img src="<%= item.sender?.profilePic ? item.sender?.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<div class="message">
<div class="info"><%= item.sender?.fullName %> <small>11:12 pm</small></div>
<p><%= item.message %></p>
</div>
</li>
<% }) %>
</ul>
<% } %>
</div>
<form id="chat-form">
<input type="hidden" name="sender" value="<%= user ? user._id : business ? business._id : '' %>">
<input type="hidden" name="senderModel" value="<%= user ? 'user' : business ? 'business' : '' %>">
<input type="hidden" name="recipient" value="<%= recipent?._id %>">
<input type="hidden" name="recipientModel" value="<%= business ? 'user' : user ? 'business' : '' %>">
<div class="chat-input-field">
<textarea name="message" placeholder="Type Here...." required></textarea>
<button type="submit"><i class="bi bi-send-fill"></i></button>
</div>
</form>
<% } else { %>
<div class="empty-chat">
<img class="mb-3" src="/assets/img/chat-icon.png" alt="Chat Icon">
<h6 class="text-center">Looking forward to chatting? <br/> Start a Conversation!</h6>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<%- include('./partials/query') %>
<%- include('./partials/footer') %>
<%- include('./partials/scriptlinks') %>
<script>
// Listen for new messages
socket.on('newMessage', (msg) => {
console.log('New msg received:', msg);
$(".chat-box .conversation").append(`
<li class="recipent">
<img src="<%= recipent?.profilePic ? recipent?.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<div class="message">
<div class="info"><%= recipent?.fullName %> <small>11:12 pm</small></div>
<p>${msg.message}</p>
</div>
</li>
`)
$('.chat-box .conversation').scrollTop($('.chat-box .conversation')[0].scrollHeight)
});
// Send a message
const sendMessage = (e) => {
e.preventDefault()
const curForm = e.target
const message = $(curForm).find('textarea').val()
const formData = new FormData(curForm);
const formDataObj = {};
formData.forEach((value, key) => {
formDataObj[key] = value;
});
socket.emit('sendMessage', formDataObj);
$(curForm).find('textarea').val('')
$(".chat-box .conversation").append(`
<li class="user">
<img src="<%= user ? (user.profilePic ? user.profilePic : '/assets/img/user-icon.webp') : (business.profilePic ? business.profilePic : '/assets/img/user-icon.webp') %>" alt="">
<div class="message">
<div class="info"><%= user ? user.fullName : business.fullName %> <small>11:12 pm</small></div>
<p>${message}</p>
</div>
</li>
`)
$('.chat-box .conversation').scrollTop($('.chat-box .conversation')[0].scrollHeight)
};
$("#chat-form").submit(sendMessage)
</script>
</body>
</html>