<?php
session_start();
include 'db_connection.php'; // Include your database connection

// Ensure the user is logged in
if (!isset($_SESSION['student_id'])) {
    header("Location: login.php"); // Redirect to login if not logged in
    exit;
}

$studentId = $_SESSION['student_id'];

// Fetch logo from settings table
$logoQuery = "SELECT logo FROM settings LIMIT 1";
$logoResult = $conn->query($logoQuery);

$logoPath = '';
if ($logoResult && $logoResult->num_rows > 0) {
    $logoRow = $logoResult->fetch_assoc();
    $logoPath = '/csms/admin/uploads/' . htmlspecialchars($logoRow['logo']);
}

// Prepare and execute the query to fetch profile information
$stmt = $conn->prepare("SELECT profile_picture, name FROM profiles WHERE student_id = ?");
if ($stmt) {
    $stmt->bind_param("i", $studentId);
    $stmt->execute();
    $result = $stmt->get_result();
    $profile = $result->fetch_assoc();
    $stmt->close();
} else {
    echo "Error preparing statement: " . $conn->error;
    exit;
}

// Provide default values if profile is not found
$defaultProfilePicture = 'default_profile_picture.jpg'; // Path to a default profile picture
$defaultName = 'Anonymous';

$profilePicturePath = '/csms/student/uploads/' . htmlspecialchars($profile['profile_picture'] ?? $defaultProfilePicture);
$profileName = htmlspecialchars($profile['name'] ?? $defaultName);

// Check if form is submitted
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $status = isset($_POST['status']) ? trim($_POST['status']) : '';
    $visibility = isset($_POST['visibility']) ? $_POST['visibility'] : 'public';

    // Handle file upload
    $image_url = '';
    if (isset($_FILES['image_url']) && $_FILES['image_url']['error'] == UPLOAD_ERR_OK) {
        $upload_dir = 'uploads/'; // Directory where files will be uploaded
        $tmp_name = $_FILES['image_url']['tmp_name'];
        $name = basename($_FILES['image_url']['name']);
        $upload_file = $upload_dir . $name;

        // Ensure directory exists and is writable
        if (!is_dir($upload_dir)) {
            mkdir($upload_dir, 0755, true);
        }

        if (move_uploaded_file($tmp_name, $upload_file)) {
            $image_url = $upload_file; // Store the file path
        } else {
            echo "Error uploading file.";
        }
    }

    // Get the current timestamp
    $created_at = $updated_at = date('Y-m-d H:i:s');

    // Prepare and execute the SQL statement
    $stmt = $conn->prepare("INSERT INTO timeline (student_id, status, created_at, updated_at, visibility, image_url) VALUES (?, ?, ?, ?, ?, ?)");
    if ($stmt) {
        $stmt->bind_param("isssss", $studentId, $status, $created_at, $updated_at, $visibility, $image_url);
        if ($stmt->execute()) {
            echo "Post created successfully.";
        } else {
            echo "Error executing query: " . $stmt->error;
        }
        $stmt->close();
    } else {
        echo "Error preparing statement: " . $conn->error;
    }
}

// Initialize variables
$postFound = false;
$postData = [];
$profileData = [];

// Fetch the latest timeline post for the logged-in student
$query = "SELECT * FROM timeline WHERE student_id = $studentId ORDER BY created_at DESC LIMIT 1";
$result = mysqli_query($conn, $query);

if ($result && mysqli_num_rows($result) > 0) {
    $postFound = true;
    $postData = mysqli_fetch_assoc($result);

    // Fetch the profile information for the logged-in student
    $profileQuery = "SELECT * FROM profiles WHERE student_id = $studentId LIMIT 1";
    $profileResult = mysqli_query($conn, $profileQuery);

    if ($profileResult && mysqli_num_rows($profileResult) > 0) {
        $profileData = mysqli_fetch_assoc($profileResult);
    }
}

// Close the connection
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Circle Dashboard</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Include an icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style type="text/css">
            html, body {
            height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
        }

  
    body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            overflow-y: hidden; /* Enable vertical scrolling */
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .top-header, header {
        background-color: #34495e;
        color: white;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }

    .header-left, .header-center, .header-right {
        display: flex;
        align-items: center;
    }

    .header-left img {
        height: 40px;
        margin-right: 20px;
    }

    .search-box {
        padding: 5px;
        border-radius: 4px;
        border: none;
        width: 250px; /* Adjusted width */
    }

    .header-center .icon, .header-right .icon {
        margin: 0 10px;
        cursor: pointer;
        position: relative;
    }


    .header-right .icon .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        background-color: white;
        border: 1px solid #ddd;
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 1;
        width: max-content; /* Adjust to fit content */
        transform: translateX(-70%);
    }



    .header-right .icon:hover .dropdown {
        display: block;
    }

    .dropdown-item {
        padding: 15px 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #000;
    }

    .dropdown-item i {
        margin-right: 8px;
    }

    .dropdown-item:hover {
        background-color: #f0f0f0;
    }

    .header-center a.dropdown-item {
        margin: 0 10px;
        cursor: pointer;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
    }

    .header-center a.dropdown-item:hover {
        color: #000;
    }

        aside {
            width: 250px;
            height: calc(100% - 50px);
            background-color: #34495e;
            position: fixed;
            top: 50px;
            left: 0;
            z-index: 1;
            overflow-x: hidden;
            padding-top: 20px;
            transition: width 0.3s;
        }

       main {
    flex: 1; /* Allow main to grow and fill available space */
    margin-left: 250px;
    padding: 90px 20px 20px 20px; /* Adjusted for header height */
    padding-top: 70px; /* Space for header */
    padding-bottom: 70px; /* Space for footer */
    min-height: calc(100vh - 150px); /* Adjust to ensure content fits above footer */
    box-sizing: border-box;
    width: calc(100% - 250px);
    transition: all 0.3s;
    min-height: calc(100vh - 140px); /* 100vh minus the combined height of header and footer */
    overflow-y: auto; /* Enable vertical scrolling */
}

   footer {
    background-color: #34495e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    margin-left: 250px;
    border-top: 1px solid #ccc;
    padding: 10px 20px;
    box-sizing: border-box;
    width: calc(100% - 250px);
}


   
 footer .footer-content {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }



    footer a {
        color: white;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer a i {
        font-size: 24px;
    }

    footer a span {
        font-size: 12px;
        margin-top: 5px;
    }
 
.status-container {
        margin-bottom: 20px; /* Space between last content and footer */
    }
        header, aside, main, footer {
            box-sizing: border-box;
        }

        .profile-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-left: 20px;
        }

        .profile-info img {
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
        }

        .profile-info .profile-name {
            font-size: 18px;
            font-weight: bold;
        }

        nav ul {
            list-style: none;
            padding: 0 20px;
        }

        nav ul li {
            margin-bottom: 10px;
        }

        nav ul li a {
            text-decoration: none;
            color: white;
        }

        nav ul li a:hover {
            color: #007bff;
        }

        .joined {
            margin-top: 20px;
            padding-left: 20px;
        }

        .joined h4 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .joined ul {
            list-style: none;
            padding: 0;
        }

        .joined ul li {
            margin-bottom: 5px;
        }

        .joined ul li a {
            text-decoration: none;
            color: white;
        }

        .joined ul li a:hover {
            color: #fff;
        }

        .status-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    overflow-x: auto;
}

.status-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 150px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 10px;
    flex-shrink: 0;
    position: relative;
}

.status-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.status-info {
    padding: 10px;
    text-align: center;
    position: relative;
}

.status-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: -20px;
    left: calc(50% - 20px);
}

.status-title {
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
    color: #333;
}

.create-story .status-image img {
    opacity: 1;
}

.create-icon {
    font-size: 24px;
    background-color: #007bff;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -20px;
    left: calc(50% - 20px);
}

 .timeline-container {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
            max-width: 900px;
            margin: 20px auto;
        }

        .status-input {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .status-input .profile-icon {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-right: 10px;
            background-color: #f0f2f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .status-input input {
            flex-grow: 1;
            border: none;
            outline: none;
            padding: 10px;
            background: #f0f2f5;
            border-radius: 20px;
        }

        .status-options {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
        }

        .status-option {
            display: flex;
            align-items: center;
            color: #606770;
            font-weight: 500;
            cursor: pointer;
        }

        .status-option .icon {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            display: inline-block;
        }

        .status-option span {
            display: inline-block;
            vertical-align: middle;
        }
 .status-input button {
            border: none;
            padding: 10px 20px;
            margin-left: 10px;
            background-color: #1877F2;
            color: #fff;
            border-radius: 20px;
            cursor: pointer;
        }

        .status-input button:hover {
            background-color: #165b9c;
        }

  /* Form container styling */
        form {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            max-width: 900px;
            margin: 20px auto;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Input field styling */
        input[type="text"] {
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 10px;
            font-size: 16px;
            width: 40%;
            margin-right: 10px;
        }

        /* Select field styling */
        select {
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 10px;
            font-size: 16px;
            margin-right: 10px;
        }

        /* File input field styling */
        input[type="file"] {
            margin-right: 10px;
        }

        /* Button styling */
        button {
            background-color: #1877F2; /* Facebook blue color */
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        button:hover {
            background-color: #1558a5; /* Darker shade of blue */
        }
   
        .post-container {
            max-width: 600px;
            margin: 20px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
            box-sizing: border-box;
        }

        .post-header {
            display: flex;
            align-items: center;
        }

.post-footer {
            display: flex;
            margin-left: 450px;
        }

        .avatar {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
        .post-header .name {
            font-weight: bold;
        }
        .post-header .time {
            color: gray;
            margin-left: 5px;
        }
        .post-content {
            margin: 15px 0;
           margin-left: 50px;
        }
        .post-actions {
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #e9ecef;
            padding-top: 10px;
            margin-top: 10px;
        }
        .post-action {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: gray;
            font-size: 14px;
        }
        .post-action i {
            margin-right: 5px;
        }
        .post-action:hover {
            color: #1c1e21;
        }
        .boost-post {
            display: inline-block;
            background-color: #1877f2;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
        }
        .boost-post:hover {
            background-color: #145dbf;
        }

.dots {
            cursor: pointer;
            position: relative;
        }
        .dots::after {
            content: '...';
            font-size: 20px;
            margin-left: 40px;
        }
        .dropdown {
            max-width: 250px;
            display: none;
            position: absolute;
            right: 0;
            top: 20px;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            z-index: 1;
        }
        .dropdown a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: black;
        }
        .dropdown a:hover {
            background-color: #f0f2f5;
        }
        .dots:hover .dropdown {
            display: block;
        }

        .user-avatar .profile-picture {
    width: 40px; /* Adjust the width as needed */
    height: 40px; /* Adjust the height as needed */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the container without distortion */
    cursor: pointer; /* Adds a pointer cursor for better UX */
    border: 2px solid #fff; /* Optional: Adds a white border for better visibility */
}

.user-avatar {
    position: relative;
    display: inline-block;
}

.user-avatar .dropdown {
    display: none;
    position: absolute;
    top: 50px; /* Adjust to position the dropdown correctly */
    right: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.user-avatar:hover .dropdown {
    display: block;
}

@media (max-width: 768px) {
            aside {
                width: 60px;
            }

            main {
                margin-left: 60px;
                width: calc(100% - 60px);
            }

            footer {
                margin-left: 60px;
                width: calc(100% - 60px);
            }

            .header-left img {
                display: none;
            }

            .header-left, .header-center, .header-right {
                flex: 1;
                justify-content: center;
            }

            .header-right .icon .dropdown {
                width: max-content;
            }

            .header-right .icon {
                margin: 0 5px;
            }

            .header-center a.dropdown-item {
                margin: 0 5px;
            }
        }

        @media (max-width: 480px) {
            .header-center, .header-right {
                display: none;
            }

            .search-box {
                width: 100%;
            }

            aside {
                width: 60px;
            }

            main {
                margin-left: 60px;
                width: calc(100% - 60px);
            }

            footer {
                margin-left: 60px;
                width: calc(100% - 60px);
            }

            .profile-info {
                display: none;
            }

            .joined {
                display: none;
            }

            .status-container {
                padding: 10px;
            }

            .status-card {
                width: 100px;
            }

            .card-header, .card-footer {
                flex-direction: column;
                align-items: flex-start;
            }

            .card-header h3 {
                font-size: 16px;
            }

            .card-footer .button {
                padding: 8px;
                font-size: 14px;
            }

            .reaction-item span {
                font-size: 12px;
            }
        }
/* Reset margin and padding for body to prevent unwanted scroll */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Mobile styles */
@media (max-width: 768px) {
    .top-header, .header {
        width: 100vw; /* Ensure full viewport width */
        box-sizing: border-box; /* Include padding and border in the element’s total width and height */
    }

    .top-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #fff; /* Adjust background color if needed */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add shadow for visual separation */
    }

    .top-header-left img {
        width: 40px; /* Adjust logo size */
    }

    .top-header-right {
        display: flex;
        gap: 10px;
        align-items: center; /* Ensure icons are vertically aligned */
    }

    .header {
        display: flex;
        flex-direction: column;
        padding: 10px;
        background-color: #fff; /* Adjust background color if needed */
    }

    .header-center {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        width: 100%; /* Ensure the center content takes full width */
    }

    .header-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; /* Ensure right section takes full width */
    }

    .header-right .icon-notification,
    .header-right .user-avatar {
        margin-left: 10px;
    }
}
   /* Hide sidebar and footer on mobile */
@media (max-width: 768px) {
    aside, footer {
        display: none;
    }
    </style>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrQdSMgGn4XGjt4tAoUmw1CJDZ1Kh/0n6ix47XWMB6zr4Q5AlE5gR1cKvpxIt3bQuf4gO2DdRLgGyZOLig==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
   
     <header>
        <div class="header-left">
           <a href="index.php">
                <img src="<?php echo $logoPath; ?>" alt="Logo">
            </a>
            <div class="search-box">
                <input type="text" placeholder="Search">
            </div>
        </div>
        <div class="header-center">
            <a href="#" class="dropdown-item"><i class="fas fa-home"></i></a>
            <a href="creat_group.php" class="dropdown-item"><i class="fas fa-users"></i></a>
            <a href="chat.php" class="dropdown-item"><i class="fa-brands fa-facebook-messenger"></i></a>
        </div>
        <div class="header-right">
            <div class="icon menu">
                <i class="fas fa-bars"></i>
                <div class="dropdown">
                    <a href="#" class="dropdown-item"><i class="fas fa-plus"></i> Create</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-pen"></i> Post</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-book"></i> Story</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-birthday-cake"></i> Life Event</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-video"></i> Reel</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-flag"></i> Page</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-users"></i> Group</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-calendar-alt"></i> Event</a>
                </div>
            </div>
            <div class="icon"><i class="fas fa-bell"></i></div>
            <div class="icon user-avatar">
                <img src="<?= $profilePicturePath ?>" alt="Profile Picture" class="profile-picture">
 
                <div class="dropdown">
                    <a href="#" class="dropdown-item"><i class="fas fa-cog"></i> Settings</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-user-shield"></i> Privacy</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-adjust"></i> Display</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-universal-access"></i> Accessibility</a>
                    <a href="logout.php" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Log Out</a>
                </div>
            </div>
        </div>
    </header>
<aside>
    <a href="update_profile.php">
        <div class="profile-info">
            <img src="<?php echo $profilePicturePath; ?>" alt="Profile Picture">
            <div class="profile-name" style="color: white;"><?php echo $profileName; ?></div>
        </div>
    </a>
        <nav>
        <ul>
            <li><a href="profile.php"><i class="fas fa-user"></i> Profile</a></li>
            <li><a href="friends.php"><i class="fas fa-user-friends"></i> Friends</a></li>
            <li><a href="groups.php"><i class="fas fa-users"></i> Groups</a></li>
            <li><a href="events.php"><i class="fas fa-calendar-alt"></i> Events</a></li>
            <li><a href="notifications.php"><i class="fas fa-bell"></i> Notifications</a></li>
            <li><a href="pages.php"><i class="fas fa-file-alt"></i> Pages</a></li>
        </ul>
    </nav>
        <div class="joined">
            <h4>Joined Groups</h4>
            <ul>
                <!-- Populate with user’s joined groups -->
                <li><a href="group.php?id=1">Group Name</a></li>
            </ul>
            <h4>Joined Pages</h4>
            <ul>
                <!-- Populate with user’s joined pages -->
                <li><a href="page.php?id=1">Page Name</a></li>
            </ul>
        </div>
    </div>
</aside>


<main>
<div class="status-container">
       <a href="create_story.php" class="status-card create-story">
            <div class="status-image">
                <img src="<?php echo $profilePicturePath; ?>" alt="Create story">
            </div>
            <div class="status-info">
                <div class="create-icon">+</div>
                <div class="status-title">Create story</div>
            </div>
        </a>
        <div class="status-card">
            <div class="status-image">
                <img src="<?php echo $profilePicturePath; ?>" alt="Create story">
                
            </div>
            <div class="status-info">
                <div class="status-icon">
                    <img src="<?php echo $profilePicturePath; ?>" alt="Create story">
                </div>
                <div class="status-title">Cristiano Ronaldo</div>
            </div>
        </div>
        <div class="status-card">
            <div class="status-image">
                <img src="path/to/lagelu-fm.jpg" alt="Lagelu FM 96.7">
            </div>
            <div class="status-info">
                <div class="status-icon">
                    <img src="path/to/lagelu-fm-icon.jpg" alt="Icon">
                </div>
                <div class="status-title">Lagelu FM 96.7</div>
            </div>
        </div>
        <div class="status-card">
            <div class="status-image">
                <img src="path/to/fc-barcelona.jpg" alt="FC Barcelona">
            </div>
            <div class="status-info">
                <div class="status-icon">
                    <img src="path/to/fc-barcelona-icon.jpg" alt="Icon">
                </div>
                <div class="status-title">FC Barcelona</div>
            </div>
        </div>
    </div>
<div class="timeline-container">
        <div class="status-input">
            
             <form method="POST" action="" enctype="multipart/form-data">    
                <div class="status-info">    
                    <div class="status-icon">
            <img src="<?php echo $profilePicturePath; ?>" alt="Profile Picture">
           
        </div>
            </div>

           
        <input type="text" class="time" name="status" placeholder="What's on your mind <?php echo $profileName; ?>?" required>
        <select name="visibility" required>
            <option value="public">Public</option>
            <option value="private">Private</option>
            <option value="friends">Friends</option>
        </select>
        <input type="file" name="image_url">
        <input type="hidden" name="user_id" value="<?php echo $user_id; ?>"> <!-- Ensure user_id is set -->
        <button type="submit">Post</button>
    </form>
            
        </div>
        <div class="status-options">
            <div class="status-option">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="#FF0000" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M10 17l6-5-6-5v10zm10-14h-16c-1.104 0-2 .896-2 2v14c0 1.104.896 2 2 2h16c1.104 0 2-.896 2-2v-14c0-1.104-.896-2-2-2zm0 16h-16v-14h16v14z"/>
                </svg>
                <span>Live video</span>
            </div>
            <div class="status-option">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="#00FF00" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M19 3h-14c-1.104 0-2 .896-2 2v14c0 1.104.896 2 2 2h14c1.104 0 2-.896 2-2v-14c0-1.104-.896-2-2-2zm-14 16v-14h14l.002 14h-14zm5-12c0-.552.448-1 1-1s1 .448 1 1-.448 1-1 1-1-.448-1-1zm1 10c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5zm0-8c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z"/>
                </svg>
                <span>Photo/video</span>
            </div>
            <div class="status-option">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="#FF00FF" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 2c-5.514 0-10 4.486-10 10s4.486 10 10 10 10-4.486 10-10-4.486-10-10-10zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-4-6l6-4-6-4v8z"/>
                </svg>
                <span>Reel</span>
            </div>
        </div>
    </div>
<?php if ($postFound && !empty($profileData)): ?>
    <div id="post-container" class="post-container">
        <div class="post-header">
            <img src="<?php echo $profilePicturePath; ?>" alt="Profile Picture" class="avatar">
            <div>
                <span class="name"><?php echo $profileData['name']; ?></span>
                <span class="time"><?php echo date('F j, Y, g:i a', strtotime($postData['created_at'])); ?> · <i class="fas fa-globe-americas" title="<?php echo $postData['visibility']; ?>"></i></span>
            </div>
            <div class="dots">
                <div class="dropdown">
                    <a href="#">Edit</a>
                    <a href="#">Delete</a>
                </div>
            </div>
        </div>
        <div class="post-content">
            <img src="<?php echo $postData['image_url']; ?>" alt="Profile Picture"><br>
            <?php echo $postData['status']; ?>
        </div>
        <div class="post-footer">
            <a href="#" class="boost-post">Boost post</a>
        </div>
        <div class="post-actions">
            <div class="post-action">
                <i class="far fa-thumbs-up"></i> Like
            </div>
            <div class="post-action">
                <i class="far fa-comment"></i> Comment
            </div>
            <div class="post-action">
                <i class="far fa-paper-plane"></i> Send
            </div>
            <div class="post-action">
                <i class="fas fa-share"></i> Share
            </div>
        </div>
    </div>
</main>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var postContainer = document.getElementById("post-container");
            if (postContainer) {
                postContainer.style.display = "block";
            }
        });
    </script>
    <?php else: ?>
        
    <?php endif; ?>



<footer>

    <div class="footer-content">
        <a href="#"><i class="fas fa-home"></i></a>
        <a href="#"><i class="fas fa-users"></i></a>
        <a href="#"><i class="fas fa-envelope"></i></a>
        <a href="#"><i class="fas fa-bell"></i></a>
        <a href="#"><i class="fas fa-user"></i></a>
    
    <p style="margin: 0;">&copy; 2024 Your School Management System. All rights reserved.</p>
    <ul class="list-inline" style="list-style: none; margin: 0; padding: 0; display: flex;">
        <li style="margin-right: 10px;"><a href="privacy.php" style="color: white; text-decoration: none;">Privacy Policy</a></li>
        <li><a href="terms.php" style="color: white; text-decoration: none;">Terms of Service</a></li>
    </ul>
</div>
</footer>
</body>
</html>
