\u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n \/* \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e1f\u0e2d\u0e19\u0e15\u0e4c Inter \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e19\u0e49\u0e32 *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Elementor \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e15\u0e47\u0e21\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07 *\/\n .elementor-section.elementor-section-boxed > .elementor-container {\n max-width: 100% !important; \/* Force full width for Elementor boxed sections *\/\n }\n .elementor-column-wrap {\n width: 100% !important; \/* Ensure columns take full width *\/\n }\n .elementor-widget-container {\n padding: 0 !important; \/* Remove default padding from Elementor widget container *\/\n }\n\n \/* Modal Styles *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n .modal-overlay.show {\n opacity: 1;\n visibility: visible;\n }\n .modal-content {\n background-color: white;\n padding: 2rem;\n border-radius: 0.75rem; \/* rounded-xl *\/\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); \/* shadow-lg *\/\n text-align: center;\n max-width: 90%;\n width: 400px;\n transform: translateY(-20px);\n transition: transform 0.3s ease;\n }\n .modal-overlay.show .modal-content {\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen flex flex-col items-center py-20\">\n\n \n <header class=\"text-center mb-16 w-full mx-auto p-8 bg-gradient-to-r from-red-300 to-orange-300 text-gray-800 rounded-xl shadow-lg\">\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-4 drop-shadow-md\">\n \u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e1e\u0e24\u0e15\u0e34\u0e21\u0e34\u0e0a\u0e2d\u0e1a\n <\/h1>\n <p class=\"text-lg sm:text-xl opacity-90\">\n \u0e42\u0e1b\u0e23\u0e14\u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e43\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\n <\/p>\n <\/header>\n\n \n <main class=\"w-full max-w-full px-4 sm:px-6 lg:px-8\">\n <div class=\"bg-white rounded-xl shadow-lg p-8 md:p-10 lg:p-12\">\n <form id=\"reportForm\" class=\"space-y-6\">\n\n \n <div>\n <label for=\"misconductType\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-exclamation-triangle text-orange-500 mr-2\"><\/i> \u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\/\u0e1b\u0e23\u0e30\u0e1e\u0e24\u0e15\u0e34\u0e21\u0e34\u0e0a\u0e2d\u0e1a <span class=\"text-red-500\">*<\/span>\n <\/label>\n <select id=\"misconductType\" name=\"misconductType\" required\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent text-gray-800\">\n <option value=\"\">— \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17 —<\/option>\n <option value=\"\u0e2a\u0e34\u0e19\u0e1a\u0e19\">\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e23\u0e31\u0e1a\u0e2a\u0e34\u0e19\u0e1a\u0e19<\/option>\n <option value=\"\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\/\u0e44\u0e21\u0e48\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a<\/option>\n <option value=\"\u0e2d\u0e33\u0e19\u0e32\u0e08\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08\u0e43\u0e19\u0e17\u0e32\u0e07\u0e17\u0e35\u0e48\u0e1c\u0e34\u0e14<\/option>\n <option value=\"\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27<\/option>\n <option value=\"\u0e1c\u0e25\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e17\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\">\u0e01\u0e32\u0e23\u0e02\u0e31\u0e14\u0e01\u0e31\u0e19\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e1c\u0e25\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e27\u0e21<\/option>\n <option value=\"\u0e2d\u0e37\u0e48\u0e19\u0e46\">\u0e2d\u0e37\u0e48\u0e19\u0e46<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label for=\"reportSubject\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-tag text-blue-500 mr-2\"><\/i> \u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 <span class=\"text-red-500\">*<\/span>\n <\/label>\n <input type=\"text\" id=\"reportSubject\" name=\"reportSubject\" required\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e01\u0e25\u0e32\u0e07\u0e27\u0e31\u0e19\">\n <\/div>\n\n \n <div>\n <label for=\"incidentDateTimeLocation\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-calendar-alt text-purple-500 mr-2\"><\/i> \u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32-\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48 (\u0e16\u0e49\u0e32\u0e17\u0e23\u0e32\u0e1a)\n <\/label>\n <input type=\"text\" id=\"incidentDateTimeLocation\" name=\"incidentDateTimeLocation\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e0a\u0e48\u0e19 15\/07\/2568 \u0e40\u0e27\u0e25\u0e32 10:00 \u0e19. \u0e17\u0e35\u0e48\u0e2b\u0e49\u0e2d\u0e07\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\">\n <\/div>\n\n \n <div>\n <label for=\"reportDetails\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-pencil-alt text-gray-500 mr-2\"><\/i> \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e1e\u0e24\u0e15\u0e34\u0e01\u0e32\u0e23\u0e13\u0e4c\/\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19 <span class=\"text-red-500\">*<\/span>\n <\/label>\n <textarea id=\"reportDetails\" name=\"reportDetails\" rows=\"6\" required\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e42\u0e14\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \u0e43\u0e04\u0e23\u0e17\u0e33\u0e2d\u0e30\u0e44\u0e23 \u0e17\u0e35\u0e48\u0e44\u0e2b\u0e19 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e44\u0e2b\u0e23\u0e48 \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23 \u0e41\u0e25\u0e30\u0e1c\u0e25\u0e01\u0e23\u0e30\u0e17\u0e1a\u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\"><\/textarea>\n <\/div>\n\n \n <div>\n <label for=\"accusedPerson\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-user-times text-red-500 mr-2\"><\/i> \u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\/\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e16\u0e39\u0e01\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 (\u0e16\u0e49\u0e32\u0e17\u0e23\u0e32\u0e1a)\n <\/label>\n <input type=\"text\" id=\"accusedPerson\" name=\"accusedPerson\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e19\u0e32\u0e22 \u0e01. \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e04\u0e23\u0e39, \u0e19\u0e32\u0e07 \u0e02. \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\">\n <\/div>\n\n \n <div>\n <label for=\"evidenceFile\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-paperclip text-indigo-500 mr-2\"><\/i> \u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e, \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23, \u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d – \u0e44\u0e21\u0e48\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a)\n <\/label>\n <input type=\"file\" id=\"evidenceFile\" name=\"evidenceFile\" multiple\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent text-gray-800 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100\">\n <p class=\"text-sm text-gray-500 mt-1\">\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e44\u0e1f\u0e25\u0e4c: JPG, PNG, PDF, DOC, DOCX, MP4, MP3 (\u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 10MB)<\/p>\n <\/div>\n\n \n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"anonymousReport\" name=\"anonymousReport\" class=\"h-5 w-5 text-gray-600 rounded border-gray-300 focus:ring-gray-500\">\n <label for=\"anonymousReport\" class=\"ml-2 block text-gray-700 text-lg font-semibold\">\n <i class=\"fas fa-user-secret text-gray-500 mr-2\"><\/i> \u0e41\u0e08\u0e49\u0e07\u0e41\u0e1a\u0e1a\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e15\u0e31\u0e27\u0e15\u0e19 (\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07\u0e08\u0e30\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22)\n <\/label>\n <\/div>\n\n \n <div id=\"reporterInfo\" class=\"space-y-6\">\n <div>\n <label for=\"reporterName\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-user text-green-500 mr-2\"><\/i> \u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07\n <\/label>\n <input type=\"text\" id=\"reporterName\" name=\"reporterName\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\">\n <\/div>\n <div>\n <label for=\"reporterEmail\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-envelope text-green-500 mr-2\"><\/i> \u0e2d\u0e35\u0e40\u0e21\u0e25\n <\/label>\n <input type=\"email\" id=\"reporterEmail\" name=\"reporterEmail\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\">\n <\/div>\n <div>\n <label for=\"reporterPhone\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-phone text-green-500 mr-2\"><\/i> \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\n <\/label>\n <input type=\"tel\" id=\"reporterPhone\" name=\"reporterPhone\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\">\n <\/div>\n <\/div>\n\n \n <button type=\"submit\"\n class=\"w-full bg-red-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-600 transition-colors duration-300 shadow-md hover:shadow-lg text-xl\">\n <i class=\"fas fa-paper-plane mr-2\"><\/i> \u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/button>\n <\/form>\n <\/div>\n <\/main>\n\n \n <div id=\"messageModal\" class=\"modal-overlay\">\n <div class=\"modal-content\">\n <h4 id=\"modalTitle\" class=\"text-xl font-bold text-gray-800 mb-4\"><\/h4>\n <p id=\"modalMessage\" class=\"text-gray-600 mb-6\"><\/p>\n <button id=\"closeModalBtn\" class=\"bg-purple-400 text-white font-bold py-2 px-4 rounded-lg hover:bg-purple-500 transition-colors duration-300 shadow-md\">\n \u0e15\u0e01\u0e25\u0e07\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const reportForm = document.getElementById('reportForm');\n const anonymousCheckbox = document.getElementById('anonymousReport');\n const reporterInfoDiv = document.getElementById('reporterInfo');\n const reporterNameInput = document.getElementById('reporterName');\n const reporterEmailInput = document.getElementById('reporterEmail');\n const reporterPhoneInput = document.getElementById('reporterPhone');\n\n const misconductType = document.getElementById('misconductType');\n const reportSubject = document.getElementById('reportSubject');\n const reportDetails = document.getElementById('reportDetails');\n\n const messageModal = document.getElementById('messageModal');\n const modalTitle = document.getElementById('modalTitle');\n const modalMessage = document.getElementById('modalMessage');\n const closeModalBtn = document.getElementById('closeModalBtn');\n\n \/\/ Function to show modal\n function showModal(title, message) {\n modalTitle.textContent = title;\n modalMessage.textContent = message;\n messageModal.classList.add('show');\n }\n\n \/\/ Function to hide modal\n function hideModal() {\n messageModal.classList.remove('show');\n }\n\n \/\/ Close modal event listener\n closeModalBtn.addEventListener('click', hideModal);\n messageModal.addEventListener('click', function(event) {\n if (event.target === messageModal) {\n hideModal();\n }\n });\n\n \/\/ Toggle reporter info visibility based on anonymous checkbox\n anonymousCheckbox.addEventListener('change', function() {\n if (this.checked) {\n reporterInfoDiv.style.display = 'none';\n reporterNameInput.removeAttribute('required');\n reporterEmailInput.removeAttribute('required');\n reporterPhoneInput.removeAttribute('required');\n } else {\n reporterInfoDiv.style.display = 'block';\n \/\/ You might want to make these required again if they were initially\n \/\/ For this example, we'll keep them optional even if not anonymous\n }\n });\n\n \/\/ Handle form submission\n reportForm.addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ Prevent default form submission\n\n \/\/ Basic validation\n if (!misconductType.value || !reportSubject.value || !reportDetails.value) {\n showModal('\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', '\u0e42\u0e1b\u0e23\u0e14\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19 (*) \u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19');\n return;\n }\n\n \/\/ Simulate form submission\n showModal('\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08', '\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19 \u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23');\n reportForm.reset(); \/\/ Clear the form\n reporterInfoDiv.style.display = 'block'; \/\/ Ensure reporter info is visible for next submission\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-1644","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1644"}],"collection":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yts.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1644"}],"version-history":[{"count":5,"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions"}],"predecessor-version":[{"id":2268,"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions\/2268"}],"wp:attachment":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1644,"date":"2024-08-26T09:05:09","date_gmt":"2024-08-26T02:05:09","guid":{"rendered":"https:\/\/yts.ac.th\/?page_id=1644"},"modified":"2025-07-23T13:54:13","modified_gmt":"2025-07-23T06:54:13","slug":"%e0%b8%8a%e0%b9%88%e0%b8%ad%e0%b8%87%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b9%81%e0%b8%88%e0%b9%89%e0%b8%87%e0%b9%80%e0%b8%a3%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%87%e0%b8%a3%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b9%80","status":"publish","type":"page","link":"https:\/\/yts.ac.th\/?page_id=1644","title":{"rendered":"\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e1e\u0e24\u0e15\u0e34\u0e21\u0e34\u0e0a\u0e2d\u0e1a"},"content":{"rendered":"\n\n\n \n \n \u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n \/* \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e1f\u0e2d\u0e19\u0e15\u0e4c Inter \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e19\u0e49\u0e32 *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Elementor \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e15\u0e47\u0e21\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07 *\/\n .elementor-section.elementor-section-boxed > .elementor-container {\n max-width: 100% !important; \/* Force full width for Elementor boxed sections *\/\n }\n .elementor-column-wrap {\n width: 100% !important; \/* Ensure columns take full width *\/\n }\n .elementor-widget-container {\n padding: 0 !important; \/* Remove default padding from Elementor widget container *\/\n }\n\n \/* Modal Styles *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n .modal-overlay.show {\n opacity: 1;\n visibility: visible;\n }\n .modal-content {\n background-color: white;\n padding: 2rem;\n border-radius: 0.75rem; \/* rounded-xl *\/\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); \/* shadow-lg *\/\n text-align: center;\n max-width: 90%;\n width: 400px;\n transform: translateY(-20px);\n transition: transform 0.3s ease;\n }\n .modal-overlay.show .modal-content {\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen flex flex-col items-center py-20\">\n\n \n <header class=\"text-center mb-16 w-full mx-auto p-8 bg-gradient-to-r from-red-300 to-orange-300 text-gray-800 rounded-xl shadow-lg\">\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-4 drop-shadow-md\">\n \u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e1e\u0e24\u0e15\u0e34\u0e21\u0e34\u0e0a\u0e2d\u0e1a\n <\/h1>\n <p class=\"text-lg sm:text-xl opacity-90\">\n \u0e42\u0e1b\u0e23\u0e14\u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e43\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\n <\/p>\n <\/header>\n\n \n <main class=\"w-full max-w-full px-4 sm:px-6 lg:px-8\">\n <div class=\"bg-white rounded-xl shadow-lg p-8 md:p-10 lg:p-12\">\n <form id=\"reportForm\" class=\"space-y-6\">\n\n \n <div>\n <label for=\"misconductType\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-exclamation-triangle text-orange-500 mr-2\"><\/i> \u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\/\u0e1b\u0e23\u0e30\u0e1e\u0e24\u0e15\u0e34\u0e21\u0e34\u0e0a\u0e2d\u0e1a <span class=\"text-red-500\">*<\/span>\n <\/label>\n <select id=\"misconductType\" name=\"misconductType\" required\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent text-gray-800\">\n <option value=\"\">— \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17 —<\/option>\n <option value=\"\u0e2a\u0e34\u0e19\u0e1a\u0e19\">\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e23\u0e31\u0e1a\u0e2a\u0e34\u0e19\u0e1a\u0e19<\/option>\n <option value=\"\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\/\u0e44\u0e21\u0e48\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a<\/option>\n <option value=\"\u0e2d\u0e33\u0e19\u0e32\u0e08\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08\u0e43\u0e19\u0e17\u0e32\u0e07\u0e17\u0e35\u0e48\u0e1c\u0e34\u0e14<\/option>\n <option value=\"\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27<\/option>\n <option value=\"\u0e1c\u0e25\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e17\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\">\u0e01\u0e32\u0e23\u0e02\u0e31\u0e14\u0e01\u0e31\u0e19\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e1c\u0e25\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e27\u0e21<\/option>\n <option value=\"\u0e2d\u0e37\u0e48\u0e19\u0e46\">\u0e2d\u0e37\u0e48\u0e19\u0e46<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label for=\"reportSubject\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-tag text-blue-500 mr-2\"><\/i> \u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 <span class=\"text-red-500\">*<\/span>\n <\/label>\n <input type=\"text\" id=\"reportSubject\" name=\"reportSubject\" required\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e01\u0e25\u0e32\u0e07\u0e27\u0e31\u0e19\">\n <\/div>\n\n \n <div>\n <label for=\"incidentDateTimeLocation\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-calendar-alt text-purple-500 mr-2\"><\/i> \u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32-\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48 (\u0e16\u0e49\u0e32\u0e17\u0e23\u0e32\u0e1a)\n <\/label>\n <input type=\"text\" id=\"incidentDateTimeLocation\" name=\"incidentDateTimeLocation\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e0a\u0e48\u0e19 15\/07\/2568 \u0e40\u0e27\u0e25\u0e32 10:00 \u0e19. \u0e17\u0e35\u0e48\u0e2b\u0e49\u0e2d\u0e07\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\">\n <\/div>\n\n \n <div>\n <label for=\"reportDetails\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-pencil-alt text-gray-500 mr-2\"><\/i> \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e1e\u0e24\u0e15\u0e34\u0e01\u0e32\u0e23\u0e13\u0e4c\/\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19 <span class=\"text-red-500\">*<\/span>\n <\/label>\n <textarea id=\"reportDetails\" name=\"reportDetails\" rows=\"6\" required\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e42\u0e14\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \u0e43\u0e04\u0e23\u0e17\u0e33\u0e2d\u0e30\u0e44\u0e23 \u0e17\u0e35\u0e48\u0e44\u0e2b\u0e19 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e44\u0e2b\u0e23\u0e48 \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23 \u0e41\u0e25\u0e30\u0e1c\u0e25\u0e01\u0e23\u0e30\u0e17\u0e1a\u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\"><\/textarea>\n <\/div>\n\n \n <div>\n <label for=\"accusedPerson\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-user-times text-red-500 mr-2\"><\/i> \u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\/\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e16\u0e39\u0e01\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 (\u0e16\u0e49\u0e32\u0e17\u0e23\u0e32\u0e1a)\n <\/label>\n <input type=\"text\" id=\"accusedPerson\" name=\"accusedPerson\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e19\u0e32\u0e22 \u0e01. \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e04\u0e23\u0e39, \u0e19\u0e32\u0e07 \u0e02. \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\">\n <\/div>\n\n \n <div>\n <label for=\"evidenceFile\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-paperclip text-indigo-500 mr-2\"><\/i> \u0e2b\u0e25\u0e31\u0e01\u0e10\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e, \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23, \u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d – \u0e44\u0e21\u0e48\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a)\n <\/label>\n <input type=\"file\" id=\"evidenceFile\" name=\"evidenceFile\" multiple\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent text-gray-800 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100\">\n <p class=\"text-sm text-gray-500 mt-1\">\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e44\u0e1f\u0e25\u0e4c: JPG, PNG, PDF, DOC, DOCX, MP4, MP3 (\u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 10MB)<\/p>\n <\/div>\n\n \n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"anonymousReport\" name=\"anonymousReport\" class=\"h-5 w-5 text-gray-600 rounded border-gray-300 focus:ring-gray-500\">\n <label for=\"anonymousReport\" class=\"ml-2 block text-gray-700 text-lg font-semibold\">\n <i class=\"fas fa-user-secret text-gray-500 mr-2\"><\/i> \u0e41\u0e08\u0e49\u0e07\u0e41\u0e1a\u0e1a\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e15\u0e31\u0e27\u0e15\u0e19 (\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07\u0e08\u0e30\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22)\n <\/label>\n <\/div>\n\n \n <div id=\"reporterInfo\" class=\"space-y-6\">\n <div>\n <label for=\"reporterName\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-user text-green-500 mr-2\"><\/i> \u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07\n <\/label>\n <input type=\"text\" id=\"reporterName\" name=\"reporterName\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\">\n <\/div>\n <div>\n <label for=\"reporterEmail\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-envelope text-green-500 mr-2\"><\/i> \u0e2d\u0e35\u0e40\u0e21\u0e25\n <\/label>\n <input type=\"email\" id=\"reporterEmail\" name=\"reporterEmail\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\">\n <\/div>\n <div>\n <label for=\"reporterPhone\" class=\"block text-gray-700 text-lg font-semibold mb-2\">\n <i class=\"fas fa-phone text-green-500 mr-2\"><\/i> \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\n <\/label>\n <input type=\"tel\" id=\"reporterPhone\" name=\"reporterPhone\"\n class=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent text-gray-800\"\n placeholder=\"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\">\n <\/div>\n <\/div>\n\n \n <button type=\"submit\"\n class=\"w-full bg-red-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-600 transition-colors duration-300 shadow-md hover:shadow-lg text-xl\">\n <i class=\"fas fa-paper-plane mr-2\"><\/i> \u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/button>\n <\/form>\n <\/div>\n <\/main>\n\n \n <div id=\"messageModal\" class=\"modal-overlay\">\n <div class=\"modal-content\">\n <h4 id=\"modalTitle\" class=\"text-xl font-bold text-gray-800 mb-4\"><\/h4>\n <p id=\"modalMessage\" class=\"text-gray-600 mb-6\"><\/p>\n <button id=\"closeModalBtn\" class=\"bg-purple-400 text-white font-bold py-2 px-4 rounded-lg hover:bg-purple-500 transition-colors duration-300 shadow-md\">\n \u0e15\u0e01\u0e25\u0e07\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const reportForm = document.getElementById('reportForm');\n const anonymousCheckbox = document.getElementById('anonymousReport');\n const reporterInfoDiv = document.getElementById('reporterInfo');\n const reporterNameInput = document.getElementById('reporterName');\n const reporterEmailInput = document.getElementById('reporterEmail');\n const reporterPhoneInput = document.getElementById('reporterPhone');\n\n const misconductType = document.getElementById('misconductType');\n const reportSubject = document.getElementById('reportSubject');\n const reportDetails = document.getElementById('reportDetails');\n\n const messageModal = document.getElementById('messageModal');\n const modalTitle = document.getElementById('modalTitle');\n const modalMessage = document.getElementById('modalMessage');\n const closeModalBtn = document.getElementById('closeModalBtn');\n\n \/\/ Function to show modal\n function showModal(title, message) {\n modalTitle.textContent = title;\n modalMessage.textContent = message;\n messageModal.classList.add('show');\n }\n\n \/\/ Function to hide modal\n function hideModal() {\n messageModal.classList.remove('show');\n }\n\n \/\/ Close modal event listener\n closeModalBtn.addEventListener('click', hideModal);\n messageModal.addEventListener('click', function(event) {\n if (event.target === messageModal) {\n hideModal();\n }\n });\n\n \/\/ Toggle reporter info visibility based on anonymous checkbox\n anonymousCheckbox.addEventListener('change', function() {\n if (this.checked) {\n reporterInfoDiv.style.display = 'none';\n reporterNameInput.removeAttribute('required');\n reporterEmailInput.removeAttribute('required');\n reporterPhoneInput.removeAttribute('required');\n } else {\n reporterInfoDiv.style.display = 'block';\n \/\/ You might want to make these required again if they were initially\n \/\/ For this example, we'll keep them optional even if not anonymous\n }\n });\n\n \/\/ Handle form submission\n reportForm.addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ Prevent default form submission\n\n \/\/ Basic validation\n if (!misconductType.value || !reportSubject.value || !reportDetails.value) {\n showModal('\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', '\u0e42\u0e1b\u0e23\u0e14\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19 (*) \u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19');\n return;\n }\n\n \/\/ Simulate form submission\n showModal('\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08', '\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19 \u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23');\n reportForm.reset(); \/\/ Clear the form\n reporterInfoDiv.style.display = 'block'; \/\/ Ensure reporter info is visible for next submission\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-1644","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1644"}],"collection":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yts.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1644"}],"version-history":[{"count":5,"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions"}],"predecessor-version":[{"id":2268,"href":"https:\/\/yts.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions\/2268"}],"wp:attachment":[{"href":"https:\/\/yts.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}