Update comment deletion with notification

resources/views/admin/comments/index.blade.php

@@ -2,6 +2,31 @@
 
 @section('content')
 <div class="container mx-auto px-4 py-6">
+    <!-- Flash Messages -->
+    @if(session('success'))
+        <div class="mb-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 flex items-center justify-between">
+            <div class="flex items-center">
+                <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-3 text-xl"></i>
+                <p class="text-sm text-green-800 dark:text-green-200 font-medium">{{ session('success') }}</p>
+            </div>
+            <button onclick="this.parentElement.parentElement.remove()" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    @endif
+
+    @if(session('error'))
+        <div class="mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-center justify-between">
+            <div class="flex items-center">
+                <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 text-xl"></i>
+                <p class="text-sm text-red-800 dark:text-red-200 font-medium">{{ session('error') }}</p>
+            </div>
+            <button onclick="this.parentElement.parentElement.remove()" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    @endif
+
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
         <!-- Header -->
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -95,15 +120,12 @@
                                 <div class="text-xs">{{ $comment->created_at ? $comment->created_at->format('H:i:s') : '' }}</div>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                <form method="POST" action="{{ url('admin/comments-delete?id=' . $comment->id) }}" class="inline">
-                                    @csrf
-                                    <button type="submit"
-                                            class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                                            title="Delete"
-                                            onclick="return confirm('Are you sure you want to delete this comment?')">
-                                        <i class="fas fa-trash"></i>
-                                    </button>
-                                </form>
+                                <button type="button"
+                                        class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition"
+                                        title="Delete"
+                                        onclick="openDeleteModal({{ $comment->id }}, '{{ addslashes(Str::limit($comment->text, 50)) }}')">
+                                    <i class="fas fa-trash"></i>
+                                </button>
                             </td>
                         </tr>
                     @empty
@@ -124,6 +146,44 @@
     </div>
 </div>
 
+<!-- Delete Confirmation Modal -->
+<div id="deleteModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center z-50 transition-opacity">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
+                    <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mr-2"></i>
+                    Confirm Deletion
+                </h3>
+                <button type="button" onclick="closeDeleteModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+        </div>
+        <div class="px-6 py-4">
+            <p class="text-gray-700 dark:text-gray-300 mb-2">Are you sure you want to delete this comment?</p>
+            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 mt-3">
+                <p class="text-sm text-gray-600 dark:text-gray-400 italic" id="deleteCommentPreview"></p>
+            </div>
+            <p class="text-sm text-red-600 dark:text-red-400 mt-3 font-medium">This action cannot be undone.</p>
+        </div>
+        <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
+            <button type="button"
+                    onclick="closeDeleteModal()"
+                    class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition font-medium">
+                <i class="fas fa-times mr-2"></i>Cancel
+            </button>
+            <form id="deleteForm" method="POST" action="" class="inline">
+                @csrf
+                <button type="submit"
+                        class="px-4 py-2 bg-red-600 dark:bg-red-700 text-white rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition font-medium">
+                    <i class="fas fa-trash mr-2"></i>Delete Comment
+                </button>
+            </form>
+        </div>
+    </div>
+</div>
+
 @push('styles')
 <style>
     .line-clamp-2 {
@@ -134,5 +194,69 @@
     }
 </style>
 @endpush
+
+@push('scripts')
+<script>
+function openDeleteModal(commentId, commentText) {
+    const modal = document.getElementById('deleteModal');
+    const form = document.getElementById('deleteForm');
+    const preview = document.getElementById('deleteCommentPreview');
+
+    // Set the form action
+    form.action = "{{ url('admin/comments-delete') }}/" + commentId;
+
+    // Set the comment preview
+    preview.textContent = '"' + commentText + (commentText.length >= 50 ? '..."' : '"');
+
+    // Show the modal
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+
+    // Prevent body scroll
+    document.body.style.overflow = 'hidden';
+}
+
+function closeDeleteModal() {
+    const modal = document.getElementById('deleteModal');
+
+    // Hide the modal
+    modal.classList.add('hidden');
+    modal.classList.remove('flex');
+
+    // Restore body scroll
+    document.body.style.overflow = '';
+}
+
+// Close modal on escape key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeDeleteModal();
+    }
+});
+
+// Close modal when clicking outside
+document.getElementById('deleteModal')?.addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeDeleteModal();
+    }
+});
+
+// Auto-dismiss flash messages after 5 seconds
+document.addEventListener('DOMContentLoaded', function() {
+    setTimeout(function() {
+        const flashMessages = document.querySelectorAll('[class*="bg-green-50"], [class*="bg-red-50"]');
+        flashMessages.forEach(function(message) {
+            if (message.querySelector('.fa-check-circle') || message.querySelector('.fa-exclamation-circle')) {
+                message.style.transition = 'opacity 0.5s';
+                message.style.opacity = '0';
+                setTimeout(function() {
+                    message.remove();
+                }, 500);
+            }
+        });
+    }, 5000);
+});
+</script>
+@endpush
 @endsection