shubraVeil/js/comments.js

// نظام التعليقات
class CommentSystem {
    constructor() {
        this.commentForm = document.getElementById('comment-form');
        this.commentsContainer = document.getElementById('comments-container');
        this.replyButtons = document.querySelectorAll('.reply-btn');
        
        this.initializeEventListeners();
    }

    initializeEventListeners() {
        // معالجة إضافة تعليق جديد
        this.commentForm?.addEventListener('submit', (e) => this.handleNewComment(e));
        
        // معالجة أزرار الرد
        this.replyButtons.forEach(button => {
            button.addEventListener('click', () => this.handleReply(button));
        });

        // معالجة أزرار الإعجاب
        document.querySelectorAll('.like-btn').forEach(button => {
            button.addEventListener('click', () => this.handleLike(button));
        });
    }

    async handleNewComment(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        
        try {
            const response = await fetch('/api/comments.php', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) throw new Error('فشل إضافة التعليق');

            const comment = await response.json();
            this.addCommentToDOM(comment);
            e.target.reset();
        } catch (error) {
            console.error('Comment error:', error);
            alert('حدث خطأ أثناء إضافة التعليق');
        }
    }

    handleReply(button) {
        const commentId = button.dataset.commentId;
        const replyForm = document.querySelector(`.reply-form[data-comment-id="${commentId}"]`);
        
        // إظهار/إخفاء نموذج الرد
        if (replyForm) {
            replyForm.classList.toggle('active');
        }
    }

    async handleLike(button) {
        const commentId = button.dataset.commentId;
        const likeCount = button.querySelector('.like-count');
        
        try {
            const response = await fetch('/api/like-comment.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ commentId })
            });

            if (!response.ok) throw new Error('فشل تسجيل الإعجاب');

            const data = await response.json();
            likeCount.textContent = data.likes;
            button.classList.toggle('liked');
        } catch (error) {
            console.error('Like error:', error);
        }
    }

    addCommentToDOM(comment) {
        const commentElement = document.createElement('div');
        commentElement.className = 'comment';
        commentElement.innerHTML = `
            <div class="comment-header">
                <img src="${comment.userAvatar}" alt="${comment.userName}" class="user-avatar">
                <div class="comment-info">
                    <h4>${comment.userName}</h4>
                    <span class="comment-date">${comment.date}</span>
                </div>
            </div>
            <div class="comment-content">
                <p>${comment.content}</p>
            </div>
            <div class="comment-actions">
                <button class="like-btn" data-comment-id="${comment.id}">
                    <i class="far fa-heart"></i>
                    <span class="like-count">0</span>
                </button>
                <button class="reply-btn" data-comment-id="${comment.id}">
                    <i class="far fa-comment"></i> رد
                </button>
            </div>
            <div class="reply-form" data-comment-id="${comment.id}">
                <form>
                    <textarea placeholder="اكتب ردك هنا..."></textarea>
                    <button type="submit" class="btn">إرسال الرد</button>
                </form>
            </div>
        `;

        this.commentsContainer.prepend(commentElement);
    }
}

// تهيئة نظام التعليقات
document.addEventListener('DOMContentLoaded', () => {
    new CommentSystem();
});