\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 - \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e32\u0e07\u0e25\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n\r\n <style>\r\n :root {\r\n --primary-color: #0148B0; --secondary-color: #C850C0; --tertiary-color: #FFCC70;\r\n --pending-bg: #0148B0; --received-bg: #0148B0; --completed-bg: #0148B0;\r\n --text-color: #ffffff; --dark-text-color: #333;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body {\r\n font-family: 'Prompt', sans-serif; background-color: var(--primary-color);\r\n background-image: linear-gradient(43deg, var(--primary-color) 0%, var(--secondary-color) 46%, var(--tertiary-color) 100%);\r\n background-attachment: fixed; color: var(--text-color); line-height: 1.6; padding: 20px; min-height: 100vh;\r\n }\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px); border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);\r\n padding: 30px;\r\n }\r\n .container { max-width: 1400px; margin: 0 auto; }\r\n header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; margin-bottom: 25px; flex-wrap: wrap; }\r\n .header-left { display: flex; align-items: center; }\r\n .logo { width: 70px; height: 70px; margin-right: 20px; }\r\n .header-title h1 { font-size: 1.8rem; font-weight: 600; margin: 0; }\r\n .header-title p { font-size: 1rem; opacity: 0.9; }\r\n .header-right { text-align: right; }\r\n .user-status { font-size: 0.9rem; margin-bottom: 5px; }\r\n .admin-login-btn, .logout-btn {\r\n background-color: var(--secondary-color); color: white; border: none;\r\n padding: 8px 15px; border-radius: 10px; cursor: pointer;\r\n font-family: 'Prompt', sans-serif; transition: background-color 0.3s;\r\n }\r\n .admin-login-btn:hover, .logout-btn:hover { background-color: #0148B0; }\r\n .logout-btn { background-color: #0148B0; display: none; margin-left: 10px; }\r\n #datetime { font-size: 0.8rem; opacity: 0.8; margin-top: 5px; }\r\n main { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }\r\n #complaint-form h2, #complaint-list h2 { margin-bottom: 20px; font-weight: 500; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 10px; }\r\n .form-group { margin-bottom: 15px; }\r\n .form-group label { display: block; margin-bottom: 5px; font-weight: 500; }\r\n .form-control {\r\n width: 100%; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 10px; background-color: rgba(255, 255, 255, 0.2);\r\n color: white; font-family: 'Prompt', sans-serif; font-size: 1rem;\r\n }\r\n .form-control::placeholder { color: rgba(255, 255, 255, 0.7); }\r\n .form-control:focus { outline: none; border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }\r\n textarea.form-control { resize: vertical; min-height: 120px; }\r\n .file-upload-wrapper {\r\n position: relative; overflow: hidden; display: inline-block; width: 100%;\r\n border: 2px dashed rgba(255, 255, 255, 0.5); border-radius: 10px;\r\n padding: 20px; text-align: center; cursor: pointer;\r\n }\r\n .file-upload-wrapper:hover { border-color: white; }\r\n .file-upload-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }\r\n #file-preview { margin-top: 10px; font-size: 0.9rem; }\r\n .submit-btn {\r\n width: 100%; padding: 15px; border-radius: 10px; border: none;\r\n background-image: linear-gradient(to right, var(--secondary-color), #e767b4);\r\n color: white; font-family: 'Prompt', sans-serif; font-size: 1.1rem;\r\n font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\r\n .submit-btn:disabled { background-image: none; background-color: #0148B0; cursor: not-allowed; transform: none; }\r\n .privacy-policy-check { margin-top: 20px; font-size: 0.9rem; }\r\n .privacy-policy-check label { display: flex; align-items: center; }\r\n .privacy-policy-check input { margin-right: 10px; }\r\n .privacy-details { font-size: 0.8rem; opacity: 0.8; margin-top: 10px; padding-left: 25px; }\r\n #complaint-list-container { max-height: 700px; overflow-y: auto; padding-right: 10px; }\r\n #complaint-list-container::-webkit-scrollbar { width: 8px; }\r\n #complaint-list-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 10px; }\r\n #complaint-list-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 10px; }\r\n #complaint-list-container::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6); }\r\n .complaint-card { position: relative; background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; margin-bottom: 15px; border: 1px solid rgba(255, 255, 255, 0.15); transition: transform 0.3s; }\r\n .complaint-card:hover { transform: scale(1.02); }\r\n .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }\r\n .card-header h3 { font-size: 1.2rem; font-weight: 500; color: var(--text-color); margin-right: 10px; }\r\n .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; color: var(--dark-text-color); flex-shrink: 0; }\r\n .status-pending { background-color: var(--pending-bg); }\r\n .status-received { background-color: var(--received-bg); color: white;}\r\n .card-body p { margin-bottom: 8px; opacity: 0.9; }\r\n .card-body .detail-snippet { font-style: italic; opacity: 0.8; word-break: break-word; }\r\n .card-footer { margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; }\r\n .card-info { font-size: 0.85rem; opacity: 0.8; }\r\n .admin-controls { position: absolute; top: 15px; right: 20px; display: flex; align-items: center; gap: 10px; background-color: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 10px;}\r\n .status-dropdown {\r\n padding: 5px; border-radius: 5px; border: 1px solid #ccc; background-color: white;\r\n color: var(--dark-text-color); font-family: 'Prompt', sans-serif; font-size: 0.8rem;\r\n }\r\n .delete-btn { background: none; border: none; color: #0148B0; font-size: 1.2rem; cursor: pointer; padding: 0 5px; line-height: 1; transition: color 0.2s;}\r\n .delete-btn:hover { color: #dc3545; }\r\n footer {\r\n margin-top: 30px; padding: 20px; text-align: center;\r\n background: linear-gradient(45deg, rgba(65, 88, 208, 0.7), rgba(200, 80, 192, 0.7));\r\n border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n footer p { font-size: 0.9rem; }\r\n footer i { font-size: 1.5rem; margin-bottom: 10px; }\r\n @media (max-width: 992px) { main { grid-template-columns: 1fr; } #complaint-list-container { max-height: 500px; } }\r\n @media (max-width: 768px) {\r\n body { padding: 15px; }\r\n header { flex-direction: column; text-align: center; }\r\n .header-left { flex-direction: column; margin-bottom: 15px; }\r\n .header-right { text-align: center; }\r\n .admin-controls { top: 10px; right: 10px;}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"container\">\r\n <header>\r\n <div class=\"header-left\">\r\n \r\n <div class=\"header-title\">\r\n <h1>\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e32\u0e07\u0e25\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32<\/h1>\r\n <p>\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"header-right\">\r\n <div class=\"user-status\">\u0e2a\u0e16\u0e32\u0e19\u0e30: <span style=\"font-weight: bold; color: #0148B0;\">\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b<\/span><\/div>\r\n <div>\r\n <button class=\"admin-login-btn\" onclick=\"promptLogin()\">\r\n <i class=\"fas fa-user-shield\"><\/i> \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\r\n <\/button>\r\n <button class=\"logout-btn\" onclick=\"logoutAdmin()\">\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25<\/button>\r\n <\/div>\r\n <div id=\"datetime\"><\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main>\r\n <section id=\"complaint-form\" class=\"glass-card\">\r\n <h2><i class=\"fas fa-edit\"><\/i> \u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \/ \u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30<\/h2>\r\n <form id=\"form\">\r\n <div class=\"form-group\"><label for=\"topic\">\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/label><input type=\"text\" id=\"topic\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19: \u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\" required><\/div>\r\n <div class=\"form-group\"><label for=\"type\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/label><select id=\"type\" class=\"form-control\" required><option value=\"\" disabled selected>-- \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17 --<\/option><option value=\"\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\">\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b<\/option><option value=\"\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\">\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/option><option value=\"\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\">\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22<\/option><option value=\"\u0e04\u0e33\u0e0a\u0e21\u0e40\u0e0a\u0e22\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e17\u0e31\u0e1a\u0e43\u0e08\">\u0e04\u0e33\u0e0a\u0e21\u0e40\u0e0a\u0e22\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e17\u0e31\u0e1a\u0e43\u0e08<\/option><option value=\"\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\">\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/option><option value=\"\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\">\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19<\/option><option value=\"\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e23\u0e48\u0e07\u0e14\u0e48\u0e27\u0e19\/\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e1e\u0e34\u0e40\u0e28\u0e29\">\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e23\u0e48\u0e07\u0e14\u0e48\u0e27\u0e19\/\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e1e\u0e34\u0e40\u0e28\u0e29<\/option><option value=\"\u0e2d\u0e37\u0e48\u0e19 \u0e46\">\u0e2d\u0e37\u0e48\u0e19 \u0e46<\/option><\/select><\/div>\r\n <div class=\"form-group\"><label for=\"details\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/label><textarea id=\"details\" class=\"form-control\" placeholder=\"\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e2d\u0e07\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30...\" required><\/textarea><\/div>\r\n <div class=\"form-group\"><label for=\"fullname\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25\u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07<\/label><input type=\"text\" id=\"fullname\" class=\"form-control\" placeholder=\"\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e01\u0e25\u0e31\u0e1a (\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e01\u0e47\u0e1a\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e27\u0e32\u0e21\u0e25\u0e31\u0e1a)\" required><\/div>\r\n <div class=\"form-group\"><label for=\"phone\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23<\/label><input type=\"tel\" id=\"phone\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 0812345678\" required><\/div>\r\n <div class=\"form-group\"><label for=\"email\">\u0e2d\u0e35\u0e40\u0e21\u0e25<\/label><input type=\"email\" id=\"email\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 example@email.com\" required><\/div>\r\n <div class=\"form-group\"><label>\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e41\u0e19\u0e1a (JPG, PNG, PDF \u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5MB)<\/label><div class=\"file-upload-wrapper\"><span><i class=\"fas fa-cloud-upload-alt\"><\/i> \u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c<\/span><input type=\"file\" id=\"file\" accept=\".jpg, .jpeg, .png, .pdf\"><\/div><div id=\"file-preview\"><\/div><\/div>\r\n <div class=\"privacy-policy-check\"><label><input type=\"checkbox\" id=\"privacy-check\" required>\u0e02\u0e49\u0e32\u0e1e\u0e40\u0e08\u0e49\u0e32\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27<\/label><div class=\"privacy-details\"><ul><li>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e08\u0e30\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e01\u0e25\u0e31\u0e1a\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/li><li>\u0e02\u0e49\u0e2d\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e42\u0e14\u0e22\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/li><li>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e01\u0e47\u0e1a\u0e44\u0e27\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32 1 \u0e1b\u0e35 \u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19<\/li><\/ul><\/div><\/div>\r\n <button type=\"submit\" class=\"submit-btn\" id=\"submit-button\">\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/button>\r\n <\/form>\r\n <\/section>\r\n \r\n <section id=\"complaint-list\" class=\"glass-card\">\r\n <h2><i class=\"fas fa-list-alt\"><\/i> \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14<\/h2>\r\n <div id=\"complaint-list-container\"><\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <footer>\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <p>\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e32\u0e07\u0e25\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e17\u0e35\u0e48\u0e08\u0e30\u0e04\u0e38\u0e49\u0e21\u0e04\u0e23\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\u0e15\u0e32\u0e21\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e1a\u0e31\u0e0d\u0e0d\u0e31\u0e15\u0e34\u0e04\u0e38\u0e49\u0e21\u0e04\u0e23\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25 (PDPA)<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ --- Elements ---\r\n const form = document.getElementById('form');\r\n const fileInput = document.getElementById('file');\r\n const filePreview = document.getElementById('file-preview');\r\n const submitButton = document.getElementById('submit-button');\r\n const complaintListContainer = document.getElementById('complaint-list-container');\r\n const datetimeElement = document.getElementById('datetime');\r\n const userStatusSpan = document.querySelector('.user-status span');\r\n const adminLoginBtn = document.querySelector('.admin-login-btn');\r\n const logoutBtn = document.querySelector('.logout-btn');\r\n\r\n \/\/ --- State ---\r\n let fileData = { base64: null, name: null, type: null };\r\n let isAdminLoggedIn = false;\r\n \r\n \/\/ --- Functions ---\r\n function updateDateTime() {\r\n const now = new Date();\r\n const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };\r\n datetimeElement.textContent = `\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48: ${now.toLocaleDateString('th-TH', options)}`;\r\n }\r\n\r\n fileInput.addEventListener('change', function() {\r\n const file = this.files[0];\r\n if (!file) { resetFileData(); return; }\r\n if (file.size > 5 * 1024 * 1024) {\r\n Swal.fire('\u0e02\u0e19\u0e32\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e2b\u0e0d\u0e48\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b', '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5MB', 'error');\r\n resetFileData(); return;\r\n }\r\n const allowedTypes = ['image\/jpeg', 'image\/png', 'application\/pdf'];\r\n if (!allowedTypes.includes(file.type)) {\r\n Swal.fire('\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e44\u0e1f\u0e25\u0e4c\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07', '\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e44\u0e1f\u0e25\u0e4c JPG, PNG, \u0e41\u0e25\u0e30 PDF \u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19', 'error');\r\n resetFileData(); return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n fileData = { base64: e.target.result, name: file.name, type: file.type };\r\n filePreview.innerHTML = `<i class=\"fas fa-file-alt\"><\/i> <strong>${file.name}<\/strong> (${(file.size \/ 1024 \/ 1024).toFixed(2)} MB)`;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n\r\n function resetFileData() {\r\n fileInput.value = '';\r\n fileData = { base64: null, name: null, type: null };\r\n filePreview.innerHTML = '';\r\n }\r\n\r\n function renderComplaints(complaints) {\r\n complaintListContainer.innerHTML = '';\r\n if (!complaints || complaints.length === 0) {\r\n complaintListContainer.innerHTML = '<p style=\"text-align:center; opacity:0.8;\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>';\r\n return;\r\n }\r\n\r\n complaints.forEach(c => {\r\n const statusClass = c.Status === '\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23' ? 'status-pending' : 'status-received';\r\n const statusOptions = ['\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23', '\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e25\u0e49\u0e27']\r\n .map(status => `<option value=\"${status}\" ${c.Status === status ? 'selected' : ''}>${status}<\/option>`).join('');\r\n\r\n const adminControls = isAdminLoggedIn ? `\r\n <div class=\"admin-controls\">\r\n <select class=\"status-dropdown\" onchange=\"confirmUpdateStatus(this, '${c.CaseID}')\" data-original-status=\"${c.Status}\">\r\n ${statusOptions}\r\n <\/select>\r\n <button class=\"delete-btn\" title=\"\u0e25\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e35\u0e49\" onclick=\"confirmDelete('${c.CaseID}')\">×<\/button>\r\n <\/div>` : '';\r\n\r\n const card = `\r\n <div class=\"complaint-card\">\r\n ${adminControls}\r\n <div class=\"card-header\">\r\n <h3>${c.Topic}<\/h3>\r\n <span class=\"status-badge ${statusClass}\">${c.Status}<\/span>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p><strong>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17:<\/strong> ${c.Type}<\/p>\r\n \r\n <p class=\"detail-snippet\">\"<i>${c.Details.substring(0, 100)}...<\/i>\"<\/p>\r\n \r\n <div class=\"card-footer\">\r\n <div class=\"card-info\">\r\n <span><strong>\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48:<\/strong> ${c.CaseID}<\/span> | <span><strong>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48:<\/strong> ${c.Timestamp}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n complaintListContainer.innerHTML += card;\r\n });\r\n }\r\n\r\n function loadInitialData() {\r\n complaintListContainer.innerHTML = '<p style=\"text-align:center; opacity:0.8;\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19...<\/p>';\r\n google.script.run\r\n .withSuccessHandler(renderComplaints)\r\n .withFailureHandler(err => Swal.fire('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49: ' + err, 'error'))\r\n .getComplaints();\r\n }\r\n \r\n window.promptLogin = async () => {\r\n const { value: password } = await Swal.fire({\r\n title: '\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25',\r\n input: 'password',\r\n inputPlaceholder: '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19',\r\n inputAttributes: { autocapitalize: 'off', autocorrect: 'off' },\r\n showCancelButton: true,\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a',\r\n cancelButtonText: '\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01',\r\n });\r\n\r\n if (password) {\r\n google.script.run.withSuccessHandler(response => {\r\n if (response.loggedIn) {\r\n isAdminLoggedIn = true;\r\n updateAdminUI();\r\n Swal.fire('\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', '\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22', 'success');\r\n } else {\r\n Swal.fire('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!', '\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07', 'error');\r\n }\r\n }).checkAdminLogin(password);\r\n }\r\n }\r\n\r\n window.logoutAdmin = () => {\r\n isAdminLoggedIn = false;\r\n updateAdminUI();\r\n Swal.fire('\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a', '\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e41\u0e25\u0e49\u0e27', 'info');\r\n }\r\n \r\n function updateAdminUI(){\r\n userStatusSpan.textContent = isAdminLoggedIn ? '\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a' : '\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b';\r\n userStatusSpan.style.color = isAdminLoggedIn ? '#0148B0' : '#0148B0';\r\n adminLoginBtn.style.display = isAdminLoggedIn ? 'none' : 'inline-block';\r\n logoutBtn.style.display = isAdminLoggedIn ? 'inline-block' : 'none';\r\n loadInitialData();\r\n }\r\n\r\n window.confirmUpdateStatus = (selectElement, caseId) => {\r\n const newStatus = selectElement.value;\r\n const originalStatus = selectElement.dataset.originalStatus;\r\n\r\n Swal.fire({\r\n title: '\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30',\r\n text: `\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 \"${caseId}\" \u0e40\u0e1b\u0e47\u0e19 \"${newStatus}\" \u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: '\u0e43\u0e0a\u0e48, \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e25\u0e22!',\r\n cancelButtonText: '\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n google.script.run.withSuccessHandler(response => {\r\n if (response.success) {\r\n Swal.fire('\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', '\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22', 'success');\r\n loadInitialData();\r\n } else {\r\n Swal.fire('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!', response.message, 'error');\r\n selectElement.value = originalStatus;\r\n }\r\n }).updateComplaintStatusInSheet(caseId, newStatus);\r\n } else {\r\n selectElement.value = originalStatus;\r\n }\r\n });\r\n }\r\n\r\n window.confirmDelete = (caseId) => {\r\n Swal.fire({\r\n title: '\u0e04\u0e38\u0e13\u0e41\u0e19\u0e48\u0e43\u0e08\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?',\r\n text: `\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \"${caseId}\" \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e16\u0e32\u0e27\u0e23!`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#d33',\r\n cancelButtonColor: '#0148B0',\r\n confirmButtonText: '\u0e43\u0e0a\u0e48, \u0e25\u0e1a\u0e40\u0e25\u0e22!',\r\n cancelButtonText: '\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n google.script.run.withSuccessHandler(response => {\r\n if (response.success) {\r\n Swal.fire('\u0e25\u0e1a\u0e41\u0e25\u0e49\u0e27!', '\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e44\u0e1b\u0e41\u0e25\u0e49\u0e27', 'success');\r\n loadInitialData();\r\n } else {\r\n Swal.fire('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!', response.message, 'error');\r\n }\r\n }).deleteComplaintFromSheet(caseId);\r\n }\r\n });\r\n }\r\n \r\n form.addEventListener('submit', function(event) {\r\n event.preventDefault();\r\n submitButton.disabled = true;\r\n submitButton.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> \u0e01\u0e33\u0e25\u0e31\u0e07\u0e2a\u0e48\u0e07...';\r\n\r\n const formData = {\r\n topic: document.getElementById('topic').value, type: document.getElementById('type').value,\r\n details: document.getElementById('details').value, fullname: document.getElementById('fullname').value,\r\n phone: document.getElementById('phone').value, email: document.getElementById('email').value,\r\n fileData: fileData.base64, fileName: fileData.name\r\n };\r\n\r\n google.script.run.withSuccessHandler(onFormSubmitSuccess).withFailureHandler(onFormSubmitFailure).processForm(formData);\r\n });\r\n \r\n function onFormSubmitSuccess(response) {\r\n resetSubmitButton();\r\n if(response.success){\r\n Swal.fire('\u0e2a\u0e48\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', `\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e16\u0e39\u0e01\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27 \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07: ${response.caseId}`, 'success');\r\n form.reset();\r\n resetFileData();\r\n loadInitialData();\r\n } else {\r\n Swal.fire('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', response.message, 'error');\r\n }\r\n }\r\n function onFormSubmitFailure(error) {\r\n resetSubmitButton();\r\n Swal.fire('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e23\u0e49\u0e32\u0e22\u0e41\u0e23\u0e07', error.toString(), 'error');\r\n }\r\n function resetSubmitButton(){\r\n submitButton.disabled = false;\r\n submitButton.innerHTML = '\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19';\r\n }\r\n\r\n \/\/ --- Initial Load ---\r\n updateDateTime();\r\n setInterval(updateDateTime, 1000);\r\n loadInitialData();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","footnotes":""},"class_list":["post-1487","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1487"}],"version-history":[{"count":28,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1487\/revisions"}],"predecessor-version":[{"id":1523,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1487\/revisions\/1523"}],"wp:attachment":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 - \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e32\u0e07\u0e25\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n\r\n <style>\r\n :root {\r\n --primary-color: #0148B0; --secondary-color: #C850C0; --tertiary-color: #FFCC70;\r\n --pending-bg: #0148B0; --received-bg: #0148B0; --completed-bg: #0148B0;\r\n --text-color: #ffffff; --dark-text-color: #333;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body {\r\n font-family: 'Prompt', sans-serif; background-color: var(--primary-color);\r\n background-image: linear-gradient(43deg, var(--primary-color) 0%, var(--secondary-color) 46%, var(--tertiary-color) 100%);\r\n background-attachment: fixed; color: var(--text-color); line-height: 1.6; padding: 20px; min-height: 100vh;\r\n }\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px); border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);\r\n padding: 30px;\r\n }\r\n .container { max-width: 1400px; margin: 0 auto; }\r\n header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; margin-bottom: 25px; flex-wrap: wrap; }\r\n .header-left { display: flex; align-items: center; }\r\n .logo { width: 70px; height: 70px; margin-right: 20px; }\r\n .header-title h1 { font-size: 1.8rem; font-weight: 600; margin: 0; }\r\n .header-title p { font-size: 1rem; opacity: 0.9; }\r\n .header-right { text-align: right; }\r\n .user-status { font-size: 0.9rem; margin-bottom: 5px; }\r\n .admin-login-btn, .logout-btn {\r\n background-color: var(--secondary-color); color: white; border: none;\r\n padding: 8px 15px; border-radius: 10px; cursor: pointer;\r\n font-family: 'Prompt', sans-serif; transition: background-color 0.3s;\r\n }\r\n .admin-login-btn:hover, .logout-btn:hover { background-color: #0148B0; }\r\n .logout-btn { background-color: #0148B0; display: none; margin-left: 10px; }\r\n #datetime { font-size: 0.8rem; opacity: 0.8; margin-top: 5px; }\r\n main { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }\r\n #complaint-form h2, #complaint-list h2 { margin-bottom: 20px; font-weight: 500; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 10px; }\r\n .form-group { margin-bottom: 15px; }\r\n .form-group label { display: block; margin-bottom: 5px; font-weight: 500; }\r\n .form-control {\r\n width: 100%; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 10px; background-color: rgba(255, 255, 255, 0.2);\r\n color: white; font-family: 'Prompt', sans-serif; font-size: 1rem;\r\n }\r\n .form-control::placeholder { color: rgba(255, 255, 255, 0.7); }\r\n .form-control:focus { outline: none; border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }\r\n textarea.form-control { resize: vertical; min-height: 120px; }\r\n .file-upload-wrapper {\r\n position: relative; overflow: hidden; display: inline-block; width: 100%;\r\n border: 2px dashed rgba(255, 255, 255, 0.5); border-radius: 10px;\r\n padding: 20px; text-align: center; cursor: pointer;\r\n }\r\n .file-upload-wrapper:hover { border-color: white; }\r\n .file-upload-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }\r\n #file-preview { margin-top: 10px; font-size: 0.9rem; }\r\n .submit-btn {\r\n width: 100%; padding: 15px; border-radius: 10px; border: none;\r\n background-image: linear-gradient(to right, var(--secondary-color), #e767b4);\r\n color: white; font-family: 'Prompt', sans-serif; font-size: 1.1rem;\r\n font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\r\n .submit-btn:disabled { background-image: none; background-color: #0148B0; cursor: not-allowed; transform: none; }\r\n .privacy-policy-check { margin-top: 20px; font-size: 0.9rem; }\r\n .privacy-policy-check label { display: flex; align-items: center; }\r\n .privacy-policy-check input { margin-right: 10px; }\r\n .privacy-details { font-size: 0.8rem; opacity: 0.8; margin-top: 10px; padding-left: 25px; }\r\n #complaint-list-container { max-height: 700px; overflow-y: auto; padding-right: 10px; }\r\n #complaint-list-container::-webkit-scrollbar { width: 8px; }\r\n #complaint-list-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 10px; }\r\n #complaint-list-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 10px; }\r\n #complaint-list-container::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6); }\r\n .complaint-card { position: relative; background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; margin-bottom: 15px; border: 1px solid rgba(255, 255, 255, 0.15); transition: transform 0.3s; }\r\n .complaint-card:hover { transform: scale(1.02); }\r\n .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }\r\n .card-header h3 { font-size: 1.2rem; font-weight: 500; color: var(--text-color); margin-right: 10px; }\r\n .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; color: var(--dark-text-color); flex-shrink: 0; }\r\n .status-pending { background-color: var(--pending-bg); }\r\n .status-received { background-color: var(--received-bg); color: white;}\r\n .card-body p { margin-bottom: 8px; opacity: 0.9; }\r\n .card-body .detail-snippet { font-style: italic; opacity: 0.8; word-break: break-word; }\r\n .card-footer { margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; }\r\n .card-info { font-size: 0.85rem; opacity: 0.8; }\r\n .admin-controls { position: absolute; top: 15px; right: 20px; display: flex; align-items: center; gap: 10px; background-color: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 10px;}\r\n .status-dropdown {\r\n padding: 5px; border-radius: 5px; border: 1px solid #ccc; background-color: white;\r\n color: var(--dark-text-color); font-family: 'Prompt', sans-serif; font-size: 0.8rem;\r\n }\r\n .delete-btn { background: none; border: none; color: #0148B0; font-size: 1.2rem; cursor: pointer; padding: 0 5px; line-height: 1; transition: color 0.2s;}\r\n .delete-btn:hover { color: #dc3545; }\r\n footer {\r\n margin-top: 30px; padding: 20px; text-align: center;\r\n background: linear-gradient(45deg, rgba(65, 88, 208, 0.7), rgba(200, 80, 192, 0.7));\r\n border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n footer p { font-size: 0.9rem; }\r\n footer i { font-size: 1.5rem; margin-bottom: 10px; }\r\n @media (max-width: 992px) { main { grid-template-columns: 1fr; } #complaint-list-container { max-height: 500px; } }\r\n @media (max-width: 768px) {\r\n body { padding: 15px; }\r\n header { flex-direction: column; text-align: center; }\r\n .header-left { flex-direction: column; margin-bottom: 15px; }\r\n .header-right { text-align: center; }\r\n .admin-controls { top: 10px; right: 10px;}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"container\">\r\n <header>\r\n <div class=\"header-left\">\r\n \r\n <div class=\"header-title\">\r\n <h1>\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e32\u0e07\u0e25\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32<\/h1>\r\n <p>\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"header-right\">\r\n <div class=\"user-status\">\u0e2a\u0e16\u0e32\u0e19\u0e30: <span style=\"font-weight: bold; color: #0148B0;\">\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b<\/span><\/div>\r\n <div>\r\n <button class=\"admin-login-btn\" onclick=\"promptLogin()\">\r\n <i class=\"fas fa-user-shield\"><\/i> \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\r\n <\/button>\r\n <button class=\"logout-btn\" onclick=\"logoutAdmin()\">\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25<\/button>\r\n <\/div>\r\n <div id=\"datetime\"><\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main>\r\n <section id=\"complaint-form\" class=\"glass-card\">\r\n <h2><i class=\"fas fa-edit\"><\/i> \u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \/ \u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30<\/h2>\r\n <form id=\"form\">\r\n <div class=\"form-group\"><label for=\"topic\">\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/label><input type=\"text\" id=\"topic\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19: \u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\" required><\/div>\r\n <div class=\"form-group\"><label for=\"type\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/label><select id=\"type\" class=\"form-control\" required><option value=\"\" disabled selected>-- \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17 --<\/option><option value=\"\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\">\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b<\/option><option value=\"\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\">\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/option><option value=\"\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\">\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22<\/option><option value=\"\u0e04\u0e33\u0e0a\u0e21\u0e40\u0e0a\u0e22\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e17\u0e31\u0e1a\u0e43\u0e08\">\u0e04\u0e33\u0e0a\u0e21\u0e40\u0e0a\u0e22\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e17\u0e31\u0e1a\u0e43\u0e08<\/option><option value=\"\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\">\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/option><option value=\"\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\">\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19<\/option><option value=\"\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e23\u0e48\u0e07\u0e14\u0e48\u0e27\u0e19\/\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e1e\u0e34\u0e40\u0e28\u0e29\">\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e23\u0e48\u0e07\u0e14\u0e48\u0e27\u0e19\/\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e1e\u0e34\u0e40\u0e28\u0e29<\/option><option value=\"\u0e2d\u0e37\u0e48\u0e19 \u0e46\">\u0e2d\u0e37\u0e48\u0e19 \u0e46<\/option><\/select><\/div>\r\n <div class=\"form-group\"><label for=\"details\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/label><textarea id=\"details\" class=\"form-control\" placeholder=\"\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e2d\u0e07\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30...\" required><\/textarea><\/div>\r\n <div class=\"form-group\"><label for=\"fullname\">\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25\u0e1c\u0e39\u0e49\u0e41\u0e08\u0e49\u0e07<\/label><input type=\"text\" id=\"fullname\" class=\"form-control\" placeholder=\"\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e01\u0e25\u0e31\u0e1a (\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e01\u0e47\u0e1a\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e27\u0e32\u0e21\u0e25\u0e31\u0e1a)\" required><\/div>\r\n <div class=\"form-group\"><label for=\"phone\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23<\/label><input type=\"tel\" id=\"phone\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 0812345678\" required><\/div>\r\n <div class=\"form-group\"><label for=\"email\">\u0e2d\u0e35\u0e40\u0e21\u0e25<\/label><input type=\"email\" id=\"email\" class=\"form-control\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 example@email.com\" required><\/div>\r\n <div class=\"form-group\"><label>\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e41\u0e19\u0e1a (JPG, PNG, PDF \u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5MB)<\/label><div class=\"file-upload-wrapper\"><span><i class=\"fas fa-cloud-upload-alt\"><\/i> \u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c<\/span><input type=\"file\" id=\"file\" accept=\".jpg, .jpeg, .png, .pdf\"><\/div><div id=\"file-preview\"><\/div><\/div>\r\n <div class=\"privacy-policy-check\"><label><input type=\"checkbox\" id=\"privacy-check\" required>\u0e02\u0e49\u0e32\u0e1e\u0e40\u0e08\u0e49\u0e32\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27<\/label><div class=\"privacy-details\"><ul><li>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e08\u0e30\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e01\u0e25\u0e31\u0e1a\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/li><li>\u0e02\u0e49\u0e2d\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e42\u0e14\u0e22\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/li><li>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e01\u0e47\u0e1a\u0e44\u0e27\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32 1 \u0e1b\u0e35 \u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19<\/li><\/ul><\/div><\/div>\r\n <button type=\"submit\" class=\"submit-btn\" id=\"submit-button\">\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/button>\r\n <\/form>\r\n <\/section>\r\n \r\n <section id=\"complaint-list\" class=\"glass-card\">\r\n <h2><i class=\"fas fa-list-alt\"><\/i> \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14<\/h2>\r\n <div id=\"complaint-list-container\"><\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <footer>\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <p>\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e32\u0e07\u0e25\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e17\u0e35\u0e48\u0e08\u0e30\u0e04\u0e38\u0e49\u0e21\u0e04\u0e23\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\u0e15\u0e32\u0e21\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e1a\u0e31\u0e0d\u0e0d\u0e31\u0e15\u0e34\u0e04\u0e38\u0e49\u0e21\u0e04\u0e23\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25 (PDPA)<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ --- Elements ---\r\n const form = document.getElementById('form');\r\n const fileInput = document.getElementById('file');\r\n const filePreview = document.getElementById('file-preview');\r\n const submitButton = document.getElementById('submit-button');\r\n const complaintListContainer = document.getElementById('complaint-list-container');\r\n const datetimeElement = document.getElementById('datetime');\r\n const userStatusSpan = document.querySelector('.user-status span');\r\n const adminLoginBtn = document.querySelector('.admin-login-btn');\r\n const logoutBtn = document.querySelector('.logout-btn');\r\n\r\n \/\/ --- State ---\r\n let fileData = { base64: null, name: null, type: null };\r\n let isAdminLoggedIn = false;\r\n \r\n \/\/ --- Functions ---\r\n function updateDateTime() {\r\n const now = new Date();\r\n const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };\r\n datetimeElement.textContent = `\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48: ${now.toLocaleDateString('th-TH', options)}`;\r\n }\r\n\r\n fileInput.addEventListener('change', function() {\r\n const file = this.files[0];\r\n if (!file) { resetFileData(); return; }\r\n if (file.size > 5 * 1024 * 1024) {\r\n Swal.fire('\u0e02\u0e19\u0e32\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e2b\u0e0d\u0e48\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b', '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5MB', 'error');\r\n resetFileData(); return;\r\n }\r\n const allowedTypes = ['image\/jpeg', 'image\/png', 'application\/pdf'];\r\n if (!allowedTypes.includes(file.type)) {\r\n Swal.fire('\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e44\u0e1f\u0e25\u0e4c\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07', '\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e44\u0e1f\u0e25\u0e4c JPG, PNG, \u0e41\u0e25\u0e30 PDF \u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19', 'error');\r\n resetFileData(); return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n fileData = { base64: e.target.result, name: file.name, type: file.type };\r\n filePreview.innerHTML = `<i class=\"fas fa-file-alt\"><\/i> <strong>${file.name}<\/strong> (${(file.size \/ 1024 \/ 1024).toFixed(2)} MB)`;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n\r\n function resetFileData() {\r\n fileInput.value = '';\r\n fileData = { base64: null, name: null, type: null };\r\n filePreview.innerHTML = '';\r\n }\r\n\r\n function renderComplaints(complaints) {\r\n complaintListContainer.innerHTML = '';\r\n if (!complaints || complaints.length === 0) {\r\n complaintListContainer.innerHTML = '<p style=\"text-align:center; opacity:0.8;\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>';\r\n return;\r\n }\r\n\r\n complaints.forEach(c => {\r\n const statusClass = c.Status === '\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23' ? 'status-pending' : 'status-received';\r\n const statusOptions = ['\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23', '\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e25\u0e49\u0e27']\r\n .map(status => `<option value=\"${status}\" ${c.Status === status ? 'selected' : ''}>${status}<\/option>`).join('');\r\n\r\n const adminControls = isAdminLoggedIn ? `\r\n <div class=\"admin-controls\">\r\n <select class=\"status-dropdown\" onchange=\"confirmUpdateStatus(this, '${c.CaseID}')\" data-original-status=\"${c.Status}\">\r\n ${statusOptions}\r\n <\/select>\r\n <button class=\"delete-btn\" title=\"\u0e25\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e35\u0e49\" onclick=\"confirmDelete('${c.CaseID}')\">×<\/button>\r\n <\/div>` : '';\r\n\r\n const card = `\r\n <div class=\"complaint-card\">\r\n ${adminControls}\r\n <div class=\"card-header\">\r\n <h3>${c.Topic}<\/h3>\r\n <span class=\"status-badge ${statusClass}\">${c.Status}<\/span>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p><strong>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17:<\/strong> ${c.Type}<\/p>\r\n \r\n <p class=\"detail-snippet\">\"<i>${c.Details.substring(0, 100)}...<\/i>\"<\/p>\r\n \r\n <div class=\"card-footer\">\r\n <div class=\"card-info\">\r\n <span><strong>\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48:<\/strong> ${c.CaseID}<\/span> | <span><strong>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48:<\/strong> ${c.Timestamp}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n complaintListContainer.innerHTML += card;\r\n });\r\n }\r\n\r\n function loadInitialData() {\r\n complaintListContainer.innerHTML = '<p style=\"text-align:center; opacity:0.8;\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19...<\/p>';\r\n google.script.run\r\n .withSuccessHandler(renderComplaints)\r\n .withFailureHandler(err => Swal.fire('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49: ' + err, 'error'))\r\n .getComplaints();\r\n }\r\n \r\n window.promptLogin = async () => {\r\n const { value: password } = await Swal.fire({\r\n title: '\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25',\r\n input: 'password',\r\n inputPlaceholder: '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19',\r\n inputAttributes: { autocapitalize: 'off', autocorrect: 'off' },\r\n showCancelButton: true,\r\n confirmButtonText: '\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a',\r\n cancelButtonText: '\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01',\r\n });\r\n\r\n if (password) {\r\n google.script.run.withSuccessHandler(response => {\r\n if (response.loggedIn) {\r\n isAdminLoggedIn = true;\r\n updateAdminUI();\r\n Swal.fire('\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', '\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22', 'success');\r\n } else {\r\n Swal.fire('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!', '\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07', 'error');\r\n }\r\n }).checkAdminLogin(password);\r\n }\r\n }\r\n\r\n window.logoutAdmin = () => {\r\n isAdminLoggedIn = false;\r\n updateAdminUI();\r\n Swal.fire('\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a', '\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e41\u0e25\u0e49\u0e27', 'info');\r\n }\r\n \r\n function updateAdminUI(){\r\n userStatusSpan.textContent = isAdminLoggedIn ? '\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a' : '\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b';\r\n userStatusSpan.style.color = isAdminLoggedIn ? '#0148B0' : '#0148B0';\r\n adminLoginBtn.style.display = isAdminLoggedIn ? 'none' : 'inline-block';\r\n logoutBtn.style.display = isAdminLoggedIn ? 'inline-block' : 'none';\r\n loadInitialData();\r\n }\r\n\r\n window.confirmUpdateStatus = (selectElement, caseId) => {\r\n const newStatus = selectElement.value;\r\n const originalStatus = selectElement.dataset.originalStatus;\r\n\r\n Swal.fire({\r\n title: '\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30',\r\n text: `\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 \"${caseId}\" \u0e40\u0e1b\u0e47\u0e19 \"${newStatus}\" \u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: '\u0e43\u0e0a\u0e48, \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e25\u0e22!',\r\n cancelButtonText: '\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n google.script.run.withSuccessHandler(response => {\r\n if (response.success) {\r\n Swal.fire('\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', '\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22', 'success');\r\n loadInitialData();\r\n } else {\r\n Swal.fire('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!', response.message, 'error');\r\n selectElement.value = originalStatus;\r\n }\r\n }).updateComplaintStatusInSheet(caseId, newStatus);\r\n } else {\r\n selectElement.value = originalStatus;\r\n }\r\n });\r\n }\r\n\r\n window.confirmDelete = (caseId) => {\r\n Swal.fire({\r\n title: '\u0e04\u0e38\u0e13\u0e41\u0e19\u0e48\u0e43\u0e08\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?',\r\n text: `\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \"${caseId}\" \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e16\u0e32\u0e27\u0e23!`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#d33',\r\n cancelButtonColor: '#0148B0',\r\n confirmButtonText: '\u0e43\u0e0a\u0e48, \u0e25\u0e1a\u0e40\u0e25\u0e22!',\r\n cancelButtonText: '\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n google.script.run.withSuccessHandler(response => {\r\n if (response.success) {\r\n Swal.fire('\u0e25\u0e1a\u0e41\u0e25\u0e49\u0e27!', '\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e44\u0e1b\u0e41\u0e25\u0e49\u0e27', 'success');\r\n loadInitialData();\r\n } else {\r\n Swal.fire('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14!', response.message, 'error');\r\n }\r\n }).deleteComplaintFromSheet(caseId);\r\n }\r\n });\r\n }\r\n \r\n form.addEventListener('submit', function(event) {\r\n event.preventDefault();\r\n submitButton.disabled = true;\r\n submitButton.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> \u0e01\u0e33\u0e25\u0e31\u0e07\u0e2a\u0e48\u0e07...';\r\n\r\n const formData = {\r\n topic: document.getElementById('topic').value, type: document.getElementById('type').value,\r\n details: document.getElementById('details').value, fullname: document.getElementById('fullname').value,\r\n phone: document.getElementById('phone').value, email: document.getElementById('email').value,\r\n fileData: fileData.base64, fileName: fileData.name\r\n };\r\n\r\n google.script.run.withSuccessHandler(onFormSubmitSuccess).withFailureHandler(onFormSubmitFailure).processForm(formData);\r\n });\r\n \r\n function onFormSubmitSuccess(response) {\r\n resetSubmitButton();\r\n if(response.success){\r\n Swal.fire('\u0e2a\u0e48\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', `\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e16\u0e39\u0e01\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27 \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07: ${response.caseId}`, 'success');\r\n form.reset();\r\n resetFileData();\r\n loadInitialData();\r\n } else {\r\n Swal.fire('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', response.message, 'error');\r\n }\r\n }\r\n function onFormSubmitFailure(error) {\r\n resetSubmitButton();\r\n Swal.fire('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e23\u0e49\u0e32\u0e22\u0e41\u0e23\u0e07', error.toString(), 'error');\r\n }\r\n function resetSubmitButton(){\r\n submitButton.disabled = false;\r\n submitButton.innerHTML = '\u0e2a\u0e48\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19';\r\n }\r\n\r\n \/\/ --- Initial Load ---\r\n updateDateTime();\r\n setInterval(updateDateTime, 1000);\r\n loadInitialData();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","footnotes":""},"class_list":["post-1487","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1487"}],"version-history":[{"count":28,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1487\/revisions"}],"predecessor-version":[{"id":1523,"href":"https:\/\/bangli.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1487\/revisions\/1523"}],"wp:attachment":[{"href":"https:\/\/bangli.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}