alrahma_sunday_school/app/Views/teacher/teacher_message.php

<?= $this->extend('layout/main_layout') ?>
<?= $this->section('content') ?>
<div class="container-xxl py-5">
    <div class="container">
        <div class="sidebar">
            <a href="<?= base_url('messages/inbox') ?>" class="active">Inbox</a>
            <a href="<?= base_url('messages/sent') ?>">Sent</a>
            <a href="<?= base_url('messages/drafts') ?>">Drafts</a>
            <a href="<?= base_url('messages/trash') ?>">Trash</a>
        </div>

        <div class="main-content">
            <div class="dashboard-title">
                <h1 class="h2">Messages</h1>
                <h5 class="h5 mt-2">Manage your messages.</h5>
            </div>

            <!-- Button to trigger the modal -->
            <div class="text-center mb-3">
                <button type="button" class="btn btn-info" id="composeMessageBtn">Compose Message</button>
            </div>

            <!-- Section to display received messages -->
            <div class="message-list">
                <h3>Inbox</h3>
                <?php if (!empty($receivedMessages)): ?>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col"><input type="checkbox" id="select-all"></th>
                                    <th scope="col">From</th>
                                    <th scope="col">Subject</th>
                                    <th scope="col">Date</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($receivedMessages as $message): ?>
                                    <tr>
                                        <td><input type="checkbox" name="message_select[]"></td>
                                        <td><?= esc($message['sender_name']) ?></td>
                                        <td><a
                                                href="<?= base_url('messages/view/' . $message['id']) ?>"><?= esc($message['subject']) ?></a>
                                        </td>
                                        <td><?= esc(!empty($message['sent_datetime']) ? local_datetime($message['sent_datetime'], 'm-d-Y H:i') : '') ?></td>
                                        <td>
                                            <a href="<?= base_url('messages/delete/' . $message['id']) ?>"
                                                class="text-danger">Delete</a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php else: ?>
                    <p>No messages found.</p>
                <?php endif; ?>
            </div>

            <!-- Modal for Compose Message -->
            <div class="modal fade" id="composeMessageModal" tabindex="-1" role="dialog"
                aria-labelledby="composeMessageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="composeMessageModalLabel">Compose Message</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form action="<?= base_url('messages/send') ?>" method="post" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="recipient-type">Recipient Type</label>
                                    <select class="form-control" id="recipient-type" name="recipient_type" required>
                                        <option value="" disabled selected>Select recipient type</option>
                                        <option value="administration">Administration</option>
                                        <option value="teacher">Teacher</option>
                                        <option value="parent">Parent</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="recipient">Recipient</label>
                                    <select class="form-control" id="recipient" name="recipient_id" required>
                                        <!-- This will be populated dynamically -->
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="subject">Subject</label>
                                    <input type="text" class="form-control" id="subject" name="subject" required>
                                </div>
                                <div class="form-group">
                                    <label for="message">Message</label>
                                    <textarea class="form-control" id="message" name="message" rows="4"
                                        required></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="priority">Priority</label>
                                    <select class="form-control" id="priority" name="priority">
                                        <option value="low">Low</option>
                                        <option value="normal" selected>Normal</option>
                                        <option value="high">High</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="attachment">Attachment</label>
                                    <input type="file" class="form-control" id="attachment" name="attachment">
                                </div>
                                <button type="submit" class="btn btn-primary btn-block">Send Message</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?= $this->endSection() ?>

    <?= $this->section('scripts') ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('recipient-type').addEventListener('change', function() {
                var recipientType = this.value;
                var recipientSelect = document.getElementById('recipient');

                // Clear previous options
                recipientSelect.innerHTML = '<option value="" disabled selected>Select recipient</option>';

                if (recipientType) {
                    fetch(`<?= base_url('messages/getRecipients') ?>/${recipientType}`)
                        .then(response => response.json())
                        .then(data => {
                            data.forEach(recipient => {
                                var option = document.createElement('option');
                                option.value = recipient.id;
                                option.textContent = recipient.name;
                                recipientSelect.appendChild(option);
                            });
                        })
                        .catch(error => console.error('Error fetching recipients:', error));
                }
            });

            document.getElementById('select-all').addEventListener('change', function() {
                var checkboxes = document.querySelectorAll('input[name="message_select[]"]');
                checkboxes.forEach(checkbox => checkbox.checked = this.checked);
            });

            // Show the message composer modal when the Compose Message button is clicked
            $('#composeMessageBtn').click(function() {
                $('#composeMessageModal').modal('show');
            });
        });
    </script>
<?= $this->endSection() ?>