{"id":3774,"date":"2024-12-25T15:20:35","date_gmt":"2024-12-25T08:20:35","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=3774"},"modified":"2026-02-25T08:40:24","modified_gmt":"2026-02-25T01:40:24","slug":"%e0%b9%80%e0%b8%a5%e0%b9%88%e0%b8%a1%e0%b8%a3%e0%b8%b2%e0%b8%a2%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%9c%e0%b8%a5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%9b%e0%b8%8f%e0%b8%b4%e0%b8%9a%e0%b8%b1%e0%b8%95%e0%b8%b4","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=3774","title":{"rendered":"\u0e40\u0e25\u0e48\u0e21\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 \u0e15\u0e4d\u0e32\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22"},"content":{"rendered":"\n<script>\n        \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\n\t\t\/\/ Add these lines at the end of style section\n        const additionalStyles = `\n\t\t\t.loading {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 350px;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\tbackground: rgba(0, 0, 139, 0.9); \/* \u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e40\u0e02\u0e49\u0e21 *\/\n\t\t\t\tcolor: #ffffff; \/* \u0e2a\u0e35\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e02\u0e32\u0e27 *\/\n\t\t\t\tpadding: 20px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\t\t\tz-index: 1000;\n\t\t\t}\n\t\t\t .fa-spin {\n\t\t\t\t\tmargin-right: 8px;\n\t\t\t }\n        `;\n\n\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 element style \u0e43\u0e2b\u0e21\u0e48\n\t\tconst styleElement = document.createElement('style');\n\n\t\t\/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 CSS \u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23 additionalStyles \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a styleElement\n\t\tstyleElement.textContent = additionalStyles;\n\n\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 styleElement \u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19 <head> \u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\n\t\tdocument.head.appendChild(styleElement);\n\t\t\n        \/\/ Show loading indicator\n        function showLoading(show = true) {\n            const loadingDiv = document.createElement('div');\n            loadingDiv.id = 'loadingIndicator';\n            loadingDiv.className = 'loading';\n            loadingDiv.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i>  \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14... ';\n            \n            if (show) {\n                document.body.appendChild(loadingDiv);\n            } else {\n                const existingLoader = document.getElementById('loadingIndicator');\n                if (existingLoader) {\n                    existingLoader.remove();\n                }\n            }\n        }\n        \n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\n        function delay(ms) {\n            return new Promise(resolve => setTimeout(resolve, ms));\n        }\n        \t\t\n\t\tshowLoading(true);\t\n                delay(1000);\t\n<\/script>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u0e15\u0e32\u0e21\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 \u0e01.\u0e04.\u0e28. \u0e17\u0e35\u0e48 \u0e28\u0e180206.7\/\u0e2719 \u0e25\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 25 \u0e15\u0e38\u0e25\u0e32\u0e04\u0e21 2561 \u0e44\u0e14\u0e49\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e40\u0e01\u0e13\u0e11\u0e4c\u0e41\u0e25\u0e30\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e08\u0e38\u0e41\u0e25\u0e30\u0e41\u0e15\u0e48\u0e07\u0e15\u0e31\u0e49\u0e07\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e01.\u0e04.\u0e28. \u0e44\u0e14\u0e49\u0e21\u0e35\u0e21\u0e15\u0e34\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e41\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 &nbsp;&nbsp;\u0e15\u0e4d\u0e32\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e15\u0e19\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 <br><\/p>\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\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.min.js\"><\/script>\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/400.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/700.min.css\" rel=\"stylesheet\">\n    <style>\n        body {\n            margin: 0;\n            padding: 20px;\n        }\n        .tab-container {\n            width: 100%;\n            max-width: 1200px;\n            margin: 0 auto;\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n        }\n        .tab-buttons {\n            display: flex;\n            background-color: #3498db;\n        }\n        .tab-button {\n            padding: 15px 20px;\n            border: none;\n            background-color: transparent;\n            color: white;\n            font-size: 16px;\n            cursor: pointer;\n            transition: background-color 0.3s;\n        }\n        .tab-button:hover {\n            background-color: #2980b9;\n        }\n        .tab-button.active {\n            background-color: #2980b9;\n        }\n        .tab-content {\n            padding: 20px;\n            display: none;\n        }\n        .tab-content.active {\n            display: block;\n        }\n        .section-title {\n            font-size: 18px;\n            font-weight: bold;\n            margin-top: 10px;\n            margin-bottom: 20px;\n            text-align: left;\n        }\n        .pdf-gallery {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n        .pdf-item {\n            background-color: white;\n            text-align: center;\n            height: 280px;\n            position: relative;\n            overflow: hidden;\n            border-radius: 5px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n        .pdf-item:hover {\n            transform: scale(1.06);\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9);\n        }\n        .pdf-item img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            cursor: pointer;\n        }\n        .pdf-item .pdf-name {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            background-color: rgba(0, 0, 0, 0.7);\n            color: white;\n            padding: 8px;\n            font-size: 14px;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            overflow: hidden;\n        }\n        .pdf-pagination {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin: 20px 0;\n        }\n        .pdf-pagination button {\n            background-color: #3498db;\n            color: white;\n            border: none;\n            padding: 10px 15px;\n            margin: 0 5px;\n            cursor: pointer;\n            border-radius: 5px;\n            transition: background-color 0.3s ease;\n        }\n        .pdf-pagination button:hover {\n            background-color: #2980b9;\n        }\n        .pdf-pagination button:disabled {\n            background-color: #bdc3c7;\n            cursor: not-allowed;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"tab-container\">\n        <div class=\"tab-buttons\">\n            <button class=\"tab-button active\" onclick=\"openTab(event, 'tab1')\">\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 1<\/button>\n            <button class=\"tab-button\" onclick=\"openTab(event, 'tab2')\">\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 2<\/button>\n            <button class=\"tab-button\" onclick=\"openTab(event, 'tab3')\">\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 3<\/button>\n            <button class=\"tab-button\" onclick=\"openTab(event, 'tab4')\">\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 4<\/button>\n        <\/div>\n        <div id=\"tab1\" class=\"tab-content active\">\n            <div class=\"section-title\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 \u0e15\u0e4d\u0e32\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 1<\/div>\n            <div id=\"reportGallery1\" class=\"pdf-gallery\"><\/div>\n            <div id=\"reportPagination1\" class=\"pdf-pagination\"><\/div>\n        <\/div>\n        <div id=\"tab2\" class=\"tab-content\">\n            <div class=\"section-title\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 \u0e15\u0e4d\u0e32\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 2<\/div>\n            <div id=\"reportGallery2\" class=\"pdf-gallery\"><\/div>\n            <div id=\"reportPagination2\" class=\"pdf-pagination\"><\/div>\n        <\/div>\n        <div id=\"tab3\" class=\"tab-content\">\n            <div class=\"section-title\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 \u0e15\u0e4d\u0e32\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 3<\/div>\n            <div id=\"reportGallery3\" class=\"pdf-gallery\"><\/div>\n            <div id=\"reportPagination3\" class=\"pdf-pagination\"><\/div>\n        <\/div>\n        <div id=\"tab4\" class=\"tab-content\">\n            <div class=\"section-title\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e02\u0e49\u0e21 \u0e15\u0e4d\u0e32\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e04\u0e23\u0e39\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22 \u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 4<\/div>\n            <div id=\"reportGallery4\" class=\"pdf-gallery\"><\/div>\n            <div id=\"reportPagination4\" class=\"pdf-pagination\"><\/div>\n        <\/div>\n    <\/div>\n\n<script>\n    const PDF_PER_PAGE = 10;\n    \n    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.worker.min.js';\n\n    let data_report = [\n        \/\/\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 1\n        [1,'1JZetD07eOZR-dP_owsKSKlnAsgUGwhPA','1JZJzBeC_1-9B7JexEP-MsSUVhuAYwNLq','\u0e19\u0e32\u0e22\u0e2a\u0e31\u0e13\u0e2b\u0e23\u0e31\u0e10 \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e14\u0e35'],\n        [1,'1_OPT1XUdrWJZN_19eNxIRZjgf-7V0REr','1_1G7aFqkhbN3mWs6Q-jOVLqJRuOfbdHy','\u0e19\u0e32\u0e22\u0e27\u0e07\u0e28\u0e01\u0e23 \u0e01\u0e21\u0e25\u0e24\u0e01\u0e29\u0e4c'],\n        [1,'1_IEpnuuldnc2eKE9VeGhYV5PReBwJDH2','1ZzNGbqkoD8_TLWjZoGWr8dRz_xyQahAI','\u0e19\u0e32\u0e22\u0e0a\u0e34\u0e19\u0e27\u0e31\u0e12\u0e19\u0e4c \u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e07\u0e40\u0e08\u0e23\u0e34\u0e0d'],\n        [1,'1EkgVV3d0mLnXno8yeQHYvrgCwqZriNlV','1Ei7O209XeCCisIjy6ExdYyHuDejAxkp0','\u0e19\u0e32\u0e22\u0e0a\u0e22\u0e32\u0e07\u0e01\u0e39\u0e23 \u0e28\u0e23\u0e35\u0e42\u0e17'],\n        [1,'1EhyG6GalgxwP3qLTQJyqjEjIgZpdGkmS','1E0ojsS9H4xKiIgSC2qg8Sgi1cwn_QdS5','\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e2d\u0e34\u0e19\u0e11\u0e38\u0e01\u0e32\u0e19\u0e15\u0e4c \u0e0a\u0e19\u0e30\u0e20\u0e31\u0e22'],\n        [1,'1GOOMAhvAO5mjbzMwC8CrJjtAfF_5SQ9p','14wUPlnQRndTQTEfbJ85Y1VljkqJwNkLo','\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e13\u0e31\u0e10\u0e18\u0e22\u0e32\u0e19\u0e4c \u0e21\u0e30\u0e25\u0e34\u0e27\u0e31\u0e25\u0e22\u0e4c '],\n        [1,'1ZKwcqjMskYuk1JTlzaVy3Qe6qe3ViRF8','1Q-5uFwX78YZvdyR3BPlUpZNQNOkejimS','\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e09\u0e31\u0e15\u0e23\u0e2a\u0e38\u0e14\u0e32 \u0e16\u0e19\u0e2d\u0e21\u0e28\u0e34\u0e25\u0e1b\u0e4c'],\n        \/\/\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 2\n        [2,'1EhBCR3SPQHl-2gJSZ5JewXuElGM5bcXd','1E4jBi56bo9g5CqonC_AXzusBFDDO52e6','\u0e19\u0e32\u0e22\u0e2a\u0e31\u0e13\u0e2b\u0e23\u0e31\u0e10 \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e14\u0e35'],\n        [2,'1NX0j_7z7fWZ2wk86ena797NxcPJ3rknC','1d8kaiaE2M8KPnf_kRHeyffrlkShaxEXY','\u0e19\u0e32\u0e22\u0e0a\u0e34\u0e19\u0e27\u0e31\u0e12\u0e19\u0e4c \u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e07\u0e40\u0e08\u0e23\u0e34\u0e0d'],\n        [2,'1Cq7YDhuGCxw7a_aVjFfD7f72EA1jsw6T','1vxnJsLrghFF9odCB0YpWD2eFK898y7ul','\u0e19\u0e32\u0e22\u0e27\u0e07\u0e28\u0e01\u0e23 \u0e01\u0e21\u0e25\u0e24\u0e01\u0e29\u0e4c'],\n        [2,'1iMg-jddIsCRnnE4GsBFdqty62eo3Dxu7','1h-PuMWXCGHrCw3GyGyGX_D8S763rcWCf','\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e2d\u0e34\u0e19\u0e11\u0e38\u0e01\u0e32\u0e19\u0e15\u0e4c \u0e0a\u0e19\u0e30\u0e20\u0e31\u0e22'],\n        [2,'1n3oCsFn1-yr36sBCFkNUNLuYMh15n1MS','1n3oCsFn1-yr36sBCFkNUNLuYMh15n1MS','\u0e19\u0e32\u0e22\u0e0a\u0e22\u0e32\u0e07\u0e01\u0e39\u0e23 \u0e28\u0e23\u0e35\u0e42\u0e17'],\n        \/\/\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 3\n        [3,'1SKcguW2JNxeOaGlPBx5Sk4eRbIxjLdg6','1NzaZRPp1bmDtYgR7mdxmg9JXGn88RBc6','\u0e19\u0e32\u0e22\u0e2a\u0e31\u0e13\u0e2b\u0e23\u0e31\u0e10 \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e14\u0e35'],\n        [3,'1McYmEZsdXeLYELZwUcowiLd9AFrjbrGU','1fLYL2S9FSXwwokSVp-ysKqit8dNPkjax','\u0e19\u0e32\u0e22\u0e27\u0e07\u0e28\u0e01\u0e23 \u0e01\u0e21\u0e25\u0e24\u0e01\u0e29\u0e4c'],\n        \/\/\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 4\n        [4,'1rfg1XWWBIJTOEf1dOnHE_4qooA-LUS7b','1Mk7YqA1nhpwzS0ow0ZEWjTyCyq3xAcmI','\u0e19\u0e32\u0e22\u0e2a\u0e31\u0e13\u0e2b\u0e23\u0e31\u0e10 \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e14\u0e35']\n\n    ];\n\n\tfunction shuffleArray(array) {\n        for (let i = array.length - 1; i > 0; i--) {\n            const j = Math.floor(Math.random() * (i + 1));\n            [array[i], array[j]] = [array[j], array[i]];\n        }\n        return array;\n    }\n\n    function displayPDFs(data, galleryId, page, period) {\n        const gallery = document.getElementById(galleryId);\n        const filteredData = data.filter(item => item[0] === period);\n        const startIndex = (page - 1) * PDF_PER_PAGE;\n        const endIndex = startIndex + PDF_PER_PAGE;\n        const pagePDFs = filteredData.slice(startIndex, endIndex);\n\n        gallery.innerHTML = '';\n        if (pagePDFs.length === 0) {\n            gallery.innerHTML = '<div class=\"no-data\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e0a\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e19\u0e35\u0e49<\/div>';\n            return page;\n        }\n\n        pagePDFs.forEach(pdf => {\n            const [period, coverID, pdfID, label] = pdf;\n            const pdfElement = document.createElement('div');\n            pdfElement.className = 'pdf-item';\n            \n            const img = document.createElement('img');\n            img.src = `https:\/\/drive.google.com\/thumbnail?id=${coverID}&sz=w400-h300`;\n            img.alt = `PDF Cover ${label}`;\n            img.title = `PDF Document ${label}`;\n            \n            img.onclick = () => window.open(`https:\/\/drive.google.com\/file\/d\/${pdfID}\/view`, '_blank');\n            \n            pdfElement.appendChild(img);\n\n            const nameElement = document.createElement('div');\n            nameElement.className = 'pdf-name';\n            nameElement.textContent = label;\n            pdfElement.appendChild(nameElement);\n\n            gallery.appendChild(pdfElement);\n        });\n\n        return page;\n    }\n\n    function setupPagination(data, paginationId, galleryId, currentPage, period) {\n        const filteredData = data.filter(item => item[0] === period);\n        const totalPages = Math.ceil(filteredData.length \/ PDF_PER_PAGE);\n        const pagination = document.getElementById(paginationId);\n        pagination.innerHTML = '';\n\n        if (filteredData.length === 0) {\n            pagination.style.display = 'none';\n            return currentPage;\n        }\n\n        pagination.style.display = 'flex';\n\n        const prevButton = createButton('\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32', () => {\n            currentPage = Math.max(1, currentPage - 1);\n            currentPage = displayPDFs(data, galleryId, currentPage, period);\n            updatePaginationButtons(data, paginationId, currentPage, period);\n        });\n        pagination.appendChild(prevButton);\n\n        for (let i = 1; i <= totalPages; i++) {\n            const pageButton = createButton(i.toString(), () => {\n                currentPage = i;\n                currentPage = displayPDFs(data, galleryId, currentPage, period);\n                updatePaginationButtons(data, paginationId, currentPage, period);\n            });\n            pagination.appendChild(pageButton);\n        }\n\n        const nextButton = createButton('\u0e16\u0e31\u0e14\u0e44\u0e1b', () => {\n            currentPage = Math.min(totalPages, currentPage + 1);\n            currentPage = displayPDFs(data, galleryId, currentPage, period);\n            updatePaginationButtons(data, paginationId, currentPage, period);\n        });\n        pagination.appendChild(nextButton);\n\n        updatePaginationButtons(data, paginationId, currentPage, period);\n        return currentPage;\n    }\n\n    function createButton(text, onClick) {\n        const button = document.createElement('button');\n        button.textContent = text;\n        button.onclick = onClick;\n        return button;\n    }\n\n    function updatePaginationButtons(data, paginationId, currentPage, period) {\n        const filteredData = data.filter(item => item[0] === period);\n        const buttons = document.querySelectorAll(`#${paginationId} button`);\n        const totalPages = Math.ceil(filteredData.length \/ PDF_PER_PAGE);\n\n        buttons.forEach(button => {\n            if (button.textContent === '\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32') {\n                button.disabled = currentPage === 1;\n            } else if (button.textContent === '\u0e16\u0e31\u0e14\u0e44\u0e1b') {\n                button.disabled = currentPage === totalPages;\n            } else {\n                button.disabled = parseInt(button.textContent) === currentPage;\n            }\n        });\n    }\n\n    function openTab(evt, tabName) {\n        var i, tabContent, tabButtons;\n        tabContent = document.getElementsByClassName(\"tab-content\");\n        for (i = 0; i < tabContent.length; i++) {\n            tabContent[i].style.display = \"none\";\n        }\n        tabButtons = document.getElementsByClassName(\"tab-button\");\n        for (i = 0; i < tabButtons.length; i++) {\n            tabButtons[i].className = tabButtons[i].className.replace(\" active\", \"\");\n        }\n        document.getElementById(tabName).style.display = \"block\";\n        evt.currentTarget.className += \" active\";\n\n        const period = parseInt(tabName.replace('tab', ''));\n        displayPDFs(data_report, `reportGallery${period}`, currentPages[`report${period}`], period);\n        setupPagination(data_report, `reportPagination${period}`, `reportGallery${period}`, currentPages[`report${period}`], period);\n    }\n\n    \/\/ Initialize currentPages object\n    let currentPages = {\n        report1: 1,\n        report2: 1,\n        report3: 1,\n        report4: 1\n    };\n\n    \/\/ Shuffle the data array\n    \/\/data_report = shuffleArray(data_report);\n\n    \/\/ Display initial data for period 2 (since tab2 is active by default)\n    displayPDFs(data_report, 'reportGallery1', currentPages.report1, 1);\n    setupPagination(data_report, 'reportPagination1', 'reportGallery1', currentPages.report1, 1);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<script>\n\t\tdelay(2000); \n\t\tshowLoading(false);\t\t\n<\/script>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<p><a href=\"https:\/\/tubtimsiam04.ac.th\/?page_id=2543\" target=\"_blank\" rel=\"noreferrer noopener\">\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1b\u0e01<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;&nbsp;&nbsp;&#038;n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-3774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/3774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3774"}],"version-history":[{"count":22,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/3774\/revisions"}],"predecessor-version":[{"id":7484,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/3774\/revisions\/7484"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}