117 lines
3.4 KiB
PHP
117 lines
3.4 KiB
PHP
<?php $this->render('_templates/header'); ?>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- Back to Messenger -->
|
|
<div class="col-md-12">
|
|
<a href="<?= Config::get('URL') ?>message" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-arrow-left"></span> Back to Messenger
|
|
</a>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Chat Area -->
|
|
<div class="col-md-12">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
Conversation with <?= htmlspecialchars($this->other_user->user_name) ?>
|
|
</div>
|
|
<div class="panel-body message-container">
|
|
<?php if (empty($this->messages)): ?>
|
|
<div class="text-center">
|
|
<em>No messages yet. Start a conversation!</em>
|
|
</div>
|
|
<?php else: ?>
|
|
<?php foreach ($this->messages as $msg): ?>
|
|
<div class="message <?= $msg->message_type ?>">
|
|
<div class="message-bubble">
|
|
<?= htmlspecialchars($msg->message) ?>
|
|
</div>
|
|
<div class="message-time">
|
|
<?= date('M j, Y H:i', strtotime($msg->created_at)) ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Reply Form -->
|
|
<div class="panel-footer">
|
|
<form action="<?= Config::get('URL') ?>message/send" method="post" id="reply-form">
|
|
<input type="hidden" name="receiver_id" value="<?= $this->other_user->user_id ?>">
|
|
<div class="input-group">
|
|
<input type="text" name="message" class="form-control" placeholder="Type your message..." required>
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn btn-primary">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.message-container {
|
|
height: 400px;
|
|
overflow-y: auto;
|
|
background-color: #f5f5f5;
|
|
padding: 15px;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 15px;
|
|
clear: both;
|
|
}
|
|
|
|
.message.sent {
|
|
text-align: right;
|
|
}
|
|
|
|
.message.received {
|
|
text-align: left;
|
|
}
|
|
|
|
.message-bubble {
|
|
display: inline-block;
|
|
max-width: 70%;
|
|
padding: 10px 15px;
|
|
border-radius: 18px;
|
|
position: relative;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message.sent .message-bubble {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.message.received .message-bubble {
|
|
background-color: #e5e5ea;
|
|
color: black;
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 0.8em;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Scroll to bottom of messages on load */
|
|
.message-container {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Scroll to bottom of messages
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const container = document.querySelector('.message-container');
|
|
container.scrollTop = container.scrollHeight;
|
|
});
|
|
</script>
|
|
|
|
<?php $this->render('_templates/footer'); ?>
|