<?php
include_once "global.php";

$pageTitle = "Chatroom - ";
include_once 'header.php';

$productClass->updateLastSeen();
?>

<h6 class="mb-0 text-uppercase">Chatroom</h6>
<hr>
<div class="card">
    <div class="card-body p-4">
        <div class="chat-wrapper">
            <div class="chat-sidebar">
                <div class="chat-sidebar-header">
                    <div class="d-flex align-items-center">
                        <div class="chat-user-online">
                            <img src="<?php echo $productClass->getUserImage(); ?>" width="45" height="45"
                                class="rounded-circle"
                                alt="<?php echo $functions->webUserName($_SESSION["webUser"]["id"], 'acc_name'); ?>" />
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <p class="mb-0">
                                <?php echo $functions->webUserName($_SESSION["webUser"]["id"], 'acc_name'); ?></p>
                        </div>
                        <div class="dropdown">
                            <div class="cursor-pointer font-24 dropdown-toggle dropdown-toggle-nocaret"
                                data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded'></i>
                            </div>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#" data-bs-toggle="modal"
                                    data-bs-target="#createGroupModal">Create New Group</a>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3"></div>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" placeholder="Search People, Group">
                    </div>
                    <div class="chat-tab-menu mt-3">
                        <ul class="nav nav-pills nav-justified">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="pills-Chats-tab" data-bs-toggle="pill"
                                    href="#pills-Chats" role="tab" aria-controls="pills-Chats" aria-selected="true">
                                    <div class="font-24"><i class='bx bx-conversation'></i></div>
                                    <div><small>Chats</small></div>
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="pills-Groups-tab" data-bs-toggle="pill" href="#pills-Groups"
                                    role="tab" aria-controls="pills-Groups" aria-selected="false">
                                    <div class="font-24"><i class='bx bx-group'></i></div>
                                    <div><small>Groups</small></div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="chat-sidebar-content">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-Chats" role="tabpanel"
                            aria-labelledby="pills-Chats-tab">
                            <div class="chat-list" id="chatList">
                                <div class="list-group list-group-flush">
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-Groups" role="tabpanel" aria-labelledby="pills-Groups-tab">
                            <div class="chat-list">
                                <div class="list-group list-group-flush">
                                    <?php
                                    $userId = $webClass->webUserId();
                                    $sql = "SELECT g.id, g.group_name FROM chat_groups g JOIN chat_group_members m ON g.id = m.group_id WHERE m.user_id = ?";
                                    $groups = $dbF->getRows($sql, [$userId]);

                                    foreach ($groups as $group) {
                                        echo "<a href='javascript:;' class='list-group-item group-select' data-group-id='{$group['id']}'>
                                        <div class='d-flex'>
                                            <div class='ms-2'>
                                                <h6 class='mb-0'>{$group['group_name']}</h6>
                                            </div>
                                        </div>
                                    </a>";
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="chatWindow" style="display: none;">
                <div class="chat-header d-flex align-items-center">
                    <div class="chat-toggle-btn"><i class='bx bx-menu-alt-left'></i>
                    </div>
                    <div>
                        <h4 class="mb-1 font-weight-bold currentChatUser"></h4>
                        <div class="list-inline d-sm-flex mb-0 d-none">
                            <a href="javascript:;"
                                class="list-inline-item d-flex align-items-center text-secondary lastStatus">
                            </a>
                            <a href="javascript:;"
                                class="list-inline-item d-flex align-items-center text-secondary">|</a>
                            <a href="javascript:;" id="findChatBtn"
                                class="list-inline-item d-flex align-items-center text-secondary"><i
                                    class='bx bx-search me-1'></i>Find</a>
                        </div>
                    </div>
                </div>
                <div class="chat-content">

                </div>
                <div class="chat-footer d-flex align-items-center">
                    <div class="flex-grow-1 pe-2">
                        <div class="input-group">
                            <span class="input-group-text"><button class="border-0 bg-transparent text-light"
                                    id="emoji-button"><i class='bx bx-smile'></i></button></span>
                            <input type="text" id="chatInput" class="form-control" placeholder="Type a message"
                                required>
                        </div>
                    </div>
                    <div class="chat-footer-menu">
                        <input type="file" id="fileInput" style="display: none;">
                        <a href="javascript:;" id="fileTrigger"><i class='bx bx-file'></i></a>
                    </div>
                </div>
            </div>
            <!--start chat overlay-->
            <div class="overlay chat-toggle-btn-mobile"></div>
            <!--end chat overlay-->
        </div>
    </div>
</div>
<?php
include_once 'footer.php';
?>

<script>
    new PerfectScrollbar('.chat-list');
    new PerfectScrollbar('.chat-content');
</script>