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

<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'); ?>