added sorting functionality, changed style

Views/Notes/showNotes.phtml

@@ -1,5 +1,26 @@
 <?php include dirname(__DIR__).'/header.phtml'; ?>    
 
+<script>
+    document.querySelectorAll('.notes-table th[data-sort]').forEach(headerCell => {
+        headerCell.addEventListener('click', () => {
+            const sortBy = headerCell.dataset.sort;
+            const currentUrl = new URL(window.location.href);
+            const currentSortBy = currentUrl.searchParams.get('sort_by');
+            const currentSortOrder = currentUrl.searchParams.get('sort_order') || 'asc'; // Default to asc if not set
+            
+            let newSortOrder = 'asc';
+            if (sortBy === currentSortBy && currentSortOrder.toLowerCase() === 'asc') {
+                newSortOrder = 'desc';
+            }
+            // If different column, or current is desc, start with asc for the new column
+            
+            currentUrl.searchParams.set('sort_by', sortBy);
+            currentUrl.searchParams.set('sort_order', newSortOrder);
+            window.location.href = currentUrl.toString();
+        });
+    });
+</script>
+
 <h2>Notes</h2>
 
 <div class="container">
@@ -20,7 +41,6 @@
     
     $sortBy = $_GET['sort_by'] ?? 'updated_at';
     $sortOrder = strtoupper($_GET['sort_order'] ?? 'DESC'); // Ensure uppercase for comparison
-    //$notes = NotesModel::selectNotesForUser(2, $sortBy, $sortOrder); //$_SESSION['user_id']
     ?>
     <table class="notes-table">
         <thead>