{"id":111,"date":"2026-02-14T14:11:22","date_gmt":"2026-02-14T07:11:22","guid":{"rendered":"https:\/\/itservice.rru.ac.th\/web\/?page_id=111"},"modified":"2026-03-11T11:37:13","modified_gmt":"2026-03-11T04:37:13","slug":"repair-form","status":"publish","type":"page","link":"https:\/\/itservice.rru.ac.th\/web\/repair-form\/","title":{"rendered":"\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c"},"content":{"rendered":"\n<!-- Tailwind CSS configuration to prevent conflict with WordPress themes -->\n<script>\n    window.tailwind = {\n        corePlugins: {\n            preflight: false \/\/ \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23 reset CSS \u0e02\u0e2d\u0e07\u0e18\u0e35\u0e21\u0e2b\u0e25\u0e31\u0e01\n        }\n    }\n<\/script>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n<script src=\"https:\/\/static.line-scdn.net\/liff\/edge\/2\/sdk.js\"><\/script>\n\n<style>\n    \/* CSS \u0e40\u0e09\u0e1e\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21 (Scoped) *\/\n    #its-repair-form-wrapper {\n        font-family: 'Sarabun', sans-serif;\n        background-color: #f5f5f5;\n    }\n    #its-repair-form-wrapper .hidden { display: none !important; }\n    \n    #its-repair-form-wrapper .loading-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(255, 255, 255, 0.9);\n        display: flex; flex-direction: column;\n        justify-content: center; align-items: center;\n        z-index: 99999;\n    }\n    #its-repair-form-wrapper .spinner {\n        width: 50px; height: 50px;\n        border: 4px solid #e5e7eb; border-top: 4px solid #15803d;\n        border-radius: 50%; animation: spin 1s linear infinite;\n    }\n    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n    #its-repair-form-wrapper .loading-text {\n        margin-top: 16px; color: #15803d; font-weight: 500;\n    }\n<\/style>\n\n<div id=\"its-repair-form-wrapper\" class=\"bg-gray-50 border rounded-lg overflow-hidden\">\n    <!-- Header -->\n    <header class=\"bg-green-800 text-white shadow-md\">\n        <div class=\"container mx-auto px-4 py-3 flex justify-between items-center\">\n            <h1 class=\"text-xl font-bold m-0 p-0 text-white\">\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21<\/h1>\n            <div id=\"userMenu\" class=\"relative\">\n                <button onclick=\"document.getElementById('userMenuDropdown').classList.toggle('hidden')\" class=\"flex items-center space-x-2 bg-transparent border-0 cursor-pointer text-white\">\n                    <img id=\"userProfilePic\" class=\"w-8 h-8 rounded-full bg-yellow-400\">\n                    <span id=\"userDisplayName\" class=\"text-sm font-medium\">Loading...<\/span>\n                <\/button>\n                <div id=\"userMenuDropdown\" class=\"absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden\">\n                    <a href=\"#\" onclick=\"if(liff.isLoggedIn()) { liff.logout(); } document.getElementById('userMenuDropdown').classList.add('hidden'); Swal.fire('\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22', '', 'success');\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 no-underline\">\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"container mx-auto px-4 py-6\">\n        <div id=\"repairContent\" class=\"bg-white rounded-lg shadow-sm p-6\">\n            <h2 class=\"text-xl font-semibold text-green-800 mb-4 mt-0\">\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21<\/h2>\n            <form id=\"repairForm\" class=\"m-0\">\n                <input type=\"hidden\" id=\"lineUserId\" name=\"lineUserId\">\n                <input type=\"hidden\" id=\"lineDisplayName\" name=\"lineDisplayName\">\n                <input type=\"hidden\" id=\"linePictureUrl\" name=\"linePictureUrl\">\n                <input type=\"hidden\" id=\"userEmail\" name=\"userEmail\">\n                <input type=\"hidden\" id=\"uuid\" name=\"uuid\">\n                <input type=\"hidden\" id=\"ticketId\" name=\"ticketId\">\n                <input type=\"hidden\" id=\"repairDate\" name=\"repairDate\">\n                <input type=\"hidden\" id=\"repairTime\" name=\"repairTime\">\n\n                <div class=\"space-y-6\">\n                    <!-- \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07 -->\n                    <div>\n                        <h3 class=\"text-md font-medium text-gray-700 mb-2 mt-4\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07 (\u0e08\u0e32\u0e01 LINE)<\/h3>\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-100 rounded-md\">\n                            <div>\n                                <label for=\"userName\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 <span class=\"text-red-500\">*<\/span><\/label>\n                                <input type=\"text\" id=\"userName\" name=\"userName\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                            <\/div>\n                            <div>\n                                <label for=\"displayUserEmail\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e2d\u0e35\u0e40\u0e21\u0e25 <span class=\"text-gray-400\">(\u0e44\u0e21\u0e48\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a)<\/span><\/label>\n                                <input type=\"email\" id=\"displayUserEmail\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" placeholder=\"\u0e01\u0e23\u0e2d\u0e01\u0e2d\u0e35\u0e40\u0e21\u0e25 (\u0e16\u0e49\u0e32\u0e21\u0e35)\">\n                                <div id=\"emailWarning\" class=\"hidden mt-2 p-2 bg-yellow-50 border-l-4 border-yellow-400 rounded\">\n                                    <p class=\"text-xs text-yellow-700 m-0\">\n                                        <strong>\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33:<\/strong> \u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1c\u0e39\u0e01\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e01\u0e31\u0e1a\u0e1a\u0e31\u0e0d\u0e0a\u0e35 LINE \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e23\u0e30\u0e1a\u0e1a\u0e14\u0e36\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e43\u0e19\u0e04\u0e23\u0e31\u0e49\u0e07\u0e16\u0e31\u0e14\u0e44\u0e1b\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 -->\n                    <div>\n                        <h3 class=\"text-md font-medium text-gray-700 mb-2 mt-4\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/h3>\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                            <div>\n                                <label for=\"userPosition\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 <span class=\"text-red-500\">*<\/span><\/label>\n                                <input type=\"text\" id=\"userPosition\" name=\"userPosition\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                            <\/div>\n                            <div>\n                                <label for=\"userDepartment\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 <span class=\"text-red-500\">*<\/span><\/label>\n                                <input type=\"text\" id=\"userDepartment\" name=\"userDepartment\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                            <\/div>\n                            <div>\n                                <label for=\"userPhone\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19 <span class=\"text-red-500\">*<\/span><\/label>\n                                <input type=\"text\" id=\"userPhone\" name=\"userPhone\" maxlength=\"4\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                            <\/div>\n                            <div>\n                                <label for=\"userLocation\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e15\u0e31\u0e49\u0e07 <span class=\"text-red-500\">*<\/span><\/label>\n                                <input type=\"text\" id=\"userLocation\" name=\"userLocation\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c -->\n                    <div>\n                        <h3 class=\"text-md font-medium text-gray-700 mb-2 mt-4\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c<\/h3>\n                        <div class=\"space-y-4\">\n                            <div>\n                                <label for=\"equipmentHistory\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c\u0e08\u0e32\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 (\u0e16\u0e49\u0e32\u0e21\u0e35)<\/label>\n                                <select id=\"equipmentHistory\" name=\"equipmentHistory\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" disabled>\n                                    <option value=\"\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/option>\n                                <\/select>\n                            <\/div>\n                            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-4\">\n                                <div>\n                                    <label for=\"equipmentName\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c <span class=\"text-red-500\">*<\/span><\/label>\n                                    <input type=\"text\" id=\"equipmentName\" name=\"equipmentName\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                                <\/div>\n                                <div>\n                                    <label for=\"equipmentId\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c <span class=\"text-red-500\">*<\/span><\/label>\n                                    <input type=\"text\" id=\"equipmentId\" name=\"equipmentId\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u0e2d\u0e32\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e35\u0e22 -->\n                    <div class=\"mt-4\">\n                        <label for=\"problemDesc\" class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30\u0e2d\u0e32\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e35\u0e22 <span class=\"text-red-500\">*<\/span><\/label>\n                        <textarea id=\"problemDesc\" name=\"problemDesc\" rows=\"4\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500\" required><\/textarea>\n                    <\/div>\n                    \n                    <!-- \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b -->\n                    <div class=\"mt-4\">\n                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u0e41\u0e19\u0e1a\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e (\u0e16\u0e49\u0e32\u0e21\u0e35)<\/label>\n                        <input type=\"file\" id=\"imageUpload\" name=\"imageUpload\" accept=\"image\/*\" class=\"w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100 border border-gray-300 rounded-md p-1\">\n                        <img decoding=\"async\" id=\"imagePreview\" class=\"hidden mt-2 max-h-40 border p-1 rounded\" src=\"#\" alt=\"Preview\">\n                    <\/div>\n                <\/div>\n\n                <div class=\"mt-6 border-t pt-4\">\n                    <label class=\"flex items-center cursor-pointer m-0\">\n                        <input type=\"checkbox\" id=\"pdpaConsent\" name=\"pdpaConsent\" required class=\"h-5 w-5 text-green-700 focus:ring-green-500 border-gray-300 rounded\">\n                        <span class=\"ml-2 text-sm text-gray-700\">\u0e02\u0e49\u0e32\u0e1e\u0e40\u0e08\u0e49\u0e32\u0e22\u0e34\u0e19\u0e22\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e40\u0e01\u0e47\u0e1a\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21 <span class=\"text-red-500\">*<\/span><\/span>\n                    <\/label>\n                <\/div>\n\n                <div class=\"flex flex-wrap justify-center gap-4 mt-8\">\n                    <button type=\"button\" id=\"cancelButton\" onclick=\"cancelForm()\" class=\"bg-gray-500 hover:bg-gray-700 text-white font-medium py-2 px-6 rounded-md border-0 cursor-pointer transition-colors\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n                    <button type=\"submit\" id=\"submitButton\" class=\"bg-green-700 hover:bg-green-900 text-white font-medium py-2 px-6 rounded-md border-0 cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed\">\u0e2a\u0e48\u0e07\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21<\/button>\n                <\/div>\n            <\/form>\n        <\/div>\n\n        <!-- Loading Overlay -->\n        <div id=\"loadingOverlay\" class=\"loading-overlay hidden\">\n            <div class=\"spinner\"><\/div>\n            <p id=\"loadingText\" class=\"loading-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/p>\n        <\/div>\n    <\/main>\n<\/div>\n\n<script>\n    \/\/ \u0e2a\u0e48\u0e07\u0e1c\u0e48\u0e32\u0e19 PHP PHP Variables\n    const LIFF_ID = \"2007495650-QbyzOvv8\";\n    const SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycby02fO2_GgLEWJif2dYzF9wKK1f9SDiRxXGPuCshwIdwx-e4MZj2227RZ8-fSJCZm46GQ\/exec\";\n    \n    \/\/ ============ DEBUG MODE ============\n    \/\/ \u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e40\u0e27\u0e47\u0e1a WordPress \u0e1a\u0e32\u0e07\u0e17\u0e35\u0e2d\u0e32\u0e08\u0e40\u0e1b\u0e34\u0e14\u0e08\u0e32\u0e01\u0e19\u0e2d\u0e01 LINE \u0e41\u0e19\u0e30\u0e19\u0e33\u0e43\u0e2b\u0e49 set DEBUG_MODE = true \n    \/\/ \u0e16\u0e49\u0e32\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e08\u0e32\u0e01 LINE \u0e08\u0e30\u0e44\u0e14\u0e49\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49\n    const DEBUG_MODE = true;  \n    \n    \/\/ \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 mock \u0e01\u0e23\u0e13\u0e35\u0e40\u0e1b\u0e34\u0e14\u0e19\u0e2d\u0e01 LINE\n    const MOCK_PROFILE = {\n        userId: \"U_WEB_\" + generateUUID().substring(0,8),\n        displayName: \"\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\", \n        pictureUrl: \"\",\n        email: \"\"\n    };\n    \/\/ ====================================\n\n    let imageBase64 = \"\", imageFileName = \"\", imageMimeType = \"\";\n\n    function generateUUID() {\n        return \"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\".replace(\/[xy]\/g, c => {\n            const r = (Math.random() * 16) | 0, v = c === \"x\" ? r : (r & 0x3) | 0x8;\n            return v.toString(16);\n        });\n    }\n    \n    function generateTicketID() {\n        const d = new Date();\n        return `REP${d.getFullYear().toString().slice(-2)}${String(d.getMonth() + 1).padStart(2, \"0\")}${String(d.getDate()).padStart(2, \"0\")}-${Math.floor(Math.random() * 10000).toString().padStart(4, \"0\")}`;\n    }\n\n    async function fetchFromApi(action, params = {}) {\n        const url = new URL(SCRIPT_URL);\n        url.searchParams.append('action', action);\n        for (const k in params) url.searchParams.append(k, params[k]);\n\n        const res = await fetch(url);\n        if (!res.ok) throw new Error(`API '${action}' status ${res.status}`);\n        const data = await res.json();\n        if (data.error) throw new Error(data.error);\n        return data;\n    }\n\n    document.addEventListener('DOMContentLoaded', async () => {\n        const loadingOverlay = document.getElementById('loadingOverlay');\n        const loadingText = document.getElementById('loadingText');\n\n        function showLoading(message = '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...') {\n            loadingText.textContent = message;\n            loadingOverlay.classList.remove('hidden');\n        }\n        function hideLoading() {\n            loadingOverlay.classList.add('hidden');\n        }\n\n        try {\n            let profile, userEmail;\n            let isInLine = false;\n\n            \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a LIFF\n            try {\n                await liff.init({ liffId: LIFF_ID });\n                isInLine = liff.isInClient();\n            } catch(e) {\n                console.log('LIFF Init Error:', e);\n            }\n\n            if (isInLine && liff.isLoggedIn()) {\n                showLoading('\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e1b\u0e23\u0e44\u0e1f\u0e25\u0e4c LINE...');\n                profile = await liff.getProfile();\n                const decodedToken = await liff.getDecodedIDToken();\n                userEmail = decodedToken?.email || '';\n                \n                if (!userEmail) {\n                    document.getElementById('emailWarning').classList.remove('hidden');\n                }\n            } else {\n                console.log('\u0e17\u0e33\u0e07\u0e32\u0e19\u0e1a\u0e19 Web Browser - \u0e43\u0e0a\u0e49\u0e42\u0e2b\u0e21\u0e14\u0e1b\u0e01\u0e15\u0e34');\n                profile = MOCK_PROFILE;\n                userEmail = \"\";\n                document.getElementById('emailWarning').classList.remove('hidden');\n            }\n\n            \/\/ \u0e40\u0e15\u0e34\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n            document.getElementById('lineUserId').value = profile.userId;\n            document.getElementById('lineDisplayName').value = profile.displayName;\n            document.getElementById('linePictureUrl').value = profile.pictureUrl || '';\n            \n            if (profile.displayName !== '\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a') {\n                document.getElementById('userName').value = profile.displayName;\n            }\n            \n            document.getElementById('userEmail').value = userEmail;\n            document.getElementById('displayUserEmail').value = userEmail;\n            document.getElementById('userDisplayName').textContent = profile.displayName;\n            if (profile.pictureUrl) document.getElementById('userProfilePic').src = profile.pictureUrl;\n\n            document.getElementById('uuid').value = generateUUID();\n            document.getElementById('ticketId').value = generateTicketID();\n\n            const now = new Date();\n            document.getElementById('repairDate').value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, \"0\")}-${String(now.getDate()).padStart(2, \"0\")}`;\n            document.getElementById('repairTime').value = `${String(now.getHours()).padStart(2, \"0\")}:${String(now.getMinutes()).padStart(2, \"0\")}`;\n\n            \/\/ \u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e08\u0e32\u0e01 Email (\u0e16\u0e49\u0e32\u0e21\u0e35)\n            if (userEmail) {\n                showLoading('\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a...');\n                try {\n                    const userDetails = await fetchFromApi('getUserByEmail', { email: userEmail });\n                    if (userDetails && Object.keys(userDetails).length > 0) {\n                        if (userDetails.name) document.getElementById('userName').value = userDetails.name;\n                        document.getElementById('userPosition').value = userDetails.position || '';\n                        document.getElementById('userDepartment').value = userDetails.department || '';\n                        document.getElementById('userPhone').value = userDetails.phone || '';\n                        document.getElementById('userLocation').value = userDetails.location || '';\n                        if (userDetails.uuid) document.getElementById('uuid').value = userDetails.uuid;\n                    }\n                } catch (e) {\n                    console.log('\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a:', e.message);\n                }\n            }\n\n            \/\/ \u0e42\u0e2b\u0e25\u0e14\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c (\u0e16\u0e49\u0e32\u0e21\u0e35 email)\n            const equipmentSelect = document.getElementById('equipmentHistory');\n            if (userEmail) {\n                showLoading('\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21...');\n                try {\n                    const equipmentHistory = await fetchFromApi('getEquipmentHistoryForUser', { email: userEmail });\n                    if (equipmentHistory && equipmentHistory.length > 0) {\n                        equipmentSelect.innerHTML = '<option value=\"\">-- \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 --<\/option>';\n                        equipmentHistory.forEach(eq => equipmentSelect.add(new Option(`${eq.name} (${eq.id})`, JSON.stringify(eq))));\n                        equipmentSelect.disabled = false;\n                    } else {\n                        equipmentSelect.innerHTML = '<option value=\"\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34<\/option>';\n                    }\n                } catch (e) {\n                    equipmentSelect.innerHTML = '<option value=\"\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34<\/option>';\n                }\n            } else {\n                equipmentSelect.innerHTML = '<option value=\"\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34<\/option>';\n            }\n\n            hideLoading();\n\n        } catch (err) {\n            console.error(\"Initialization Error:\", err);\n            hideLoading();\n            Swal.fire({ icon: 'error', title: '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', text: `\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e44\u0e14\u0e49: ${err.message}` });\n        }\n    });\n\n    \/\/ \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\n    document.getElementById('imageUpload').addEventListener('change', (event) => {\n        const file = event.target.files[0];\n        if (!file) {\n            document.getElementById('imagePreview').classList.add('hidden');\n            imageBase64 = \"\";\n            return;\n        }\n        \n        \/\/ \u0e40\u0e0a\u0e47\u0e04\u0e02\u0e19\u0e32\u0e14\u0e44\u0e1f\u0e25\u0e4c (\u0e44\u0e21\u0e48\u0e04\u0e27\u0e23\u0e40\u0e01\u0e34\u0e19 5MB \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a API)\n        if (file.size > 5 * 1024 * 1024) {\n            Swal.fire(\"\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e2b\u0e0d\u0e48\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b\", \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5 MB\", \"warning\");\n            event.target.value = \"\";\n            return;\n        }\n        \n        const reader = new FileReader();\n        reader.onload = e => {\n            document.getElementById('imagePreview').src = e.target.result;\n            document.getElementById('imagePreview').classList.remove('hidden');\n            imageBase64 = e.target.result.split(',')[1];\n        };\n        reader.readAsDataURL(file);\n        imageFileName = file.name;\n        imageMimeType = file.type;\n    });\n\n    \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e04\u0e23\u0e38\u0e20\u0e31\u0e13\u0e11\u0e4c\n    document.getElementById('equipmentHistory').addEventListener('change', (e) => {\n        if (!e.target.value) return;\n        const eq = JSON.parse(e.target.value);\n        document.getElementById('equipmentName').value = eq.name || '';\n        document.getElementById('equipmentId').value = eq.id || '';\n    });\n\n    \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15 Email\n    document.getElementById('displayUserEmail').addEventListener('input', (e) => {\n        document.getElementById('userEmail').value = e.target.value;\n    });\n\n    \/\/ \u0e2a\u0e48\u0e07\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\n    document.getElementById('repairForm').addEventListener('submit', async (e) => {\n        e.preventDefault();\n\n        const submitButton = document.getElementById('submitButton');\n        if (submitButton.disabled) return;\n\n        if (!document.getElementById('pdpaConsent').checked) {\n            Swal.fire({ icon: \"warning\", title: \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\", text: \"\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2f \u0e01\u0e48\u0e2d\u0e19\" });\n            return;\n        }\n\n        const emailValue = document.getElementById('displayUserEmail').value.trim();\n        if (!emailValue) {\n            Swal.fire({\n                icon: \"warning\",\n                title: \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e2d\u0e35\u0e40\u0e21\u0e25\",\n                html: \"\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21<br><small class='text-gray-500'>\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33: \u0e1c\u0e39\u0e01\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e01\u0e31\u0e1a LINE \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e14\u0e36\u0e07\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e43\u0e19\u0e04\u0e23\u0e31\u0e49\u0e07\u0e16\u0e31\u0e14\u0e44\u0e1b<\/small>\"\n            });\n            document.getElementById('displayUserEmail').focus();\n            return;\n        }\n        document.getElementById('userEmail').value = emailValue;\n\n        submitButton.disabled = true;\n        Swal.fire({ title: \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...\", allowOutsideClick: false, didOpen: () => Swal.showLoading() });\n\n        const formDataObject = {\n            lineUserId: document.getElementById('lineUserId').value,\n            lineDisplayName: document.getElementById('lineDisplayName').value,\n            linePictureUrl: document.getElementById('linePictureUrl').value,\n            userEmail: document.getElementById('userEmail').value,\n            uuid: document.getElementById('uuid').value,\n            ticketId: document.getElementById('ticketId').value,\n            repairDate: document.getElementById('repairDate').value,\n            repairTime: document.getElementById('repairTime').value,\n            userName: document.getElementById('userName').value,\n            userPosition: document.getElementById('userPosition').value,\n            userDepartment: document.getElementById('userDepartment').value,\n            userPhone: document.getElementById('userPhone').value,\n            userLocation: document.getElementById('userLocation').value,\n            equipmentName: document.getElementById('equipmentName').value,\n            equipmentId: document.getElementById('equipmentId').value,\n            problemDesc: document.getElementById('problemDesc').value,\n            pdpaConsent: document.getElementById('pdpaConsent').checked,\n            role: 'User'\n        };\n        \n        if (imageBase64) {\n            formDataObject.imageBase64 = imageBase64;\n            formDataObject.imageName = imageFileName;\n            formDataObject.imageMimeType = imageMimeType;\n        }\n\n        const params = new URLSearchParams();\n        params.append('action', 'submitRepair');\n        for (const key in formDataObject) params.append(key, formDataObject[key]);\n\n        try {\n            const response = await fetch(SCRIPT_URL, { \n                method: 'POST', \n                body: params,\n                headers: {\n                    'Content-Type': 'application\/x-www-form-urlencoded',\n                }\n            });\n            \n            const result = await response.json();\n\n            if (result.result === 'success') {\n                await Swal.fire({ icon: 'success', title: '\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', text: `\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e41\u0e08\u0e49\u0e07\u0e0b\u0e48\u0e2d\u0e21: ${formDataObject.ticketId}` });\n\n                document.getElementById('repairForm').reset();\n                imageBase64 = ''; imageFileName = ''; imageMimeType = '';\n                document.getElementById('imagePreview').classList.add('hidden');\n                document.getElementById('imagePreview').src = '#';\n                \n                document.getElementById('uuid').value = generateUUID();\n                document.getElementById('ticketId').value = generateTicketID();\n                \n                const now = new Date();\n                document.getElementById('repairDate').value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, \"0\")}-${String(now.getDate()).padStart(2, \"0\")}`;\n                document.getElementById('repairTime').value = `${String(now.getHours()).padStart(2, \"0\")}:${String(now.getMinutes()).padStart(2, \"0\")}`;\n\n                \/\/ \u0e1b\u0e34\u0e14 Liff \u0e16\u0e49\u0e32\u0e40\u0e1b\u0e34\u0e14\u0e08\u0e32\u0e01 LINE\n                if (typeof liff !== 'undefined' && liff.isInClient()) {\n                    liff.closeWindow();\n                }\n            } else {\n                throw new Error(result.message || '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49');\n            }\n        } catch (error) {\n            console.error('Submit Error:', error);\n            Swal.fire({ icon: 'error', title: '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', text: error.message || '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e1a\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e44\u0e14\u0e49' });\n        } finally {\n            submitButton.disabled = false;\n        }\n    });\n\n    function cancelForm() {\n        Swal.fire({\n            title: '\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01?',\n            text: '\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e01\u0e23\u0e2d\u0e01\u0e08\u0e30\u0e16\u0e39\u0e01\u0e25\u0e49\u0e32\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14',\n            icon: 'warning',\n            showCancelButton: true,\n            confirmButtonColor: '#d33',\n            cancelButtonColor: '#3085d6',\n            confirmButtonText: '\u0e43\u0e0a\u0e48, \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01',\n            cancelButtonText: '\u0e44\u0e21\u0e48, \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e01\u0e23\u0e2d\u0e01'\n        }).then((result) => {\n            if (result.isConfirmed) {\n                document.getElementById('repairForm').reset();\n                imageBase64 = ''; imageFileName = ''; imageMimeType = '';\n                document.getElementById('imagePreview').classList.add('hidden');\n                document.getElementById('imagePreview').src = '#';\n                \n                document.getElementById('uuid').value = generateUUID();\n                document.getElementById('ticketId').value = generateTicketID();\n\n                Swal.fire({\n                    icon: 'info',\n                    title: '\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e49\u0e27',\n                    timer: 1500,\n                    showConfirmButton: false\n                });\n\n                if (typeof liff !== 'undefined' && liff.isInClient()) {\n                    liff.closeWindow();\n                }\n            }\n        });\n    }\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"repair-form.php","meta":{"footnotes":""},"class_list":["post-111","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/pages\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":3,"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/pages\/111\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/pages\/111\/revisions\/254"}],"wp:attachment":[{"href":"https:\/\/itservice.rru.ac.th\/web\/wp-json\/wp\/v2\/media?parent=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}