Root Explorer PHP

Editing: messages(1).php

<?php
// Enable full error visibility
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once '../config.php';

if (!isset($_SESSION['userdata']['id'])) {
    die('<div class="alert alert-warning text-center p-4">
        <h5>Please Login</h5>
        <p>You must be logged in to use chat.</p>
    </div>');
}

$current_user_id = (int)$_SESSION['userdata']['id'];
$current_user_name = trim(($_SESSION['userdata']['firstname'] ?? '') . ' ' . ($_SESSION['userdata']['lastname'] ?? ''));
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chats</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --whatsapp-green: #25D366;
            --whatsapp-light-green: #DCF8C6;
            --whatsapp-gray: #ECE5DD;
            --whatsapp-dark-gray: #3C3C3C;
            --whatsapp-light-gray: #F0F0F0;
            --whatsapp-blue: #34B7F1;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: var(--whatsapp-gray);
            margin: 0;
            padding: 0;
            height: 100vh;
        }
        
        /* Top Navigation Bar */
        .top-navbar {
            background: white;
            border-bottom: 1px solid #e0e0e0;
            padding: 0 15px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .nav-brand {
            font-weight: 600;
            font-size: 18px;
            color: #25D366;
            text-decoration: none;
        }
        
        .nav-links {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .nav-link {
            color: #666;
            text-decoration: none;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px 12px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            background: #f5f5f5;
            color: #25D366;
        }
        
        .nav-link.active {
            color: #25D366;
            font-weight: 500;
        }
        
        .nav-link i {
            font-size: 16px;
        }
        
        .chat-container {
            height: calc(100vh - 60px);
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* Left Sidebar */
        .sidebar {
            width: 30%;
            background: white;
            border-right: 1px solid #e0e0e0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .sidebar-header {
            background: #f0f2f5;
            padding: 10px 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--whatsapp-green);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
        }
        
        .search-box {
            background: white;
            border-radius: 8px;
            padding: 8px 15px;
            margin: 10px 15px;
            display: flex;
            align-items: center;
            border: 1px solid #e0e0e0;
        }
        
        .search-box input {
            border: none;
            outline: none;
            width: 100%;
            margin-left: 10px;
            font-size: 14px;
        }
        
        .filter-tabs {
            display: flex;
            padding: 0 15px;
            margin-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .filter-tab {
            padding: 8px 15px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .filter-tab.active {
            color: var(--whatsapp-green);
            border-bottom-color: var(--whatsapp-green);
            font-weight: 500;
        }
        
        .chat-list {
            flex: 1;
            overflow-y: auto;
        }
        
        .chat-item {
            display: flex;
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .chat-item:hover {
            background: #f5f5f5;
        }
        
        .chat-item.active {
            background: #e6f7ff;
        }
        
        .chat-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #ddd;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 20px;
            margin-right: 15px;
        }
        
        .chat-info {
            flex: 1;
            min-width: 0;
        }
        
        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
        
        .chat-name {
            font-weight: 500;
            font-size: 16px;
            color: #333;
        }
        
        .chat-time {
            font-size: 12px;
            color: #999;
        }
        
        .chat-preview {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .unread-badge {
            background: var(--whatsapp-green);
            color: white;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 5px;
        }
        
        /* Right Chat Area */
        .chat-area {
            width: 70%;
            background: var(--whatsapp-gray);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .chat-area-header {
            background: #f0f2f5;
            padding: 10px 15px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .current-chat-info {
            display: flex;
            align-items: center;
        }
        
        .chat-area-actions {
            display: flex;
            gap: 15px;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #666;
            font-size: 18px;
            cursor: pointer;
        }
        
        .messages-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .message-date {
            text-align: center;
            margin: 20px 0;
            color: #999;
            font-size: 12px;
            position: relative;
        }
        
        .message-date span {
            background: rgba(255,255,255,0.8);
            padding: 5px 15px;
            border-radius: 15px;
        }
        
        .message {
            max-width: 70%;
            padding: 8px 12px;
            border-radius: 8px;
            margin-bottom: 5px;
            position: relative;
            word-wrap: break-word;
        }
        
        .message.received {
            background: white;
            border-radius: 0 8px 8px 8px;
            align-self: flex-start;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .message.sent {
            background: var(--whatsapp-light-green);
            border-radius: 8px 0 8px 8px;
            align-self: flex-end;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .message-time {
            font-size: 11px;
            color: #999;
            text-align: right;
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
        }
        
        .message.sent .message-time {
            color: #666;
        }
        
        .message-input-area {
            background: #f0f2f5;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .message-input {
            flex: 1;
            background: white;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            font-size: 14px;
            outline: none;
        }
        
        .send-btn {
            background: var(--whatsapp-green);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .empty-chat {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: #999;
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* Dropdown Menu */
        .dropdown-menu {
            min-width: 200px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border: 1px solid #e0e0e0;
        }
        
        .dropdown-item {
            padding: 8px 15px;
            font-size: 14px;
        }
        
        .dropdown-item i {
            width: 20px;
            margin-right: 10px;
        }
        
        .dropdown-item:hover {
            background: #f5f5f5;
        }
        
        .dropdown-divider {
            margin: 5px 0;
        }
        
        /* Modal */
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .modal-header {
            border-bottom: 1px solid #e0e0e0;
            padding: 15px 20px;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            border-top: 1px solid #e0e0e0;
            padding: 15px 20px;
        }
        
        .btn-outline-danger {
            border-color: #dc3545;
            color: #dc3545;
        }
        
        .btn-outline-danger:hover {
            background: #dc3545;
            color: white;
        }
    </style>
</head>
<body>
    
    <nav class="top-navbar">
        <div>
            <a href="#" class="nav-brand">
                <i class="fas fa-comments me-2"></i>YouChat
            </a>
        </div>
        <div class="nav-links">
            <a href="../index.php" class="nav-link">
                <i class="fas fa-home"></i> Home
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-box"></i> Packages
            </a>
             <a href="#" class="nav-link">
                <i class="fas fa-box"></i> Hotels
            </a>
            <a href=".#" class="nav-link">
                <i class="fas fa-box"></i> Vehicles
            </a>
            <a href=".#" class="nav-link">
                <i class="fas fa-box"></i> China Visa
            </a>
        </div>
    </nav>

<div class="chat-container d-flex">
        
        <div class="sidebar">
            
            <div class="sidebar-header d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <div class="user-avatar me-3">
                        <?php echo strtoupper(substr($current_user_name, 0, 1)); ?>
                    </div>
                    <div>
                        <h5 class="mb-0" style="font-size: 16px; font-weight: 500;">Chats</h5>
                    </div>
                </div>
                <div class="d-flex gap-3">
                    <button class="btn btn-link text-muted p-0">
                        <i class="fas fa-search"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-link text-muted p-0" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-user-plus"></i> New chat</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-users"></i> New group</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Settings</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="search-box">
                <i class="fas fa-search text-muted"></i>
                <input type="text" id="searchChat" placeholder="Search or start new chat" onkeyup="searchChats()">
            </div>
            
            
            <div class="filter-tabs">
                <div class="filter-tab active" onclick="filterChats('all')">All</div>
                <div class="filter-tab" onclick="filterChats('unread')">Unread</div>
                <div class="filter-tab" onclick="filterChats('favorites')">Favourites</div>
                <div class="filter-tab" onclick="filterChats('elite')">Elite</div>
            </div>
            
            
            <div class="chat-list" id="chatList">
                
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-comments fa-2x mb-3"></i>
                    <p>Loading conversations...</p>
                </div>
            </div>
        </div>
        
        
        <div class="chat-area">
            
            <div class="chat-area-header" id="chatHeader" style="display: none;">
                <div class="current-chat-info">
                    <div class="chat-avatar me-3" id="currentChatAvatar"></div>
                    <div>
                        <h6 class="mb-0" id="currentChatName"></h6>
                        <small class="text-muted" id="currentChatStatus">Last seen today at 3:18 pm</small>
                    </div>
                </div>
                <div class="chat-area-actions">
                    <button class="action-btn" onclick="toggleFavorite()">
                        <i class="far fa-star" id="favoriteIcon"></i>
                    </button>
                    <div class="dropdown">
                        <button class="action-btn" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" onclick="viewContactInfo()"><i class="fas fa-info-circle"></i> Contact info</a></li>
                            <li><a class="dropdown-item" href="#" onclick="clearChat()"><i class="fas fa-trash"></i> Clear chat</a></li>
                            <li><a class="dropdown-item" href="#" onclick="deleteChat()"><i class="fas fa-times-circle"></i> Delete chat</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="blockChat()"><i class="fas fa-ban"></i> Block</a></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="reportChat()"><i class="fas fa-flag"></i> Report</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="messages-container" id="messagesContainer">
                <div class="empty-chat" id="emptyChat">
                    <div>
                        <i class="fas fa-comments fa-3x mb-3 text-muted"></i>
                        <h4 class="text-muted mb-2">Chat to know more!</h4>
                        <p class="text-muted">Select a conversation to start chatting</p>
                    </div>
                </div>
            </div>
            
            
            <div class="message-input-area" id="messageInputArea" style="display: none;">
                <button class="btn btn-link text-muted">
                    <i class="fas fa-paperclip"></i>
                </button>
                <input type="text" class="message-input" id="messageInput" placeholder="Type a message...">
                <button class="send-btn" onclick="sendMessage()">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

<div class="modal fade" id="clearChatModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Clear Chat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to clear this chat? This will delete all messages in this conversation.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="confirmClearChat()">Clear Chat</button>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="deleteChatModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Chat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this chat? This will permanently remove all messages and the conversation.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="confirmDeleteChat()">Delete Chat</button>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="blockChatModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Block User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to block <span id="blockUserName"></span>? You will no longer receive messages from this user.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-outline-danger" onclick="confirmBlockChat()">Block</button>
                </div>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

[ CANCEL ]

Name	Type	Actions
.. (Parent Directory)
📄 chat_actions(1).php	FILE	[EDIT]
📄 chat_actions.php	FILE	[EDIT]
📄 chats.php	FILE	[EDIT]
📄 messages(1).php	FILE	[EDIT]
📄 messages(2).php	FILE	[EDIT]
📄 messages.php	FILE	[EDIT]
📄 test.html	FILE	[EDIT]

[ Root System Explorer ]

Editing: messages(1).php