blog_details.php

<?php
session_start();
require_once 'db/config.php';
require_once 'db/blog_functions.php';
require_once 'notification_helper.php';

// Comment-related functions
function fetchCommentsByBlogId($conn, $blogId, $limit = 3, $offset = 0) {
    $sql = "SELECT c.*, 
                   u.fullname as user_name, u.image as user_image,
                   e.fullname as expert_name, e.image as expert_image
            FROM comment c 
            LEFT JOIN user u ON c.uid = u.uid
            LEFT JOIN expert e ON c.eid = e.eid
            WHERE c.bid = ? 
            ORDER BY c.created_at DESC 
            LIMIT ? OFFSET ?";
    
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("iii", $blogId, $limit, $offset);
    $stmt->execute();
    $result = $stmt->get_result();
    
    $comments = [];
    while ($row = $result->fetch_assoc()) {
        $comments[] = [
            'id' => $row['cmid'],
            'description' => $row['description'],
            'created_at' => $row['created_at'],
            'uid' => $row['uid'], // Will be NULL if expert commented
            'eid' => $row['eid'], // Will be NULL if user commented
            'author_name' => $row['uid'] ? $row['user_name'] : $row['expert_name'],
            'author_image' => $row['uid'] ? $row['user_image'] : $row['expert_image'],
            'author_type' => $row['uid'] ? 'user' : 'expert'
        ];
    }
    
    return $comments;
}

function getTotalCommentsCount($conn, $blogId) {
    $sql = "SELECT COUNT(*) as count FROM comment WHERE bid = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("i", $blogId);
    $stmt->execute();
    $result = $stmt->get_result();
    $row = $result->fetch_assoc();
    return $row['count'];
}

function addComment($conn, $blogId, $description, $userId = null, $expertId = null) {
    // One of uid or eid should be set, the other should be NULL
    if ($userId) {
        // User is commenting - set uid and leave eid as NULL
        $uid = $userId;
        $eid = null;
    } elseif ($expertId) {
        // Expert is commenting - set eid and leave uid as NULL
        $uid = null;
        $eid = $expertId;
    } else {
        return false; // No valid user or expert ID provided
    }
    
    $sql = "INSERT INTO comment (bid, description, uid, eid) VALUES (?, ?, ?, ?)";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("isii", $blogId, $description, $uid, $eid);
    
    if ($stmt->execute()) {
        // Get blog details and commenter name for notification
        $blogSql = "SELECT b.title, b.uid as blog_user_id, b.eid as blog_expert_id 
                    FROM blog b 
                    WHERE b.bid = ?";
        $blogStmt = $conn->prepare($blogSql);
        $blogStmt->bind_param("i", $blogId);
        $blogStmt->execute();
        $blogResult = $blogStmt->get_result();
        
        if ($blogRow = $blogResult->fetch_assoc()) {
            // Get commenter name
            $commenterName = '';
            if ($userId) {
                $userSql = "SELECT fullname FROM user WHERE uid = ?";
                $userStmt = $conn->prepare($userSql);
                $userStmt->bind_param("i", $userId);
                $userStmt->execute();
                $userResult = $userStmt->get_result();
                if ($userRow = $userResult->fetch_assoc()) {
                    $commenterName = $userRow['fullname'];
                }
                $userStmt->close();
            } else {
                $expertSql = "SELECT fullname FROM expert WHERE eid = ?";
                $expertStmt = $conn->prepare($expertSql);
                $expertStmt->bind_param("i", $expertId);
                $expertStmt->execute();
                $expertResult = $expertStmt->get_result();
                if ($expertRow = $expertResult->fetch_assoc()) {
                    $commenterName = $expertRow['fullname'];
                }
                $expertStmt->close();
            }
            
            // Send notification to blog author (check if user or expert blog)
            if ($blogRow['blog_user_id'] && $blogRow['blog_user_id'] != $userId) {
                // User blog - notify user author
                notifyBlogComment($conn, $blogRow['blog_user_id'], $commenterName, $blogRow['title'], false);
            } elseif ($blogRow['blog_expert_id'] && $blogRow['blog_expert_id'] != $expertId) {
                // Expert blog - notify expert author
                notifyBlogComment($conn, $blogRow['blog_expert_id'], $commenterName, $blogRow['title'], true);
            }
        }
        $blogStmt->close();
        
        return true;
    }
    
    return false;
}

function updateComment($conn, $commentId, $description, $userId = null, $expertId = null) {
    // Verify ownership before updating
    $checkSql = "SELECT uid, eid FROM comment WHERE cmid = ?";
    $checkStmt = $conn->prepare($checkSql);
    $checkStmt->bind_param("i", $commentId);
    $checkStmt->execute();
    $result = $checkStmt->get_result();
    
    if ($result->num_rows === 0) {
        return false;
    }
    
    $comment = $result->fetch_assoc();
    
    // Check if user owns this comment (proper NULL handling)
    $isUserOwner = ($userId && $comment['uid'] && $comment['uid'] == $userId);
    $isExpertOwner = ($expertId && $comment['eid'] && $comment['eid'] == $expertId);
    
    if ($isUserOwner || $isExpertOwner) {
        $sql = "UPDATE comment SET description = ? WHERE cmid = ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("si", $description, $commentId);
        return $stmt->execute();
    }
    
    return false;
}

// Handle comment actions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    $response = ['success' => false, 'message' => ''];
    
    if ($action === 'add_comment') {
        $blogId = (int)$_POST['blog_id'];
        $description = trim($_POST['description']);
        
        if (empty($description)) {
            $response['message'] = 'Comment cannot be empty.';
        } else {
            $userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
            $expertId = isset($_SESSION['expert_id']) ? $_SESSION['expert_id'] : null;
            
            if (!$userId && !$expertId) {
                $response['message'] = 'You must be logged in to comment.';
            } else {
                try {
                    if (addComment($conn, $blogId, $description, $userId, $expertId)) {
                        $response['success'] = true;
                        $response['message'] = 'Comment added successfully!';
                    } else {
                        $response['message'] = 'Failed to add comment.';
                    }
                } catch (Exception $e) {
                    $response['message'] = 'Database error: ' . $e->getMessage();
                }
            }
        }
    } elseif ($action === 'update_comment') {
        $commentId = (int)$_POST['comment_id'];
        $description = trim($_POST['description']);
        
        if (empty($description)) {
            $response['message'] = 'Comment cannot be empty.';
        } else {
            $userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
            $expertId = isset($_SESSION['expert_id']) ? $_SESSION['expert_id'] : null;
            
            if (updateComment($conn, $commentId, $description, $userId, $expertId)) {
                $response['success'] = true;
                $response['message'] = 'Comment updated successfully!';
            } else {
                $response['message'] = 'Failed to update comment or unauthorized.';
            }
        }
    } elseif ($action === 'load_more_comments') {
        $blogId = (int)$_POST['blog_id'];
        $offset = (int)$_POST['offset'];
        $comments = fetchCommentsByBlogId($conn, $blogId, 3, $offset);
        $response['success'] = true;
        $response['comments'] = $comments;
    }
    
    if (isset($_POST['ajax'])) {
        header('Content-Type: application/json');
        echo json_encode($response);
        exit;
    }
}
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Details - Soullift Mental Wellness</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0fdfa',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        },
                        secondary: {
                            50: '#faf5ff',
                            100: '#f3e8ff',
                            200: '#e9d5ff',
                            300: '#d8b4fe',
                            400: '#c084fc',
                            500: '#a855f7',
                            600: '#9333ea',
                            700: '#7c3aed',
                            800: '#6b21a8',
                            900: '#581c87',
                        },
                        accent: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            400: '#fb923c',
                            500: '#f97316',
                            600: '#ea580c',
                            700: '#c2410c',
                            800: '#9a3412',
                            900: '#7c2d12',
                        },
                        success: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#22c55e',
                            600: '#16a34a',
                            700: '#15803d',
                            800: '#166534',
                            900: '#14532d',
                        }
                    },
                    fontFamily: {
                        'sans': ['Inter', 'sans-serif'],
                        'heading': ['Poppins', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'fade-in': 'fadeIn 0.8s ease-out forwards',
                        'slide-up': 'slideUp 0.6s ease-out forwards',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0', transform: 'translateY(30px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        slideUp: {
                            '0%': { opacity: '0', transform: 'translateY(50px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                    }
                }
            }
        }
    </script>
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .glass-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #14b8a6, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #14b8a6, #0891b2);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #0d9488, #075985);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(20, 184, 166, 0.3);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #a855f7, #7c3aed);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: linear-gradient(135deg, #9333ea, #6b21a8);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3);
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-primary-50 font-sans">
    <?php
    // Get the blog post ID from URL parameter
    $postId = isset($_GET['id']) ? (int)$_GET['id'] : 1;
    
    // Fetch the blog from database
    $currentPost = fetchBlogById($conn, $postId);
    
    // If post not found, redirect to blog.php
    if (!$currentPost) {
        header('Location: blog.php');
        exit;
    }
    
    // Check if current user has liked this blog
    $userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
    $expertId = isset($_SESSION['expert_id']) ? $_SESSION['expert_id'] : null;
    $isLiked = hasUserLikedBlog($conn, $postId, $userId, $expertId);
    
    // Get related posts (same category, excluding current post)
    $relatedPosts = fetchRelatedBlogs($conn, $currentPost['category'], $postId, 4);
    
    // Get comments for this blog
    $comments = fetchCommentsByBlogId($conn, $postId, 3, 0);
    $totalComments = getTotalCommentsCount($conn, $postId);
    ?>

    <!-- Header -->
    <header class="glass-effect sticky top-0 z-50 border-b border-white/20">
        <div class="container mx-auto px-6">
            <nav class="flex justify-between items-center py-4">
                <!-- Logo -->
                <a href="Homepage.php" class="flex items-center space-x-3 group">
                    <div class="relative">
                        <img src="resources/soullift-logo.svg" alt="SoulLift Logo" class="h-10 w-auto group-hover:scale-105 transition-transform duration-300">
                    </div>
                </a>
                
                <!-- Desktop Navigation -->
                <ul class="hidden lg:flex items-center space-x-8">
                    <li><a href="Homepage.php?page=home" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Home</a></li>
                    <li><a href="user_profile.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">My Profile</a></li>
                    <li><a href="blog.php" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">Blog</a></li>
                    <?php
                        // choose appointments page based on role
                        $appointmentsPage = (isset($_SESSION['role']) && $_SESSION['role'] === 'expert') ? 'expert_appointments.php' : 'user_appointments.php';
                    ?>
                    <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'user'): ?>
                        <li><a href="experts.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Experts</a></li>
                        <li><a href="courses.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Courses</a></li>
                        <li><a href="services.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Services</a></li>
                        <li><a href="<?php echo $appointmentsPage; ?>" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Appointments</a></li>
                    <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                        <li><a href="courses.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Courses</a></li>
                        <li><a href="schedule.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Schedule</a></li>
                        <li><a href="<?php echo $appointmentsPage; ?>" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Appointments</a></li>
                    <?php else: ?>
                        <li><a href="courses.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Courses</a></li>
                    <?php endif; ?>
                    <li><a href="about.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">About Us</a></li>
                </ul>

                <!-- Right side buttons -->
                <div class="flex items-center space-x-4">
                    <!-- Notification Button -->
                    <a href="notifications.php" class="relative glass-effect text-primary-600 px-4 py-2 rounded-xl hover:bg-white/50 transition-all duration-300 group">
                        <i class="fas fa-bell mr-2 group-hover:animate-pulse"></i>
                        <span class="hidden sm:inline">Notifications</span>
                    </a>
                    
                    <?php if (isset($_SESSION['role'])): ?>
                        <a href="Homepage.php?logout=1" class="btn-secondary text-white px-6 py-2 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fas fa-sign-out-alt mr-2"></i>
                            Log Out
                        </a>
                    <?php else: ?>
                        <a href="login_signup.php" class="btn-primary text-white px-6 py-2 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fas fa-rocket mr-2"></i>
                            Get Started
                        </a>
                    <?php endif; ?>
                </div>
                
                <!-- Mobile Menu Button -->
                <button class="lg:hidden text-gray-700 hover:text-primary-600 transition-colors p-2" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </nav>
            
            <!-- Mobile Navigation -->
            <div id="mobile-menu" class="lg:hidden hidden pb-4">
                <div class="glass-card rounded-2xl p-4 mt-4">
                    <ul class="space-y-2">
                        <li><a href="Homepage.php?page=home" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Home</a></li>
                        <li><a href="user_profile.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">My Profile</a></li>
                        <li><a href="blog.php" class="block text-primary-600 font-semibold px-4 py-3 rounded-xl bg-primary-50/50">Blog</a></li>
                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'user'): ?>
                            <li><a href="experts.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Experts</a></li>
                            <li><a href="courses.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Courses</a></li>
                            <li><a href="services.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Services</a></li>
                            <li><a href="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'expert'): ?>
                            <li><a href="courses.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Courses</a></li>
                            <li><a href="schedule.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Schedule</a></li>
                            <li><a href="<?php echo $appointmentsPage; ?>" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Appointments</a></li>
                        <?php else: ?>
                            <li><a href="courses.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">Courses</a></li>
                        <?php endif; ?>
                        <li><a href="about.php" class="block text-gray-700 hover:text-primary-600 transition-colors px-4 py-3 rounded-xl hover:bg-white/50">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <!-- Article Header -->
    <section class="py-12">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-10">
                <div class="inline-flex items-center space-x-2 glass-effect px-6 py-3 rounded-full text-sm font-semibold mb-6 transform hover:scale-105 transition-transform duration-300">
                    <i class="fas fa-tag text-primary-600"></i>
                    <span class="gradient-text"><?= $currentPost['category'] ?></span>
                </div>
                
                <h1 class="text-4xl md:text-5xl font-heading font-bold text-gray-900 mb-6 leading-tight">
                    <?= $currentPost['title'] ?>
                </h1>
                
                <div class="flex items-center justify-center flex-wrap gap-6 text-gray-600 mb-8">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-user-circle text-primary-600"></i>
                        <span class="font-semibold"><?= $currentPost['author'] ?></span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-calendar text-secondary-600"></i>
                        <span><?= $currentPost['date'] ?></span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-clock text-accent-600"></i>
                        <span><?= generateReadTime($currentPost['description']) ?></span>
                    </div>
                </div>
                
                <div class="flex items-center justify-center flex-wrap gap-4 mb-8">
                    <button id="like-btn" class="flex items-center space-x-2 px-6 py-3 rounded-full transition-all duration-300 transform hover:scale-105 <?= $isLiked ? 'bg-red-100 text-red-700 hover:bg-red-200' : 'glass-effect text-primary-700 hover:bg-white/40' ?>" 
                            data-blog-id="<?= $currentPost['id'] ?>" data-liked="<?= $isLiked ? 'true' : 'false' ?>">
                        <i class="fas fa-heart <?= $isLiked ? 'text-red-600' : '' ?>"></i>
                        <span id="like-text" class="font-semibold"><?= $isLiked ? 'Liked' : 'Like' ?></span>
                        <span id="like-count" class="bg-white rounded-full px-3 py-1 text-sm font-bold shadow-sm"><?= $currentPost['like_count'] ?></span>
                    </button>
                    <button class="flex items-center space-x-2 glass-effect text-secondary-700 px-6 py-3 rounded-full hover:bg-white/40 transition-all duration-300 transform hover:scale-105 font-semibold">
                        <i class="fas fa-share"></i>
                        <span>Share</span>
                    </button>
                    <button class="flex items-center space-x-2 glass-effect text-success-700 px-6 py-3 rounded-full hover:bg-white/40 transition-all duration-300 transform hover:scale-105 font-semibold">
                        <i class="fas fa-bookmark"></i>
                        <span>Save</span>
                    </button>
                </div>
            </div>

            <!-- Featured Image -->
            <div class="mb-12 overflow-hidden rounded-3xl shadow-2xl">
                <img src="<?= $currentPost['image'] ?>" alt="<?= $currentPost['title'] ?>" 
                     class="w-full h-64 md:h-96 object-cover transform hover:scale-105 transition-transform duration-700">
            </div>
        </div>
    </section>

    <!-- Article Content -->
    <section class="pb-16">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="glass-effect rounded-3xl shadow-2xl p-8 md:p-12 border border-white/20">
                <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                    <?= nl2br(htmlspecialchars($currentPost['description'])) ?>
                </div>
                
                <!-- Tags -->
                <div class="mt-12 pt-8 border-t border-gray-200">
                    <h3 class="text-lg font-heading font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-tags text-primary-600 mr-2"></i>
                        Tags
                    </h3>
                    <div class="flex flex-wrap gap-3">
                        <?php if (!empty($currentPost['tags'])): ?>
                            <?php foreach ($currentPost['tags'] as $tag): ?>
                            <span class="glass-effect px-4 py-2 rounded-full text-sm font-semibold gradient-text hover:bg-white/40 transition-all duration-300 cursor-pointer transform hover:scale-105">
                                #<?= trim(htmlspecialchars($tag)) ?>
                            </span>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <span class="glass-effect px-4 py-2 rounded-full text-sm font-semibold gradient-text hover:bg-white/40 transition-all duration-300 cursor-pointer transform hover:scale-105">
                                #<?= strtolower(str_replace(' ', '', $currentPost['category'])) ?>
                            </span>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Author Bio -->
                <div class="mt-12 pt-8 border-t border-gray-200">
                    <div class="flex items-start space-x-6">
                        <div class="flex-shrink-0">
                            <?php if ($currentPost['author_image']): ?>
                                <img src="<?= $currentPost['author_image'] ?>" alt="<?= $currentPost['author'] ?>" class="w-20 h-20 rounded-2xl object-cover shadow-lg">
                            <?php else: ?>
                                <div class="w-20 h-20 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-2xl flex items-center justify-center text-3xl shadow-lg">
                                    <i class="fas fa-user text-white"></i>
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-xl font-heading font-bold text-gray-900 mb-2"><?= $currentPost['author'] ?></h3>
                            <p class="text-gray-600 mb-4 leading-relaxed">
                                <?= $currentPost['author_about'] ? htmlspecialchars($currentPost['author_about']) : 'Passionate about mental health and wellness.' ?>
                            </p>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center hover:bg-primary-200 transition-all duration-300 transform hover:scale-110">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-secondary-100 text-secondary-600 rounded-xl flex items-center justify-center hover:bg-secondary-200 transition-all duration-300 transform hover:scale-110">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-accent-100 text-accent-600 rounded-xl flex items-center justify-center hover:bg-accent-200 transition-all duration-300 transform hover:scale-110">
                                    <i class="fas fa-envelope"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comments Section -->
    <section class="py-16 bg-gradient-to-br from-primary-50 to-secondary-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="glass-effect rounded-3xl shadow-2xl p-8 border border-white/20">
                <h2 class="text-3xl font-heading font-bold text-gray-900 mb-8 flex items-center">
                    <i class="fas fa-comments text-primary-600 mr-3"></i>
                    Comments (<?= $totalComments ?>)
                </h2>

                <!-- Add Comment Form -->
                <?php if ($userId || $expertId): ?>
                <div class="mb-8 glass-effect rounded-2xl p-6 border border-white/20">
                    <h3 class="text-lg font-heading font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-pen text-secondary-600 mr-2"></i>
                        Share your thoughts
                    </h3>
                    <form id="comment-form" method="POST" class="space-y-4">
                        <input type="hidden" name="action" value="add_comment">
                        <input type="hidden" name="blog_id" value="<?= $postId ?>">
                        <input type="hidden" name="ajax" value="1">
                        
                        <div>
                            <textarea name="description" id="comment-text" rows="4" 
                                     class="w-full border-2 border-gray-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300 bg-white/50 backdrop-blur-sm"
                                     placeholder="Write your comment here..." required></textarea>
                        </div>
                        
                        <div class="flex justify-end">
                            <button type="submit" 
                                    class="bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                                <i class="fas fa-paper-plane mr-2"></i>
                                Post Comment
                            </button>
                        </div>
                    </form>
                </div>
                <?php else: ?>
                <div class="mb-8 glass-effect rounded-2xl p-8 text-center border border-white/20">
                    <i class="fas fa-lock text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-600 mb-4 text-lg">Please log in to post a comment.</p>
                    <a href="login_signup.php" class="inline-block bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                        Log In
                    </a>
                </div>
                <?php endif; ?>

                <!-- Comments Display -->
                <div id="comments-container">
                    <?php if (!empty($comments)): ?>
                        <?php foreach ($comments as $comment): ?>
                        <div class="comment-item border-b border-gray-200 pb-6 mb-6 last:border-b-0" data-comment-id="<?= $comment['id'] ?>">
                            <div class="flex items-start space-x-4">
                                <div class="flex-shrink-0">
                                    <?php if ($comment['author_image']): ?>
                                        <img src="<?= htmlspecialchars($comment['author_image']) ?>" 
                                             alt="<?= htmlspecialchars($comment['author_name']) ?>" 
                                             class="w-12 h-12 rounded-2xl object-cover shadow-md">
                                    <?php else: ?>
                                        <div class="w-12 h-12 bg-gradient-to-r from-primary-400 to-secondary-400 rounded-2xl flex items-center justify-center shadow-md">
                                            <span class="text-white font-bold text-lg">
                                                <?= strtoupper(substr($comment['author_name'], 0, 1)) ?>
                                            </span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="flex-1">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center flex-wrap gap-3">
                                            <h4 class="font-heading font-semibold text-gray-900"><?= htmlspecialchars($comment['author_name']) ?></h4>
                                            <?php if ($comment['author_type'] === 'expert'): ?>
                                                <span class="bg-gradient-to-r from-success-100 to-success-200 text-success-800 px-3 py-1 rounded-full text-xs font-bold">
                                                    <i class="fas fa-check-circle mr-1"></i>Expert
                                                </span>
                                            <?php endif; ?>
                                            <span class="text-gray-500 text-sm"><?= date('M j, Y \a\t g:i A', strtotime($comment['created_at'])) ?></span>
                                        </div>
                                        
                                        <?php if (($userId && $comment['uid'] && $comment['uid'] == $userId) || ($expertId && $comment['eid'] && $comment['eid'] == $expertId)): ?>
                                        <button onclick="editComment(<?= $comment['id'] ?>)" 
                                                class="text-gray-400 hover:text-primary-600 transition-colors p-2 rounded-lg hover:bg-primary-50">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="comment-content">
                                        <p class="text-gray-700 leading-relaxed"><?= nl2br(htmlspecialchars($comment['description'])) ?></p>
                                    </div>
                                    
                                    <!-- Edit form (hidden by default) -->
                                    <div class="edit-form hidden mt-3">
                                        <form class="update-comment-form" data-comment-id="<?= $comment['id'] ?>">
                                            <input type="hidden" name="action" value="update_comment">
                                            <input type="hidden" name="comment_id" value="<?= $comment['id'] ?>">
                                            <input type="hidden" name="ajax" value="1">
                                            
                                            <textarea name="description" rows="3" 
                                                     class="w-full border-2 border-gray-200 rounded-2xl px-4 py-3 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300"
                                                     required><?= htmlspecialchars($comment['description']) ?></textarea>
                                            
                                            <div class="flex justify-end space-x-2 mt-3">
                                                <button type="button" onclick="cancelEdit(<?= $comment['id'] ?>)" 
                                                        class="px-6 py-2 text-gray-600 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                                                    Cancel
                                                </button>
                                                <button type="submit" 
                                                        class="px-6 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-semibold">
                                                    Update
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                        
                        <?php if ($totalComments > 3): ?>
                        <div class="text-center mt-8">
                            <button id="load-more-comments" 
                                    data-blog-id="<?= $postId ?>" 
                                    data-offset="3"
                                    class="glass-effect text-primary-700 px-8 py-3 rounded-xl font-semibold hover:bg-white/40 transition-all duration-300 transform hover:scale-105">
                                <i class="fas fa-chevron-down mr-2"></i>
                                Load More Comments (<?= $totalComments - 3 ?> remaining)
                            </button>
                        </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="text-center py-12">
                            <i class="fas fa-comments text-gray-200 text-7xl mb-4"></i>
                            <p class="text-gray-500 text-lg font-medium">No comments yet. Be the first to share your thoughts!</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </section>

    <!-- Related Articles -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-heading font-bold mb-4">
                    <span class="gradient-text">Related Articles</span>
                </h2>
                <p class="text-xl text-gray-600">Continue your journey toward better mental health</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <?php if (!empty($relatedPosts)): ?>
                    <?php foreach (array_slice($relatedPosts, 0, 2) as $post): ?>
                    <article class="glass-effect rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden group border border-white/20 transform hover:scale-105">
                        <div class="relative overflow-hidden">
                            <img src="<?= $post['image'] ?>" alt="<?= $post['title'] ?>" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-700">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <div class="absolute top-4 right-4">
                                <span class="glass-effect text-gray-800 px-4 py-2 rounded-full text-sm font-bold shadow-lg">
                                    <?= $post['category'] ?>
                                </span>
                            </div>
                        </div>
                        
                        <div class="p-6">
                            <div class="flex items-center flex-wrap gap-3 mb-3 text-sm text-gray-500">
                                <span class="flex items-center">
                                    <i class="fas fa-user text-primary-600 mr-1"></i>
                                    <?= $post['author'] ?>
                                </span>
                                <span>•</span>
                                <span class="flex items-center">
                                    <i class="fas fa-calendar text-secondary-600 mr-1"></i>
                                    <?= $post['date'] ?>
                                </span>
                                <span>•</span>
                                <span class="flex items-center">
                                    <i class="fas fa-clock text-accent-600 mr-1"></i>
                                    <?= $post['readTime'] ?>
                                </span>
                            </div>
                            
                            <h3 class="text-xl font-heading font-bold text-gray-900 mb-3 group-hover:text-primary-600 transition-colors">
                                <?= htmlspecialchars($post['title']) ?>
                            </h3>
                            
                            <p class="text-gray-600 mb-4 leading-relaxed"><?= htmlspecialchars(substr($post['description'], 0, 120)) ?>...</p>
                            
                            <a href="blog_details.php?id=<?= $post['id'] ?>" class="inline-flex items-center text-primary-600 font-semibold hover:text-secondary-600 transition-colors group">
                                Read More
                                <i class="fas fa-arrow-right ml-2 text-sm group-hover:translate-x-2 transition-transform duration-300"></i>
                            </a>
                        </div>
                    </article>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-span-2 text-center py-12 glass-effect rounded-3xl border border-white/20">
                        <i class="fas fa-newspaper text-gray-200 text-7xl mb-4"></i>
                        <p class="text-gray-500 text-lg mb-4">No related articles found in this category.</p>
                        <a href="blog.php" class="inline-flex items-center text-primary-600 hover:text-secondary-600 font-semibold text-lg">
                            Browse all articles
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                <?php endif; ?>
            </div>
            
            <div class="text-center mt-12">
                <a href="blog.php" class="inline-block bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-10 py-4 rounded-full font-heading font-semibold hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to All Articles
                </a>
            </div>
        </div>
    </section>

    <!-- Newsletter Signup -->
    <section class="py-16 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-primary-600 to-secondary-600 opacity-95"></div>
        <div class="absolute inset-0">
            <div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-float"></div>
            <div class="absolute bottom-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div>
        </div>
        
        <div class="relative max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
            <div class="mb-6">
                <i class="fas fa-envelope-open-text text-white text-6xl mb-4 opacity-90"></i>
            </div>
            <h2 class="text-4xl md:text-5xl font-heading font-bold text-white mb-6">Stay Updated</h2>
            <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
                Get the latest mental health tips, wellness insights, and inspiring stories delivered straight to your inbox
            </p>
            <div class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
                <input type="email" placeholder="Your email address" 
                       class="flex-1 px-6 py-4 rounded-full border-0 focus:outline-none focus:ring-4 focus:ring-white/30 shadow-lg backdrop-blur-sm bg-white/20 text-white placeholder-white/70">
                <button class="bg-white text-primary-600 px-8 py-4 rounded-full font-heading font-bold hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
                    <i class="fas fa-paper-plane mr-2"></i>
                    Subscribe
                </button>
            </div>
            <p class="text-white/80 text-sm mt-4">
                <i class="fas fa-lock mr-1"></i>
                Your privacy is important to us. Unsubscribe anytime.
            </p>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 py-16">
            <div class="grid md:grid-cols-4 gap-8">
                <div class="space-y-6">
                    <div class="flex items-center space-x-3">
                        <img src="resources/soullift-logo.svg" alt="Soullift Logo" class="w-10 h-10">
                        <span class="text-2xl font-heading font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent">
                            Soullift
                        </span>
                    </div>
                    <p class="text-gray-400 leading-relaxed">
                        Providing compassionate mental health support and counseling services to help you live a more fulfilling life.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
                            <i class="fab fa-facebook text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-secondary-600 rounded-full flex items-center justify-center hover:bg-secondary-700 transition-colors">
                            <i class="fab fa-instagram text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
                            <i class="fab fa-twitter text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-accent-600 rounded-full flex items-center justify-center hover:bg-accent-700 transition-colors">
                            <i class="fab fa-linkedin text-white"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Quick Links</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="Homepage.php" class="hover:text-primary-400 transition-colors">Home</a></li>
                        <li><a href="services.php" class="hover:text-primary-400 transition-colors">Services</a></li>
                        <li><a href="experts.php" class="hover:text-primary-400 transition-colors">Therapists</a></li>
                        <li><a href="courses.php" class="hover:text-primary-400 transition-colors">Resources</a></li>
                        <li><a href="blog.php" class="hover:text-primary-400 transition-colors">Blog</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Support</h3>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="mailto:info@soullift.com" class="hover:text-primary-400 transition-colors">Email Support</a></li>
                        <li><a href="tel:+15551234567" class="hover:text-primary-400 transition-colors">Emergency Hotline</a></li>
                        <li><span class="text-gray-500">Crisis Support: 24/7</span></li>
                        <li><a href="#" class="hover:text-primary-400 transition-colors">FAQs</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-heading text-lg font-semibold mb-6 text-white">Newsletter</h3>
                    <p class="text-gray-400 mb-4">Subscribe for mental health tips and updates.</p>
                    <div class="space-y-3">
                        <input type="email" placeholder="Your email address" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                        <button class="w-full bg-gradient-to-r from-primary-600 to-secondary-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                            Subscribe
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <p class="text-gray-400 text-center md:text-left">
                        &copy; <?php echo date("Y"); ?> Soullift. All rights reserved. | Mental wellness for everyone
                    </p>
                    <div class="flex space-x-6 text-sm text-gray-400">
                        <a href="#" class="hover:text-primary-400 transition-colors">Privacy Policy</a>
                        <a href="#" class="hover:text-primary-400 transition-colors">Terms of Service</a>
                        <a href="#" class="hover:text-primary-400 transition-colors">Cookie Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript for Like Button -->
    <script>
        // Set PHP variables for JavaScript
        const blogId = <?= $postId ?>;
        const currentUserId = <?= $userId ?: 'null' ?>;
        const currentExpertId = <?= $expertId ?: 'null' ?>;
        const totalCommentsCount = <?= $totalComments ?>;
        
        // Debug info
        console.log('Debug Info:');
        console.log('Blog ID:', blogId);
        console.log('Current User ID:', currentUserId);
        console.log('Current Expert ID:', currentExpertId);
        console.log('Total Comments:', totalCommentsCount);
        
        // Comment functionality
        document.addEventListener('DOMContentLoaded', function() {
            // Handle comment form submission
            const commentForm = document.getElementById('comment-form');
            if (commentForm) {
                commentForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const formData = new FormData(this);
                    const submitBtn = this.querySelector('button[type="submit"]');
                    const originalText = submitBtn.innerHTML;
                    
                    // Disable button and show loading
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Posting...';
                    
                    fetch(window.location.href, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('HTTP error! status: ' + response.status);
                        }
                        return response.text();
                    })
                    .then(text => {
                        try {
                            const data = JSON.parse(text);
                            if (data.success) {
                                // Clear the form
                                document.getElementById('comment-text').value = '';
                                
                                // Show success message
                                showNotification(data.message, 'success');
                                
                                // Reload page to show new comment
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                showNotification(data.message, 'error');
                            }
                        } catch (e) {
                            // If not JSON, show the raw error
                            console.error('Response was not JSON:', text.substring(0, 500));
                            showNotification('Server error: ' + text.substring(0, 100), 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Fetch error:', error);
                        showNotification('Network error: ' + error.message, 'error');
                    })
                    .finally(() => {
                        // Re-enable button
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    });
                });
            }
            
            // Handle update comment forms
            const updateForms = document.querySelectorAll('.update-comment-form');
            updateForms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const formData = new FormData(this);
                    const commentId = this.dataset.commentId;
                    const submitBtn = this.querySelector('button[type="submit"]');
                    const originalText = submitBtn.innerHTML;
                    
                    // Disable button and show loading
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Updating...';
                    
                    fetch('blog_details.php?id=' + blogId, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification(data.message, 'success');
                            
                            // Update the comment content
                            const commentItem = document.querySelector(`[data-comment-id="${commentId}"]`);
                            const commentContent = commentItem.querySelector('.comment-content p');
                            const newText = formData.get('description');
                            commentContent.innerHTML = newText.replace(/\n/g, '<br>');
                            
                            // Hide edit form
                            cancelEdit(commentId);
                        } else {
                            showNotification(data.message, 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showNotification('Network error. Please try again.', 'error');
                    })
                    .finally(() => {
                        // Re-enable button
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    });
                });
            });
            
            // Handle load more comments
            const loadMoreBtn = document.getElementById('load-more-comments');
            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function() {
                    const loadBlogId = this.dataset.blogId;
                    const offset = parseInt(this.dataset.offset);
                    const originalText = this.innerHTML;
                    
                    // Show loading
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading...';
                    
                    const formData = new FormData();
                    formData.append('action', 'load_more_comments');
                    formData.append('blog_id', loadBlogId);
                    formData.append('offset', offset);
                    formData.append('ajax', '1');
                    
                    fetch('blog_details.php?id=' + loadBlogId, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.comments) {
                            const commentsContainer = document.getElementById('comments-container');
                            const loadMoreContainer = this.parentElement;
                            
                            // Add new comments before the load more button
                            data.comments.forEach(comment => {
                                const commentHtml = createCommentHTML(comment);
                                loadMoreContainer.insertAdjacentHTML('beforebegin', commentHtml);
                            });
                            
                            // Update offset
                            const newOffset = offset + 3;
                            this.dataset.offset = newOffset;
                            
                            // Update remaining count
                            const remaining = totalCommentsCount - newOffset;
                            
                            if (remaining <= 0) {
                                // Hide load more button if no more comments
                                loadMoreContainer.style.display = 'none';
                            } else {
                                // Update button text
                                this.innerHTML = `<i class="fas fa-chevron-down mr-2"></i>Load More Comments (${remaining} remaining)`;
                            }
                        } else {
                            showNotification('Failed to load more comments.', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showNotification('Network error. Please try again.', 'error');
                    })
                    .finally(() => {
                        // Re-enable button
                        this.disabled = false;
                        if (this.innerHTML.includes('Loading...')) {
                            this.innerHTML = originalText;
                        }
                    });
                });
            }
        });
        
        // Edit comment function
        function editComment(commentId) {
            const commentItem = document.querySelector(`[data-comment-id="${commentId}"]`);
            const commentContent = commentItem.querySelector('.comment-content');
            const editForm = commentItem.querySelector('.edit-form');
            
            commentContent.style.display = 'none';
            editForm.classList.remove('hidden');
        }
        
        // Cancel edit function
        function cancelEdit(commentId) {
            const commentItem = document.querySelector(`[data-comment-id="${commentId}"]`);
            const commentContent = commentItem.querySelector('.comment-content');
            const editForm = commentItem.querySelector('.edit-form');
            
            commentContent.style.display = 'block';
            editForm.classList.add('hidden');
        }
        
        // Create comment HTML for dynamic loading
        function createCommentHTML(comment) {
            const authorImage = comment.author_image ? 
                `<img src="${comment.author_image}" alt="${comment.author_name}" class="w-12 h-12 rounded-2xl object-cover shadow-md">` :
                `<div class="w-12 h-12 bg-gradient-to-r from-primary-400 to-secondary-400 rounded-2xl flex items-center justify-center shadow-md">
                    <span class="text-white font-bold text-lg">${comment.author_name.charAt(0).toUpperCase()}</span>
                </div>`;
            
            const expertBadge = comment.author_type === 'expert' ? 
                '<span class="bg-gradient-to-r from-success-100 to-success-200 text-success-800 px-3 py-1 rounded-full text-xs font-bold"><i class="fas fa-check-circle mr-1"></i>Expert</span>' : '';
            
            const createdAt = new Date(comment.created_at).toLocaleDateString('en-US', {
                month: 'short', 
                day: 'numeric', 
                year: 'numeric',
                hour: 'numeric',
                minute: '2-digit'
            });
            
            const canEdit = (currentUserId && comment.uid == currentUserId) || 
                           (currentExpertId && comment.eid == currentExpertId);
            
            const editButton = canEdit ? 
                `<button onclick="editComment(${comment.id})" class="text-gray-400 hover:text-primary-600 transition-colors p-2 rounded-lg hover:bg-primary-50">
                    <i class="fas fa-edit"></i>
                </button>` : '';
            
            return `
                <div class="comment-item border-b border-gray-200 pb-6 mb-6" data-comment-id="${comment.id}">
                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0">
                            ${authorImage}
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center flex-wrap gap-3">
                                    <h4 class="font-heading font-semibold text-gray-900">${comment.author_name}</h4>
                                    ${expertBadge}
                                    <span class="text-gray-500 text-sm">${createdAt}</span>
                                </div>
                                ${editButton}
                            </div>
                            <div class="comment-content">
                                <p class="text-gray-700 leading-relaxed">${comment.description.replace(/\n/g, '<br>')}</p>
                            </div>
                            <div class="edit-form hidden mt-3">
                                <form class="update-comment-form" data-comment-id="${comment.id}">
                                    <input type="hidden" name="action" value="update_comment">
                                    <input type="hidden" name="comment_id" value="${comment.id}">
                                    <input type="hidden" name="ajax" value="1">
                                    <textarea name="description" rows="3" class="w-full border-2 border-gray-200 rounded-2xl px-4 py-3 focus:outline-none focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-300" required>${comment.description}</textarea>
                                    <div class="flex justify-end space-x-2 mt-3">
                                        <button type="button" onclick="cancelEdit(${comment.id})" class="px-6 py-2 text-gray-600 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors font-medium">Cancel</button>
                                        <button type="submit" class="px-6 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-semibold">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        // Show notification function
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
                type === 'success' ? 'bg-green-500' : 
                type === 'error' ? 'bg-red-500' : 'bg-blue-500'
            } text-white`;
            notification.textContent = message;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        // Like functionality (existing code)
        document.addEventListener('DOMContentLoaded', function() {
            const likeBtn = document.getElementById('like-btn');
            const likeText = document.getElementById('like-text');
            const likeCount = document.getElementById('like-count');
            const heartIcon = likeBtn.querySelector('i.fas.fa-heart');
            
            likeBtn.addEventListener('click', function() {
                const blogId = this.getAttribute('data-blog-id');
                const isLiked = this.getAttribute('data-liked') === 'true';
                
                // Disable button during request
                likeBtn.disabled = true;
                likeBtn.style.opacity = '0.6';
                
                // Send AJAX request
                fetch('toggle_like.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        blog_id: parseInt(blogId)
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update button state
                        const newIsLiked = data.liked;
                        likeBtn.setAttribute('data-liked', newIsLiked);
                        
                        if (newIsLiked) {
                            // Liked state
                            likeBtn.className = 'flex items-center space-x-2 px-6 py-3 rounded-full transition-all duration-300 transform hover:scale-105 bg-red-100 text-red-700 hover:bg-red-200';
                            heartIcon.className = 'fas fa-heart text-red-600';
                            likeText.textContent = 'Liked';
                        } else {
                            // Unliked state
                            likeBtn.className = 'flex items-center space-x-2 px-6 py-3 rounded-full transition-all duration-300 transform hover:scale-105 glass-effect text-primary-700 hover:bg-white/40';
                            heartIcon.className = 'fas fa-heart';
                            likeText.textContent = 'Like';
                        }
                        
                        // Update like count
                        likeCount.textContent = data.like_count;
                        
                        // Add animation effect
                        heartIcon.style.transform = 'scale(1.2)';
                        setTimeout(() => {
                            heartIcon.style.transform = 'scale(1)';
                        }, 200);
                        
                    } else {
                        // Show error message
                        if (data.error === 'User not logged in') {
                            alert('Please log in to like this article.');
                        } else {
                            alert('Error: ' + (data.error || 'Failed to toggle like'));
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Network error. Please try again.');
                })
                .finally(() => {
                    // Re-enable button
                    likeBtn.disabled = false;
                    likeBtn.style.opacity = '1';
                });
            });
        });
        
        // Mobile menu toggle function
        function toggleMobileMenu() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        }
    </script>
</body>
</html>