\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e21\u0e48\u0e2a\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap');\n\n :root {\n --primary-color: #0056b3; \/* \u0e2a\u0e35\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 (\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07) *\/\n --secondary-color: #f4f4f4;\n --border-color: #ddd;\n --text-color: #333;\n --success-color: #28a745;\n --error-color: #dc3545;\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f9f9f9;\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .booking-container {\n max-width: 700px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n border-top: 5px solid var(--primary-color);\n }\n\n .booking-header {\n text-align: center;\n margin-bottom: 2rem;\n }\n\n .booking-header h2 {\n color: var(--primary-color);\n font-weight: 700;\n margin: 0;\n }\n\n .booking-header p {\n color: #666;\n font-size: 0.95rem;\n }\n\n .form-group {\n margin-bottom: 1.2rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 700;\n color: #555;\n }\n\n .form-control {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid var(--border-color);\n border-radius: 5px;\n font-size: 1rem;\n font-family: 'Sarabun', sans-serif;\n transition: border-color 0.3s;\n }\n\n .form-control:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 5px rgba(0, 86, 179, 0.2);\n }\n \n .form-row {\n display: flex;\n gap: 1rem;\n }\n\n .form-row .form-group {\n flex: 1;\n }\n\n .submit-btn {\n display: block;\n width: 100%;\n padding: 0.9rem;\n background-color: var(--primary-color);\n color: #fff;\n border: none;\n border-radius: 5px;\n font-size: 1.1rem;\n font-weight: 700;\n font-family: 'Sarabun', sans-serif;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .submit-btn:hover {\n background-color: #004494;\n }\n \n #booking-summary {\n display: none;\n margin-top: 2rem;\n padding: 1.5rem;\n border-radius: 8px;\n background-color: #e9f5ff;\n border-left: 5px solid var(--primary-color);\n }\n \n #booking-summary h3 {\n margin-top: 0;\n color: var(--primary-color);\n }\n\n #summary-details {\n white-space: pre-wrap; \/* Allows line breaks *\/\n }\n \n #confirmation-link {\n display: block;\n text-align: center;\n margin-top: 1rem;\n padding: 0.8rem;\n background-color: var(--success-color);\n color: white;\n text-decoration: none;\n border-radius: 5px;\n font-weight: bold;\n }\n \n #confirmation-link:hover {\n background-color: #218838;\n }\n\n @media (max-width: 600px) {\n .form-row {\n flex-direction: column;\n gap: 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"booking-container\">\n <div class=\"booking-header\">\n <h2>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c<\/h2>\n <p>\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e21\u0e48\u0e2a\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/p>\n <\/div>\n <form id=\"carBookingForm\">\n <div class=\"form-group\">\n <label for=\"requester-name\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25 \u0e1c\u0e39\u0e49\u0e02\u0e2d\u0e43\u0e0a\u0e49\u0e23\u0e16<\/label>\n <input type=\"text\" id=\"requester-name\" class=\"form-control\" placeholder=\"\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e41\u0e25\u0e30\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\" required>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"department\">\u0e1d\u0e48\u0e32\u0e22\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e2f<\/label>\n <input type=\"text\" id=\"department\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e2f \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"contact-number\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/label>\n <input type=\"tel\" id=\"contact-number\" class=\"form-control\" placeholder=\"08X-XXX-XXXX\" required>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"destination\">\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\/\u0e1b\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07<\/label>\n <input type=\"text\" id=\"destination\" class=\"form-control\" placeholder=\"\u0e23\u0e30\u0e1a\u0e38\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e44\u0e1b\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"purpose\">\u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e43\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e23\u0e16<\/label>\n <textarea id=\"purpose\" class=\"form-control\" rows=\"3\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e19\u0e33\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e44\u0e1b\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19, \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\" required><\/textarea>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"start-datetime\">\u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e0a\u0e49\u0e23\u0e16<\/label>\n <input type=\"datetime-local\" id=\"start-datetime\" class=\"form-control\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"end-datetime\">\u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49<\/label>\n <input type=\"datetime-local\" id=\"end-datetime\" class=\"form-control\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"car-selection\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c<\/label>\n <select id=\"car-selection\" class=\"form-control\" required>\n <option value=\"\" disabled selected>— \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c —<\/option>\n <option value=\"\u0e23\u0e16\u0e15\u0e39\u0e49 Toyota Commuter (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-1234)\">\u0e23\u0e16\u0e15\u0e39\u0e49 Toyota Commuter (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-1234)<\/option>\n <option value=\"\u0e23\u0e16\u0e01\u0e23\u0e30\u0e1a\u0e30 Isuzu D-Max (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-5678)\">\u0e23\u0e16\u0e01\u0e23\u0e30\u0e1a\u0e30 Isuzu D-Max (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-5678)<\/option>\n <option value=\"\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c 7 \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07 (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-9012)\">\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c 7 \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07 (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-9012)<\/option>\n <\/select>\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e1a\u0e04\u0e33\u0e02\u0e2d\u0e08\u0e2d\u0e07\u0e23\u0e16<\/button>\n <\/form>\n \n <div id=\"booking-summary\">\n <h3>\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e33\u0e02\u0e2d<\/h3>\n <p id=\"summary-details\"><\/p>\n <a id=\"confirmation-link\" href=\"#\" target=\"_blank\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25<\/a>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('carBookingForm').addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e1a\u0e1a\u0e1b\u0e01\u0e15\u0e34\n\n \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01\u0e1f\u0e2d\u0e23\u0e4c\u0e21\n const name = document.getElementById('requester-name').value;\n const department = document.getElementById('department').value;\n const contact = document.getElementById('contact-number').value;\n const destination = document.getElementById('destination').value;\n const purpose = document.getElementById('purpose').value;\n const start = new Date(document.getElementById('start-datetime').value);\n const end = new Date(document.getElementById('end-datetime').value);\n const car = document.getElementById('car-selection').value;\n \n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\n if (!name || !department || !contact || !destination || !purpose || !start || !end || !car) {\n alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e17\u0e38\u0e01\u0e0a\u0e48\u0e2d\u0e07');\n return;\n }\n\n \/\/ \u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32\n const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };\n const formattedStart = start.toLocaleString('th-TH', options);\n const formattedEnd = end.toLocaleString('th-TH', options);\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2a\u0e23\u0e38\u0e1b\n const summaryText = `\n \u0e1c\u0e39\u0e49\u0e02\u0e2d\u0e43\u0e0a\u0e49\u0e23\u0e16: ${name}\n \u0e1d\u0e48\u0e32\u0e22\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e2f: ${department}\n \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d: ${contact}\n \n \u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07: ${destination}\n \u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c: ${purpose}\n \n \u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07: ${car}\n \n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19: ${formattedStart} \u0e19.\n \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19: ${formattedEnd} \u0e19.\n `;\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e2a\u0e23\u0e38\u0e1b\n document.getElementById('summary-details').innerText = summaryText;\n document.getElementById('booking-summary').style.display = 'block';\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25 (mailto)\n \/\/ **\u0e2a\u0e33\u0e04\u0e31\u0e0d:** \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 admin.mps@example.com \u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e08\u0e23\u0e34\u0e07\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a\n const adminEmail = 'admin.mps@example.com'; \n const emailSubject = `[\u0e02\u0e2d\u0e08\u0e2d\u0e07\u0e23\u0e16] ${name} - ${car}`;\n const emailBody = `\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e32\u0e19\u0e1e\u0e32\u0e2b\u0e19\u0e30\\n\\n\u0e02\u0e49\u0e32\u0e1e\u0e40\u0e08\u0e49\u0e32 ${name} \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e02\u0e2d\u0e43\u0e0a\u0e49\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e14\u0e22\u0e21\u0e35\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49:\\n\\n${summaryText}\\n\\n\u0e08\u0e36\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e1b\u0e23\u0e14\u0e1e\u0e34\u0e08\u0e32\u0e23\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\\n\u0e02\u0e2d\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e19\u0e31\u0e1a\u0e16\u0e37\u0e2d\\n${name}`;\n \n const mailtoLink = `mailto:${adminEmail}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;\n \n document.getElementById('confirmation-link').href = mailtoLink;\n\n \/\/ \u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e23\u0e38\u0e1b\n document.getElementById('booking-summary').scrollIntoView({ behavior: 'smooth' });\n });\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e21\u0e48\u0e2a\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15 […]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5105","post","type-post","status-publish","format-standard","hentry","category-announce"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/posts\/5105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/comments?post=5105"}],"version-history":[{"count":0,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/posts\/5105\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/media?parent=5105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/categories?post=5105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/tags?post=5105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5105,"date":"2025-09-11T22:30:05","date_gmt":"2025-09-11T15:30:05","guid":{"rendered":"https:\/\/www.maesai.ac.th\/web\/?p=5105"},"modified":"2025-09-11T22:30:42","modified_gmt":"2025-09-11T15:30:42","slug":"%e0%b8%a3%e0%b8%b0%e0%b8%9a%e0%b8%9a%e0%b8%88%e0%b8%ad%e0%b8%87%e0%b8%a3%e0%b8%96%e0%b8%a2%e0%b8%99%e0%b8%95%e0%b9%8c","status":"publish","type":"post","link":"https:\/\/www.maesai.ac.th\/web\/announce\/5105\/","title":{"rendered":"\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c"},"content":{"rendered":"\n\n\n\n \n \n \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e21\u0e48\u0e2a\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap');\n\n :root {\n --primary-color: #0056b3; \/* \u0e2a\u0e35\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 (\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07) *\/\n --secondary-color: #f4f4f4;\n --border-color: #ddd;\n --text-color: #333;\n --success-color: #28a745;\n --error-color: #dc3545;\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f9f9f9;\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .booking-container {\n max-width: 700px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n border-top: 5px solid var(--primary-color);\n }\n\n .booking-header {\n text-align: center;\n margin-bottom: 2rem;\n }\n\n .booking-header h2 {\n color: var(--primary-color);\n font-weight: 700;\n margin: 0;\n }\n\n .booking-header p {\n color: #666;\n font-size: 0.95rem;\n }\n\n .form-group {\n margin-bottom: 1.2rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 700;\n color: #555;\n }\n\n .form-control {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid var(--border-color);\n border-radius: 5px;\n font-size: 1rem;\n font-family: 'Sarabun', sans-serif;\n transition: border-color 0.3s;\n }\n\n .form-control:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 5px rgba(0, 86, 179, 0.2);\n }\n \n .form-row {\n display: flex;\n gap: 1rem;\n }\n\n .form-row .form-group {\n flex: 1;\n }\n\n .submit-btn {\n display: block;\n width: 100%;\n padding: 0.9rem;\n background-color: var(--primary-color);\n color: #fff;\n border: none;\n border-radius: 5px;\n font-size: 1.1rem;\n font-weight: 700;\n font-family: 'Sarabun', sans-serif;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .submit-btn:hover {\n background-color: #004494;\n }\n \n #booking-summary {\n display: none;\n margin-top: 2rem;\n padding: 1.5rem;\n border-radius: 8px;\n background-color: #e9f5ff;\n border-left: 5px solid var(--primary-color);\n }\n \n #booking-summary h3 {\n margin-top: 0;\n color: var(--primary-color);\n }\n\n #summary-details {\n white-space: pre-wrap; \/* Allows line breaks *\/\n }\n \n #confirmation-link {\n display: block;\n text-align: center;\n margin-top: 1rem;\n padding: 0.8rem;\n background-color: var(--success-color);\n color: white;\n text-decoration: none;\n border-radius: 5px;\n font-weight: bold;\n }\n \n #confirmation-link:hover {\n background-color: #218838;\n }\n\n @media (max-width: 600px) {\n .form-row {\n flex-direction: column;\n gap: 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"booking-container\">\n <div class=\"booking-header\">\n <h2>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c<\/h2>\n <p>\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e21\u0e48\u0e2a\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/p>\n <\/div>\n <form id=\"carBookingForm\">\n <div class=\"form-group\">\n <label for=\"requester-name\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25 \u0e1c\u0e39\u0e49\u0e02\u0e2d\u0e43\u0e0a\u0e49\u0e23\u0e16<\/label>\n <input type=\"text\" id=\"requester-name\" class=\"form-control\" placeholder=\"\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e41\u0e25\u0e30\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\" required>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"department\">\u0e1d\u0e48\u0e32\u0e22\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e2f<\/label>\n <input type=\"text\" id=\"department\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e2f \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"contact-number\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/label>\n <input type=\"tel\" id=\"contact-number\" class=\"form-control\" placeholder=\"08X-XXX-XXXX\" required>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"destination\">\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\/\u0e1b\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07<\/label>\n <input type=\"text\" id=\"destination\" class=\"form-control\" placeholder=\"\u0e23\u0e30\u0e1a\u0e38\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e44\u0e1b\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"purpose\">\u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e43\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e23\u0e16<\/label>\n <textarea id=\"purpose\" class=\"form-control\" rows=\"3\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e19\u0e33\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e44\u0e1b\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19, \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\" required><\/textarea>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"start-datetime\">\u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e0a\u0e49\u0e23\u0e16<\/label>\n <input type=\"datetime-local\" id=\"start-datetime\" class=\"form-control\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"end-datetime\">\u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49<\/label>\n <input type=\"datetime-local\" id=\"end-datetime\" class=\"form-control\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"car-selection\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c<\/label>\n <select id=\"car-selection\" class=\"form-control\" required>\n <option value=\"\" disabled selected>— \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c —<\/option>\n <option value=\"\u0e23\u0e16\u0e15\u0e39\u0e49 Toyota Commuter (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-1234)\">\u0e23\u0e16\u0e15\u0e39\u0e49 Toyota Commuter (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-1234)<\/option>\n <option value=\"\u0e23\u0e16\u0e01\u0e23\u0e30\u0e1a\u0e30 Isuzu D-Max (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-5678)\">\u0e23\u0e16\u0e01\u0e23\u0e30\u0e1a\u0e30 Isuzu D-Max (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-5678)<\/option>\n <option value=\"\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c 7 \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07 (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-9012)\">\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c 7 \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07 (\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 XX-9012)<\/option>\n <\/select>\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e1a\u0e04\u0e33\u0e02\u0e2d\u0e08\u0e2d\u0e07\u0e23\u0e16<\/button>\n <\/form>\n \n <div id=\"booking-summary\">\n <h3>\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e33\u0e02\u0e2d<\/h3>\n <p id=\"summary-details\"><\/p>\n <a id=\"confirmation-link\" href=\"#\" target=\"_blank\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25<\/a>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('carBookingForm').addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e1a\u0e1a\u0e1b\u0e01\u0e15\u0e34\n\n \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01\u0e1f\u0e2d\u0e23\u0e4c\u0e21\n const name = document.getElementById('requester-name').value;\n const department = document.getElementById('department').value;\n const contact = document.getElementById('contact-number').value;\n const destination = document.getElementById('destination').value;\n const purpose = document.getElementById('purpose').value;\n const start = new Date(document.getElementById('start-datetime').value);\n const end = new Date(document.getElementById('end-datetime').value);\n const car = document.getElementById('car-selection').value;\n \n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\n if (!name || !department || !contact || !destination || !purpose || !start || !end || !car) {\n alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e17\u0e38\u0e01\u0e0a\u0e48\u0e2d\u0e07');\n return;\n }\n\n \/\/ \u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32\n const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };\n const formattedStart = start.toLocaleString('th-TH', options);\n const formattedEnd = end.toLocaleString('th-TH', options);\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2a\u0e23\u0e38\u0e1b\n const summaryText = `\n \u0e1c\u0e39\u0e49\u0e02\u0e2d\u0e43\u0e0a\u0e49\u0e23\u0e16: ${name}\n \u0e1d\u0e48\u0e32\u0e22\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e2f: ${department}\n \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d: ${contact}\n \n \u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07: ${destination}\n \u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c: ${purpose}\n \n \u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07: ${car}\n \n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19: ${formattedStart} \u0e19.\n \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19: ${formattedEnd} \u0e19.\n `;\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e2a\u0e23\u0e38\u0e1b\n document.getElementById('summary-details').innerText = summaryText;\n document.getElementById('booking-summary').style.display = 'block';\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25 (mailto)\n \/\/ **\u0e2a\u0e33\u0e04\u0e31\u0e0d:** \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 admin.mps@example.com \u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e08\u0e23\u0e34\u0e07\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a\n const adminEmail = 'admin.mps@example.com'; \n const emailSubject = `[\u0e02\u0e2d\u0e08\u0e2d\u0e07\u0e23\u0e16] ${name} - ${car}`;\n const emailBody = `\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e32\u0e19\u0e1e\u0e32\u0e2b\u0e19\u0e30\\n\\n\u0e02\u0e49\u0e32\u0e1e\u0e40\u0e08\u0e49\u0e32 ${name} \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e02\u0e2d\u0e43\u0e0a\u0e49\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e14\u0e22\u0e21\u0e35\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49:\\n\\n${summaryText}\\n\\n\u0e08\u0e36\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e1b\u0e23\u0e14\u0e1e\u0e34\u0e08\u0e32\u0e23\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\\n\u0e02\u0e2d\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e19\u0e31\u0e1a\u0e16\u0e37\u0e2d\\n${name}`;\n \n const mailtoLink = `mailto:${adminEmail}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;\n \n document.getElementById('confirmation-link').href = mailtoLink;\n\n \/\/ \u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e23\u0e38\u0e1b\n document.getElementById('booking-summary').scrollIntoView({ behavior: 'smooth' });\n });\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e21\u0e48\u0e2a\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e22\u0e19\u0e15 […]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5105","post","type-post","status-publish","format-standard","hentry","category-announce"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/posts\/5105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/comments?post=5105"}],"version-history":[{"count":0,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/posts\/5105\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/media?parent=5105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/categories?post=5105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maesai.ac.th\/web\/wp-json\/wp\/v2\/tags?post=5105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}