document.addEventListener('DOMContentLoaded', function() { // --- User Profile Dropdown --- document.addEventListener('click', function(e) { const profile = document.querySelector('.user-profile'); const dropdown = document.querySelector('.user-dropdown'); if (dropdown && profile && !profile.contains(e.target)) { dropdown.classList.remove('active'); } }); const userProfile = document.querySelector('.user-profile'); if (userProfile) { userProfile.addEventListener('click', function() { const dropdown = userProfile.querySelector('.user-dropdown'); if (dropdown) dropdown.classList.toggle('active'); }); } // --- Login Page Logic --- const loginForm = document.getElementById('loginForm'); if (loginForm) { loginForm.addEventListener('submit', function(e) { e.preventDefault(); // ป้องกันการ submit ฟอร์มจริง // ในสถานการณ์จริง จะมีการส่งข้อมูลไปตรวจสอบกับ Server // ในตัวอย่างนี้ เราจะ redirect ไปที่หน้า dashboard เลย window.location.href = 'dashboard.html'; }); } // --- Dashboard Logic --- const menuToggler = document.getElementById('menu-toggler'); const sidebar = document.querySelector('.sidebar'); if (menuToggler && sidebar) { menuToggler.addEventListener('click', () => { sidebar.classList.toggle('active'); }); } // --- Chart.js Initialization --- // Chart 1: Department Scores (Bar Chart) const departmentChartCtx = document.getElementById('departmentChart'); if (departmentChartCtx) { new Chart(departmentChartCtx, { type: 'bar', data: { labels: ['ฝ่ายขาย', 'การตลาด', 'ไอที', 'บุคคล', 'บัญชี'], datasets: [{ label: 'คะแนนเฉลี่ย', data: [82, 78, 90, 85, 75], backgroundColor: [ 'rgba(33, 150, 243, 0.7)', 'rgba(76, 175, 80, 0.7)', 'rgba(255, 152, 0, 0.7)', 'rgba(244, 67, 54, 0.7)', 'rgba(156, 39, 176, 0.7)' ], borderColor: [ '#2196F3', '#4CAF50', '#FF9800', '#F44336', '#9C27B0' ], borderWidth: 1, borderRadius: 5, }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: false } } } }); } // Chart 2: Performance Trend (Line Chart) const trendChartCtx = document.getElementById('trendChart'); if (trendChartCtx) { new Chart(trendChartCtx, { type: 'line', data: { labels: ['ไตรมาส 1', 'ไตรมาส 2', 'ไตรมาส 3', 'ไตรมาส 4'], datasets: [{ label: 'คะแนนเฉลี่ยรวม', data: [75, 80, 79, 88], fill: true, backgroundColor: 'rgba(33, 150, 243, 0.2)', borderColor: '#2196F3', tension: 0.4 // Makes the line smooth }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: true } } } }); } });