\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n color: #333;\n background-color: #f8f9fa;\n }\n\n .container {\n width: 100%;\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n }\n\n \/* Form Controls *\/\n .search-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-bottom: 1rem;\n align-items: flex-start;\n }\n\n .search-controls select,\n .search-controls input[type=\"text\"] {\n flex: 1;\n min-width: 200px;\n }\n\n .search-controls .btn-container {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n input[type=\"text\"],\n input[type=\"file\"],\n select.form-control {\n width: 100%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-family: inherit;\n }\n\n \/* Buttons *\/\n .btn {\n width: auto;\n padding: 10px 20px;\n margin: 10px 0;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n white-space: nowrap;\n }\n\n .btn-search {\n background: #5cb85c;\n color: white;\n }\n\n .btn-search:hover {\n background: #4cae4c;\n }\n\n .btn-reset {\n background: #f0ad4e;\n color: white;\n }\n\n .btn-reset:hover {\n background: #eea236;\n }\n\n \/* Table Styles *\/\n .table-container {\n overflow-x: auto;\n margin-bottom: 2rem;\n }\n\n .table {\n width: 100%;\n border-collapse: collapse;\n background-color: white;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n table-layout: fixed;\n }\n\n .table th,\n .table td {\n padding: 0.75rem;\n border: 1px solid #dee2e6;\n text-align: left;\n word-wrap: break-word;\n }\n\n .table th {\n background-color: #f8f9fa;\n font-weight: bold;\n text-align: center;\n }\n\n .table tr:nth-child(even) {\n background-color: #f8f9fa;\n }\n\n \/* Column widths *\/\n .table th:nth-child(1) { width: 10%; } \/* \u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35 *\/\n .table th:nth-child(2) { width: 12%; } \/* \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e1c\u0e25\u0e07\u0e32\u0e19 *\/\n .table th:nth-child(3) { width: 38%; } \/* \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23 *\/\n .table th:nth-child(4) { width: 10%; } \/* \u0e23\u0e30\u0e14\u0e31\u0e1a *\/\n .table th:nth-child(5) { width: 10%; } \/* \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e2d\u0e1a *\/\n .table th:nth-child(6) { width: 20%; min-width: 200px; max-width: 400px; } \/* \u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23 *\/\n\n .table td:nth-child(6) {\n text-align: center;\n padding: 10px;\n }\n\n \/* Certificate Thumbnail *\/\n .certificate-thumb {\n border-radius: 12px;\n transition: all 0.3s ease;\n cursor: pointer;\n border: 2px solid #f8f9fa;\n width: 200px;\n }\n\n .certificate-thumb:hover {\n border-color: #0d6efd;\n transform: scale(1.05);\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n \/* Modal Styles *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.9);\n z-index: 1000;\n }\n\n .modal.show {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n position: relative;\n max-width: 90%;\n max-height: 90vh;\n }\n\n .modal-image {\n max-width: 100%;\n max-height: 90vh;\n object-fit: contain;\n }\n\n .modal-close {\n position: absolute;\n top: -40px;\n right: 0;\n color: white;\n font-size: 30px;\n cursor: pointer;\n background: rgba(0,0,0,0.5);\n border: none;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Pagination *\/\n .pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n margin-top: 2rem;\n }\n\n .pagination button {\n padding: 10px;\n background: #5cb85c;\n color: white;\n border: none;\n cursor: pointer;\n border-radius: 5px;\n transition: background-color 0.3s ease;\n }\n\n .pagination button:hover:not(:disabled) {\n background: #4cae4c;\n }\n\n .pagination button:disabled {\n background: #cccccc;\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .pagination input {\n width: 70px;\n padding: 0.375rem;\n border: 1px solid #dee2e6;\n border-radius: 4px;\n text-align: center;\n }\n \n .pagination .total-pages {\n background-color: #ffffff;\n padding: 0.5rem 0.75rem;\n border-radius: 4px;\n border: 1px solid #dee2e6;\n } \n\n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .search-controls {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\t<script>\n\t\tfunction addLoadingStyle() {\n\t\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 style element\n\t\t\tconst style = document.createElement('style');\n\t\t\t\n\t\t\t\/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 CSS rules\n\t\t\tconst css = `\n\t\t\t\t.loading {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 50%;\n\t\t\t\t\tleft: 50%;\n\t\t\t\t\twidth: 350px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t\tbackground: rgba(0, 0, 139, 0.9);\n\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\tpadding: 20px;\n\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t}\n\t\t\t`;\n\t\t\t\n\t\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 CSS \u0e25\u0e07\u0e43\u0e19 style element\n\t\t\tstyle.textContent = css;\n\t\t\t\n\t\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 style element \u0e25\u0e07\u0e43\u0e19 <head>\n\t\t\tdocument.head.appendChild(style);\n\t\t}\n\n\t\t\/\/ \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\n\t\taddLoadingStyle(); \n \/\/ Show loading indicator\n function showLoading(show = true) {\n const loadingDiv = document.createElement('div');\n loadingDiv.id = 'loadingIndicator';\n loadingDiv.className = 'loading';\n loadingDiv.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14... ';\n \n if (show) {\n document.body.appendChild(loadingDiv);\n } else {\n const existingLoader = document.getElementById('loadingIndicator');\n if (existingLoader) {\n existingLoader.remove();\n }\n }\n }\n \n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\n function delay(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n }\n \/\/showLoading(true);\n <\/script>\n <div class=\"container\">\n \n <div class=\"search-controls\">\n <select class=\"form-control select-control\" onchange=\"changeItemsPerPage(this.value)\">\n <option value=\"5\">\u0e41\u0e2a\u0e14\u0e07 5 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"10\" selected>\u0e41\u0e2a\u0e14\u0e07 10 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"15\">\u0e41\u0e2a\u0e14\u0e07 15 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"20\">\u0e41\u0e2a\u0e14\u0e07 20 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"30\">\u0e41\u0e2a\u0e14\u0e07 30 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"50\">\u0e41\u0e2a\u0e14\u0e07 50 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <\/select>\n <input type=\"text\" id=\"searchName\" class=\"form-control\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d...\">\n <input type=\"text\" id=\"searchAward\" class=\"form-control\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25...\">\n <div class=\"btn-container\">\n <button class=\"btn btn-search\" onclick=\"searchCertificates()\">\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/button>\n <button class=\"btn btn-reset\" onclick=\"showAll()\">\u21ba \u0e25\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"table-container\">\n <table class=\"table\">\n <thead>\n <tr>\n <th>\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35<\/th>\n <th>\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e1c\u0e25\u0e07\u0e32\u0e19<\/th>\n <th>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/th>\n <th>\u0e23\u0e30\u0e14\u0e31\u0e1a<\/th>\n <th>\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e2d\u0e1a<\/th>\n <th>\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div id=\"pagination\" class=\"pagination\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"imageModal\" class=\"modal\">\n <div class=\"modal-content\">\n <button class=\"modal-close\" onclick=\"closeModal()\">×<\/button>\n <img id=\"modalImage\" class=\"modal-image\" alt=\"\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23\">\n <\/div>\n <\/div>\n\n <script>\n \/\/ Keep the existing JavaScript code, but update these functions:\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07 Google Sheet\n const SHEET_ID = '1T2xxYrH1rNjW6X8X4yBv7VVZw7uAA6SIjnwLTiE2JK0';\n const SHEET_RANGE = '\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19';\n const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n let allData = [];\n let filteredData = [];\n let currentPage = 1;\n let itemsPerPage = 10; \/\/ \u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e1b\u0e25\u0e07 Google Drive URL\n function getGoogleDriveImageUrl(url, size = 250) {\n if (!url) return '';\n if (url.includes('drive.google.com')) {\n let fileId = '';\n if (url.includes('\/file\/d\/')) {\n fileId = url.split('\/file\/d\/')[1].split('\/')[0];\n } else if (url.includes('id=')) {\n fileId = url.split('id=')[1].split('&')[0];\n }\n if (fileId) {\n return `https:\/\/drive.google.com\/thumbnail?id=${fileId}&sz=s${size}`;\n }\n }\n return url;\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Sheet\n async function loadSheetData() {\n\t\t\tshowLoading(true);\t\n try {\n const response = await fetch(\n `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${SHEET_ID}\/values\/${SHEET_RANGE}?key=${API_KEY}`\n );\n const data = await response.json();\n \n if (data.values && data.values.length > 0) {\n allData = data.values.slice(1); \/\/ \u0e02\u0e49\u0e32\u0e21\u0e41\u0e16\u0e27\u0e2b\u0e31\u0e27\u0e15\u0e32\u0e23\u0e32\u0e07\n filteredData = [...allData];\n displayData();\n } else {\n document.getElementById('tableBody').innerHTML = \n '<tr><td colspan=\"8\" class=\"text-center\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/td><\/tr>';\n }\n await delay(1000);\n\t\t\t\tshowLoading(false);\t\n } catch (error) {\n \tawait delay(1000);\n\t\t\t\tshowLoading(false);\t\n console.error('Error:', error);\n document.getElementById('tableBody').innerHTML = \n '<tr><td colspan=\"8\" class=\"text-center\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/td><\/tr>';\n }\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07\n function displayData() {\n const start = (currentPage - 1) * itemsPerPage;\n const end = start + itemsPerPage;\n const pageData = filteredData.slice(start, end);\n\n const tableBody = document.getElementById('tableBody');\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 timestamp \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e41\u0e04\u0e0a\n const timestamp = new Date().getTime();\n tableBody.innerHTML = pageData.map(row => `\n <tr>\n <td>${row[1] || ''}<\/td>\n <td>${row[2] || ''}<\/td>\n <td>${row[3] || ''}<\/td>\n <td>${row[4] || ''}<\/td>\n <td>${row[5] || ''}<\/td>\n <td>${row[7] ? `<img decoding=\"async\" src=\"${getGoogleDriveImageUrl(row[7])}?t=${timestamp}\" \n class=\"certificate-thumb\" width=\"200\" onclick=\"showImage('${row[7]}')\" \/>` : ''}<\/td>\n <\/tr>\n `).join('');\n\n updatePagination();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\n function showAll() {\n document.getElementById('searchName').value = '';\n document.getElementById('searchAward').value = '';\n filteredData = [...allData];\n currentPage = 1;\n displayData();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n function searchCertificates() {\n const nameSearch = document.getElementById('searchName').value.toLowerCase();\n const awardSearch = document.getElementById('searchAward').value.toLowerCase();\n\n filteredData = allData.filter(row => {\n const name = (row[2] || '').toLowerCase();\n const award = (row[3] || '').toLowerCase();\n return name.includes(nameSearch) && award.includes(awardSearch);\n });\n\n currentPage = 1;\n displayData();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e17\u0e1b\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n function updatePagination() {\n const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n const pagination = document.getElementById('pagination');\n \n let buttons = `\n <button class=\"pagination-button\" onclick=\"changePage(1)\" ${currentPage === 1 ? 'disabled' : ''}>\n \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\n <\/button>\n <button class=\"pagination-button\" onclick=\"changePage(${currentPage - 1})\" ${currentPage === 1 ? 'disabled' : ''}>\n \u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\n <\/button>\n <div class=\"d-inline-block mx-2\">\n <input type=\"number\" class=\"form-control form-control-sm d-inline-block\" \n style=\"width: 70px;\" value=\"${currentPage}\" \n min=\"1\" max=\"${totalPages}\"\n onchange=\"goToPage(this.value)\">\n <span class=\"total-pages mx-1\">\u0e08\u0e32\u0e01 ${totalPages}<\/span>\n <\/div>\n <button class=\"pagination-button\" onclick=\"changePage(${currentPage + 1})\" \n ${currentPage === totalPages ? 'disabled' : ''}>\u0e16\u0e31\u0e14\u0e44\u0e1b<\/button>\n <button class=\"pagination-button\" onclick=\"changePage(${totalPages})\" \n ${currentPage === totalPages ? 'disabled' : ''}>\u0e2b\u0e19\u0e49\u0e32\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22<\/button>\n `;\n\n pagination.innerHTML = buttons;\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e33\u0e19\u0e27\u0e19\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\n function changeItemsPerPage(value) {\n itemsPerPage = parseInt(value);\n currentPage = 1;\n displayData();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\n function goToPage(page) {\n const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n page = parseInt(page);\n if (page >= 1 && page <= totalPages) {\n currentPage = page;\n displayData();\n }\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n function changePage(newPage) {\n currentPage = newPage;\n displayData();\n \/\/ \u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e44\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e38\u0e48\u0e21\u0e19\u0e27\u0e25\n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n }); \n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e42\u0e21\u0e14\u0e2d\u0e25\n function showImage(url) {\n const modalImage = document.getElementById('modalImage');\n modalImage.src = getGoogleDriveImageUrl(url, 1024);\n const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));\n imageModal.show();\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e1e\u0e23\u0e49\u0e2d\u0e21\n document.addEventListener('DOMContentLoaded', () => {\n\t\t\tloadSheetData();\n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 event listener \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e01\u0e14\u0e1b\u0e38\u0e48\u0e21 Enter \u0e43\u0e19\u0e0a\u0e48\u0e2d\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\n ['searchName', 'searchAward'].forEach(id => {\n document.getElementById(id).addEventListener('keypress', (e) => {\n if (e.key === 'Enter') searchCertificates();\n });\n });\n });\n function showImage(url) {\n const modal = document.getElementById('imageModal');\n const modalImage = document.getElementById('modalImage');\n modalImage.src = getGoogleDriveImageUrl(url, 1024);\n modal.classList.add('show');\n }\n\n function closeModal() {\n const modal = document.getElementById('imageModal');\n modal.classList.remove('show');\n }\n\n \/\/ Add event listener to close modal when clicking outside the image\n document.getElementById('imageModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeModal();\n }\n });\n\n \/\/ Add keyboard support for closing modal\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && document.getElementById('imageModal').classList.contains('show')) {\n closeModal();\n }\n });\n\n \/\/ Rest of your existing JavaScript code remains the same...\n \n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">…<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e42\u0e04\u0e4a\u0e14 1 \u0e21\u0e04 2568<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-1573","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1573"}],"version-history":[{"count":68,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1573\/revisions"}],"predecessor-version":[{"id":7545,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1573\/revisions\/7545"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1573,"date":"2024-09-15T21:08:18","date_gmt":"2024-09-15T14:08:18","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=1573"},"modified":"2026-03-10T08:13:52","modified_gmt":"2026-03-10T01:13:52","slug":"%e0%b9%80%e0%b8%81%e0%b8%b5%e0%b8%a2%e0%b8%a3%e0%b8%95%e0%b8%b4%e0%b8%9a%e0%b8%b1%e0%b8%95%e0%b8%a3%e0%b8%9c%e0%b8%a5%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%99%e0%b8%b1%e0%b8%81%e0%b9%80%e0%b8%a3%e0%b8%b5","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=1573","title":{"rendered":"\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e31\u0e18\u0e22\u0e21\u0e17\u0e31\u0e1a\u0e17\u0e34\u0e21\u0e2a\u0e22\u0e32\u0e21 \u0e50\u0e54 \u0e43\u0e19\u0e1e\u0e23\u0e30\u0e2d\u0e38\u0e1b\u0e16\u0e31\u0e21\u0e20\u0e4c"},"content":{"rendered":"\n\n\n\n \n \n \u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n color: #333;\n background-color: #f8f9fa;\n }\n\n .container {\n width: 100%;\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n }\n\n \/* Form Controls *\/\n .search-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-bottom: 1rem;\n align-items: flex-start;\n }\n\n .search-controls select,\n .search-controls input[type=\"text\"] {\n flex: 1;\n min-width: 200px;\n }\n\n .search-controls .btn-container {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n input[type=\"text\"],\n input[type=\"file\"],\n select.form-control {\n width: 100%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-family: inherit;\n }\n\n \/* Buttons *\/\n .btn {\n width: auto;\n padding: 10px 20px;\n margin: 10px 0;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n white-space: nowrap;\n }\n\n .btn-search {\n background: #5cb85c;\n color: white;\n }\n\n .btn-search:hover {\n background: #4cae4c;\n }\n\n .btn-reset {\n background: #f0ad4e;\n color: white;\n }\n\n .btn-reset:hover {\n background: #eea236;\n }\n\n \/* Table Styles *\/\n .table-container {\n overflow-x: auto;\n margin-bottom: 2rem;\n }\n\n .table {\n width: 100%;\n border-collapse: collapse;\n background-color: white;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n table-layout: fixed;\n }\n\n .table th,\n .table td {\n padding: 0.75rem;\n border: 1px solid #dee2e6;\n text-align: left;\n word-wrap: break-word;\n }\n\n .table th {\n background-color: #f8f9fa;\n font-weight: bold;\n text-align: center;\n }\n\n .table tr:nth-child(even) {\n background-color: #f8f9fa;\n }\n\n \/* Column widths *\/\n .table th:nth-child(1) { width: 10%; } \/* \u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35 *\/\n .table th:nth-child(2) { width: 12%; } \/* \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e1c\u0e25\u0e07\u0e32\u0e19 *\/\n .table th:nth-child(3) { width: 38%; } \/* \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23 *\/\n .table th:nth-child(4) { width: 10%; } \/* \u0e23\u0e30\u0e14\u0e31\u0e1a *\/\n .table th:nth-child(5) { width: 10%; } \/* \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e2d\u0e1a *\/\n .table th:nth-child(6) { width: 20%; min-width: 200px; max-width: 400px; } \/* \u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23 *\/\n\n .table td:nth-child(6) {\n text-align: center;\n padding: 10px;\n }\n\n \/* Certificate Thumbnail *\/\n .certificate-thumb {\n border-radius: 12px;\n transition: all 0.3s ease;\n cursor: pointer;\n border: 2px solid #f8f9fa;\n width: 200px;\n }\n\n .certificate-thumb:hover {\n border-color: #0d6efd;\n transform: scale(1.05);\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n \/* Modal Styles *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.9);\n z-index: 1000;\n }\n\n .modal.show {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n position: relative;\n max-width: 90%;\n max-height: 90vh;\n }\n\n .modal-image {\n max-width: 100%;\n max-height: 90vh;\n object-fit: contain;\n }\n\n .modal-close {\n position: absolute;\n top: -40px;\n right: 0;\n color: white;\n font-size: 30px;\n cursor: pointer;\n background: rgba(0,0,0,0.5);\n border: none;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Pagination *\/\n .pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n margin-top: 2rem;\n }\n\n .pagination button {\n padding: 10px;\n background: #5cb85c;\n color: white;\n border: none;\n cursor: pointer;\n border-radius: 5px;\n transition: background-color 0.3s ease;\n }\n\n .pagination button:hover:not(:disabled) {\n background: #4cae4c;\n }\n\n .pagination button:disabled {\n background: #cccccc;\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .pagination input {\n width: 70px;\n padding: 0.375rem;\n border: 1px solid #dee2e6;\n border-radius: 4px;\n text-align: center;\n }\n \n .pagination .total-pages {\n background-color: #ffffff;\n padding: 0.5rem 0.75rem;\n border-radius: 4px;\n border: 1px solid #dee2e6;\n } \n\n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .search-controls {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\t<script>\n\t\tfunction addLoadingStyle() {\n\t\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 style element\n\t\t\tconst style = document.createElement('style');\n\t\t\t\n\t\t\t\/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 CSS rules\n\t\t\tconst css = `\n\t\t\t\t.loading {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 50%;\n\t\t\t\t\tleft: 50%;\n\t\t\t\t\twidth: 350px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t\tbackground: rgba(0, 0, 139, 0.9);\n\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\tpadding: 20px;\n\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t}\n\t\t\t`;\n\t\t\t\n\t\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 CSS \u0e25\u0e07\u0e43\u0e19 style element\n\t\t\tstyle.textContent = css;\n\t\t\t\n\t\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 style element \u0e25\u0e07\u0e43\u0e19 <head>\n\t\t\tdocument.head.appendChild(style);\n\t\t}\n\n\t\t\/\/ \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\n\t\taddLoadingStyle(); \n \/\/ Show loading indicator\n function showLoading(show = true) {\n const loadingDiv = document.createElement('div');\n loadingDiv.id = 'loadingIndicator';\n loadingDiv.className = 'loading';\n loadingDiv.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14... ';\n \n if (show) {\n document.body.appendChild(loadingDiv);\n } else {\n const existingLoader = document.getElementById('loadingIndicator');\n if (existingLoader) {\n existingLoader.remove();\n }\n }\n }\n \n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\n function delay(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n }\n \/\/showLoading(true);\n <\/script>\n <div class=\"container\">\n \n <div class=\"search-controls\">\n <select class=\"form-control select-control\" onchange=\"changeItemsPerPage(this.value)\">\n <option value=\"5\">\u0e41\u0e2a\u0e14\u0e07 5 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"10\" selected>\u0e41\u0e2a\u0e14\u0e07 10 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"15\">\u0e41\u0e2a\u0e14\u0e07 15 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"20\">\u0e41\u0e2a\u0e14\u0e07 20 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"30\">\u0e41\u0e2a\u0e14\u0e07 30 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <option value=\"50\">\u0e41\u0e2a\u0e14\u0e07 50 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/option>\n <\/select>\n <input type=\"text\" id=\"searchName\" class=\"form-control\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d...\">\n <input type=\"text\" id=\"searchAward\" class=\"form-control\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25...\">\n <div class=\"btn-container\">\n <button class=\"btn btn-search\" onclick=\"searchCertificates()\">\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/button>\n <button class=\"btn btn-reset\" onclick=\"showAll()\">\u21ba \u0e25\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"table-container\">\n <table class=\"table\">\n <thead>\n <tr>\n <th>\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35<\/th>\n <th>\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e1c\u0e25\u0e07\u0e32\u0e19<\/th>\n <th>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/th>\n <th>\u0e23\u0e30\u0e14\u0e31\u0e1a<\/th>\n <th>\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e2d\u0e1a<\/th>\n <th>\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div id=\"pagination\" class=\"pagination\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"imageModal\" class=\"modal\">\n <div class=\"modal-content\">\n <button class=\"modal-close\" onclick=\"closeModal()\">×<\/button>\n <img id=\"modalImage\" class=\"modal-image\" alt=\"\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23\">\n <\/div>\n <\/div>\n\n <script>\n \/\/ Keep the existing JavaScript code, but update these functions:\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07 Google Sheet\n const SHEET_ID = '1T2xxYrH1rNjW6X8X4yBv7VVZw7uAA6SIjnwLTiE2JK0';\n const SHEET_RANGE = '\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19';\n const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n let allData = [];\n let filteredData = [];\n let currentPage = 1;\n let itemsPerPage = 10; \/\/ \u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e1b\u0e25\u0e07 Google Drive URL\n function getGoogleDriveImageUrl(url, size = 250) {\n if (!url) return '';\n if (url.includes('drive.google.com')) {\n let fileId = '';\n if (url.includes('\/file\/d\/')) {\n fileId = url.split('\/file\/d\/')[1].split('\/')[0];\n } else if (url.includes('id=')) {\n fileId = url.split('id=')[1].split('&')[0];\n }\n if (fileId) {\n return `https:\/\/drive.google.com\/thumbnail?id=${fileId}&sz=s${size}`;\n }\n }\n return url;\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Sheet\n async function loadSheetData() {\n\t\t\tshowLoading(true);\t\n try {\n const response = await fetch(\n `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${SHEET_ID}\/values\/${SHEET_RANGE}?key=${API_KEY}`\n );\n const data = await response.json();\n \n if (data.values && data.values.length > 0) {\n allData = data.values.slice(1); \/\/ \u0e02\u0e49\u0e32\u0e21\u0e41\u0e16\u0e27\u0e2b\u0e31\u0e27\u0e15\u0e32\u0e23\u0e32\u0e07\n filteredData = [...allData];\n displayData();\n } else {\n document.getElementById('tableBody').innerHTML = \n '<tr><td colspan=\"8\" class=\"text-center\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/td><\/tr>';\n }\n await delay(1000);\n\t\t\t\tshowLoading(false);\t\n } catch (error) {\n \tawait delay(1000);\n\t\t\t\tshowLoading(false);\t\n console.error('Error:', error);\n document.getElementById('tableBody').innerHTML = \n '<tr><td colspan=\"8\" class=\"text-center\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/td><\/tr>';\n }\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07\n function displayData() {\n const start = (currentPage - 1) * itemsPerPage;\n const end = start + itemsPerPage;\n const pageData = filteredData.slice(start, end);\n\n const tableBody = document.getElementById('tableBody');\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 timestamp \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e41\u0e04\u0e0a\n const timestamp = new Date().getTime();\n tableBody.innerHTML = pageData.map(row => `\n <tr>\n <td>${row[1] || ''}<\/td>\n <td>${row[2] || ''}<\/td>\n <td>${row[3] || ''}<\/td>\n <td>${row[4] || ''}<\/td>\n <td>${row[5] || ''}<\/td>\n <td>${row[7] ? `<img decoding=\"async\" src=\"${getGoogleDriveImageUrl(row[7])}?t=${timestamp}\" \n class=\"certificate-thumb\" width=\"200\" onclick=\"showImage('${row[7]}')\" \/>` : ''}<\/td>\n <\/tr>\n `).join('');\n\n updatePagination();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\n function showAll() {\n document.getElementById('searchName').value = '';\n document.getElementById('searchAward').value = '';\n filteredData = [...allData];\n currentPage = 1;\n displayData();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n function searchCertificates() {\n const nameSearch = document.getElementById('searchName').value.toLowerCase();\n const awardSearch = document.getElementById('searchAward').value.toLowerCase();\n\n filteredData = allData.filter(row => {\n const name = (row[2] || '').toLowerCase();\n const award = (row[3] || '').toLowerCase();\n return name.includes(nameSearch) && award.includes(awardSearch);\n });\n\n currentPage = 1;\n displayData();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e17\u0e1b\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n function updatePagination() {\n const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n const pagination = document.getElementById('pagination');\n \n let buttons = `\n <button class=\"pagination-button\" onclick=\"changePage(1)\" ${currentPage === 1 ? 'disabled' : ''}>\n \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\n <\/button>\n <button class=\"pagination-button\" onclick=\"changePage(${currentPage - 1})\" ${currentPage === 1 ? 'disabled' : ''}>\n \u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\n <\/button>\n <div class=\"d-inline-block mx-2\">\n <input type=\"number\" class=\"form-control form-control-sm d-inline-block\" \n style=\"width: 70px;\" value=\"${currentPage}\" \n min=\"1\" max=\"${totalPages}\"\n onchange=\"goToPage(this.value)\">\n <span class=\"total-pages mx-1\">\u0e08\u0e32\u0e01 ${totalPages}<\/span>\n <\/div>\n <button class=\"pagination-button\" onclick=\"changePage(${currentPage + 1})\" \n ${currentPage === totalPages ? 'disabled' : ''}>\u0e16\u0e31\u0e14\u0e44\u0e1b<\/button>\n <button class=\"pagination-button\" onclick=\"changePage(${totalPages})\" \n ${currentPage === totalPages ? 'disabled' : ''}>\u0e2b\u0e19\u0e49\u0e32\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22<\/button>\n `;\n\n pagination.innerHTML = buttons;\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e33\u0e19\u0e27\u0e19\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\n function changeItemsPerPage(value) {\n itemsPerPage = parseInt(value);\n currentPage = 1;\n displayData();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\n function goToPage(page) {\n const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n page = parseInt(page);\n if (page >= 1 && page <= totalPages) {\n currentPage = page;\n displayData();\n }\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n function changePage(newPage) {\n currentPage = newPage;\n displayData();\n \/\/ \u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e44\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e38\u0e48\u0e21\u0e19\u0e27\u0e25\n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n }); \n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e42\u0e21\u0e14\u0e2d\u0e25\n function showImage(url) {\n const modalImage = document.getElementById('modalImage');\n modalImage.src = getGoogleDriveImageUrl(url, 1024);\n const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));\n imageModal.show();\n }\n\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e1e\u0e23\u0e49\u0e2d\u0e21\n document.addEventListener('DOMContentLoaded', () => {\n\t\t\tloadSheetData();\n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 event listener \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e01\u0e14\u0e1b\u0e38\u0e48\u0e21 Enter \u0e43\u0e19\u0e0a\u0e48\u0e2d\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\n ['searchName', 'searchAward'].forEach(id => {\n document.getElementById(id).addEventListener('keypress', (e) => {\n if (e.key === 'Enter') searchCertificates();\n });\n });\n });\n function showImage(url) {\n const modal = document.getElementById('imageModal');\n const modalImage = document.getElementById('modalImage');\n modalImage.src = getGoogleDriveImageUrl(url, 1024);\n modal.classList.add('show');\n }\n\n function closeModal() {\n const modal = document.getElementById('imageModal');\n modal.classList.remove('show');\n }\n\n \/\/ Add event listener to close modal when clicking outside the image\n document.getElementById('imageModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeModal();\n }\n });\n\n \/\/ Add keyboard support for closing modal\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && document.getElementById('imageModal').classList.contains('show')) {\n closeModal();\n }\n });\n\n \/\/ Rest of your existing JavaScript code remains the same...\n \n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">…<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e42\u0e04\u0e4a\u0e14 1 \u0e21\u0e04 2568<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-1573","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1573"}],"version-history":[{"count":68,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1573\/revisions"}],"predecessor-version":[{"id":7545,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1573\/revisions\/7545"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}