<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center w-100">
        <h3 class="card-title mb-1" style="margin-top: 5px;">Halaman Mengirim Pesan</h3>
    </div>
    <div class="row">
        <div class="col-lg-6 mt-4 ml-4">
            <div class="card-body">
                <div class="chat-box" style="max-height: 400px; overflow-y: auto;">
                    <?php foreach ($chats as $chat): ?>
                        <div class="mb-3">
                            <strong>
                                <?= $chat->nama_wali ?> (<?= $chat->nama_santri ?>)
                                <?= $chat->sender == 'admin' ? '[Admin]' : '' ?>
                            </strong><br>
                            <span><?= $chat->message ?></span><br>
                            <small class="text-muted"><?= date('d M Y H:i', strtotime($chat->timestamp)) ?></small>
                        </div>
                    <?php endforeach; ?>
                </div>

                <!-- Form kirim pesan -->
                <form action="<?= base_url('chat/send') ?>" method="post">
                    <input type="hidden" name="sender" value="admin">
                    <div class="form-group">
                        <label for="id_wali_santri">Pilih Wali Santri:</label>
                        <select name="id_wali_santri" class="form-control" required>
                            <?php
                            $wali_santri_list = $this->db->get('tb_wali_santri')->result();
                            foreach ($wali_santri_list as $wali):
                            ?>
                                <option value="<?= $wali->id_wali_santri ?>"><?= $wali->nama_wali_santri ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="message">Pesan:</label>
                        <textarea name="message" class="form-control" rows="2" required></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary">Kirim</button>
                </form>
            </div>
        </div>
    </div>
</div>