{"id":35263,"date":"2026-06-26T13:55:22","date_gmt":"2026-06-26T06:55:22","guid":{"rendered":"https:\/\/cim.rmutsv.ac.th\/ruts\/?page_id=35263"},"modified":"2026-06-26T13:55:22","modified_gmt":"2026-06-26T06:55:22","slug":"%e0%b8%a3%e0%b8%b0%e0%b8%9a%e0%b8%9a%e0%b8%95%e0%b8%a3%e0%b8%a7%e0%b8%88%e0%b8%aa%e0%b8%ad%e0%b8%9a","status":"publish","type":"page","link":"https:\/\/cim.rmutsv.ac.th\/ruts\/%e0%b8%a3%e0%b8%b0%e0%b8%9a%e0%b8%9a%e0%b8%95%e0%b8%a3%e0%b8%a7%e0%b8%88%e0%b8%aa%e0%b8%ad%e0%b8%9a\/","title":{"rendered":"\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a"},"content":{"rendered":"\n<script data-wp-block-html=\"js\">\n\/**\n * \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07 v2026 (List Layout & Pagination Version)\n * \u0e44\u0e1f\u0e25\u0e4c Code.gs \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e04\u0e33\u0e02\u0e2d Web App \u0e41\u0e25\u0e30\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e1a Google Sheets \u0e40\u0e1b\u0e47\u0e19\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e25\u0e31\u0e01\n *\/\n\nconst SPREADSHEET_NAME = \"AV_Audit_System_2026_DB\";\nconst SHEET_NAME = \"SystemState\";\n\n\/**\n * \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 Web App \u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2b\u0e25\u0e31\u0e01\n *\/\nfunction doGet(e) {\n  \/\/ \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e2a\u0e33\u0e23\u0e2d\u0e07\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a CSV \u0e1c\u0e48\u0e32\u0e19 URL Web App (\u0e40\u0e0a\u0e48\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e34\u0e1a\u0e44\u0e1b\u0e08\u0e31\u0e14\u0e17\u0e33\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e15\u0e48\u0e2d)\n  if (e && e.parameter && e.parameter.action === 'export') {\n    const csvString = generateCSVReport();\n    return ContentService.createTextOutput(csvString)\n        .setMimeType(ContentService.MimeType.CSV)\n        .downloadAsFile(\"AV_Equipment_Report_2026.csv\");\n  }\n\n  \/\/ \u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e21\u0e32\u0e01: \u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19 HtmlService \u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49 \u0e15\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c HTML \u0e43\u0e19\u0e41\u0e16\u0e1a\u0e0b\u0e49\u0e32\u0e22\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e17\u0e38\u0e01\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e23 (\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e2a\u0e48 .html)\n  \/\/ \u0e43\u0e19\u0e17\u0e35\u0e19\u0e35\u0e49\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e37\u0e2d 'av_system_2026'\n  try {\n    return HtmlService.createTemplateFromFile('index')\n        .evaluate()\n        .setTitle('\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 2026')\n        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)\n        .addMetaTag('viewport', 'width=device-width, initial-scale=1');\n  } catch (error) {\n    return HtmlService.createHtmlOutput(\n      \"<div style='font-family: sans-serif; padding: 25px; color: #d9534f; background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 12px; margin: 20px;'>\" +\n      \"<h3 style='margin-top: 0;'>\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e30\u0e1a\u0e1a (HTML File Missing)<\/h3>\" +\n      \"<p><b>\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14:<\/b> \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e44\u0e1f\u0e25\u0e4c HTML \u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e43\u0e14\u0e02\u0e49\u0e2d\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e14\u0e31\u0e07\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e19\u0e35\u0e49:<\/p>\" +\n      \"<ul style='line-height: 1.6;'>\" +\n      \"<li>\u0e43\u0e19\u0e41\u0e16\u0e1a\u0e0b\u0e49\u0e32\u0e22\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 Google Apps Script \u0e04\u0e38\u0e13\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c HTML \u0e41\u0e25\u0e30\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e27\u0e48\u0e32 <b>av_system_2026<\/b> \u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07? (\u0e2b\u0e32\u0e01\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e37\u0e48\u0e19 \u0e40\u0e0a\u0e48\u0e19 index \u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e35\u0e22\u0e4c\u0e43\u0e19 doGet \u0e43\u0e2b\u0e49\u0e15\u0e23\u0e07\u0e01\u0e31\u0e19)<\/li>\" +\n      \"<li>\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e15\u0e31\u0e27\u0e2a\u0e30\u0e01\u0e14 \u0e15\u0e31\u0e27\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e40\u0e25\u0e47\u0e01-\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e43\u0e2b\u0e0d\u0e48 \u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e44\u0e21\u0e48\u0e21\u0e35\u0e40\u0e27\u0e49\u0e19\u0e27\u0e23\u0e23\u0e04\u0e1b\u0e30\u0e1b\u0e19\u0e43\u0e19\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c<\/li>\" +\n      \"<\/ul>\" +\n      \"<p style='color: #777; font-size: 12px; margin-bottom: 0;'><i>\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e08\u0e23\u0e34\u0e07\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a: \" + error.message + \"<\/i><\/p>\" +\n      \"<\/div>\"\n    );\n  }\n}\n\n\/**\n * \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a CSV (UTF-8 BOM \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e19 Excel \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\u0e44\u0e21\u0e48\u0e40\u0e1e\u0e35\u0e49\u0e22\u0e19)\n * @returns {string} \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e44\u0e1f\u0e25\u0e4c\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19 CSV\n *\/\nfunction generateCSVReport() {\n  const stateObj = fetchSystemState();\n  if (!stateObj || !stateObj.rooms || stateObj.rooms.length === 0) {\n    return \"\\uFEFF\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\";\n  }\n  \n  \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 UTF-8 BOM \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\u0e40\u0e1e\u0e35\u0e49\u0e22\u0e19\u0e43\u0e19 MS Excel\n  let csvContent = \"\\uFEFF\";\n  \n  \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2b\u0e31\u0e27\u0e15\u0e32\u0e23\u0e32\u0e07 (Headers) - \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07\"\n  csvContent += \"\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19,\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e2b\u0e49\u0e2d\u0e07,\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48,\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07,\u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07,\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21,\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e43\u0e19\u0e2b\u0e49\u0e2d\u0e07\\n\";\n  \n  stateObj.rooms.forEach(function(room) {\n    \/\/ \u0e2a\u0e23\u0e38\u0e1b\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e31\u0e49\u0e19\u0e01\u0e23\u0e30\u0e0a\u0e31\u0e1a\n    const assetSummary = room.assets.map(function(a) {\n      return `${a.name} [\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14: ${a.total} | \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49: ${a.working} | \u0e0a\u0e33\u0e23\u0e38\u0e14: ${a.broken}]`;\n    }).join(\" \/ \");\n    \n    \/\/ \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e2b\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e21\u0e35\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22 Comma (,) \u0e2b\u0e23\u0e37\u0e2d Double Quote (\")\n    const cleanName = `\"${room.name.replace(\/\"\/g, '\"\"')}\"`;\n    const cleanNumber = `\"${room.number.replace(\/\"\/g, '\"\"')}\"`;\n    const cleanBuilding = `\"${room.building.replace(\/\"\/g, '\"\"')}\"`;\n    const cleanType = `\"${room.type.replace(\/\"\/g, '\"\"')}\"`;\n    const cleanSeats = `\"${String(room.seats || 0).replace(\/\"\/g, '\"\"')}\"`;\n    const cleanStatus = `\"${room.status.replace(\/\"\/g, '\"\"')}\"`;\n    const cleanAssets = `\"${assetSummary.replace(\/\"\/g, '\"\"')}\"`;\n    \n    csvContent += `${cleanName},${cleanNumber},${cleanBuilding},${cleanType},${cleanSeats},${cleanStatus},${cleanAssets}\\n`;\n  });\n  \n  return csvContent;\n}\n\n\/**\n * \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 URL \u0e02\u0e2d\u0e07 Web App \u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2b\u0e19\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e43\u0e0a\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e2d\u0e2d\u0e01\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\n * @returns {string} \u0e25\u0e34\u0e07\u0e01\u0e4c URL \u0e02\u0e2d\u0e07 Web App\n *\/\nfunction getWebAppUrl() {\n  return ScriptApp.getService().getUrl();\n}\n\n\/**\n * \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e23\u0e37\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07 Google Sheets \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\n * @returns {Spreadsheet} \u0e27\u0e31\u0e15\u0e16\u0e38\u0e2a\u0e40\u0e1b\u0e23\u0e14\u0e0a\u0e35\u0e15\u0e17\u0e35\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\n *\/\nfunction getOrCreateDatabase() {\n  const files = DriveApp.getFilesByName(SPREADSHEET_NAME);\n  if (files.hasNext()) {\n    const file = files.next();\n    return SpreadsheetApp.open(file);\n  } else {\n    \/\/ \u0e01\u0e23\u0e13\u0e35\u0e17\u0e35\u0e48\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e19 Google Drive \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e40\u0e1b\u0e23\u0e14\u0e0a\u0e35\u0e15\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\n    const newSs = SpreadsheetApp.create(SPREADSHEET_NAME);\n    const sheet = newSs.getActiveSheet();\n    sheet.setName(SHEET_NAME);\n    \n    \/\/ \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30 (State JSON)\n    sheet.getRange(\"A1:B1\").setValues([[\"Key\", \"DataJSON\"]]);\n    sheet.getRange(\"A2:B2\").setValues([[\"state\", \"{}\"]]);\n    \n    \/\/ \u0e08\u0e31\u0e14\u0e41\u0e15\u0e48\u0e07\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e2b\u0e31\u0e27\u0e15\u0e32\u0e23\u0e32\u0e07\u0e02\u0e2d\u0e07 Sheet \u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\n    sheet.getRange(\"A1:B1\").setFontWeight(\"bold\").setBackground(\"#ffe3e3\");\n    sheet.autoResizeColumns(1, 2);\n    \n    return newSs;\n  }\n}\n\n\/**\n * \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a (State) \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e08\u0e32\u0e01 Google Sheets \u0e2a\u0e48\u0e07\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\n * @returns {Object|null} \u0e04\u0e37\u0e19\u0e04\u0e48\u0e32\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a Object \u0e2b\u0e23\u0e37\u0e2d null \u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e1e\u0e1a\n *\/\nfunction fetchSystemState() {\n  try {\n    const ss = getOrCreateDatabase();\n    const sheet = ss.getSheetByName(SHEET_NAME);\n    const data = sheet.getDataRange().getValues();\n    \n    \/\/ \u0e27\u0e19\u0e25\u0e39\u0e1b\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e16\u0e27\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e30\u0e1a\u0e1a\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\n    for (let i = 1; i < data.length; i++) {\n      if (data[i][0] === \"state\") {\n        return JSON.parse(data[i][1]);\n      }\n    }\n    return null;\n  } catch (error) {\n    Logger.log(\"Error fetching state: \" + error.toString());\n    return null;\n  }\n}\n\n\/**\n * \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e23\u0e30\u0e1a\u0e1a (State) \u0e08\u0e32\u0e01\u0e1d\u0e31\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e25\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07 Google Sheets\n * @param {string} stateJsonString - \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a JSON String\n * @returns {boolean} \u0e2a\u0e48\u0e07\u0e04\u0e48\u0e32\u0e01\u0e25\u0e31\u0e1a\u0e27\u0e48\u0e32\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48\n *\/\nfunction saveSystemState(stateJsonString) {\n  try {\n    const ss = getOrCreateDatabase();\n    const sheet = ss.getSheetByName(SHEET_NAME);\n    const data = sheet.getDataRange().getValues();\n    \n    let isUpdated = false;\n    for (let i = 1; i < data.length; i++) {\n      if (data[i][0] === \"state\") {\n        sheet.getRange(i + 1, 2).setValue(stateJsonString);\n        isUpdated = true;\n        break;\n      }\n    }\n    \n    \/\/ \u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e41\u0e16\u0e27\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e04\u0e35\u0e22\u0e4c \"state\" \u0e08\u0e30\u0e17\u0e33\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27\u0e43\u0e2b\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35\n    if (!isUpdated) {\n      sheet.appendRow([\"state\", stateJsonString]);\n    }\n    \n    \/\/ \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07\u0e25\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 (System Logs)\n    logActionHistory(stateJsonString);\n    \n    return true;\n  } catch (error) {\n    Logger.log(\"Error saving state: \" + error.toString());\n    throw new Error(\"\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49: \" + error.message);\n  }\n}\n\n\/**\n * \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e04\u0e27\u0e32\u0e21\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e2b\u0e27\u0e01\u0e32\u0e23\u0e17\u0e33\u0e18\u0e38\u0e23\u0e01\u0e23\u0e23\u0e21 (Log Table) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e0a\u0e49\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07\n * @param {string} stateJsonString - \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e27\u0e32\u0e21\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e2b\u0e27\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\n *\/\nfunction logActionHistory(stateJsonString) {\n  try {\n    const ss = getOrCreateDatabase();\n    let logSheet = ss.getSheetByName(\"System_Logs\");\n    \n    if (!logSheet) {\n      logSheet = ss.insertSheet(\"System_Logs\");\n      logSheet.appendRow([\"\u0e27\u0e31\u0e19-\u0e40\u0e27\u0e25\u0e32\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07\", \"\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\"]);\n      logSheet.getRange(\"A1:B1\").setFontWeight(\"bold\").setBackground(\"#ffc9c9\");\n    }\n    \n    const timestamp = Utilities.formatDate(new Date(), \"GMT+7\", \"yyyy-MM-dd HH:mm:ss\");\n    logSheet.appendRow([timestamp, stateJsonString]);\n    logSheet.autoResizeColumns(1, 2);\n  } catch (e) {\n    Logger.log(\"Error writing system logs: \" + e.toString());\n  }\n}\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07<\/title>\n    <!-- Tailwind CSS CDN -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- Google Fonts: Prompt & Inter -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&#038;family=Prompt:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Lucide Icons -->\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['Prompt', 'Inter', 'sans-serif'],\n                    },\n                    colors: {\n                        brand: {\n                            50: '#fff5f5',\n                            100: '#ffe3e3',\n                            200: '#ffc9c9',\n                            300: '#ffa8a8',\n                            400: '#ff8787',\n                            500: '#ff6b6b', \/\/ Soft Red \/ Coral\n                            600: '#fa5252',\n                            700: '#f03e3e',\n                            800: '#e03131',\n                            900: '#c92a2a',\n                        },\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        ::-webkit-scrollbar {\n            width: 6px;\n            height: 6px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #f8fafc;\n            border-radius: 8px;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: #fca5a5;\n            border-radius: 8px;\n        }\n        ::-webkit-scrollbar-thumb:hover {\n            background: #f87171;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 font-sans min-h-screen flex flex-col antialiased selection:bg-brand-100 selection:text-brand-900\">\n\n    <!-- Premium Header Area -->\n    <header class=\"bg-white\/90 border-b border-brand-100 sticky top-0 z-40 backdrop-blur-md\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex items-center justify-between h-16 sm:h-20\">\n                <!-- System Logo \/ Title -->\n                <div class=\"flex items-center gap-3\">\n                    <div class=\"bg-brand-500 text-white p-2.5 rounded-2xl flex items-center justify-center shadow-md shadow-brand-100\">\n                        <i data-lucide=\"monitor-play\" class=\"w-5 h-5 sm:w-6 sm:h-6\"><\/i>\n                    <\/div>\n                    <div>\n                        <h1 class=\"text-sm sm:text-lg font-bold text-slate-900 leading-tight\">\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07<\/h1>\n                        <p class=\"text-[10px] sm:text-xs text-brand-500 font-semibold uppercase tracking-wider\">\u0e07\u0e32\u0e19\u0e27\u0e34\u0e17\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Navigation Controls -->\n                <div class=\"flex items-center gap-3\">\n                    <!-- Admin Control Bar Badge -->\n                    <div id=\"admin-badge\" class=\"hidden flex items-center gap-2 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-full text-xs font-semibold text-emerald-700\">\n                        <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\n                        <span>\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e39\u0e48<\/span>\n                    <\/div>\n\n                    <!-- Main Switch Button -->\n                    <button id=\"btn-admin-panel-toggle\" onclick=\"handleAdminToggle()\" class=\"flex items-center gap-2 bg-brand-50 text-brand-600 hover:bg-brand-500 hover:text-white border border-brand-100 px-4 py-2 rounded-2xl text-xs sm:text-sm font-semibold transition-all shadow-sm\">\n                        <i id=\"admin-btn-icon\" data-lucide=\"shield-check\" class=\"w-4 h-4\"><\/i>\n                        <span id=\"admin-btn-text\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- App Main Frame -->\n    <main class=\"flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8\">\n\n        <!-- ==================== VIEW 1: USER VIEW (DEFAULT) ==================== -->\n        <section id=\"user-view\" class=\"space-y-6\">\n            <!-- Hero banner and fast stats -->\n            <div class=\"bg-gradient-to-br from-brand-50\/60 via-white to-brand-50\/30 border border-brand-100\/50 rounded-3xl p-6 sm:p-8 flex flex-col lg:flex-row lg:items-center justify-between gap-6 shadow-sm\">\n                <div>\n                    <h2 class=\"text-xl sm:text-2xl font-bold text-slate-800 flex items-center gap-2\">\n                        \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e20\u0e32\u0e1e\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07 <span class=\"text-brand-500 text-lg\">\ud83c\udfeb<\/span>\n                    <\/h2>\n                    <p class=\"text-slate-500 text-xs sm:text-sm mt-1\"><\/p>\n                <\/div>\n                \n                <!-- Quick Metric Rings\/Boxes -->\n                <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 w-full lg:w-auto\">\n                    <div class=\"bg-white p-3.5 rounded-2xl shadow-xs border border-slate-100 text-center\">\n                        <span class=\"text-[10px] text-slate-400 font-semibold block uppercase\">\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\n                        <span id=\"user-total-rooms\" class=\"text-lg sm:text-xl font-bold text-slate-800\">0<\/span>\n                    <\/div>\n                    <div class=\"bg-white p-3.5 rounded-2xl shadow-xs border border-slate-100 text-center\">\n                        <span class=\"text-[10px] text-emerald-500 font-bold block uppercase\">\ud83d\udfe2 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/span>\n                        <span id=\"user-status-ready\" class=\"text-lg sm:text-xl font-bold text-emerald-500\">0<\/span>\n                    <\/div>\n                    <div class=\"bg-white p-3.5 rounded-2xl shadow-xs border border-slate-100 text-center\">\n                        <span class=\"text-[10px] text-amber-500 font-bold block uppercase\">\ud83d\udfe1 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07<\/span>\n                        <span id=\"user-status-repair\" class=\"text-lg sm:text-xl font-bold text-amber-500\">0<\/span>\n                    <\/div>\n                    <div class=\"bg-white p-3.5 rounded-2xl shadow-xs border border-slate-100 text-center\">\n                        <span class=\"text-[10px] text-rose-500 font-bold block uppercase\">\ud83d\udd34 \u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/span>\n                        <span id=\"user-status-broken\" class=\"text-lg sm:text-xl font-bold text-rose-500\">0<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Dashboard Search and Advanced Filter Bar -->\n            <div class=\"bg-white rounded-3xl border border-slate-100 p-4 sm:p-6 shadow-sm space-y-4\">\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n                    <!-- Search input text -->\n                    <div class=\"relative\">\n                        <span class=\"absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-slate-400\">\n                            <i data-lucide=\"search\" class=\"w-4 h-4\"><\/i>\n                        <\/span>\n                        <input type=\"text\" id=\"user-search\" oninput=\"resetToFirstPageAndFilterUser()\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e49\u0e2d\u0e07, \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e2b\u0e49\u0e2d\u0e07...\" class=\"w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                    <\/div>\n                    \n                    <!-- Building Select Filter -->\n                    <div class=\"relative\">\n                        <span class=\"absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-slate-400\">\n                            <i data-lucide=\"building\" class=\"w-4 h-4\"><\/i>\n                        <\/span>\n                        <select id=\"user-filter-building\" onchange=\"resetToFirstPageAndFilterUser()\" class=\"w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-brand-200 outline-none appearance-none\">\n                            <option value=\"all\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\n                            <!-- Dynamic Options -->\n                        <\/select>\n                    <\/div>\n\n                    <!-- Room Type Select Filter -->\n                    <div class=\"relative\">\n                        <span class=\"absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-slate-400\">\n                            <i data-lucide=\"tag\" class=\"w-4 h-4\"><\/i>\n                        <\/span>\n                        <select id=\"user-filter-type\" onchange=\"resetToFirstPageAndFilterUser()\" class=\"w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-brand-200 outline-none appearance-none\">\n                            <option value=\"all\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\n                            <!-- Dynamic Options -->\n                        <\/select>\n                    <\/div>\n                <\/div>\n\n                <!-- Status Select Buttons (Dynamic pill tabs based on database statuses) -->\n                <div class=\"flex flex-wrap items-center justify-between gap-4 pt-3 border-t border-slate-100\">\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                        <span class=\"text-xs font-bold text-slate-400 mr-2\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19:<\/span>\n                        <div id=\"status-pill-container\" class=\"flex flex-wrap items-center gap-2\">\n                            <!-- Dynamic pill buttons injected here -->\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- Right Actions on Search Block (Rows Limit Selector) -->\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"flex items-center gap-1.5\">\n                            <span class=\"text-xs font-semibold text-slate-400\">\u0e41\u0e2a\u0e14\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e25\u0e30:<\/span>\n                            <select id=\"user-rows-limit\" onchange=\"changeUserRowsLimit(this.value)\" class=\"bg-slate-50 border border-slate-200 text-xs font-semibold rounded-xl px-2.5 py-1.5 focus:ring-2 focus:ring-brand-200 outline-none\">\n                                <option value=\"10\">10 \u0e2b\u0e49\u0e2d\u0e07<\/option>\n                                <option value=\"50\">50 \u0e2b\u0e49\u0e2d\u0e07<\/option>\n                                <option value=\"100\">100 \u0e2b\u0e49\u0e2d\u0e07<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- User Rooms Display List (\u0e41\u0e2a\u0e14\u0e07\u0e41\u0e16\u0e27\u0e25\u0e30 1 \u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e15\u0e47\u0e21\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d) -->\n            <div id=\"user-rooms-grid\" class=\"space-y-4\">\n                <!-- Dynamic Content -->\n            <\/div>\n\n            <!-- Pagination User Controls -->\n            <div id=\"user-pagination-container\" class=\"flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 bg-white rounded-2xl p-4 border border-slate-100 shadow-xs\">\n                <span id=\"user-pagination-info\" class=\"text-xs text-slate-400 font-semibold\">\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 0-0 \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 0 \u0e2b\u0e49\u0e2d\u0e07<\/span>\n                <div id=\"user-pagination-buttons\" class=\"flex items-center gap-1.5\">\n                    <!-- Pagination Buttons Injected Here -->\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- ==================== VIEW 2: ADMIN VIEW (REQUIRES AUTH) ==================== -->\n        <section id=\"admin-view\" class=\"hidden space-y-6\">\n            <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4 pb-4 border-b border-slate-100\">\n                <div>\n                    <h2 class=\"text-xl sm:text-2xl font-bold text-slate-800\">\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h2>\n                    <p class=\"text-xs text-slate-500 mt-1\">\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e1e\u0e34\u0e48\u0e21 \u0e41\u0e01\u0e49\u0e44\u0e02 \u0e25\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e2a\u0e40\u0e1b\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e23\u0e32\u0e22\u0e2b\u0e49\u0e2d\u0e07 \u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/p>\n                <\/div>\n                <div class=\"flex items-center gap-2\">\n                    <button onclick=\"openConfigModal()\" class=\"flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-2xl text-xs font-semibold transition-all\">\n                        <i data-lucide=\"settings\" class=\"w-4 h-4\"><\/i> \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\n                    <\/button>\n                    <button onclick=\"logoutAdmin()\" class=\"flex items-center gap-1.5 bg-rose-50 hover:bg-rose-100 text-rose-600 px-4 py-2 rounded-2xl text-xs font-semibold transition-all\">\n                        <i data-lucide=\"log-out\" class=\"w-4 h-4\"><\/i> \u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Admin Workspace Grid -->\n            <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\n                <!-- Column 1: Admin Form (Add\/Edit) -->\n                <div class=\"lg:col-span-4 space-y-6\">\n                    <div class=\"bg-white rounded-3xl border border-slate-100 shadow-sm p-6 sticky top-24\">\n                        <div class=\"flex items-center justify-between pb-4 border-b border-slate-100 mb-6\">\n                            <h3 id=\"admin-form-title\" class=\"font-bold text-slate-800 flex items-center gap-2\">\n                                <i data-lucide=\"plus-circle\" class=\"w-5 h-5 text-brand-500\"><\/i>\n                                <span>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2b\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/span>\n                            <\/h3>\n                            <button id=\"btn-admin-cancel-edit\" onclick=\"resetAdminForm()\" class=\"hidden text-xs text-slate-400 hover:text-rose-500 transition-all font-medium\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02<\/button>\n                        <\/div>\n\n                        <form id=\"admin-room-form\" class=\"space-y-4\" onsubmit=\"handleAdminFormSubmit(event)\">\n                            <input type=\"hidden\" id=\"admin-room-id\" value=\"\">\n\n                            <!-- \u0e41\u0e16\u0e27\u0e2b\u0e31\u0e27\u0e15\u0e32\u0e23\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1f\u0e2d\u0e23\u0e4c\u0e21: \u0e1f\u0e34\u0e25\u0e14\u0e4c \u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07 -->\n                            <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n                                <div>\n                                    <label class=\"block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 <span class=\"text-rose-500\">*<\/span><\/label>\n                                    <input type=\"text\" id=\"admin-name\" required placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21 1307\" class=\"w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                                <\/div>\n                                <div>\n                                    <label class=\"block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e2b\u0e49\u0e2d\u0e07 <span class=\"text-rose-500\">*<\/span><\/label>\n                                    <input type=\"text\" id=\"admin-number\" required placeholder=\"\u0e40\u0e0a\u0e48\u0e19 402\" class=\"w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                                <\/div>\n                                <div>\n                                    <label class=\"block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07 <span class=\"text-rose-500\">*<\/span><\/label>\n                                    <input type=\"number\" id=\"admin-seats\" required min=\"1\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 40\" class=\"w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                                <div>\n                                    <label class=\"block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e2d\u0e32\u0e04\u0e32\u0e23 <span class=\"text-rose-500\">*<\/span><\/label>\n                                    <select id=\"admin-building\" required class=\"w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none\">\n                                        <!-- Options injected dynamically -->\n                                    <\/select>\n                                <\/div>\n                                <div>\n                                    <label class=\"block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07 <span class=\"text-rose-500\">*<\/span><\/label>\n                                    <select id=\"admin-type\" required class=\"w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none\">\n                                        <!-- Options injected dynamically -->\n                                    <\/select>\n                                <\/div>\n                            <\/div>\n\n                            <div>\n                                <label class=\"block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a <span class=\"text-rose-500\">*<\/span><\/label>\n                                <select id=\"admin-status\" required class=\"w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none\">\n                                    <!-- Options injected dynamically -->\n                                <\/select>\n                            <\/div>\n\n                            <!-- EQUIPMENT SELECTOR (Allows customizable equipment per room) -->\n                            <div class=\"border-t border-slate-100 pt-4 mt-4\">\n                                <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-3\">\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07<\/label>\n                                <p class=\"text-[11px] text-slate-400 mb-4\">\u0e17\u0e33\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e16\u0e39\u0e01\u0e17\u0e35\u0e48\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35\u0e43\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e35\u0e49 \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e23\u0e30\u0e1a\u0e38\u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\/\u0e17\u0e35\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\n                                \n                                <div id=\"admin-equipment-selection-container\" class=\"space-y-3.5 max-h-60 overflow-y-auto pr-1\">\n                                    <!-- Populated with dynamic equipment lists & checkbox toggle -->\n                                <\/div>\n                            <\/div>\n\n                            <button type=\"submit\" class=\"w-full bg-brand-500 hover:bg-brand-600 text-white font-semibold py-3 px-4 rounded-xl shadow-md shadow-brand-100 transition-all flex items-center justify-center gap-2 text-xs\">\n                                <i data-lucide=\"save\" class=\"w-4 h-4\"><\/i> <span id=\"admin-btn-submit-text\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07<\/span>\n                            <\/button>\n                        <\/form>\n                    <\/div>\n                <\/div>\n\n                <!-- Column 2: Room Grid\/List for Actions with integrated search and filters -->\n                <div class=\"lg:col-span-8 space-y-4\">\n                    <div class=\"bg-white rounded-3xl border border-slate-100 shadow-sm p-5 space-y-4\">\n                        <div class=\"flex items-center justify-between\">\n                            <h3 class=\"font-bold text-slate-800\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h3>\n                            <span id=\"admin-room-counter\" class=\"text-xs bg-slate-100 text-slate-600 px-2.5 py-1 rounded-full font-semibold\">0 \u0e2b\u0e49\u0e2d\u0e07<\/span>\n                        <\/div>\n\n                        <!-- Admin Search and Advanced Filter Bar (Identical Layout to User View) -->\n                        <div class=\"bg-slate-50 rounded-2xl p-4 border border-slate-100 space-y-3.5 shadow-xs\">\n                            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-3\">\n                                <!-- Search input text -->\n                                <div class=\"relative\">\n                                    <span class=\"absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-slate-400\">\n                                        <i data-lucide=\"search\" class=\"w-3.5 h-3.5\"><\/i>\n                                    <\/span>\n                                    <input type=\"text\" id=\"admin-search\" oninput=\"resetToFirstPageAndFilterAdmin()\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e49\u0e2d\u0e07, \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e2b\u0e49\u0e2d\u0e07...\" class=\"w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                                <\/div>\n                                \n                                <!-- Building Select Filter -->\n                                <div class=\"relative\">\n                                    <span class=\"absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-slate-400\">\n                                        <i data-lucide=\"building\" class=\"w-3.5 h-3.5\"><\/i>\n                                    <\/span>\n                                    <select id=\"admin-filter-building\" onchange=\"resetToFirstPageAndFilterAdmin()\" class=\"w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none appearance-none\">\n                                        <option value=\"all\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\n                                        <!-- Dynamic Options -->\n                                    <\/select>\n                                <\/div>\n\n                                <!-- Room Type Select Filter -->\n                                <div class=\"relative\">\n                                    <span class=\"absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-slate-400\">\n                                        <i data-lucide=\"tag\" class=\"w-3.5 h-3.5\"><\/i>\n                                    <\/span>\n                                    <select id=\"admin-filter-type\" onchange=\"resetToFirstPageAndFilterAdmin()\" class=\"w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none appearance-none\">\n                                        <option value=\"all\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\n                                        <!-- Dynamic Options -->\n                                    <\/select>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Status Select Buttons and Row Limit -->\n                            <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-slate-200\/60\">\n                                <div class=\"flex flex-wrap items-center gap-2\">\n                                    <span class=\"text-[10px] font-bold text-slate-400 uppercase\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2b\u0e49\u0e2d\u0e07:<\/span>\n                                    <div id=\"admin-status-pill-container\" class=\"flex flex-wrap items-center gap-1.5\">\n                                        <!-- Dynamic pill buttons injected here -->\n                                    <\/div>\n                                <\/div>\n                                \n                                <!-- Rows Limit Select & PDF Report Export -->\n                                <div class=\"flex items-center gap-2.5 self-end sm:self-auto\">\n                                    <button type=\"button\" onclick=\"triggerPDFPrint()\" class=\"flex items-center gap-1.5 bg-brand-500 hover:bg-brand-600 text-white px-3.5 py-1.5 rounded-xl text-xs font-semibold shadow-sm transition-all\">\n                                        <i data-lucide=\"printer\" class=\"w-3.5 h-3.5\"><\/i> \u0e2d\u0e2d\u0e01\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19 PDF\n                                    <\/button>\n                                    <span class=\"text-[10px] font-bold text-slate-400 uppercase hidden sm:inline\">\u0e41\u0e2a\u0e14\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e25\u0e30:<\/span>\n                                    <select id=\"admin-rows-limit\" onchange=\"changeAdminRowsLimit(this.value)\" class=\"bg-white border border-slate-200 text-xs font-semibold rounded-xl px-2.5 py-1.5 focus:ring-2 focus:ring-brand-200 outline-none\">\n                                        <option value=\"10\">10 \u0e2b\u0e49\u0e2d\u0e07<\/option>\n                                        <option value=\"50\">50 \u0e2b\u0e49\u0e2d\u0e07<\/option>\n                                        <option value=\"100\">100 \u0e2b\u0e49\u0e2d\u0e07<\/option>\n                                    <\/select>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Admin Table\/List -->\n                        <div class=\"divide-y divide-slate-100 max-h-[550px] overflow-y-auto pr-1\" id=\"admin-room-list\">\n                            <!-- Injected Admin Rows -->\n                        <\/div>\n\n                        <!-- Pagination Admin Controls -->\n                        <div id=\"admin-pagination-container\" class=\"flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 bg-slate-50 rounded-2xl p-4 border border-slate-100 shadow-xs\">\n                            <span id=\"admin-pagination-info\" class=\"text-xs text-slate-400 font-semibold\">\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 0-0 \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 0 \u0e2b\u0e49\u0e2d\u0e07<\/span>\n                            <div id=\"admin-pagination-buttons\" class=\"flex items-center gap-1.5\">\n                                <!-- Pagination Buttons Injected Here -->\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/main>\n\n    <!-- Custom Notification\/Toast -->\n    <div id=\"app-toast\" class=\"fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none flex items-center gap-3 bg-slate-900 text-white px-5 py-3.5 rounded-2xl shadow-xl border border-slate-800\">\n        <span id=\"app-toast-icon\"><\/span>\n        <span id=\"app-toast-message\" class=\"text-xs sm:text-sm font-medium\"><\/span>\n    <\/div>\n\n    <!-- MODAL 1: Admin Log-In Screen -->\n    <div id=\"login-modal\" class=\"fixed inset-0 z-50 overflow-y-auto hidden\">\n        <div class=\"flex items-center justify-center min-h-screen px-4 py-8 text-center\">\n            <div onclick=\"closeLoginModal()\" class=\"fixed inset-0 bg-slate-900\/50 backdrop-blur-sm transition-opacity\"><\/div>\n            \n            <div class=\"relative bg-white rounded-3xl text-left overflow-hidden shadow-xl transform transition-all max-w-sm w-full border border-slate-100 p-6 sm:p-8\">\n                <div class=\"flex flex-col items-center mb-6\">\n                    <div class=\"bg-brand-50 text-brand-500 p-3.5 rounded-2xl mb-4\">\n                        <i data-lucide=\"lock\" class=\"w-6 h-6\"><\/i>\n                    <\/div>\n                    <h3 class=\"text-lg font-bold text-slate-950\">\u0e41\u0e1c\u0e07\u0e25\u0e47\u0e2d\u0e01\u0e2d\u0e34\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a<\/h3>\n                    <p class=\"text-xs text-slate-400 mt-1\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a<\/p>\n                <\/div>\n\n                <form onsubmit=\"handleLoginSubmit(event)\" class=\"space-y-4\">\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (Username)<\/label>\n                        <input type=\"text\" id=\"login-username\" required placeholder=\"admin\" class=\"w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1.5\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 (Password)<\/label>\n                        <input type=\"password\" id=\"login-password\" required placeholder=\"\u2022\u2022\u2022\u2022\" class=\"w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                    <\/div>\n                    \n                    <button type=\"submit\" class=\"w-full bg-brand-500 hover:bg-brand-600 text-white font-semibold py-3 rounded-xl shadow-md shadow-brand-100 transition-all flex items-center justify-center gap-2 text-sm\">\n                        <i data-lucide=\"log-in\" class=\"w-4 h-4\"><\/i> \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\n                    <\/button>\n                    <button type=\"button\" onclick=\"closeLoginModal()\" class=\"w-full text-slate-400 hover:text-slate-600 transition-all py-1.5 text-xs\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- MODAL 2: User Detail Dialog Drawer -->\n    <div id=\"room-detail-modal\" class=\"fixed inset-0 z-50 overflow-y-auto hidden\">\n        <div class=\"flex items-center justify-center min-h-screen px-4 py-8 text-center\">\n            <div onclick=\"closeDetailModal()\" class=\"fixed inset-0 bg-slate-900\/50 backdrop-blur-xs transition-opacity\"><\/div>\n            \n            <div class=\"relative bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all max-w-lg w-full border border-slate-100\">\n                <!-- Modal Head -->\n                <div class=\"bg-brand-50\/50 border-b border-brand-100\/50 p-6 flex items-center justify-between\">\n                    <div>\n                        <span id=\"detail-type-badge\" class=\"text-[10px] font-bold text-brand-600 bg-brand-100\/50 border border-brand-200 px-2 py-0.5 rounded-md uppercase tracking-wider\"><\/span>\n                        <h3 id=\"detail-title\" class=\"text-lg font-bold text-slate-900 mt-2\"><\/h3>\n                    <\/div>\n                    <button onclick=\"closeDetailModal()\" class=\"text-slate-400 hover:text-slate-600 transition-all p-1.5 hover:bg-slate-100 rounded-full\">\n                        <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                    <\/button>\n                <\/div>\n\n                <!-- Modal Body -->\n                <div class=\"p-6 space-y-4\">\n                    <div class=\"flex flex-col sm:flex-row gap-4 justify-between bg-slate-50 p-4 rounded-2xl border border-slate-100\">\n                        <div>\n                            <span class=\"block text-[10px] font-semibold text-slate-400 uppercase\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48<\/span>\n                            <span id=\"detail-building\" class=\"text-xs sm:text-sm text-slate-700 font-semibold flex items-center gap-1 mt-1\"><\/span>\n                        <\/div>\n                        <div>\n                            <span class=\"block text-[10px] font-semibold text-slate-400 uppercase\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19<\/span>\n                            <span id=\"detail-status\" class=\"inline-block mt-1\"><\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div>\n                        <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-3\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e35\u0e49<\/h4>\n                        <div id=\"detail-equipment-list\" class=\"space-y-2.5\">\n                            <!-- Injected device statuses -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Modal Footer -->\n                <div class=\"bg-slate-50 p-4 flex justify-end\">\n                    <button type=\"button\" onclick=\"closeDetailModal()\" class=\"bg-slate-200 hover:bg-slate-300 text-slate-700 px-4 py-2 rounded-xl text-xs font-semibold transition-all\">\u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- MODAL 3: Dynamic Attribute Configurator Manager -->\n    <div id=\"config-modal\" class=\"fixed inset-0 z-50 overflow-y-auto hidden\">\n        <div class=\"flex items-center justify-center min-h-screen px-4 py-8 text-center\">\n            <div onclick=\"closeConfigModal()\" class=\"fixed inset-0 bg-slate-900\/50 backdrop-blur-sm transition-opacity\"><\/div>\n            \n            <div class=\"relative bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all max-w-md w-full border border-slate-100\">\n                <!-- Head -->\n                <div class=\"bg-brand-50\/50 border-b border-brand-100\/50 p-5 flex items-center justify-between\">\n                    <h3 class=\"text-sm font-bold text-slate-800 flex items-center gap-1.5\">\n                        <i data-lucide=\"sliders\" class=\"w-4 h-4 text-brand-500\"><\/i> \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\n                    <\/h3>\n                    <button onclick=\"closeConfigModal()\" class=\"text-slate-400 hover:text-slate-600 p-1 rounded-full hover:bg-slate-100\">\n                        <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                    <\/button>\n                <\/div>\n\n                <!-- Body -->\n                <div class=\"p-5 space-y-4\">\n                    <!-- Config Category Selection -->\n                    <div class=\"grid grid-cols-4 gap-1.5\">\n                        <button onclick=\"switchConfigCategory('building')\" id=\"cfg-btn-building\" class=\"cfg-tab-btn py-1.5 text-[10px] font-semibold rounded-lg border text-center transition-all bg-brand-500 border-brand-500 text-white\">\u0e2d\u0e32\u0e04\u0e32\u0e23<\/button>\n                        <button onclick=\"switchConfigCategory('type')\" id=\"cfg-btn-type\" class=\"cfg-tab-btn py-1.5 text-[10px] font-semibold rounded-lg border text-center transition-all border-slate-200 text-slate-600 hover:bg-slate-50\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07<\/button>\n                        <button onclick=\"switchConfigCategory('status')\" id=\"cfg-btn-status\" class=\"cfg-tab-btn py-1.5 text-[10px] font-semibold rounded-lg border text-center transition-all border-slate-200 text-slate-600 hover:bg-slate-50\">\u0e2a\u0e16\u0e32\u0e19\u0e30<\/button>\n                        <button onclick=\"switchConfigCategory('equipment')\" id=\"cfg-btn-equipment\" class=\"cfg-tab-btn py-1.5 text-[10px] font-semibold rounded-lg border text-center transition-all border-slate-200 text-slate-600 hover:bg-slate-50\">\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/button>\n                    <\/div>\n\n                    <!-- Input block -->\n                    <div class=\"flex gap-2\">\n                        <input type=\"text\" id=\"config-input\" onkeyup=\"if(event.key === 'Enter') addConfigItem()\" placeholder=\"\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e43\u0e2b\u0e21\u0e48...\" class=\"flex-grow px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-brand-200 outline-none transition-all\">\n                        <button type=\"button\" onclick=\"addConfigItem()\" class=\"bg-brand-500 hover:bg-brand-600 text-white px-3.5 py-2 rounded-xl text-xs font-semibold shadow-sm flex items-center gap-1\">\n                            <i data-lucide=\"plus\" class=\"w-3.5 h-3.5\"><\/i> \u0e40\u0e1e\u0e34\u0e48\u0e21\n                        <\/button>\n                    <\/div>\n\n                    <!-- Item List -->\n                    <div class=\"space-y-1.5 max-h-56 overflow-y-auto pr-1\" id=\"config-items-list\">\n                        <!-- Dynamic rows with delete buttons -->\n                    <\/div>\n                <\/div>\n\n                <!-- Footer -->\n                <div class=\"bg-slate-50 p-4 flex justify-end\">\n                    <button type=\"button\" onclick=\"closeConfigModal()\" class=\"bg-slate-200 hover:bg-slate-300 text-slate-700 px-4 py-2 rounded-xl text-xs font-semibold transition-all\">\n                        \u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Footer -->\n    <footer class=\"bg-white border-t border-slate-100 py-6 mt-12\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center sm:flex sm:justify-between sm:items-center\">\n            <p class=\"text-xs text-slate-400\">\u00a9 2026 \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07<\/p>\n            <p class=\"text-xs text-brand-400 font-medium mt-2 sm:mt-0 flex items-center justify-center gap-1\">\n                <i data-lucide=\"check-check\" class=\"w-3.5 h-3.5\"><\/i> \n            <\/p>\n        <\/div>\n    <\/footer>\n\n    <!-- App Logic Script -->\n    <script>\n        \/\/ --- System State & Configuration ---\n        let state = {\n            buildings: [\"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e09\u0e25\u0e34\u0e21\u0e1e\u0e23\u0e30\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\", \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e23\u0e23\u0e21\"],\n            roomTypes: [\"\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\", \"\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\"],\n            statuses: [\"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\", \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\", \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\"],\n            equipments: [\"\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e40\u0e15\u0e2d\u0e23\u0e4c\", \"\u0e25\u0e33\u0e42\u0e1e\u0e07\", \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22\", \"\u0e08\u0e2d\u0e2a\u0e31\u0e21\u0e1c\u0e31\u0e2a\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30\"],\n            rooms: [\n                {\n                    id: \"1\",\n                    name: \"\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c 402\",\n                    number: \"402\",\n                    building: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e23\u0e23\u0e21\",\n                    type: \"\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\",\n                    status: \"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\",\n                    seats: 40,\n                    assets: [\n                        { name: \"\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e40\u0e15\u0e2d\u0e23\u0e4c\", total: 1, working: 1, broken: 0 },\n                        { name: \"\u0e25\u0e33\u0e42\u0e1e\u0e07\", total: 4, working: 3, broken: 1 },\n                        { name: \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22\", total: 2, working: 2, broken: 0 }\n                    ]\n                },\n                {\n                    id: \"2\",\n                    name: \"\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e42\u0e2a\u0e15\u0e2f 101\",\n                    number: \"101\",\n                    building: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e09\u0e25\u0e34\u0e21\u0e1e\u0e23\u0e30\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\",\n                    type: \"\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\",\n                    status: \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\",\n                    seats: 30,\n                    assets: [\n                        { name: \"\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e40\u0e15\u0e2d\u0e23\u0e4c\", total: 2, working: 1, broken: 1 },\n                        { name: \"\u0e25\u0e33\u0e42\u0e1e\u0e07\", total: 2, working: 2, broken: 0 }\n                    ]\n                },\n                {\n                    id: \"3\",\n                    name: \"\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e31\u0e21\u0e21\u0e19\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 203\",\n                    number: \"203\",\n                    building: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e09\u0e25\u0e34\u0e21\u0e1e\u0e23\u0e30\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\",\n                    type: \"\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\",\n                    status: \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\",\n                    seats: 50,\n                    assets: [\n                        { name: \"\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e40\u0e15\u0e2d\u0e23\u0e4c\", total: 1, working: 0, broken: 1 }\n                    ]\n                }\n            ],\n            currentConfigCategory: 'building',\n            \n            \/\/ User Filter State\n            userSearchQuery: '',\n            userBuildingFilter: 'all',\n            userTypeFilter: 'all',\n            userStatusFilter: 'all',\n            \n            \/\/ Admin Filter State\n            adminSearchQuery: '',\n            adminBuildingFilter: 'all',\n            adminTypeFilter: 'all',\n            adminStatusFilter: 'all',\n            \n            isAdminAuthenticated: false,\n\n            \/\/ Pagination State\n            userCurrentPage: 1,\n            userRowsLimit: 10,\n            adminCurrentPage: 1,\n            adminRowsLimit: 10\n        };\n\n        const isGoogleAppsScript = typeof google !== 'undefined' && typeof google.script !== 'undefined';\n\n        \/\/ --- Data Persistence ---\n        function saveToCloud() {\n            updateMetrics();\n            if (isGoogleAppsScript) {\n                google.script.run.withSuccessHandler(function() {\n                    showToast(\"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e07\u0e23\u0e30\u0e1a\u0e1a Google Sheets \u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n                }).withFailureHandler(function(err) {\n                    showToast(\"\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25: \" + err, true);\n                }).saveSystemState(JSON.stringify(state));\n            } else {\n                localStorage.setItem('av_audit_system_state', JSON.stringify(state));\n                showToast(\"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33\u0e1a\u0e23\u0e32\u0e27\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e49\u0e27 (\u0e42\u0e2b\u0e21\u0e14\u0e17\u0e14\u0e2a\u0e2d\u0e1a)\");\n            }\n        }\n\n        function loadFromPersistence() {\n            const handleLoadedState = function(loadedState) {\n                if (loadedState && typeof loadedState === 'object') {\n                    \/\/ Safe Merge arrays\n                    if (loadedState.rooms && Array.isArray(loadedState.rooms)) {\n                        state.rooms = loadedState.rooms;\n                    }\n                    if (loadedState.buildings && Array.isArray(loadedState.buildings)) {\n                        state.buildings = loadedState.buildings;\n                    } else {\n                        state.buildings = [\"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e09\u0e25\u0e34\u0e21\u0e1e\u0e23\u0e30\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\", \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e23\u0e23\u0e21\"];\n                    }\n                    if (loadedState.roomTypes && Array.isArray(loadedState.roomTypes)) {\n                        state.roomTypes = loadedState.roomTypes;\n                    } else {\n                        state.roomTypes = [\"\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\", \"\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\"];\n                    }\n                    if (loadedState.statuses && Array.isArray(loadedState.statuses)) {\n                        state.statuses = loadedState.statuses;\n                    } else {\n                        state.statuses = [\"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\", \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\", \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\"];\n                    }\n                    if (loadedState.equipments && Array.isArray(loadedState.equipments)) {\n                        state.equipments = loadedState.equipments;\n                    } else {\n                        state.equipments = [\"\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e40\u0e15\u0e2d\u0e23\u0e4c\", \"\u0e25\u0e33\u0e42\u0e1e\u0e07\", \"\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22\", \"\u0e08\u0e2d\u0e2a\u0e31\u0e21\u0e1c\u0e31\u0e2a\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30\"];\n                    }\n                }\n                \n                \/\/ Define filters\n                state.adminSearchQuery = state.adminSearchQuery || '';\n                state.adminBuildingFilter = state.adminBuildingFilter || 'all';\n                state.adminTypeFilter = state.adminTypeFilter || 'all';\n                state.adminStatusFilter = state.adminStatusFilter || 'all';\n                state.userSearchQuery = state.userSearchQuery || '';\n                state.userBuildingFilter = state.userBuildingFilter || 'all';\n                state.userTypeFilter = state.userTypeFilter || 'all';\n                state.userStatusFilter = state.userStatusFilter || 'all';\n                state.userCurrentPage = state.userCurrentPage || 1;\n                state.userRowsLimit = state.userRowsLimit || 10;\n                state.adminCurrentPage = state.adminCurrentPage || 1;\n                state.adminRowsLimit = state.adminRowsLimit || 10;\n\n                if (state.rooms && Array.isArray(state.rooms)) {\n                    state.rooms.forEach(function(room) {\n                        if (room.seats === undefined || room.seats === null) {\n                            room.seats = 0;\n                        }\n                        if (!room.assets || !Array.isArray(room.assets)) {\n                            room.assets = [];\n                        }\n                    });\n                }\n\n                state.isAdminAuthenticated = false;\n                sessionStorage.removeItem('admin_authenticated');\n                \n                updateAdminButtonState();\n                refreshViews();\n            };\n\n            if (isGoogleAppsScript) {\n                google.script.run.withSuccessHandler(function(dbState) {\n                    handleLoadedState(dbState);\n                }).fetchSystemState();\n            } else {\n                const saved = localStorage.getItem('av_audit_system_state');\n                if (saved) {\n                    try {\n                        const parsed = JSON.parse(saved);\n                        handleLoadedState(parsed);\n                    } catch(e) {\n                        console.error(\"Error reading storage data\", e);\n                        handleLoadedState(null);\n                    }\n                } else {\n                    handleLoadedState(null);\n                }\n            }\n        }\n\n        \/\/ --- Custom Toast Message ---\n        function showToast(message, isError = false) {\n            const toast = document.getElementById('app-toast');\n            const toastMsg = document.getElementById('app-toast-message');\n            const toastIcon = document.getElementById('app-toast-icon');\n\n            if (toastMsg) toastMsg.textContent = message;\n            if (toast) {\n                if (isError) {\n                    if (toastIcon) toastIcon.innerHTML = `<i data-lucide=\"alert-circle\" class=\"w-4 h-4 sm:w-5 sm:h-5 text-red-400\"><\/i>`;\n                    toast.className = \"fixed bottom-6 right-6 z-50 transform translate-y-0 opacity-100 transition-all duration-300 flex items-center gap-3 bg-red-950 text-white px-5 py-3.5 rounded-2xl shadow-xl border border-red-900\";\n                } else {\n                    if (toastIcon) toastIcon.innerHTML = `<i data-lucide=\"check-circle\" class=\"w-4 h-4 sm:w-5 sm:h-5 text-emerald-400\"><\/i>`;\n                    toast.className = \"fixed bottom-6 right-6 z-50 transform translate-y-0 opacity-100 transition-all duration-300 flex items-center gap-3 bg-slate-900 text-white px-5 py-3.5 rounded-2xl shadow-xl border border-slate-800\";\n                }\n            }\n            lucide.createIcons();\n\n            setTimeout(() => {\n                if (toast) {\n                    toast.className = \"fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none flex items-center gap-3 bg-slate-900 text-white px-5 py-3.5 rounded-2xl shadow-xl border border-slate-800\";\n                }\n            }, 3000);\n        }\n\n        \/\/ --- View Switching & Login ---\n        function handleAdminToggle() {\n            const userSec = document.getElementById('user-view');\n            const adminSec = document.getElementById('admin-view');\n            \n            if (adminSec.classList.contains('hidden')) {\n                openLoginModal();\n            } else {\n                adminSec.classList.add('hidden');\n                userSec.classList.remove('hidden');\n                \n                state.isAdminAuthenticated = false;\n                sessionStorage.removeItem('admin_authenticated');\n                \n                updateAdminButtonState();\n                refreshViews();\n                showToast(\"\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e41\u0e25\u0e49\u0e27\");\n            }\n        }\n\n        function openLoginModal() {\n            document.getElementById('login-modal').classList.remove('hidden');\n        }\n\n        function closeLoginModal() {\n            document.getElementById('login-modal').classList.add('hidden');\n        }\n\n        function handleLoginSubmit(event) {\n            event.preventDefault();\n            const u = document.getElementById('login-username').value;\n            const p = document.getElementById('login-password').value;\n\n            if (u === 'admin' && p === '1234') {\n                state.isAdminAuthenticated = true;\n                sessionStorage.setItem('admin_authenticated', 'true');\n                showToast(\"\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n                closeLoginModal();\n                \n                document.getElementById('user-view').classList.add('hidden');\n                document.getElementById('admin-view').classList.remove('hidden');\n                \n                updateAdminButtonState();\n                refreshViews();\n            } else {\n                showToast(\"\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\", true);\n            }\n            document.getElementById('login-username').value = '';\n            document.getElementById('login-password').value = '';\n        }\n\n        function logoutAdmin() {\n            state.isAdminAuthenticated = false;\n            sessionStorage.removeItem('admin_authenticated');\n            showToast(\"\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\");\n            \n            document.getElementById('admin-view').classList.add('hidden');\n            document.getElementById('user-view').classList.remove('hidden');\n            \n            updateAdminButtonState();\n            refreshViews();\n        }\n\n        function updateAdminButtonState() {\n            const btnText = document.getElementById('admin-btn-text');\n            const btnIcon = document.getElementById('admin-btn-icon');\n            const adminBadge = document.getElementById('admin-badge');\n            const userSec = document.getElementById('user-view');\n\n            if (state.isAdminAuthenticated) {\n                if (adminBadge) adminBadge.classList.remove('hidden');\n                if (userSec && userSec.classList.contains('hidden')) {\n                    if (btnText) btnText.textContent = \"\u0e01\u0e25\u0e31\u0e1a\u0e2a\u0e39\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\";\n                    if (btnIcon) btnIcon.setAttribute('data-lucide', 'eye');\n                } else {\n                    if (btnText) btnText.textContent = \"\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\";\n                    if (btnIcon) btnIcon.setAttribute('data-lucide', 'sliders');\n                }\n            } else {\n                if (adminBadge) adminBadge.classList.add('hidden');\n                if (btnText) btnText.textContent = \"\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\";\n                if (btnIcon) btnIcon.setAttribute('data-lucide', 'shield-check');\n            }\n            lucide.createIcons();\n        }\n\n        \/\/ --- Main UI Rendering ---\n        function refreshViews() {\n            populateAdminDropdowns();\n            populateUserDropdownFilters();\n            populateAdminDropdownFilters();\n            renderUserStatusPills();\n            renderAdminStatusPills();\n            renderUserRooms();\n            renderAdminRoomList();\n            renderAdminEquipmentChecklist();\n            updateMetrics();\n        }\n\n        function updateMetrics() {\n            const userTotal = document.getElementById('user-total-rooms');\n            if (userTotal) userTotal.innerText = state.rooms.length;\n            \n            const readyCount = state.rooms.filter(r => r.status === '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19').length;\n            const repairCount = state.rooms.filter(r => r.status === '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07').length;\n            const brokenCount = state.rooms.filter(r => r.status === '\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19').length;\n\n            const userReady = document.getElementById('user-status-ready');\n            const userRepair = document.getElementById('user-status-repair');\n            const userBroken = document.getElementById('user-status-broken');\n\n            if (userReady) userReady.innerText = readyCount;\n            if (userRepair) userRepair.innerText = repairCount;\n            if (userBroken) userBroken.innerText = brokenCount;\n        }\n\n        \/\/ \u0e14\u0e23\u0e47\u0e2d\u0e1b\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e04\u0e31\u0e14\u0e01\u0e23\u0e2d\u0e07\n        function populateUserDropdownFilters() {\n            const bSelect = document.getElementById('user-filter-building');\n            const tSelect = document.getElementById('user-filter-type');\n            if (!bSelect || !tSelect) return;\n\n            const prevBld = bSelect.value;\n            const prevType = tSelect.value;\n\n            bSelect.innerHTML = '<option value=\"all\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>' + \n                state.buildings.map(b => `<option value=\"${b}\">${b}<\/option>`).join('');\n\n            tSelect.innerHTML = '<option value=\"all\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>' + \n                state.roomTypes.map(t => `<option value=\"${t}\">${t}<\/option>`).join('');\n\n            if (state.buildings.includes(prevBld)) bSelect.value = prevBld;\n            if (state.roomTypes.includes(prevType)) tSelect.value = prevType;\n        }\n\n        function populateAdminDropdownFilters() {\n            const bSelect = document.getElementById('admin-filter-building');\n            const tSelect = document.getElementById('admin-filter-type');\n            if (!bSelect || !tSelect) return;\n\n            const prevBld = bSelect.value;\n            const prevType = tSelect.value;\n\n            bSelect.innerHTML = '<option value=\"all\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>' + \n                state.buildings.map(b => `<option value=\"${b}\">${b}<\/option>`).join('');\n\n            tSelect.innerHTML = '<option value=\"all\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>' + \n                state.roomTypes.map(t => `<option value=\"${t}\">${t}<\/option>`).join('');\n\n            if (state.buildings.includes(prevBld)) bSelect.value = prevBld;\n            if (state.roomTypes.includes(prevType)) tSelect.value = prevType;\n        }\n\n        \/\/ \u0e40\u0e23\u0e19\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e41\u0e17\u0e47\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\n        function renderUserStatusPills() {\n            const container = document.getElementById('status-pill-container');\n            if (!container) return;\n            container.innerHTML = '';\n\n            const isAllActive = state.userStatusFilter === 'all';\n            let allBtnClass = isAllActive \n                ? \"status-filter-btn text-xs font-semibold px-4 py-2 rounded-full border transition-all bg-brand-500 border-brand-500 text-white shadow-xs\" \n                : \"status-filter-btn text-xs font-semibold px-4 py-2 rounded-full border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-all\";\n            \n            container.innerHTML += `<button onclick=\"filterUserByStatus('all')\" class=\"${allBtnClass}\" data-status=\"all\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>`;\n\n            state.statuses.forEach(status => {\n                const isActive = state.userStatusFilter === status;\n                let emoji = \"\u26aa \";\n                let activeColorClass = \"bg-brand-500 border-brand-500 text-white\";\n                \n                if (status === \"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                    emoji = \"\ud83d\udfe2 \";\n                    activeColorClass = \"bg-emerald-500 border-emerald-500 text-white\";\n                } else if (status === \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\") {\n                    emoji = \"\ud83d\udfe1 \";\n                    activeColorClass = \"bg-amber-500 border-amber-500 text-white\";\n                } else if (status === \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                    emoji = \"\ud83d\udd34 \";\n                    activeColorClass = \"bg-rose-500 border-rose-500 text-white\";\n                }\n\n                let btnClass = isActive \n                    ? `status-filter-btn text-xs font-semibold px-4 py-2 rounded-full border transition-all ${activeColorClass} shadow-xs`\n                    : \"status-filter-btn text-xs font-semibold px-4 py-2 rounded-full border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-all\";\n\n                container.innerHTML += `<button onclick=\"filterUserByStatus('${status}')\" class=\"${btnClass}\" data-status=\"${status}\">${emoji}${status}<\/button>`;\n            });\n        }\n\n        function renderAdminStatusPills() {\n            const container = document.getElementById('admin-status-pill-container');\n            if (!container) return;\n            container.innerHTML = '';\n\n            const isAllActive = state.adminStatusFilter === 'all';\n            let allBtnClass = isAllActive \n                ? \"admin-status-btn text-[10px] font-semibold px-3 py-1.5 rounded-full border transition-all bg-brand-500 border-brand-500 text-white shadow-xs\" \n                : \"admin-status-btn text-[10px] font-semibold px-3 py-1.5 rounded-full border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-all\";\n            \n            container.innerHTML += `<button type=\"button\" onclick=\"filterAdminByStatus('all')\" class=\"${allBtnClass}\" data-status=\"all\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>`;\n\n            state.statuses.forEach(status => {\n                const isActive = state.adminStatusFilter === status;\n                let emoji = \"\u26aa \";\n                let activeColorClass = \"bg-brand-500 border-brand-500 text-white\";\n                \n                if (status === \"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                    emoji = \"\ud83d\udfe2 \";\n                    activeColorClass = \"bg-emerald-500 border-emerald-500 text-white\";\n                } else if (status === \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\") {\n                    emoji = \"\ud83d\udfe1 \";\n                    activeColorClass = \"bg-amber-500 border-amber-500 text-white\";\n                } else if (status === \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                    emoji = \"\ud83d\udd34 \";\n                    activeColorClass = \"bg-rose-500 border-rose-500 text-white\";\n                }\n\n                let btnClass = isActive \n                    ? `admin-status-btn text-[10px] font-semibold px-3 py-1.5 rounded-full border transition-all ${activeColorClass} shadow-xs`\n                    : \"admin-status-btn text-[10px] font-semibold px-3 py-1.5 rounded-full border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-all\";\n\n                container.innerHTML += `<button type=\"button\" onclick=\"filterAdminByStatus('${status}')\" class=\"${btnClass}\" data-status=\"${status}\">${emoji}${status}<\/button>`;\n            });\n        }\n\n        \/\/ \u0e14\u0e36\u0e07\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\n        function getFilteredRoomsForReport() {\n            return state.rooms.filter(room => {\n                const query = (state.adminSearchQuery || '').toLowerCase();\n                const matchesSearch = room.name.toLowerCase().includes(query) || \n                                      String(room.number).includes(query) ||\n                                      room.building.toLowerCase().includes(query) ||\n                                      room.type.toLowerCase().includes(query);\n                \n                const matchesBuilding = state.adminBuildingFilter === 'all' || room.building === state.adminBuildingFilter;\n                const matchesType = state.adminTypeFilter === 'all' || room.type === state.adminTypeFilter;\n                const matchesStatus = state.adminStatusFilter === 'all' || room.status === state.adminStatusFilter;\n\n                return matchesSearch && matchesBuilding && matchesType && matchesStatus;\n            });\n        }\n\n        function triggerPDFPrint() {\n            const filteredRooms = getFilteredRoomsForReport();\n            if (filteredRooms.length === 0) {\n                showToast(\"\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e15\u0e32\u0e21\u0e15\u0e31\u0e27\u0e01\u0e23\u0e2d\u0e07\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2d\u0e2d\u0e01\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\", true);\n                return;\n            }\n            \n            const printWindow = window.open('', '_blank');\n            if (!printWindow) {\n                showToast(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1b\u0e02\u0e2d\u0e07\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\", true);\n                return;\n            }\n            \n            let roomsRows = '';\n            filteredRooms.forEach((room, idx) => {\n                let assetsText = room.assets.map(a => \n                    `<li>\u2022 <strong>${a.name}<\/strong>: \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ${a.total} | \u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49 ${a.working} | \u0e0a\u0e33\u0e23\u0e38\u0e14 <span style=\"${a.broken > 0 ? 'color:#ef4444; font-weight:bold;' : ''}\">${a.broken}<\/span><\/li>`\n                ).join('');\n                if (room.assets.length === 0) {\n                    assetsText = '<li style=\"color: #94a3b8; font-style: italic;\">\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e23\u0e30\u0e1a\u0e38\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07<\/li>';\n                }\n                \n                let statusBadgeColor = 'color: #059669; background-color: #ecfdf5; border: 1px solid #a7f3d0;';\n                if (room.status === '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07') {\n                    statusBadgeColor = 'color: #d97706; background-color: #fffbeb; border: 1px solid #fde68a;';\n                } else if (room.status === '\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19') {\n                    statusBadgeColor = 'color: #dc2626; background-color: #fef2f2; border: 1px solid #fca5a5;';\n                }\n                \n                roomsRows += `\n                    <tr>\n                        <td style=\"padding: 12px 8px; text-align: center; border-bottom: 1px solid #e2e8f0; font-size: 13px;\">${idx + 1}<\/td>\n                        <td style=\"padding: 12px 10px; border-bottom: 1px solid #e2e8f0; font-size: 13px;\">\n                            <strong>${room.name}<\/strong><br>\n                            <span style=\"color: #64748b; font-size: 11px;\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e2b\u0e49\u0e2d\u0e07: #${room.number}<\/span>\n                        <\/td>\n                        <td style=\"padding: 12px 10px; border-bottom: 1px solid #e2e8f0; font-size: 13px;\">${room.building}<\/td>\n                        <td style=\"padding: 12px 10px; border-bottom: 1px solid #e2e8f0; font-size: 13px;\">${room.type}<\/td>\n                        <td style=\"padding: 12px 8px; text-align: center; border-bottom: 1px solid #e2e8f0; font-size: 13px;\">${room.seats || 0} \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07<\/td>\n                        <td style=\"padding: 12px 10px; text-align: center; border-bottom: 1px solid #e2e8f0;\">\n                            <span style=\"display: inline-block; padding: 4px 10px; font-weight: bold; font-size: 11px; border-radius: 9999px; ${statusBadgeColor}\">\n                                ${room.status}\n                            <\/span>\n                        <\/td>\n                        <td style=\"padding: 12px 10px; border-bottom: 1px solid #e2e8f0; font-size: 12px; line-height: 1.5;\">\n                            <ul style=\"margin: 0; padding-left: 0; list-style-type: none;\">\n                                ${assetsText}\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n\n            const total = filteredRooms.length;\n            const ready = filteredRooms.filter(r => r.status === '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19').length;\n            const repairing = filteredRooms.filter(r => r.status === '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07').length;\n            const broken = filteredRooms.filter(r => r.status === '\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19').length;\n\n            const html = `\n                <!DOCTYPE html>\n                <html>\n                <head>\n                    <meta charset=\"UTF-8\">\n                    <title>\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2026<\/title>\n                    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n                    <style>\n                        body {\n                            font-family: 'Prompt', sans-serif;\n                            color: #1e293b;\n                            margin: 0;\n                            padding: 40px;\n                            background-color: #ffffff;\n                        }\n                        @media print {\n                            body {\n                                padding: 0;\n                            }\n                            .no-print {\n                                display: none !important;\n                            }\n                        }\n                        .header {\n                            display: flex;\n                            justify-content: space-between;\n                            align-items: flex-start;\n                            border-bottom: 3px solid #ff6b6b;\n                            padding-bottom: 20px;\n                            margin-bottom: 30px;\n                        }\n                        .title {\n                            font-size: 22px;\n                            font-weight: 700;\n                            color: #1e293b;\n                            margin: 0;\n                        }\n                        .subtitle {\n                            font-size: 13px;\n                            color: #ff6b6b;\n                            font-weight: 600;\n                            margin: 5px 0 0 0;\n                            text-transform: uppercase;\n                            letter-spacing: 1px;\n                        }\n                        .metadata {\n                            font-size: 12px;\n                            color: #64748b;\n                            text-align: right;\n                            line-height: 1.6;\n                        }\n                        .stats-grid {\n                            display: grid;\n                            grid-template-cols: repeat(4, 1fr);\n                            gap: 15px;\n                            margin-bottom: 25px;\n                        }\n                        .stat-card {\n                            border: 1px solid #ffe3e3;\n                            background-color: #fffafb;\n                            padding: 12px;\n                            border-radius: 12px;\n                            text-align: center;\n                        }\n                        .stat-val {\n                            font-size: 20px;\n                            font-weight: bold;\n                            color: #1e293b;\n                        }\n                        .stat-lbl {\n                            font-size: 11px;\n                            color: #64748b;\n                            margin-top: 4px;\n                            font-weight: 500;\n                        }\n                        .filter-summary {\n                            background-color: #f8fafc;\n                            border: 1px solid #e2e8f0;\n                            padding: 12px 18px;\n                            border-radius: 12px;\n                            font-size: 12px;\n                            margin-bottom: 25px;\n                            color: #475569;\n                            line-height: 1.5;\n                        }\n                        table {\n                            width: 100%;\n                            border-collapse: collapse;\n                            margin-bottom: 40px;\n                        }\n                        th {\n                            background-color: #ff6b6b;\n                            color: white;\n                            font-weight: 600;\n                            padding: 12px 10px;\n                            font-size: 12px;\n                            text-transform: uppercase;\n                        }\n                        .footer {\n                            margin-top: 50px;\n                            display: flex;\n                            justify-content: space-between;\n                            font-size: 12px;\n                            color: #64748b;\n                            page-break-inside: avoid;\n                        }\n                        .signature-block {\n                            text-align: center;\n                            width: 250px;\n                        }\n                        .signature-line {\n                            border-bottom: 1px dashed #64748b;\n                            height: 40px;\n                            margin-bottom: 8px;\n                        }\n                        .btn-print {\n                            background-color: #ff6b6b;\n                            color: white;\n                            border: none;\n                            padding: 10px 20px;\n                            font-family: 'Prompt', sans-serif;\n                            font-weight: 600;\n                            font-size: 13px;\n                            border-radius: 8px;\n                            cursor: pointer;\n                            display: inline-flex;\n                            align-items: center;\n                            gap: 8px;\n                            box-shadow: 0 4px 6px -1px rgba(255, 107, 107, 0.2);\n                            transition: all 0.2s;\n                        }\n                        .btn-print:hover {\n                            background-color: #fa5252;\n                            transform: translateY(-1px);\n                        }\n                    <\/style>\n                <\/head>\n                <body>\n                    <div class=\"no-print\" style=\"margin-bottom: 25px; display: flex; justify-content: flex-end;\">\n                        <button onclick=\"window.print()\" class=\"btn-print\">\n                            \ud83d\udda8\ufe0f \u0e2a\u0e31\u0e48\u0e07\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e19\u0e35\u0e49 \/ \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e1b\u0e47\u0e19 PDF\n                        <\/button>\n                    <\/div>\n                    \n                    <div class=\"header\">\n                        <div>\n                            <h1 class=\"title\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e2a\u0e23\u0e38\u0e1b\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/h1>\n                            <p class=\"subtitle\">AV Audit & Room Equipment Status Report<\/p>\n                        <\/div>\n                        <div class=\"metadata\">\n                            <strong>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19:<\/strong> ${new Date().toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })} \u0e19.<br>\n                            <strong>\u0e23\u0e30\u0e1a\u0e1a\u0e2b\u0e25\u0e31\u0e01:<\/strong> AV Audit System 2026\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"stats-grid\">\n                        <div class=\"stat-card\">\n                            <div class=\"stat-val\" style=\"color: #ff6b6b;\">${total}<\/div>\n                            <div class=\"stat-lbl\">\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e32\u0e19\u0e15\u0e31\u0e27\u0e01\u0e23\u0e2d\u0e07<\/div>\n                        <\/div>\n                        <div class=\"stat-card\">\n                            <div class=\"stat-val\" style=\"color: #10b981;\">${ready}<\/div>\n                            <div class=\"stat-lbl\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/div>\n                        <\/div>\n                        <div class=\"stat-card\">\n                            <div class=\"stat-val\" style=\"color: #f59e0b;\">${repairing}<\/div>\n                            <div class=\"stat-lbl\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07<\/div>\n                        <\/div>\n                        <div class=\"stat-card\">\n                            <div class=\"stat-val\" style=\"color: #ef4444;\">${broken}<\/div>\n                            <div class=\"stat-lbl\">\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"filter-summary\">\n                        <strong>\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e41\u0e25\u0e30\u0e1e\u0e32\u0e23\u0e32\u0e21\u0e34\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19:<\/strong><br>\n                        \u2022 \u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2b\u0e49\u0e2d\u0e07: \"${state.adminSearchQuery || '\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14'}\" | \n                        \u2022 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48: \"${state.adminBuildingFilter === 'all' ? '\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' : state.adminBuildingFilter}\" | \n                        \u2022 \u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19: \"${state.adminTypeFilter === 'all' ? '\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' : state.adminTypeFilter}\" | \n                        \u2022 \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e15\u0e31\u0e27\u0e01\u0e23\u0e2d\u0e07: \"${state.adminStatusFilter === 'all' ? '\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' : state.adminStatusFilter}\"\n                    <\/div>\n\n                    <table>\n                        <thead>\n                            <tr>\n                                <th style=\"width: 5%; border-top-left-radius: 8px; text-align: center;\">\u0e25\u0e33\u0e14\u0e31\u0e1a<\/th>\n                                <th style=\"width: 25%; text-align: left;\">\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e49\u0e2d\u0e07 \/ \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02<\/th>\n                                <th style=\"width: 15%; text-align: left;\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48<\/th>\n                                <th style=\"width: 15%; text-align: left;\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2b\u0e49\u0e2d\u0e07<\/th>\n                                <th style=\"width: 10%; text-align: center;\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07<\/th>\n                                <th style=\"width: 15%; text-align: center;\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21<\/th>\n                                <th style=\"width: 15%; text-align: left; border-top-right-radius: 8px;\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            ${roomsRows}\n                        <\/tbody>\n                    <\/table>\n\n                    <div class=\"footer\">\n                        <div style=\"max-width: 60%; line-height: 1.6;\">\n                            <strong>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e2a\u0e33\u0e04\u0e31\u0e0d:<\/strong><br>\n                            \u2022 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e19\u0e35\u0e49\u0e08\u0e31\u0e14\u0e02\u0e36\u0e49\u0e19\u0e41\u0e1a\u0e1a\u0e44\u0e14\u0e19\u0e32\u0e21\u0e34\u0e01\u0e42\u0e14\u0e22\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2026<br>\n                            \u2022 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e23\u0e34\u0e07 \u0e13 \u0e27\u0e31\u0e19\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e43\u0e19\u0e2b\u0e31\u0e27\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\n                        <\/div>\n                        <div class=\"signature-block\">\n                            <p>\u0e25\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a \/ \u0e1c\u0e39\u0e49\u0e2d\u0e2d\u0e01\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19<\/p>\n                            <div class=\"signature-line\"><\/div>\n                            <p style=\"margin: 0; font-size: 11px; color: #475569;\">(......................................................)<\/p>\n                            <p style=\"margin: 5px 0 0 0; font-size: 12px; font-weight: 600;\">\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/p>\n                        <\/div>\n                    <\/div>\n                <\/body>\n                <\/html>\n            `;\n            \n            printWindow.document.write(html);\n            printWindow.document.close();\n        }\n\n        \/\/ --- Render: Dynamic equipment selectors inside Admin Form (Checkbox to enable + specify quantity) ---\n        function renderAdminEquipmentChecklist(currentAssets = []) {\n            const container = document.getElementById('admin-equipment-selection-container');\n            if (!container) return;\n            container.innerHTML = '';\n\n            state.equipments.forEach((eqName, index) => {\n                const matchedAsset = currentAssets.find(a => a.name === eqName);\n                const isChecked = !!matchedAsset;\n                const totalVal = matchedAsset ? matchedAsset.total : 0;\n                const workingVal = matchedAsset ? matchedAsset.working : 0;\n                const brokenVal = matchedAsset ? matchedAsset.broken : 0;\n\n                const cardHtml = `\n                    <div class=\"bg-slate-50 p-3 rounded-2xl border border-slate-100 transition-all hover:bg-white hover:shadow-xs\">\n                        <div class=\"flex items-center justify-between pb-2 mb-2 border-b border-dashed border-slate-200\">\n                            <label class=\"flex items-center gap-2 cursor-pointer\">\n                                <input type=\"checkbox\" data-eq-name=\"${eqName}\" onchange=\"toggleEquipmentFields('${index}')\" id=\"eq-chk-${index}\" ${isChecked ? 'checked' : ''} class=\"w-4 h-4 text-brand-600 border-slate-300 rounded focus:ring-brand-500\">\n                                <span class=\"text-xs font-bold text-slate-700\">${eqName}<\/span>\n                            <\/label>\n                            <span class=\"text-[10px] text-slate-400 font-semibold\" id=\"eq-badge-${index}\">\n                                ${isChecked ? '\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e25\u0e49\u0e27' : '\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07'}\n                            <\/span>\n                        <\/div>\n                        \n                        <div id=\"eq-inputs-${index}\" class=\"${isChecked ? 'grid' : 'hidden'} grid-cols-2 gap-3 transition-all\">\n                            <div>\n                                <label class=\"block text-[9px] font-bold text-slate-400 uppercase mb-1\">\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49 (\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\/\u0e15\u0e31\u0e27)<\/label>\n                                <input type=\"number\" min=\"0\" value=\"${workingVal}\" oninput=\"calcAssetTotal(${index})\" id=\"eq-working-${index}\" class=\"w-full bg-white border border-slate-200 rounded-lg px-2 py-1 text-center text-xs font-semibold focus:ring-1 focus:ring-brand-200 outline-none\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[9px] font-bold text-slate-400 uppercase mb-1\">\u0e0a\u0e33\u0e23\u0e38\u0e14 (\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\/\u0e15\u0e31\u0e27)<\/label>\n                                <input type=\"number\" min=\"0\" value=\"${brokenVal}\" oninput=\"calcAssetTotal(${index})\" id=\"eq-broken-${index}\" class=\"w-full bg-white border border-slate-200 rounded-lg px-2 py-1 text-center text-xs font-semibold focus:ring-1 focus:ring-brand-200 outline-none\">\n                            <\/div>\n                            <input type=\"hidden\" id=\"eq-total-${index}\" value=\"${totalVal}\">\n                        <\/div>\n                    <\/div>\n                `;\n                container.insertAdjacentHTML('beforeend', cardHtml);\n            });\n            lucide.createIcons();\n        }\n\n        function toggleEquipmentFields(index) {\n            const chk = document.getElementById(`eq-chk-${index}`);\n            const inputs = document.getElementById(`eq-inputs-${index}`);\n            const badge = document.getElementById(`eq-badge-${index}`);\n            if (!chk || !inputs || !badge) return;\n            \n            if (chk.checked) {\n                inputs.classList.remove('hidden');\n                inputs.classList.add('grid');\n                badge.textContent = \"\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e25\u0e49\u0e27\";\n                badge.className = \"text-[10px] text-brand-600 font-semibold\";\n            } else {\n                inputs.classList.add('hidden');\n                inputs.classList.remove('grid');\n                badge.textContent = \"\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\";\n                badge.className = \"text-[10px] text-slate-400 font-semibold\";\n            }\n        }\n\n        function calcAssetTotal(index) {\n            const workingInput = document.getElementById(`eq-working-${index}`);\n            const brokenInput = document.getElementById(`eq-broken-${index}`);\n            const totalInput = document.getElementById(`eq-total-${index}`);\n            if (!workingInput || !brokenInput || !totalInput) return;\n\n            const working = parseInt(workingInput.value) || 0;\n            const broken = parseInt(brokenInput.value) || 0;\n            totalInput.value = working + broken;\n        }\n\n        \/\/ --- Render: User Room Cards on the Filterable Dashboard ---\n        function renderUserRooms() {\n            const container = document.getElementById('user-rooms-grid');\n            if (!container) return;\n            container.innerHTML = '';\n\n            let filtered = state.rooms.filter(room => {\n                const query = (state.userSearchQuery || '').toLowerCase();\n                const matchesSearch = room.name.toLowerCase().includes(query) || \n                                      String(room.number).includes(query) ||\n                                      room.building.toLowerCase().includes(query) ||\n                                      room.type.toLowerCase().includes(query);\n                \n                const matchesBuilding = state.userBuildingFilter === 'all' || room.building === state.userBuildingFilter;\n                const matchesType = state.userTypeFilter === 'all' || room.type === state.userTypeFilter;\n                const matchesStatus = state.userStatusFilter === 'all' || room.status === state.userStatusFilter;\n\n                return matchesSearch && matchesBuilding && matchesType && matchesStatus;\n            });\n\n            const totalItems = filtered.length;\n            const totalPages = Math.ceil(totalItems \/ state.userRowsLimit) || 1;\n            \n            if (state.userCurrentPage > totalPages) {\n                state.userCurrentPage = totalPages;\n            }\n            if (state.userCurrentPage < 1) {\n                state.userCurrentPage = 1;\n            }\n\n            const startIndex = (state.userCurrentPage - 1) * state.userRowsLimit;\n            const endIndex = Math.min(startIndex + state.userRowsLimit, totalItems);\n            \n            const paginatedItems = filtered.slice(startIndex, endIndex);\n\n            const pagInfo = document.getElementById('user-pagination-info');\n            if (pagInfo) {\n                if (totalItems > 0) {\n                    pagInfo.innerText = `\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 ${startIndex + 1}-${endIndex} \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ${totalItems} \u0e2b\u0e49\u0e2d\u0e07`;\n                } else {\n                    pagInfo.innerText = `\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 0-0 \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 0 \u0e2b\u0e49\u0e2d\u0e07`;\n                }\n            }\n\n            renderUserPaginationButtons(totalPages);\n\n            if (paginatedItems.length === 0) {\n                container.innerHTML = `\n                    <div class=\"col-span-full flex flex-col items-center justify-center py-16 text-slate-400 bg-white rounded-3xl border border-slate-100 p-8\">\n                        <i data-lucide=\"package-open\" class=\"w-12 h-12 stroke-[1.25] text-slate-300 mb-3\"><\/i>\n                        <p class=\"text-sm font-medium\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e23\u0e37\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e32\u0e21\u0e15\u0e31\u0e27\u0e01\u0e23\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01<\/p>\n                    <\/div>\n                `;\n                lucide.createIcons();\n                return;\n            }\n\n            paginatedItems.forEach(room => {\n                let brokenCount = 0;\n                room.assets.forEach(a => { brokenCount += a.broken; });\n\n                let statusColorClass = \"bg-slate-50 text-slate-600 border-slate-200\";\n                let statusIcon = \"\ud83d\udfe2\";\n\n                if (room.status === \"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                    statusColorClass = \"bg-emerald-50 text-emerald-600 border-emerald-200\";\n                    statusIcon = \"\ud83d\udfe2\";\n                } else if (room.status === \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\") {\n                    statusColorClass = \"bg-amber-50 text-amber-600 border-amber-200\";\n                    statusIcon = \"\ud83d\udfe1\";\n                } else if (room.status === \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                    statusColorClass = \"bg-rose-50 text-rose-600 border-rose-200\";\n                    statusIcon = \"\ud83d\udd34\";\n                }\n\n                const card = `\n                    <div onclick=\"openDetailModal('${room.id}')\" class=\"bg-white rounded-2xl border border-slate-100 p-5 hover:shadow-md hover:border-brand-200\/50 transition-all duration-200 cursor-pointer flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 group\">\n                        <div class=\"flex items-center gap-4 flex-grow\">\n                            <div class=\"hidden sm:flex bg-slate-50 text-slate-400 p-3.5 rounded-xl border border-slate-100 group-hover:bg-brand-50 group-hover:text-brand-500 transition-colors\">\n                                <i data-lucide=\"door-open\" class=\"w-6 h-6\"><\/i>\n                            <\/div>\n                            <div class=\"space-y-1\">\n                                <div class=\"flex items-center gap-2 flex-wrap\">\n                                    <span class=\"text-[10px] font-bold text-slate-400 bg-slate-50 border border-slate-150 px-2 py-0.5 rounded-md uppercase tracking-wider\">${room.type}<\/span>\n                                    <span class=\"text-[10px] font-bold ${statusColorClass} border px-2.5 py-0.5 rounded-md\">${statusIcon} ${room.status}<\/span>\n                                <\/div>\n                                <h4 class=\"text-md sm:text-lg font-bold text-slate-900 group-hover:text-brand-500 transition-colors\">\n                                    ${room.name}\n                                    <span class=\"text-xs font-normal text-slate-400 ml-1\">(\u0e2b\u0e49\u0e2d\u0e07 #${room.number})<\/span>\n                                <\/h4>\n                                <p class=\"text-xs text-slate-400 flex items-center gap-3\">\n                                    <span class=\"flex items-center gap-1\"><i data-lucide=\"building\" class=\"w-3.5 h-3.5 text-slate-400\"><\/i> ${room.building}<\/span>\n                                    <span class=\"flex items-center gap-1 font-semibold text-slate-500\"><i data-lucide=\"users\" class=\"w-3.5 h-3.5\"><\/i> ${room.seats || 0} \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07<\/span>\n                                <\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"flex items-center justify-between sm:justify-end gap-4 border-t sm:border-t-0 border-slate-100 pt-3 sm:pt-0\">\n                            <span class=\"sm:hidden text-[10px] text-slate-400 font-bold uppercase tracking-wider\">\u0e42\u0e2a\u0e15\u0e2f \u0e17\u0e35\u0e48\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01:<\/span>\n                            <div class=\"text-right\">\n                                <span class=\"inline-block text-xs font-semibold ${brokenCount > 0 ? 'text-amber-500 bg-amber-50 border border-amber-100' : 'text-emerald-500 bg-emerald-50 border border-emerald-100'} px-3 py-1.5 rounded-xl\">\n                                    \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ${room.assets.length} \u0e0a\u0e19\u0e34\u0e14 ${brokenCount > 0 ? `(\u0e0a\u0e33\u0e23\u0e38\u0e14 ${brokenCount})` : '(\u0e1b\u0e01\u0e15\u0e34\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14)'}\n                                <\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                container.insertAdjacentHTML('beforeend', card);\n            });\n            lucide.createIcons();\n        }\n\n        \/\/ --- Render: User Pagination Buttons ---\n        function renderUserPaginationButtons(totalPages) {\n            const container = document.getElementById('user-pagination-buttons');\n            if (!container) return;\n            container.innerHTML = '';\n\n            const prevDisabled = state.userCurrentPage === 1;\n            container.innerHTML += `\n                <button onclick=\"changeUserPage(${state.userCurrentPage - 1})\" ${prevDisabled ? 'disabled' : ''} class=\"p-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 rounded-xl disabled:opacity-40 disabled:cursor-not-allowed transition-colors\">\n                    <i data-lucide=\"chevron-left\" class=\"w-4 h-4\"><\/i>\n                <\/button>\n            `;\n\n            for (let i = 1; i <= totalPages; i++) {\n                const isActive = state.userCurrentPage === i;\n                const btnClass = isActive \n                    ? \"px-3.5 py-1.5 bg-brand-500 text-white font-semibold text-xs border border-brand-500 rounded-xl shadow-xs transition-all\"\n                    : \"px-3.5 py-1.5 bg-white hover:bg-slate-50 text-slate-600 font-semibold text-xs border border-slate-200 rounded-xl transition-all\";\n                \n                container.innerHTML += `\n                    <button onclick=\"changeUserPage(${i})\" class=\"${btnClass}\">${i}<\/button>\n                `;\n            }\n\n            const nextDisabled = state.userCurrentPage === totalPages;\n            container.innerHTML += `\n                <button onclick=\"changeUserPage(${state.userCurrentPage + 1})\" ${nextDisabled ? 'disabled' : ''} class=\"p-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 rounded-xl disabled:opacity-40 disabled:cursor-not-allowed transition-colors\">\n                    <i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i>\n                <\/button>\n            `;\n            lucide.createIcons();\n        }\n\n        function changeUserPage(page) {\n            state.userCurrentPage = page;\n            renderUserRooms();\n        }\n\n        function changeUserRowsLimit(limit) {\n            state.userRowsLimit = parseInt(limit);\n            state.userCurrentPage = 1;\n            renderUserRooms();\n        }\n\n        function resetToFirstPageAndFilterUser() {\n            state.userCurrentPage = 1;\n            filterUserRooms();\n        }\n\n        \/\/ --- Render: Admin Control Table List with Search, Filtering, and Pagination applied ---\n        function renderAdminRoomList() {\n            const container = document.getElementById('admin-room-list');\n            if (!container) return;\n            container.innerHTML = '';\n\n            let filtered = state.rooms.filter(room => {\n                const query = (state.adminSearchQuery || '').toLowerCase();\n                const matchesSearch = room.name.toLowerCase().includes(query) || \n                                      String(room.number).includes(query) ||\n                                      room.building.toLowerCase().includes(query) ||\n                                      room.type.toLowerCase().includes(query);\n                \n                const matchesBuilding = state.adminBuildingFilter === 'all' || room.building === state.adminBuildingFilter;\n                const matchesType = state.adminTypeFilter === 'all' || room.type === state.adminTypeFilter;\n                const matchesStatus = state.adminStatusFilter === 'all' || room.status === state.adminStatusFilter;\n\n                return matchesSearch && matchesBuilding && matchesType && matchesStatus;\n            });\n\n            \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e15\u0e31\u0e27\u0e19\u0e31\u0e1a\u0e08\u0e33\u0e19\u0e27\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e43\u0e2b\u0e49\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e07\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e23\u0e34\u0e07\u0e17\u0e38\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\n            const adminCounter = document.getElementById('admin-room-counter');\n            if (adminCounter) {\n                adminCounter.innerText = `${filtered.length} \u0e2b\u0e49\u0e2d\u0e07`;\n            }\n\n            \/\/ Pagination Logic\n            const totalItems = filtered.length;\n            const totalPages = Math.ceil(totalItems \/ state.adminRowsLimit) || 1;\n            \n            \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\n            if (state.adminCurrentPage > totalPages) {\n                state.adminCurrentPage = totalPages;\n            }\n            if (state.adminCurrentPage < 1) {\n                state.adminCurrentPage = 1;\n            }\n\n            const startIndex = (state.adminCurrentPage - 1) * state.adminRowsLimit;\n            const endIndex = Math.min(startIndex + state.adminRowsLimit, totalItems);\n            \n            const paginatedItems = filtered.slice(startIndex, endIndex);\n\n            const pagInfo = document.getElementById('admin-pagination-info');\n            if (pagInfo) {\n                if (totalItems > 0) {\n                    pagInfo.innerText = `\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 ${startIndex + 1}-${endIndex} \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ${totalItems} \u0e2b\u0e49\u0e2d\u0e07`;\n                } else {\n                    pagInfo.innerText = `\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 0-0 \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 0 \u0e2b\u0e49\u0e2d\u0e07`;\n                }\n            }\n\n            renderAdminPaginationButtons(totalPages);\n\n            if (paginatedItems.length === 0) {\n                container.innerHTML = `\n                    <div class=\"text-center py-12 text-slate-400 bg-slate-50\/50 rounded-2xl border border-dashed border-slate-200 p-8\">\n                        <i data-lucide=\"folder-open\" class=\"w-10 h-10 mx-auto mb-2 opacity-50\"><\/i>\n                        <p class=\"text-xs font-medium\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e15\u0e32\u0e21\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32<\/p>\n                    <\/div>\n                `;\n                lucide.createIcons();\n                return;\n            }\n\n            paginatedItems.forEach(room => {\n                let statusEmoji = \"\ud83d\udfe2\";\n                if (room.status === \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\") statusEmoji = \"\ud83d\udfe1\";\n                if (room.status === \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") statusEmoji = \"\ud83d\udd34\";\n\n                const rowHtml = `\n                    <div class=\"py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 group hover:bg-slate-50\/50 px-2 rounded-xl transition-all\">\n                        <div class=\"space-y-1\">\n                            <div class=\"flex items-center gap-2\">\n                                <span class=\"text-[10px] font-bold text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded\">${room.type}<\/span>\n                                <span class=\"text-[10px] text-slate-400 font-medium\">${room.building} (${room.seats || 0} \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07)<\/span>\n                                <span class=\"text-[10px] font-semibold text-slate-600\">${statusEmoji} ${room.status}<\/span>\n                            <\/div>\n                            <h4 class=\"text-sm font-bold text-slate-800\">${room.name} <span class=\"text-slate-400 font-normal\">(\u0e2b\u0e49\u0e2d\u0e07 #${room.number})<\/span><\/h4>\n                            <p class=\"text-[11px] text-slate-500 font-medium\">\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c: ${room.assets.map(a => `${a.name} (${a.working}\/${a.total})`).join(', ') || '\u0e44\u0e21\u0e48\u0e21\u0e35'}<\/p>\n                        <\/div>\n                        <div class=\"flex items-center gap-1.5 self-end sm:self-auto\">\n                            <button onclick=\"editAdminRoom('${room.id}')\" class=\"p-2 text-slate-500 hover:text-brand-500 bg-slate-50 hover:bg-brand-50 rounded-xl border border-slate-100 transition-all hover:scale-105\" title=\"\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2b\u0e49\u0e2d\u0e07\">\n                                <i data-lucide=\"edit-3\" class=\"w-4 h-4\"><\/i>\n                            <\/button>\n                            <button onclick=\"deleteAdminRoom('${room.id}')\" class=\"p-2 text-slate-500 hover:text-rose-500 bg-slate-50 hover:bg-rose-50 rounded-xl border border-slate-100 transition-all hover:scale-105\" title=\"\u0e25\u0e1a\u0e2b\u0e49\u0e2d\u0e07\">\n                                <i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                `;\n                container.insertAdjacentHTML('beforeend', rowHtml);\n            });\n            lucide.createIcons();\n        }\n\n        \/\/ --- Render: Admin Pagination Buttons ---\n        function renderAdminPaginationButtons(totalPages) {\n            const container = document.getElementById('admin-pagination-buttons');\n            if (!container) return;\n            container.innerHTML = '';\n\n            const prevDisabled = state.adminCurrentPage === 1;\n            container.innerHTML += `\n                <button onclick=\"changeAdminPage(${state.adminCurrentPage - 1})\" ${prevDisabled ? 'disabled' : ''} class=\"p-2 bg-white hover:bg-slate-100 border border-slate-200 rounded-xl disabled:opacity-40 disabled:cursor-not-allowed transition-colors\">\n                    <i data-lucide=\"chevron-left\" class=\"w-3.5 h-3.5\"><\/i>\n                <\/button>\n            `;\n\n            for (let i = 1; i <= totalPages; i++) {\n                const isActive = state.adminCurrentPage === i;\n                const btnClass = isActive \n                    ? \"px-3 py-1 bg-brand-500 text-white font-semibold text-[11px] border border-brand-500 rounded-xl shadow-xs transition-all\"\n                    : \"px-3 py-1 bg-white hover:bg-slate-100 text-slate-600 font-semibold text-[11px] border border-slate-200 rounded-xl transition-all\";\n                \n                container.innerHTML += `\n                    <button onclick=\"changeAdminPage(${i})\" class=\"${btnClass}\">${i}<\/button>\n                `;\n            }\n\n            const nextDisabled = state.adminCurrentPage === totalPages;\n            container.innerHTML += `\n                <button onclick=\"changeAdminPage(${state.adminCurrentPage + 1})\" ${nextDisabled ? 'disabled' : ''} class=\"p-2 bg-white hover:bg-slate-100 border border-slate-200 rounded-xl disabled:opacity-40 disabled:cursor-not-allowed transition-colors\">\n                    <i data-lucide=\"chevron-right\" class=\"w-3.5 h-3.5\"><\/i>\n                <\/button>\n            `;\n            lucide.createIcons();\n        }\n\n        function changeAdminPage(page) {\n            state.adminCurrentPage = page;\n            renderAdminRoomList();\n        }\n\n        function changeAdminRowsLimit(limit) {\n            state.adminRowsLimit = parseInt(limit);\n            state.adminCurrentPage = 1;\n            renderAdminRoomList();\n        }\n\n        function resetToFirstPageAndFilterAdmin() {\n            state.adminCurrentPage = 1;\n            filterAdminRooms();\n        }\n\n        \/\/ --- Filter logic (User Status Click) ---\n        function filterUserByStatus(status) {\n            state.userStatusFilter = status;\n            state.userCurrentPage = 1; \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\n            renderUserStatusPills(); \/\/ \u0e44\u0e2e\u0e44\u0e25\u0e17\u0e4c\u0e41\u0e17\u0e47\u0e1a\u0e1b\u0e38\u0e48\u0e21\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2a\u0e35\u0e43\u0e2b\u0e21\u0e48\n            renderUserRooms(); \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e49\u0e2d\u0e07\n        }\n\n        \/\/ --- Config Modal (Buildings, roomTypes, etc.) ---\n        function openConfigModal() {\n            document.getElementById('config-modal').classList.remove('hidden');\n            switchConfigCategory('building');\n        }\n\n        function closeConfigModal() {\n            document.getElementById('config-modal').classList.add('hidden');\n            populateAdminDropdowns();\n            populateUserDropdownFilters();\n            populateAdminDropdownFilters();\n            renderUserStatusPills();\n            renderAdminStatusPills();\n            \n            \/\/ \u0e04\u0e37\u0e19\u0e04\u0e48\u0e32\u0e0a\u0e48\u0e2d\u0e07\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n            const roomId = document.getElementById('admin-room-id').value;\n            if (roomId) {\n                const room = state.rooms.find(r => r.id === roomId);\n                if (room) {\n                    renderAdminEquipmentChecklist(room.assets);\n                } else {\n                    renderAdminEquipmentChecklist([]);\n                }\n            } else {\n                const currentCheckedAssets = [];\n                state.equipments.forEach((eqName, index) => {\n                    const chk = document.getElementById(`eq-chk-${index}`);\n                    if (chk && chk.checked) {\n                        const working = parseInt(document.getElementById(`eq-working-${index}`).value) || 0;\n                        const broken = parseInt(document.getElementById(`eq-broken-${index}`).value) || 0;\n                        currentCheckedAssets.push({\n                            name: eqName,\n                            total: working + broken,\n                            working: working,\n                            broken: broken\n                        });\n                    }\n                });\n                renderAdminEquipmentChecklist(currentCheckedAssets);\n            }\n            \n            renderUserRooms();\n            renderAdminRoomList();\n        }\n\n        function switchConfigCategory(cat) {\n            state.currentConfigCategory = cat;\n            document.querySelectorAll('.cfg-tab-btn').forEach(btn => {\n                btn.className = \"cfg-tab-btn py-1.5 text-[10px] font-semibold rounded-lg border text-center transition-all border-slate-200 text-slate-600 hover:bg-slate-50\";\n            });\n            document.getElementById(`cfg-btn-${cat}`).className = \"cfg-tab-btn py-1.5 text-[10px] font-semibold rounded-lg border text-center transition-all bg-brand-500 border-brand-500 text-white\";\n\n            renderConfigItems();\n        }\n\n        function renderConfigItems() {\n            const list = document.getElementById('config-items-list');\n            if (!list) return;\n            list.innerHTML = '';\n            let targetArray = getActiveConfigArray();\n\n            if (targetArray.length === 0) {\n                list.innerHTML = `<p class=\"text-xs text-slate-400 text-center py-4\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/p>`;\n                return;\n            }\n\n            targetArray.forEach((item, index) => {\n                const row = `\n                    <div class=\"flex items-center justify-between bg-slate-50 border border-slate-100 rounded-xl px-3 py-1.5 hover:bg-slate-100 transition-all text-xs\">\n                        <span class=\"text-slate-700 font-medium\">${item}<\/span>\n                        <button type=\"button\" onclick=\"deleteConfigItem(${index})\" class=\"text-slate-400 hover:text-rose-500 p-1 rounded-full hover:bg-slate-200\/50 transition-all\">\n                            <i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i>\n                        <\/button>\n                    <\/div>\n                `;\n                list.insertAdjacentHTML('beforeend', row);\n            });\n            lucide.createIcons();\n        }\n\n        function getActiveConfigArray() {\n            if (state.currentConfigCategory === 'building') return state.buildings;\n            if (state.currentConfigCategory === 'type') return state.roomTypes;\n            if (state.currentConfigCategory === 'status') return state.statuses;\n            if (state.currentConfigCategory === 'equipment') return state.equipments;\n            return [];\n        }\n\n        function addConfigItem() {\n            const val = document.getElementById('config-input').value.trim();\n            if (!val) {\n                showToast(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\", true);\n                return;\n            }\n\n            let arr = getActiveConfigArray();\n            if (arr.includes(val)) {\n                showToast(\"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e35\u0e49\u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\", true);\n                return;\n            }\n\n            arr.push(val);\n            document.getElementById('config-input').value = '';\n            showToast(\"\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\");\n            saveToCloud();\n            renderConfigItems();\n        }\n\n        function deleteConfigItem(index) {\n            let arr = getActiveConfigArray();\n            const removed = arr[index];\n            arr.splice(index, 1);\n            showToast(`\u0e19\u0e33 \"${removed}\" \u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27`);\n            saveToCloud();\n            renderConfigItems();\n        }\n\n        function populateAdminDropdowns() {\n            const bSelect = document.getElementById('admin-building');\n            const tSelect = document.getElementById('admin-type');\n            const sSelect = document.getElementById('admin-status');\n\n            if (bSelect) bSelect.innerHTML = state.buildings.map(b => `<option value=\"${b}\">${b}<\/option>`).join('');\n            if (tSelect) tSelect.innerHTML = state.roomTypes.map(t => `<option value=\"${t}\">${t}<\/option>`).join('');\n            if (sSelect) sSelect.innerHTML = state.statuses.map(s => `<option value=\"${s}\">${s}<\/option>`).join('');\n        }\n\n        \/\/ --- Filter logic (User View) ---\n        function filterUserRooms() {\n            const searchInput = document.getElementById('user-search');\n            const bldSelect = document.getElementById('user-filter-building');\n            const typSelect = document.getElementById('user-filter-type');\n\n            if (searchInput) state.userSearchQuery = searchInput.value;\n            if (bldSelect) state.userBuildingFilter = bldSelect.value;\n            if (typSelect) state.userTypeFilter = typSelect.value;\n            \n            renderUserRooms();\n        }\n\n        \/\/ --- Filter logic (Admin View) ---\n        function filterAdminRooms() {\n            const searchInput = document.getElementById('admin-search');\n            const bldSelect = document.getElementById('admin-filter-building');\n            const typSelect = document.getElementById('admin-filter-type');\n\n            if (searchInput) state.adminSearchQuery = searchInput.value;\n            if (bldSelect) state.adminBuildingFilter = bldSelect.value;\n            if (typSelect) state.adminTypeFilter = typSelect.value;\n\n            renderAdminRoomList();\n        }\n\n        \/\/ --- Room Detail Dialog Modal Drawer ---\n        function openDetailModal(id) {\n            const room = state.rooms.find(r => r.id === id);\n            if (!room) return;\n\n            document.getElementById('detail-title').innerText = room.name;\n            document.getElementById('detail-building').innerHTML = `<i data-lucide=\"building\" class=\"w-4 h-4 text-slate-400\"><\/i> ${room.building} (\u0e2b\u0e49\u0e2d\u0e07 #${room.number}) | <i data-lucide=\"users\" class=\"w-4 h-4 text-slate-400\"><\/i> ${room.seats || 0} \u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07`;\n            document.getElementById('detail-type-badge').innerText = room.type;\n\n            const statusNode = document.getElementById('detail-status');\n            let statusColorClass = \"bg-slate-50 text-slate-600 border-slate-200\";\n            let statusIcon = \"\ud83d\udfe2\";\n\n            if (room.status === \"\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                statusColorClass = \"bg-emerald-50 text-emerald-600 border-emerald-200\";\n                statusIcon = \"\ud83d\udfe2\";\n            } else if (room.status === \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\") {\n                statusColorClass = \"bg-amber-50 text-amber-600 border-amber-200\";\n                statusIcon = \"\ud83d\udfe1\";\n            } else if (room.status === \"\u0e44\u0e21\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\") {\n                statusColorClass = \"bg-rose-50 text-rose-600 border-rose-200\";\n                statusIcon = \"\ud83d\udd34\";\n            }\n            \n            statusNode.className = `text-xs font-bold border ${statusColorClass} px-3 py-1 rounded-full`;\n            statusNode.innerText = `${statusIcon} ${room.status}`;\n\n            const eqList = document.getElementById('detail-equipment-list');\n            if (eqList) {\n                eqList.innerHTML = '';\n\n                if (room.assets.length === 0) {\n                    eqList.innerHTML = `<p class=\"text-xs text-slate-400 text-center py-4\">\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e23\u0e30\u0e1a\u0e38\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07<\/p>`;\n                } else {\n                    room.assets.forEach(asset => {\n                        const isBroken = asset.broken > 0;\n                        const statusText = isBroken ? `\u0e1e\u0e1a\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e0a\u0e33\u0e23\u0e38\u0e14 ${asset.broken} \u0e0a\u0e34\u0e49\u0e19` : '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19';\n                        const statusColor = isBroken ? 'text-rose-500 bg-rose-50 border-rose-100' : 'text-emerald-500 bg-emerald-50 border-emerald-100';\n\n                        const itemHtml = `\n                            <div class=\"flex items-center justify-between p-3.5 bg-slate-50 rounded-2xl border border-slate-100 hover:bg-slate-100\/50 transition-all\">\n                                <div class=\"flex items-center gap-2.5\">\n                                    <div class=\"bg-white p-2 rounded-xl text-slate-400 border border-slate-100\">\n                                        <i data-lucide=\"${getIconName(asset.name)}\" class=\"w-4 h-4\"><\/i>\n                                    <\/div>\n                                    <div>\n                                        <h5 class=\"text-xs font-bold text-slate-800\">${asset.name}<\/h5>\n                                        <p class=\"text-[10px] text-slate-400 font-semibold\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14: ${asset.total} \u0e0a\u0e34\u0e49\u0e19<\/p>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"text-right\">\n                                    <span class=\"text-[10px] font-bold border ${statusColor} px-2.5 py-1 rounded-lg\">\n                                        ${statusText} (\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49 ${asset.working})\n                                    <\/span>\n                                <\/div>\n                            <\/div>\n                        `;\n                        eqList.insertAdjacentHTML('beforeend', itemHtml);\n                    });\n                }\n            }\n\n            document.getElementById('room-detail-modal').classList.remove('hidden');\n            lucide.createIcons();\n        }\n\n        function closeDetailModal() {\n            document.getElementById('room-detail-modal').classList.add('hidden');\n        }\n\n        function getIconName(name) {\n            const n = name.toLowerCase();\n            if (n.includes('\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e40\u0e15\u0e2d\u0e23\u0e4c') || n.includes('projector')) return 'projector';\n            if (n.includes('\u0e25\u0e33\u0e42\u0e1e\u0e07') || n.includes('speaker') || n.includes('sound')) return 'volume-2';\n            if (n.includes('\u0e44\u0e21\u0e04\u0e4c') || n.includes('\u0e44\u0e21\u0e42\u0e04\u0e23\u0e42\u0e1f\u0e19') || n.includes('mic')) return 'mic';\n            if (n.includes('\u0e08\u0e2d') || n.includes('screen') || n.includes('tv')) return 'monitor';\n            return 'package';\n        }\n\n        \/\/ --- Admin Handlers (Add, edit, delete room) ---\n        function handleAdminFormSubmit(event) {\n            event.preventDefault();\n\n            const roomId = document.getElementById('admin-room-id').value;\n            const rName = document.getElementById('admin-name').value;\n            const rNum = document.getElementById('admin-number').value;\n            const rSeats = parseInt(document.getElementById('admin-seats').value) || 0;\n            const rBld = document.getElementById('admin-building').value;\n            const rTyp = document.getElementById('admin-type').value;\n            const rSts = document.getElementById('admin-status').value;\n\n            const assets = [];\n            state.equipments.forEach((eqName, index) => {\n                const chk = document.getElementById(`eq-chk-${index}`);\n                if (chk && chk.checked) {\n                    const working = parseInt(document.getElementById(`eq-working-${index}`).value) || 0;\n                    const broken = parseInt(document.getElementById(`eq-broken-${index}`).value) || 0;\n                    const total = working + broken;\n\n                    assets.push({\n                        name: eqName,\n                        total: total,\n                        working: working,\n                        broken: broken\n                    });\n                }\n            });\n\n            if (roomId) {\n                const idx = state.rooms.findIndex(r => r.id === roomId);\n                if (idx !== -1) {\n                    state.rooms[idx] = {\n                        id: roomId,\n                        name: rName,\n                        number: rNum,\n                        seats: rSeats,\n                        building: rBld,\n                        type: rTyp,\n                        status: rSts,\n                        assets: assets\n                    };\n                    showToast(\"\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\");\n                }\n            } else {\n                const newRoom = {\n                    id: Date.now().toString(),\n                    name: rName,\n                    number: rNum,\n                    seats: rSeats,\n                    building: rBld,\n                    type: rTyp,\n                    status: rSts,\n                    assets: assets\n                };\n                state.rooms.unshift(newRoom);\n                showToast(\"\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27\");\n            }\n\n            resetAdminForm();\n            saveToCloud();\n            refreshViews();\n        }\n\n        function editAdminRoom(id) {\n            const room = state.rooms.find(r => r.id === id);\n            if (!room) return;\n\n            document.getElementById('admin-room-id').value = room.id;\n            document.getElementById('admin-name').value = room.name;\n            document.getElementById('admin-number').value = room.number;\n            document.getElementById('admin-seats').value = room.seats || 0;\n            document.getElementById('admin-building').value = room.building;\n            document.getElementById('admin-type').value = room.type;\n            document.getElementById('admin-status').value = room.status;\n\n            document.getElementById('admin-form-title').innerHTML = `\n                <i data-lucide=\"edit-3\" class=\"w-5 h-5 text-brand-500\"><\/i>\n                <span>\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2b\u0e49\u0e2d\u0e07: ${room.name}<\/span>\n            `;\n            document.getElementById('admin-btn-submit-text').innerText = \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\";\n            document.getElementById('btn-admin-cancel-edit').classList.remove('hidden');\n\n            renderAdminEquipmentChecklist(room.assets);\n            lucide.createIcons();\n\n            document.getElementById('admin-room-form').scrollIntoView({ behavior: 'smooth' });\n        }\n\n        function deleteAdminRoom(id) {\n            const room = state.rooms.find(r => r.id === id);\n            if (!room) return;\n\n            const confirmDel = confirm(`\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e2b\u0e49\u0e2d\u0e07 \"${room.name}\" \u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?\\n\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e08\u0e30\u0e2a\u0e39\u0e0d\u0e2b\u0e32\u0e22`);\n            if (confirmDel) {\n                state.rooms = state.rooms.filter(r => r.id !== id);\n                showToast(`\u0e25\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07 \"${room.name}\" \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27`);\n                saveToCloud();\n                refreshViews();\n            }\n        }\n\n        function resetAdminForm() {\n            document.getElementById('admin-room-form').reset();\n            document.getElementById('admin-room-id').value = '';\n            document.getElementById('admin-seats').value = '';\n            document.getElementById('admin-form-title').innerHTML = `\n                <i data-lucide=\"plus-circle\" class=\"w-5 h-5 text-brand-500\"><\/i>\n                <span>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2b\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/span>\n            `;\n            document.getElementById('admin-btn-submit-text').innerText = \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e49\u0e2d\u0e07\";\n            document.getElementById('btn-admin-cancel-edit').classList.add('hidden');\n            \n            renderAdminEquipmentChecklist();\n            lucide.createIcons();\n        }\n\n        \/\/ --- App Run Initialization ---\n        window.onload = function() {\n            loadFromPersistence();\n        };\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2b\u0e49\u0e2d\u0e07 \u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2d\u0e38\u0e1b\u0e01 [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-35263","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/35263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/comments?post=35263"}],"version-history":[{"count":1,"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/35263\/revisions"}],"predecessor-version":[{"id":35266,"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/35263\/revisions\/35266"}],"wp:attachment":[{"href":"https:\/\/cim.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/media?parent=35263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}