<?php
require_once '../includes/functions.php';
require_once '../includes/header.php';


// Get product ID from URL
$product_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

// Get product details
$product = getProductById($pdo, $product_id);

if (!$product) {
    redirect(SITE_URL . '/products/index.php');
}

// Check if product is favorited
$is_favorited = false;
if (isLoggedIn()) {
    $is_favorited = isProductFavorited($pdo, $_SESSION['user_id'], $product_id);
}

// Handle add to cart
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isLoggedIn()) {
    $quantity = isset($_POST['quantity']) ? intval($_POST['quantity']) : 1;
    
    if (addToCartDB($pdo, $_SESSION['user_id'], $product_id, $quantity)) {
        // Also update localStorage
        echo '<script>
            // Update cart in localStorage to sync with database
            let cart = JSON.parse(localStorage.getItem("cart")) || [];
            const existingItem = cart.find(item => item.id === ' . $product_id . ');
            if (existingItem) {
                existingItem.quantity += ' . $quantity . ';
            } else {
                cart.push({
                    id: ' . $product_id . ',
                    name: "' . htmlspecialchars($product['name']) . '",
                    price: ' . $product['price'] . ',
                    image: "' . (!empty($product['image']) ? (SITE_URL . '/' . htmlspecialchars($product['image'])) : '') . '",
                    quantity: ' . $quantity . '
                });
            }
            localStorage.setItem("cart", JSON.stringify(cart));
            updateCartCount();
        </script>';
        $message = '<div class="message success">تمت إضافة المنتج إلى سلة التسوق بنجاح.</div>';
    } else {
        $message = '<div class="message error">خطأ في إضافة المنتج إلى سلة التسوق.</div>';
    }
}

// Get product comments
$comments = [];
if ($pdo) {
    $comments = getProductComments($pdo, $product_id);
}
?>

<div class="container">
    <div class="product-detail">
        <div class="product-image-large">
            <?php if (!empty($product['image'])): ?>
                <img src="<?php echo SITE_URL . '/' . htmlspecialchars($product['image']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
            <?php else: ?>
                <i class="fas fa-image" style="font-size: 8rem; color: #ccc;"></i>
            <?php endif; ?>
            <?php if (isLoggedIn()): ?>
                <button class="favorite-btn <?php echo $is_favorited ? 'active' : ''; ?>" data-product-id="<?php echo $product['id']; ?>" style="position: absolute; top: 10px; right: 10px; z-index: 10;">
                    <i class="fas fa-heart"></i>
                </button>
            <?php endif; ?>
        </div>
        
        <div class="product-info-large">
            <h1><?php echo htmlspecialchars($product['name']); ?></h1>
            <div class="product-price-large">$<?php echo number_format($product['price'], 2); ?></div>
            <div class="product-category">التصنيف: <?php echo htmlspecialchars(translateCategoryToArabic($product['category'])); ?></div>
            <div class="product-description">
                <?php echo htmlspecialchars($product['description']); ?>
            </div>
            
            <?php if (isLoggedIn()): ?>
                <?php echo $message ?? ''; ?>
                <form method="POST" action="">
                    <div class="form-group">
                        <label for="quantity">كمية:</label>
                        <input type="number" id="quantity" name="quantity" min="1" value="1" style="width: 80px;">
                    </div>
                    <button type="submit" class="btn btn-primary btn-large">أضف إلى السلة</button>
                </form>
            <?php else: ?>
                <<p><a href="<?php echo SITE_URL; ?>/auth/login.php" class="btn btn-primary btn-large">Login to Purchase</a></p>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Comments Section -->
    <div class="product-comments-section">
        <h2>التعليقات</h2>
        
        <!-- Add Comment Form -->
        <?php if (isLoggedIn()): ?>
            <div class="add-comment-form">
                <form id="add-comment-form">
                    <input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
                    <div class="form-group">
                        <textarea name="comment" id="comment-textarea" placeholder="اكتب تعليقك هنا... يمكنك استخدام الإيموجيات 😊👍🎉" rows="4" maxlength="500"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">نشر التعليق</button>
                    <div id="comment-message" class="message" style="display: none;"></div>
                </form>
            </div>
        <?php else: ?>
            <div class="login-to-comment">
                <i class="fas fa-comment-alt"></i>
                <h3>انضم إلى النقاش</h3>
                <p>سجّل الدخول لإضافة تعليقك والمشاركة في النقاش</p>
                <a href="<?php echo SITE_URL; ?>/auth/login.php" class="btn btn-secondary">سجّل الدخول الآن</a>
            </div>
        <?php endif; ?>
        
        <!-- Comments List -->
        <div class="comments-list" id="comments-list">
            <?php if (!empty($comments)): ?>
                <?php foreach ($comments as $comment): ?>
                    <div class="comment-item" data-comment-id="<?php echo $comment['id']; ?>">
                        <div class="comment-header">
                            <span class="comment-author"><?php echo htmlspecialchars($comment['username']); ?></span>
                            <span class="comment-time"><?php echo formatTimeAgo($comment['created_at']); ?></span>
                            <?php if (isLoggedIn() && $comment['user_id'] == $_SESSION['user_id']): ?>
                                <div class="comment-actions">
                                    <button class="btn-edit-comment" data-comment-id="<?php echo $comment['id']; ?>">تعديل</button>
                                    <button class="btn-delete-comment" data-comment-id="<?php echo $comment['id']; ?>">حذف</button>
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="comment-content">
                            <div class="comment-text" id="comment-text-<?php echo $comment['id']; ?>">
                                <?php echo htmlspecialchars($comment['comment'], ENT_QUOTES, 'UTF-8'); ?>
                            </div>
                            <?php if (isLoggedIn() && $comment['user_id'] == $_SESSION['user_id']): ?>
                                <div class="edit-comment-form" id="edit-comment-form-<?php echo $comment['id']; ?>" style="display: none;">
                                    <textarea class="edit-comment-textarea" rows="4" maxlength="500"><?php echo htmlspecialchars($comment['comment']); ?></textarea>
                                    <div class="edit-comment-actions">
                                        <button class="btn btn-primary btn-save-comment" data-comment-id="<?php echo $comment['id']; ?>">حفظ</button>
                                        <button class="btn btn-secondary btn-cancel-edit" data-comment-id="<?php echo $comment['id']; ?>">إلغاء</button>
                                    </div>
                                    <div class="edit-comment-message" id="edit-comment-message-<?php echo $comment['id']; ?>" style="display: none;"></div>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="no-comments">
                    <i class="far fa-comments"></i>
                    <h3>لا توجد تعليقات حتى الآن</h3>
                    <p>كن أول من يشارك رأيه ويساهم في النقاش حول هذا المنتج</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if (isLoggedIn()): ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const commentForm = document.getElementById('add-comment-form');
    if (commentForm) {
        commentForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const messageDiv = document.getElementById('comment-message');
            const submitButton = this.querySelector('button[type="submit"]');
            
            // Simple validation
            const commentText = formData.get('comment').trim();
            if (!commentText) {
                showMessage(messageDiv, 'التعليق لا يمكن أن يكون فارغاً.', 'error');
                return;
            }
            
            if (commentText.length > 500) {
                showMessage(messageDiv, 'التعليق طويل جداً. الحد الأقصى هو 500 حرف.', 'error');
                return;
            }
            
            // Add loading state to button
            const originalButtonText = submitButton.textContent;
            submitButton.textContent = 'جارٍ النشر...';
            submitButton.disabled = true;
            
            // Submit via AJAX
            fetch('<?php echo SITE_URL; ?>/products/add_comment.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Clear the form
                    document.getElementById('comment-textarea').value = '';
                    
                    // Show success message
                    showMessage(messageDiv, data.message, 'success');
                    
                    // Add the new comment to the list if available
                    if (data.comment) {
                        addCommentToList(data.comment);
                    }
                    
                    // Add a subtle animation to the textarea
                    const textarea = document.getElementById('comment-textarea');
                    textarea.style.backgroundColor = '#e8f5e9';
                    textarea.style.transition = 'background-color 0.5s ease';
                    
                    setTimeout(() => {
                        textarea.style.backgroundColor = '';
                    }, 2000);
                } else {
                    // Show error message
                    showMessage(messageDiv, data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage(messageDiv, 'حدث خطأ أثناء إرسال التعليق. يرجى المحاولة مرة أخرى.', 'error');
            })
            .finally(() => {
                // Restore button state
                submitButton.textContent = originalButtonText;
                submitButton.disabled = false;
            });
        });
    }
    
    // Edit comment buttons
    document.querySelectorAll('.btn-edit-comment').forEach(button => {
        button.addEventListener('click', function() {
            const commentId = this.getAttribute('data-comment-id');
            const commentTextElement = document.getElementById('comment-text-' + commentId);
            const editFormElement = document.getElementById('edit-comment-form-' + commentId);
            
            // Add animation effect
            commentTextElement.style.opacity = '0';
            commentTextElement.style.transform = 'translateX(-10px)';
            commentTextElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            
            setTimeout(() => {
                commentTextElement.style.display = 'none';
                editFormElement.style.display = 'block';
                editFormElement.style.opacity = '0';
                editFormElement.style.transform = 'translateX(10px)';
                editFormElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                
                // Trigger the animation
                setTimeout(() => {
                    editFormElement.style.opacity = '1';
                    editFormElement.style.transform = 'translateX(0)';
                }, 10);
            }, 300);
        });
    });
    
    // Cancel edit buttons
    document.querySelectorAll('.btn-cancel-edit').forEach(button => {
        button.addEventListener('click', function() {
            const commentId = this.getAttribute('data-comment-id');
            const commentTextElement = document.getElementById('comment-text-' + commentId);
            const editFormElement = document.getElementById('edit-comment-form-' + commentId);
            const messageElement = document.getElementById('edit-comment-message-' + commentId);
            
            // Add animation effect
            editFormElement.style.opacity = '0';
            editFormElement.style.transform = 'translateX(10px)';
            editFormElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            
            setTimeout(() => {
                editFormElement.style.display = 'none';
                commentTextElement.style.display = 'block';
                commentTextElement.style.opacity = '0';
                commentTextElement.style.transform = 'translateX(-10px)';
                commentTextElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                messageElement.style.display = 'none';
                
                // Trigger the animation
                setTimeout(() => {
                    commentTextElement.style.opacity = '1';
                    commentTextElement.style.transform = 'translateX(0)';
                }, 10);
            }, 300);
        });
    });
    
    // Save comment buttons
    document.querySelectorAll('.btn-save-comment').forEach(button => {
        button.addEventListener('click', function() {
            const commentId = this.getAttribute('data-comment-id');
            const commentText = document.querySelector('#edit-comment-form-' + commentId + ' .edit-comment-textarea').value.trim();
            const messageDiv = document.getElementById('edit-comment-message-' + commentId);
            
            // Simple validation
            if (!commentText) {
                showMessage(messageDiv, 'التعليق لا يمكن أن يكون فارغاً.', 'error');
                return;
            }
            
            if (commentText.length > 500) {
                showMessage(messageDiv, 'التعليق طويل جداً. الحد الأقصى هو 500 حرف.', 'error');
                return;
            }
            
            // Add loading state to button
            const originalButtonText = this.textContent;
            this.textContent = 'جارٍ الحفظ...';
            this.disabled = true;
            
            // Submit via AJAX
            const formData = new FormData();
            formData.append('comment_id', commentId);
            formData.append('comment', commentText);
            
            fetch('<?php echo SITE_URL; ?>/products/update_comment.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update the comment text
                    document.getElementById('comment-text-' + commentId).innerHTML = data.comment ? data.comment.comment : commentText;
                    document.getElementById('comment-text-' + commentId).style.display = 'block';
                    document.getElementById('edit-comment-form-' + commentId).style.display = 'none';
                    
                    // Add a subtle success animation
                    const commentTextElement = document.getElementById('comment-text-' + commentId);
                    commentTextElement.style.backgroundColor = '#e8f5e9';
                    commentTextElement.style.transition = 'background-color 0.5s ease';
                    
                    setTimeout(() => {
                        commentTextElement.style.backgroundColor = '';
                    }, 2000);
                    
                    // Show success message
                    showMessage(messageDiv, data.message, 'success');
                    
                    // Hide message after 3 seconds
                    setTimeout(() => {
                        messageDiv.style.display = 'none';
                    }, 3000);
                } else {
                    // Show error message
                    showMessage(messageDiv, data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage(messageDiv, 'حدث خطأ أثناء تحديث التعليق. يرجى المحاولة مرة أخرى.', 'error');
            })
            .finally(() => {
                // Restore button state
                this.textContent = originalButtonText;
                this.disabled = false;
            });
        });
    });
    
    // Delete comment buttons
    document.querySelectorAll('.btn-delete-comment').forEach(button => {
        button.addEventListener('click', function() {
            const commentId = this.getAttribute('data-comment-id');
            
            if (confirm('هل أنت متأكد أنك تريد حذف هذا التعليق؟')) {
                // Get the comment element for animation
                const commentElement = document.querySelector('.comment-item[data-comment-id="' + commentId + '"]');
                
                // Add a deletion animation
                if (commentElement) {
                    commentElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    commentElement.style.opacity = '0';
                    commentElement.style.transform = 'translateX(20px)';
                }
                
                // Submit via AJAX
                const formData = new FormData();
                formData.append('comment_id', commentId);
                
                fetch('<?php echo SITE_URL; ?>/products/delete_comment.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove the comment from the list after animation
                        setTimeout(() => {
                            if (commentElement) {
                                commentElement.remove();
                            }
                        }, 300);
                        
                        // Show success message
                        const messageDiv = document.getElementById('comment-message');
                        showMessage(messageDiv, data.message, 'success');
                        
                        // Hide message after 3 seconds
                        setTimeout(() => {
                            messageDiv.style.display = 'none';
                        }, 3000);
                    } else {
                        // Revert animation and show error message
                        if (commentElement) {
                            commentElement.style.opacity = '1';
                            commentElement.style.transform = 'translateX(0)';
                        }
                        const messageDiv = document.getElementById('comment-message');
                        showMessage(messageDiv, data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Revert animation and show error message
                    if (commentElement) {
                        commentElement.style.opacity = '1';
                        commentElement.style.transform = 'translateX(0)';
                    }
                    const messageDiv = document.getElementById('comment-message');
                    showMessage(messageDiv, 'حدث خطأ أثناء حذف التعليق. يرجى المحاولة مرة أخرى.', 'error');
                });
            }
        });
    });
});

function showMessage(element, message, type) {
    element.textContent = message;
    element.className = 'message ' + type;
    element.style.display = 'block';
    
    // Hide message after 5 seconds
    setTimeout(() => {
        element.style.display = 'none';
    }, 5000);
}

function addCommentToList(comment) {
    const commentsList = document.getElementById('comments-list');
    
    // Create comment element
    const commentElement = document.createElement('div');
    commentElement.className = 'comment-item';
    commentElement.setAttribute('data-comment-id', comment.id);
    commentElement.innerHTML = `
        <div class="comment-header">
            <span class="comment-author">${comment.username}</span>
            <span class="comment-time">الآن</span>
            <div class="comment-actions">
                <button class="btn-edit-comment" data-comment-id="${comment.id}">تعديل</button>
                <button class="btn-delete-comment" data-comment-id="${comment.id}">حذف</button>
            </div>
        </div>
        <div class="comment-content">
            <div class="comment-text" id="comment-text-${comment.id}">
                ${comment.comment}
            </div>
            <div class="edit-comment-form" id="edit-comment-form-${comment.id}" style="display: none;">
                <textarea class="edit-comment-textarea" rows="4" maxlength="500">${comment.comment}</textarea>
                <div class="edit-comment-actions">
                    <button class="btn btn-primary btn-save-comment" data-comment-id="${comment.id}">حفظ</button>
                    <button class="btn btn-secondary btn-cancel-edit" data-comment-id="${comment.id}">إلغاء</button>
                </div>
                <div class="edit-comment-message" id="edit-comment-message-${comment.id}" style="display: none;"></div>
            </div>
        </div>
    `;
    
    // Add a subtle animation when adding new comment
    commentElement.style.opacity = '0';
    commentElement.style.transform = 'translateY(-10px)';
    commentElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
    
    // Add event listeners to the new buttons
    const editButton = commentElement.querySelector('.btn-edit-comment');
    editButton.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        const commentTextElement = document.getElementById('comment-text-' + commentId);
        const editFormElement = document.getElementById('edit-comment-form-' + commentId);
        
        // Add animation effect
        commentTextElement.style.opacity = '0';
        commentTextElement.style.transform = 'translateX(-10px)';
        commentTextElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
        
        setTimeout(() => {
            commentTextElement.style.display = 'none';
            editFormElement.style.display = 'block';
            editFormElement.style.opacity = '0';
            editFormElement.style.transform = 'translateX(10px)';
            editFormElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            
            // Trigger the animation
            setTimeout(() => {
                editFormElement.style.opacity = '1';
                editFormElement.style.transform = 'translateX(0)';
            }, 10);
        }, 300);
    });
    
    const cancelButton = commentElement.querySelector('.btn-cancel-edit');
    cancelButton.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        const commentTextElement = document.getElementById('comment-text-' + commentId);
        const editFormElement = document.getElementById('edit-comment-form-' + commentId);
        const messageElement = document.getElementById('edit-comment-message-' + commentId);
        
        // Add animation effect
        editFormElement.style.opacity = '0';
        editFormElement.style.transform = 'translateX(10px)';
        editFormElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
        
        setTimeout(() => {
            editFormElement.style.display = 'none';
            commentTextElement.style.display = 'block';
            commentTextElement.style.opacity = '0';
            commentTextElement.style.transform = 'translateX(-10px)';
            commentTextElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            messageElement.style.display = 'none';
            
            // Trigger the animation
            setTimeout(() => {
                commentTextElement.style.opacity = '1';
                commentTextElement.style.transform = 'translateX(0)';
            }, 10);
        }, 300);
    });
    
    const saveButton = commentElement.querySelector('.btn-save-comment');
    saveButton.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        const commentText = document.querySelector('#edit-comment-form-' + commentId + ' .edit-comment-textarea').value.trim();
        const messageDiv = document.getElementById('edit-comment-message-' + commentId);
        
        // Simple validation
        if (!commentText) {
            showMessage(messageDiv, 'التعليق لا يمكن أن يكون فارغاً.', 'error');
            return;
        }
        
        if (commentText.length > 500) {
            showMessage(messageDiv, 'التعليق طويل جداً. الحد الأقصى هو 500 حرف.', 'error');
            return;
        }
        
        // Add loading state to button
        const originalButtonText = saveButton.textContent;
        saveButton.textContent = 'جارٍ الحفظ...';
        saveButton.disabled = true;
        
        // Submit via AJAX
        const formData = new FormData();
        formData.append('comment_id', commentId);
        formData.append('comment', commentText);
        
        fetch('<?php echo SITE_URL; ?>/products/update_comment.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update the comment text
                document.getElementById('comment-text-' + commentId).innerHTML = data.comment ? data.comment.comment : commentText;
                document.getElementById('comment-text-' + commentId).style.display = 'block';
                document.getElementById('edit-comment-form-' + commentId).style.display = 'none';
                
                // Add a subtle success animation
                const commentTextElement = document.getElementById('comment-text-' + commentId);
                commentTextElement.style.backgroundColor = '#e8f5e9';
                commentTextElement.style.transition = 'background-color 0.5s ease';
                
                setTimeout(() => {
                    commentTextElement.style.backgroundColor = '';
                }, 2000);
                
                // Show success message
                showMessage(messageDiv, data.message, 'success');
                
                // Hide message after 3 seconds
                setTimeout(() => {
                    messageDiv.style.display = 'none';
                }, 3000);
            } else {
                // Show error message
                showMessage(messageDiv, data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showMessage(messageDiv, 'حدث خطأ أثناء تحديث التعليق. يرجى المحاولة مرة أخرى.', 'error');
        })
        .finally(() => {
            // Restore button state
            saveButton.textContent = originalButtonText;
            saveButton.disabled = false;
        });
    });
    
    const deleteButton = commentElement.querySelector('.btn-delete-comment');
    deleteButton.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        
        if (confirm('هل أنت متأكد أنك تريد حذف هذا التعليق؟')) {
            // Get the comment element for animation
            const commentElement = document.querySelector('.comment-item[data-comment-id="' + commentId + '"]');
            
            // Add a deletion animation
            if (commentElement) {
                commentElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                commentElement.style.opacity = '0';
                commentElement.style.transform = 'translateX(20px)';
            }
            
            // Submit via AJAX
            const formData = new FormData();
            formData.append('comment_id', commentId);
            
            fetch('<?php echo SITE_URL; ?>/products/delete_comment.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Remove the comment from the list after animation
                    setTimeout(() => {
                        if (commentElement) {
                            commentElement.remove();
                        }
                    }, 300);
                    
                    // Show success message
                    const messageDiv = document.getElementById('comment-message');
                    showMessage(messageDiv, data.message, 'success');
                    
                    // Hide message after 3 seconds
                    setTimeout(() => {
                        messageDiv.style.display = 'none';
                    }, 3000);
                } else {
                    // Revert animation and show error message
                    if (commentElement) {
                        commentElement.style.opacity = '1';
                        commentElement.style.transform = 'translateX(0)';
                    }
                    const messageDiv = document.getElementById('comment-message');
                    showMessage(messageDiv, data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Revert animation and show error message
                if (commentElement) {
                    commentElement.style.opacity = '1';
                    commentElement.style.transform = 'translateX(0)';
                }
                const messageDiv = document.getElementById('comment-message');
                showMessage(messageDiv, 'حدث خطأ أثناء حذف التعليق. يرجى المحاولة مرة أخرى.', 'error');
            });
        }
    });
    
    // Add to the top of the list (newest first)
    commentsList.insertBefore(commentElement, commentsList.firstChild);
    
    // Trigger the animation after a short delay
    setTimeout(() => {
        commentElement.style.opacity = '1';
        commentElement.style.transform = 'translateY(0)';
    }, 10);
    
    // If there was a "no comments" message, remove it
    const noCommentsMsg = commentsList.querySelector('.no-comments');
    if (noCommentsMsg) {
        noCommentsMsg.remove();
    }
}
</script>
<?php endif; ?>

<?php require_once '../includes/footer.php'; ?>