{"id":3026,"date":"2025-10-29T18:20:03","date_gmt":"2025-10-29T11:20:03","guid":{"rendered":"https:\/\/sinnarin.ac.th\/srwweb\/?page_id=3026"},"modified":"2025-10-30T17:31:27","modified_gmt":"2025-10-30T10:31:27","slug":"personnel","status":"publish","type":"page","link":"https:\/\/sinnarin.ac.th\/srwweb\/personnel\/","title":{"rendered":"\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e32\u0e01\u0e23"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Kanit', sans-serif;\r\n background: linear-gradient(135deg, #e6f7ff 0%, #fff9e6 100%);\r\n color: #333;\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n \r\n .header-section {\r\n background: linear-gradient(135deg, #1e88e5, #ffd54f);\r\n color: white;\r\n border-radius: 15px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .school-name-th {\r\n font-size: 2.5rem;\r\n font-weight: 500;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .school-name-en {\r\n font-size: 1.6rem;\r\n font-weight: 300;\r\n opacity: 0.9;\r\n }\r\n \r\n .page-title {\r\n font-size: 2rem;\r\n font-weight: 500;\r\n color: #1e88e5;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n border-bottom: 2px solid #ffd54f;\r\n padding-bottom: 10px;\r\n }\r\n \r\n .admin-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 25px;\r\n margin-bottom: 30px;\r\n }\r\n \r\n .admin-card {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n transition: all 0.3s ease;\r\n width: 350px;\r\n text-align: center;\r\n border-top: 5px solid #1e88e5;\r\n }\r\n \r\n .admin-card:nth-child(2) {\r\n border-top-color: #ffd54f;\r\n }\r\n \r\n .admin-card:nth-child(3) {\r\n border-top-color: #4fc3f7;\r\n }\r\n \r\n .admin-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .admin-photo {\r\n width: 180px;\r\n height: 220px;\r\n border-radius: 10px;\r\n object-fit: cover;\r\n margin: 0 auto 20px;\r\n display: block;\r\n border: 3px solid #f0f0f0;\r\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .admin-name {\r\n font-size: 1.4rem;\r\n font-weight: 500;\r\n color: #1e88e5;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .admin-position {\r\n font-size: 1.1rem;\r\n color: #ff8f00;\r\n font-weight: 500;\r\n margin-bottom: 15px;\r\n padding-bottom: 10px;\r\n border-bottom: 1px dashed #e0e0e0;\r\n }\r\n \r\n .admin-duty {\r\n font-size: 1rem;\r\n color: #555;\r\n text-align: center;\r\n margin-top: 10px;\r\n }\r\n \r\n .footer {\r\n text-align: center;\r\n padding: 20px;\r\n color: #666;\r\n font-size: 0.9rem;\r\n border-top: 1px solid #e0e0e0;\r\n margin-top: 30px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .admin-container {\r\n justify-content: space-around;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .admin-card {\r\n width: 100%;\r\n max-width: 350px;\r\n }\r\n \r\n .school-name-th {\r\n font-size: 2rem;\r\n }\r\n \r\n .school-name-en {\r\n font-size: 1.3rem;\r\n }\r\n \r\n .page-title {\r\n font-size: 1.6rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <!-- Header Section -->\r\n <div class=\"header-section\">\r\n <h1 class=\"school-name-th\">\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32<\/h1>\r\n <h2 class=\"school-name-en\">Persernal in Sinnarin Wittaya School<\/h2>\r\n <\/div>\r\n \r\n <!-- Page Title -->\r\n <h2 class=\"page-title\">\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32<\/h2>\r\n \r\n <!-- Administrators Section -->\r\n <div class=\"admin-container\">\r\n <!-- \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23 -->\r\n <div class=\"admin-card\">\r\n <img decoding=\"async\" src=\"http:\/\/sinnarin.ac.th\/srwweb\/wp-content\/uploads\/2024\/12\/\u0e04\u0e21\u0e01\u0e24\u0e29-320-x-480-px.png\" \r\n alt=\"\u0e19\u0e32\u0e22\u0e04\u0e21\u0e01\u0e24\u0e29 \u0e22\u0e34\u0e19\u0e14\u0e35\" \r\n class=\"admin-photo\">\r\n <div class=\"admin-name\">\u0e19\u0e32\u0e22\u0e04\u0e21\u0e01\u0e24\u0e29 \u0e22\u0e34\u0e19\u0e14\u0e35<\/div>\r\n <div class=\"admin-position\">\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/div>\r\n <div class=\"admin-duty\">\r\n \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23 \u0e04\u0e19\u0e17\u0e35\u0e48 1 -->\r\n <div class=\"admin-card\">\r\n <img decoding=\"async\" src=\"http:\/\/sinnarin.ac.th\/srwweb\/wp-content\/uploads\/2025\/10\/03.boss2_.jpg\" \r\n alt=\"\u0e19\u0e32\u0e07\u0e2d\u0e23\u0e38\u0e13\u0e35 \u0e19\u0e32\u0e23\u0e31\u0e21\u0e22\u0e4c\" \r\n class=\"admin-photo\">\r\n <div class=\"admin-name\">\u0e19\u0e32\u0e07\u0e2d\u0e23\u0e38\u0e13\u0e35 \u0e19\u0e32\u0e23\u0e31\u0e21\u0e22\u0e4c<\/div>\r\n <div class=\"admin-position\">\u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/div>\r\n <div class=\"admin-duty\">\r\n \u0e23\u0e31\u0e1a\u0e1c\u0e34\u0e14\u0e0a\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23 \u0e04\u0e19\u0e17\u0e35\u0e48 2 -->\r\n <div class=\"admin-card\">\r\n <img decoding=\"async\" src=\"http:\/\/sinnarin.ac.th\/srwweb\/wp-content\/uploads\/2024\/08\/6B26A349-04CC-41E4-8BD0-83F48ADB5592-e1722749980869.jpg\" \r\n alt=\"\u0e19\u0e32\u0e22\u0e2a\u0e21\u0e40\u0e08\u0e15\u0e19\u0e4c \u0e1a\u0e38\u0e0d\u0e1b\u0e01\" \r\n class=\"admin-photo\">\r\n <div class=\"admin-name\">\u0e19\u0e32\u0e22\u0e2a\u0e21\u0e40\u0e08\u0e15\u0e19\u0e4c \u0e1a\u0e38\u0e0d\u0e1b\u0e01<\/div>\r\n <div class=\"admin-position\">\u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/div>\r\n <div class=\"admin-duty\">\r\n \u0e23\u0e31\u0e1a\u0e1c\u0e34\u0e14\u0e0a\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd04f02 e-flex e-con-boxed e-con e-parent\" data-id=\"dd04f02\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-451c7d8 elementor-widget elementor-widget-html\" data-id=\"451c7d8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e33\u0e40\u0e19\u0e35\u0e22\u0e1a\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary-color: #2c3e50;\r\n --secondary-color: #3498db;\r\n --light-color: #ecf0f1;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Sarabun', sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f5f5f5;\r\n color: #333;\r\n line-height: 1.6;\r\n }\r\n \r\n header {\r\n background: linear-gradient(135deg, var(--primary-color), #1a2530);\r\n color: white;\r\n padding: 2rem 1rem;\r\n text-align: center;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n }\r\n \r\n header h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 0.5rem;\r\n font-weight: 600;\r\n }\r\n \r\n header p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 1rem;\r\n }\r\n \r\n .status-message {\r\n margin: 1rem 0;\r\n }\r\n \r\n .success-message {\r\n background: linear-gradient(135deg, #d4edda, #c3e6cb);\r\n color: #155724;\r\n padding: 1rem 1.5rem;\r\n border-radius: 8px;\r\n border-left: 4px solid #28a745;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n }\r\n \r\n .filter-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 0.8rem;\r\n margin: 2rem 0;\r\n padding: 1rem;\r\n background: white;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.08);\r\n }\r\n \r\n .filter-btn {\r\n padding: 0.7rem 1.5rem;\r\n background-color: var(--light-color);\r\n border: none;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n }\r\n \r\n .filter-btn.active {\r\n background: linear-gradient(135deg, var(--secondary-color), #2980b9);\r\n color: white;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);\r\n }\r\n \r\n .filter-btn:hover {\r\n background-color: var(--secondary-color);\r\n color: white;\r\n transform: translateY(-2px);\r\n }\r\n \r\n .department-section {\r\n margin-bottom: 3rem;\r\n animation: fadeIn 0.5s ease-in;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n .department-title {\r\n background: linear-gradient(135deg, var(--primary-color), #34495e);\r\n color: white;\r\n padding: 1rem 1.5rem;\r\n border-radius: 10px;\r\n margin-bottom: 1.5rem;\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n }\r\n \r\n .staff-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 2rem;\r\n }\r\n \r\n .staff-card {\r\n background: white;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n border: 1px solid #e9ecef;\r\n }\r\n \r\n .staff-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n }\r\n \r\n .staff-image-container {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .staff-image {\r\n width: 100%;\r\n height: 220px;\r\n object-fit: cover;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .staff-card:hover .staff-image {\r\n transform: scale(1.05);\r\n }\r\n \r\n .staff-info {\r\n padding: 1.5rem;\r\n }\r\n \r\n .staff-name {\r\n font-weight: 600;\r\n font-size: 1.2rem;\r\n margin-bottom: 0.5rem;\r\n color: var(--primary-color);\r\n }\r\n \r\n .staff-position {\r\n color: var(--secondary-color);\r\n font-weight: 500;\r\n margin-bottom: 0.5rem;\r\n font-size: 1rem;\r\n }\r\n \r\n .staff-department {\r\n background: var(--light-color);\r\n color: #2c3e50;\r\n padding: 0.3rem 0.8rem;\r\n border-radius: 15px;\r\n font-size: 0.85rem;\r\n display: inline-block;\r\n margin-bottom: 1rem;\r\n font-weight: 500;\r\n }\r\n \r\n .contact-info {\r\n font-size: 0.9rem;\r\n color: #666;\r\n border-top: 1px solid #eee;\r\n padding-top: 1rem;\r\n }\r\n \r\n .contact-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 0.5rem;\r\n }\r\n \r\n .contact-item:last-child {\r\n margin-bottom: 0;\r\n }\r\n \r\n .contact-icon {\r\n margin-right: 0.5rem;\r\n width: 16px;\r\n text-align: center;\r\n }\r\n \r\n .loading {\r\n text-align: center;\r\n padding: 3rem;\r\n color: #666;\r\n }\r\n \r\n .loading-spinner {\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid var(--secondary-color);\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 1rem;\r\n }\r\n \r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 2rem;\r\n margin-top: 3rem;\r\n color: #666;\r\n border-top: 1px solid #eee;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .staff-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 1.5rem;\r\n }\r\n \r\n .filter-buttons {\r\n gap: 0.5rem;\r\n }\r\n \r\n .filter-btn {\r\n padding: 0.6rem 1.2rem;\r\n font-size: 0.9rem;\r\n }\r\n \r\n header h1 {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .staff-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .filter-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .filter-btn {\r\n width: 200px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <h1>\u0e17\u0e33\u0e40\u0e19\u0e35\u0e22\u0e1a\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32<\/h1>\r\n <p>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e15\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/p>\r\n <\/header>\r\n \r\n <div class=\"container\">\r\n <div id=\"status-message\" class=\"status-message\">\r\n <div class=\"success-message\">\r\n <strong>\u2705 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19!<\/strong> \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e1a Google Sheets \u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"filter-buttons\">\r\n <button class=\"filter-btn active\" data-department=\"all\">\ud83d\udc65 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\">\ud83d\udcda \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\">\ud83d\udd22 \u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\">\ud83d\udd2c \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\">\ud83c\udfdb\ufe0f \u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32\">\u26bd \u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e28\u0e34\u0e25\u0e1b\u0e30\">\ud83c\udfa8 \u0e28\u0e34\u0e25\u0e1b\u0e30<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e\">\ud83d\udd27 \u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/button>\r\n <button class=\"filter-btn\" data-department=\"\u0e20\u0e32\u0e29\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\">\ud83c\udf0d \u0e20\u0e32\u0e29\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28<\/button>\r\n <\/div>\r\n \r\n <div id=\"staff-container\">\r\n <div class=\"loading\">\r\n <div class=\"loading-spinner\"><\/div>\r\n \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23...\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <footer>\r\n <p>\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e33\u0e40\u0e19\u0e35\u0e22\u0e1a\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23 \u00a9 2024 - \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e14\u0e49\u0e27\u0e22 Google Sheets API<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Google Sheets API\r\n const SPREADSHEET_ID = '1OiWmZMouUp7A49oasLb10WFJytCBvFsyCyTY2dqor94';\r\n const API_KEY = 'AIzaSyBOU1MrYnX2Zh4H2tLH_VtB4vgPDMJNGN0';\r\n const SHEET_NAME = '\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23';\r\n const RANGE = 'A2:F100';\r\n \r\n \/\/ \u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\r\n const departments = [\r\n '\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22',\r\n '\u0e04\u0e13\u0e34\u0e15\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c',\r\n '\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35',\r\n '\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32',\r\n '\u0e2a\u0e38\u0e02\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1e\u0e25\u0e28\u0e36\u0e01\u0e29\u0e32',\r\n '\u0e28\u0e34\u0e25\u0e1b\u0e30',\r\n '\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e',\r\n '\u0e20\u0e32\u0e29\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28'\r\n ];\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\r\n async function fetchStaffData() {\r\n try {\r\n const url = `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${SPREADSHEET_ID}\/values\/${SHEET_NAME}!${RANGE}?key=${API_KEY}`;\r\n \r\n console.log('\u0e01\u0e33\u0e25\u0e31\u0e07\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01:', url);\r\n \r\n const response = await fetch(url);\r\n const data = await response.json();\r\n \r\n if (data.values && data.values.length > 0) {\r\n console.log('\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08! \u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', data.values.length, '\u0e41\u0e16\u0e27');\r\n \r\n return data.values.map((row, index) => ({\r\n id: index + 1,\r\n name: row[0]?.trim() || '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25',\r\n position: row[1]?.trim() || '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25',\r\n department: row[2]?.trim() || '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25',\r\n imageUrl: row[3]?.trim() || '',\r\n email: row[4]?.trim() || '',\r\n phone: row[5]?.trim() || ''\r\n }));\r\n } else {\r\n console.log('\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e0a\u0e35\u0e15');\r\n return [];\r\n }\r\n } catch (error) {\r\n console.error('\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:', error);\r\n throw error;\r\n }\r\n }\r\n\r\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\r\n function displayStaff(staffList) {\r\n const container = document.getElementById('staff-container');\r\n const statusMessage = document.getElementById('status-message');\r\n \r\n if (staffList.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"loading\">\r\n <div style=\"color: #e74c3c;\">\u274c<\/div>\r\n \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n \/\/ \u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e17\u0e2a\u0e16\u0e32\u0e19\u0e30\r\n statusMessage.innerHTML = `\r\n <div class=\"success-message\">\r\n <strong>\u2705 \u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!<\/strong> \u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23 ${staffList.length} \u0e04\u0e19 \u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\r\n <\/div>\r\n `;\r\n \r\n container.innerHTML = '';\r\n \r\n \/\/ \u0e01\u0e23\u0e2d\u0e07\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e15\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\r\n const staffByDepartment = {};\r\n departments.forEach(dept => {\r\n staffByDepartment[dept] = staffList.filter(staff => \r\n staff.department.includes(dept)\r\n );\r\n });\r\n \r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e25\u0e30\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\r\n departments.forEach(dept => {\r\n const departmentStaff = staffByDepartment[dept];\r\n \r\n if (departmentStaff.length > 0) {\r\n const section = document.createElement('div');\r\n section.className = 'department-section';\r\n section.id = `dept-${dept}`;\r\n \r\n const title = document.createElement('h2');\r\n title.className = 'department-title';\r\n title.innerHTML = `\ud83c\udfaf \u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49${dept} <span style=\"font-size: 0.9em; opacity: 0.8;\">(${departmentStaff.length} \u0e04\u0e19)<\/span>`;\r\n section.appendChild(title);\r\n \r\n const grid = document.createElement('div');\r\n grid.className = 'staff-grid';\r\n \r\n departmentStaff.forEach(staff => {\r\n const card = document.createElement('div');\r\n card.className = 'staff-card';\r\n \r\n \/\/ \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 URL \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\r\n let imageUrl = staff.imageUrl;\r\n if (imageUrl) {\r\n \/\/ \u0e41\u0e01\u0e49\u0e44\u0e02 URL Google Drive \u0e43\u0e2b\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e14\u0e49\r\n if (imageUrl.includes('drive.google.com\/file\/d\/')) {\r\n const fileId = imageUrl.match(\/\\\/d\\\/([^\\\/]+)\/)?.[1];\r\n if (fileId) {\r\n imageUrl = `https:\/\/drive.google.com\/uc?export=view&id=${fileId}`;\r\n }\r\n }\r\n } else {\r\n imageUrl = `https:\/\/via.placeholder.com\/300x220\/2c3e50\/ffffff?text=${encodeURIComponent(staff.name.split(' ')[0])}`;\r\n }\r\n \r\n card.innerHTML = `\r\n <div class=\"staff-image-container\">\r\n <img decoding=\"async\" class=\"staff-image\" src=\"${imageUrl}\" alt=\"${staff.name}\" loading=\"lazy\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x220\/ecf0f1\/2c3e50?text=\u0e44\u0e21\u0e48\u0e21\u0e35\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e'\">\r\n <\/div>\r\n <div class=\"staff-info\">\r\n <div class=\"staff-name\">${staff.name}<\/div>\r\n <div class=\"staff-position\">${staff.position}<\/div>\r\n <div class=\"staff-department\">${staff.department}<\/div>\r\n <div class=\"contact-info\">\r\n ${staff.email ? `\r\n <div class=\"contact-item\">\r\n <span class=\"contact-icon\">\ud83d\udce7<\/span>\r\n <a href=\"mailto:${staff.email}\">${staff.email}<\/a>\r\n <\/div>\r\n ` : ''}\r\n ${staff.phone ? `\r\n <div class=\"contact-item\">\r\n <span class=\"contact-icon\">\ud83d\udcde<\/span>\r\n ${staff.phone}\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n grid.appendChild(card);\r\n });\r\n \r\n section.appendChild(grid);\r\n container.appendChild(section);\r\n }\r\n });\r\n }\r\n \r\n \/\/ \u0e01\u0e23\u0e2d\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01\r\n function filterByDepartment(department) {\r\n const allSections = document.querySelectorAll('.department-section');\r\n \r\n if (department === 'all') {\r\n allSections.forEach(section => {\r\n section.style.display = 'block';\r\n });\r\n } else {\r\n allSections.forEach(section => {\r\n section.style.display = section.id === `dept-${department}` ? 'block' : 'none';\r\n });\r\n }\r\n }\r\n \r\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n try {\r\n const staffData = await fetchStaffData();\r\n displayStaff(staffData);\r\n \r\n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 Event Listener \u0e43\u0e2b\u0e49\u0e1b\u0e38\u0e48\u0e21\u0e01\u0e23\u0e2d\u0e07\r\n document.querySelectorAll('.filter-btn').forEach(button => {\r\n button.addEventListener('click', () => {\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n button.classList.add('active');\r\n filterByDepartment(button.dataset.department);\r\n });\r\n });\r\n \r\n } catch (error) {\r\n document.getElementById('staff-container').innerHTML = `\r\n <div class=\"loading\">\r\n <div style=\"color: #e74c3c;\">\u274c<\/div>\r\n \u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25: ${error.message}\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('status-message').innerHTML = `\r\n <div class=\"error-message\">\r\n <strong>\u274c \u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!<\/strong> \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49\r\n <\/div>\r\n `;\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32 \u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23… <a href=\"https:\/\/sinnarin.ac.th\/srwweb\/personnel\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e32\u0e01\u0e23<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-3026","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/sinnarin.ac.th\/srwweb\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e32 \u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e34\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23…","_links":{"self":[{"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/pages\/3026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/comments?post=3026"}],"version-history":[{"count":59,"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/pages\/3026\/revisions"}],"predecessor-version":[{"id":3143,"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/pages\/3026\/revisions\/3143"}],"wp:attachment":[{"href":"https:\/\/sinnarin.ac.th\/srwweb\/wp-json\/wp\/v2\/media?parent=3026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}