\n \n <\/iframe>\n<\/div>\n<a href=\"https://www.canva.com/design/DAGrm03WUmQ/-Qj_1hQerTU9K6QUDAbdTQ/view?utm_content=DAGrm03WUmQ&utm_campaign=designshare&utm_medium=embeds&utm_source=link\" target=\"_blank\" rel=\"noopener\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c E-Service \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e02\u0e48\u0e32\u0e2b\u0e19\u0e2d\u0e07\u0e40\u0e2a\u0e37\u0e2d\u0e15\u0e32\u0e22<\/a> \n\n\n\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF85A2',\n secondary: '#7EB2DD',\n light: '#F0F8FF',\n },\n fontFamily: {\n sans: ['Sarabun', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f8fafc;\n }\n .tab-content {\n display: none;\n }\n .tab-content.active {\n display: block;\n }\n .status-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 0.85rem;\n font-weight: 500;\n }\n .status-present {\n background-color: #DCFCE7;\n color: #166534;\n }\n .status-late {\n background-color: #FEF9C3;\n color: #854D0E;\n }\n .status-leave {\n background-color: #E0E7FF;\n color: #3730A3;\n }\n .status-absent {\n background-color: #FEE2E2;\n color: #991B1B;\n }\n .notification {\n position: fixed;\n top: 20px;\n right: 20px;\n padding: 15px 25px;\n background-color: #4CAF50;\n color: white;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transform: translateY(-100px);\n opacity: 0;\n transition: all 0.3s ease;\n z-index: 1000;\n }\n .notification.show {\n transform: translateY(0);\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-light\">\n <div id=\"notification\" class=\"notification\">\n <span id=\"notification-message\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22<\/span>\n <\/div>\n\n <div class=\"container mx-auto px-4 py-6\">\n \n <header class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-800 mb-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19<\/h1>\n <h2 class=\"text-xl text-gray-600\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e02\u0e48\u0e32\u0e2b\u0e19\u0e2d\u0e07\u0e40\u0e2a\u0e37\u0e2d\u0e15\u0e32\u0e22<\/h2>\n <\/header>\n\n \n <div class=\"bg-white rounded-lg shadow-md mb-6\">\n <div class=\"flex flex-wrap border-b\">\n <button id=\"tab-attendance\" class=\"tab-button px-6 py-3 font-medium text-primary border-b-2 border-primary\">\n <i class=\"fas fa-clipboard-check mr-2\"><\/i>\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d\n <\/button>\n <button id=\"tab-history\" class=\"tab-button px-6 py-3 font-medium text-gray-500 hover:text-secondary\">\n <i class=\"fas fa-history mr-2\"><\/i>\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d\n <\/button>\n <button id=\"tab-stats\" class=\"tab-button px-6 py-3 font-medium text-gray-500 hover:text-secondary\">\n <i class=\"fas fa-chart-bar mr-2\"><\/i>\u0e2a\u0e16\u0e34\u0e15\u0e34\n <\/button>\n <button id=\"tab-students\" class=\"tab-button px-6 py-3 font-medium text-gray-500 hover:text-secondary\">\n <i class=\"fas fa-user-plus mr-2\"><\/i>\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content active\" id=\"content-attendance\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/label>\n <input type=\"date\" id=\"attendance-date\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\" value=\"\">\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/label>\n <select id=\"attendance-class\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/option>\n <option value=\"\u0e1b.1\">\u0e1b.1<\/option>\n <option value=\"\u0e1b.2\">\u0e1b.2<\/option>\n <option value=\"\u0e1b.3\">\u0e1b.3<\/option>\n <option value=\"\u0e1b.4\">\u0e1b.4<\/option>\n <option value=\"\u0e1b.5\">\u0e1b.5<\/option>\n <option value=\"\u0e1b.6\">\u0e1b.6<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e27\u0e34\u0e0a\u0e32<\/label>\n <select id=\"attendance-subject\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e27\u0e34\u0e0a\u0e32<\/option>\n <option value=\"\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\">\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22<\/option>\n <option value=\"\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/option>\n <option value=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/option>\n <option value=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13<\/option>\n <option value=\"\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\">\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32<\/option>\n <option value=\"\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/option>\n <option value=\"\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\">\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29<\/option>\n <option value=\"\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\">\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/option>\n <option value=\"\u0e28\u0e34\u0e25\u0e1b\u0e30\">\u0e28\u0e34\u0e25\u0e1b\u0e30<\/option>\n <option value=\"\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\">\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32<\/option>\n <option value=\"\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e\">\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/option>\n <option value=\"\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\">\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15<\/option>\n <option value=\"\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e40\u0e21\u0e37\u0e2d\u0e07\">\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e40\u0e21\u0e37\u0e2d\u0e07<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <button id=\"load-students\" class=\"bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-sync-alt mr-2\"><\/i>\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/button>\n <\/div>\n\n <div id=\"student-list\" class=\"mb-6\">\n <div class=\"overflow-x-auto\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-4 py-2 text-left\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"attendance-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"flex justify-end\">\n <button id=\"save-attendance\" class=\"bg-primary hover:bg-pink-600 text-white px-6 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-save mr-2\"><\/i>\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"tab-content\" id=\"content-history\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/label>\n <input type=\"date\" id=\"history-date\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/label>\n <select id=\"history-class\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/option>\n <option value=\"\u0e1b.1\">\u0e1b.1<\/option>\n <option value=\"\u0e1b.2\">\u0e1b.2<\/option>\n <option value=\"\u0e1b.3\">\u0e1b.3<\/option>\n <option value=\"\u0e1b.4\">\u0e1b.4<\/option>\n <option value=\"\u0e1b.5\">\u0e1b.5<\/option>\n <option value=\"\u0e1b.6\">\u0e1b.6<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e27\u0e34\u0e0a\u0e32<\/label>\n <select id=\"history-subject\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e17\u0e38\u0e01\u0e27\u0e34\u0e0a\u0e32<\/option>\n <option value=\"\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\">\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22<\/option>\n <option value=\"\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/option>\n <option value=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/option>\n <option value=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13<\/option>\n <option value=\"\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\">\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32<\/option>\n <option value=\"\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/option>\n <option value=\"\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\">\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29<\/option>\n <option value=\"\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\">\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/option>\n <option value=\"\u0e28\u0e34\u0e25\u0e1b\u0e30\">\u0e28\u0e34\u0e25\u0e1b\u0e30<\/option>\n <option value=\"\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\">\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32<\/option>\n <option value=\"\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e\">\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/option>\n <option value=\"\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\">\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15<\/option>\n <option value=\"\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e40\u0e21\u0e37\u0e2d\u0e07\">\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e40\u0e21\u0e37\u0e2d\u0e07<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <button id=\"search-history\" class=\"bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-search mr-2\"><\/i>\u0e04\u0e49\u0e19\u0e2b\u0e32\n <\/button>\n <\/div>\n\n <div id=\"history-list\" class=\"mb-6\">\n <div class=\"overflow-x-auto\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-4 py-2 text-left\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e27\u0e34\u0e0a\u0e32<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e21\u0e32<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e2a\u0e32\u0e22<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e25\u0e32<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e02\u0e32\u0e14<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"history-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"tab-content\" id=\"content-stats\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e40\u0e14\u0e37\u0e2d\u0e19<\/label>\n <select id=\"stats-month\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"1\">\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21<\/option>\n <option value=\"2\">\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c<\/option>\n <option value=\"3\">\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21<\/option>\n <option value=\"4\">\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19<\/option>\n <option value=\"5\">\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21<\/option>\n <option value=\"6\">\u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19<\/option>\n <option value=\"7\">\u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21<\/option>\n <option value=\"8\">\u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21<\/option>\n <option value=\"9\">\u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19<\/option>\n <option value=\"10\">\u0e15\u0e38\u0e25\u0e32\u0e04\u0e21<\/option>\n <option value=\"11\">\u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19<\/option>\n <option value=\"12\">\u0e18\u0e31\u0e19\u0e27\u0e32\u0e04\u0e21<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e1b\u0e35<\/label>\n <select id=\"stats-year\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"2023\">2566<\/option>\n <option value=\"2024\">2567<\/option>\n <option value=\"2025\">2568<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/label>\n <select id=\"stats-class\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/option>\n <option value=\"\u0e1b.1\">\u0e1b.1<\/option>\n <option value=\"\u0e1b.2\">\u0e1b.2<\/option>\n <option value=\"\u0e1b.3\">\u0e1b.3<\/option>\n <option value=\"\u0e1b.4\">\u0e1b.4<\/option>\n <option value=\"\u0e1b.5\">\u0e1b.5<\/option>\n <option value=\"\u0e1b.6\">\u0e1b.6<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <button id=\"generate-stats\" class=\"bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-chart-line mr-2\"><\/i>\u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e16\u0e34\u0e15\u0e34\n <\/button>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6\">\n <div class=\"bg-gradient-to-r from-green-100 to-green-200 p-4 rounded-lg shadow\">\n <div class=\"flex items-center\">\n <div class=\"p-3 rounded-full bg-green-500 text-white mr-4\">\n <i class=\"fas fa-user-check text-xl\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-gray-600\">\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>\n <p id=\"stats-present\" class=\"text-2xl font-bold text-gray-800\">0<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-r from-yellow-100 to-yellow-200 p-4 rounded-lg shadow\">\n <div class=\"flex items-center\">\n <div class=\"p-3 rounded-full bg-yellow-500 text-white mr-4\">\n <i class=\"fas fa-clock text-xl\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-gray-600\">\u0e21\u0e32\u0e2a\u0e32\u0e22<\/p>\n <p id=\"stats-late\" class=\"text-2xl font-bold text-gray-800\">0<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-r from-blue-100 to-blue-200 p-4 rounded-lg shadow\">\n <div class=\"flex items-center\">\n <div class=\"p-3 rounded-full bg-blue-500 text-white mr-4\">\n <i class=\"fas fa-calendar-minus text-xl\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-gray-600\">\u0e25\u0e32<\/p>\n <p id=\"stats-leave\" class=\"text-2xl font-bold text-gray-800\">0<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-r from-red-100 to-red-200 p-4 rounded-lg shadow\">\n <div class=\"flex items-center\">\n <div class=\"p-3 rounded-full bg-red-500 text-white mr-4\">\n <i class=\"fas fa-user-times text-xl\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-gray-600\">\u0e02\u0e32\u0e14\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>\n <p id=\"stats-absent\" class=\"text-2xl font-bold text-gray-800\">0<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <h3 class=\"text-lg font-medium mb-4\">\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25<\/h3>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-4 py-2 text-left\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e21\u0e32<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e2a\u0e32\u0e22<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e25\u0e32<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e02\u0e32\u0e14<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e40\u0e1b\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e47\u0e19\u0e15\u0e4c\u0e01\u0e32\u0e23\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"stats-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"tab-content\" id=\"content-students\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div>\n <h3 class=\"text-lg font-medium mb-4\">\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/label>\n <input type=\"number\" id=\"student-number\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\" placeholder=\"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\">\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25<\/label>\n <input type=\"text\" id=\"student-name\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\" placeholder=\"\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25\">\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/label>\n <select id=\"student-class\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/option>\n <option value=\"\u0e1b.1\">\u0e1b.1<\/option>\n <option value=\"\u0e1b.2\">\u0e1b.2<\/option>\n <option value=\"\u0e1b.3\">\u0e1b.3<\/option>\n <option value=\"\u0e1b.4\">\u0e1b.4<\/option>\n <option value=\"\u0e1b.5\">\u0e1b.5<\/option>\n <option value=\"\u0e1b.6\">\u0e1b.6<\/option>\n <\/select>\n <\/div>\n <div>\n <button id=\"add-student\" class=\"bg-primary hover:bg-pink-600 text-white px-4 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-plus mr-2\"><\/i>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-lg font-medium mb-4\">\u0e19\u0e33\u0e40\u0e02\u0e49\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Excel<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c Excel<\/label>\n <div class=\"flex items-center\">\n <label class=\"w-full flex items-center px-4 py-2 bg-white text-blue-500 rounded-lg border border-blue-500 cursor-pointer hover:bg-blue-50\">\n <i class=\"fas fa-file-excel mr-2\"><\/i>\n <span class=\"text-sm\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c Excel<\/span>\n <input type=\"file\" id=\"excel-file\" class=\"hidden\" accept=\".xlsx, .xls, .csv\">\n <\/label>\n <\/div>\n <p id=\"file-name\" class=\"mt-2 text-sm text-gray-500\"><\/p>\n <\/div>\n <div>\n <button id=\"import-excel\" class=\"bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-file-import mr-2\"><\/i>\u0e19\u0e33\u0e40\u0e02\u0e49\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n <\/button>\n <\/div>\n <div class=\"mt-4\">\n <p class=\"text-sm text-gray-600\">\n <i class=\"fas fa-info-circle mr-1\"><\/i>\n \u0e44\u0e1f\u0e25\u0e4c Excel \u0e04\u0e27\u0e23\u0e21\u0e35\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c: \u0e40\u0e25\u0e02\u0e17\u0e35\u0e48, \u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25, \u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8\">\n <h3 class=\"text-lg font-medium mb-4\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h3>\n <div class=\"mb-4\">\n <div class=\"flex space-x-4\">\n <select id=\"filter-class\" class=\"px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\">\u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/option>\n <option value=\"\u0e1b.1\">\u0e1b.1<\/option>\n <option value=\"\u0e1b.2\">\u0e1b.2<\/option>\n <option value=\"\u0e1b.3\">\u0e1b.3<\/option>\n <option value=\"\u0e1b.4\">\u0e1b.4<\/option>\n <option value=\"\u0e1b.5\">\u0e1b.5<\/option>\n <option value=\"\u0e1b.6\">\u0e1b.6<\/option>\n <\/select>\n <button id=\"filter-students\" class=\"bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\">\n <i class=\"fas fa-filter mr-2\"><\/i>\u0e01\u0e23\u0e2d\u0e07\n <\/button>\n <\/div>\n <\/div>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-4 py-2 text-left\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"students-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"edit-student-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50\">\n <div class=\"bg-white rounded-lg p-6 w-full max-w-md\">\n <h3 class=\"text-lg font-medium mb-4\">\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/label>\n <input type=\"number\" id=\"edit-student-number\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25<\/label>\n <input type=\"text\" id=\"edit-student-name\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <\/div>\n <div>\n <label class=\"block text-gray-700 mb-2\">\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19<\/label>\n <select id=\"edit-student-class\" class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary\">\n <option value=\"\u0e1b.1\">\u0e1b.1<\/option>\n <option value=\"\u0e1b.2\">\u0e1b.2<\/option>\n <option value=\"\u0e1b.3\">\u0e1b.3<\/option>\n <option value=\"\u0e1b.4\">\u0e1b.4<\/option>\n <option value=\"\u0e1b.5\">\u0e1b.5<\/option>\n <option value=\"\u0e1b.6\">\u0e1b.6<\/option>\n <\/select>\n <\/div>\n <div class=\"flex justify-end space-x-2\">\n <button id=\"cancel-edit\" class=\"px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors\">\n \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\n <\/button>\n <button id=\"save-edit\" class=\"bg-primary hover:bg-pink-600 text-white px-4 py-2 rounded-lg transition-colors\">\n \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-attendance-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50\">\n <div class=\"bg-white rounded-lg p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-medium\" id=\"attendance-detail-title\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d<\/h3>\n <button id=\"close-attendance-detail\" class=\"text-gray-500 hover:text-gray-700\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div id=\"attendance-detail-content\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize date input with today's date\n document.addEventListener('DOMContentLoaded', function() {\n const today = new Date();\n const formattedDate = today.toISOString().split('T')[0];\n document.getElementById('attendance-date').value = formattedDate;\n \n \/\/ Set current month and year in stats\n const currentMonth = today.getMonth() + 1;\n document.getElementById('stats-month').value = currentMonth;\n document.getElementById('stats-year').value = today.getFullYear();\n \n \/\/ Initialize localStorage if needed\n if (!localStorage.getItem('students')) {\n localStorage.setItem('students', JSON.stringify([]));\n }\n if (!localStorage.getItem('attendance')) {\n localStorage.setItem('attendance', JSON.stringify([]));\n }\n \n \/\/ Load students list\n loadStudentsList();\n });\n\n \/\/ Tab switching\n const tabButtons = document.querySelectorAll('.tab-button');\n const tabContents = document.querySelectorAll('.tab-content');\n\n tabButtons.forEach(button => {\n button.addEventListener('click', () => {\n \/\/ Remove active class from all buttons and contents\n tabButtons.forEach(btn => {\n btn.classList.remove('border-primary', 'text-primary');\n btn.classList.add('text-gray-500');\n });\n tabContents.forEach(content => {\n content.classList.remove('active');\n });\n\n \/\/ Add active class to clicked button and corresponding content\n button.classList.add('border-primary', 'text-primary');\n button.classList.remove('text-gray-500');\n const contentId = 'content-' + button.id.split('-')[1];\n document.getElementById(contentId).classList.add('active');\n \n \/\/ Load data based on active tab\n if (contentId === 'content-students') {\n loadStudentsList();\n } else if (contentId === 'content-history') {\n loadAttendanceHistory();\n } else if (contentId === 'content-stats') {\n generateStats();\n }\n });\n });\n\n \/\/ Show notification\n function showNotification(message) {\n const notification = document.getElementById('notification');\n const notificationMessage = document.getElementById('notification-message');\n \n notificationMessage.textContent = message;\n notification.classList.add('show');\n \n setTimeout(() => {\n notification.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Student management\n function loadStudentsList() {\n const students = JSON.parse(localStorage.getItem('students')) || [];\n const tableBody = document.getElementById('students-table-body');\n const filterClass = document.getElementById('filter-class').value;\n \n tableBody.innerHTML = '';\n \n const filteredStudents = filterClass ? \n students.filter(student => student.class === filterClass) : \n students;\n \n if (filteredStudents.length === 0) {\n tableBody.innerHTML = `\n <tr>\n <td colspan=\"4\" class=\"px-4 py-4 text-center text-gray-500\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/td>\n <\/tr>\n `;\n return;\n }\n \n filteredStudents.sort((a, b) => {\n if (a.class !== b.class) {\n return a.class.localeCompare(b.class);\n }\n return a.number - b.number;\n }).forEach(student => {\n const row = document.createElement('tr');\n row.className = 'border-b hover:bg-gray-50';\n row.innerHTML = `\n <td class=\"px-4 py-3\">${student.number}<\/td>\n <td class=\"px-4 py-3\">${student.name}<\/td>\n <td class=\"px-4 py-3\">${student.class}<\/td>\n <td class=\"px-4 py-3 text-center\">\n <button class=\"edit-student text-blue-500 hover:text-blue-700 mr-2\" data-id=\"${student.id}\">\n <i class=\"fas fa-edit\"><\/i>\n <\/button>\n <button class=\"delete-student text-red-500 hover:text-red-700\" data-id=\"${student.id}\">\n <i class=\"fas fa-trash-alt\"><\/i>\n <\/button>\n <\/td>\n `;\n tableBody.appendChild(row);\n });\n \n \/\/ Add event listeners to edit and delete buttons\n document.querySelectorAll('.edit-student').forEach(button => {\n button.addEventListener('click', () => {\n editStudent(button.dataset.id);\n });\n });\n \n document.querySelectorAll('.delete-student').forEach(button => {\n button.addEventListener('click', () => {\n deleteStudent(button.dataset.id);\n });\n });\n }\n\n \/\/ Add student\n document.getElementById('add-student').addEventListener('click', () => {\n const number = document.getElementById('student-number').value;\n const name = document.getElementById('student-name').value;\n const studentClass = document.getElementById('student-class').value;\n \n if (!number || !name || !studentClass) {\n showNotification('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19');\n return;\n }\n \n const students = JSON.parse(localStorage.getItem('students')) || [];\n \n \/\/ Check if student number already exists in the same class\n const exists = students.some(student => \n student.number === parseInt(number) && student.class === studentClass\n );\n \n if (exists) {\n showNotification('\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e19\u0e35\u0e49\u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\u0e43\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e35\u0e49');\n return;\n }\n \n const newStudent = {\n id: Date.now().toString(),\n number: parseInt(number),\n name: name,\n class: studentClass\n };\n \n students.push(newStudent);\n localStorage.setItem('students', JSON.stringify(students));\n \n \/\/ Clear form\n document.getElementById('student-number').value = '';\n document.getElementById('student-name').value = '';\n document.getElementById('student-class').value = '';\n \n showNotification('\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n loadStudentsList();\n });\n\n \/\/ Filter students\n document.getElementById('filter-students').addEventListener('click', () => {\n loadStudentsList();\n });\n\n \/\/ Edit student\n function editStudent(id) {\n const students = JSON.parse(localStorage.getItem('students')) || [];\n const student = students.find(s => s.id === id);\n \n if (!student) return;\n \n document.getElementById('edit-student-number').value = student.number;\n document.getElementById('edit-student-name').value = student.name;\n document.getElementById('edit-student-class').value = student.class;\n \n \/\/ Show modal\n document.getElementById('edit-student-modal').classList.remove('hidden');\n \n \/\/ Save edited student\n document.getElementById('save-edit').onclick = () => {\n const number = parseInt(document.getElementById('edit-student-number').value);\n const name = document.getElementById('edit-student-name').value;\n const studentClass = document.getElementById('edit-student-class').value;\n \n if (!number || !name || !studentClass) {\n showNotification('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19');\n return;\n }\n \n \/\/ Check if student number already exists in the same class (excluding current student)\n const exists = students.some(s => \n s.id !== id && s.number === number && s.class === studentClass\n );\n \n if (exists) {\n showNotification('\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e19\u0e35\u0e49\u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\u0e43\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e35\u0e49');\n return;\n }\n \n \/\/ Update student\n const updatedStudents = students.map(s => {\n if (s.id === id) {\n return {\n ...s,\n number,\n name,\n class: studentClass\n };\n }\n return s;\n });\n \n localStorage.setItem('students', JSON.stringify(updatedStudents));\n document.getElementById('edit-student-modal').classList.add('hidden');\n showNotification('\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n loadStudentsList();\n };\n }\n\n \/\/ Cancel edit\n document.getElementById('cancel-edit').addEventListener('click', () => {\n document.getElementById('edit-student-modal').classList.add('hidden');\n });\n\n \/\/ Delete student\n function deleteStudent(id) {\n if (confirm('\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e04\u0e19\u0e19\u0e35\u0e49\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?')) {\n const students = JSON.parse(localStorage.getItem('students')) || [];\n const updatedStudents = students.filter(student => student.id !== id);\n localStorage.setItem('students', JSON.stringify(updatedStudents));\n showNotification('\u0e25\u0e1a\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n loadStudentsList();\n }\n }\n\n \/\/ Import Excel (mock functionality)\n document.getElementById('excel-file').addEventListener('change', (e) => {\n const fileName = e.target.files[0]?.name || '';\n document.getElementById('file-name').textContent = fileName ? `\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01: ${fileName}` : '';\n });\n\n document.getElementById('import-excel').addEventListener('click', () => {\n const fileInput = document.getElementById('excel-file');\n if (!fileInput.files.length) {\n showNotification('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c Excel');\n return;\n }\n \n \/\/ Mock import functionality\n showNotification('\u0e19\u0e33\u0e40\u0e02\u0e49\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n fileInput.value = '';\n document.getElementById('file-name').textContent = '';\n });\n\n \/\/ Attendance functionality\n document.getElementById('load-students').addEventListener('click', () => {\n const classValue = document.getElementById('attendance-class').value;\n const date = document.getElementById('attendance-date').value;\n const subject = document.getElementById('attendance-subject').value;\n \n if (!classValue || !date || !subject) {\n showNotification('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e41\u0e25\u0e30\u0e27\u0e34\u0e0a\u0e32');\n return;\n }\n \n loadStudentsForAttendance(classValue);\n });\n\n function loadStudentsForAttendance(classValue) {\n const students = JSON.parse(localStorage.getItem('students')) || [];\n const tableBody = document.getElementById('attendance-table-body');\n const date = document.getElementById('attendance-date').value;\n const subject = document.getElementById('attendance-subject').value;\n \n \/\/ Filter students by class\n const filteredStudents = students.filter(student => student.class === classValue);\n \n tableBody.innerHTML = '';\n \n if (filteredStudents.length === 0) {\n tableBody.innerHTML = `\n <tr>\n <td colspan=\"3\" class=\"px-4 py-4 text-center text-gray-500\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e35\u0e49<\/td>\n <\/tr>\n `;\n return;\n }\n \n \/\/ Check if attendance already exists for this date, class, and subject\n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n const existingRecord = attendanceRecords.find(record => \n record.date === date && \n record.class === classValue && \n record.subject === subject\n );\n \n \/\/ Sort students by number\n filteredStudents.sort((a, b) => a.number - b.number).forEach(student => {\n const row = document.createElement('tr');\n row.className = 'border-b hover:bg-gray-50';\n \n \/\/ Get student's status if attendance record exists\n let status = 'present';\n if (existingRecord) {\n const studentRecord = existingRecord.students.find(s => s.id === student.id);\n if (studentRecord) {\n status = studentRecord.status;\n }\n }\n \n row.innerHTML = `\n <td class=\"px-4 py-3\">${student.number}<\/td>\n <td class=\"px-4 py-3\">${student.name}<\/td>\n <td class=\"px-4 py-3 text-center\">\n <select class=\"student-status px-3 py-1 border rounded-lg\" data-id=\"${student.id}\">\n <option value=\"present\" ${status === 'present' ? 'selected' : ''}>\u0e21\u0e32<\/option>\n <option value=\"late\" ${status === 'late' ? 'selected' : ''}>\u0e2a\u0e32\u0e22<\/option>\n <option value=\"leave\" ${status === 'leave' ? 'selected' : ''}>\u0e25\u0e32<\/option>\n <option value=\"absent\" ${status === 'absent' ? 'selected' : ''}>\u0e02\u0e32\u0e14<\/option>\n <\/select>\n <\/td>\n `;\n tableBody.appendChild(row);\n });\n }\n\n \/\/ Save attendance\n document.getElementById('save-attendance').addEventListener('click', () => {\n const classValue = document.getElementById('attendance-class').value;\n const date = document.getElementById('attendance-date').value;\n const subject = document.getElementById('attendance-subject').value;\n \n if (!classValue || !date || !subject) {\n showNotification('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e41\u0e25\u0e30\u0e27\u0e34\u0e0a\u0e32');\n return;\n }\n \n const statusSelects = document.querySelectorAll('.student-status');\n if (statusSelects.length === 0) {\n showNotification('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e48\u0e2d\u0e19');\n return;\n }\n \n const students = [];\n statusSelects.forEach(select => {\n students.push({\n id: select.dataset.id,\n status: select.value\n });\n });\n \n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n \n \/\/ Check if record already exists\n const existingIndex = attendanceRecords.findIndex(record => \n record.date === date && \n record.class === classValue && \n record.subject === subject\n );\n \n const newRecord = {\n id: Date.now().toString(),\n date,\n class: classValue,\n subject,\n students\n };\n \n if (existingIndex !== -1) {\n \/\/ Update existing record\n attendanceRecords[existingIndex] = newRecord;\n } else {\n \/\/ Add new record\n attendanceRecords.push(newRecord);\n }\n \n localStorage.setItem('attendance', JSON.stringify(attendanceRecords));\n showNotification('\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n });\n\n \/\/ Load attendance history\n function loadAttendanceHistory() {\n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n const tableBody = document.getElementById('history-table-body');\n const historyDate = document.getElementById('history-date').value;\n const historyClass = document.getElementById('history-class').value;\n const historySubject = document.getElementById('history-subject').value;\n \n tableBody.innerHTML = '';\n \n \/\/ Filter records\n let filteredRecords = [...attendanceRecords];\n \n if (historyDate) {\n filteredRecords = filteredRecords.filter(record => record.date === historyDate);\n }\n \n if (historyClass) {\n filteredRecords = filteredRecords.filter(record => record.class === historyClass);\n }\n \n if (historySubject) {\n filteredRecords = filteredRecords.filter(record => record.subject === historySubject);\n }\n \n \/\/ Sort by date (newest first)\n filteredRecords.sort((a, b) => new Date(b.date) - new Date(a.date));\n \n if (filteredRecords.length === 0) {\n tableBody.innerHTML = `\n <tr>\n <td colspan=\"8\" class=\"px-4 py-4 text-center text-gray-500\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d<\/td>\n <\/tr>\n `;\n return;\n }\n \n filteredRecords.forEach(record => {\n \/\/ Count statuses\n const counts = {\n present: 0,\n late: 0,\n leave: 0,\n absent: 0\n };\n \n record.students.forEach(student => {\n counts[student.status]++;\n });\n \n const row = document.createElement('tr');\n row.className = 'border-b hover:bg-gray-50';\n \n \/\/ Format date for display (YYYY-MM-DD to DD\/MM\/YYYY)\n const dateParts = record.date.split('-');\n const formattedDate = `${dateParts[2]}\/${dateParts[1]}\/${dateParts[0]}`;\n \n row.innerHTML = `\n <td class=\"px-4 py-3\">${formattedDate}<\/td>\n <td class=\"px-4 py-3\">${record.class}<\/td>\n <td class=\"px-4 py-3\">${record.subject}<\/td>\n <td class=\"px-4 py-3 text-center\">${counts.present}<\/td>\n <td class=\"px-4 py-3 text-center\">${counts.late}<\/td>\n <td class=\"px-4 py-3 text-center\">${counts.leave}<\/td>\n <td class=\"px-4 py-3 text-center\">${counts.absent}<\/td>\n <td class=\"px-4 py-3 text-center\">\n <button class=\"view-attendance text-blue-500 hover:text-blue-700 mr-2\" data-id=\"${record.id}\">\n <i class=\"fas fa-eye\"><\/i>\n <\/button>\n <button class=\"edit-attendance text-green-500 hover:text-green-700 mr-2\" data-id=\"${record.id}\">\n <i class=\"fas fa-edit\"><\/i>\n <\/button>\n <button class=\"delete-attendance text-red-500 hover:text-red-700\" data-id=\"${record.id}\">\n <i class=\"fas fa-trash-alt\"><\/i>\n <\/button>\n <\/td>\n `;\n tableBody.appendChild(row);\n });\n \n \/\/ Add event listeners\n document.querySelectorAll('.view-attendance').forEach(button => {\n button.addEventListener('click', () => {\n viewAttendanceDetails(button.dataset.id);\n });\n });\n \n document.querySelectorAll('.edit-attendance').forEach(button => {\n button.addEventListener('click', () => {\n editAttendance(button.dataset.id);\n });\n });\n \n document.querySelectorAll('.delete-attendance').forEach(button => {\n button.addEventListener('click', () => {\n deleteAttendance(button.dataset.id);\n });\n });\n }\n\n \/\/ Search history\n document.getElementById('search-history').addEventListener('click', () => {\n loadAttendanceHistory();\n });\n\n \/\/ View attendance details\n function viewAttendanceDetails(id) {\n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n const record = attendanceRecords.find(r => r.id === id);\n \n if (!record) return;\n \n const students = JSON.parse(localStorage.getItem('students')) || [];\n const modal = document.getElementById('view-attendance-modal');\n const title = document.getElementById('attendance-detail-title');\n const content = document.getElementById('attendance-detail-content');\n \n \/\/ Format date for display (YYYY-MM-DD to DD\/MM\/YYYY)\n const dateParts = record.date.split('-');\n const formattedDate = `${dateParts[2]}\/${dateParts[1]}\/${dateParts[0]}`;\n \n title.textContent = `\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d - ${record.class} - ${record.subject} - ${formattedDate}`;\n \n let html = `\n <div class=\"overflow-x-auto\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-4 py-2 text-left\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48<\/th>\n <th class=\"px-4 py-2 text-left\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25<\/th>\n <th class=\"px-4 py-2 text-center\">\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n `;\n \n \/\/ Get student details and sort by number\n const studentDetails = record.students.map(s => {\n const student = students.find(st => st.id === s.id);\n return {\n ...s,\n number: student ? student.number : 0,\n name: student ? student.name : '\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25'\n };\n }).sort((a, b) => a.number - b.number);\n \n studentDetails.forEach(student => {\n let statusText = '';\n let statusClass = '';\n \n switch (student.status) {\n case 'present':\n statusText = '\u0e21\u0e32';\n statusClass = 'status-present';\n break;\n case 'late':\n statusText = '\u0e2a\u0e32\u0e22';\n statusClass = 'status-late';\n break;\n case 'leave':\n statusText = '\u0e25\u0e32';\n statusClass = 'status-leave';\n break;\n case 'absent':\n statusText = '\u0e02\u0e32\u0e14';\n statusClass = 'status-absent';\n break;\n }\n \n html += `\n <tr class=\"border-b hover:bg-gray-50\">\n <td class=\"px-4 py-3\">${student.number}<\/td>\n <td class=\"px-4 py-3\">${student.name}<\/td>\n <td class=\"px-4 py-3 text-center\">\n <span class=\"status-badge ${statusClass}\">${statusText}<\/span>\n <\/td>\n <\/tr>\n `;\n });\n \n html += `\n <\/tbody>\n <\/table>\n <\/div>\n <div class=\"mt-6 grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"bg-green-100 p-3 rounded-lg\">\n <div class=\"text-sm text-gray-600\">\u0e21\u0e32<\/div>\n <div class=\"text-xl font-bold text-gray-800\">${studentDetails.filter(s => s.status === 'present').length} \u0e04\u0e19<\/div>\n <\/div>\n <div class=\"bg-yellow-100 p-3 rounded-lg\">\n <div class=\"text-sm text-gray-600\">\u0e2a\u0e32\u0e22<\/div>\n <div class=\"text-xl font-bold text-gray-800\">${studentDetails.filter(s => s.status === 'late').length} \u0e04\u0e19<\/div>\n <\/div>\n <div class=\"bg-blue-100 p-3 rounded-lg\">\n <div class=\"text-sm text-gray-600\">\u0e25\u0e32<\/div>\n <div class=\"text-xl font-bold text-gray-800\">${studentDetails.filter(s => s.status === 'leave').length} \u0e04\u0e19<\/div>\n <\/div>\n <div class=\"bg-red-100 p-3 rounded-lg\">\n <div class=\"text-sm text-gray-600\">\u0e02\u0e32\u0e14<\/div>\n <div class=\"text-xl font-bold text-gray-800\">${studentDetails.filter(s => s.status === 'absent').length} \u0e04\u0e19<\/div>\n <\/div>\n <\/div>\n `;\n \n content.innerHTML = html;\n modal.classList.remove('hidden');\n }\n\n \/\/ Close attendance detail modal\n document.getElementById('close-attendance-detail').addEventListener('click', () => {\n document.getElementById('view-attendance-modal').classList.add('hidden');\n });\n\n \/\/ Edit attendance\n function editAttendance(id) {\n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n const record = attendanceRecords.find(r => r.id === id);\n \n if (!record) return;\n \n \/\/ Set form values\n document.getElementById('attendance-date').value = record.date;\n document.getElementById('attendance-class').value = record.class;\n document.getElementById('attendance-subject').value = record.subject;\n \n \/\/ Switch to attendance tab\n document.getElementById('tab-attendance').click();\n \n \/\/ Load students\n loadStudentsForAttendance(record.class);\n \n showNotification('\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e01\u0e49\u0e44\u0e02\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n }\n\n \/\/ Delete attendance\n function deleteAttendance(id) {\n if (confirm('\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e35\u0e49\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?')) {\n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n const updatedRecords = attendanceRecords.filter(record => record.id !== id);\n localStorage.setItem('attendance', JSON.stringify(updatedRecords));\n showNotification('\u0e25\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22');\n loadAttendanceHistory();\n }\n }\n\n \/\/ Generate statistics\n function generateStats() {\n const month = parseInt(document.getElementById('stats-month').value);\n const year = parseInt(document.getElementById('stats-year').value);\n const classValue = document.getElementById('stats-class').value;\n \n const attendanceRecords = JSON.parse(localStorage.getItem('attendance')) || [];\n const students = JSON.parse(localStorage.getItem('students')) || [];\n \n \/\/ Filter records by month and year\n const filteredRecords = attendanceRecords.filter(record => {\n const recordDate = new Date(record.date);\n return recordDate.getMonth() + 1 === month && \n recordDate.getFullYear() === year &&\n (!classValue || record.class === classValue);\n });\n \n \/\/ Count overall statistics\n let totalPresent = 0;\n let totalLate = 0;\n let totalLeave = 0;\n let totalAbsent = 0;\n \n \/\/ Student-specific statistics\n const studentStats = {};\n \n filteredRecords.forEach(record => {\n record.students.forEach(student => {\n \/\/ Initialize student stats if not exists\n if (!studentStats[student.id]) {\n studentStats[student.id] = {\n present: 0,\n late: 0,\n leave: 0,\n absent: 0,\n total: 0\n };\n }\n \n \/\/ Increment counters\n studentStats[student.id][student.status]++;\n studentStats[student.id].total++;\n \n \/\/ Increment overall counters\n switch (student.status) {\n case 'present':\n totalPresent++;\n break;\n case 'late':\n totalLate++;\n break;\n case 'leave':\n totalLeave++;\n break;\n case 'absent':\n totalAbsent++;\n break;\n }\n });\n });\n \n \/\/ Update summary stats\n document.getElementById('stats-present').textContent = totalPresent;\n document.getElementById('stats-late').textContent = totalLate;\n document.getElementById('stats-leave').textContent = totalLeave;\n document.getElementById('stats-absent').textContent = totalAbsent;\n \n \/\/ Update student stats table\n const tableBody = document.getElementById('stats-table-body');\n tableBody.innerHTML = '';\n \n \/\/ Filter students by class if needed\n const filteredStudents = classValue ? \n students.filter(student => student.class === classValue) : \n students;\n \n if (filteredStudents.length === 0) {\n tableBody.innerHTML = `\n <tr>\n <td colspan=\"7\" class=\"px-4 py-4 text-center text-gray-500\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/td>\n <\/tr>\n `;\n return;\n }\n \n \/\/ Sort students by class and number\n filteredStudents.sort((a, b) => {\n if (a.class !== b.class) {\n return a.class.localeCompare(b.class);\n }\n return a.number - b.number;\n }).forEach(student => {\n const stats = studentStats[student.id] || {\n present: 0,\n late: 0,\n leave: 0,\n absent: 0,\n total: 0\n };\n \n const attendancePercentage = stats.total > 0 ? \n Math.round(((stats.present + stats.late) \/ stats.total) * 100) : \n 0;\n \n const row = document.createElement('tr');\n row.className = 'border-b hover:bg-gray-50';\n row.innerHTML = `\n <td class=\"px-4 py-3\">${student.number}<\/td>\n <td class=\"px-4 py-3\">${student.name} (${student.class})<\/td>\n <td class=\"px-4 py-3 text-center\">${stats.present}<\/td>\n <td class=\"px-4 py-3 text-center\">${stats.late}<\/td>\n <td class=\"px-4 py-3 text-center\">${stats.leave}<\/td>\n <td class=\"px-4 py-3 text-center\">${stats.absent}<\/td>\n <td class=\"px-4 py-3 text-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5\">\n <div class=\"bg-primary h-2.5 rounded-full\" style=\"width: ${attendancePercentage}%\"><\/div>\n <\/div>\n <span class=\"text-sm font-medium\">${attendancePercentage}%<\/span>\n <\/td>\n `;\n tableBody.appendChild(row);\n });\n }\n\n \/\/ Generate stats when button is clicked\n document.getElementById('generate-stats').addEventListener('click', generateStats);\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'952281b356488f82',t:'MTc1MDMzMDY1OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p>Paste HTML code here…<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c E-Service \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e02\u0e48\u0e32\u0e2b\u0e19\u0e2d\u0e07\u0e40\u0e2a\u0e37\u0e2d\u0e15\u0e32\u0e22 \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22 \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e02\u0e48\u0e32\u0e2b\u0e19\u0e2d\u0e07\u0e40\u0e2a\u0e37\u0e2d\u0e15\u0e32\u0e22 \u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d \u0e2a\u0e16\u0e34\u0e15\u0e34 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1b.1\u0e1b.2\u0e1b.3\u0e1b.4\u0e1b.5\u0e1b.6 \u0e27\u0e34\u0e0a\u0e32 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e28\u0e34\u0e25\u0e1b\u0e30\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 \u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25 \u0e2a\u0e16\u0e32\u0e19\u0e30 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1b.1\u0e1b.2\u0e1b.3\u0e1b.4\u0e1b.5\u0e1b.6 \u0e27\u0e34\u0e0a\u0e32 \u0e17\u0e38\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e28\u0e34\u0e25\u0e1b\u0e30\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1e\u0e25\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e04\u0e49\u0e19\u0e2b\u0e32 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e27\u0e34\u0e0a\u0e32 \u0e21\u0e32 \u0e2a\u0e32\u0e22 \u0e25\u0e32 \u0e02\u0e32\u0e14 \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 \u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e21\u0e01\u0e23\u0e32\u0e04\u0e21\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21\u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19\u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21\u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21\u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19\u0e15\u0e38\u0e25\u0e32\u0e04\u0e21\u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19\u0e18\u0e31\u0e19\u0e27\u0e32\u0e04\u0e21 \u0e1b\u0e35 256625672568 \u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1b.1\u0e1b.2\u0e1b.3\u0e1b.4\u0e1b.5\u0e1b.6 \u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e16\u0e34\u0e15\u0e34 \u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19 0 \u0e21\u0e32\u0e2a\u0e32\u0e22 0 \u0e25\u0e32 0 \u0e02\u0e32\u0e14\u0e40\u0e23\u0e35\u0e22\u0e19 0 \u0e2a\u0e16\u0e34\u0e15\u0e34\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25 \u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 \u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25 \u0e21\u0e32 \u0e2a\u0e32\u0e22 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-164","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=164"}],"version-history":[{"count":10,"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/164\/revisions"}],"predecessor-version":[{"id":338,"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/164\/revisions\/338"}],"wp:attachment":[{"href":"https:\/\/www.hongkhaschool.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}