From ad1a7b1eedf08f505a5f8faa3be0e43e6d472165 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=AA=20Ch=C3=AD=20Lu=C3=A2n?= <chiluan6601@gmail.com>
Date: Thu, 13 Apr 2023 22:05:48 +0700
Subject: [PATCH] like and dislike dont reload page success

---
 Staff.php             | 272 ++++++++++++++++++++-------------
 Staff_MyPost.php      | 339 +++++++++++++++++++++++++++++-------------
 database/db_ideas.sql |   2 +-
 vote.php              |   2 +-
 4 files changed, 409 insertions(+), 206 deletions(-)

diff --git a/Staff.php b/Staff.php
index b524c85..42c6f2e 100644
--- a/Staff.php
+++ b/Staff.php
@@ -166,6 +166,7 @@ class="rounded-circle me-2"
                             </div>
                             <div class="my-3">
                                 <h6>Topic Name: <?php echo $row['TopicName']; ?></h6>
+                                <h6>Idea Title: <?php echo $row['Title']; ?></h6>
                             </div>
                             <!-- content -->
                             <div class="my-3">
@@ -175,30 +176,55 @@ class="rounded-circle me-2"
                             <div class="d-flex justify-content-between align-items-center">
                                 <div class="d-flex">
                                     <button type="button" class="btn btn-outline-primary btn-sm me-2 like-btn"
-                                            id="btnLike"
+                                            id="btnLike-<?php echo $row['IdeaID']; ?>"
                                             data-idea-id="<?php echo $row['IdeaID']; ?>">
                                         <i class="far fa-thumbs-up"></i> Like (<span class="like-count"><?php
                                             $sql2 = "SELECT * FROM Vote WHERE Vote.IdeaID = " . $row['IdeaID'] . " AND Vote.Status = 1";
                                             $result2 = mysqli_query($conn, $sql2);
-                                            echo mysqli_num_rows($result2)
+                                            echo mysqli_num_rows($result2);
+                                            // Check if the user has already liked the post change the color of the button
+                                            $staffID = $_SESSION['staff_id'];
+                                            $ideaID = $row['IdeaID'];
+
+                                            $sql3 = "SELECT * FROM Vote WHERE Vote.IdeaID = $ideaID AND Vote.StaffID = $staffID AND Vote.Status = 1";
+                                            $result3 = mysqli_query($conn, $sql3);
+                                            if (mysqli_num_rows($result3) > 0) {
+                                                // Change class of the button
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.add('btn-primary');</script>";
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.remove('btn-outline-primary');</script>";
+                                            } else {
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.add('btn-outline-primary');</script>";
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.remove('btn-primary');</script>";
+                                            }
                                             ?></span>)
                                     </button>
                                     <button type="button" class="btn btn-outline-danger btn-sm dislike-btn"
-                                            id="btnDislike"
+                                            id="btnDislike-<?php echo $row['IdeaID']; ?>"
                                             data-idea-id="<?php echo $row['IdeaID']; ?>">
                                         <i class="far fa-thumbs-down"></i> Dislike (<span class="dislike-count"><?php
-                                            $sql2 = "SELECT * FROM Vote WHERE Vote.IdeaID = " . $row['IdeaID'] . " AND Vote.Status = 0";
-                                            $result2 = mysqli_query($conn, $sql2);
-                                            echo mysqli_num_rows($result2);
+                                            $sql4 = "SELECT * FROM Vote WHERE Vote.IdeaID = " . $row['IdeaID'] . " AND Vote.Status = 0";
+                                            $result4 = mysqli_query($conn, $sql4);
+                                            echo mysqli_num_rows($result4);
                                             // Check if the user has already disliked the post change the color of the button
+                                            $staffID = $_SESSION['staff_id'];
+                                            $ideaID = $row['IdeaID'];
+                                            $sql5 = "SELECT * FROM Vote WHERE Vote.IdeaID = $ideaID AND Vote.StaffID = $staffID AND Vote.Status = 0";
+                                            $result5 = mysqli_query($conn, $sql5);
+                                            if (mysqli_num_rows($result5) > 0) {
+                                                // Change class of the button
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.add('btn-danger');</script>";
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.remove('btn-outline-danger');</script>";
+                                            } else {
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.add('btn-outline-danger');</script>";
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.remove('btn-danger');</script>";
+                                            }
                                             ?></span>)
                                     </button>
                                 </div>
 
                                 <button type="button" class="btn btn-outline-secondary btn-sm comment-toggle"
                                         data-bs-toggle="collapse" href="#comment<?php echo $row['IdeaID']; ?>"
-                                        aria-expanded="false"
-                                        aria-controls="comment">
+                                        aria-expanded="false" aria-controls="comment">
                                     <i class="far fa-comment"></i> Comment (<?php
                                     $sql3 = "SELECT * FROM Comment WHERE Comment.IdeaID = " . $row['IdeaID'];
                                     $result3 = mysqli_query($conn, $sql3);
@@ -212,81 +238,82 @@ class="rounded-circle me-2"
                             include("connection.php");
                             $sql2 = "SELECT * FROM Comment, Staff WHERE Comment.StaffID = Staff.StaffID AND Comment.IdeaID = " . $row['IdeaID'] . " ORDER BY Comment.CommentDate ASC";
                             $result2 = mysqli_query($conn, $sql2); ?>
-                            <?php if (mysqli_num_rows($result2) > 0) { ?>
-                                <!-- Comment section -->
-                                <?php while ($row2 = mysqli_fetch_assoc($result2)) { ?>
-                                    <div class="comments mt-3">
-                                        <!-- Single comment -->
-                                        <div class="d-flex align-items-start comment">
-                                            <!-- Avatar -->
-                                            <img src="https://source.unsplash.com/collection/happy-people" alt="avatar"
-                                                 class="rounded-circle me-2"
-                                                 style="width: 38px; height: 38px; object-fit: cover">
-                                            <div class="comment-body">
-                                                <!-- Commenter name -->
-                                                <p class="m-0 fw-bold"><?php
-                                                    if ($row2['StaffID'] == $_SESSION['staff_id'] && $row2['is_anonymous'] == 1) {
-                                                        echo "You (Anonymous)";
-                                                    } else if ($row2['StaffID'] == $_SESSION['staff_id']) {
-                                                        echo "You";
-                                                    } else if ($row2['is_anonymous'] == 1) {
-                                                        echo "Anonymous";
-                                                    } else {
-                                                        echo $row2['FullName'];
-                                                    }
-                                                    ?></p>
-                                                <!-- Comment time -->
-                                                <span class="text-muted fs-7"><?php
-                                                    $current_time = new DateTime();
-                                                    $comment_time = new DateTime($row2['CommentDate']);
-                                                    // Calculate the difference between the current time and the post time
-                                                    $diff = $current_time->diff($comment_time);
-                                                    if ($diff->y > 0) {
-                                                        echo $diff->y . " year" . ($diff->y > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->m > 0) {
-                                                        echo $diff->m . " month" . ($diff->m > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->d > 0) {
-                                                        echo $diff->d . " day" . ($diff->d > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->h > 0) {
-                                                        echo $diff->h . " hour" . ($diff->h > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->i > 0) {
-                                                        echo $diff->i . " minute" . ($diff->i > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->s > 0) {
-                                                        echo $diff->s . " second" . ($diff->s > 1 ? "s" : "") . " ago";
-                                                    }
-                                                    ?>
-                                                </span>
-                                                <!-- Comment content -->
-                                                <p class="mt-2"><?php echo $row2['CommentContent']; ?></p>
+                            <div id="comment<?php echo $row['IdeaID']; ?>" class="collapse">
+                                <?php if (mysqli_num_rows($result2) > 0) { ?>
+                                    <!-- Comment section -->
+                                    <?php while ($row2 = mysqli_fetch_assoc($result2)) { ?>
+                                        <div class="comments mt-3">
+                                            <!-- Single comment -->
+                                            <div class="d-flex align-items-start comment">
+                                                <!-- Avatar -->
+                                                <img src="https://source.unsplash.com/collection/happy-people"
+                                                     alt="avatar" class="rounded-circle me-2"
+                                                     style="width: 38px; height: 38px; object-fit: cover">
+                                                <div class="comment-body">
+                                                    <!-- Commenter name -->
+                                                    <p class="m-0 fw-bold"><?php
+                                                        if ($row2['StaffID'] == $_SESSION['staff_id'] && $row2['is_anonymous'] == 1) {
+                                                            echo "You (Anonymous)";
+                                                        } else if ($row2['StaffID'] == $_SESSION['staff_id']) {
+                                                            echo "You";
+                                                        } else if ($row2['is_anonymous'] == 1) {
+                                                            echo "Anonymous";
+                                                        } else {
+                                                            echo $row2['FullName'];
+                                                        }
+                                                        ?></p>
+                                                    <!-- Comment time -->
+                                                    <span class="text-muted fs-7"><?php
+                                                        $current_time = new DateTime();
+                                                        $comment_time = new DateTime($row2['CommentDate']);
+                                                        // Calculate the difference between the current time and the post time
+                                                        $diff = $current_time->diff($comment_time);
+                                                        if ($diff->y > 0) {
+                                                            echo $diff->y . " year" . ($diff->y > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->m > 0) {
+                                                            echo $diff->m . " month" . ($diff->m > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->d > 0) {
+                                                            echo $diff->d . " day" . ($diff->d > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->h > 0) {
+                                                            echo $diff->h . " hour" . ($diff->h > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->i > 0) {
+                                                            echo $diff->i . " minute" . ($diff->i > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->s > 0) {
+                                                            echo $diff->s . " second" . ($diff->s > 1 ? "s" : "") . " ago";
+                                                        }
+                                                        ?>
+                                                        </span>
+                                                    <!-- Comment content -->
+                                                    <p class="mt-2"><?php echo $row2['CommentContent']; ?></p>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
+                                    <?php } ?>
                                 <?php } ?>
-                            <?php } ?>
-                            <!-- Comment form -->
-                            <div class="mt-3" id="comment<?php echo $row['IdeaID']; ?>">
-                                <form action="Staff.php" method="post">
-                                    <!-- Comment content input -->
-                                    <input type="hidden" name="ideaID"
-                                           value="<?php echo $row['IdeaID']; ?>">
-                                    <div class="form-floating mb-3">
+                                <!-- Comment form -->
+                                <div class="mt-3">
+                                    <form action="Staff.php" method="post">
+                                        <!-- Comment content input -->
+                                        <input type="hidden" name="ideaID" value="<?php echo $row['IdeaID']; ?>">
+                                        <div class="form-floating mb-3">
                                             <textarea class="form-control" placeholder="Leave a comment here"
                                                       id="commentContent" style="height: 100px"
-                                                      name="commentContent"></textarea>
-                                        <label for="commentContent">Leave a comment here</label>
-                                    </div>
-                                    <!-- Checkbox for anonymous comment -->
-                                    <div class="form-check mb-3">
-                                        <input class="form-check-input" type="checkbox" value=""
-                                               id="anonymousComment" name="anonymousComment">
-                                        <label class="form-check-label" for="anonymousComment">
-                                            Post anonymously
-                                        </label>
-                                    </div>
-                                    <!-- Submit button -->
-                                    <button type="submit" class="btn btn-primary" name="add-comment">Submit
-                                    </button>
-                                </form>
+                                                      name="commentContent" required></textarea>
+                                            <label for="commentContent">Leave a comment here</label>
+                                        </div>
+                                        <!-- Checkbox for anonymous comment -->
+                                        <div class="form-check mb-3">
+                                            <input class="form-check-input" type="checkbox" value=""
+                                                   id="anonymousComment" name="anonymousComment">
+                                            <label class="form-check-label" for="anonymousComment">
+                                                Post anonymously
+                                            </label>
+                                        </div>
+                                        <!-- Submit button -->
+                                        <button type="submit" class="btn btn-primary" name="add-comment">Submit
+                                        </button>
+                                    </form>
+                                </div>
                             </div>
                         </div>
                     <?php } ?>
@@ -329,10 +356,8 @@ class="rounded-circle me-2"
                             <div class="p-3 mt-4" style="background-color: #ffffff; margin-bottom: 10px;">
                                 <!-- topic 1 -->
                                 <h5 class="text-muted"><?php echo $row['TopicName'] ?></h5>
-                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
-                                        id="submitTopic"
-                                        data-bs-target="#topic1Modal"
-                                        data-id="<?php echo $row['TopicID'] ?>"
+                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="submitTopic"
+                                        data-bs-target="#topic1Modal" data-id="<?php echo $row['TopicID'] ?>"
                                         data-topic-name="<?php echo $row['TopicName'] ?>"
                                         data-topic-description="<?php echo $row['Description'] ?>"> Submit
                                     your ideas
@@ -356,7 +381,6 @@ class="rounded-circle me-2"
             <?php
             // Add idea for topic
             include("connection.php");
-
             if (isset($_POST['add-idea'])) {
                 $topicID = $_POST['topic-id'];
                 $title = $_POST['topic-title'];
@@ -391,6 +415,8 @@ class="rounded-circle me-2"
                     $documentPath = "";
                 }
 
+
+
                 $postDate = date("Y-m-d H:i:s");
                 $staffID = $_SESSION["staff_id"];
 
@@ -411,7 +437,6 @@ class="rounded-circle me-2"
                     }
                     echo "<script>alert('Idea added successfully.')</script>";
                     echo "<script>window.location.href = 'Staff.php'</script>";
-
                 } else {
                     echo "<script>alert('Error while adding idea: " . mysqli_error($conn) . "')</script>";
                     echo "<script>window.location.href = 'Staff.php'</script>";
@@ -420,8 +445,8 @@ class="rounded-circle me-2"
             ?>
 
             <!-- create modal for topic -->
-            <div class="modal fade" id="topic1Modal" tabindex="-1" aria-labelledby="topic1ModalLabel"
-                 aria-hidden="true" data-bs-backdrop="false">
+            <div class="modal fade" id="topic1Modal" tabindex="-1" aria-labelledby="topic1ModalLabel" aria-hidden="true"
+                 data-bs-backdrop="false">
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
                         <!-- head -->
@@ -440,23 +465,23 @@ class="rounded-circle me-2"
                                 <div class="mb-3">
                                     <label for="topic" class="form-label text-primary">Topic:</label>
                                     <input type="text" class="form-control" id="topic-name" readonly
-                                           style="background-color: #f8f9fa"
-                                           name="topic-name">
+                                           style="background-color: #f8f9fa" name="topic-name">
                                 </div>
                                 <div class="mb-3">
                                     <label for="topic" class="form-label text-primary">Description:</label>
                                     <textarea class="form-control" rows="5" id="topic-description" readonly
-                                              style="background-color: #f8f9fa"
-                                              name="topic-description"></textarea>
+                                              style="background-color: #f8f9fa" name="topic-description"></textarea>
                                 </div>
                                 <div class="mb-3">
                                     <label for="topic" class="form-label text-primary">Title:</label>
-                                    <input type="text" class="form-control" id="topic-title" name="topic-title">
+                                    <input type="text" class="form-control" id="topic-title" name="topic-title"
+                                           placeholder="Title">
                                 </div>
                                 <div class="mb-3">
                                     <!-- text -->
                                     <label for="text" class="form-label text-primary">Your Ideas:</label>
-                                    <textarea class="form-control" id="text" rows="5" required
+                                    <textarea class="form-control" id="text" required rows="5"
+                                              placeholder="Enter your ideas here..."
                                               name="message"></textarea>
                                 </div>
                                 <div class="mb-3">
@@ -467,8 +492,8 @@ class="rounded-circle me-2"
                                     </div>
                                 </div>
                                 <div class="form-check mb-3">
-                                    <input class="form-check-input" type="checkbox" value=""
-                                           id="anonymousComment" name="anonymous">
+                                    <input class="form-check-input" type="checkbox" value="" id="anonymousComment"
+                                           name="anonymous">
                                     <label class="form-check-label" for="anonymousComment">
                                         Post anonymously
                                     </label>
@@ -477,8 +502,8 @@ class="rounded-circle me-2"
                                     <!-- agree to terms and conditions -->
                                     <input type="checkbox" class="form-check-input" id="terms" required>
                                     <label class="form-check-label" for="terms">
-                                        I agree to the <a href="#" data-bs-toggle="modal"
-                                                          data-bs-target="#termsModal" class="text-primary">terms
+                                        I agree to the <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal"
+                                                          class="text-primary">terms
                                             and conditions</a>
                                     </label>
                                 </div>
@@ -493,8 +518,8 @@ class="rounded-circle me-2"
             </div>
 
             <!-- terms and conditions modal -->
-            <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel"
-                 aria-hidden="true" data-bs-backdrop="false">
+            <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true"
+                 data-bs-backdrop="false">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                     <div class="modal-content">
                         <!-- head -->
@@ -502,8 +527,7 @@ class="rounded-circle me-2"
                             <h5 class="text-dark text-center w-100 m-0" id="termsModalLabel">
                                 Terms and Conditions
                             </h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                    aria-label="Close"></button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <!-- body -->
                         <div class="modal-body">
@@ -597,6 +621,29 @@ class="rounded-circle me-2"
                     // Update dislike count
                     const dislikeCount = btn.parentNode.querySelector('.dislike-count');
                     dislikeCount.textContent = data.dislike;
+                    // Change button style
+                    const likeBtn = document.getElementById('btnLike-' + ideaID);
+                    const dislikeBtn = document.getElementById('btnDislike-' + ideaID);
+                    // Check if the user has already liked the idea
+                    if (data.status == 1 && data.idea_id == ideaID) {
+                        // If the user has already liked the idea, remove the like
+                        likeBtn.classList.remove('btn-outline-primary');
+                        likeBtn.classList.add('btn-primary');
+                        dislikeBtn.classList.remove('btn-danger');
+                        dislikeBtn.classList.add('btn-outline-danger');
+
+                    } else if (data.status == 0 && data.idea_id == ideaID) {
+                        // If the user has already disliked the idea, remove the dislike
+                        dislikeBtn.classList.remove('btn-outline-danger');
+                        dislikeBtn.classList.add('btn-danger');
+
+                        likeBtn.classList.remove('btn-primary');
+                        likeBtn.classList.add('btn-outline-primary');
+                    } else {
+                        // If the user has not liked or disliked the idea, add the like
+                        likeBtn.classList.add('btn-outline-primary');
+                        dislikeBtn.classList.add('btn-outline-danger');
+                    }
                 }
             };
             xhr.open("POST", "vote.php", true);
@@ -618,6 +665,30 @@ class="rounded-circle me-2"
                     dislikeCount.textContent = data.dislike;
                     const likeCount = btn.parentNode.querySelector('.like-count');
                     likeCount.textContent = data.like;
+
+                    // Change button style
+                    const likeBtn = document.getElementById('btnLike-' + ideaID);
+                    const dislikeBtn = document.getElementById('btnDislike-' + ideaID);
+
+                    // Check if the user has already liked the idea
+                    if (data.status == 1 && data.idea_id == ideaID) {
+                        // If the user has already liked the idea, remove the like
+                        likeBtn.classList.remove('btn-outline-primary');
+                        likeBtn.classList.add('btn-primary');
+
+                        dislikeBtn.classList.remove('btn-danger');
+                        dislikeBtn.classList.add('btn-outline-danger');
+                    } else if (data.status == 0 && data.idea_id == ideaID) {
+                        // If the user has already disliked the idea, remove the dislike
+                        dislikeBtn.classList.remove('btn-outline-danger');
+                        dislikeBtn.classList.add('btn-danger');
+                        likeBtn.classList.remove('btn-primary');
+                        likeBtn.classList.add('btn-outline-primary');
+                    } else {
+                        // If the user has not liked or disliked the idea, add the like
+                        likeBtn.classList.add('btn-outline-primary');
+                        dislikeBtn.classList.add('btn-outline-danger');
+                    }
                 }
             };
             xhr.open("POST", "vote.php", true);
@@ -625,7 +696,6 @@ class="rounded-circle me-2"
             xhr.send(`idea_id=${ideaID}&status=0`);
         });
     });
-
 </script>
 </body>
 
diff --git a/Staff_MyPost.php b/Staff_MyPost.php
index 54474e9..2662b15 100644
--- a/Staff_MyPost.php
+++ b/Staff_MyPost.php
@@ -71,7 +71,7 @@ class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover"
                                 <i class="fa-solid fa-bars-progress topic-icon active" style="font-size: 35px;"></i>
                             </div>
                             <div>
-                                <p class="m-0" style="padding-left: 10px;" id="manage-topics-text">My Post</p>
+                                <p class="m-0" style="padding-left: 10px;">My Post</p>
                             </div>
                         </a>
                     </li>
@@ -166,6 +166,7 @@ class="rounded-circle me-2"
                             </div>
                             <div class="my-3">
                                 <h6>Topic Name: <?php echo $row['TopicName']; ?></h6>
+                                <h1><?php echo $row['IdeaID']; ?></h1>
                             </div>
                             <!-- content -->
                             <div class="my-3">
@@ -174,17 +175,56 @@ class="rounded-circle me-2"
                             <!-- like and dislike buttons -->
                             <div class="d-flex justify-content-between align-items-center">
                                 <div class="d-flex">
-                                    <button type="button" class="btn btn-outline-primary btn-sm me-2"><i
-                                            class="far fa-thumbs-up"></i> Like
+                                    <button type="button" class="btn btn-outline-primary btn-sm me-2 like-btn"
+                                            id="btnLike-<?php echo $row['IdeaID']; ?>"
+                                            data-idea-id="<?php echo $row['IdeaID']; ?>">
+                                        <i class="far fa-thumbs-up"></i> Like (<span class="like-count"><?php
+                                            $sql2 = "SELECT * FROM Vote WHERE Vote.IdeaID = " . $row['IdeaID'] . " AND Vote.Status = 1";
+                                            $result2 = mysqli_query($conn, $sql2);
+                                            echo mysqli_num_rows($result2);
+                                            // Check if the user has already liked the post change the color of the button
+                                            $staffID = $_SESSION['staff_id'];
+                                            $ideaID = $row['IdeaID'];
+
+                                            $sql3 = "SELECT * FROM Vote WHERE Vote.IdeaID = $ideaID AND Vote.StaffID = $staffID AND Vote.Status = 1";
+                                            $result3 = mysqli_query($conn, $sql3);
+                                            if (mysqli_num_rows($result3) > 0) {
+                                                // Change class of the button
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.add('btn-primary');</script>";
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.remove('btn-outline-primary');</script>";
+                                            } else {
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.add('btn-outline-primary');</script>";
+                                                echo "<script>document.getElementById('btnLike-$ideaID').classList.remove('btn-primary');</script>";
+                                            }
+                                            ?></span>)
                                     </button>
-                                    <button type="button" class="btn btn-outline-danger btn-sm"><i
-                                            class="far fa-thumbs-down"></i> Dislike
+                                    <button type="button" class="btn btn-outline-danger btn-sm dislike-btn"
+                                            id="btnDislike-<?php echo $row['IdeaID']; ?>"
+                                            data-idea-id="<?php echo $row['IdeaID']; ?>">
+                                        <i class="far fa-thumbs-down"></i> Dislike (<span class="dislike-count"><?php
+                                            $sql4 = "SELECT * FROM Vote WHERE Vote.IdeaID = " . $row['IdeaID'] . " AND Vote.Status = 0";
+                                            $result4 = mysqli_query($conn, $sql4);
+                                            echo mysqli_num_rows($result4);
+                                            // Check if the user has already disliked the post change the color of the button
+                                            $staffID = $_SESSION['staff_id'];
+                                            $ideaID = $row['IdeaID'];
+                                            $sql5 = "SELECT * FROM Vote WHERE Vote.IdeaID = $ideaID AND Vote.StaffID = $staffID AND Vote.Status = 0";
+                                            $result5 = mysqli_query($conn, $sql5);
+                                            if (mysqli_num_rows($result5) > 0) {
+                                                // Change class of the button
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.add('btn-danger');</script>";
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.remove('btn-outline-danger');</script>";
+                                            } else {
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.add('btn-outline-danger');</script>";
+                                                echo "<script>document.getElementById('btnDislike-$ideaID').classList.remove('btn-danger');</script>";
+                                            }
+                                            ?></span>)
                                     </button>
                                 </div>
+
                                 <button type="button" class="btn btn-outline-secondary btn-sm comment-toggle"
                                         data-bs-toggle="collapse" href="#comment<?php echo $row['IdeaID']; ?>"
-                                        aria-expanded="false"
-                                        aria-controls="comment">
+                                        aria-expanded="false" aria-controls="comment">
                                     <i class="far fa-comment"></i> Comment (<?php
                                     $sql3 = "SELECT * FROM Comment WHERE Comment.IdeaID = " . $row['IdeaID'];
                                     $result3 = mysqli_query($conn, $sql3);
@@ -192,85 +232,88 @@ class="far fa-thumbs-down"></i> Dislike
                                     ?>)
                                 </button>
                             </div>
+
+                            <!-- comment section -->
                             <?php
                             include("connection.php");
                             $sql2 = "SELECT * FROM Comment, Staff WHERE Comment.StaffID = Staff.StaffID AND Comment.IdeaID = " . $row['IdeaID'] . " ORDER BY Comment.CommentDate ASC";
                             $result2 = mysqli_query($conn, $sql2); ?>
-                            <?php if (mysqli_num_rows($result2) > 0) { ?>
-                                <!-- Comment section -->
-                                <?php while ($row2 = mysqli_fetch_assoc($result2)) { ?>
-                                    <div class="comments mt-3">
-                                        <!-- Single comment -->
-                                        <div class="d-flex align-items-start comment">
-                                            <!-- Avatar -->
-                                            <img src="https://source.unsplash.com/collection/happy-people" alt="avatar"
-                                                 class="rounded-circle me-2"
-                                                 style="width: 38px; height: 38px; object-fit: cover">
-                                            <div class="comment-body">
-                                                <!-- Commenter name -->
-                                                <p class="m-0 fw-bold"><?php
-                                                    if ($row2['StaffID'] == $_SESSION['staff_id'] && $row2['is_anonymous'] == 1) {
-                                                        echo "You (Anonymous)";
-                                                    } else if ($row2['StaffID'] == $_SESSION['staff_id']) {
-                                                        echo "You";
-                                                    } else if ($row2['is_anonymous'] == 1) {
-                                                        echo "Anonymous";
-                                                    } else {
-                                                        echo $row2['FullName'];
-                                                    }
-                                                    ?></p>
-                                                <!-- Comment time -->
-                                                <span class="text-muted fs-7"><?php
-                                                    $current_time = new DateTime();
-                                                    $comment_time = new DateTime($row2['CommentDate']);
-                                                    // Calculate the difference between the current time and the post time
-                                                    $diff = $current_time->diff($comment_time);
-                                                    if ($diff->y > 0) {
-                                                        echo $diff->y . " year" . ($diff->y > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->m > 0) {
-                                                        echo $diff->m . " month" . ($diff->m > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->d > 0) {
-                                                        echo $diff->d . " day" . ($diff->d > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->h > 0) {
-                                                        echo $diff->h . " hour" . ($diff->h > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->i > 0) {
-                                                        echo $diff->i . " minute" . ($diff->i > 1 ? "s" : "") . " ago";
-                                                    } else if ($diff->s > 0) {
-                                                        echo $diff->s . " second" . ($diff->s > 1 ? "s" : "") . " ago";
-                                                    }
-                                                    ?>
-                                                </span>
-                                                <!-- Comment content -->
-                                                <p class="mt-2"><?php echo $row2['CommentContent']; ?></p>
+                            <div id="comment<?php echo $row['IdeaID']; ?>" class="collapse">
+                                <?php if (mysqli_num_rows($result2) > 0) { ?>
+                                    <!-- Comment section -->
+                                    <?php while ($row2 = mysqli_fetch_assoc($result2)) { ?>
+                                        <div class="comments mt-3">
+                                            <!-- Single comment -->
+                                            <div class="d-flex align-items-start comment">
+                                                <!-- Avatar -->
+                                                <img src="https://source.unsplash.com/collection/happy-people"
+                                                     alt="avatar" class="rounded-circle me-2"
+                                                     style="width: 38px; height: 38px; object-fit: cover">
+                                                <div class="comment-body">
+                                                    <!-- Commenter name -->
+                                                    <p class="m-0 fw-bold"><?php
+                                                        if ($row2['StaffID'] == $_SESSION['staff_id'] && $row2['is_anonymous'] == 1) {
+                                                            echo "You (Anonymous)";
+                                                        } else if ($row2['StaffID'] == $_SESSION['staff_id']) {
+                                                            echo "You";
+                                                        } else if ($row2['is_anonymous'] == 1) {
+                                                            echo "Anonymous";
+                                                        } else {
+                                                            echo $row2['FullName'];
+                                                        }
+                                                        ?></p>
+                                                    <!-- Comment time -->
+                                                    <span class="text-muted fs-7"><?php
+                                                        $current_time = new DateTime();
+                                                        $comment_time = new DateTime($row2['CommentDate']);
+                                                        // Calculate the difference between the current time and the post time
+                                                        $diff = $current_time->diff($comment_time);
+                                                        if ($diff->y > 0) {
+                                                            echo $diff->y . " year" . ($diff->y > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->m > 0) {
+                                                            echo $diff->m . " month" . ($diff->m > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->d > 0) {
+                                                            echo $diff->d . " day" . ($diff->d > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->h > 0) {
+                                                            echo $diff->h . " hour" . ($diff->h > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->i > 0) {
+                                                            echo $diff->i . " minute" . ($diff->i > 1 ? "s" : "") . " ago";
+                                                        } else if ($diff->s > 0) {
+                                                            echo $diff->s . " second" . ($diff->s > 1 ? "s" : "") . " ago";
+                                                        }
+                                                        ?>
+                                                        </span>
+                                                    <!-- Comment content -->
+                                                    <p class="mt-2"><?php echo $row2['CommentContent']; ?></p>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
+                                    <?php } ?>
                                 <?php } ?>
-                            <?php } ?>
-                            <!-- Comment form -->
-                            <div class="mt-3" id="comment<?php echo $row['IdeaID']; ?>">
-                                <form action="Staff_MyPost.php" method="post">
-                                    <!-- Comment content input -->
-                                    <input type="hidden" name="ideaID"
-                                           value="<?php echo $row['IdeaID']; ?>">
-                                    <div class="form-floating mb-3">
+                                <!-- Comment form -->
+                                <div class="mt-3">
+                                    <form action="Staff.php" method="post">
+                                        <!-- Comment content input -->
+                                        <input type="hidden" name="ideaID" value="<?php echo $row['IdeaID']; ?>">
+                                        <div class="form-floating mb-3">
                                             <textarea class="form-control" placeholder="Leave a comment here"
                                                       id="commentContent" style="height: 100px"
                                                       name="commentContent"></textarea>
-                                        <label for="commentContent">Leave a comment here</label>
-                                    </div>
-                                    <!-- Checkbox for anonymous comment -->
-                                    <div class="form-check mb-3">
-                                        <input class="form-check-input" type="checkbox" value=""
-                                               id="anonymousComment" name="anonymousComment">
-                                        <label class="form-check-label" for="anonymousComment">
-                                            Post anonymously
-                                        </label>
-                                    </div>
-                                    <!-- Submit button -->
-                                    <button type="submit" class="btn btn-primary" name="add-comment">Submit
-                                    </button>
-                                </form>
+                                            <label for="commentContent">Leave a comment here</label>
+                                        </div>
+                                        <!-- Checkbox for anonymous comment -->
+                                        <div class="form-check mb-3">
+                                            <input class="form-check-input" type="checkbox" value=""
+                                                   id="anonymousComment" name="anonymousComment">
+                                            <label class="form-check-label" for="anonymousComment">
+                                                Post anonymously
+                                            </label>
+                                        </div>
+                                        <!-- Submit button -->
+                                        <button type="submit" class="btn btn-primary" name="add-comment">Submit
+                                        </button>
+                                    </form>
+                                </div>
                             </div>
                         </div>
                     <?php } ?>
@@ -291,7 +334,7 @@ class="rounded-circle me-2"
 
                 if (mysqli_query($conn, $sql)) {
                     echo "<script>alert('Comment added successfully!')</script>";
-                    echo "<script>window.location.href='Staff_MyPost.php'</script>";
+                    echo "<script>window.location.href='Staff.php'</script>";
                 } else {
                     echo "<script>alert('Error: " . $sql . "<br>" . mysqli_error($conn) . "')</script>";
                 }
@@ -313,10 +356,8 @@ class="rounded-circle me-2"
                             <div class="p-3 mt-4" style="background-color: #ffffff; margin-bottom: 10px;">
                                 <!-- topic 1 -->
                                 <h5 class="text-muted"><?php echo $row['TopicName'] ?></h5>
-                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
-                                        id="submitTopic"
-                                        data-bs-target="#topic1Modal"
-                                        data-id="<?php echo $row['TopicID'] ?>"
+                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="submitTopic"
+                                        data-bs-target="#topic1Modal" data-id="<?php echo $row['TopicID'] ?>"
                                         data-topic-name="<?php echo $row['TopicName'] ?>"
                                         data-topic-description="<?php echo $row['Description'] ?>"> Submit
                                     your ideas
@@ -358,14 +399,14 @@ class="rounded-circle me-2"
                     // Check if file type is valid
                     if (!in_array($fileType, $validFileTypes)) {
                         echo "<script>alert('Invalid file type. Please upload a PDF, DOC, DOCX, TXT or PATH file.')</script>";
-                        echo "<script>window.location.href = 'Staff_MyPost.php'</script>";
+                        echo "<script>window.location.href = 'Staff.php'</script>";
                         exit();
                     }
 
                     // Check file size
                     if ($_FILES['file-upload']['size'] > 5000000) {
                         echo "<script>alert('File size must be less than 5 MB.')</script>";
-                        echo "<script>window.location.href = 'Staff_MyPost.php'</script>";
+                        echo "<script>window.location.href = 'Staff.php'</script>";
                         exit();
                     }
 
@@ -390,23 +431,21 @@ class="rounded-circle me-2"
 
                         if (!$result) {
                             echo "<script>alert('Error while saving document path.')</script>";
-                            echo "<script>window.location.href = 'Staff_MyPost.php'</script>";
+                            echo "<script>window.location.href = 'Staff.php'</script>";
                         }
                     }
                     echo "<script>alert('Idea added successfully.')</script>";
-                    echo "<script>alert('Idea added successfully.')</script>";
-                    echo "<script>window.location.href = 'Staff_MyPost.php'</script>";
-
+                    echo "<script>window.location.href = 'Staff.php'</script>";
                 } else {
                     echo "<script>alert('Error while adding idea: " . mysqli_error($conn) . "')</script>";
-                    echo "<script>window.location.href = 'Staff_MyPost.php'</script>";
+                    echo "<script>window.location.href = 'Staff.php'</script>";
                 }
             }
             ?>
 
             <!-- create modal for topic -->
-            <div class="modal fade" id="topic1Modal" tabindex="-1" aria-labelledby="topic1ModalLabel"
-                 aria-hidden="true" data-bs-backdrop="false">
+            <div class="modal fade" id="topic1Modal" tabindex="-1" aria-labelledby="topic1ModalLabel" aria-hidden="true"
+                 data-bs-backdrop="false">
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
                         <!-- head -->
@@ -418,21 +457,19 @@ class="rounded-circle me-2"
                                     aria-label="Close"></button>
                         </div>
                         <!-- body -->
-                        <form action="Staff_MyPost.php" method="post" enctype="multipart/form-data">
+                        <form action="Staff.php" method="post" enctype="multipart/form-data">
                             <div class="modal-body">
                                 <!-- choose topic (auto-synced) -->
                                 <input type="hidden" name="topic-id" id="topic-id">
                                 <div class="mb-3">
                                     <label for="topic" class="form-label text-primary">Topic:</label>
                                     <input type="text" class="form-control" id="topic-name" readonly
-                                           style="background-color: #f8f9fa"
-                                           name="topic-name">
+                                           style="background-color: #f8f9fa" name="topic-name">
                                 </div>
                                 <div class="mb-3">
                                     <label for="topic" class="form-label text-primary">Description:</label>
                                     <textarea class="form-control" rows="5" id="topic-description" readonly
-                                              style="background-color: #f8f9fa"
-                                              name="topic-description"></textarea>
+                                              style="background-color: #f8f9fa" name="topic-description"></textarea>
                                 </div>
                                 <div class="mb-3">
                                     <label for="topic" class="form-label text-primary">Title:</label>
@@ -452,8 +489,8 @@ class="rounded-circle me-2"
                                     </div>
                                 </div>
                                 <div class="form-check mb-3">
-                                    <input class="form-check-input" type="checkbox" value=""
-                                           id="anonymousComment" name="anonymous">
+                                    <input class="form-check-input" type="checkbox" value="" id="anonymousComment"
+                                           name="anonymous">
                                     <label class="form-check-label" for="anonymousComment">
                                         Post anonymously
                                     </label>
@@ -462,8 +499,8 @@ class="rounded-circle me-2"
                                     <!-- agree to terms and conditions -->
                                     <input type="checkbox" class="form-check-input" id="terms" required>
                                     <label class="form-check-label" for="terms">
-                                        I agree to the <a href="#" data-bs-toggle="modal"
-                                                          data-bs-target="#termsModal" class="text-primary">terms
+                                        I agree to the <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal"
+                                                          class="text-primary">terms
                                             and conditions</a>
                                     </label>
                                 </div>
@@ -478,8 +515,8 @@ class="rounded-circle me-2"
             </div>
 
             <!-- terms and conditions modal -->
-            <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel"
-                 aria-hidden="true" data-bs-backdrop="false">
+            <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true"
+                 data-bs-backdrop="false">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                     <div class="modal-content">
                         <!-- head -->
@@ -487,8 +524,7 @@ class="rounded-circle me-2"
                             <h5 class="text-dark text-center w-100 m-0" id="termsModalLabel">
                                 Terms and Conditions
                             </h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                    aria-label="Close"></button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <!-- body -->
                         <div class="modal-body">
@@ -543,6 +579,13 @@ class="rounded-circle me-2"
         crossorigin="anonymous"></script>
 <!-- main js -->
 <script src="./js/main.js"></script>
+<!-- jquery -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<!--import -->
+
+<script>
+
+</script>
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         var submitTopic = document.querySelectorAll('#submitTopic');
@@ -560,6 +603,96 @@ class="rounded-circle me-2"
             });
         });
     });
+
+    // Like button click event listener
+    document.querySelectorAll('.like-btn').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const ideaID = btn.getAttribute('data-idea-id');
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+                    // Update like count
+                    const likeCount = btn.querySelector('.like-count');
+                    const data = JSON.parse(this.responseText);
+                    likeCount.textContent = data.like;
+                    // Update dislike count
+                    const dislikeCount = btn.parentNode.querySelector('.dislike-count');
+                    dislikeCount.textContent = data.dislike;
+                    // Change button style
+                    const likeBtn = document.getElementById('btnLike-' + ideaID);
+                    const dislikeBtn = document.getElementById('btnDislike-' + ideaID);
+                    // Check if the user has already liked the idea
+                    if (data.status == 1 && data.idea_id == ideaID) {
+                        // If the user has already liked the idea, remove the like
+                        likeBtn.classList.remove('btn-outline-primary');
+                        likeBtn.classList.add('btn-primary');
+                        dislikeBtn.classList.remove('btn-danger');
+                        dislikeBtn.classList.add('btn-outline-danger');
+
+                    } else if (data.status == 0 && data.idea_id == ideaID) {
+                        // If the user has already disliked the idea, remove the dislike
+                        dislikeBtn.classList.remove('btn-outline-danger');
+                        dislikeBtn.classList.add('btn-danger');
+
+                        likeBtn.classList.remove('btn-primary');
+                        likeBtn.classList.add('btn-outline-primary');
+                    } else {
+                        // If the user has not liked or disliked the idea, add the like
+                        likeBtn.classList.add('btn-outline-primary');
+                        dislikeBtn.classList.add('btn-outline-danger');
+                    }
+                }
+            };
+            xhr.open("POST", "vote.php", true);
+            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+            xhr.send(`idea_id=${ideaID}&status=1`);
+        });
+    });
+
+    // Dislike button click event listener
+    document.querySelectorAll('.dislike-btn').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const ideaID = btn.getAttribute('data-idea-id');
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+                    // Update dislike count and like count
+                    const dislikeCount = btn.querySelector('.dislike-count');
+                    const data = JSON.parse(this.responseText);
+                    dislikeCount.textContent = data.dislike;
+                    const likeCount = btn.parentNode.querySelector('.like-count');
+                    likeCount.textContent = data.like;
+
+                    // Change button style
+                    const likeBtn = document.getElementById('btnLike-' + ideaID);
+                    const dislikeBtn = document.getElementById('btnDislike-' + ideaID);
+
+                    // Check if the user has already liked the idea
+                    if (data.status == 1 && data.idea_id == ideaID) {
+                        // If the user has already liked the idea, remove the like
+                        likeBtn.classList.remove('btn-outline-primary');
+                        likeBtn.classList.add('btn-primary');
+
+                        dislikeBtn.classList.remove('btn-danger');
+                        dislikeBtn.classList.add('btn-outline-danger');
+                    } else if (data.status == 0 && data.idea_id == ideaID) {
+                        // If the user has already disliked the idea, remove the dislike
+                        dislikeBtn.classList.remove('btn-outline-danger');
+                        dislikeBtn.classList.add('btn-danger');
+                        likeBtn.classList.remove('btn-primary');
+                        likeBtn.classList.add('btn-outline-primary');
+                    } else {
+                        // If the user has not liked or disliked the idea, add the like
+                        likeBtn.classList.add('btn-outline-primary');
+                        dislikeBtn.classList.add('btn-outline-danger');
+                    }
+                }
+            };
+            xhr.open("POST", "vote.php", true);
+            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+            xhr.send(`idea_id=${ideaID}&status=0`);
+        });
+    });
 </script>
 </body>
 
diff --git a/database/db_ideas.sql b/database/db_ideas.sql
index 2ca02b7..5c30311 100644
--- a/database/db_ideas.sql
+++ b/database/db_ideas.sql
@@ -43,7 +43,7 @@ CREATE TABLE Idea
 (
     IdeaID       INT PRIMARY KEY AUTO_INCREMENT,
     Title        VARCHAR(100)  NOT NULL,
-    Content      VARCHAR(1000) NOT NULL,
+    Content      TEXT NOT NULL,
     is_anonymous BOOLEAN       NOT NULL default FALSE,
     PostDate   DATETIME      NOT NULL,
     StaffID      INT           NOT NULL,
diff --git a/vote.php b/vote.php
index 6c2b6ff..db1759b 100644
--- a/vote.php
+++ b/vote.php
@@ -41,7 +41,7 @@
     $dislikes_count = mysqli_fetch_assoc($dislikes_result)['DislikeCount'];
 
     // return the counts as a JSON response
-    $response = array('like' => $likes_count, 'dislike' => $dislikes_count);
+    $response = array('like' => $likes_count, 'dislike' => $dislikes_count, 'status' => $status, 'idea_id' => $ideaID);
     header('Content-Type: application/json');
     echo json_encode($response);
 }