comment section in moderation portal

public/admin.php

@@ -57,6 +57,7 @@ $stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
 $stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
 $municipality = $stmt->fetch();
 
+
 // Loads News for Moderation
 $stmt = $pdo->prepare("
     SELECT news_id, title, content, author_name, published_at, created_at
@@ -67,6 +68,20 @@ $stmt = $pdo->prepare("
 $stmt->execute([':mid' => $municipality['municipality_id']]);
 $news_items = $stmt->fetchAll();
 
+
+// Loads Comments with Contribution for Moderation
+$stmt = $pdo->prepare("
+    SELECT cm.comment_id, cm.contribution_id, cm.author_name, cm.browser_id, cm.content, cm.created_at,
+           co.title AS contribution_title
+    FROM comments cm
+    JOIN contributions co ON cm.contribution_id = co.contribution_id
+    WHERE co.municipality_id = :mid
+    ORDER BY cm.created_at DESC
+");
+$stmt->execute([':mid' => $municipality['municipality_id']]);
+$all_comments = $stmt->fetchAll();
+
+
 // Shows Login Page if not authenticated
 if ($page === 'login' || !is_admin()) {
     show_login_page($municipality, $login_error ?? null);
@@ -159,6 +174,9 @@ $counts['total'] = count($all_contributions);
             <button class="page-tab active" onclick="showPageTab('contributions')">
                 <i class="fa-solid fa-list-check"></i> Beiträge
             </button>
+            <button class="page-tab" onclick="showPageTab('comments')">
+                <i class="fa-solid fa-comments"></i> Kommentare
+            </button>
             <button class="page-tab" onclick="showPageTab('news')">
                 <i class="fa-solid fa-newspaper"></i> Neuigkeiten
             </button>
@@ -322,6 +340,73 @@ $counts['total'] = count($all_contributions);
         </div>
 
 
+        <!-- ========================================================= -->
+        <!-- Comments Moderation Tab                                   -->
+        <!-- ========================================================= -->
+        <div id="tab-comments" class="page-tab-content" style="display:none;">
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span><?= count($all_comments) ?> Kommentare</span>
+                <select onchange="sortCommentRows(this.value)">
+                    <option value="date-desc">Neueste zuerst</option>
+                    <option value="date-asc">Älteste zuerst</option>
+                    <option value="contribution">Nach Beitrag</option>
+                </select>
+            </div>
+
+            <!-- Comments List -->
+            <div id="comments-mod-container">
+                <?php if (empty($all_comments)): ?>
+                    <div class="empty-state">
+                        <i class="fa-solid fa-comments" style="font-size:2rem;margin-bottom:8px;display:block;"></i>
+                        Noch keine Kommentare vorhanden.
+                    </div>
+                <?php else: ?>
+                    <?php foreach ($all_comments as $comment): ?>
+                        <div class="contribution-row comment-mod-row"
+                             data-date="<?= $comment['created_at'] ?>"
+                             data-contribution="<?= htmlspecialchars($comment['contribution_title']) ?>">
+                            <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
+                                <div class="contribution-row-summary">
+                                    <span class="title" style="flex:1;"><?= htmlspecialchars(mb_strimwidth($comment['content'], 0, 80, '...')) ?></span>
+                                    <span style="font-size:0.75rem;color:#999;">
+                                        <?= htmlspecialchars($comment['author_name']) ?>
+                                        · <?= date('d.m.Y H:i', strtotime($comment['created_at'])) ?>
+                                    </span>
+                                </div>
+                                <i class="fa-solid fa-chevron-down collapse-icon"></i>
+                            </div>
+                            <div class="contribution-row-detail">
+                                <div style="padding:12px 0;">
+                                    <!-- Reference to Contribution -->
+                                    <div style="font-size:0.8rem;color:var(--color-text-secondary);margin-bottom:8px;padding:8px 12px;background:#f8f9fa;border-radius:6px;border-left:3px solid var(--color-primary);">
+                                        <i class="fa-solid fa-reply"></i> Beitrag: <strong><?= htmlspecialchars($comment['contribution_title']) ?></strong>
+                                    </div>
+                                    <!-- Comment Content -->
+                                    <div style="font-size:0.9rem;line-height:1.6;color:var(--color-text);margin-bottom:8px;">
+                                        <?= nl2br(htmlspecialchars($comment['content'])) ?>
+                                    </div>
+                                    <!-- Meta -->
+                                    <div class="detail-meta">
+                                        <span><i class="fa-solid fa-user"></i> <?= htmlspecialchars($comment['author_name']) ?></span>
+                                        <span><i class="fa-solid fa-calendar"></i> <?= date('d.m.Y, H:i', strtotime($comment['created_at'])) ?> Uhr</span>
+                                    </div>
+                                </div>
+                                <!-- Action Buttons -->
+                                <div class="action-buttons">
+                                    <button class="btn btn-delete" onclick="deleteModComment(<?= $comment['comment_id'] ?>)">
+                                        <i class="fa-solid fa-trash"></i> Kommentar löschen
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </div>
+        </div>
+        
+
         <!-- ========================================================= -->
         <!-- News Article Tab                                      -->
         <!-- ========================================================= -->
@@ -621,7 +706,7 @@ $counts['total'] = count($all_contributions);
 
 
         // =============================================================
-        // Edit Contribution (Title and Description)
+        // Edit Contribution
         // =============================================================
 
         function editContribution(contributionId, currentTitle, currentDescription) {
@@ -847,6 +932,60 @@ $counts['total'] = count($all_contributions);
             });
         }
 
+
+        // =============================================================
+        // Sort Comments
+        // =============================================================
+
+        function sortCommentRows(sortBy) {
+            const container = document.getElementById('comments-mod-container');
+            const rows = Array.from(container.querySelectorAll('.comment-mod-row'));
+
+            rows.sort(function (a, b) {
+                if (sortBy === 'date-desc') {
+                    return new Date(b.dataset.date) - new Date(a.dataset.date);
+                } else if (sortBy === 'date-asc') {
+                    return new Date(a.dataset.date) - new Date(b.dataset.date);
+                } else if (sortBy === 'contribution') {
+                    return a.dataset.contribution.localeCompare(b.dataset.contribution);
+                }
+                return 0;
+            });
+
+            rows.forEach(function (row) { container.appendChild(row); });
+        }
+
+
+        // =============================================================
+        // Delete Comments
+        // =============================================================
+
+        function deleteModComment(commentId) {
+            Swal.fire({
+                title: 'Kommentar löschen?',
+                text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Löschen',
+                cancelButtonText: 'Abbrechen',
+                confirmButtonColor: '#c62828'
+            }).then(function (result) {
+                if (!result.isConfirmed) return;
+
+                apiCall({
+                    action: 'delete_comment',
+                    comment_id: commentId
+                }).then(function (response) {
+                    if (response.error) {
+                        Swal.fire('Fehler', response.error, 'error');
+                        return;
+                    }
+                    Swal.fire('Gelöscht!', 'Kommentar wurde entfernt.', 'success')
+                        .then(function () { location.reload(); });
+                });
+            });
+        }
+
     </script>
 
 </body>