tinker_tickets/assets/js/ticket.js

function saveTicket() {
    const editables = document.querySelectorAll('.editable');
    const data = {};
    const ticketId = window.location.href.split('id=')[1];
    
    editables.forEach(field => {
        if (field.dataset.field) {
            data[field.dataset.field] = field.value;
        }
    });

    fetch('update_ticket.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            ticket_id: ticketId,
            ...data
        })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            const statusDisplay = document.getElementById('statusDisplay');
            statusDisplay.className = `status-${data.status}`;
            statusDisplay.textContent = data.status;
        }
    });
}

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;
    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
        })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            // Clear the comment box
            document.getElementById('newComment').value = '';
            
            // 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">${commentText}</div>
                </div>
            `;
            commentsList.insertAdjacentHTML('afterbegin', newComment);
        }
    });
}

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 preview = document.getElementById('markdownPreview');
    const textarea = document.getElementById('newComment');
    preview.innerHTML = marked.parse(textarea.value);
}

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';
    }
}

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);
        };
    }
});

function showTab(tabName) {
    // Hide all tab contents
    const descriptionTab = document.getElementById('description-tab');
    const commentsTab = document.getElementById('comments-tab');
    
    // 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');
}