Update index.html

index.html

@@ -5,52 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SMK Bandar Kuching No. 1 - Attendance & Roster System</title>
     <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com">
-    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <!-- Lucide Icons -->
-    <script src="https://unpkg.com/lucide@latest">
-    </script>
+    <script src="https://unpkg.com/lucide@latest"></script>
     <!-- Inter Font -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <!-- Chart.js for Visual Analytics -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js">
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-        .status-btn {
-            transition: all 0.2s ease-in-out;
-        }
-        .status-btn:active {
-            transform: scale(0.95);
-        }
+        body { font-family: 'Inter', sans-serif; }
+        .status-btn { transition: all 0.2s ease-in-out; }
+        .status-btn:active { transform: scale(0.95); }
         /* Custom scrollbar styling */
-        ::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f5f9;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #cbd5e1;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #94a3b8;
-        }
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f5f9; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
         @media print {
-            .no-print {
-                display: none !important;
-            }
-            .print-only {
-                display: block !important;
-            }
-            body {
-                background: white !important;
-                color: black !important;
-            }
+            .no-print { display: none !important; }
+            .print-only { display: block !important; }
+            body { background: white !important; color: black !important; }
         }
     </style>
 </head>
@@ -119,7 +93,7 @@
 
         <!-- TAB 1: ATTENDANCE TRACKER -->
         <div id="tab-tracker" class="space-y-6">
-
+            
             <!-- Controls Form -->
             <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5 no-print space-y-4">
                 <div class="flex items-center justify-between border-b border-slate-100 pb-3 cursor-pointer select-none" onclick="toggleControlsSection()">
@@ -135,7 +109,7 @@
 
                 <div id="controls-body" class="space-y-4 transition-all duration-300">
                     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6 gap-3">
-
+                        
                         <!-- Class Selection -->
                         <div>
                             <div class="flex items-center justify-between mb-1.5">
@@ -204,7 +178,7 @@
                             </div>
                         </div>
 
-                        <!-- End Time (extended to 16:00) -->
+                        <!-- End Time -->
                         <div>
                             <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">6. End Time</label>
                             <div class="relative">
@@ -564,7 +538,7 @@
 
                 <!-- Detailed Analysis Tables -->
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-2">
-
+                    
                     <!-- Pending Submission Table -->
                     <div class="border border-amber-200 bg-amber-50/20 rounded-xl p-4 space-y-3">
                         <div class="flex items-center justify-between border-b border-amber-200 pb-2">
@@ -705,7 +679,7 @@
                 </div>
             </div>
             <p class="text-xs text-slate-600 leading-relaxed">
-                Are you sure you want to permanently delete all attendance logs and historical sessions?
+                Are you sure you want to permanently delete all attendance logs and historical sessions? 
             </p>
             <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
                 <button type="button" id="btn-clear-logs-cancel" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs rounded-xl">Cancel</button>
@@ -818,12 +792,12 @@
         function subscribeToLiveSettings() {
             if (!currentUser) return;
             const settingsDoc = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'rosters_v1');
-
+            
             onSnapshot(settingsDoc, (docSnap) => {
                 if (docSnap.exists()) {
                     const data = docSnap.data();
                     let needsRefresh = false;
-
+                    
                     if (data.rosters) {
                         window.safeSetItem('smk_custom_rosters_v3', JSON.stringify(data.rosters));
                         window.rosters = data.rosters;
@@ -843,7 +817,7 @@
                         window.SUBJECT_LIST = data.subjects;
                         needsRefresh = true;
                     }
-
+                    
                     if (needsRefresh && typeof window.refreshAllUI === 'function') {
                         window.refreshAllUI();
                     }
@@ -856,7 +830,7 @@
         window.saveSessionToCloud = async function(sessionRecord) {
             if (!currentUser) return;
             try {
-                const docId = `session_${sessionRecord.id}_${sessionRecord.class}_${sessionRecord.startTime.replace(':', '')}`;
+                const docId = `session_${sessionRecord.id}_${sessionRecord.class}_${sessionRecord.startTime.replace(':','')}`;
                 const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'sessions', docId);
                 await setDoc(docRef, sessionRecord);
             } catch (err) {
@@ -867,7 +841,7 @@
         window.deleteSessionFromCloud = async function(sessionRecord) {
             if (!currentUser) return;
             try {
-                const docId = `session_${sessionRecord.id}_${sessionRecord.class}_${sessionRecord.startTime.replace(':', '')}`;
+                const docId = `session_${sessionRecord.id}_${sessionRecord.class}_${sessionRecord.startTime.replace(':','')}`;
                 const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'sessions', docId);
                 await deleteDoc(docRef);
             } catch (err) {
@@ -879,9 +853,9 @@
             if (!currentUser) return;
             try {
                 const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'rosters_v1');
-                await setDoc(docRef, {
-                    rosters: rostersData,
-                    classes: classesData || window.ALL_CLASSES,
+                await setDoc(docRef, { 
+                    rosters: rostersData, 
+                    classes: classesData || window.ALL_CLASSES, 
                     teachers: teachersData || window.MASTER_TEACHER_LIST,
                     subjects: subjectsData || window.SUBJECT_LIST
                 });
@@ -942,13 +916,8 @@
 
         window.SUBJECT_LIST = JSON.parse(window.safeGetItem('smk_subjects_v1', '["Bahasa Melayu", "English", "Mathematics", "Science", "Sejarah", "Geografi", "Pendidikan Islam", "Pendidikan Moral", "RBT", "ASK", "PJK", "Pendidikan Seni Visual", "Fizik", "Kimia", "Biologi", "Matematik Tambahan", "Prinsip Perakaunan", "Ekonomi"]'));
         window.MASTER_TEACHER_LIST = JSON.parse(window.safeGetItem('smk_teachers_v1', '["Cikgu Wee", "Cikgu Ahmad", "Cikgu Tan", "Cikgu Dayang", "Cikgu Ling"]'));
-
-        // EXTENDED TIME SLOTS: Now includes times up to 16:00 (4:00 PM)
-        window.TIME_SLOTS = [
-            "07:00", "07:30", "08:00", "08:30", "09:00", "09:30",
-            "10:00", "10:30", "11:00", "11:30", "12:00", "12:30",
-            "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"
-        ];
+        
+        window.TIME_SLOTS = ["07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30"];
         window.ABSENCE_REASONS = ["Tanpa Sebab / Ponteng", "Sakit / Sijil Sakit (MC)", "Kebenaran Sekolah / Aktiviti", "Urusan Keluarga", "Masalah Pengangkutan", "Lain-lain"];
 
         // Global State variables
@@ -1025,1454 +994,4 @@
             try { lucide.createIcons(); } catch (e) {}
             try { populateDropdowns(); } catch (e) { console.warn('populateDropdowns', e); }
             try { setCurrentDate(); } catch (e) { console.warn('setCurrentDate', e); }
-            try { setupEventDelegation(); } catch (e) { console.warn('setupEventDelegation', e); }
-            try { switchTab('history'); } catch (e) { console.warn('switchTab', e); }
-            // Visible proof that JS is alive
-            try {
-                const badge = document.getElementById('sync-text');
-                if (badge && badge.innerText === 'Live Cloud Active') {
-                    // leave as is if cloud works
-                }
-            } catch (e) {}
-        }
-        window.initApp = initApp;
-
-        // Event delegation — capture phase so it works even if something stops bubbling
-        function setupEventDelegation() {
-            if (window.__smkDelegationBound) return;
-            window.__smkDelegationBound = true;
-
-            document.addEventListener('click', function(e) {
-                const t = e.target;
-
-                // --- Delete single session (trash icon / ×) — instant, no confirm (Canvas-safe) ---
-                const delBtn = t.closest ? t.closest('[data-action="delete-session"], .js-delete-session') : null;
-                if (delBtn) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const id = delBtn.getAttribute('data-id');
-                    if (id != null && id !== '') {
-                        // Direct delete — no modal (modals can fail in Canvas sandboxes)
-                        if (typeof window.performDeleteSession === 'function') {
-                            window.performDeleteSession(id);
-                        } else if (typeof performDeleteSession === 'function') {
-                            performDeleteSession(id);
-                        }
-                    }
-                    return;
-                }
-
-                // --- Bulk delete ---
-                if (t.closest && t.closest('#btn-delete-selected')) {
-                    e.preventDefault();
-                    deleteSelectedSessions();
-                    return;
-                }
-
-                // --- Clear All trigger ---                if (t.closest && t.closest('#btn-clear-all-logs')) {
-                    e.preventDefault();
-                    confirmClearAllLogs();
-                    return;
-                }
-
-                // --- Delete confirm modal ---
-                if (t.closest && t.closest('#btn-delete-confirm')) {
-                    e.preventDefault();
-                    executePendingDelete();
-                    return;
-                }
-                if (t.id === 'delete-confirm-modal-backdrop' || (t.closest && t.closest('#btn-delete-cancel'))) {
-                    e.preventDefault();
-                    closeDeleteConfirmModal();
-                    return;
-                }
-
-                // --- Clear-all modal ---
-                if (t.closest && t.closest('#btn-clear-logs-confirm')) {
-                    e.preventDefault();
-                    executeClearAllLogs();
-                    return;
-                }
-                if (t.closest && t.closest('#btn-clear-logs-cancel')) {
-                    e.preventDefault();
-                    closeClearLogsModal();
-                    return;
-                }
-
-                // --- Print ---
-                if (t.closest && t.closest('#btn-print-logs')) {
-                    e.preventDefault();
-                    try { window.print(); } catch (err) {
-                        showToast('Print', 'Print is blocked in this environment. Use Export CSV instead.');
-                    }
-                    return;
-                }
-            }, true); // capture = true
-        }
-        window.setupEventDelegation = setupEventDelegation;
-
-        // Boot immediately + on DOM ready (covers both normal browsers and Gemini Canvas)
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', initApp);
-        } else {
-            initApp();
-        }
-        // Extra safety: run again shortly after in case Canvas rewrites DOM
-        setTimeout(function() {
-            window.__smkAppInitialized = false;
-            initApp();
-        }, 300);
-        setTimeout(function() {
-            window.__smkAppInitialized = false;
-            initApp();
-        }, 1000);
-
-        function populateDropdowns() {
-            const classSelects = ['select-class', 'timetable-view-class', 'roster-manager-class-select'];
-            classSelects.forEach(id => {
-                const el = document.getElementById(id);
-                if (!el) return;
-                el.innerHTML = window.ALL_CLASSES.map(c => `<option value="${c}">${c}</option>`).join('');
-            });
-
-            const subjectSelect = document.getElementById('select-subject');
-            if (subjectSelect) {
-                subjectSelect.innerHTML = window.SUBJECT_LIST.map(s => `<option value="${s}">${s}</option>`).join('');
-            }
-
-            const teacherSelect = document.getElementById('select-teacher');
-            if (teacherSelect) {
-                teacherSelect.innerHTML = window.MASTER_TEACHER_LIST.map(t => `<option value="${t}">${t}</option>`).join('');
-            }
-
-            const startSelect = document.getElementById('select-start-time');
-            const endSelect = document.getElementById('select-end-time');
-            if (startSelect && endSelect) {
-                startSelect.innerHTML = window.TIME_SLOTS.map(t => `<option value="${t}">${t}</option>`).join('');
-                endSelect.innerHTML = window.TIME_SLOTS.map(t => `<option value="${t}">${t}</option>`).join('');
-                if (window.TIME_SLOTS.length > 1) {
-                    startSelect.value = window.TIME_SLOTS[0];
-                    endSelect.value = window.TIME_SLOTS[1];
-                }
-            }
-        }
-
-        function setCurrentDate() {
-            const todayISO = formatDateToISO(new Date());
-
-            const dateInput = document.getElementById('input-date');
-            if (dateInput) dateInput.value = todayISO;
-
-            const ttDateInput = document.getElementById('timetable-date');
-            if (ttDateInput) ttDateInput.value = todayISO;
-
-            const analyticsDateInput = document.getElementById('analytics-date-input');
-            if (analyticsDateInput) analyticsDateInput.value = todayISO;
-
-            onDateChange();
-        }
-
-        function switchTab(tabId) {
-            const tabs = ['tracker', 'timetable', 'history', 'roster', 'analytics'];
-            tabs.forEach(t => {
-                const section = document.getElementById(`tab-${t}`);
-                if (section) section.classList.add('hidden');
-
-                const btn = document.getElementById(`tab-btn-${t}`);
-                if (btn) {
-                    btn.classList.remove('border-emerald-600', 'text-emerald-600');
-                    btn.classList.add('border-transparent', 'text-slate-500');
-                }
-            });
-
-            const activeSection = document.getElementById(`tab-${tabId}`);
-            if (activeSection) activeSection.classList.remove('hidden');
-
-            const activeBtn = document.getElementById(`tab-btn-${tabId}`);
-            if (activeBtn) {
-                activeBtn.classList.remove('border-transparent', 'text-slate-500');
-                activeBtn.classList.add('border-emerald-600', 'text-emerald-600');
-            }
-
-            if (tabId === 'tracker') {
-                onClassChange();
-            } else if (tabId === 'history') {
-                renderHistoryTable();
-            } else if (tabId === 'timetable') {
-                renderTimetableGrid();
-            } else if (tabId === 'roster') {
-                onRosterManagerClassChange();
-            } else if (tabId === 'analytics') {
-                renderAnalyticsDashboard();
-            }
-        }
-
-        function onDateChange() {
-            const dateInputVal = document.getElementById('input-date').value;
-            const dateObj = parseDateString(dateInputVal) || new Date();
-            const dayName = getDayKeyFromDate(dateObj);
-
-            document.getElementById('display-day-badge').innerText = dayName;
-            document.getElementById('current-date-display').innerText = formatDateToISO(dateObj);
-            updateBannerInfo();
-        }
-
-        function onClassChange() {
-            const className = document.getElementById('select-class').value;
-            updateBannerInfo();
-
-            window.currentRosterStudents = window.rosters[className] || Array.from({ length: 30 }, (_, i) => `Student ${i + 1}`);
-
-            const total = window.currentRosterStudents.length;
-            const totalInput = document.getElementById('input-total-enrolled');
-            const presentInput = document.getElementById('input-present-count');
-
-            if (totalInput) totalInput.value = total;
-            if (presentInput) presentInput.value = total;
-
-            const container = document.getElementById('absentee-cards-container');
-            if (container) container.innerHTML = '';
-
-            updateAttendanceCalc();
-        }
-
-        function updateBannerInfo() {
-            const className = document.getElementById('select-class').value;
-            const subject = document.getElementById('select-subject').value;
-            const teacher = document.getElementById('select-teacher').value;
-            const startTime = document.getElementById('select-start-time').value;
-            const endTime = document.getElementById('select-end-time').value;
-            const day = document.getElementById('display-day-badge').innerText;
-
-            document.getElementById('badge-class-name').innerText = className;
-            document.getElementById('banner-subject-title').innerText = subject;
-            document.getElementById('badge-teacher-name').innerHTML =
-                `<i data-lucide="user" class="w-3.5 h-3.5 text-emerald-400"></i> Teacher: ${teacher}`;
-            document.getElementById('banner-subject-details').innerHTML = `
-                        <span><i data-lucide="clock" class="w-3.5 h-3.5 inline mr-1 text-teal-400"></i> Slot: ${startTime} - ${endTime}</span>
-                        <span><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1 text-teal-400"></i> Day: ${day}</span>
-                    `;
-            lucide.createIcons();
-        }
-
-        function changePresentCount(delta) {
-            const input = document.getElementById('input-present-count');
-            const total = parseInt(document.getElementById('input-total-enrolled').value) || 0;
-            let val = parseInt(input.value) || 0;
-            val += delta;
-
-            if (val < 0) val = 0;
-            if (val > total) val = total;
-
-            input.value = val;
-            updateAttendanceCalc();
-        }
-
-        function updateAttendanceCalc() {
-            const total = parseInt(document.getElementById('input-total-enrolled').value) || 0;
-            let present = parseInt(document.getElementById('input-present-count').value) || 0;
-
-            if (present > total) {
-                present = total;
-                document.getElementById('input-present-count').value = present;
-            }
-
-            const absent = total - present;
-            const rate = total > 0 ? ((present / total) * 100).toFixed(1) : 0;
-
-            const absentCountEl = document.getElementById('calc-absent-count');
-            const absentBadgeEl = document.getElementById('calc-absent-badge');
-            const rateBadgeEl = document.getElementById('rate-status-badge');
-
-            if (absentCountEl) absentCountEl.innerText = absent;
-            if (absentBadgeEl) absentBadgeEl.innerText = `${absent} absent`;
-            if (rateBadgeEl) rateBadgeEl.innerText = `Rate: ${rate}%`;
-
-            renderAbsenteeCards(absent);
-        }
-
-        function renderAbsenteeCards(count) {
-            const container = document.getElementById('absentee-cards-container');
-            const section = document.getElementById('absentee-section');
-            if (!container || !section) return;
-
-            document.getElementById('absentee-section-count').innerText = count;
-
-            if (count <= 0) {
-                section.classList.add('hidden');
-                return;
-            }
-            section.classList.remove('hidden');
-
-            const currentCount = container.children.length;
-            const reasonsHtml = window.ABSENCE_REASONS.map(r => `<option value="${r}">${r}</option>`).join('');
-            let studentsHtml = `<option value="">-- Select Student --</option>` + window.currentRosterStudents.map(s =>
-                `<option value="${s}">${s}</option>`).join('');
-
-            if (count > currentCount) {
-                for (let i = currentCount; i < count; i++) {
-                    const card = document.createElement('div');
-                    card.className = "bg-rose-50/40 border border-rose-200 rounded-xl p-3 space-y-2.5 shadow-xs";
-                    card.id = `absentee-card-${i}`;
-                    card.innerHTML = `
-                                <div class="flex items-center justify-between border-b border-rose-100 pb-1.5">
-                                    <span class="inline-block bg-rose-100 text-rose-800 text-[11px] font-bold px-2 py-0.5 rounded border border-rose-200">
-                                        Absentee #${i + 1}
-                                    </span>
-                                </div>
-
-                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                                    <div class="space-y-1">
-                                        <label class="block text-[10px] font-bold uppercase tracking-wide text-slate-500">Student Name</label>
-                                        <select id="absentee-select-${i}" class="w-full bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-800 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition">
-                                            ${studentsHtml}
-                                        </select>
-                                    </div>
-
-                                    <div class="space-y-1">
-                                        <label class="block text-[10px] font-bold uppercase tracking-wide text-slate-500">Reason</label>
-                                        <select id="absentee-reason-${i}" class="w-full bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs font-bold text-rose-700 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition">
-                                            ${reasonsHtml}
-                                        </select>
-                                    </div>
-                                </div>
-
-                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                                    <div class="space-y-1">
-                                        <label class="block text-[10px] font-bold uppercase tracking-wide text-slate-500">Manual Name (Optional)</label>
-                                        <input type="text" id="absentee-name-${i}" placeholder="If not in list..." class="w-full bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-800 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition">
-                                    </div>
-
-                                    <div class="space-y-1">
-                                        <label class="block text-[10px] font-bold uppercase tracking-wide text-slate-500">Remark / Notes</label>
-                                        <input type="text" id="absentee-remark-${i}" placeholder="Optional details..." class="w-full bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-800 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition">
-                                    </div>
-                                </div>
-                            `;
-                    container.appendChild(card);
-                }
-            } else if (count < currentCount) {
-                for (let i = currentCount - 1; i >= count; i--) {
-                    container.removeChild(container.children[i]);
-                }
-            }
-        }
-
-        function toggleControlsSection() {
-            const body = document.getElementById('controls-body');
-            const icon = document.getElementById('controls-toggle-icon');
-            const text = document.getElementById('controls-toggle-text');
-            if (!body) return;
-
-            if (body.classList.contains('hidden')) {
-                body.classList.remove('hidden');
-                icon.classList.add('rotate-180');
-                text.innerText = "Collapse Setup";
-            } else {
-                body.classList.add('hidden');
-                icon.classList.remove('rotate-180');
-                text.innerText = "Expand Setup";
-            }
-        }
-
-        function toggleAbsenteeSection() {
-            const container = document.getElementById('absentee-cards-container');
-            const icon = document.getElementById('absentee-toggle-icon');
-            const text = document.getElementById('absentee-toggle-text');
-            if (!container) return;
-
-            if (container.classList.contains('hidden')) {
-                container.classList.remove('hidden');
-                icon.classList.add('rotate-180');
-                text.innerText = "Collapse";
-            } else {
-                container.classList.add('hidden');
-                icon.classList.remove('rotate-180');
-                text.innerText = "Expand";
-            }
-        }
-
-        function saveAttendanceSession() {
-            updateAttendanceCalc();
-
-            const rawDate = document.getElementById('input-date').value;
-            const parsedD = parseDateString(rawDate) || new Date();
-            const date = formatDateToISO(parsedD);
-            const dayKey = getDayKeyFromDate(parsedD);
-
-            const className = document.getElementById('select-class').value;
-            const subject = document.getElementById('select-subject').value;
-            const teacher = document.getElementById('select-teacher').value;
-            const startTime = document.getElementById('select-start-time').value;
-            const endTime = document.getElementById('select-end-time').value;
-
-            const total = parseInt(document.getElementById('input-total-enrolled').value) || 0;
-            const present = parseInt(document.getElementById('input-present-count').value) || 0;
-            const absent = total - present;
-            const rate = total > 0 ? ((present / total) * 100).toFixed(1) + '%' : '0%';
-
-            if (!date || !className) {
-                showToast("Missing Fields", "Please ensure Date and Class are selected.");
-                return;
-            }
-
-            let absenteesList = [];
-            for (let i = 0; i < absent; i++) {
-                const selectEl = document.getElementById(`absentee-select-${i}`);
-                const nameEl = document.getElementById(`absentee-name-${i}`);
-                const reasonEl = document.getElementById(`absentee-reason-${i}`);
-                const remarkEl = document.getElementById(`absentee-remark-${i}`);
-
-                let sName = nameEl && nameEl.value.trim() ? nameEl.value.trim() : (selectEl && selectEl.value ? selectEl.value :
-                    "Unknown Student");
-                let sReason = reasonEl ? reasonEl.value : "No Reason";
-
-                if (remarkEl && remarkEl.value.trim()) {
-                    sReason += ` (${remarkEl.value.trim()})`;
-                }
-
-                absenteesList.push({ name: sName, reason: sReason });
-            }
-
-            const sessionRecord = {
-                id: Date.now(),
-                date,
-                dayKey,
-                class: className,
-                subject,
-                teacher,
-                startTime,
-                endTime,
-                total,
-                present,
-                absent,
-                rate,
-                absentees: absenteesList
-            };
-
-            window.savedSessions = [sessionRecord, ...window.savedSessions.filter(s => s.id !== sessionRecord.id)];
-            window.safeSetItem('smk_saved_sessions_v1', JSON.stringify(window.savedSessions));
-
-            if (typeof window.saveSessionToCloud === 'function') {
-                window.saveSessionToCloud(sessionRecord);
-            }
-
-            refreshAllDataViews();
-
-            showToast("Session Saved", `Attendance for ${className} recorded successfully.`);
-        }
-
-        function toggleLogAbsentee(id) {
-            if (window.expandedLogSessions.has(id)) {
-                window.expandedLogSessions.delete(id);
-            } else {
-                window.expandedLogSessions.add(id);
-            }
-            renderHistoryTable();
-        }
-
-        // Search & Multi-Select Log Functions
-        function toggleSelectAllLogs(masterCheckbox) {
-            const checkboxes = document.querySelectorAll('.log-item-checkbox');
-            checkboxes.forEach(cb => {
-                cb.checked = masterCheckbox.checked;
-                const id = parseInt(cb.getAttribute('data-id'));
-                if (masterCheckbox.checked) {
-                    window.selectedLogIds.add(id);
-                } else {
-                    window.selectedLogIds.delete(id);
-                }
-            });
-            updateDeleteSelectedButton();
-        }
-
-        function toggleLogSelection(id, cb) {
-            if (cb.checked) {
-                window.selectedLogIds.add(id);
-            } else {
-                window.selectedLogIds.delete(id);
-            }
-            updateDeleteSelectedButton();
-        }
-
-        function updateDeleteSelectedButton() {
-            const btn = document.getElementById('btn-delete-selected');
-            const countEl = document.getElementById('selected-count');
-            if (!btn || !countEl) return;
-
-            const count = window.selectedLogIds.size;
-            countEl.innerText = count;
-            if (count > 0) {
-                btn.classList.remove('hidden');
-            } else {
-                btn.classList.add('hidden');
-            }
-        }
-
-        function renderHistoryTable() {
-            const tbody = document.getElementById('history-table-body');
-            if (!tbody) return;
-
-            const searchVal = (document.getElementById('log-search-input')?.value || '').toLowerCase().trim();
-            const totalCountEl = document.getElementById('total-logs-count');
-            if (totalCountEl) totalCountEl.innerText = window.savedSessions.length;
-
-            let filtered = window.savedSessions.filter(s => {
-                if (!searchVal) return true;
-                return (s.class || '').toLowerCase().includes(searchVal) ||
-                    (s.subject || '').toLowerCase().includes(searchVal) ||
-                    (s.teacher || '').toLowerCase().includes(searchVal) ||
-                    (s.date || '').toLowerCase().includes(searchVal);
-            });
-
-            const sorted = [...filtered].sort((a, b) => b.id - a.id);
-
-            let html = '';
-            sorted.forEach(s => {
-                const isExpanded = window.expandedLogSessions.has(s.id);
-                const isChecked = window.selectedLogIds.has(s.id);
-                const absCount = s.absentees ? s.absentees.length : 0;
-                const visibleAbsentees = (absCount > 2 && !isExpanded) ? s.absentees.slice(0, 2) : s.absentees;
-
-                const absenteeBadges = visibleAbsentees.map(ab => {
-                    const reasonBadge = (ab.reason && ab.reason !== "N/A" && ab.reason !== "No Reason") ?
-                        `<span class="opacity-80 font-normal ml-1 text-[10px]">(${ab.reason})</span>` :
-                        '';
-                    return `<span class="inline-block bg-rose-100 text-rose-800 border border-rose-200 px-2.5 py-1 rounded-lg text-[11px] font-bold mr-1.5 mb-1.5 shadow-xs leading-tight" title="${ab.reason || ''}">${ab.name}${reasonBadge}</span>`;
-                }).join('');
-
-                let absDisplay = '';
-                if (s.absent <= 0 || absCount === 0) {
-                    absDisplay = '<span class="text-slate-400 italic text-xs">- None -</span>';
-                } else {
-                    absDisplay = absenteeBadges;
-                    if (absCount > 2) {
-                        if (!isExpanded) {
-                            absDisplay +=
-                                `<button onclick="toggleLogAbsentee(${s.id})" class="inline-flex items-center gap-1 text-[11px] font-bold text-rose-700 bg-rose-50 hover:bg-rose-100 border border-rose-200 px-2 py-0.5 rounded-lg transition mt-0.5 shadow-2xs">
-                                        +${absCount - 2} more <i data-lucide="chevron-down" class="w-3 h-3"></i>
-                                    </button>`;
-                        } else {
-                            absDisplay +=
-                                `<div class="mt-1"><button onclick="toggleLogAbsentee(${s.id})" class="inline-flex items-center gap-1 text-[11px] font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 border border-slate-300 px-2 py-0.5 rounded-lg transition shadow-2xs">
-                                        Collapse <i data-lucide="chevron-up" class="w-3 h-3"></i>
-                                    </button></div>`;
-                        }
-                    }
-                }
-
-                html += `
-                            <tr class="hover:bg-slate-50 transition-colors">
-                                <td class="py-3.5 px-3 text-center">
-                                    <input type="checkbox" data-id="${s.id}" ${isChecked ? 'checked' : ''} onchange="toggleLogSelection(${s.id}, this)" class="log-item-checkbox rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
-                                </td>
-                                <td class="py-3.5 px-4 whitespace-nowrap font-medium text-slate-800">${s.date} <span class="text-slate-400 font-normal ml-1 text-xs">(${s.dayKey})</span></td>
-                                <td class="py-3.5 px-4 font-bold text-emerald-600">${s.class}</td>
-                                <td class="py-3.5 px-4 font-semibold text-slate-700">${s.subject}</td>
-                                <td class="py-3.5 px-4 truncate max-w-[160px] text-slate-600 uppercase text-xs font-medium tracking-wide" title="${s.teacher}">${s.teacher}</td>
-                                <td class="py-3.5 px-4 whitespace-nowrap text-slate-500">${s.startTime} - ${s.endTime}</td>
-                                <td class="py-3.5 px-4 text-center font-bold text-slate-800">${s.present} / ${s.total}</td>
-                                <td class="py-3.5 px-4 text-center text-rose-600 font-bold">${s.absent}</td>
-                                <td class="py-3.5 px-4 min-w-[220px] max-w-[320px] leading-tight pt-3.5">${absDisplay}</td>
-                                <td class="py-3.5 px-4 text-center font-bold text-sky-600">${s.rate}</td>
-                                <td class="py-3.5 px-4 text-right whitespace-nowrap">
-                                    <button type="button" data-action="delete-session" data-id="${s.id}" class="js-delete-session bg-rose-50 hover:bg-rose-600 text-rose-700 hover:text-white border border-rose-200 hover:border-rose-600 px-2.5 py-1.5 rounded-lg text-[11px] font-bold transition inline-flex items-center gap-1 cursor-pointer" title="Delete this log">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
-                                        <span class="pointer-events-none">Delete</span>
-                                    </button>
-                                </td>
-                            </tr>
-                        `;
-            });
-
-            if (sorted.length === 0) {
-                html =
-                    `<tr><td colspan="11" class="text-center py-8 text-slate-500 text-sm">No attendance sessions found. Create a log or restore CSV logs to get started.</td></tr>`;
-            }
-            tbody.innerHTML = html;
-            updateDeleteSelectedButton();
-            updateRestoredDatesDropdown();
-            lucide.createIcons();
-        }
-        window.renderHistoryTable = renderHistoryTable;
-
-        // ========== DELETE SYSTEM (Canvas-safe: no confirm/alert, event delegation) ==========
-        window._pendingDeleteId = null;
-        window._pendingDeleteMode = null; // 'single' | 'bulk'
-
-        function openDeleteConfirmModal(mode, id) {
-            window._pendingDeleteMode = mode;
-            window._pendingDeleteId = id != null ? id : null;
-            const titleEl = document.getElementById('delete-confirm-title');
-            const bodyEl = document.getElementById('delete-confirm-body');
-            if (mode === 'bulk') {
-                const count = window.selectedLogIds.size;
-                if (titleEl) titleEl.textContent = 'Delete selected logs?';
-                if (bodyEl) bodyEl.textContent = 'Are you sure you want to delete ' + count + ' selected session log(s)?';
-            } else {
-                if (titleEl) titleEl.textContent = 'Delete this log?';
-                if (bodyEl) bodyEl.textContent = 'Are you sure you want to permanently delete this attendance session?';
-            }
-            const modal = document.getElementById('delete-confirm-modal-backdrop');
-            if (modal) {
-                modal.classList.remove('hidden');
-                try { lucide.createIcons(); } catch (e) {}
-            }
-        }
-
-        function closeDeleteConfirmModal() {
-            const modal = document.getElementById('delete-confirm-modal-backdrop');
-            if (modal) modal.classList.add('hidden');
-            window._pendingDeleteId = null;
-            window._pendingDeleteMode = null;
-        }
-
-        function executePendingDelete() {
-            const mode = window._pendingDeleteMode;
-            const id = window._pendingDeleteId;
-            closeDeleteConfirmModal();
-            if (mode === 'bulk') {
-                performBulkDelete();
-            } else if (id != null) {
-                performDeleteSession(id);
-            }
-        }
-
-        function refreshAllDataViews() {
-            try { renderHistoryTable(); } catch (e) {}
-            try { renderTimetableGrid(); } catch (e) {}
-            try { renderAnalyticsDashboard(); } catch (e) {}
-        }
-        window.refreshAllDataViews = refreshAllDataViews;
-
-        function performDeleteSession(id) {
-            const session = window.savedSessions.find(s => String(s.id) === String(id));
-            if (!session) {
-                showToast("Error", "Session not found.");
-                return;
-            }
-            window.savedSessions = window.savedSessions.filter(s => String(s.id) !== String(id));
-            try {
-                window.selectedLogIds.delete(Number(id));
-                window.selectedLogIds.delete(id);
-                window.selectedLogIds.delete(String(id));
-            } catch (e) {}
-            window.safeSetItem('smk_saved_sessions_v1', JSON.stringify(window.savedSessions));
-            if (typeof window.deleteSessionFromCloud === 'function') {
-                try { window.deleteSessionFromCloud(session); } catch (e) {}
-            }
-            refreshAllDataViews();
-            showToast("Session Deleted", "Record removed. Analytics updated.");
-        }
-
-        // Keep old name for compatibility — direct delete (no confirm popup)
-        function deleteSession(id) {
-            performDeleteSession(id);
-        }
-        window.deleteSession = deleteSession;
-        window.performDeleteSession = performDeleteSession;
-
-        function performBulkDelete() {
-            const count = window.selectedLogIds.size;
-            if (count === 0) return;
-            const idsToDelete = Array.from(window.selectedLogIds);
-            idsToDelete.forEach(id => {
-                const session = window.savedSessions.find(s => String(s.id) === String(id));
-                if (session && typeof window.deleteSessionFromCloud === 'function') {
-                    try { window.deleteSessionFromCloud(session); } catch (e) {}
-                }
-            });
-            window.savedSessions = window.savedSessions.filter(s => {
-                return !window.selectedLogIds.has(s.id) &&
-                    !window.selectedLogIds.has(Number(s.id)) &&
-                    !window.selectedLogIds.has(String(s.id));
-            });
-            window.selectedLogIds.clear();
-            window.safeSetItem('smk_saved_sessions_v1', JSON.stringify(window.savedSessions));
-            const masterCb = document.getElementById('select-all-logs');
-            if (masterCb) masterCb.checked = false;
-            refreshAllDataViews();
-            showToast("Bulk Deletion Complete", count + " logs deleted. Analytics updated.");
-        }
-
-        function deleteSelectedSessions() {
-            if (window.selectedLogIds.size === 0) return;
-            openDeleteConfirmModal('bulk', null);
-        }
-        window.deleteSelectedSessions = deleteSelectedSessions;
-        window.openDeleteConfirmModal = openDeleteConfirmModal;
-        window.closeDeleteConfirmModal = closeDeleteConfirmModal;
-        window.executePendingDelete = executePendingDelete;
-        window.performBulkDelete = performBulkDelete;
-
-        function confirmClearAllLogs() {
-            if (window.savedSessions.length === 0) {
-                showToast("No Logs", "History log is already empty.");
-                return;
-            }
-            document.getElementById('clear-logs-modal-backdrop').classList.remove('hidden');
-        }
-        window.confirmClearAllLogs = confirmClearAllLogs;
-
-        function closeClearLogsModal() {
-            document.getElementById('clear-logs-modal-backdrop').classList.add('hidden');
-        }
-        window.closeClearLogsModal = closeClearLogsModal;
-
-        function executeClearAllLogs() {
-            window.savedSessions.forEach(session => {
-                if (typeof window.deleteSessionFromCloud === 'function') {
-                    try { window.deleteSessionFromCloud(session); } catch (e) {}
-                }
-            });
-
-            window.savedSessions = [];
-            window.selectedLogIds.clear();
-            window.safeSetItem('smk_saved_sessions_v1', JSON.stringify([]));
-
-            closeClearLogsModal();
-            refreshAllDataViews();
-            showToast("Cleared All Logs", "All logs cleared. Analytics updated.");
-        }
-        window.executeClearAllLogs = executeClearAllLogs;
-
-        // Timetable Viewer Logic with Restored Logs Mapping
-        function getWeekBounds(dateStr) {
-            const d = parseDateString(dateStr) || new Date();
-            const day = d.getDay();
-            const diffToMon = day === 0 ? -6 : 1 - day;
-
-            const monday = new Date(d.getFullYear(), d.getMonth(), d.getDate() + diffToMon);
-            const sunday = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + 6);
-
-            return {
-                start: formatDateToISO(monday),
-                end: formatDateToISO(sunday)
-            };
-        }
-
-        function updateRestoredDatesDropdown() {
-            const wrapper = document.getElementById('timetable-date-dropdown-wrapper');
-            const select = document.getElementById('timetable-restored-dates');
-            if (!wrapper || !select) return;
-
-            const dates = Array.from(new Set(window.savedSessions.map(s => s.date))).filter(Boolean).sort().reverse();
-            if (dates.length > 0) {
-                select.innerHTML = `<option value="">-- Jump to Log Date --</option>` +
-                    dates.map(d => `<option value="${d}">Log Date: ${d}</option>`).join('');
-                wrapper.classList.remove('hidden');
-            } else {
-                wrapper.classList.add('hidden');
-            }
-        }
-
-        function jumpToRestoredDate(dateVal) {
-            if (!dateVal) return;
-            const ttInput = document.getElementById('timetable-date');
-            if (ttInput) {
-                ttInput.value = dateVal;
-                renderTimetableGrid();
-                showToast("Timetable Jumped", `Viewing timetable for week of ${dateVal}`);
-            }
-        }
-
-        function renderTimetableGrid() {
-            const className = document.getElementById('timetable-view-class').value;
-            const refDate = document.getElementById('timetable-date').value || formatDateToISO(new Date());
-            const bounds = getWeekBounds(refDate);
-
-            document.getElementById('tt-class-title').innerText = className;
-            document.getElementById('tt-class-teacher').innerHTML =
-                `Class Attendance Grid <br><span class="text-[10.5px] font-bold text-emerald-200 tracking-wider">WEEK: ${bounds.start} to ${bounds.end}</span>`;
-
-            const theadTr = document.querySelector('#tab-timetable thead tr');
-            if (theadTr) {
-                let ths = '';
-                window.TIME_SLOTS.forEach((slot, i) => {
-                    ths +=
-                        `<th class="p-2 border-r border-slate-800 min-w-[65px]"><span class="text-xs font-extrabold text-slate-100">${i+1}</span><br><span class="text-[9.5px] font-medium text-slate-400">${slot}</span></th>`;
-                });
-                theadTr.innerHTML =
-                    `<th class="p-2.5 border-r border-slate-800 font-bold w-16 sticky left-0 bg-slate-950 z-10 text-white">Day</th>` +
-                    ths;
-            }
-
-            // Filter sessions for selected class matching week bounds OR date parsing
-            const classSessions = window.savedSessions.filter(s => {
-                if (s.class !== className) return false;
-                const sIso = formatDateToISO(parseDateString(s.date));
-                return sIso >= bounds.start && sIso <= bounds.end;
-            });
-
-            document.getElementById('tt-stats-badge').innerText = `${classSessions.length} recorded session(s) this week`;
-
-            const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
-            const tbody = document.getElementById('timetable-grid-body');
-            let html = '';
-
-            days.forEach(day => {
-                html +=
-                    `<tr class="hover:bg-slate-50/50"><td class="p-2.5 border-r border-slate-200 font-bold bg-slate-100 uppercase text-[11px] tracking-wide text-slate-700 sticky left-0 z-10">${day}</td>`;
-
-                window.TIME_SLOTS.forEach(slot => {
-                    const sess = classSessions.find(s => {
-                        const parsedD = parseDateString(s.date);
-                        const sDay = getDayKeyFromDate(parsedD).toUpperCase().slice(0, 3);
-                        const matchDay = sDay === day.toUpperCase();
-                        if (!matchDay) return false;
-
-                        if (s.startTime === slot) return true;
-                        if (s.startTime && s.endTime) {
-                            return slot >= s.startTime && slot < s.endTime;
-                        }
-                        return false;
-                    });
-
-                    if (sess) {
-                        const abbr = getSubjectAbbr(sess.subject);
-                        const displayStat = `${sess.present}/${sess.total}`;
-
-                        html += `
-                                    <td class="p-1 border-r border-slate-200 align-middle group relative">
-                                        <div class="bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg p-1.5 h-[52px] flex flex-col items-center justify-center gap-0.5 shadow-sm transition-colors relative cursor-default">
-                                            <span class="text-[11px] font-extrabold tracking-wide uppercase leading-none">${abbr}</span>
-                                            <span class="text-[10px] font-bold text-emerald-100 flex items-center gap-0.5 leading-none mt-0.5">
-                                                ${displayStat}
-                                            </span>
-                                            <button type="button" data-action="delete-session" data-id="${sess.id}" class="js-delete-session absolute -top-1.5 -right-1.5 bg-rose-600 text-white rounded-full w-4 h-4 text-[10px] flex items-center justify-center shadow-md hover:bg-rose-700 z-10 cursor-pointer" title="Remove Session">×</button>
-                                        </div>
-                                    </td>`;
-                    } else {
-                        html +=
-                            `<td class="p-1 border-r border-slate-200"><div class="h-[52px] rounded-lg border border-dashed border-slate-200/80 bg-slate-50/30 flex items-center justify-center text-slate-300 text-xs font-semibold">-</div></td>`;
-                    }
-                });
-                html += `</tr>`;
-            });
-
-            tbody.innerHTML = html;
-            lucide.createIcons();
-        }
-
-        function onRosterManagerClassChange() {
-            const className = document.getElementById('roster-manager-class-select').value;
-            document.getElementById('rm-class-name').innerText = className;
-
-            const students = window.rosters[className] || [];
-            document.getElementById('rm-total-students').innerText = `${students.length} Pax`;
-
-            const tbody = document.getElementById('roster-manager-table-body');
-            let html = '';
-            if (students.length === 0) {
-                html =
-                    `<tr><td colspan="2" class="text-center py-4 text-slate-500 text-xs">No specific roster found. System will generate default placeholders.</td></tr>`;
-            } else {
-                students.forEach((s, i) => {
-                    html +=
-                        `<tr class="hover:bg-slate-50"><td class="py-2.5 px-4 text-center font-medium text-slate-500">${i+1}</td><td class="py-2.5 px-4 font-bold text-slate-800">${s}</td></tr>`;
-                });
-            }
-            tbody.innerHTML = html;
-        }
-
-        function openRosterModal(className) {
-            window.activeModalClass = className || document.getElementById('select-class').value;
-            document.getElementById('modal-roster-class-name').innerText = window.activeModalClass;
-
-            const students = window.rosters[window.activeModalClass] || [];
-            document.getElementById('input-roster-textarea').value = students.join('\n');
-
-            document.getElementById('roster-modal-backdrop').classList.remove('hidden');
-        }
-
-        function closeRosterModal() {
-            document.getElementById('roster-modal-backdrop').classList.add('hidden');
-        }
-
-        function clearCustomRoster() {
-            document.getElementById('input-roster-textarea').value = "";
-            showToast("Roster Cleared", "Student list cleared (click Save Roster to apply).");
-        }
-        window.clearCustomRoster = clearCustomRoster;
-
-        function saveRosterModal() {
-            const text = document.getElementById('input-roster-textarea').value;
-            const list = text.split('\n').map(s => s.trim().toUpperCase()).filter(s => s.length > 0);
-
-            window.rosters[window.activeModalClass] = list;
-            window.safeSetItem('smk_custom_rosters_v3', JSON.stringify(window.rosters));
-
-            if (typeof window.syncRostersToCloud === 'function') {
-                window.syncRostersToCloud(window.rosters, window.ALL_CLASSES, window.MASTER_TEACHER_LIST, window
-                .SUBJECT_LIST);
-            }
-
-            closeRosterModal();
-            showToast("Roster Updated", `${list.length} students saved for class ${window.activeModalClass}`);
-            refreshAllUI();
-        }
-
-        window.activeListType = "";
-
-        function openListModal(type) {
-            window.activeListType = type;
-            document.getElementById('modal-list-title').innerText = type === 'subjects' ? 'Subjects' : 'Teachers';
-            const list = type === 'subjects' ? window.SUBJECT_LIST : window.MASTER_TEACHER_LIST;
-            document.getElementById('input-list-textarea').value = list.join('\n');
-
-            document.getElementById('list-edit-modal-backdrop').classList.remove('hidden');
-        }
-
-        function closeListModal() {
-            document.getElementById('list-edit-modal-backdrop').classList.add('hidden');
-        }
-
-        function clearList() {
-            document.getElementById('input-list-textarea').value = "";
-            showToast("List Cleared", "List cleared (click Save List to apply).");
-        }
-        window.clearList = clearList;
-
-        function saveListModal() {
-            const text = document.getElementById('input-list-textarea').value;
-            const list = text.split('\n').map(s => s.trim()).filter(s => s.length > 0);
-
-            if (window.activeListType === 'subjects') {
-                window.SUBJECT_LIST = list;
-                window.safeSetItem('smk_subjects_v1', JSON.stringify(list));
-            } else {
-                window.MASTER_TEACHER_LIST = list;
-                window.safeSetItem('smk_teachers_v1', JSON.stringify(list));
-            }
-
-            if (typeof window.syncRostersToCloud === 'function') {
-                window.syncRostersToCloud(window.rosters, window.ALL_CLASSES, window.MASTER_TEACHER_LIST, window
-                .SUBJECT_LIST);
-            }
-
-            closeListModal();
-            showToast("List Updated", `Saved ${list.length} items successfully.`);
-            refreshAllUI();
-        }
-
-        function refreshAllUI() {
-            populateDropdowns();
-            onClassChange();
-            onRosterManagerClassChange();
-            renderTimetableGrid();
-            try { renderAnalyticsDashboard(); } catch (e) {}
-        }
-        window.refreshAllUI = refreshAllUI;
-        window.renderAnalyticsDashboard = renderAnalyticsDashboard;
-
-        window.classAttendanceChartInstance = null;
-        window.submissionStatusChartInstance = null;
-
-        function renderAnalyticsDashboard() {
-            const selectedDate = document.getElementById('analytics-date-input').value || formatDateToISO(new Date());
-            const threshold = parseFloat(document.getElementById('analytics-threshold-select').value) || 85;
-
-            const targetSessions = window.savedSessions.filter(s => formatDateToISO(parseDateString(s.date)) === selectedDate);
-
-            const loggedClasses = new Set(targetSessions.map(s => s.class));
-            const pendingClasses = window.ALL_CLASSES.filter(c => !loggedClasses.has(c));
-
-            const totalLoggedCount = targetSessions.length;
-            const pendingCount = pendingClasses.length;
-
-            let totalPresentAll = 0;
-            let totalEnrolledAll = 0;
-            let underperformingSessions = [];
-
-            const classRateMap = {};
-            window.ALL_CLASSES.forEach(c => {
-                const cSessions = targetSessions.filter(s => s.class === c);
-                if (cSessions.length > 0) {
-                    let cPresent = 0,
-                        cTotal = 0;
-                    cSessions.forEach(s => {
-                        cPresent += s.present;
-                        cTotal += s.total;
-
-                        const numericRate = parseFloat(s.rate.replace('%', '')) || 0;
-                        if (numericRate < threshold) {
-                            underperformingSessions.push(s);
-                        }
-                    });
-                    totalPresentAll += cPresent;
-                    totalEnrolledAll += cTotal;
-                    classRateMap[c] = cTotal > 0 ? parseFloat(((cPresent / cTotal) * 100).toFixed(1)) : 0;
-                } else {
-                    classRateMap[c] = null;
-                }
-            });
-
-            const overallSchoolRate = totalEnrolledAll > 0 ? ((totalPresentAll / totalEnrolledAll) * 100).toFixed(1) : 0;
-
-            document.getElementById('kpi-logged-sessions').innerText = totalLoggedCount;
-            document.getElementById('kpi-pending-classes').innerText = `${pendingCount} Classes`;
-            document.getElementById('kpi-school-rate').innerText = `${overallSchoolRate}%`;
-            document.getElementById('kpi-underperforming-count').innerText = `${underperformingSessions.length} Alert(s)`;
-
-            document.getElementById('pending-table-count').innerText = pendingCount;
-            document.getElementById('underperforming-table-count').innerText = underperformingSessions.length;
-
-            const pendingBody = document.getElementById('table-pending-keyin-body');
-            if (pendingClasses.length === 0) {
-                pendingBody.innerHTML =
-                    `<tr><td colspan="3" class="text-center py-6 text-emerald-600 font-bold">✓ All ${window.ALL_CLASSES.length} classes have keyed in attendance for ${selectedDate}!</td></tr>`;
-            } else {
-                pendingBody.innerHTML = pendingClasses.map(c => `
-                            <tr class="hover:bg-amber-50/50">
-                                <td class="py-2.5 px-3 font-bold text-amber-900 flex items-center gap-2">
-                                    <span class="w-2 h-2 rounded-full bg-amber-500"></span> ${c}
-                                </td>
-                                <td class="py-2.5 px-3 text-center">
-                                    <span class="bg-amber-100 text-amber-800 text-[10px] font-bold px-2 py-0.5 rounded border border-amber-200">Pending Key-In</span>
-                                </td>
-                                <td class="py-2.5 px-3 text-right">
-                                    <button onclick="quickSelectClassForAttendance('${c}')" class="text-[11px] font-bold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 px-2 py-1 rounded border border-emerald-200 transition">
-                                        Key In Now
-                                    </button>
-                                </td>
-                            </tr>
-                        `).join('');
-            }
-
-            const underperformingBody = document.getElementById('table-underperforming-body');
-            if (underperformingSessions.length === 0) {
-                underperformingBody.innerHTML =
-                    `<tr><td colspan="4" class="text-center py-6 text-emerald-600 font-bold">✓ No lessons found below ${threshold}% attendance threshold.</td></tr>`;
-            } else {
-                underperformingBody.innerHTML = underperformingSessions.map(s => `
-                            <tr class="hover:bg-rose-50/50">
-                                <td class="py-2.5 px-3">
-                                    <span class="font-bold text-rose-800">${s.class}</span> - <span class="text-slate-700 font-semibold">${s.subject}</span>
-                                    <br><span class="text-[10px] text-slate-400">${s.startTime} - ${s.endTime}</span>
-                                </td>
-                                <td class="py-2.5 px-3 text-slate-600 font-medium text-[11px]">${s.teacher}</td>
-                                <td class="py-2.5 px-3 text-center font-bold text-slate-800">${s.present} / ${s.total}</td>
-                                <td class="py-2.5 px-3 text-center">
-                                    <span class="bg-rose-100 text-rose-800 text-[11px] font-extrabold px-2 py-0.5 rounded border border-rose-200">${s.rate}</span>
-                                </td>
-                            </tr>
-                        `).join('');
-            }
-
-            renderClassAttendanceChart(classRateMap, threshold);
-            renderSubmissionStatusChart(loggedClasses.size, pendingCount);
-
-            lucide.createIcons();
-        }
-
-        function quickSelectClassForAttendance(className) {
-            document.getElementById('select-class').value = className;
-            switchTab('tracker');
-        }
-
-        function renderClassAttendanceChart(classRateMap, threshold) {
-            const ctx = document.getElementById('chart-class-attendance')?.getContext('2d');
-            if (!ctx) return;
-
-            const labels = window.ALL_CLASSES;
-            const rates = labels.map(c => classRateMap[c] !== null ? classRateMap[c] : 0);
-            const backgroundColors = labels.map(c => {
-                const val = classRateMap[c];
-                if (val === null) return 'rgba(203, 213, 225, 0.4)';
-                return val < threshold ? 'rgba(225, 29, 72, 0.85)' : 'rgba(16, 185, 129, 0.85)';
-            });
-
-            if (window.classAttendanceChartInstance) {
-                window.classAttendanceChartInstance.destroy();
-            }
-
-            window.classAttendanceChartInstance = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: labels,
-                    datasets: [{
-                        label: 'Attendance Rate (%)',
-                        data: rates,
-                        backgroundColor: backgroundColors,
-                        borderRadius: 6,
-                        maxBarThickness: 28
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: { display: false },
-                        tooltip: {
-                            callbacks: {
-                                label: function(context) {
-                                    const cls = context.label;
-                                    const rate = classRateMap[cls];
-                                    if (rate === null) return `${cls}: Yet to key in`;
-                                    return `${cls}: ${rate}% Attendance`;
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            max: 100,
-                            ticks: {
-                                callback: value => value + '%'
-                            }
-                        },
-                        x: {
-                            grid: { display: false }
-                        }
-                    }
-                }
-            });
-        }
-
-        function renderSubmissionStatusChart(loggedCount, pendingCount) {
-            const ctx = document.getElementById('chart-submission-status')?.getContext('2d');
-            if (!ctx) return;
-
-            if (window.submissionStatusChartInstance) {
-                window.submissionStatusChartInstance.destroy();
-            }
-
-            window.submissionStatusChartInstance = new Chart(ctx, {
-                type: 'doughnut',
-                data: {
-                    labels: ['Attendance Keyed In', 'Yet to Key In'],
-                    datasets: [{
-                        data: [loggedCount, pendingCount],
-                        backgroundColor: ['rgba(16, 185, 129, 0.85)', 'rgba(245, 158, 11, 0.85)'],
-                        borderWidth: 2,
-                        borderColor: '#ffffff'
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            position: 'bottom',
-                            labels: {
-                                font: { size: 11, weight: 'bold' }
-                            }
-                        }
-                    },
-                    cutout: '68%'
-                }
-            });
-        }
-
-        function showToast(title, msg) {
-            const titleEl = document.getElementById('toast-title');
-            const bodyEl = document.getElementById('toast-body');
-            const t = document.getElementById('toast-msg');
-            if (titleEl) titleEl.innerText = title;
-            if (bodyEl) bodyEl.innerText = msg;
-            if (t) {
-                t.classList.remove('opacity-0', 'translate-y-20', 'pointer-events-none');
-                setTimeout(() => {
-                    t.classList.add('opacity-0', 'translate-y-20', 'pointer-events-none');
-                }, 3000);
-            }
-        }
-        window.showToast = showToast;
-
-        function copySummaryToClipboard() {
-            const className = document.getElementById('select-class').value;
-            const subject = document.getElementById('select-subject').value;
-            const total = parseInt(document.getElementById('input-total-enrolled').value) || 0;
-            const present = parseInt(document.getElementById('input-present-count').value) || 0;
-            const absent = total - present;
-
-            let absentList = [];
-            for (let i = 0; i < absent; i++) {
-                const selectEl = document.getElementById(`absentee-select-${i}`);
-                const nameEl = document.getElementById(`absentee-name-${i}`);
-                const reasonEl = document.getElementById(`absentee-reason-${i}`);
-                const remarkEl = document.getElementById(`absentee-remark-${i}`);
-
-                let sName = nameEl && nameEl.value.trim() ? nameEl.value.trim() : (selectEl && selectEl.value ? selectEl.value :
-                    "Unknown");
-                let sReason = reasonEl ? reasonEl.value : "No Reason";
-                if (remarkEl && remarkEl.value.trim()) {
-                    sReason += ` (${remarkEl.value.trim()})`;
-                }
-                absentList.push({ name: sName, reason: sReason });
-            }
-
-            let txt = `*ATTENDANCE SUMMARY*\nClass: ${className}\nSubject: ${subject}\nPresent: ${present}/${total}\n`;
-            if (absentList.length > 0) {
-                txt += `\n*Absentees:*\n`;
-                absentList.forEach((a, i) => {
-                    txt += `${i+1}. ${a.name} - ${a.reason}\n`;
-                });
-            } else {
-                txt += `\n*All students present!*`;
-            }
-
-            const el = document.createElement('textarea');
-            el.value = txt;
-            document.body.appendChild(el);
-            el.select();
-            document.execCommand('copy');
-            document.body.removeChild(el);
-            showToast("Copied", "Summary copied to clipboard");
-        }
-
-        function escapeCSV(str) {
-            if (str === null || str === undefined) return '""';
-            const s = String(str);
-            if (s.includes('"') || s.includes(',')) {
-                return `"${s.replace(/"/g, '""')}"`;
-            }
-            return s;
-        }
-
-        function parseCSVLine(text) {
-            const result = [];
-            let cur = '';
-            let inQuotes = false;
-            for (let i = 0; i < text.length; i++) {
-                const char = text[i];
-                if (char === '"' && text[i + 1] === '"') {
-                    cur += '"';
-                    i++;
-                } else if (char === '"') {
-                    inQuotes = !inQuotes;
-                } else if (char === ',' && !inQuotes) {
-                    result.push(cur);
-                    cur = '';
-                } else {
-                    cur += char;
-                }
-            }
-            result.push(cur);
-            return result;
-        }
-
-        function exportAllCSV() {
-            if (window.savedSessions.length === 0) {
-                alert("No data to export.");
-                return;
-            }
-            const headers = ["Date", "Class", "Subject", "Teacher", "Slot", "Total", "Present", "Absent", "Absentees", "Rate"];
-            let csvContent = headers.join(",") + "\n";
-
-            const sorted = [...window.savedSessions].sort((a, b) => b.id - a.id);
-            sorted.forEach(s => {
-                const absenteesStr = s.absentees ? s.absentees.map(ab => `${ab.name} (${ab.reason})`).join(" | ") : "";
-                const row = [
-                    s.date, s.class, s.subject, s.teacher, `${s.startTime} - ${s.endTime}`,
-                    s.total, s.present, s.absent, absenteesStr, s.rate
-                ];
-                csvContent += row.map(escapeCSV).join(",") + "\n";
-            });
-
-            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-            const link = document.createElement("a");
-            const url = URL.createObjectURL(blob);
-            link.setAttribute("href", url);
-            link.setAttribute("download", `SMK_Attendance_Logs_${formatDateToISO(new Date())}.csv`);
-            link.style.visibility = 'hidden';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-
-        function handleLogCSVUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-
-            const reader = new FileReader();
-            reader.onload = async function(e) {
-                const text = e.target.result;
-                const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0);
-
-                if (lines.length < 2) {
-                    alert("Invalid CSV or empty file.");
-                    return;
-                }
-
-                const headerLine = lines[0].toLowerCase();
-                if (!headerLine.includes('date') || !headerLine.includes('class') || !headerLine.includes('subject')) {
-                    alert("CSV format unrecognized. Expected headers containing: Date, Class, Subject...");
-                    return;
-                }
-
-                let importedCount = 0;
-                let firstImportedDate = null;
-
-                for (let i = 1; i < lines.length; i++) {
-                    try {
-                        const cols = parseCSVLine(lines[i]);
-                        if (cols.length < 8) continue;
-
-                        const rawDateStr = cols[0];
-                        const dateObj = parseDateString(rawDateStr) || new Date();
-                        const isoDate = formatDateToISO(dateObj);
-                        if (!firstImportedDate) firstImportedDate = isoDate;
-
-                        const className = cols[1];
-                        const subject = cols[2];
-                        const teacher = cols[3];
-
-                        let startTime = "07:00",
-                            endTime = "07:30";
-                        let totalIdx = 5,
-                            presentIdx = 6,
-                            absentIdx = 7,
-                            absenteesIdx = 8,
-                            rateIdx = 9;
-
-                        if (cols[4] && cols[4].includes('-')) {
-                            const pts = cols[4].split('-');
-                            startTime = pts[0].trim();
-                            endTime = pts[1].trim();
-                        } else if (cols[4] && cols[5] && cols[4].includes(':') && cols[5].includes(':')) {
-                            startTime = cols[4].trim();
-                            endTime = cols[5].trim();
-                            totalIdx = 6;
-                            presentIdx = 7;
-                            absentIdx = 8;
-                            rateIdx = 9;
-                            absenteesIdx = 10;
-                        }
-
-                        const total = parseInt(cols[totalIdx]) || 0;
-                        const present = parseInt(cols[presentIdx]) || 0;
-                        const absent = parseInt(cols[absentIdx]) || 0;
-                        const rate = cols[rateIdx] || (total > 0 ? ((present / total) * 100).toFixed(1) + '%' : '0%');
-                        const absenteesStr = cols[absenteesIdx] || "";
-
-                        const dayKey = getDayKeyFromDate(dateObj);
-
-                        const absentees = [];
-                        if (absenteesStr && absenteesStr !== "None" && absenteesStr.trim() !== "") {
-                            const delimiter = absenteesStr.includes('|') ? '|' : ',';
-                            const absParts = absenteesStr.split(delimiter);
-                            absParts.forEach(part => {
-                                part = part.trim();
-                                if (!part) return;
-                                const match = part.match(/(.*?)[\(\[](.*?)[\)\]]/);
-                                if (match) {
-                                    absentees.push({ name: match[1].trim(), reason: match[2].trim() });
-                                } else {
-                                    absentees.push({ name: part, reason: "N/A" });
-                                }
-                            });
-                        }
-
-                        const sessionRecord = {
-                            id: Date.now() + i,
-                            date: isoDate,
-                            dayKey,
-                            class: className,
-                            subject,
-                            teacher,
-                            startTime,
-                            endTime,
-                            total,
-                            present,
-                            absent,
-                            rate,
-                            absentees
-                        };
-
-                        if (teacher && !window.MASTER_TEACHER_LIST.includes(teacher)) {
-                            window.MASTER_TEACHER_LIST.push(teacher);
-                        }
-                        if (subject && !window.SUBJECT_LIST.includes(subject)) {
-                            window.SUBJECT_LIST.push(subject);
-                        }
-                        if (className && !window.ALL_CLASSES.includes(className)) {
-                            window.ALL_CLASSES.push(className);
-                            window.ALL_CLASSES.sort();
-                        }
-
-                        window.savedSessions = [sessionRecord, ...window.savedSessions.filter(s => s.id !== sessionRecord
-                        .id)];
-
-                        if (typeof window.saveSessionToCloud === 'function') {
-                            await window.saveSessionToCloud(sessionRecord);
-                        }
-
-                        importedCount++;
-
-                    } catch (err) {
-                        console.warn("Failed to parse row: ", lines[i], err);
-                    }
-                }
-
-                if (typeof window.syncRostersToCloud === 'function') {
-                    window.syncRostersToCloud(window.rosters, window.ALL_CLASSES, window.MASTER_TEACHER_LIST, window
-                        .SUBJECT_LIST);
-                }
-
-                window.safeSetItem('smk_saved_sessions_v1', JSON.stringify(window.savedSessions));
-                window.safeSetItem('smk_teachers_v1', JSON.stringify(window.MASTER_TEACHER_LIST));
-                window.safeSetItem('smk_subjects_v1', JSON.stringify(window.SUBJECT_LIST));
-
-                if (firstImportedDate) {
-                    const ttInput = document.getElementById('timetable-date');
-                    if (ttInput) ttInput.value = firstImportedDate;
-                }
-
-                refreshAllUI();
-                refreshAllDataViews();
-
-                showToast("Logs Restored & Synced",
-                    `Successfully imported ${importedCount} sessions. Analytics updated.`);
-                event.target.value = '';
-            };
-            reader.readAsText(file);
-        }
-
-        function handleDBFileUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const text = e.target.result;
-                const lines = text.split('\n');
-
-                let tempRosters = {};
-
-                for (let i = 1; i < lines.length; i++) {
-                    const row = lines[i].split(',').map(s => s.trim());
-                    if (row.length >= 2) {
-                        const c = row[0];
-                        const name = row[1];
-                        if (c && name) {
-                            if (!window.ALL_CLASSES.includes(c)) window.ALL_CLASSES.push(c);
-                            if (!tempRosters[c]) tempRosters[c] = [];
-                            tempRosters[c].push(name.toUpperCase());
-                        }
-                    }
-                }
-
-                if (Object.keys(tempRosters).length > 0) {
-                    window.ALL_CLASSES.sort();
-                    window.rosters = {...window.rosters, ...tempRosters };
-                    window.safeSetItem('smk_custom_rosters_v3', JSON.stringify(window.rosters));
-
-                    if (typeof window.syncRostersToCloud === 'function') {
-                        window.syncRostersToCloud(window.rosters, window.ALL_CLASSES, window.MASTER_TEACHER_LIST, window
-                            .SUBJECT_LIST);
-                    }
-
-                    refreshAllUI();
-                    showToast("Database Synced", "Class rosters successfully imported.");
-                } else {
-                    alert("No valid class/student data found in CSV file.");
-                }
-                event.target.value = '';
-            };
-            reader.readAsText(file);
-        }
-    </script>
-</body>
-</html>
+            try { setupEventDelegation(); } catch (e) { console.warn('setupEven