ITL-Huge/application/view/message/index.php

<?php $this->render('_templates/header'); ?>

<div class="container">
    <h1>Messenger</h1>
    
    <div class="row">
        <!-- Conversations List -->
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Conversations
                    <?php if ($this->unread_count > 0): ?>
                        <span class="badge pull-right"><?= $this->unread_count ?></span>
                    <?php endif; ?>
                </div>
                <div class="panel-body" style="padding: 0; max-height: 500px; overflow-y: auto;">
                    <div class="list-group">
                        <?php if (empty($this->conversations)): ?>
                            <div class="list-group-item">
                                <em>No conversations yet</em>
                            </div>
                        <?php else: ?>
                            <?php foreach ($this->conversations as $conv): ?>
                                <a href="<?= Config::get('URL') ?>message/conversation/<?= $conv->other_user_id ?>" 
                                   class="list-group-item <?= $conv->unread_count > 0 ? 'active' : '' ?>">
                                    <h5 class="list-group-item-heading">
                                        <?= htmlspecialchars($conv->user_name) ?>
                                        <?php if ($conv->unread_count > 0): ?>
                                            <span class="badge"><?= $conv->unread_count ?></span>
                                        <?php endif; ?>
                                    </h5>
                                    <p class="list-group-item-text">
                                        <small><?= date('M j, Y', strtotime($conv->last_message_time)) ?></small>
                                    </p>
                                </a>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <!-- New Message -->
            <div class="panel panel-default">
                <div class="panel-heading">New Message</div>
                <div class="panel-body">
                    <form action="<?= Config::get('URL') ?>message/send" method="post">
                        <div class="form-group">
                            <label for="receiver_id">To:</label>
                            <select name="receiver_id" id="receiver_id" class="form-control" required>
                                <option value="">Select user</option>
                                <?php foreach ($this->all_users as $user): ?>
                                    <option value="<?= $user->user_id ?>"><?= htmlspecialchars($user->user_name) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject:</label>
                            <input type="text" name="subject" id="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message:</label>
                            <textarea name="message" id="message" class="form-control" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
            
            <!-- Send to Group -->
            <div class="panel panel-default">
                <div class="panel-heading">Send to Group</div>
                <div class="panel-body">
                    <form action="<?= Config::get('URL') ?>message/sendgroup" method="post">
                        <div class="form-group">
                            <label for="group_type">Group:</label>
                            <select name="group_type" id="group_type" class="form-control" required>
                                <option value="">Select group</option>
                                <option value="all_users">All Users</option>
                                <option value="admins">Administrators</option>
                                <option value="moderators">Moderators</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="group_subject">Subject:</label>
                            <input type="text" name="subject" id="group_subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="group_message">Message:</label>
                            <textarea name="message" id="group_message" class="form-control" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-warning">Send to Group</button>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Chat Area -->
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Chat Area
                    <span class="pull-right">Select a conversation to start messaging</span>
                </div>
                <div class="panel-body" style="height: 500px; background-color: #f5f5f5; text-align: center; padding-top: 200px;">
                    <em>Select a conversation from the left to view messages</em>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.message-container {
    height: 400px;
    overflow-y: auto;
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.message {
    margin-bottom: 10px;
    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;
}

.message.sent .message-bubble {
    background-color: #007bff;
    color: white;
    float: right;
}

.message.received .message-bubble {
    background-color: #e5e5ea;
    color: black;
    float: left;
}

.message-time {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    clear: both;
}

.badge {
    background-color: #d9534f;
}

.list-group-item.active {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.list-group-item.active .badge {
    background-color: #d9534f;
}
</style>

<?php $this->render('_templates/footer'); ?>