Re-did everything, Now is modulaar and better bro.

assets/js/ticket.js

@@ -1,7 +1,20 @@
 function saveTicket() {
     const editables = document.querySelectorAll('.editable');
     const data = {};
-    const ticketId = window.location.href.split('id=')[1];
+    
+    // Extract ticket ID from URL (works with both old and new URL formats)
+    let ticketId;
+    if (window.location.href.includes('?id=')) {
+        ticketId = window.location.href.split('id=')[1];
+    } else {
+        const matches = window.location.pathname.match(/\/ticket\/(\d+)/);
+        ticketId = matches ? matches[1] : null;
+    }
+    
+    if (!ticketId) {
+        console.error('Could not determine ticket ID');
+        return;
+    }
     
     editables.forEach(field => {
         if (field.dataset.field) {
@@ -9,7 +22,16 @@ function saveTicket() {
         }
     });
 
-    fetch('update_ticket.php', {
+    // Use the correct API path
+    const apiUrl = '/api/update_ticket.php';
+    
+    console.log('Sending request to:', apiUrl);
+    console.log('Sending data:', JSON.stringify({
+        ticket_id: ticketId,
+        ...data
+    }));
+    
+    fetch(apiUrl, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -19,13 +41,31 @@ function saveTicket() {
             ...data
         })
     })
-    .then(response => response.json())
+    .then(response => {
+        console.log('Response status:', response.status);
+        if (!response.ok) {
+            return response.text().then(text => {
+                console.error('Server response:', text);
+                throw new Error('Network response was not ok');
+            });
+        }
+        return response.json();
+    })
     .then(data => {
+        console.log('Response data:', data);
         if(data.success) {
             const statusDisplay = document.getElementById('statusDisplay');
-            statusDisplay.className = `status-${data.status}`;
-            statusDisplay.textContent = data.status;
+            if (statusDisplay) {
+                statusDisplay.className = `status-${data.status}`;
+                statusDisplay.textContent = data.status;
+            }
+            console.log('Ticket updated successfully');
+        } else {
+            console.error('Error in API response:', data.error || 'Unknown error');
         }
+    })
+    .catch(error => {
+        console.error('Error updating ticket:', error);
     });
 }
 
@@ -55,19 +95,47 @@ function toggleEditMode() {
 
 function addComment() {
     const commentText = document.getElementById('newComment').value;
-    const ticketId = window.location.href.split('id=')[1];
+    if (!commentText.trim()) {
+        console.error('Comment text cannot be empty');
+        return;
+    }
+    
+    // Extract ticket ID from URL (works with both old and new URL formats)
+    let ticketId;
+    if (window.location.href.includes('?id=')) {
+        ticketId = window.location.href.split('id=')[1];
+    } else {
+        const matches = window.location.pathname.match(/\/ticket\/(\d+)/);
+        ticketId = matches ? matches[1] : null;
+    }
+    
+    if (!ticketId) {
+        console.error('Could not determine ticket ID');
+        return;
+    }
+    
+    const isMarkdownEnabled = document.getElementById('markdownMaster').checked;
 
-    fetch('add_comment.php', {
+    fetch('/api/add_comment.php', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
             ticket_id: ticketId,
-            comment_text: commentText
+            comment_text: commentText,
+            markdown_enabled: isMarkdownEnabled
         })
     })
-    .then(response => response.json())
+    .then(response => {
+        if (!response.ok) {
+            return response.text().then(text => {
+                console.error('Server response:', text);
+                throw new Error('Network response was not ok');
+            });
+        }
+        return response.json();
+    })
     .then(data => {
         if(data.success) {
             // Clear the comment box
@@ -81,11 +149,18 @@ function addComment() {
                         <span class="comment-user">${data.user_name}</span>
                         <span class="comment-date">${data.created_at}</span>
                     </div>
-                    <div class="comment-text">${commentText}</div>
+                    <div class="comment-text">
+                        ${isMarkdownEnabled ? marked.parse(commentText) : commentText}
+                    </div>
                 </div>
             `;
             commentsList.insertAdjacentHTML('afterbegin', newComment);
+        } else {
+            console.error('Error adding comment:', data.error || 'Unknown error');
         }
+    })
+    .catch(error => {
+        console.error('Error adding comment:', error);
     });
 }
 
@@ -121,71 +196,25 @@ function toggleMarkdownMode() {
     }
 }
 
-function addComment() {
-    const commentText = document.getElementById('newComment').value;
-    const isMarkdownEnabled = document.getElementById('markdownMaster').checked;
-    const ticketId = window.location.href.split('id=')[1];
-    
-    fetch('add_comment.php', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            ticket_id: ticketId,
-            comment_text: commentText,
-            markdown_enabled: isMarkdownEnabled
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if(data.success) {
-            const commentsList = document.querySelector('.comments-list');
-            const newCommentHtml = `
-                <div class="comment">
-                    <div class="comment-header">
-                        <span class="comment-user">${data.user_name}</span>
-                        <span class="comment-date">${data.created_at}</span>
-                    </div>
-                    <div class="comment-text">
-                        ${isMarkdownEnabled ? marked.parse(commentText) : commentText}
-                    </div>
-                </div>
-            `;
-            commentsList.insertAdjacentHTML('afterbegin', newCommentHtml);
-            document.getElementById('newComment').value = '';
-        }
-    });
-}
-
 document.addEventListener('DOMContentLoaded', function() {
     // Show description tab by default
     showTab('description');
     
-    // Add the auto-resize functionality here
     // Auto-resize the description textarea to fit content
     const descriptionTextarea = document.querySelector('textarea[data-field="description"]');
-    
-    function autoResizeTextarea() {
-        // Reset height to auto to get the correct scrollHeight
-        descriptionTextarea.style.height = 'auto';
-        // Set the height to match the scrollHeight
-        descriptionTextarea.style.height = descriptionTextarea.scrollHeight + 'px';
-    }
-    
-    // Initial resize
-    autoResizeTextarea();
-    
-    // Resize on input when in edit mode
-    descriptionTextarea.addEventListener('input', autoResizeTextarea);
-    
-    // Also resize when edit mode is toggled
-    const originalToggleEditMode = window.toggleEditMode;
-    if (typeof originalToggleEditMode === 'function') {
-        window.toggleEditMode = function() {
-            originalToggleEditMode.apply(this, arguments);
-            setTimeout(autoResizeTextarea, 0);
-        };
+    if (descriptionTextarea) {
+        function autoResizeTextarea() {
+            // Reset height to auto to get the correct scrollHeight
+            descriptionTextarea.style.height = 'auto';
+            // Set the height to match the scrollHeight
+            descriptionTextarea.style.height = descriptionTextarea.scrollHeight + 'px';
+        }
+        
+        // Initial resize
+        autoResizeTextarea();
+        
+        // Resize on input when in edit mode
+        descriptionTextarea.addEventListener('input', autoResizeTextarea);
     }
 });
 
@@ -194,6 +223,11 @@ function showTab(tabName) {
     const descriptionTab = document.getElementById('description-tab');
     const commentsTab = document.getElementById('comments-tab');
     
+    if (!descriptionTab || !commentsTab) {
+        console.error('Tab elements not found');
+        return;
+    }
+    
     // Hide both tabs
     descriptionTab.style.display = 'none';
     commentsTab.style.display = 'none';