<?php $script = ""; ?>
<?php foreach ($all_chats as $v_chat) : ?>
    <?php
    if (empty($v_chat->title)) {
        $v_chat->title = 'cool';
    }
    ?>
    <?php if ($v_chat->active == 0) : ?>
        <div class="chat_badge rounded-full bg-indigo-600 text-white shadow-md px-4 py-2 text-xs font-semibold flex items-center gap-2"
             data-chat-open="<?php echo $v_chat->private_chat_id ?>"
             id="open_chat_box_<?php echo $v_chat->private_chat_id ?>">
            <?php if ($v_chat->unread) : ?><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] uppercase tracking-wide"><?php echo lang("new") ?></span><?php endif; ?>
            <span class="chat_title truncate"><?php echo $v_chat->title ?></span>
        </div>
    <?php elseif ($v_chat->active == 1) : ?>
        <?php
        // get all message by private chat id
        $messages = array();
        $limit = 5;
        $last_reply_id = 0;
        $all_messages = $this->chat_model->get_chat_messages($v_chat->private_chat_id, $v_chat->deleted);
        foreach ($all_messages as $message) {
            array_push($messages, $message);
            if ($last_reply_id == 0) {
                $last_reply_id = $message->private_chat_messages_id;
            }
        }
        $messages = array_reverse($messages);

        $window_id = "open_chat_" . $v_chat->private_chat_id;
        $script .= '$("#' . $window_id . '").scrollTop($("#' . $window_id . '")[0].scrollHeight);';
        ?>
        <div class="w-80 rounded-2xl border border-border bg-card shadow-xl overflow-hidden chat_<?= $v_chat->to_user_id ?>" id="open_chat_box_<?php echo $v_chat->private_chat_id ?>">
            <div class="flex items-center justify-between bg-muted/40 border-b border-border px-4 py-3">
                <div class="min-w-0">
                    <div class="chat_title text-sm font-semibold text-foreground truncate"><?php echo $v_chat->title ?></div>
                </div>
                <div class="flex items-center gap-2 text-muted-foreground">
                    <div class="relative" data-dropdown>
                        <button type="button" class="rounded-md p-1 hover:bg-muted" data-dropdown-toggle>
                            <i data-lucide="settings" class="h-4 w-4"></i>
                        </button>
                        <div class="hidden absolute right-0 mt-2 w-48 rounded-lg border border-border bg-card shadow-lg z-50" data-dropdown-menu>
                            <a class="block px-3 py-2 text-xs text-foreground hover:bg-muted" href="<?= base_url('chat/conversations/' . $v_chat->to_user_id) ?>"><?= lang('full_conversation') ?></a>
                            <a data-toggle="modal" data-target="#myModal"
                               class="btn_modal block px-3 py-2 text-xs text-foreground hover:bg-muted"
                               href="<?= base_url('chat/change_title/' . $v_chat->private_chat_users_id) ?>"><?= lang('edit') . ' ' . lang('name') ?></a>
                            <button type="button" class="block w-full text-left px-3 py-2 text-xs text-rose-600 hover:bg-rose-50" data-chat-delete="<?php echo $v_chat->private_chat_id ?>"><?= lang('delete_conversation') ?></button>
                        </div>
                    </div>
                    <button type="button" class="rounded-md p-1 hover:bg-muted" data-chat-minimize="<?php echo $v_chat->private_chat_id ?>">
                        <i data-lucide="minus" class="h-4 w-4"></i>
                    </button>
                    <button type="button" class="rounded-md p-1 hover:bg-muted" data-chat-close="<?php echo $v_chat->private_chat_id ?>">
                        <i data-lucide="x" class="h-4 w-4"></i>
                    </button>
                </div>
            </div>
            <div class="chat-body px-4 py-3 space-y-2 max-h-64 overflow-y-auto" data-chat-body
                 id="open_chat_<?php echo $v_chat->private_chat_id ?>">
                <ul>
                    <?php foreach ($messages as $message) : ?>
                        <?php
                        if ($message->user_id == $this->session->userdata('user_id')) {
                            ?>
                            <li class="flex justify-end">
                                <div class="max-w-[75%] space-y-1">
                                    <div class="rounded-2xl rounded-tr-sm bg-indigo-600 text-white px-3 py-2 text-sm">
                                        <?php echo $message->message ?>
                                    </div>
                                    <div class="text-[10px] text-muted-foreground text-right">
                                        <?= time_ago($message->message_time); ?>
                                    </div>
                                </div>
                            </li>
                        <?php } else { ?>
                            <li class="flex items-start gap-2">
                                <img class="h-8 w-8 rounded-full object-cover" src="<?= base_url(staffImage($message->user_id)) ?>">
                                <div class="max-w-[75%] space-y-1">
                                    <div class="rounded-2xl rounded-tl-sm bg-muted/60 text-foreground px-3 py-2 text-sm">
                                        <?php echo $message->message ?>
                                    </div>
                                    <div class="text-[10px] text-muted-foreground">
                                        <?= time_ago($message->message_time); ?>
                                    </div>
                                </div>
                            </li>
                        <?php }
                        ?>
                    <?php endforeach; ?>
                </ul>
                <input type="hidden" id="last_reply_id_<?php echo $v_chat->private_chat_id ?>"
                       value="<?php echo $last_reply_id ?>">
            </div>
            <div class="border-t border-border px-3 py-3 bg-card">
                <input class="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm"
                       required name="reply"
                       data-chat-input="<?php echo $v_chat->private_chat_id ?>"
                       id="chat_input_message_<?php echo $v_chat->private_chat_id ?>"
                       placeholder="<?= lang('chat_input_placeholder') ?>">
            </div>
        </div>
    <?php endif; ?>
<?php endforeach; ?>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        <?php echo $script ?>
    });
</script>
