{"id":333,"date":"2026-01-08T08:53:43","date_gmt":"2026-01-08T01:53:43","guid":{"rendered":"https:\/\/www.watyai.ac.th\/?p=333"},"modified":"2026-01-08T13:00:22","modified_gmt":"2026-01-08T06:00:22","slug":"%e0%b8%95%e0%b8%a3%e0%b8%a7%e0%b8%88%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b9%88%e0%b8%87%e0%b8%87%e0%b8%b2%e0%b8%99-%e0%b8%a7%e0%b8%b4%e0%b8%8a%e0%b8%b2-%e0%b8%a7%e0%b8%b4%e0%b8%97%e0%b8%a2%e0%b8%b2","status":"publish","type":"post","link":"https:\/\/www.watyai.ac.th\/?p=333","title":{"rendered":"\u0e15\u0e23\u0e27\u0e08\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19 \u0e27\u0e34\u0e0a\u0e32 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13 \u0e1b.4-\u0e1b.6"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e07\u0e32\u0e19\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19<\/title>\r\n <link rel=\"icon\" type=\"image\/png\" href=\"https:\/\/img5.pic.in.th\/file\/secure-sv1\/logowatyaischool.png\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n body {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;\r\n background-image: url('https:\/\/img2.pic.in.th\/bg-webapp.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n min-height: 100%;\r\n }\r\n \r\n html, body {\r\n height: 100%;\r\n width: 100%;\r\n }\r\n\r\n .main-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n padding: 20px;\r\n }\r\n\r\n .container-custom {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 16px;\r\n padding: 30px;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .header-section {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n padding-bottom: 20px;\r\n border-bottom: 3px solid #5A9CB5;\r\n }\r\n\r\n .school-logo {\r\n width: 120px;\r\n height: 120px;\r\n margin: 0 auto 20px;\r\n filter: drop-shadow(0 8px 16px rgba(90, 156, 181, 0.3));\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .school-logo:hover {\r\n transform: scale(1.05);\r\n filter: drop-shadow(0 12px 24px rgba(90, 156, 181, 0.4));\r\n }\r\n\r\n .section-card {\r\n background: rgba(255, 255, 255, 0.98);\r\n border-radius: 12px;\r\n padding: 25px;\r\n margin-bottom: 20px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .form-label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #5A9CB5;\r\n font-size: 16px;\r\n }\r\n\r\n .form-input, .form-select {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 8px;\r\n font-size: 15px;\r\n transition: all 0.3s;\r\n background: white;\r\n font-family: 'Sarabun', sans-serif;\r\n }\r\n\r\n .form-input:focus, .form-select:focus {\r\n outline: none;\r\n border-color: #5A9CB5;\r\n box-shadow: 0 0 0 3px rgba(90, 156, 181, 0.1);\r\n }\r\n\r\n .student-item {\r\n background: white;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 10px;\r\n padding: 15px;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .student-item:hover {\r\n border-color: #5A9CB5;\r\n box-shadow: 0 4px 12px rgba(90, 156, 181, 0.1);\r\n }\r\n\r\n .student-number {\r\n background: #5A9CB5;\r\n color: white;\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n font-size: 16px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .student-name {\r\n flex: 1;\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #1f2937;\r\n }\r\n\r\n .checkbox-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .checkbox-custom {\r\n width: 24px;\r\n height: 24px;\r\n cursor: pointer;\r\n accent-color: #5A9CB5;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #5A9CB5 0%, #4A8CA5 100%);\r\n color: white;\r\n padding: 14px 32px;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 17px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n width: 100%;\r\n margin-top: 10px;\r\n box-shadow: 0 4px 12px rgba(90, 156, 181, 0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: linear-gradient(135deg, #4A8CA5 0%, #3A7C95 100%);\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 16px rgba(90, 156, 181, 0.4);\r\n }\r\n\r\n .btn-primary:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .btn-primary:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n .btn-secondary {\r\n background: linear-gradient(135deg, #FACE68 0%, #F9BE58 100%);\r\n color: #333;\r\n padding: 12px 28px;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n width: 100%;\r\n margin-top: 10px;\r\n box-shadow: 0 4px 12px rgba(250, 206, 104, 0.3);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: linear-gradient(135deg, #F9BE58 0%, #F8AE48 100%);\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 16px rgba(250, 206, 104, 0.4);\r\n }\r\n\r\n .status-badge {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 16px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n }\r\n\r\n .status-waiting {\r\n background: #fef3c7;\r\n color: #92400e;\r\n }\r\n\r\n .status-checked {\r\n background: #d1fae5;\r\n color: #065f46;\r\n }\r\n\r\n .status-resubmit {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n }\r\n\r\n .tab-buttons {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 25px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .tab-btn {\r\n flex: 1;\r\n min-width: 150px;\r\n padding: 12px 20px;\r\n border: 2px solid #e5e7eb;\r\n background: white;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n color: #6b7280;\r\n }\r\n\r\n .tab-btn.active {\r\n background: #5A9CB5;\r\n color: white;\r\n border-color: #5A9CB5;\r\n }\r\n\r\n .tab-btn:hover:not(.active) {\r\n border-color: #5A9CB5;\r\n color: #5A9CB5;\r\n }\r\n\r\n .tab-content {\r\n display: none;\r\n }\r\n\r\n .tab-content.active {\r\n display: block;\r\n }\r\n\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: white;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n thead tr {\r\n background: linear-gradient(135deg, #5A9CB5 0%, #4A8CA5 100%);\r\n color: white;\r\n }\r\n\r\n th {\r\n padding: 14px 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 14px;\r\n border-right: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n th:last-child {\r\n border-right: none;\r\n }\r\n\r\n td {\r\n padding: 12px 10px;\r\n font-size: 14px;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n tbody tr {\r\n transition: all 0.2s;\r\n }\r\n\r\n tbody tr:nth-child(even) {\r\n background: #f9fafb;\r\n }\r\n\r\n tbody tr:hover {\r\n background: #eff6ff !important;\r\n }\r\n\r\n .debug-info {\r\n background: #f3f4f6;\r\n border: 2px solid #d1d5db;\r\n border-radius: 8px;\r\n padding: 15px;\r\n margin-top: 20px;\r\n font-size: 13px;\r\n font-family: monospace;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container-custom {\r\n padding: 20px;\r\n }\r\n \r\n .student-item {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n \r\n .tab-btn {\r\n min-width: 100%;\r\n }\r\n\r\n table {\r\n font-size: 12px;\r\n }\r\n\r\n th, td {\r\n padding: 8px 6px;\r\n }\r\n }\r\n <\/style>\r\n <style>@view-transition { navigation: auto; }<\/style>\r\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\r\n <\/head>\r\n <body>\r\n <div class=\"main-wrapper\">\r\n <div class=\"container-custom\">\r\n <div class=\"header-section\"><img decoding=\"async\" src=\"https:\/\/img5.pic.in.th\/file\/secure-sv1\/logowatyaischool.png\" alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\" class=\"school-logo\" onerror=\"this.style.display='none';\">\r\n <h1 id=\"system-title\" style=\"color: #5A9CB5; font-size: 32px; font-weight: bold; margin-bottom: 10px;\">\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e07\u0e32\u0e19\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<\/h1>\r\n <p id=\"school-name\" style=\"color: #FAAC68; font-size: 20px; font-weight: 600;\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25\u0e27\u0e31\u0e14\u0e43\u0e2b\u0e0d\u0e48<\/p>\r\n <\/div>\r\n <div class=\"tab-buttons\"><button class=\"tab-btn active\" onclick=\"switchTab('record')\">\ud83d\udcdd \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19<\/button> <button class=\"tab-btn\" onclick=\"switchTab('check')\">\ud83d\udcca \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30<\/button>\r\n <\/div>\r\n <div id=\"record-tab\" class=\"tab-content active\">\r\n <div class=\"section-card\">\r\n <h2 style=\"color: #5A9CB5; font-size: 24px; font-weight: bold; margin-bottom: 20px;\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19<\/h2>\r\n <div class=\"form-group\"><label class=\"form-label\">\ud83d\udd10 \u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e04\u0e23\u0e39<\/label> <input type=\"password\" id=\"teacher-password\" class=\"form-input\" placeholder=\"\u0e01\u0e23\u0e2d\u0e01\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e04\u0e23\u0e39\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\" maxlength=\"20\">\r\n <\/div>\r\n <div id=\"teacher-form\" style=\"display: none;\">\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;\">\r\n <div class=\"form-group\" style=\"margin-bottom: 0;\"><label class=\"form-label\">\u0e0a\u0e31\u0e49\u0e19<\/label> <select id=\"grade-select\" class=\"form-select\" onchange=\"handleGradeRoomChange()\"> <option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19<\/option> <option value=\"\u0e1b.1\">\u0e1b.1<\/option> <option value=\"\u0e1b.2\">\u0e1b.2<\/option> <option value=\"\u0e1b.3\">\u0e1b.3<\/option> <option value=\"\u0e1b.4\">\u0e1b.4<\/option> <option value=\"\u0e1b.5\">\u0e1b.5<\/option> <option value=\"\u0e1b.6\">\u0e1b.6<\/option> <\/select>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-bottom: 0;\"><label class=\"form-label\">\u0e2b\u0e49\u0e2d\u0e07<\/label> <select id=\"room-select\" class=\"form-select\" onchange=\"handleGradeRoomChange()\"> <option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2b\u0e49\u0e2d\u0e07<\/option> <option value=\"1\">1<\/option> <option value=\"2\">2<\/option> <option value=\"3\">3<\/option> <option value=\"4\">4<\/option> <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\"><label class=\"form-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19<\/label> <select id=\"assignment-select\" class=\"form-select\" onchange=\"handleAssignmentChange()\"> <option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e40\u0e14\u0e34\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e43\u0e2b\u0e21\u0e48<\/option> <option value=\"__new__\">\u2795 \u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e43\u0e2b\u0e21\u0e48<\/option> <\/select> <input type=\"text\" id=\"assignment-name\" class=\"form-input\" placeholder=\"\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e43\u0e2b\u0e21\u0e48\" style=\"display: none; margin-top: 10px;\">\r\n <\/div>\r\n <div id=\"student-list\"><\/div><button class=\"btn-primary\" id=\"save-button\" onclick=\"saveSubmission()\"> \ud83d\udcbe \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 <\/button> <!-- Debug Information -->\r\n <div id=\"debug-info\" class=\"debug-info\"><strong>\ud83d\udd0d \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a:<\/strong>\r\n <div id=\"debug-content\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"check-tab\" class=\"tab-content\">\r\n <div class=\"section-card\">\r\n <h2 style=\"color: #5A9CB5; font-size: 24px; font-weight: bold; margin-bottom: 20px;\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19<\/h2>\r\n <div class=\"form-group\"><label class=\"form-label\">\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e14\u0e49\u0e27\u0e22\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/label> <input type=\"text\" id=\"search-student-id\" class=\"form-input\" placeholder=\"\u0e01\u0e23\u0e2d\u0e01\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e40\u0e0a\u0e48\u0e19 12345\" maxlength=\"10\" oninput=\"filterStatusByStudentId()\">\r\n <\/div><button class=\"btn-secondary\" onclick=\"loadStatusFromSheet()\"> \ud83d\udd04 \u0e40\u0e23\u0e35\u0e22\u0e01\u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 <\/button>\r\n <div id=\"status-list\" style=\"margin-top: 25px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwoLN4Vaz12IFNS_QTdJOlBnZOtWTnVmU5k7jhGfmjn2KOgLSvfQOET5LAbDCLI5jr6\/exec';\r\n const TEACHER_PASSWORD = 'WatyaI313460';\r\n \r\n let studentsData = [];\r\n let selectedStudents = [];\r\n let allStatusData = [];\r\n let isAuthenticated = false;\r\n let existingAssignments = [];\r\n\r\n function addDebugLog(message) {\r\n const debugContent = document.getElementById('debug-content');\r\n if (debugContent) {\r\n const timestamp = new Date().toLocaleTimeString('th-TH');\r\n debugContent.innerHTML += `<div>[${timestamp}] ${message}<\/div>`;\r\n debugContent.scrollTop = debugContent.scrollHeight;\r\n }\r\n console.log(message);\r\n }\r\n\r\n document.getElementById('teacher-password').addEventListener('input', function(e) {\r\n const password = e.target.value;\r\n \r\n if (password === TEACHER_PASSWORD) {\r\n isAuthenticated = true;\r\n document.getElementById('teacher-form').style.display = 'block';\r\n e.target.style.borderColor = '#10b981';\r\n e.target.style.background = '#d1fae5';\r\n \r\n Swal.fire({\r\n icon: 'success',\r\n title: '\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e15\u0e31\u0e27\u0e15\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!',\r\n text: '\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e41\u0e25\u0e49\u0e27',\r\n timer: 1500,\r\n showConfirmButton: false\r\n });\r\n } else {\r\n isAuthenticated = false;\r\n document.getElementById('teacher-form').style.display = 'none';\r\n if (password.length > 0) {\r\n e.target.style.borderColor = '#ef4444';\r\n } else {\r\n e.target.style.borderColor = '#e5e7eb';\r\n e.target.style.background = 'white';\r\n }\r\n }\r\n });\r\n\r\n function handleAssignmentChange() {\r\n const select = document.getElementById('assignment-select');\r\n const input = document.getElementById('assignment-name');\r\n \r\n if (select.value === '__new__') {\r\n input.style.display = 'block';\r\n input.value = '';\r\n input.focus();\r\n } else if (select.value) {\r\n input.style.display = 'none';\r\n input.value = select.value;\r\n } else {\r\n input.style.display = 'none';\r\n input.value = '';\r\n }\r\n }\r\n\r\n async function handleGradeRoomChange() {\r\n const grade = document.getElementById('grade-select').value;\r\n const room = document.getElementById('room-select').value;\r\n \r\n addDebugLog(`\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19: ${grade}, \u0e2b\u0e49\u0e2d\u0e07: ${room}`);\r\n \r\n if (grade && room) {\r\n await loadExistingAssignments(grade, room);\r\n filterStudents();\r\n } else {\r\n document.getElementById('student-list').innerHTML = \r\n '<p style=\"text-align: center; color: #6b7280; padding: 30px;\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e41\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>';\r\n }\r\n }\r\n\r\n async function loadExistingAssignments(grade, room) {\r\n try {\r\n addDebugLog(`\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19 ${grade}\/${room}...`);\r\n \r\n const data = await new Promise((resolve, reject) => {\r\n const callbackName = 'jsonpCallback_' + Date.now();\r\n let timeoutId;\r\n \r\n window[callbackName] = function(response) {\r\n clearTimeout(timeoutId);\r\n delete window[callbackName];\r\n const script = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (script) document.body.removeChild(script);\r\n \r\n if (response.result === 'success') {\r\n resolve(response.data || []);\r\n } else {\r\n reject(new Error(response.error || 'Unknown error'));\r\n }\r\n };\r\n\r\n const script = document.createElement('script');\r\n const params = new URLSearchParams({\r\n callback: callbackName,\r\n action: 'getAssignments',\r\n grade: grade,\r\n room: room\r\n });\r\n \r\n script.src = `${SCRIPT_URL}?${params.toString()}`;\r\n script.onerror = () => {\r\n clearTimeout(timeoutId);\r\n delete window[callbackName];\r\n reject(new Error('Failed to load script'));\r\n };\r\n \r\n timeoutId = setTimeout(() => {\r\n if (window[callbackName]) {\r\n delete window[callbackName];\r\n const s = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (s) document.body.removeChild(s);\r\n reject(new Error('Request timeout'));\r\n }\r\n }, 15000);\r\n \r\n document.body.appendChild(script);\r\n });\r\n\r\n existingAssignments = data;\r\n addDebugLog(`\u0e1e\u0e1a\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19 ${existingAssignments.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`);\r\n updateAssignmentDropdown();\r\n \r\n } catch (error) {\r\n console.error('Error loading assignments:', error);\r\n addDebugLog(`\u274c Error: ${error.message}`);\r\n existingAssignments = [];\r\n updateAssignmentDropdown();\r\n }\r\n }\r\n\r\n function updateAssignmentDropdown() {\r\n const select = document.getElementById('assignment-select');\r\n const currentValue = select.value;\r\n \r\n select.innerHTML = '<option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e40\u0e14\u0e34\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e43\u0e2b\u0e21\u0e48<\/option>';\r\n \r\n if (existingAssignments.length > 0) {\r\n existingAssignments.forEach(assignment => {\r\n const option = document.createElement('option');\r\n option.value = assignment;\r\n option.textContent = assignment;\r\n select.appendChild(option);\r\n });\r\n }\r\n \r\n const newOption = document.createElement('option');\r\n newOption.value = '__new__';\r\n newOption.textContent = '\u2795 \u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e43\u0e2b\u0e21\u0e48';\r\n select.appendChild(newOption);\r\n \r\n if (currentValue && currentValue !== '__new__') {\r\n select.value = currentValue;\r\n }\r\n }\r\n\r\n function filterStatusByStudentId() {\r\n const searchValue = document.getElementById('search-student-id').value.trim();\r\n \r\n if (!searchValue) {\r\n displayStatusList(allStatusData);\r\n return;\r\n }\r\n\r\n const filtered = allStatusData.filter(item => \r\n item.studentId && item.studentId.toString().includes(searchValue)\r\n );\r\n\r\n if (filtered.length === 0) {\r\n document.getElementById('status-list').innerHTML = `\r\n <div style=\"text-align: center; padding: 40px; background: #fef3c7; border-radius: 12px; margin-top: 20px;\">\r\n <div style=\"font-size: 48px; margin-bottom: 15px;\">\ud83d\udd0d<\/div>\r\n <div style=\"color: #92400e; font-size: 18px; font-weight: 600; margin-bottom: 8px;\">\r\n \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n <\/div>\r\n <div style=\"color: #78350f; font-size: 15px;\">\r\n \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07\u0e02\u0e2d\u0e07\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27 \"${searchValue}\"\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else {\r\n displayStatusList(filtered);\r\n }\r\n }\r\n\r\n function clearSearch() {\r\n document.getElementById('search-student-id').value = '';\r\n displayStatusList(allStatusData);\r\n }\r\n\r\n async function loadStudentsFromSheet() {\r\n try {\r\n addDebugLog('\ud83d\udd04 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19...');\r\n addDebugLog(`\ud83d\udce1 URL: ${SCRIPT_URL}`);\r\n \r\n const data = await new Promise((resolve, reject) => {\r\n const callbackName = 'jsonpCallback_' + Date.now();\r\n let timeoutId;\r\n \r\n window[callbackName] = function(response) {\r\n clearTimeout(timeoutId);\r\n addDebugLog(`\ud83d\udce5 \u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a response: ${JSON.stringify(response).substring(0, 100)}...`);\r\n \r\n delete window[callbackName];\r\n const script = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (script) document.body.removeChild(script);\r\n \r\n if (response.result === 'success') {\r\n addDebugLog(`\u2705 \u0e42\u0e2b\u0e25\u0e14\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08: ${response.data ? response.data.length : 0} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`);\r\n resolve(response.data || []);\r\n } else {\r\n addDebugLog(`\u274c Error: ${response.error}`);\r\n reject(new Error(response.error || 'Unknown error'));\r\n }\r\n };\r\n\r\n const script = document.createElement('script');\r\n const params = new URLSearchParams({\r\n callback: callbackName,\r\n action: 'getStudents'\r\n });\r\n \r\n script.src = `${SCRIPT_URL}?${params.toString()}`;\r\n addDebugLog(`\ud83d\udce4 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e23\u0e35\u0e22\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...`);\r\n \r\n script.onerror = () => {\r\n clearTimeout(timeoutId);\r\n addDebugLog(`\u274c \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14 script \u0e44\u0e14\u0e49`);\r\n delete window[callbackName];\r\n reject(new Error('Failed to load script'));\r\n };\r\n \r\n timeoutId = setTimeout(() => {\r\n if (window[callbackName]) {\r\n delete window[callbackName];\r\n const s = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (s) document.body.removeChild(s);\r\n addDebugLog(`\u23f1\ufe0f Request timeout`);\r\n reject(new Error('Request timeout'));\r\n }\r\n }, 15000);\r\n \r\n document.body.appendChild(script);\r\n });\r\n\r\n studentsData = data;\r\n addDebugLog(`\u2705 \u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14: ${studentsData.length} \u0e04\u0e19`);\r\n \r\n if (studentsData.length > 0) {\r\n addDebugLog(`\ud83d\udccb \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25: ${JSON.stringify(studentsData[0])}`);\r\n }\r\n \r\n if (studentsData.length === 0) {\r\n Swal.fire({\r\n icon: 'warning',\r\n title: '\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19',\r\n html: `\r\n <p>\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32 Google Sheets \u0e21\u0e35:<\/p>\r\n <ul style=\"text-align: left; margin: 15px 0;\">\r\n <li>\u0e41\u0e1c\u0e48\u0e19\u0e07\u0e32\u0e19\u0e0a\u0e37\u0e48\u0e2d <strong>\"Students\"<\/strong><\/li>\r\n <li>\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e41\u0e1c\u0e48\u0e19\u0e07\u0e32\u0e19<\/li>\r\n <li>\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c: \u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27 | \u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 | \u0e0a\u0e37\u0e48\u0e2d | \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 | \u0e0a\u0e31\u0e49\u0e19 | \u0e2b\u0e49\u0e2d\u0e07<\/li>\r\n <\/ul>\r\n `,\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27',\r\n confirmButtonColor: '#5A9CB5'\r\n });\r\n }\r\n } catch (error) {\r\n console.error('Error loading students:', error);\r\n addDebugLog(`\u274c \u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14: ${error.message}`);\r\n studentsData = [];\r\n \r\n Swal.fire({\r\n icon: 'error',\r\n title: '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49',\r\n html: `\r\n <p style=\"margin-bottom: 15px;\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a:<\/p>\r\n <ul style=\"text-align: left; margin: 15px 0;\">\r\n <li>\u2705 Google Sheets \u0e21\u0e35\u0e41\u0e1c\u0e48\u0e19\u0e07\u0e32\u0e19\u0e0a\u0e37\u0e48\u0e2d <strong>\"Students\"<\/strong><\/li>\r\n <li>\u2705 Apps Script \u0e16\u0e39\u0e01 Deploy \u0e41\u0e25\u0e49\u0e27 (Web app)<\/li>\r\n <li>\u2705 \u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07: <strong>Anyone<\/strong><\/li>\r\n <li>\u2705 URL \u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/li>\r\n <\/ul>\r\n <div style=\"background: #fee2e2; padding: 10px; border-radius: 6px; margin-top: 15px;\">\r\n <strong>Error:<\/strong> ${error.message}\r\n <\/div>\r\n <div style=\"margin-top: 15px; font-size: 13px; color: #6b7280;\">\r\n \u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e1f\u0e2d\u0e23\u0e4c\u0e21\r\n <\/div>\r\n `,\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27',\r\n confirmButtonColor: '#5A9CB5',\r\n width: '600px'\r\n });\r\n }\r\n }\r\n\r\n function switchTab(tab) {\r\n document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));\r\n document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));\r\n \r\n if (tab === 'record') {\r\n document.querySelector('.tab-btn:nth-child(1)').classList.add('active');\r\n document.getElementById('record-tab').classList.add('active');\r\n } else {\r\n document.querySelector('.tab-btn:nth-child(2)').classList.add('active');\r\n document.getElementById('check-tab').classList.add('active');\r\n }\r\n }\r\n\r\n function filterStudents() {\r\n const grade = document.getElementById('grade-select').value;\r\n const room = document.getElementById('room-select').value;\r\n \r\n addDebugLog(`\ud83d\udd0d \u0e01\u0e23\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 ${grade}\/${room}`);\r\n \r\n if (!grade || !room) {\r\n document.getElementById('student-list').innerHTML = \r\n '<p style=\"text-align: center; color: #6b7280; padding: 30px;\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e41\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>';\r\n return;\r\n }\r\n\r\n const filtered = studentsData.filter(s => s.grade === grade && s.room === room);\r\n \r\n addDebugLog(`\ud83d\udccb \u0e1e\u0e1a\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 ${filtered.length} \u0e04\u0e19`);\r\n \r\n if (filtered.length === 0) {\r\n document.getElementById('student-list').innerHTML = `\r\n <div style=\"text-align: center; padding: 30px; background: #fef3c7; border-radius: 12px; margin-top: 15px;\">\r\n <div style=\"font-size: 48px; margin-bottom: 15px;\">\ud83d\udced<\/div>\r\n <div style=\"color: #92400e; font-size: 18px; font-weight: 600; margin-bottom: 8px;\">\r\n \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\r\n <\/div>\r\n <div style=\"color: #78350f; font-size: 15px;\">\r\n \u0e44\u0e21\u0e48\u0e21\u0e35\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 ${grade} \u0e2b\u0e49\u0e2d\u0e07 ${room} \u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\r\n <\/div>\r\n <div style=\"color: #78350f; font-size: 14px; margin-top: 10px;\">\r\n \u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a: ${studentsData.length} \u0e04\u0e19\r\n <\/div>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n let html = '<div style=\"margin-top: 20px;\">';\r\n filtered.forEach((student, index) => {\r\n const fullName = `${student.firstName} ${student.lastName}`;\r\n html += `\r\n <div class=\"student-item\">\r\n <div class=\"student-number\">${student.number}<\/div>\r\n <div class=\"student-name\">${fullName}<\/div>\r\n <select class=\"form-select\" \r\n id=\"status-${student.studentId}\"\r\n onchange=\"updateStudentStatus('${student.studentId}', this.value, '${fullName.replace(\/'\/g, \"\\\\'\")}')\"\r\n style=\"width: auto; padding: 8px 12px; font-size: 14px;\">\r\n <option value=\"\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08\" selected>\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08<\/option>\r\n <option value=\"\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e2a\u0e48\u0e07\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e2a\u0e48\u0e07<\/option>\r\n <option value=\"\u0e23\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e21\u0e48\">\u0e23\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e21\u0e48<\/option>\r\n <option value=\"\u0e15\u0e23\u0e27\u0e08\u0e41\u0e25\u0e49\u0e27\">\u0e15\u0e23\u0e27\u0e08\u0e41\u0e25\u0e49\u0e27<\/option>\r\n <\/select>\r\n <\/div>\r\n `;\r\n });\r\n html += '<\/div>';\r\n \r\n document.getElementById('student-list').innerHTML = html;\r\n \r\n selectedStudents = filtered.map(student => ({\r\n studentId: student.studentId,\r\n number: student.number,\r\n firstName: student.firstName,\r\n lastName: student.lastName,\r\n grade: student.grade,\r\n room: student.room,\r\n fullName: `${student.firstName} ${student.lastName}`,\r\n selectedStatus: '\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08'\r\n }));\r\n \r\n addDebugLog(`\u2705 \u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22`);\r\n }\r\n\r\n function updateStudentStatus(studentId, status, fullName) {\r\n const student = studentsData.find(s => s.studentId === studentId);\r\n \r\n if (!student) return;\r\n \r\n const existingIndex = selectedStudents.findIndex(s => s.studentId === studentId);\r\n \r\n if (existingIndex !== -1) {\r\n selectedStudents[existingIndex].selectedStatus = status;\r\n } else {\r\n selectedStudents.push({\r\n studentId: student.studentId,\r\n number: student.number,\r\n firstName: student.firstName,\r\n lastName: student.lastName,\r\n grade: student.grade,\r\n room: student.room,\r\n fullName: fullName,\r\n selectedStatus: status\r\n });\r\n }\r\n }\r\n\r\n async function saveSubmission() {\r\n if (!isAuthenticated) {\r\n Swal.fire({\r\n icon: 'error',\r\n title: '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19',\r\n text: '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e04\u0e23\u0e39\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07',\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27',\r\n confirmButtonColor: '#5A9CB5'\r\n });\r\n return;\r\n }\r\n\r\n const assignmentSelect = document.getElementById('assignment-select').value;\r\n const assignmentInput = document.getElementById('assignment-name').value.trim();\r\n const assignmentName = assignmentSelect === '__new__' ? assignmentInput : assignmentSelect;\r\n const grade = document.getElementById('grade-select').value;\r\n const room = document.getElementById('room-select').value;\r\n\r\n if (!assignmentName) {\r\n Swal.fire({\r\n icon: 'warning',\r\n title: '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e23\u0e30\u0e1a\u0e38\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19',\r\n text: '\u0e42\u0e1b\u0e23\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2b\u0e23\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19\u0e01\u0e48\u0e2d\u0e19\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25',\r\n confirmButtonText: '\u0e15\u0e23\u0e07\u0e44\u0e1b\u0e43\u0e2a\u0e48\u0e40\u0e25\u0e22',\r\n confirmButtonColor: '#5A9CB5'\r\n });\r\n return;\r\n }\r\n\r\n if (!grade || !room) {\r\n Swal.fire({\r\n icon: 'warning',\r\n title: '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e41\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07',\r\n text: '\u0e42\u0e1b\u0e23\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e41\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25',\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27',\r\n confirmButtonColor: '#5A9CB5'\r\n });\r\n return;\r\n }\r\n\r\n if (selectedStudents.length === 0) {\r\n Swal.fire({\r\n icon: 'info',\r\n title: '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01',\r\n text: '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22 1 \u0e04\u0e19',\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27',\r\n confirmButtonColor: '#5A9CB5'\r\n });\r\n return;\r\n }\r\n\r\n const saveButton = document.getElementById('save-button');\r\n saveButton.disabled = true;\r\n saveButton.textContent = '\u23f3 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01...';\r\n\r\n Swal.fire({\r\n title: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...',\r\n text: '\u0e42\u0e1b\u0e23\u0e14\u0e23\u0e2d\u0e2a\u0e31\u0e01\u0e04\u0e23\u0e39\u0e48',\r\n allowOutsideClick: false,\r\n didOpen: () => {\r\n Swal.showLoading();\r\n }\r\n });\r\n\r\n try {\r\n const now = new Date();\r\n const timestamp = `${now.toLocaleDateString('th-TH', {year: 'numeric', month: '2-digit', day: '2-digit'})} ${now.toLocaleTimeString('th-TH')}`;\r\n \r\n const submissions = selectedStudents.map(student => ({\r\n studentId: student.studentId,\r\n studentNumber: student.number,\r\n studentName: student.fullName,\r\n grade: student.grade,\r\n room: student.room,\r\n assignmentName: assignmentName,\r\n submitDate: timestamp,\r\n status: student.selectedStatus || '\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08',\r\n fullScore: '',\r\n earnedScore: ''\r\n }));\r\n\r\n addDebugLog(`\ud83d\udce6 \u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 ${submissions.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`);\r\n await sendToGoogleSheet(submissions);\r\n\r\n Swal.fire({\r\n icon: 'success',\r\n title: '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!',\r\n text: `\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 ${selectedStudents.length} \u0e04\u0e19\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27`,\r\n confirmButtonText: '\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e40\u0e25\u0e22!',\r\n confirmButtonColor: '#FACE68'\r\n });\r\n\r\n document.getElementById('assignment-select').value = '';\r\n document.getElementById('assignment-name').value = '';\r\n document.getElementById('assignment-name').style.display = 'none';\r\n document.querySelectorAll('select[id^=\"status-\"]').forEach(select => select.value = '\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08');\r\n \r\n await loadExistingAssignments(grade, room);\r\n \r\n } catch (error) {\r\n Swal.fire({\r\n icon: 'error',\r\n title: '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14',\r\n html: `\r\n <p>\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49<\/p>\r\n <div style=\"background: #fee2e2; padding: 10px; border-radius: 6px; margin-top: 15px; font-size: 14px;\">\r\n ${error.message}\r\n <\/div>\r\n <p style=\"margin-top: 10px; font-size: 13px;\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07<\/p>\r\n `,\r\n confirmButtonText: '\u0e25\u0e2d\u0e07\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07',\r\n confirmButtonColor: '#FA6868'\r\n });\r\n console.error('Error:', error);\r\n addDebugLog(`\u274c \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e25\u0e49\u0e21\u0e40\u0e2b\u0e25\u0e27: ${error.message}`);\r\n } finally {\r\n saveButton.disabled = false;\r\n saveButton.textContent = '\ud83d\udcbe \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25';\r\n }\r\n }\r\n\r\n async function sendToGoogleSheet(data) {\r\n return new Promise((resolve, reject) => {\r\n const dataString = JSON.stringify(data);\r\n const maxLength = 6000;\r\n \r\n addDebugLog(`\ud83d\udcca \u0e02\u0e19\u0e32\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25: ${dataString.length} \u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23`);\r\n \r\n \/\/ \u0e16\u0e49\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e0d\u0e48\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b \u0e43\u0e2b\u0e49\u0e41\u0e1a\u0e48\u0e07\u0e2a\u0e48\u0e07\r\n if (dataString.length > maxLength || data.length > 15) {\r\n addDebugLog(`\u26a0\ufe0f \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e0d\u0e48 - \u0e41\u0e1a\u0e48\u0e07\u0e2a\u0e48\u0e07\u0e17\u0e35\u0e25\u0e30 8 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`);\r\n \r\n const batchSize = 8;\r\n let currentIndex = 0;\r\n let successCount = 0;\r\n \r\n const sendNextBatch = () => {\r\n if (currentIndex >= data.length) {\r\n addDebugLog(`\u2705 \u0e2a\u0e48\u0e07\u0e04\u0e23\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ${data.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`);\r\n resolve({ result: 'success' });\r\n return;\r\n }\r\n \r\n const batch = data.slice(currentIndex, currentIndex + batchSize);\r\n const batchNum = Math.floor(currentIndex \/ batchSize) + 1;\r\n const totalBatches = Math.ceil(data.length \/ batchSize);\r\n \r\n addDebugLog(`\ud83d\udce4 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e2a\u0e48\u0e07\u0e0a\u0e38\u0e14\u0e17\u0e35\u0e48 ${batchNum}\/${totalBatches} (${batch.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23)`);\r\n \r\n sendSingleRequest(batch)\r\n .then(() => {\r\n successCount += batch.length;\r\n addDebugLog(`\u2705 \u0e0a\u0e38\u0e14\u0e17\u0e35\u0e48 ${batchNum} \u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 (\u0e23\u0e27\u0e21 ${successCount}\/${data.length})`);\r\n currentIndex += batchSize;\r\n setTimeout(sendNextBatch, 1000); \/\/ \u0e23\u0e2d 1 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35\r\n })\r\n .catch(error => {\r\n addDebugLog(`\u274c \u0e0a\u0e38\u0e14\u0e17\u0e35\u0e48 ${batchNum} \u0e25\u0e49\u0e21\u0e40\u0e2b\u0e25\u0e27: ${error.message}`);\r\n reject(error);\r\n });\r\n };\r\n \r\n sendNextBatch();\r\n \r\n } else {\r\n \/\/ \u0e2a\u0e48\u0e07\u0e17\u0e35\u0e40\u0e14\u0e35\u0e22\u0e27\r\n addDebugLog(`\ud83d\udce4 \u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e40\u0e14\u0e35\u0e22\u0e27 ${data.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`);\r\n sendSingleRequest(data)\r\n .then(() => {\r\n addDebugLog(`\u2705 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14`);\r\n resolve({ result: 'success' });\r\n })\r\n .catch(reject);\r\n }\r\n });\r\n }\r\n\r\n function sendSingleRequest(data) {\r\n return new Promise((resolve, reject) => {\r\n const callbackName = 'jsonpCallback_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);\r\n let timeoutId;\r\n \r\n window[callbackName] = function(response) {\r\n clearTimeout(timeoutId);\r\n delete window[callbackName];\r\n const script = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (script) document.body.removeChild(script);\r\n \r\n if (response.result === 'success') {\r\n resolve(response);\r\n } else {\r\n reject(new Error(response.error || 'Unknown error'));\r\n }\r\n };\r\n \r\n const params = new URLSearchParams({\r\n callback: callbackName,\r\n action: 'saveSubmission',\r\n data: JSON.stringify(data)\r\n });\r\n \r\n const script = document.createElement('script');\r\n script.src = `${SCRIPT_URL}?${params.toString()}`;\r\n \r\n script.onerror = () => {\r\n clearTimeout(timeoutId);\r\n delete window[callbackName];\r\n reject(new Error('\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e44\u0e14\u0e49 - \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a URL \u0e41\u0e25\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c'));\r\n };\r\n \r\n timeoutId = setTimeout(() => {\r\n if (window[callbackName]) {\r\n delete window[callbackName];\r\n const s = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (s) document.body.removeChild(s);\r\n reject(new Error('Request timeout - \u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e19\u0e32\u0e19\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b'));\r\n }\r\n }, 30000);\r\n \r\n document.body.appendChild(script);\r\n });\r\n }\r\n\r\n function loadStatusFromSheet() {\r\n Swal.fire({\r\n title: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...',\r\n text: '\u0e42\u0e1b\u0e23\u0e14\u0e23\u0e2d\u0e2a\u0e31\u0e01\u0e04\u0e23\u0e39\u0e48',\r\n allowOutsideClick: false,\r\n didOpen: () => {\r\n Swal.showLoading();\r\n }\r\n });\r\n\r\n const callbackName = 'jsonpCallback_' + Date.now();\r\n let timeoutId;\r\n \r\n window[callbackName] = function(response) {\r\n clearTimeout(timeoutId);\r\n delete window[callbackName];\r\n const script = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (script) document.body.removeChild(script);\r\n \r\n Swal.close();\r\n \r\n if (response.result === 'success' && response.data) {\r\n allStatusData = response.data;\r\n document.getElementById('search-student-id').value = '';\r\n displayStatusList(allStatusData);\r\n Swal.fire({\r\n icon: 'success',\r\n title: '\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!',\r\n text: `\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 ${response.data.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`,\r\n timer: 2000,\r\n showConfirmButton: false\r\n });\r\n } else {\r\n allStatusData = [];\r\n Swal.fire({\r\n icon: 'info',\r\n title: '\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25',\r\n text: '\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a',\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27',\r\n confirmButtonColor: '#5A9CB5'\r\n });\r\n }\r\n };\r\n\r\n const script = document.createElement('script');\r\n const params = new URLSearchParams({\r\n callback: callbackName,\r\n action: 'getStatus'\r\n });\r\n \r\n script.src = `${SCRIPT_URL}?${params.toString()}`;\r\n script.onerror = () => {\r\n clearTimeout(timeoutId);\r\n delete window[callbackName];\r\n Swal.fire({\r\n icon: 'error',\r\n title: '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14',\r\n text: '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07',\r\n confirmButtonText: '\u0e25\u0e2d\u0e07\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07',\r\n confirmButtonColor: '#FA6868'\r\n });\r\n };\r\n \r\n timeoutId = setTimeout(() => {\r\n if (window[callbackName]) {\r\n delete window[callbackName];\r\n const s = document.querySelector(`script[src*=\"${callbackName}\"]`);\r\n if (s) document.body.removeChild(s);\r\n Swal.fire({\r\n icon: 'error',\r\n title: '\u0e2b\u0e21\u0e14\u0e40\u0e27\u0e25\u0e32',\r\n text: '\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e19\u0e32\u0e19\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48',\r\n confirmButtonColor: '#FA6868'\r\n });\r\n }\r\n }, 15000);\r\n \r\n document.body.appendChild(script);\r\n }\r\n\r\n function displayStatusList(data) {\r\n const statusList = document.getElementById('status-list');\r\n \r\n if (!data || data.length === 0) {\r\n statusList.innerHTML = '<p style=\"text-align: center; color: #6b7280; padding: 30px;\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19<\/p>';\r\n return;\r\n }\r\n\r\n const searchValue = document.getElementById('search-student-id').value.trim();\r\n const showingFiltered = searchValue && data.length < allStatusData.length;\r\n\r\n let html = '';\r\n \r\n if (showingFiltered) {\r\n html += `\r\n <div style=\"background: #E8F4F8; padding: 12px 20px; border-radius: 10px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;\">\r\n <div style=\"color: #5A9CB5; font-weight: 600;\">\r\n \ud83d\udd0d \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c: ${data.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\r\n <\/div>\r\n <button onclick=\"clearSearch()\" style=\"background: white; color: #5A9CB5; border: 2px solid #5A9CB5; padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Sarabun', sans-serif;\">\r\n \u0e25\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32\r\n <\/button>\r\n <\/div>\r\n `;\r\n }\r\n\r\n html += `\r\n <div style=\"overflow-x: auto; margin-top: 20px;\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th style=\"min-width: 100px;\">\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27<\/th>\r\n <th style=\"min-width: 70px;\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/th>\r\n <th style=\"min-width: 180px; text-align: left;\">\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/th>\r\n <th style=\"min-width: 60px;\">\u0e0a\u0e31\u0e49\u0e19<\/th>\r\n <th style=\"min-width: 60px;\">\u0e2b\u0e49\u0e2d\u0e07<\/th>\r\n <th style=\"min-width: 150px; text-align: left;\">\u0e0a\u0e37\u0e48\u0e2d\u0e07\u0e32\u0e19<\/th>\r\n <th style=\"min-width: 130px;\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07<\/th>\r\n <th style=\"min-width: 100px;\">\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\r\n <th style=\"min-width: 90px;\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e15\u0e47\u0e21<\/th>\r\n <th style=\"min-width: 100px;\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n `;\r\n\r\n data.forEach((item, index) => {\r\n let statusClass = 'status-waiting';\r\n let statusText = item.status || '\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08';\r\n \r\n if (item.status === '\u0e2a\u0e48\u0e07\u0e41\u0e25\u0e49\u0e27\u0e23\u0e2d\u0e15\u0e23\u0e27\u0e08') {\r\n statusClass = 'status-waiting';\r\n } else if (item.status === '\u0e15\u0e23\u0e27\u0e08\u0e41\u0e25\u0e49\u0e27') {\r\n statusClass = 'status-checked';\r\n } else if (item.status === '\u0e23\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e21\u0e48' || item.status === '\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e2a\u0e48\u0e07') {\r\n statusClass = 'status-resubmit';\r\n }\r\n\r\n html += `\r\n <tr>\r\n <td style=\"text-align: center; font-weight: 500; color: #1f2937;\">${item.studentId || '-'}<\/td>\r\n <td style=\"text-align: center; font-weight: 600; color: #1f2937;\">${item.studentNumber || '-'}<\/td>\r\n <td style=\"text-align: left; font-weight: 500; color: #1f2937;\">${item.studentName || '-'}<\/td>\r\n <td style=\"text-align: center; color: #1f2937;\">${item.grade || '-'}<\/td>\r\n <td style=\"text-align: center; color: #1f2937;\">${item.room || '-'}<\/td>\r\n <td style=\"text-align: left; color: #374151;\">${item.assignmentName || '-'}<\/td>\r\n <td style=\"text-align: center; font-size: 13px; color: #6b7280;\">${item.submitDate || '-'}<\/td>\r\n <td style=\"text-align: center;\">\r\n <span class=\"status-badge ${statusClass}\">${statusText}<\/span>\r\n <\/td>\r\n <td style=\"text-align: center; font-weight: 600; color: #1f2937;\">${item.fullScore || '-'}<\/td>\r\n <td style=\"text-align: center; font-weight: 700; color: #FAAC68;\">${item.earnedScore || '-'}<\/td>\r\n <\/tr>\r\n `;\r\n });\r\n\r\n html += `\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n `;\r\n\r\n statusList.innerHTML = html;\r\n }\r\n\r\n const defaultConfig = {\r\n system_title: \"\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e07\u0e32\u0e19\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\",\r\n school_name: \"\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25\u0e27\u0e31\u0e14\u0e43\u0e2b\u0e0d\u0e48\",\r\n primary_color: \"#5A9CB5\",\r\n secondary_color: \"#FACE68\",\r\n accent_color: \"#FAAC68\",\r\n text_color: \"#5A9CB5\",\r\n background_color: \"#FA6868\"\r\n };\r\n\r\n async function onConfigChange(config) {\r\n const systemTitle = config.system_title || defaultConfig.system_title;\r\n const schoolName = config.school_name || defaultConfig.school_name;\r\n const primaryColor = config.primary_color || defaultConfig.primary_color;\r\n const secondaryColor = config.secondary_color || defaultConfig.secondary_color;\r\n const accentColor = config.accent_color || defaultConfig.accent_color;\r\n const textColor = config.text_color || defaultConfig.text_color;\r\n const bgColor = config.background_color || defaultConfig.background_color;\r\n\r\n document.getElementById('system-title').textContent = systemTitle;\r\n document.getElementById('school-name').textContent = schoolName;\r\n\r\n document.documentElement.style.setProperty('--primary-color', primaryColor);\r\n document.documentElement.style.setProperty('--secondary-color', secondaryColor);\r\n document.documentElement.style.setProperty('--accent-color', accentColor);\r\n document.documentElement.style.setProperty('--text-color', textColor);\r\n\r\n const existingStyle = document.getElementById('dynamic-styles');\r\n if (existingStyle) {\r\n existingStyle.remove();\r\n }\r\n\r\n const style = document.createElement('style');\r\n style.id = 'dynamic-styles';\r\n style.textContent = `\r\n .student-number { background: ${primaryColor} !important; }\r\n .btn-primary { background: linear-gradient(135deg, ${primaryColor} 0%, ${textColor} 100%) !important; }\r\n .btn-secondary { background: linear-gradient(135deg, ${secondaryColor} 0%, ${accentColor} 100%) !important; color: #333 !important; }\r\n .tab-btn.active { background: ${primaryColor} !important; border-color: ${primaryColor} !important; }\r\n .header-section { border-bottom-color: ${primaryColor} !important; }\r\n #system-title { color: ${textColor} !important; }\r\n #school-name { color: ${accentColor} !important; }\r\n .form-label { color: ${textColor} !important; }\r\n .section-card h2 { color: ${textColor} !important; }\r\n thead tr { background: linear-gradient(135deg, ${primaryColor} 0%, ${textColor} 100%) !important; }\r\n `;\r\n document.head.appendChild(style);\r\n }\r\n\r\n if (window.elementSdk) {\r\n window.elementSdk.init({\r\n defaultConfig,\r\n onConfigChange,\r\n mapToCapabilities: (config) => ({\r\n recolorables: [\r\n {\r\n get: () => config.primary_color || defaultConfig.primary_color,\r\n set: (value) => {\r\n config.primary_color = value;\r\n window.elementSdk.setConfig({ primary_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.secondary_color || defaultConfig.secondary_color,\r\n set: (value) => {\r\n config.secondary_color = value;\r\n window.elementSdk.setConfig({ secondary_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.accent_color || defaultConfig.accent_color,\r\n set: (value) => {\r\n config.accent_color = value;\r\n window.elementSdk.setConfig({ accent_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.text_color || defaultConfig.text_color,\r\n set: (value) => {\r\n config.text_color = value;\r\n window.elementSdk.setConfig({ text_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.background_color || defaultConfig.background_color,\r\n set: (value) => {\r\n config.background_color = value;\r\n window.elementSdk.setConfig({ background_color: value });\r\n }\r\n }\r\n ],\r\n borderables: [],\r\n fontEditable: undefined,\r\n fontSizeable: undefined\r\n }),\r\n mapToEditPanelValues: (config) => new Map([\r\n [\"system_title\", config.system_title || defaultConfig.system_title],\r\n [\"school_name\", config.school_name || defaultConfig.school_name]\r\n ])\r\n });\r\n }\r\n\r\n window.addEventListener('DOMContentLoaded', () => {\r\n addDebugLog('\ud83d\ude80 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e23\u0e30\u0e1a\u0e1a...');\r\n loadStudentsFromSheet();\r\n });\r\n <\/script>\r\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9ba96b2dc6c98951',t:'MTc2Nzg1MTQ0MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e07\u0e32\u0e19\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e07\u0e32\u0e19\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e2d\u0e2d\u0e19\u0e44\u0e25…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-333","post","type-post","status-publish","format-standard","hentry","category-11"],"gutentor_comment":0,"_links":{"self":[{"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=333"}],"version-history":[{"count":14,"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/333\/revisions\/361"}],"wp:attachment":[{"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.watyai.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}