OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 b_group.php	13.6 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 b_index.php	25.61 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 back_create_group.php	9.22 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 backup	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 broadcast.php	22.48 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 create_broadcast.php	19.39 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 create_group.php	18.06 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📁 dump	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 group.php	21.38 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📁 inc	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 index.php	13.38 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 join_now.php	7.77 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 new2_index.php	17.63 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 new_index.php	17.11 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 sidebar.php	5.07 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 testing.php	3.32 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📁 trash	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 z_index.php	4.83 KB	05/19/2025 10:07:13 AM	rw-r--r--

Editing: group.php

<!doctype html>
<html lang="en">

<?php
include '../assets/php/validate.logged.php';
include '../assets/php/function.php';
include '../inc/config.php';
include 'inc/db_connect.php';
include 'inc/function.php';

if (isset($_POST['group_id'])) {
    $group_id = $_POST['group_id'];
} else {
    die("Invalid Response");
}

$chat = [];
$chat = display_messages($conn, $group_id);
$group_name = display_group_name($conn, $group_id);
$broadcasts = [];
$broadcasts = display_broadcast($conn, $gUserId);
$groups = [];
$groups = display_groups($conn, $gUserId);
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Group Chat &bull; Knobly Cream</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<link rel="stylesheet" href="../inc/fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="../inc/style.css" />

a {
            text-decoration: none;
        }

.btn-danger:hover {
            background-color: #333333 !important;
        }

.btn-danger.focus,
        .btn-danger:focus {
            color: #fff;
            background-color: #121212 !important;
            border-color: #121212 !important;
            box-shadow: 0 0 0 .2rem rgba(225, 83, 97, .5);
        }

.btn-danger:hover {
            color: #fff;
            background-color: #c82333;
            border-color: #bd2130;
        }

.list-group-item {
            background-color: transparent !important;
            padding: 10px !important;
            border: none !important;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: background-color 0.3s ease;
            border-radius: 10px;
        }

.list-group-item {
            position: relative;
            display: block;
            padding: .75rem 1.25rem;
            background-color: transparent !important;
            border: 1px solid rgba(0, 0, 0, .125);
        }

.sidebar {
            width: 25%;
            background-color: #1c1c1c;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            padding: 10px;
            padding-top: 15px;
        }

.btn-danger {
            background-color: #121212 !important;
            border: none;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.content {
            margin-left: 26%;
            flex-grow: 1;
            background-color: #1c1c1c;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

.btn-danger {
            background-color: #25d366;
            border: none;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.btn-danger:hover {
            background-color: #128c7e;
        }

/* Chat List */
        .list-group-item {
            background-color: #333333;
            padding: 15px;
            border: none;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: background-color 0.3s ease;
            border-radius: 10px;
        }

.list-group-item:hover {
            background-color: #444444;
        }

.list-group-item .avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #555;
        }

.list-group-item .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.list-group-item .info {
            flex-grow: 1;
        }

.list-group-item .name {
            font-weight: bold;
            color: #e5e5e5;
        }

.list-group-item .timestamp {
            font-size: 12px;
            color: #888;
        }

/* Create Group and Broadcast Card */
        .create-chat-card,
        .create-broadcast-card {
            background-color: #1c1c1c;
            padding: 20px;
            border-radius: 10px;
            display: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

.create-chat-card input,
        .create-broadcast-card input {
            width: 100%;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            border: 1px solid #444444;
            background-color: #333333;
            color: #e5e5e5;
        }

.scrollable-list {
            max-height: 350px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

.scrollable-list-item {
            background-color: #333333;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

.scrollable-list-item:hover {
            background-color: #444444;
        }

.scrollable-list {
            width: 100%;
            max-height: 350px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

/* Responsive Layout */
        @media (max-width: 768px) {
            .sidebar {
                /* width: 100%; */
                margin-bottom: 20px;
            }
        }

form {
            max-width: 600px;
            background-color: #0c0b0b;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <?
    include "../assets/php/navbar.php";
    ?>
    <div class="container">
        
        <? include "sidebar.php"; ?>
        
        <div class="content">
            <h3 class="text-center text-white">Create or Manage Chats</h3>
            <div class="create-chat-card" id="create-group-form-container">
                <h4 class="text-white">Create a Group</h4>
                <form id="create-group-form">
                    <input type="text" id="group-name" class="form-control" placeholder="Enter group name..." required>
                    <div class="scrollable-list">
                    </div>
                    <button type="submit" class="btn btn-danger btn-block">Create Group</button>
                </form>
            </div>
            <div class="create-broadcast-card" id="create-broadcast-form-container">
                <h4 class="text-white">Create a Broadcast</h4>
                <form id="create-broadcast-form">
                    <input type="text" id="broadcast-name" class="form-control" placeholder="Enter broadcast name..." required>
                    <div class="scrollable-list">
                    </div>
                    <button type="submit" class="btn btn-danger btn-block">Create Broadcast</button>
                </form>
            </div>
            <div id="layoutSidenav_content">
                <main>
                    <div id="panelContent" class="container-fluid"></div>
                    <div class="chat-message">
                        <div class="post">
                            <div class="group-heading">
                                <div style="display: flex;">
                                    <img id='image_icon' src="<?= display_image($conn, 'group', $group_id) ?>" alt="">
                                    <h2><?= $group_name ?></h2>
                                </div>

<button id="toggleGroupButton"><i class="fas fa-ellipsis-v"></i></button>
                                
                            </div>
                            
                        </div>
                        <div class="chat-box" id="chat-box">
                            <?

foreach ($chat as $message) {
                                $messageText = replace_urls_with_links(htmlspecialchars($message['message']));
                                $time = htmlspecialchars($message['time']);
                                $user = htmlspecialchars_decode($message['user_name']);
                                $message_id = htmlspecialchars_decode($message['message_id']);
                            ?>
                                <div class="incoming">
                                    <div class="incoming-text" data-message_id="<?= $message_id ?>">
                                        <?= $messageText ?>
                                    </div>
                                    <div class="nameWithTime" style="display: flex; column-gap: 5px;">
                                        <div class="Sendername"><?= $user ?></div>
                                        <div class="dateWithTime"><?= $time ?></div>
                                    </div>

</div>
                        <div class="message-input">
                            <textarea id="message-input" placeholder="Type your message..."></textarea>
                            <button onclick="sendMessage('group','<?= $group_id ?>', '<?= $gUserId ?>', '<?= $gUserName ?>')">Send</button>
                        </div>

<div>
                                <h5><b>Group Description:</b></h5>
                                <p style="padding-left: 3vw; padding-right: 3vw; max-width: 40vw;"><?= display_description($conn, 'group', $group_id) ?></p>
                            </div>
                            
                            <p>
                            <h5><b>Group members:</b></h5>
                            </p>

<?
                            $group_members = display_group_members($conn, $group_id);
                            if ($group_members) { ?>
                                <ul>
                                    <?
                                    foreach ($group_members as $member) : ?>
                                        <li><?= $member['user_name'] ?>, <?= $member['user_email'] ?></li>
                                    <? endforeach;
                                } else {
                                    ?>
                                    <li>No Group Members</li>

<? } ?>
                                </ul>
                                <div>
                                    <input type="text" id="search-input1" placeholder="Search by name...">
                                    <div class="scrollable-list">

<?
                                        // List of members (you can fetch from database dynamically if needed)
                                        $members = members_to_add($conn, $group_id);

foreach ($members as $member) {
                                        ?>
                                            <div class="scrollable-list-item">
                                                <a href="#" class="member-link" data-user_id="<?= htmlspecialchars($member['user_id']) ?>" data-user_name="<?= htmlspecialchars($member['user_name']) ?>"><?= htmlspecialchars($member['user_name']) ?>, <?= htmlspecialchars($member['user_email']) ?></a>
                                            </div>
                                        <? }
                                        ?>
                                    </div>
                                    <div class="selected-options">
                                        <h5><b>Selected Members:</b></h5>
                                        <div id="selected-members-info">
                                            <p>No members selected.</p>
                                        </div>
                                        <input type="hidden" name="selected_members" id="selected-members-hidden" value="">
                                    </div>
                                    <button onclick="updateGroupDetails(<?= $group_id; ?>)">Add Members</button>
                                    <button onclick="copyInviteLink('group',<?= $group_id ?>)">Invite link</button>
                                </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <? include '../assets/php/bottom_navbar.php' ?>

</body>

// Toggle Create Broadcast Form
        $('#show-create-broadcast-btn').click(function() {
            $('#create-broadcast-form-container').toggle();
        });

// Handle Group/Broadcast Form Submission (Example for Create Group)
        $('#create-group-form').submit(function(event) {
            event.preventDefault();
            var groupName = $('#group-name').val();
            console.log('Creating group:', groupName);
            // Handle the logic to create group
        });

// Handle Broadcast Form Submission (Example for Create Broadcast)
        $('#create-broadcast-form').submit(function(event) {
            event.preventDefault();
            var broadcastName = $('#broadcast-name').val();
            console.log('Creating broadcast:', broadcastName);
            // Handle the logic to create broadcast
        });
    });
</script>

// Add click event listener to the button
    $toggleGroupButton.on('click', function() {
        // Toggle the visibility of the group members container
        $groupMembersContainer.toggle();
    });
</script>
<script>
    $(document).ready(function() {
        $('.group-item .group-link').contextmenu(function(e) {
            // Prevent default right-click context menu
            e.preventDefault();

// Hide any previous context menus
            $('.context-menu').hide();

// Show context menu at mouse position
            var contextMenu = $('#group-context-menu');
            contextMenu.css({
                display: 'block',
                left: e.pageX,
                top: e.pageY
            });

// Store the group item ID
            contextMenu.data('group-id', $(this).parent().attr('id'));
        });

$('.broadcast-item .broadcast-link').contextmenu(function(e) {
            // Prevent default right-click context menu
            e.preventDefault();

// Hide any previous context menus
            $('.context-menu').hide();

// Show context menu at mouse position
            var contextMenu = $('#broadcast-context-menu');
            contextMenu.css({
                display: 'block',
                left: e.pageX,
                top: e.pageY
            });

// Store the group item ID
            contextMenu.data('broadcast-id', $(this).parent().attr('id'));
        });

// Click handler for context menu items
        $('#group-context-menu').on('click', '.delete-group', function(e) {
            e.preventDefault(); // Prevent the default link behavior
            var groupId = $('#group-context-menu').data('group-id').replace('group_', '');
            deleteGroup('group', groupId);
        });

$('#group-context-menu').on('click', '.exit-group', function(e) {
            e.preventDefault(); // Prevent the default link behavior
            var userid = <?= $gUserId ?>;
            var groupId = $('#group-context-menu').data('group-id').replace('group_', '');
            exitgroup('group', userid, groupId);
        });

$('#broadcast-context-menu').on('click', '.delete-broadcast', function(e) {
            e.preventDefault(); // Prevent the default link behavior
            var broadcastId = $('#broadcast-context-menu').data('broadcast-id').replace('broadcast_', '');
            deleteGroup('broadcast', broadcastId);
        });

$('#broadcast-context-menu').on('click', '.exit-broadcast', function(e) {
            e.preventDefault(); // Prevent the default link behavior
            var userid = <?= $gUserId ?>;
            var groupId = $('#broadcast-context-menu').data('broadcast-id').replace('broadcast_', '');
            exitgroup('broadcast', userid, groupId);
        });

// Click handler to hide context menu on document click
        $(document).on('click', function() {
            $('.context-menu').hide();
        });
    });
</script>

// Function to handle input change
        $('#search-input').on('input', function() {
            var searchText = $(this).val().trim().toLowerCase(); // Get input value and normalize

// Iterate over each div with class scrollable-list-item
            $('div.scrollable-list-item').each(function() {
                var memberName = $(this).find('a.member-link').text().trim().toLowerCase(); // Get member name

// Check if member name contains the search text
                if (memberName.includes(searchText)) {
                    $(this).show(); // Show the div if it matches
                } else {
                    $(this).hide(); // Hide the div if it does not match
                }
            });
        });

// Click handler for member links
        $('.member-link').on('click', function(event) {
            event.preventDefault();
            $(this).toggleClass('selected');
            updateSelectedMembersInfo();
        });

// Submit handler for create group form
        $('#create-group-form').on('submit', function(event) {
            var json_data = $('#selected-members-hidden').val();
            event.preventDefault(); // Prevent default form submission

// Submit the form programmatically
            this.submit(); // This refers to the form element
        });

// Click handler for selected members info (to remove selection)
        $('#selected-members-info').on('click', 'p', function(event) {
            event.preventDefault();
            const selectedMember = $(this).text().trim();
            $('.member-link').each(function() {
                if ($(this).data('user_name') === selectedMember) {
                    $(this).removeClass('selected');
                    return false; // Exit the loop once found
                }
            });
            updateSelectedMembersInfo(); // Update display and hidden input
        });

});
</script>

</body>

</html>