static/js/support.js

/**
 * Support Page Logic - Aadhaar Pro
 */

document.addEventListener('DOMContentLoaded', () => {
    initSupportPage();
});

function initSupportPage() {
    loadRecentTickets();
    setupTicketForm();
}

/**
 * Handle new ticket submission
 */
function setupTicketForm() {
    const form = document.getElementById('ticket-form');
    if (!form) return;

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const data = {
            subject: document.getElementById('tick-subject').value.trim(),
            category: document.getElementById('tick-category').value,
            message: document.getElementById('tick-message').value.trim()
        };

        if (!data.subject || !data.message) {
            alert('Please provide both a subject and a message.');
            return;
        }

        try {
            const btn = form.querySelector('button[type="submit"]');
            const originalBtnHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Submitting...';

            const res = await fetch('/api/support/create', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const resData = await res.json();
            
            btn.disabled = false;
            btn.innerHTML = originalBtnHtml;

            if (res.ok && resData.success) {
                alert(`Ticket ${resData.ticket_number} submitted successfully! Our team will get back to you soon.`);
                form.reset();
                loadRecentTickets(); // Refresh list
            } else {
                alert('Submission failed: ' + (resData.error || 'Unknown error'));
            }
        } catch (err) {
            console.error('Support ticket error:', err);
            alert('An error occurred. Please try again later.');
        }
    });
}

/**
 * Load recent support tickets (API Integration)
 */
async function loadRecentTickets() {
    const container = document.getElementById('tickets-container');
    if (!container) return;

    try {
        const res = await fetch('/api/support/list');
        const tickets = await res.json();

        if (Array.isArray(tickets) && tickets.length > 0) {
            container.innerHTML = tickets.map(t => `
                <div class="ticket-status-item" onclick="viewTicket('${t.id}')">
                    <div class="ticket-info">
                        <span class="id">#${t.ticket_number}</span>
                        <div class="subject">${t.subject}</div>
                        <div class="date">${t.date}</div>
                    </div>
                    <span class="status-tag status-${t.status}">
                        ${t.status.toUpperCase()}
                    </span>
                </div>
            `).join('');
        } else {
            container.innerHTML = '<p style="color: var(--text-muted); font-size: 0.85rem; padding: 10px;">No support tickets found.</p>';
        }
    } catch (err) {
        console.error('Error loading tickets:', err);
        container.innerHTML = '<p class="error-text">Failed to load ticket history.</p>';
    }
}

/**
 * Basic view ticket placeholder (could be expanded to a modal or detail page)
 */
async function viewTicket(ticketId) {
    try {
        const res = await fetch(`/api/support/ticket/${ticketId}`);
        const t = await res.json();
        
        if (t.error) {
            alert(t.error);
            return;
        }

        let messageThread = t.messages.map(m => `
            <div class="msg-bubble ${m.sender}">
                <div class="msg-meta">${m.sender === 'user' ? 'You' : 'Admin'} • ${m.time}</div>
                <div class="msg-text">${m.message}</div>
            </div>
        `).join('');

        // For now, using a simple prompt-based interaction or just an alert with history
        alert(`TICKET: #${t.ticket_number}\nSUBJECT: ${t.subject}\nSTATUS: ${t.status.toUpperCase()}\n\nLATEST MESSAGES:\n${t.messages.map(m => `[${m.time}] ${m.sender.toUpperCase()}: ${m.message}`).join('\n')}`);
    } catch (err) {
        console.error('Error fetching ticket detail:', err);
    }
}