tinker_tickets/assets/js/ticket.js

function saveTicket() {
    const editables = document.querySelectorAll('.editable');
    const data = {};
    
    // 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) {
            data[field.dataset.field] = field.value;
        }
    });

    // Use the correct API path
    const apiUrl = '/api/update_ticket.php';
    
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            ticket_id: ticketId,
            ...data
        })
    })
    .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) {
            const statusDisplay = document.getElementById('statusDisplay');
            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);
    });
}

function toggleEditMode() {
    const editButton = document.getElementById('editButton');
    const editables = document.querySelectorAll('.title-input, textarea[data-field="description"]');
    const isEditing = editButton.classList.contains('active');

    if (!isEditing) {
        editButton.textContent = 'Save Changes';
        editButton.classList.add('active');
        editables.forEach(field => {
            field.disabled = false;
            if (field.classList.contains('title-input')) {
                field.focus();
            }
        });
    } else {
        saveTicket();
        editButton.textContent = 'Edit Ticket';
        editButton.classList.remove('active');
        editables.forEach(field => {
            field.disabled = true;
        });
    }
}

function addComment() {
    const commentText = document.getElementById('newComment').value;
    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('/api/add_comment.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            ticket_id: ticketId,
            comment_text: commentText,
            markdown_enabled: isMarkdownEnabled
        })
    })
    .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
            document.getElementById('newComment').value = '';
            
            // Format the comment text for display
            let displayText;
            if (isMarkdownEnabled) {
                // For markdown, use marked.parse
                displayText = marked.parse(commentText);
            } else {
                // For non-markdown, convert line breaks to <br> and escape HTML
                displayText = commentText
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;')
                    .replace(/\n/g, '<br>');
            }
            
            // Add new comment to the list
            const commentsList = document.querySelector('.comments-list');
            const newComment = `
                <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">${displayText}</div>
                </div>
            `;
            commentsList.insertAdjacentHTML('afterbegin', newComment);
        } else {
            console.error('Error adding comment:', data.error || 'Unknown error');
        }
    })
    .catch(error => {
        console.error('Error adding comment:', error);
    });
}

function togglePreview() {
    const preview = document.getElementById('markdownPreview');
    const textarea = document.getElementById('newComment');
    const isPreviewEnabled = document.getElementById('markdownToggle').checked;
    
    preview.style.display = isPreviewEnabled ? 'block' : 'none';
    
    if (isPreviewEnabled) {
        preview.innerHTML = marked.parse(textarea.value);
        textarea.addEventListener('input', updatePreview);
    } else {
        textarea.removeEventListener('input', updatePreview);
    }
}

function updatePreview() {
    const commentText = document.getElementById('newComment').value;
    const previewDiv = document.getElementById('markdownPreview');
    const isMarkdownEnabled = document.getElementById('markdownMaster').checked;
    
    if (isMarkdownEnabled && commentText.trim()) {
        // For markdown preview, use marked.parse which handles line breaks correctly
        previewDiv.innerHTML = marked.parse(commentText);
        previewDiv.style.display = 'block';
    } else {
        previewDiv.style.display = 'none';
    }
}

function toggleMarkdownMode() {
    const previewToggle = document.getElementById('markdownToggle');
    const isMasterEnabled = document.getElementById('markdownMaster').checked;
    
    previewToggle.disabled = !isMasterEnabled;
    if (!isMasterEnabled) {
        previewToggle.checked = false;
        document.getElementById('markdownPreview').style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Show description tab by default
    showTab('description');
    
    // Auto-resize the description textarea to fit content
    const descriptionTextarea = document.querySelector('textarea[data-field="description"]');
    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);
    }
});

function showTab(tabName) {
    // Hide all tab contents
    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';
    
    // Remove active class from all buttons
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // Show selected tab and activate its button
    document.getElementById(`${tabName}-tab`).style.display = 'block';
    document.querySelector(`[onclick="showTab('${tabName}')"]`).classList.add('active');
}