Update index.html

index.html

@@ -210,8 +210,11 @@
                             <button onclick="copySummaryToClipboard()" class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1 transition shadow">
                                 <i data-lucide="copy" class="w-3.5 h-3.5"></i> Copy Summary
                             </button>
-                            <button onclick="saveAttendanceSession()" class="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1 transition shadow border border-emerald-500">
-                                <i data-lucide="save" class="w-4 h-4"></i> Save / Sync
+                            <button id="btn-save-session" onclick="saveAttendanceSession()" class="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1 transition shadow border border-emerald-500">
+                                <i data-lucide="save" class="w-4 h-4"></i> <span id="save-session-label">Save / Sync</span>
+                            </button>
+                            <button id="btn-cancel-edit" onclick="cancelEditSession()" class="hidden bg-slate-600 hover:bg-slate-500 text-white px-3 py-1.5 rounded-lg text-xs font-bold items-center gap-1 transition shadow">
+                                <i data-lucide="x" class="w-4 h-4"></i> Cancel Edit
                             </button>
                         </div>
                     </div>
@@ -342,7 +345,7 @@
                         <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                             <i data-lucide="sheet" class="w-5 h-5 text-emerald-600"></i> Saved Attendance Sessions & Logs
                         </h2>
-                        <p class="text-[13px] text-slate-500 mt-0.5">Review, filter, restore, or delete attendance records</p>
+                        <p class="text-[13px] text-slate-500 mt-0.5">Review, correct, filter, restore, or delete attendance records</p>
                     </div>
                     <div class="flex flex-wrap items-center gap-2">
                         <button onclick="document.getElementById('log-csv-file-input').click()" class="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition shadow-sm" title="Restore old logs from exported CSV">
@@ -351,9 +354,7 @@
                         <button onclick="exportAllCSV()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition shadow-sm">
                             <i data-lucide="download" class="w-4 h-4"></i> Export CSV
                         </button>
-                        <button onclick="window.print()" class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition shadow-sm">
-                            <i data-lucide="printer" class="w-4 h-4"></i> Print
-                        </button>
+                        
                         <button id="btn-delete-selected" onclick="deleteSelectedSessions()" class="bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition shadow-sm hidden">
                             <i data-lucide="trash-2" class="w-4 h-4"></i> Delete Selected (<span id="selected-count">0</span>)
                         </button>
@@ -868,6 +869,8 @@
         window.activeModalClass = "";
         window.expandedLogSessions = new Set();
         window.selectedLogIds = new Set();
+        // ID of the saved attendance session currently being edited.
+        window.editingSessionId = null;
 
         const SUBJECT_ABBR = {
             "Bahasa Melayu": "BM",
@@ -1256,36 +1259,75 @@
             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) {
+            if (!date || !className) {
                 showToast("Missing Fields", "Please ensure Date and Class are selected.");
                 return;
             }
 
+            if (present < 0 || present > total || total < 0) {
+                showToast("Invalid Attendance", "Present students must be between 0 and Total Enrolled.");
+                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 sName = nameEl && nameEl.value.trim()
+                    ? nameEl.value.trim()
+                    : (selectEl && selectEl.value ? selectEl.value : "");
+
+                // Don't silently save an unnamed absentee.
+                if (!sName) {
+                    showToast("Missing Absentee Name", `Please select or enter a name for absentee #${i + 1}.`);
+                    return;
+                }
+
                 let sReason = reasonEl ? reasonEl.value : "No Reason";
-                
+
                 if (remarkEl && remarkEl.value.trim()) {
                     sReason += ` (${remarkEl.value.trim()})`;
                 }
-                
+
                 absenteesList.push({ name: sName, reason: sReason });
             }
 
+            // Prevent accidental duplicate sessions for the same class/date/slot.
+            // During editing, ignore the record being edited.
+            const duplicate = window.savedSessions.find(s =>
+                s.id !== window.editingSessionId &&
+                s.date === date &&
+                s.class === className &&
+                s.startTime === startTime
+            );
+
+            if (duplicate) {
+                const ok = confirm(
+                    `Attendance already exists for ${className} on ${date}, ${startTime}-${duplicate.endTime}.\n\n` +
+                    `Do you want to replace that existing record instead?`
+                );
+                if (!ok) return;
+
+                // Delete the duplicate from cloud before replacing it.
+                if (typeof window.deleteSessionFromCloud === 'function') {
+                    window.deleteSessionFromCloud(duplicate);
+                }
+                window.savedSessions = window.savedSessions.filter(s => s.id !== duplicate.id);
+                window.selectedLogIds.delete(duplicate.id);
+            }
+
+            const existingId = window.editingSessionId;
             const sessionRecord = {
-                id: Date.now(),
+                id: existingId || Date.now(),
                 date,
                 dayKey,
                 class: className,
@@ -1297,20 +1339,178 @@
                 present,
                 absent,
                 rate,
-                absentees: absenteesList
+                absentees: absenteesList,
+                updatedAt: Date.now()
             };
 
-            window.savedSessions = [sessionRecord, ...window.savedSessions.filter(s => s.id !== sessionRecord.id)];
+            // If this is an edit and the class/slot changed, remove the old cloud document.
+            const oldSession = existingId
+                ? window.savedSessions.find(s => s.id === existingId)
+                : null;
+
+            if (oldSession && typeof window.deleteSessionFromCloud === 'function') {
+                const oldDocKeyChanged =
+                    oldSession.class !== sessionRecord.class ||
+                    oldSession.startTime !== sessionRecord.startTime;
+
+                if (oldDocKeyChanged) {
+                    window.deleteSessionFromCloud(oldSession);
+                }
+            }
+
+            window.savedSessions = [
+                sessionRecord,
+                ...window.savedSessions.filter(s => s.id !== sessionRecord.id)
+            ];
+
             localStorage.setItem('smk_saved_sessions_v1', JSON.stringify(window.savedSessions));
 
             if (typeof window.saveSessionToCloud === 'function') {
-                window.saveSessionToCloud(sessionRecord);
+                awaitCloudSaveSession(sessionRecord);
             }
-            
+
+            window.editingSessionId = null;
+            updateEditModeUI(false);
+
             renderHistoryTable();
             renderTimetableGrid();
+            if (typeof renderAnalyticsDashboard === 'function') renderAnalyticsDashboard();
+
+            showToast(
+                oldSession ? "Record Updated" : "Session Saved",
+                oldSession
+                    ? `The attendance record for ${className} has been corrected and synced.`
+                    : `Attendance for ${className} recorded successfully.`
+            );
+        }
+
+        // Cloud save wrapper so the UI does not wait for Firestore before continuing.
+        function awaitCloudSaveSession(sessionRecord) {
+            try {
+                const result = window.saveSessionToCloud(sessionRecord);
+                if (result && typeof result.catch === 'function') {
+                    result.catch(err => console.error("Cloud save failed:", err));
+                }
+            } catch (err) {
+                console.error("Cloud save failed:", err);
+            }
+        }
+
+        function updateEditModeUI(isEditing) {
+            const label = document.getElementById('save-session-label');
+            const saveBtn = document.getElementById('btn-save-session');
+            const cancelBtn = document.getElementById('btn-cancel-edit');
+
+            if (label) label.innerText = isEditing ? "Save Changes" : "Save / Sync";
+
+            if (saveBtn) {
+                saveBtn.classList.toggle('bg-amber-600', isEditing);
+                saveBtn.classList.toggle('hover:bg-amber-500', isEditing);
+                saveBtn.classList.toggle('border-amber-500', isEditing);
+                saveBtn.classList.toggle('bg-emerald-600', !isEditing);
+                saveBtn.classList.toggle('hover:bg-emerald-500', !isEditing);
+                saveBtn.classList.toggle('border-emerald-500', !isEditing);
+            }
+
+            if (cancelBtn) {
+                cancelBtn.classList.toggle('hidden', !isEditing);
+                cancelBtn.classList.toggle('flex', isEditing);
+            }
+        }
 
-            showToast("Session Saved", `Attendance for ${className} recorded successfully.`);
+        function editSession(id) {
+            const session = window.savedSessions.find(s => s.id === id);
+            if (!session) {
+                showToast("Record Not Found", "This attendance record is no longer available.");
+                return;
+            }
+
+            window.editingSessionId = session.id;
+
+            // Switch to the attendance tracker first.
+            switchTab('tracker');
+
+            // Set the saved record back into the input controls.
+            const classSelect = document.getElementById('select-class');
+            const subjectSelect = document.getElementById('select-subject');
+            const teacherSelect = document.getElementById('select-teacher');
+            const startSelect = document.getElementById('select-start-time');
+            const endSelect = document.getElementById('select-end-time');
+            const dateInput = document.getElementById('input-date');
+
+            if (classSelect) classSelect.value = session.class;
+            if (subjectSelect) subjectSelect.value = session.subject;
+            if (teacherSelect) teacherSelect.value = session.teacher;
+            if (startSelect) startSelect.value = session.startTime;
+            if (endSelect) endSelect.value = session.endTime;
+            if (dateInput) dateInput.value = session.date;
+
+            // Refresh roster/banner without wiping the values we are about to restore.
+            window.currentRosterStudents =
+                window.rosters[session.class] ||
+                Array.from({length: Math.max(session.total, 30)}, (_, i) => `Student ${i + 1}`);
+
+            document.getElementById('input-total-enrolled').value = session.total;
+            document.getElementById('input-present-count').value = session.present;
+
+            onDateChange();
+            updateBannerInfo();
+            updateAttendanceCalc();
+
+            // Restore every absentee's name, reason and remarks.
+            (session.absentees || []).forEach((ab, 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}`);
+
+                if (!selectEl || !nameEl || !reasonEl) return;
+
+                const rawReason = ab.reason || "No Reason";
+                const match = rawReason.match(/^(.+?)\s*\((.*)\)$/);
+                const baseReason = match ? match[1].trim() : rawReason;
+                const remark = match ? match[2].trim() : "";
+
+                if ([...selectEl.options].some(o => o.value === ab.name)) {
+                    selectEl.value = ab.name;
+                    nameEl.value = "";
+                } else {
+                    selectEl.value = "";
+                    nameEl.value = ab.name;
+                }
+
+                if ([...reasonEl.options].some(o => o.value === baseReason)) {
+                    reasonEl.value = baseReason;
+                } else {
+                    reasonEl.value = "Lain-lain";
+                }
+
+                if (remarkEl) remarkEl.value = remark;
+            });
+
+            updateEditModeUI(true);
+
+            // Make the edit state obvious without using a disruptive modal.
+            const banner = document.getElementById('subject-info-card');
+            if (banner) {
+                banner.classList.add('ring-2', 'ring-amber-400', 'ring-offset-2');
+            }
+
+            showToast("Edit Mode", "Correct the attendance below, then click Save Changes.");
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+
+        function cancelEditSession() {
+            if (window.editingSessionId !== null) {
+                window.editingSessionId = null;
+                updateEditModeUI(false);
+
+                const banner = document.getElementById('subject-info-card');
+                if (banner) banner.classList.remove('ring-2', 'ring-amber-400', 'ring-offset-2');
+
+                onClassChange();
+                showToast("Edit Cancelled", "The saved record was not changed.");
+            }
         }
 
         function toggleLogAbsentee(id) {
@@ -1424,7 +1624,10 @@
                         <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">
+                        <td class="py-3.5 px-4 text-right whitespace-nowrap">
+                            <button onclick="editSession(${s.id})" class="text-emerald-600 hover:text-emerald-800 hover:bg-emerald-50 p-1.5 rounded-lg transition mr-1" title="Edit / Correct This Record">
+                                <i data-lucide="pencil" class="w-4 h-4"></i>
+                            </button>
                             <button onclick="deleteSession(${s.id})" class="text-slate-400 hover:text-rose-600 hover:bg-rose-50 p-1.5 rounded-lg transition" title="Delete Log">
                                 <i data-lucide="trash-2" class="w-4 h-4"></i>
                             </button>