<?php
session_start();
if (!isset($_SESSION['student_id'])) {
    die("Student not logged in.");
}

$studentId = $_SESSION['student_id'];

include('db_connection.php'); // Ensure this path is correct

// Fetch contacts for the suggested list
$contactsQuery = "SELECT student_id, name, profile_picture, online_status FROM profiles WHERE student_id != ?";
$contactsStmt = $conn->prepare($contactsQuery);
$contactsStmt->bind_param('i', $studentId);
$contactsStmt->execute();
$contactsResult = $contactsStmt->get_result();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compose New Message</title>
    <link rel="stylesheet" href="path/to/fontawesome/css/all.css"> <!-- Ensure correct path -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #18191a;
            color: #e4e6eb;
            margin: 0;
            padding: 0;
        }

        .compose-container {
            padding: 20px;
        }

        .search-bar {
            display: flex;
            padding: 10px;
            background-color: #242526;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .search-bar input {
            flex: 1;
            padding: 10px;
            border: none;
            background-color: transparent;
            color: #e4e6eb;
            outline: none;
        }

        .add-button, .search-bar i {
            color: #2e89ff;
            font-size: 1.5em;
            margin-right: 10px;
            cursor: pointer;
        }

        .suggested-contacts {
            background-color: #242526;
            padding: 10px;
            border-radius: 10px;
        }

        .contact {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #3a3b3c;
        }

        .contact img {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .contact p {
            margin: 0;
        }

        .status-online {
            color: green;
            margin-left: 5px;
            font-size: 70px;
        }
        
        .status-offline {
            color: red;
            margin-left: 5px;
            font-size: 70px;
        }
    </style>
</head>
<body>
    <div class="compose-container">
        <div class="search-bar">
            <i class="fas fa-arrow-left"></i>
            <input type="text" placeholder="Type a name or group">
            <i class="fas fa-plus"></i>
        </div>
        <div class="suggested-contacts">
    <h3>Suggested</h3>
    <?php while ($contact = $contactsResult->fetch_assoc()): ?>
    <a href="send_messages.php?student_id=<?php echo urlencode($contact['student_id']); ?>" class="contact-link">
        <div class="contact">
            <img src="uploads/<?php echo htmlspecialchars($contact['profile_picture']); ?>" 
                 alt="<?php echo htmlspecialchars($contact['name']); ?>"
                 class="contact-img">
            <p><?php echo htmlspecialchars($contact['name']); ?></p>
            <?php if ($contact['online_status'] == 'online'): ?>
                <span class="status-online">•</span>
            <?php else: ?>
                <span class="status-offline">•</span>
            <?php endif; ?>
        </div>
    </a>
    <?php endwhile; ?>
</div>

    </div>
</body>
</html>
