document.addEventListener('DOMContentLoaded', () => {
    // Staggered table row animations
    const animateTables = () => {
        const tables = document.querySelectorAll('.blue-table tbody');
        tables.forEach(tbody => {
            const rows = tbody.querySelectorAll('tr');
            rows.forEach((row, index) => {
                row.classList.add('animate-row');
                row.style.animationDelay = `${index * 0.05}s`;
            });
        });
    };
    animateTables();

    // Re-run animations on DOM mutations (useful when fetch injects HTML)
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                animateTables();
            }
        });
    });
    
    const contentArea = document.querySelector('.content-area');
    if (contentArea) {
        observer.observe(contentArea, { childList: true, subtree: true });
    }

    // Button ripple effect (optional micro-interaction)
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', function(e) {
            let ripple = document.createElement('span');
            ripple.classList.add('ripple');
            this.appendChild(ripple);
            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });

    // Date/Time Clock logic
    const updateClock = () => {
        const clockEl = document.getElementById('live-clock');
        if(!clockEl) return;
        
        const date = new Date();
        const year = date.getFullYear() + 543;
        const months = ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'];
        const m = months[date.getMonth()];
        const d = date.getDate();
        
        let hrs = date.getHours().toString().padStart(2, '0');
        let mins = date.getMinutes().toString().padStart(2, '0');
        let secs = date.getSeconds().toString().padStart(2, '0');
        
        clockEl.textContent = `${d} ${m} ${year} | ${hrs}:${mins}:${secs}`;
    };
    
    setInterval(updateClock, 1000);
    updateClock();
});