\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23 – Huai-Yot Pre-test 2026<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n }\n .fade-in {\n animation: fadeIn 0.5s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .loading-spinner {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #4f46e5;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 min-h-screen pb-12 text-gray-800\">\n\n \n <header class=\"bg-indigo-600 text-white shadow-lg sticky top-0 z-50\">\n <div class=\"max-w-5xl mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center gap-4\">\n <div>\n <h1 class=\"text-xl md:text-2xl font-bold flex items-center gap-2\">\n <i class=\"fas fa-chart-bar\"><\/i> \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\n <\/h1>\n <p class=\"text-indigo-100 text-sm mt-1 ml-1\"> \u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 Huai-Yot Pre-test 2026<\/p>\n <\/div>\n \n <div class=\"flex flex-col sm:flex-row items-center gap-3\">\n <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/17l05rDP3hcqA8Dc5PyOIV_uh7UBNRyfTTH2h6PMnCag\/edit?usp=sharing\" target=\"_blank\" class=\"px-4 py-2 rounded-md text-sm font-medium bg-green-500 hover:bg-green-600 text-white shadow-sm transition-colors flex items-center gap-2\">\n <i class=\"fas fa-table\"><\/i> \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\n <\/a>\n\n <div class=\"flex bg-indigo-700 p-1 rounded-lg\">\n <button onclick=\"switchTab('dashboard')\" id=\"btn-dashboard\" class=\"px-4 py-2 rounded-md text-sm font-medium transition-colors bg-white text-indigo-700 shadow-sm\">\n \u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21\u0e2a\u0e16\u0e34\u0e15\u0e34\n <\/button>\n <button onclick=\"switchTab('search')\" id=\"btn-search\" class=\"px-4 py-2 rounded-md text-sm font-medium transition-colors text-indigo-200 hover:text-white\">\n \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-5xl mx-auto px-4 py-8\">\n \n \n <div id=\"loading-state\" class=\"flex flex-col items-center justify-center py-20\">\n <div class=\"loading-spinner mb-4\"><\/div>\n <p class=\"text-gray-500\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25…<\/p>\n <\/div>\n\n \n <div id=\"error-state\" class=\"hidden bg-red-50 border border-red-200 text-red-700 px-6 py-4 rounded-lg flex items-center gap-3\">\n <i class=\"fas fa-exclamation-triangle text-xl\"><\/i>\n <div>\n <h3 class=\"font-bold\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14<\/h3>\n <p id=\"error-message\">\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49<\/p>\n <button onclick=\"fetchData()\" class=\"mt-2 text-sm underline hover:text-red-800 font-medium\">\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"content-area\" class=\"hidden fade-in\">\n \n \n <div id=\"dashboard-view\">\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between mb-6 border-l-4 border-indigo-500\">\n <div>\n <h3 class=\"text-gray-500 text-sm font-medium uppercase tracking-wider\">\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h3>\n <p class=\"text-sm text-gray-400 mt-1\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/p>\n <\/div>\n <div class=\"text-right\">\n <p id=\"stat-total\" class=\"text-5xl font-bold text-indigo-600\">0<\/p>\n <span class=\"text-sm text-gray-500\">\u0e04\u0e19<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center\">\n <h3 class=\"text-lg font-bold text-gray-800 mb-6 flex items-center gap-2 w-full\">\n <i class=\"fas fa-layer-group text-pink-500\"><\/i> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\n <\/h3>\n <div id=\"level-chart\" class=\"relative w-48 h-48 rounded-full bg-gray-100 overflow-hidden shadow-inner flex items-center justify-center transition-all duration-500\">\n <div class=\"absolute inset-8 bg-white rounded-full flex flex-col items-center justify-center shadow-sm z-10\">\n <i class=\"fas fa-graduation-cap text-gray-300 text-2xl\"><\/i>\n <\/div>\n <\/div>\n <div id=\"level-chart-legend\" class=\"w-full mt-4\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center\">\n <h3 class=\"text-lg font-bold text-gray-800 mb-6 flex items-center gap-2 w-full\">\n <i class=\"fas fa-venus-mars text-blue-500\"><\/i> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e0a\u0e32\u0e22 \/ \u0e2b\u0e0d\u0e34\u0e07\n <\/h3>\n <div id=\"gender-chart\" class=\"relative w-48 h-48 rounded-full bg-gray-100 overflow-hidden shadow-inner flex items-center justify-center transition-all duration-500\">\n <div class=\"absolute inset-8 bg-white rounded-full flex flex-col items-center justify-center shadow-sm z-10\">\n <i class=\"fas fa-user-friends text-gray-300 text-2xl\"><\/i>\n <\/div>\n <\/div>\n <div id=\"gender-chart-legend\" class=\"w-full mt-4\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-lg font-bold text-gray-800 flex items-center gap-2\">\n <i class=\"fas fa-school text-orange-500\"><\/i> 5 \u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e21\u0e32\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\n <\/h3>\n <\/div>\n <div id=\"top-schools-container\" class=\"space-y-4\">\n \n <\/div>\n <\/div>\n\n <div class=\"text-center mt-6\">\n <button onclick=\"fetchData()\" class=\"inline-flex items-center gap-2 text-indigo-600 bg-white hover:bg-indigo-50 border border-indigo-100 px-6 py-2 rounded-full text-sm font-medium transition-colors shadow-sm\">\n <i class=\"fas fa-sync\"><\/i> \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\n <\/button>\n <p class=\"text-xs text-gray-400 mt-2\">\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e08\u0e32\u0e01 Google Sheets<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"search-view\" class=\"hidden\">\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 text-center max-w-2xl mx-auto mb-6\">\n <h2 class=\"text-xl font-bold text-gray-800 mb-2\">\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23<\/h2>\n <p class=\"text-gray-500 text-sm mb-6\">\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d \u0e2b\u0e23\u0e37\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e21\u0e31\u0e04\u0e23<\/p>\n <div class=\"relative max-w-md mx-auto\">\n <input type=\"text\" id=\"search-input\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e21\u0e0a\u0e32\u0e22, \u0e43\u0e08\u0e14\u0e35...\" \n class=\"w-full pl-12 pr-4 py-3 border border-gray-300 rounded-full focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all shadow-sm\"\n onkeyup=\"handleSearch()\">\n <i class=\"fas fa-search absolute left-4 top-4 text-gray-400\"><\/i>\n <\/div>\n <\/div>\n\n <div id=\"search-results\" class=\"space-y-4\">\n \n <div class=\"text-center py-12 text-gray-500 bg-white rounded-xl border border-gray-100 shadow-sm\">\n <div class=\"bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n <i class=\"fas fa-search text-gray-400 text-xl\"><\/i>\n <\/div>\n <p class=\"font-medium text-gray-600\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n <script>\n \/\/ Configuration\n const SHEET_ID = '11QEiyJYEm9bzwWk1FjHZE7xMC527_9N-1onuJY_Wjbw';\n const SHEET_URL = `https:\/\/docs.google.com\/spreadsheets\/d\/${SHEET_ID}\/gviz\/tq?tqx=out:json`;\n \n \/\/ Colors for Charts\n const CHART_COLORS = [\n '#4F46E5', '#EC4899', '#10B981', '#F59E0B', '#6366F1', '#8B5CF6'\n ];\n const GENDER_COLORS = {\n male: '#3B82F6', \/\/ Blue\n female: '#EC4899', \/\/ Pink\n other: '#9CA3AF' \/\/ Gray\n };\n\n \/\/ State\n let allData = [];\n let activeTab = 'dashboard';\n\n \/\/ DOM Elements\n const loadingState = document.getElementById('loading-state');\n const errorState = document.getElementById('error-state');\n const contentArea = document.getElementById('content-area');\n const dashboardView = document.getElementById('dashboard-view');\n const searchView = document.getElementById('search-view');\n const btnDashboard = document.getElementById('btn-dashboard');\n const btnSearch = document.getElementById('btn-search');\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n fetchData();\n });\n\n \/\/ Fetch Data\n async function fetchData() {\n \/\/ Show loading\n loadingState.classList.remove('hidden');\n contentArea.classList.add('hidden');\n errorState.classList.add('hidden');\n\n try {\n const response = await fetch(SHEET_URL);\n if (!response.ok) throw new Error('Network response was not ok');\n \n const text = await response.text();\n \/\/ Parse JSON from Gviz format\n const jsonString = text.substring(47).slice(0, -2);\n const json = JSON.parse(jsonString);\n\n \/\/ Process Data\n allData = json.table.rows.map(row => {\n const getValue = (idx) => {\n const cell = row.c[idx];\n return cell ? (cell.f || cell.v) : '';\n };\n return {\n dateApplied: getValue(0),\n no: getValue(1),\n prefix: getValue(2),\n name: getValue(3),\n surname: getValue(4),\n school: getValue(5),\n level: getValue(6),\n slip: getValue(7), \/\/ Column H: Payment Slip\n payDate: getValue(8),\n payTime: getValue(9),\n code: getValue(10),\n remark: getValue(11),\n status: getValue(12)\n };\n });\n\n updateDashboard();\n loadingState.classList.add('hidden');\n contentArea.classList.remove('hidden');\n\n } catch (error) {\n console.error('Error fetching data:', error);\n loadingState.classList.add('hidden');\n errorState.classList.remove('hidden');\n document.getElementById('error-message').textContent = '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e2d\u0e34\u0e19\u0e40\u0e17\u0e2d\u0e23\u0e4c\u0e40\u0e19\u0e47\u0e15';\n }\n }\n\n \/\/ Tab Switching Logic\n function switchTab(tab) {\n activeTab = tab;\n \n if (tab === 'dashboard') {\n dashboardView.classList.remove('hidden');\n searchView.classList.add('hidden');\n \n btnDashboard.classList.add('bg-white', 'text-indigo-700', 'shadow-sm');\n btnDashboard.classList.remove('text-indigo-200', 'hover:text-white');\n \n btnSearch.classList.remove('bg-white', 'text-indigo-700', 'shadow-sm');\n btnSearch.classList.add('text-indigo-200', 'hover:text-white');\n } else {\n dashboardView.classList.add('hidden');\n searchView.classList.remove('hidden');\n \n btnDashboard.classList.remove('bg-white', 'text-indigo-700', 'shadow-sm');\n btnDashboard.classList.add('text-indigo-200', 'hover:text-white');\n \n btnSearch.classList.add('bg-white', 'text-indigo-700', 'shadow-sm');\n btnSearch.classList.remove('text-indigo-200', 'hover:text-white');\n \n \/\/ Focus search input\n document.getElementById('search-input').focus();\n }\n }\n\n \/\/ Helper to render Conic Gradient Pie Chart\n function renderPieChart(elementId, legendId, data, colors) {\n let gradientStr = 'conic-gradient(';\n let currentPercent = 0;\n const total = data.reduce((sum, item) => sum + item.value, 0);\n \n let legendHtml = '<div class=\"grid grid-cols-2 gap-y-2 gap-x-4 text-sm\">';\n \n data.forEach((item, index) => {\n if (item.value === 0) return;\n \n const percent = (item.value \/ total) * 100;\n const color = Array.isArray(colors) ? colors[index % colors.length] : colors[item.key] || colors.other;\n const endPercent = currentPercent + percent;\n \n gradientStr += `${color} ${currentPercent}% ${endPercent}%, `;\n currentPercent = endPercent;\n \n legendHtml += `\n <div class=\"flex items-center gap-2\">\n <span class=\"w-3 h-3 rounded-full flex-shrink-0\" style=\"background-color: ${color}\"><\/span>\n <div class=\"flex flex-col\">\n <span class=\"text-gray-700 font-medium leading-none\">${item.label}<\/span>\n <span class=\"text-xs text-gray-500\">${item.value} \u0e04\u0e19 (${percent.toFixed(1)}%)<\/span>\n <\/div>\n <\/div>`;\n });\n \n if (total === 0) {\n gradientStr = 'conic-gradient(#f3f4f6 0% 100%)'; \/\/ Empty state\n legendHtml = '<p class=\"text-center text-gray-400 text-sm\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>';\n } else {\n gradientStr = gradientStr.slice(0, -2) + ')'; \/\/ Remove last comma\n }\n \n legendHtml += '<\/div>';\n \n document.getElementById(elementId).style.background = gradientStr;\n document.getElementById(legendId).innerHTML = legendHtml;\n }\n\n \/\/ Update Dashboard Statistics\n function updateDashboard() {\n const total = allData.length;\n if (total === 0) return;\n\n \/\/ 1. Total\n document.getElementById('stat-total').textContent = total;\n\n \/\/ 2. Prepare Data\n const levelCounts = {};\n const schoolCounts = {};\n let maleCount = 0;\n let femaleCount = 0;\n\n allData.forEach(row => {\n \/\/ Level\n const level = (row.level || '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38').trim();\n levelCounts[level] = (levelCounts[level] || 0) + 1;\n\n \/\/ School\n const school = (row.school || '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38').trim();\n if (school && school !== '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38') {\n schoolCounts[school] = (schoolCounts[school] || 0) + 1;\n }\n\n \/\/ Gender (Check Prefix)\n const prefix = (row.prefix || '').trim().toLowerCase();\n if (prefix.includes('\u0e0a\u0e32\u0e22') || prefix.includes('\u0e19\u0e32\u0e22') || prefix.includes('\u0e14.\u0e0a')) {\n maleCount++;\n } else if (prefix.includes('\u0e2b\u0e0d\u0e34\u0e07') || prefix.includes('\u0e19\u0e32\u0e07') || prefix.includes('\u0e14.\u0e0d')) {\n femaleCount++;\n }\n });\n\n \/\/ 3. Render Level Chart (Pie)\n const levelData = Object.entries(levelCounts)\n .map(([label, value]) => ({ label, value }))\n .sort((a, b) => b.value - a.value); \/\/ Sort by count descending\n \n renderPieChart('level-chart', 'level-chart-legend', levelData, CHART_COLORS);\n\n \/\/ 4. Render Gender Chart (Pie)\n const genderData = [\n { key: 'male', label: '\u0e0a\u0e32\u0e22', value: maleCount },\n { key: 'female', label: '\u0e2b\u0e0d\u0e34\u0e07', value: femaleCount }\n ];\n \/\/ Filter out 0 to avoid empty legend items if no data\n const validGenderData = genderData.filter(d => d.value > 0);\n renderPieChart('gender-chart', 'gender-chart-legend', validGenderData, GENDER_COLORS);\n\n\n \/\/ 5. Render Top 5 Schools\n const topSchools = Object.entries(schoolCounts)\n .map(([label, value]) => ({ label, value }))\n .sort((a, b) => b.value - a.value)\n .slice(0, 5);\n\n const schoolsContainer = document.getElementById('top-schools-container');\n schoolsContainer.innerHTML = '';\n\n if (topSchools.length === 0) {\n schoolsContainer.innerHTML = '<p class=\"text-center text-gray-400 py-4\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>';\n } else {\n const maxSchoolVal = topSchools[0].value;\n topSchools.forEach((item, index) => {\n const widthPercent = (item.value \/ maxSchoolVal) * 100;\n const html = `\n <div class=\"relative\">\n <div class=\"flex justify-between items-end mb-1\">\n <span class=\"font-medium text-gray-700 text-sm truncate pr-2 w-3\/4\">\n <span class=\"inline-block w-5 text-gray-400 font-normal text-xs\">#${index+1}<\/span>\n ${item.label}\n <\/span>\n <span class=\"text-indigo-600 font-bold text-sm\">${item.value} \u0e04\u0e19<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2.5\">\n <div class=\"bg-orange-400 h-2.5 rounded-full transition-all duration-700\" style=\"width: ${widthPercent}%\"><\/div>\n <\/div>\n <\/div>\n `;\n schoolsContainer.insertAdjacentHTML('beforeend', html);\n });\n }\n }\n\n \/\/ Search Logic\n function handleSearch() {\n const searchTerm = document.getElementById('search-input').value.trim().toLowerCase();\n const resultsContainer = document.getElementById('search-results');\n resultsContainer.innerHTML = '';\n\n if (!searchTerm) {\n resultsContainer.innerHTML = `\n <div class=\"text-center py-12 text-gray-500 bg-white rounded-xl border border-gray-100 shadow-sm\">\n <div class=\"bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n <i class=\"fas fa-search text-gray-400 text-xl\"><\/i>\n <\/div>\n <p class=\"font-medium text-gray-600\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32<\/p>\n <\/div>`;\n return;\n }\n\n const results = allData.filter(row => {\n const name = String(row.name || '').toLowerCase();\n const surname = String(row.surname || '').toLowerCase();\n return name.includes(searchTerm) || surname.includes(searchTerm);\n });\n\n if (results.length === 0) {\n resultsContainer.innerHTML = `\n <div class=\"text-center py-12 text-gray-500 bg-white rounded-xl border border-gray-100 shadow-sm\">\n <div class=\"bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n <i class=\"fas fa-search text-gray-400 text-xl\"><\/i>\n <\/div>\n <p class=\"font-medium text-gray-600\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a \"${searchTerm}\"<\/p>\n <p class=\"text-sm mt-1\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e15\u0e31\u0e27\u0e2a\u0e30\u0e01\u0e14 \u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e2d\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2d\u0e37\u0e48\u0e19<\/p>\n <\/div>`;\n return;\n }\n\n results.forEach(row => {\n resultsContainer.innerHTML += createResultCard(row);\n });\n }\n \n \/\/ Helper to convert Google Drive links for image preview\n function getDriveImageLink(url) {\n if (!url) return '';\n let cleanUrl = url.split(',')[0].trim();\n \n \/\/ Pattern 1: id=XXXXX (e.g., open?id=...)\n const idMatch = cleanUrl.match(\/id=([-\\w]{25,})\/);\n if (idMatch && idMatch[1]) {\n return `https:\/\/drive.google.com\/uc?export=view&id=${idMatch[1]}`;\n }\n \n \/\/ Pattern 2: \/d\/XXXXX (e.g., file\/d\/...)\n const dMatch = cleanUrl.match(\/\\\/d\\\/([-\\w]{25,})\/);\n if (dMatch && dMatch[1]) {\n return `https:\/\/drive.google.com\/uc?export=view&id=${dMatch[1]}`;\n }\n \n return cleanUrl;\n }\n\n function createResultCard(row) {\n const remarkSection = row.remark ? `\n <div class=\"col-span-1 md:col-span-2 mt-2 bg-white p-3 rounded-lg border border-red-100 shadow-sm\">\n <span class=\"text-red-500 text-xs uppercase tracking-wider font-bold flex items-center gap-1 mb-1\">\n <i class=\"fas fa-exclamation-circle\"><\/i> \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\n <\/span>\n <span class=\"font-medium text-red-600\">${row.remark}<\/span>\n <\/div>` : '';\n\n \/\/ Process image URL\n const imageUrl = getDriveImageLink(row.slip);\n \n const slipSection = imageUrl ? `\n <div class=\"relative group w-full flex flex-col items-center\">\n <div class=\"w-full aspect-[3\/4] bg-white rounded-lg overflow-hidden border border-gray-200 shadow-sm relative flex items-center justify-center\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"Slip\" class=\"w-full h-full object-cover group-hover:opacity-90 transition-opacity\" \n referrerpolicy=\"no-referrer\"\n onerror=\"this.style.display='none'; this.nextElementSibling.classList.remove('hidden'); this.nextElementSibling.classList.add('flex');\">\n <div class=\"hidden absolute inset-0 flex-col items-center justify-center text-gray-400 p-4 text-center bg-gray-50 w-full h-full\">\n <i class=\"fas fa-file-alt text-3xl mb-2 text-indigo-300\"><\/i>\n <span class=\"text-xs\">\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e20\u0e32\u0e1e\u0e44\u0e14\u0e49<\/span>\n <a href=\"${row.slip}\" target=\"_blank\" class=\"mt-2 text-indigo-600 underline text-xs\">\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e44\u0e1f\u0e25\u0e4c<\/a>\n <\/div>\n <\/div>\n <a href=\"${row.slip}\" target=\"_blank\" class=\"mt-3 w-full text-center py-2 bg-white border border-indigo-200 text-indigo-600 text-xs font-bold rounded-lg hover:bg-indigo-50 transition-colors shadow-sm\">\n \u0e40\u0e1b\u0e34\u0e14\u0e14\u0e39\u0e44\u0e1f\u0e25\u0e4c\u0e15\u0e49\u0e19\u0e09\u0e1a\u0e31\u0e1a\n <\/a>\n <\/div>` : `\n <div class=\"w-full aspect-[3\/4] bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 p-4 text-center\">\n <i class=\"fas fa-file-alt text-2xl mb-2 opacity-50\"><\/i>\n <span class=\"text-xs\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e41\u0e19\u0e1a<\/span>\n <\/div>`;\n\n return `\n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all duration-300\">\n <div class=\"flex flex-col md:flex-row\">\n \n <div class=\"p-6 flex-1\">\n <div class=\"flex flex-col md:flex-row justify-between items-start gap-2 mb-4\">\n <div>\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded\">ID: ${row.no}<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">${row.prefix}${row.name} ${row.surname}<\/h3>\n <\/div>\n <p class=\"text-indigo-600 text-sm flex items-center gap-1 font-medium\">\n <i class=\"fas fa-users text-xs\"><\/i> ${row.school}\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 text-sm bg-gray-50 p-5 rounded-xl border border-gray-100\">\n <div class=\"flex flex-col\">\n <span class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19<\/span>\n <span class=\"font-semibold text-gray-700 text-base\">${row.level || \"-\"}<\/span>\n <\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e21\u0e31\u0e04\u0e23<\/span>\n <span class=\"font-semibold text-gray-700 text-base\">${row.dateApplied || \"-\"}<\/span>\n <\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/span>\n <span class=\"font-semibold text-gray-700 text-base\">\n ${row.payDate ? `${row.payDate} \u0e40\u0e27\u0e25\u0e32 ${row.payTime || ''}` : \"-\"}\n <\/span>\n <\/div>\n ${remarkSection}\n <\/div>\n <\/div>\n \n \n <div class=\"bg-gray-50 p-6 md:w-72 flex flex-col items-center justify-center border-t md:border-t-0 md:border-l border-gray-100\">\n <p class=\"text-xs text-gray-400 mb-3 font-bold uppercase tracking-wider\">\u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/p>\n ${slipSection}\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e14\u0e49\u0e27\u0e22\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e49\u0e27\u0e22\u0e22\u0e2d\u0e14 <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23,4,24],"tags":[],"class_list":["post-9887","post","type-post","status-publish","format-standard","hentry","category-23","category-4","category-24"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts\/9887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/comments?post=9887"}],"version-history":[{"count":2,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts\/9887\/revisions"}],"predecessor-version":[{"id":9889,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts\/9887\/revisions\/9889"}],"wp:attachment":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/media?parent=9887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/categories?post=9887"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/tags?post=9887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9887,"date":"2026-01-07T23:33:41","date_gmt":"2026-01-07T16:33:41","guid":{"rendered":"http:\/\/www.hy.ac.th\/webwp\/?p=9887"},"modified":"2026-01-08T23:47:08","modified_gmt":"2026-01-08T16:47:08","slug":"%e0%b8%95%e0%b8%a3%e0%b8%a7%e0%b8%88%e0%b8%aa%e0%b8%ad%e0%b8%9a%e0%b8%a3%e0%b8%b2%e0%b8%a2%e0%b8%8a%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%9c%e0%b8%b9%e0%b9%89%e0%b8%aa%e0%b8%a1%e0%b8%b1%e0%b8%84%e0%b8%a3","status":"publish","type":"post","link":"http:\/\/www.hy.ac.th\/webwp\/2026\/01\/07\/%e0%b8%95%e0%b8%a3%e0%b8%a7%e0%b8%88%e0%b8%aa%e0%b8%ad%e0%b8%9a%e0%b8%a3%e0%b8%b2%e0%b8%a2%e0%b8%8a%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%9c%e0%b8%b9%e0%b9%89%e0%b8%aa%e0%b8%a1%e0%b8%b1%e0%b8%84%e0%b8%a3\/","title":{"rendered":"\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e28\u0e31\u0e01\u0e22\u0e20\u0e32\u0e1e HUAIYOT Pre-test 2026 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2569"},"content":{"rendered":"\n

\u0e14\u0e49\u0e27\u0e22\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e49\u0e27\u0e22\u0e22\u0e2d\u0e14 \u270d\ufe0f\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e2b\u0e49\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e38\u0e01\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14\u0e17\u0e31\u0e48\u0e27\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e40\u0e02\u0e49\u0e32\u0e17\u0e14\u0e2a\u0e2d\u0e1a \u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\u0e21\u0e31\u0e18\u0e22\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1 (\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e01\u0e33\u0e25\u0e31\u0e07\u0e28\u0e36\u0e01\u0e29\u0e32\u0e0a\u0e31\u0e49\u0e19 \u0e1b.5 \u0e41\u0e25\u0e30 \u0e1b.6) \u0e40\u0e1b\u0e34\u0e14\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23 \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 15 \u0e18.\u0e04. 2568-11 \u0e21.\u0e04. 2569 \u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c
\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c https:\/\/docs.google.com\/spreadsheets\/d\/17l05rDP3hcqA8Dc5PyOIV_uh7UBNRyfTTH2h6PMnCag\/edit?usp=sharing<\/a> (\u0e17\u0e32\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e41\u0e25\u0e30\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e20\u0e32\u0e22\u0e43\u0e19 3 \u0e27\u0e31\u0e19\u0e17\u0e33\u0e01\u0e32\u0e23\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e17\u0e35\u0e48\u0e17\u0e48\u0e32\u0e19\u0e2a\u0e21\u0e31\u0e04\u0e23)<\/p>\n\n\n\n\n\n\n \n \n \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23 – Huai-Yot Pre-test 2026<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n }\n .fade-in {\n animation: fadeIn 0.5s ease-in-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .loading-spinner {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #4f46e5;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 min-h-screen pb-12 text-gray-800\">\n\n \n <header class=\"bg-indigo-600 text-white shadow-lg sticky top-0 z-50\">\n <div class=\"max-w-5xl mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center gap-4\">\n <div>\n <h1 class=\"text-xl md:text-2xl font-bold flex items-center gap-2\">\n <i class=\"fas fa-chart-bar\"><\/i> \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\n <\/h1>\n <p class=\"text-indigo-100 text-sm mt-1 ml-1\"> \u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 Huai-Yot Pre-test 2026<\/p>\n <\/div>\n \n <div class=\"flex flex-col sm:flex-row items-center gap-3\">\n <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/17l05rDP3hcqA8Dc5PyOIV_uh7UBNRyfTTH2h6PMnCag\/edit?usp=sharing\" target=\"_blank\" class=\"px-4 py-2 rounded-md text-sm font-medium bg-green-500 hover:bg-green-600 text-white shadow-sm transition-colors flex items-center gap-2\">\n <i class=\"fas fa-table\"><\/i> \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\n <\/a>\n\n <div class=\"flex bg-indigo-700 p-1 rounded-lg\">\n <button onclick=\"switchTab('dashboard')\" id=\"btn-dashboard\" class=\"px-4 py-2 rounded-md text-sm font-medium transition-colors bg-white text-indigo-700 shadow-sm\">\n \u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21\u0e2a\u0e16\u0e34\u0e15\u0e34\n <\/button>\n <button onclick=\"switchTab('search')\" id=\"btn-search\" class=\"px-4 py-2 rounded-md text-sm font-medium transition-colors text-indigo-200 hover:text-white\">\n \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-5xl mx-auto px-4 py-8\">\n \n \n <div id=\"loading-state\" class=\"flex flex-col items-center justify-center py-20\">\n <div class=\"loading-spinner mb-4\"><\/div>\n <p class=\"text-gray-500\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25…<\/p>\n <\/div>\n\n \n <div id=\"error-state\" class=\"hidden bg-red-50 border border-red-200 text-red-700 px-6 py-4 rounded-lg flex items-center gap-3\">\n <i class=\"fas fa-exclamation-triangle text-xl\"><\/i>\n <div>\n <h3 class=\"font-bold\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14<\/h3>\n <p id=\"error-message\">\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49<\/p>\n <button onclick=\"fetchData()\" class=\"mt-2 text-sm underline hover:text-red-800 font-medium\">\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"content-area\" class=\"hidden fade-in\">\n \n \n <div id=\"dashboard-view\">\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between mb-6 border-l-4 border-indigo-500\">\n <div>\n <h3 class=\"text-gray-500 text-sm font-medium uppercase tracking-wider\">\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h3>\n <p class=\"text-sm text-gray-400 mt-1\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/p>\n <\/div>\n <div class=\"text-right\">\n <p id=\"stat-total\" class=\"text-5xl font-bold text-indigo-600\">0<\/p>\n <span class=\"text-sm text-gray-500\">\u0e04\u0e19<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center\">\n <h3 class=\"text-lg font-bold text-gray-800 mb-6 flex items-center gap-2 w-full\">\n <i class=\"fas fa-layer-group text-pink-500\"><\/i> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\n <\/h3>\n <div id=\"level-chart\" class=\"relative w-48 h-48 rounded-full bg-gray-100 overflow-hidden shadow-inner flex items-center justify-center transition-all duration-500\">\n <div class=\"absolute inset-8 bg-white rounded-full flex flex-col items-center justify-center shadow-sm z-10\">\n <i class=\"fas fa-graduation-cap text-gray-300 text-2xl\"><\/i>\n <\/div>\n <\/div>\n <div id=\"level-chart-legend\" class=\"w-full mt-4\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center\">\n <h3 class=\"text-lg font-bold text-gray-800 mb-6 flex items-center gap-2 w-full\">\n <i class=\"fas fa-venus-mars text-blue-500\"><\/i> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e0a\u0e32\u0e22 \/ \u0e2b\u0e0d\u0e34\u0e07\n <\/h3>\n <div id=\"gender-chart\" class=\"relative w-48 h-48 rounded-full bg-gray-100 overflow-hidden shadow-inner flex items-center justify-center transition-all duration-500\">\n <div class=\"absolute inset-8 bg-white rounded-full flex flex-col items-center justify-center shadow-sm z-10\">\n <i class=\"fas fa-user-friends text-gray-300 text-2xl\"><\/i>\n <\/div>\n <\/div>\n <div id=\"gender-chart-legend\" class=\"w-full mt-4\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-lg font-bold text-gray-800 flex items-center gap-2\">\n <i class=\"fas fa-school text-orange-500\"><\/i> 5 \u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e21\u0e32\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\n <\/h3>\n <\/div>\n <div id=\"top-schools-container\" class=\"space-y-4\">\n \n <\/div>\n <\/div>\n\n <div class=\"text-center mt-6\">\n <button onclick=\"fetchData()\" class=\"inline-flex items-center gap-2 text-indigo-600 bg-white hover:bg-indigo-50 border border-indigo-100 px-6 py-2 rounded-full text-sm font-medium transition-colors shadow-sm\">\n <i class=\"fas fa-sync\"><\/i> \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\n <\/button>\n <p class=\"text-xs text-gray-400 mt-2\">\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e08\u0e32\u0e01 Google Sheets<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"search-view\" class=\"hidden\">\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 text-center max-w-2xl mx-auto mb-6\">\n <h2 class=\"text-xl font-bold text-gray-800 mb-2\">\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23<\/h2>\n <p class=\"text-gray-500 text-sm mb-6\">\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d \u0e2b\u0e23\u0e37\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e21\u0e31\u0e04\u0e23<\/p>\n <div class=\"relative max-w-md mx-auto\">\n <input type=\"text\" id=\"search-input\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e21\u0e0a\u0e32\u0e22, \u0e43\u0e08\u0e14\u0e35...\" \n class=\"w-full pl-12 pr-4 py-3 border border-gray-300 rounded-full focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all shadow-sm\"\n onkeyup=\"handleSearch()\">\n <i class=\"fas fa-search absolute left-4 top-4 text-gray-400\"><\/i>\n <\/div>\n <\/div>\n\n <div id=\"search-results\" class=\"space-y-4\">\n \n <div class=\"text-center py-12 text-gray-500 bg-white rounded-xl border border-gray-100 shadow-sm\">\n <div class=\"bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n <i class=\"fas fa-search text-gray-400 text-xl\"><\/i>\n <\/div>\n <p class=\"font-medium text-gray-600\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n <script>\n \/\/ Configuration\n const SHEET_ID = '11QEiyJYEm9bzwWk1FjHZE7xMC527_9N-1onuJY_Wjbw';\n const SHEET_URL = `https:\/\/docs.google.com\/spreadsheets\/d\/${SHEET_ID}\/gviz\/tq?tqx=out:json`;\n \n \/\/ Colors for Charts\n const CHART_COLORS = [\n '#4F46E5', '#EC4899', '#10B981', '#F59E0B', '#6366F1', '#8B5CF6'\n ];\n const GENDER_COLORS = {\n male: '#3B82F6', \/\/ Blue\n female: '#EC4899', \/\/ Pink\n other: '#9CA3AF' \/\/ Gray\n };\n\n \/\/ State\n let allData = [];\n let activeTab = 'dashboard';\n\n \/\/ DOM Elements\n const loadingState = document.getElementById('loading-state');\n const errorState = document.getElementById('error-state');\n const contentArea = document.getElementById('content-area');\n const dashboardView = document.getElementById('dashboard-view');\n const searchView = document.getElementById('search-view');\n const btnDashboard = document.getElementById('btn-dashboard');\n const btnSearch = document.getElementById('btn-search');\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n fetchData();\n });\n\n \/\/ Fetch Data\n async function fetchData() {\n \/\/ Show loading\n loadingState.classList.remove('hidden');\n contentArea.classList.add('hidden');\n errorState.classList.add('hidden');\n\n try {\n const response = await fetch(SHEET_URL);\n if (!response.ok) throw new Error('Network response was not ok');\n \n const text = await response.text();\n \/\/ Parse JSON from Gviz format\n const jsonString = text.substring(47).slice(0, -2);\n const json = JSON.parse(jsonString);\n\n \/\/ Process Data\n allData = json.table.rows.map(row => {\n const getValue = (idx) => {\n const cell = row.c[idx];\n return cell ? (cell.f || cell.v) : '';\n };\n return {\n dateApplied: getValue(0),\n no: getValue(1),\n prefix: getValue(2),\n name: getValue(3),\n surname: getValue(4),\n school: getValue(5),\n level: getValue(6),\n slip: getValue(7), \/\/ Column H: Payment Slip\n payDate: getValue(8),\n payTime: getValue(9),\n code: getValue(10),\n remark: getValue(11),\n status: getValue(12)\n };\n });\n\n updateDashboard();\n loadingState.classList.add('hidden');\n contentArea.classList.remove('hidden');\n\n } catch (error) {\n console.error('Error fetching data:', error);\n loadingState.classList.add('hidden');\n errorState.classList.remove('hidden');\n document.getElementById('error-message').textContent = '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e2d\u0e34\u0e19\u0e40\u0e17\u0e2d\u0e23\u0e4c\u0e40\u0e19\u0e47\u0e15';\n }\n }\n\n \/\/ Tab Switching Logic\n function switchTab(tab) {\n activeTab = tab;\n \n if (tab === 'dashboard') {\n dashboardView.classList.remove('hidden');\n searchView.classList.add('hidden');\n \n btnDashboard.classList.add('bg-white', 'text-indigo-700', 'shadow-sm');\n btnDashboard.classList.remove('text-indigo-200', 'hover:text-white');\n \n btnSearch.classList.remove('bg-white', 'text-indigo-700', 'shadow-sm');\n btnSearch.classList.add('text-indigo-200', 'hover:text-white');\n } else {\n dashboardView.classList.add('hidden');\n searchView.classList.remove('hidden');\n \n btnDashboard.classList.remove('bg-white', 'text-indigo-700', 'shadow-sm');\n btnDashboard.classList.add('text-indigo-200', 'hover:text-white');\n \n btnSearch.classList.add('bg-white', 'text-indigo-700', 'shadow-sm');\n btnSearch.classList.remove('text-indigo-200', 'hover:text-white');\n \n \/\/ Focus search input\n document.getElementById('search-input').focus();\n }\n }\n\n \/\/ Helper to render Conic Gradient Pie Chart\n function renderPieChart(elementId, legendId, data, colors) {\n let gradientStr = 'conic-gradient(';\n let currentPercent = 0;\n const total = data.reduce((sum, item) => sum + item.value, 0);\n \n let legendHtml = '<div class=\"grid grid-cols-2 gap-y-2 gap-x-4 text-sm\">';\n \n data.forEach((item, index) => {\n if (item.value === 0) return;\n \n const percent = (item.value \/ total) * 100;\n const color = Array.isArray(colors) ? colors[index % colors.length] : colors[item.key] || colors.other;\n const endPercent = currentPercent + percent;\n \n gradientStr += `${color} ${currentPercent}% ${endPercent}%, `;\n currentPercent = endPercent;\n \n legendHtml += `\n <div class=\"flex items-center gap-2\">\n <span class=\"w-3 h-3 rounded-full flex-shrink-0\" style=\"background-color: ${color}\"><\/span>\n <div class=\"flex flex-col\">\n <span class=\"text-gray-700 font-medium leading-none\">${item.label}<\/span>\n <span class=\"text-xs text-gray-500\">${item.value} \u0e04\u0e19 (${percent.toFixed(1)}%)<\/span>\n <\/div>\n <\/div>`;\n });\n \n if (total === 0) {\n gradientStr = 'conic-gradient(#f3f4f6 0% 100%)'; \/\/ Empty state\n legendHtml = '<p class=\"text-center text-gray-400 text-sm\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>';\n } else {\n gradientStr = gradientStr.slice(0, -2) + ')'; \/\/ Remove last comma\n }\n \n legendHtml += '<\/div>';\n \n document.getElementById(elementId).style.background = gradientStr;\n document.getElementById(legendId).innerHTML = legendHtml;\n }\n\n \/\/ Update Dashboard Statistics\n function updateDashboard() {\n const total = allData.length;\n if (total === 0) return;\n\n \/\/ 1. Total\n document.getElementById('stat-total').textContent = total;\n\n \/\/ 2. Prepare Data\n const levelCounts = {};\n const schoolCounts = {};\n let maleCount = 0;\n let femaleCount = 0;\n\n allData.forEach(row => {\n \/\/ Level\n const level = (row.level || '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38').trim();\n levelCounts[level] = (levelCounts[level] || 0) + 1;\n\n \/\/ School\n const school = (row.school || '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38').trim();\n if (school && school !== '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38') {\n schoolCounts[school] = (schoolCounts[school] || 0) + 1;\n }\n\n \/\/ Gender (Check Prefix)\n const prefix = (row.prefix || '').trim().toLowerCase();\n if (prefix.includes('\u0e0a\u0e32\u0e22') || prefix.includes('\u0e19\u0e32\u0e22') || prefix.includes('\u0e14.\u0e0a')) {\n maleCount++;\n } else if (prefix.includes('\u0e2b\u0e0d\u0e34\u0e07') || prefix.includes('\u0e19\u0e32\u0e07') || prefix.includes('\u0e14.\u0e0d')) {\n femaleCount++;\n }\n });\n\n \/\/ 3. Render Level Chart (Pie)\n const levelData = Object.entries(levelCounts)\n .map(([label, value]) => ({ label, value }))\n .sort((a, b) => b.value - a.value); \/\/ Sort by count descending\n \n renderPieChart('level-chart', 'level-chart-legend', levelData, CHART_COLORS);\n\n \/\/ 4. Render Gender Chart (Pie)\n const genderData = [\n { key: 'male', label: '\u0e0a\u0e32\u0e22', value: maleCount },\n { key: 'female', label: '\u0e2b\u0e0d\u0e34\u0e07', value: femaleCount }\n ];\n \/\/ Filter out 0 to avoid empty legend items if no data\n const validGenderData = genderData.filter(d => d.value > 0);\n renderPieChart('gender-chart', 'gender-chart-legend', validGenderData, GENDER_COLORS);\n\n\n \/\/ 5. Render Top 5 Schools\n const topSchools = Object.entries(schoolCounts)\n .map(([label, value]) => ({ label, value }))\n .sort((a, b) => b.value - a.value)\n .slice(0, 5);\n\n const schoolsContainer = document.getElementById('top-schools-container');\n schoolsContainer.innerHTML = '';\n\n if (topSchools.length === 0) {\n schoolsContainer.innerHTML = '<p class=\"text-center text-gray-400 py-4\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>';\n } else {\n const maxSchoolVal = topSchools[0].value;\n topSchools.forEach((item, index) => {\n const widthPercent = (item.value \/ maxSchoolVal) * 100;\n const html = `\n <div class=\"relative\">\n <div class=\"flex justify-between items-end mb-1\">\n <span class=\"font-medium text-gray-700 text-sm truncate pr-2 w-3\/4\">\n <span class=\"inline-block w-5 text-gray-400 font-normal text-xs\">#${index+1}<\/span>\n ${item.label}\n <\/span>\n <span class=\"text-indigo-600 font-bold text-sm\">${item.value} \u0e04\u0e19<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2.5\">\n <div class=\"bg-orange-400 h-2.5 rounded-full transition-all duration-700\" style=\"width: ${widthPercent}%\"><\/div>\n <\/div>\n <\/div>\n `;\n schoolsContainer.insertAdjacentHTML('beforeend', html);\n });\n }\n }\n\n \/\/ Search Logic\n function handleSearch() {\n const searchTerm = document.getElementById('search-input').value.trim().toLowerCase();\n const resultsContainer = document.getElementById('search-results');\n resultsContainer.innerHTML = '';\n\n if (!searchTerm) {\n resultsContainer.innerHTML = `\n <div class=\"text-center py-12 text-gray-500 bg-white rounded-xl border border-gray-100 shadow-sm\">\n <div class=\"bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n <i class=\"fas fa-search text-gray-400 text-xl\"><\/i>\n <\/div>\n <p class=\"font-medium text-gray-600\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32<\/p>\n <\/div>`;\n return;\n }\n\n const results = allData.filter(row => {\n const name = String(row.name || '').toLowerCase();\n const surname = String(row.surname || '').toLowerCase();\n return name.includes(searchTerm) || surname.includes(searchTerm);\n });\n\n if (results.length === 0) {\n resultsContainer.innerHTML = `\n <div class=\"text-center py-12 text-gray-500 bg-white rounded-xl border border-gray-100 shadow-sm\">\n <div class=\"bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n <i class=\"fas fa-search text-gray-400 text-xl\"><\/i>\n <\/div>\n <p class=\"font-medium text-gray-600\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a \"${searchTerm}\"<\/p>\n <p class=\"text-sm mt-1\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e15\u0e31\u0e27\u0e2a\u0e30\u0e01\u0e14 \u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e2d\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2d\u0e37\u0e48\u0e19<\/p>\n <\/div>`;\n return;\n }\n\n results.forEach(row => {\n resultsContainer.innerHTML += createResultCard(row);\n });\n }\n \n \/\/ Helper to convert Google Drive links for image preview\n function getDriveImageLink(url) {\n if (!url) return '';\n let cleanUrl = url.split(',')[0].trim();\n \n \/\/ Pattern 1: id=XXXXX (e.g., open?id=...)\n const idMatch = cleanUrl.match(\/id=([-\\w]{25,})\/);\n if (idMatch && idMatch[1]) {\n return `https:\/\/drive.google.com\/uc?export=view&id=${idMatch[1]}`;\n }\n \n \/\/ Pattern 2: \/d\/XXXXX (e.g., file\/d\/...)\n const dMatch = cleanUrl.match(\/\\\/d\\\/([-\\w]{25,})\/);\n if (dMatch && dMatch[1]) {\n return `https:\/\/drive.google.com\/uc?export=view&id=${dMatch[1]}`;\n }\n \n return cleanUrl;\n }\n\n function createResultCard(row) {\n const remarkSection = row.remark ? `\n <div class=\"col-span-1 md:col-span-2 mt-2 bg-white p-3 rounded-lg border border-red-100 shadow-sm\">\n <span class=\"text-red-500 text-xs uppercase tracking-wider font-bold flex items-center gap-1 mb-1\">\n <i class=\"fas fa-exclamation-circle\"><\/i> \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\n <\/span>\n <span class=\"font-medium text-red-600\">${row.remark}<\/span>\n <\/div>` : '';\n\n \/\/ Process image URL\n const imageUrl = getDriveImageLink(row.slip);\n \n const slipSection = imageUrl ? `\n <div class=\"relative group w-full flex flex-col items-center\">\n <div class=\"w-full aspect-[3\/4] bg-white rounded-lg overflow-hidden border border-gray-200 shadow-sm relative flex items-center justify-center\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"Slip\" class=\"w-full h-full object-cover group-hover:opacity-90 transition-opacity\" \n referrerpolicy=\"no-referrer\"\n onerror=\"this.style.display='none'; this.nextElementSibling.classList.remove('hidden'); this.nextElementSibling.classList.add('flex');\">\n <div class=\"hidden absolute inset-0 flex-col items-center justify-center text-gray-400 p-4 text-center bg-gray-50 w-full h-full\">\n <i class=\"fas fa-file-alt text-3xl mb-2 text-indigo-300\"><\/i>\n <span class=\"text-xs\">\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e20\u0e32\u0e1e\u0e44\u0e14\u0e49<\/span>\n <a href=\"${row.slip}\" target=\"_blank\" class=\"mt-2 text-indigo-600 underline text-xs\">\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e44\u0e1f\u0e25\u0e4c<\/a>\n <\/div>\n <\/div>\n <a href=\"${row.slip}\" target=\"_blank\" class=\"mt-3 w-full text-center py-2 bg-white border border-indigo-200 text-indigo-600 text-xs font-bold rounded-lg hover:bg-indigo-50 transition-colors shadow-sm\">\n \u0e40\u0e1b\u0e34\u0e14\u0e14\u0e39\u0e44\u0e1f\u0e25\u0e4c\u0e15\u0e49\u0e19\u0e09\u0e1a\u0e31\u0e1a\n <\/a>\n <\/div>` : `\n <div class=\"w-full aspect-[3\/4] bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 p-4 text-center\">\n <i class=\"fas fa-file-alt text-2xl mb-2 opacity-50\"><\/i>\n <span class=\"text-xs\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e41\u0e19\u0e1a<\/span>\n <\/div>`;\n\n return `\n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all duration-300\">\n <div class=\"flex flex-col md:flex-row\">\n \n <div class=\"p-6 flex-1\">\n <div class=\"flex flex-col md:flex-row justify-between items-start gap-2 mb-4\">\n <div>\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded\">ID: ${row.no}<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">${row.prefix}${row.name} ${row.surname}<\/h3>\n <\/div>\n <p class=\"text-indigo-600 text-sm flex items-center gap-1 font-medium\">\n <i class=\"fas fa-users text-xs\"><\/i> ${row.school}\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 text-sm bg-gray-50 p-5 rounded-xl border border-gray-100\">\n <div class=\"flex flex-col\">\n <span class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19<\/span>\n <span class=\"font-semibold text-gray-700 text-base\">${row.level || \"-\"}<\/span>\n <\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e21\u0e31\u0e04\u0e23<\/span>\n <span class=\"font-semibold text-gray-700 text-base\">${row.dateApplied || \"-\"}<\/span>\n <\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/span>\n <span class=\"font-semibold text-gray-700 text-base\">\n ${row.payDate ? `${row.payDate} \u0e40\u0e27\u0e25\u0e32 ${row.payTime || ''}` : \"-\"}\n <\/span>\n <\/div>\n ${remarkSection}\n <\/div>\n <\/div>\n \n \n <div class=\"bg-gray-50 p-6 md:w-72 flex flex-col items-center justify-center border-t md:border-t-0 md:border-l border-gray-100\">\n <p class=\"text-xs text-gray-400 mb-3 font-bold uppercase tracking-wider\">\u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/p>\n ${slipSection}\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e14\u0e49\u0e27\u0e22\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e49\u0e27\u0e22\u0e22\u0e2d\u0e14 <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23,4,24],"tags":[],"class_list":["post-9887","post","type-post","status-publish","format-standard","hentry","category-23","category-4","category-24"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts\/9887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/comments?post=9887"}],"version-history":[{"count":2,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts\/9887\/revisions"}],"predecessor-version":[{"id":9889,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/posts\/9887\/revisions\/9889"}],"wp:attachment":[{"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/media?parent=9887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/categories?post=9887"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.hy.ac.th\/webwp\/wp-json\/wp\/v2\/tags?post=9887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}