4WDCSA.co.za/comment_box.php

<?php

if (!isset($page_id)) {
  die("Page ID not set for comment system.");
}



$conn = openDatabaseConnection();

// Handle comment post
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_comment'])) {
  // Validate CSRF token
  if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
    http_response_code(403);
    die('Security token validation failed.');
  }

  $comment = trim($_POST['comment'] ?? '');

  if (!empty($comment)) {
    $stmt = $conn->prepare("INSERT INTO comments (page_id, user_id, comment) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $page_id, $user_id, $comment);
    if ($stmt->execute()) {
      header("Location: " . $_SERVER['REQUEST_URI']);
      exit;
    }
  }
}

// Fetch comments
$stmt = $conn->prepare("SELECT user_id, comment, created_at FROM comments WHERE page_id = ? ORDER BY created_at DESC");
$stmt->bind_param("s", $page_id);
$stmt->execute();
$result = $stmt->get_result();
?>

<div>
  <h5>Comments</h5>
  <div class="comments">
    <?php while ($row = $result->fetch_assoc()): ?>
      <div class="comment-body" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
        <div>
          <img class="profile-pic" src="<?= getProfilePic($user_id); ?>" alt="Author">
        </div>
        <div class="">
          <h6><?= getFullName($row['user_id']); ?></h6>
          <?php 
          if (getUserMemberStatus($row['user_id'])){
            echo '<div class="badge badge-primary badge-pill">MEMBER</div>';
          }
          ?>         

          <em><?= $row['created_at'] ?></em>
          <!-- <div class="ratting">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div> -->
          <p><?= nl2br(htmlspecialchars($row['comment'])) ?></p>
          <!-- <a class="read-more" href="#">Reply <i class="far fa-angle-right"></i></a> -->
        </div>
      </div>

    <?php endwhile; ?>
  </form>
  <!-- <h5>Add A Comment</h5> -->
  <form method="POST" id="comment-form" class="comment-form bgc-lighter z-1 rel mt-30" name="review-form" action="" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
    <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
    <div class="row gap-20">
      <div class="col-md-12">
        <div class="form-group">
          <textarea name="comment" id="comment" class="form-control" rows="5" placeholder="Add comment..." required></textarea>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group mb-0">
          <button type="submit" name="submit_comment" class="theme-btn bgc-secondary style-two">
            <span data-hover="Submit reviews">Add comment</span>
            <i class="fal fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  </form>
</div>


<style>
  .comment-box {
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 600px;
  }

  .comment-box form input,
  .comment-box form textarea {
    width: 100%;
    margin-bottom: 8px;
  }

  .comments-list {
    margin-top: 20px;
  }

  .comment {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
  }

  .profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    /* Ensures the image fits without distortion */
  }

  .badge {
    display: inline-block;
    padding: 0.4em 0.8em;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    border-radius: 0.375em;
    margin-right: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .badge-primary {
    background-color: #e90000;
  }

  .badge-success {
    background-color: #28a745;
  }

  .badge-warning {
    background-color: #ffc107;
    color: #212529;
  }

  .badge-danger {
    background-color: #dc3545;
  }

  .badge-info {
    background-color: #17a2b8;
  }

  .badge-pill {
    border-radius: 999px;
  }
</style>