{"id":1044,"date":"2025-10-05T22:42:55","date_gmt":"2025-10-06T06:42:55","guid":{"rendered":"https:\/\/helpdesk.costbook.ph\/?page_id=1044"},"modified":"2025-12-04T16:34:09","modified_gmt":"2025-12-05T00:34:09","slug":"assets","status":"publish","type":"page","link":"https:\/\/helpdesk.costbook.ph\/index.php\/assets\/","title":{"rendered":"Assets"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1044\" class=\"elementor elementor-1044\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49efcdf e-con-full e-flex e-con e-parent\" data-id=\"49efcdf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82c8f1e elementor-widget elementor-widget-template\" data-id=\"82c8f1e\" data-element_type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<div data-elementor-type=\"page\" data-elementor-id=\"925\" class=\"elementor elementor-925\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7946887d e-con-full e-flex e-con e-parent\" data-id=\"7946887d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-64491c90 e-con-full e-flex e-con e-child\" data-id=\"64491c90\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19812326 elementor-widget elementor-widget-image\" data-id=\"19812326\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/helpdesk.costbook.ph\/wp-content\/uploads\/2025\/09\/gffggfgf-removebg-preview-300x169.png\" class=\"attachment-medium size-medium wp-image-297\" alt=\"\" srcset=\"https:\/\/helpdesk.costbook.ph\/wp-content\/uploads\/2025\/09\/gffggfgf-removebg-preview-300x169.png 300w, https:\/\/helpdesk.costbook.ph\/wp-content\/uploads\/2025\/09\/gffggfgf-removebg-preview.png 666w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2644b23e e-con-full e-flex e-con e-child\" data-id=\"2644b23e\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2beff56e elementor-widget-tablet__width-initial elementor-widget__width-initial eael_simple_menu_hamburger_disable_selected_menu_no eael-simple-menu-hamburger-align-right eael-hamburger--tablet elementor-widget elementor-widget-eael-simple-menu\" data-id=\"2beff56e\" data-element_type=\"widget\" data-widget_type=\"eael-simple-menu.default\">\n\t\t\t\t\t<style>\n                        @media screen and (max-width: 1024px) {\n                            .eael-hamburger--tablet {\n                                .eael-simple-menu-horizontal,\n                                .eael-simple-menu-vertical {\n                                    display: none;\n                                }\n                            }\n                            .eael-hamburger--tablet {\n                                .eael-simple-menu-container .eael-simple-menu-toggle {\n                                    display: block;\n                                }\n                            }\n                        }\n                    <\/style>            <div data-hamburger-icon=\"&lt;svg aria-hidden=&quot;true&quot; class=&quot;e-font-icon-svg e-fas-bars&quot; viewBox=&quot;0 0 448 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" data-indicator-icon=\"&lt;svg aria-hidden=&quot;true&quot; class=&quot;e-font-icon-svg e-fas-angle-down&quot; viewBox=&quot;0 0 320 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" data-dropdown-indicator-icon=\"&lt;svg class=&quot;e-font-icon-svg e-fas-angle-down&quot; viewBox=&quot;0 0 320 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" class=\"eael-simple-menu-container eael-simple-menu-align-center eael-simple-menu-dropdown-align-left preset-1\" data-hamburger-breakpoints=\"{&quot;mobile&quot;:&quot;Mobile Portrait (&gt; 767px)&quot;,&quot;tablet&quot;:&quot;Tablet Portrait (&gt; 1024px)&quot;,&quot;desktop&quot;:&quot;Desktop (&gt; 2400px)&quot;,&quot;none&quot;:&quot;None&quot;}\" data-hamburger-device=\"tablet\">\n                <ul id=\"menu-main-menu\" class=\"eael-simple-menu eael-simple-menu-dropdown-animate-to-top eael-simple-menu-indicator eael-simple-menu-horizontal\"><li id=\"menu-item-875\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-875\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/dashboard-2-2\/\">Home<\/a><\/li>\n<li id=\"menu-item-878\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-878\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/elementor-131\/\">Ticket<\/a><\/li>\n<li id=\"menu-item-1004\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1004\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/employees\/\">Employees<\/a><\/li>\n<li id=\"menu-item-1057\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1057\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/assets\/\">Assets<\/a><\/li>\n<li id=\"menu-item-996\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-996\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/category\/\">Category<\/a><\/li>\n<li id=\"menu-item-876\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-876\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/report-analytics\/\">Reports<\/a><\/li>\n<li id=\"menu-item-877\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-877\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/dashboard-2\/\">Settings<\/a><\/li>\n<\/ul>                <button class=\"eael-simple-menu-toggle\">\n                    <span class=\"sr-only \">Hamburger Toggle Menu<\/span>\n                    <svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-bars\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\"><\/path><\/svg>                <\/button>\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-86608cd e-con-full e-flex e-con e-parent\" data-id=\"86608cd\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-17189b1 e-con-full e-flex e-con e-child\" data-id=\"17189b1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-5515639 e-con-full e-flex e-con e-child\" data-id=\"5515639\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a2e36a9 e-con-full e-flex e-con e-child\" data-id=\"a2e36a9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1088a78 elementor-widget elementor-widget-heading\" data-id=\"1088a78\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Assets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d4c322 e-n-tabs-mobile elementor-widget elementor-widget-n-tabs\" data-id=\"7d4c322\" data-element_type=\"widget\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"131384098\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t<button id=\"e-n-tab-title-1313840981\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-1313840981\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tComputers\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840982\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840982\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tMonitors\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840983\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840983\" style=\"--n-tabs-title-order: 3;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tSoftware\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840984\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840984\" style=\"--n-tabs-title-order: 4;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tNetwork Devices \t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840985\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840985\" style=\"--n-tabs-title-order: 5;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPrinters\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840986\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840986\" style=\"--n-tabs-title-order: 6;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPeripherals\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840987\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"7\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840987\" style=\"--n-tabs-title-order: 7;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tCartridges\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840988\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"8\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840988\" style=\"--n-tabs-title-order: 8;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tConsumables\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-1313840989\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"9\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1313840989\" style=\"--n-tabs-title-order: 9;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPhones\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409810\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"10\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409810\" style=\"--n-tabs-title-order: 10;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tRacks\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409811\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"11\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409811\" style=\"--n-tabs-title-order: 11;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tEnclosures\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409812\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"12\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409812\" style=\"--n-tabs-title-order: 12;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPDUs\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409813\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"13\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409813\" style=\"--n-tabs-title-order: 13;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPassive Devices\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409814\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"14\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409814\" style=\"--n-tabs-title-order: 14;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tUnmanaged Assets\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409815\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"15\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409815\" style=\"--n-tabs-title-order: 15;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tCables\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-13138409816\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"16\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-13138409816\" style=\"--n-tabs-title-order: 16;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tSimcards Items\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-1313840981\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840981\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-1db5c60 e-con-full e-flex e-con e-child\" data-id=\"1db5c60\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e503ab0 elementor-widget elementor-widget-html\" data-id=\"e503ab0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Inventory Management<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 100%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n\/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #settingsModal th, #settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" onclick=\"openModal()\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"inventoryTable\">\r\n    <thead>\r\n      <tr id=\"tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n  <\/table>\r\n\r\n  <table id=\"trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<!-- Add\/Edit Modal -->\r\n<div id=\"addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"closeAddModal\">&times;<\/span>\r\n    <h2 id=\"modalTitle\">ADD<\/h2>\r\n    <form id=\"addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" onclick=\"closeModal()\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!--SETTINGS MODAL-->\r\n<div id=\"settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" onclick=\"closeSettingsModal()\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" onclick=\"openAddField()\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"settingsBody\">\r\n        <tr><td>Name<\/td><td style=\"text-align:right;\"><button class=\"delete-icon\" onclick=\"deleteRow(this)\">\u2716\ufe0f<\/button><\/td><\/tr>\r\n        <tr><td>Status<\/td><td style=\"text-align:right;\"><button class=\"delete-icon\" onclick=\"deleteRow(this)\">\u2716\ufe0f<\/button><\/td><\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2795 Add New Field Modal -->\r\n<div id=\"addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" onclick=\"closeAddField()\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" onclick=\"saveNewField()\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  const modal = document.getElementById(\"addModal\");\r\n  const modalTitle = document.getElementById(\"modalTitle\");\r\n  const tableBody = document.querySelector(\"#inventoryTable tbody\");\r\n  const trashTableBody = document.querySelector(\"#trashTable tbody\");\r\n  const trashToggle = document.getElementById(\"trashToggle\");\r\n\r\n  let tickets = JSON.parse(localStorage.getItem(\"inventoryData\")) || [];\r\n  let trashData = JSON.parse(localStorage.getItem(\"trashData\")) || [];\r\nlet tableFields = JSON.parse(localStorage.getItem(\"tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\nlet editIndex = null;\r\n\r\nif (!tableFields.includes(\"Name\")) {\r\n  tableFields.unshift(\"Name\");\r\n} else {\r\n  if (tableFields[0] !== \"Name\") {\r\n    tableFields = tableFields.filter(f => f !== \"Name\");\r\n    tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\nfunction openModal(){ modal.style.display=\"block\"; }\r\nfunction closeModal(){ modal.style.display=\"none\"; }\r\n\r\nfunction saveTableFields() {\r\n  localStorage.setItem(\"tableFields\", JSON.stringify(tableFields));\r\n  renderTableHeaders();\r\n  renderTable();\r\n}\r\n\r\nfunction renderTableHeaders() {\r\n  if (!tableFields.includes(\"Name\")) {\r\n    tableFields.unshift(\"Name\");\r\n  } else if (tableFields[0] !== \"Name\") {\r\n    tableFields = tableFields.filter(f => f !== \"Name\");\r\n    tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n  \r\n  function openModal(edit = false, index = null) {\r\n  modal.style.display = \"block\";\r\n  modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = tickets[index];\r\n    document.getElementById(\"name\").value = rec.name;\r\n    document.getElementById(\"department\").value = rec.department;\r\n    document.getElementById(\"status\").value = rec.status;\r\n    document.getElementById(\"asset\").value = rec.asset;\r\n    document.getElementById(\"type\").value = rec.type;\r\n    document.getElementById(\"manufacturer\").value = rec.manufacturer;\r\n    document.getElementById(\"model\").value = rec.model;\r\n    document.getElementById(\"location\").value = rec.location;\r\n    document.getElementById(\"incharge\").value = rec.incharge;\r\n  } else {\r\n    document.getElementById(\"addForm\").reset();\r\n  }\r\n}\r\n\r\nfunction closeModal() {\r\n  modal.style.display = \"none\";\r\n  document.getElementById(\"addForm\").reset();\r\n}\r\n\r\n  document.querySelector(\".add-location-btn\").addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n  document.getElementById(\"addForm\").addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n    const record = {\r\n    name: document.getElementById(\"name\").value,\r\n    department: document.getElementById(\"department\").value,\r\n    status: document.getElementById(\"status\").value,\r\n    asset: document.getElementById(\"asset\").value,\r\n    type: document.getElementById(\"type\").value,\r\n    manufacturer: document.getElementById(\"manufacturer\").value,\r\n    model: document.getElementById(\"model\").value,\r\n    location: document.getElementById(\"location\").value,\r\n    incharge: document.getElementById(\"incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n    if (editIndex !== null) {\r\n    tickets[editIndex] = record;\r\n    editIndex = null;\r\n  } else {\r\n    tickets.push(record);\r\n  }\r\n\r\n   localStorage.setItem(\"inventoryData\", JSON.stringify(tickets));\r\n  renderTable();\r\n  closeModal();\r\n});\r\n\r\n  function deleteRecord(index) {\r\n  const record = tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  trashData.push(record);\r\n  localStorage.setItem(\"inventoryData\", JSON.stringify(tickets));\r\n  localStorage.setItem(\"trashData\", JSON.stringify(trashData));\r\n  renderTable();\r\n  renderTrash();\r\n}\r\n\r\n  function renderTable() {\r\n    tableBody.innerHTML = \"\";\r\n    tickets.forEach((r, i) => {\r\n      let rowHTML = \" \";\r\n\r\n       tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n   \r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n    tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n  function renderTrash() {\r\n  trashTableBody.innerHTML = \"\";\r\n  trashData.forEach((r, i) => {\r\n    trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn}<\/td>\r\n        <td>\r\n          <button class=\"action-btn delete-btn\" onclick=\"deletePermanently(${i})\">\ud83d\uddd1\ufe0f<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\n  function deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    trashData.splice(index, 1);\r\n    localStorage.setItem(\"trashData\", JSON.stringify(trashData));\r\n    renderTrash();\r\n  }\r\n}\r\n\r\nconst datetimeModal = document.getElementById(\"datetimeModal\");\r\nconst datetimeInput = document.getElementById(\"datetimeInput\");\r\nconst closeDatetime = document.getElementById(\"closeDatetime\");\r\nconst saveDatetime = document.getElementById(\"saveDatetime\");\r\nlet editingRow = null;\r\n\r\nfunction openDateTime(index) {\r\n  editingRow = index;\r\n  datetimeModal.style.display = \"block\";\r\n  datetimeInput.value = \"\";\r\n}\r\n\r\nsaveDatetime.onclick = () => {\r\n  if (editingRow !== null && datetimeInput.value) {\r\n    const selectedDate = new Date(datetimeInput.value).toLocaleString();\r\n    tickets[editingRow].lastupdate = selectedDate;\r\n    localStorage.setItem(\"inventoryData\", JSON.stringify(tickets));\r\n    renderTable();\r\n    datetimeModal.style.display = \"none\";\r\n    editingRow = null;\r\n  }\r\n};\r\ncloseDatetime.onclick = () => datetimeModal.style.display = \"none\";\r\nwindow.onclick = e => {\r\n  if (e.target === datetimeModal) datetimeModal.style.display = \"none\";\r\n};\r\n\r\n\r\n trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"inventoryTable\").style.display = trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"trashTable\").style.display = trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n  window.onload = () => { renderTableHeaders(); renderTable(); renderTrash(); };\r\n\r\nconst settingsModal = document.getElementById(\"settingsModal\");\r\nconst settingsIcon = document.getElementById(\"settingsIcon\");\r\nconst addPopup = document.getElementById(\"addPopup\");\r\nconst settingsTableBody = document.querySelector(\"#settingsBody\");\r\nconst closeAddModalBtn = document.getElementById(\"closeAddModal\");\r\nlet draggedRow = null;\r\n\r\nsettingsIcon.onclick = () => {\r\n  settingsModal.style.display = \"block\";\r\n  renderSettingsTable();\r\n};\r\n\r\n\r\nfunction closeSettingsModal() {\r\n  settingsModal.style.display = \"none\";\r\n}\r\n\r\n\/\/ function closeAddModal() {\r\n\/\/   settingsModal.style.display = \"none\";\r\n\/\/ }  \r\n\r\nif (closeAddModalBtn) {\r\n    closeAddModalBtn.addEventListener(\"click\", () => {\r\n        closeModal(); \/\/ properly closes the Add\/Edit modal\r\n    });\r\n}\r\n\r\nconst addFieldModal = document.getElementById(\"addFieldModal\");\r\n\r\nfunction closeAddField() {\r\n  if (addFieldModal) addFieldModal.style.display = \"none\";\r\n}\r\n\r\nfunction openAddField() {\r\n  if (addFieldModal) addFieldModal.style.display = \"flex\";\r\n}\r\nfunction closePopup() {\r\n  if (addPopup) addPopup.style.display = \"none\";\r\n}\r\n\r\nfunction renderSettingsTable() {\r\n  const body = document.getElementById(\"settingsBody\");\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='deleteRow(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction addNewField() {\r\n  const val = document.getElementById(\"newFieldInput\") ? document.getElementById(\"newFieldInput\").value.trim() : \"\";\r\n  if (val && !tableFields.includes(val)) {\r\n    tableFields.splice(tableFields.length - 1, 0, val);\r\n    saveTableFields();\r\n    renderSettingsTable();\r\n    renderTableHeaders();\r\n    renderTable();\r\n    if (document.getElementById(\"newFieldInput\")) document.getElementById(\"newFieldInput\").value = \"\";\r\n    closePopup();\r\n  } else {\r\n    alert(\"Field already exists or invalid input.\");\r\n  }\r\n}\r\n\r\nfunction saveNewField() {\r\n  const fieldNameElem = document.getElementById(\"newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    tableFields.push(fieldName);\r\n  } else {\r\n    tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (addFieldModal) addFieldModal.style.display = \"none\";\r\n\r\n  renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\nfunction deleteRow(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  tableFields = tableFields.filter(f => f !== field);\r\n  saveTableFields();\r\n  renderSettingsTable();\r\n  renderTableHeaders();\r\n  renderTable();\r\n}\r\n\r\nif (settingsTableBody) {\r\n  settingsTableBody.addEventListener(\"dragstart\", e => {\r\n    draggedRow = e.target.closest(\"tr\");\r\n    if (draggedRow) draggedRow.classList.add(\"dragging\");\r\n  });\r\n  settingsTableBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = getDragAfterElement(settingsTableBody, e.clientY);\r\n    const draggable = document.querySelector(\".dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        settingsTableBody.appendChild(draggable);\r\n      } else {\r\n        settingsTableBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  settingsTableBody.addEventListener(\"dragend\", () => {\r\n    if (draggedRow) draggedRow.classList.remove(\"dragging\");\r\n    draggedRow = null;\r\n    updateFieldOrder(); \r\n  });\r\n}\r\n\r\nfunction getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = document.getElementById(\"settingsBody\");\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  tableFields = newOrder;\r\n  saveTableFields();\r\n  renderTableHeaders();\r\n  renderTable();\r\n}\r\n\r\nfunction saveSettings() {\r\n  const newOrder = [];\r\n  const body = document.getElementById(\"settingsBody\");\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  tableFields = newOrder;\r\n  saveTableFields();\r\n  renderTableHeaders();\r\n  renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\ndocument.getElementById(\"searchInput\").addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\nwindow.onclick = (event) => {\r\n    if (event.target === settingsModal) settingsModal.style.display = \"none\";\r\n    if (event.target === addFieldModal) addFieldModal.style.display = \"none\";\r\n  };\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840982\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840982\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-d8f0492 e-con-full e-flex e-con e-child\" data-id=\"d8f0492\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1be1d08 elementor-widget elementor-widget-html\" data-id=\"1be1d08\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Monitor<\/title>\r\n<style>\r\n  \/* --- EXACT SAME STYLES AS PROVIDED (no visual\/design changes) --- *\/\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #monitor_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #monitor_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #monitor_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #monitor_settingsModal th, #monitor_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #monitor_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #monitor_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #monitor_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #monitor_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #monitor_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #monitor_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #monitor_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #monitor_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #monitor_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #monitor_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #monitor_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #monitor_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #monitor_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #monitor_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"monitor_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"monitor_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"monitor_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"monitor_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"monitor_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"monitor_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"monitor_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"monitor_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<!-- Add\/Edit Modal -->\r\n<div id=\"monitor_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"monitor_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"monitor_modalTitle\">ADD<\/h2>\r\n    <form id=\"monitor_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"monitor_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"monitor_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"monitor_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"monitor_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"monitor_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"monitor_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"monitor_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"monitor_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"monitor_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"monitor_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"monitor_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"monitor_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"monitor_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"monitor_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"monitor_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"monitor_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!--SETTINGS MODAL-->\r\n<div id=\"monitor_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"monitor_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"monitor_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"monitor_settingsBody\">\r\n        <!-- rendered dynamically -->\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2795 Add New Field Modal -->\r\n<div id=\"monitor_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"monitor_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"monitor_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"monitor_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* -------------------- MONITOR-SCOPED VARIABLES -------------------- *\/\r\nconst monitor_container = document.getElementById(\"monitor_container\");\r\n\r\nlet monitor_tickets = JSON.parse(localStorage.getItem(\"monitor_inventoryData\")) || [];\r\nlet monitor_trashData = JSON.parse(localStorage.getItem(\"monitor_trashData\")) || [];\r\nlet monitor_tableFields = JSON.parse(localStorage.getItem(\"monitor_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet monitor_editIndex = null;\r\n\r\n\/* ensure 'Name' is always the first column *\/\r\nif (!monitor_tableFields.includes(\"Name\")) {\r\n  monitor_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (monitor_tableFields[0] !== \"Name\") {\r\n    monitor_tableFields = monitor_tableFields.filter(f => f !== \"Name\");\r\n    monitor_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* -------------------- ELEMENT REFERENCES -------------------- *\/\r\nconst monitor_addBtn = document.getElementById(\"monitor_addBtn\");\r\nconst monitor_addModal = document.getElementById(\"monitor_addModal\");\r\nconst monitor_modalTitle = document.getElementById(\"monitor_modalTitle\");\r\nconst monitor_addForm = document.getElementById(\"monitor_addForm\");\r\nconst monitor_tableBody = document.querySelector(\"#monitor_inventoryTable tbody\");\r\nconst monitor_trashTableBody = document.querySelector(\"#monitor_trashTable tbody\");\r\nconst monitor_trashToggle = document.getElementById(\"monitor_trashToggle\");\r\nconst monitor_searchInput = document.getElementById(\"monitor_searchInput\");\r\n\r\nconst monitor_settingsModal = document.getElementById(\"monitor_settingsModal\");\r\nconst monitor_settingsIcon = document.getElementById(\"monitor_settingsIcon\");\r\nconst monitor_settingsBody = document.getElementById(\"monitor_settingsBody\");\r\n\r\nconst monitor_addFieldModal = document.getElementById(\"monitor_addFieldModal\");\r\nconst monitor_openAddFieldBtn = document.getElementById(\"monitor_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst monitor_datetimeModal = document.getElementById(\"monitor_datetimeModal\");\r\nconst monitor_datetimeInput = document.getElementById(\"monitor_datetimeInput\");\r\nconst monitor_saveDatetime = document.getElementById(\"monitor_saveDatetime\");\r\nconst monitor_closeDatetime = document.getElementById(\"monitor_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst monitor_closeAddModalBtn = document.getElementById(\"monitor_closeAddModal\");\r\nconst monitor_cancelBtn = document.getElementById(\"monitor_cancelBtn\");\r\nconst monitor_closeSettingsModalBtn = document.getElementById(\"monitor_closeSettingsModal\");\r\nconst monitor_closeAddFieldBtn = document.getElementById(\"monitor_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst monitor_addLocationBtn = document.getElementById(\"monitor_addLocationBtn\");\r\n\r\n\/* settings save button will be appended programmatically *\/\r\n\r\n\/* --------------- MONITOR: Modal open\/close --------------- *\/\r\nfunction monitor_openModal(edit = false, index = null) {\r\n  monitor_addModal.style.display = \"block\";\r\n  monitor_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  monitor_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = monitor_tickets[index];\r\n    document.getElementById(\"monitor_name\").value = rec.name || \"\";\r\n    document.getElementById(\"monitor_department\").value = rec.department || \"\";\r\n    document.getElementById(\"monitor_status\").value = rec.status || \"\";\r\n    document.getElementById(\"monitor_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"monitor_type\").value = rec.type || \"\";\r\n    document.getElementById(\"monitor_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"monitor_model\").value = rec.model || \"\";\r\n    document.getElementById(\"monitor_location\").value = rec.location || \"\";\r\n    document.getElementById(\"monitor_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    monitor_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction monitor_closeModal() {\r\n  monitor_addModal.style.display = \"none\";\r\n  monitor_addForm.reset();\r\n  monitor_editIndex = null;\r\n}\r\n\r\n\/* --------------- Add location --------------- *\/\r\nmonitor_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"monitor_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* --------------- Add\/Edit form submit --------------- *\/\r\nmonitor_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"monitor_name\").value,\r\n    department: document.getElementById(\"monitor_department\").value,\r\n    status: document.getElementById(\"monitor_status\").value,\r\n    asset: document.getElementById(\"monitor_asset\").value,\r\n    type: document.getElementById(\"monitor_type\").value,\r\n    manufacturer: document.getElementById(\"monitor_manufacturer\").value,\r\n    model: document.getElementById(\"monitor_model\").value,\r\n    location: document.getElementById(\"monitor_location\").value,\r\n    incharge: document.getElementById(\"monitor_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (monitor_editIndex !== null && monitor_editIndex !== undefined) {\r\n    monitor_tickets[monitor_editIndex] = record;\r\n    monitor_editIndex = null;\r\n  } else {\r\n    monitor_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"monitor_inventoryData\", JSON.stringify(monitor_tickets));\r\n  monitor_renderTable();\r\n  monitor_closeModal();\r\n});\r\n\r\n\/* --------------- Delete (move to trash) --------------- *\/\r\nfunction monitor_deleteRecord(index) {\r\n  const record = monitor_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  monitor_trashData.push(record);\r\n  localStorage.setItem(\"monitor_inventoryData\", JSON.stringify(monitor_tickets));\r\n  localStorage.setItem(\"monitor_trashData\", JSON.stringify(monitor_trashData));\r\n  monitor_renderTable();\r\n  monitor_renderTrash();\r\n}\r\n\r\n\/* --------------- Render main table --------------- *\/\r\nfunction monitor_renderTableHeaders() {\r\n  if (!monitor_tableFields.includes(\"Name\")) {\r\n    monitor_tableFields.unshift(\"Name\");\r\n  } else if (monitor_tableFields[0] !== \"Name\") {\r\n    monitor_tableFields = monitor_tableFields.filter(f => f !== \"Name\");\r\n    monitor_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#monitor_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  monitor_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction monitor_renderTable() {\r\n  monitor_tableBody.innerHTML = \"\";\r\n  monitor_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    monitor_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"monitor_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"monitor_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"monitor_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    monitor_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* --------------- Trash table --------------- *\/\r\nfunction monitor_renderTrash() {\r\n  monitor_trashTableBody.innerHTML = \"\";\r\n  monitor_trashData.forEach((r, i) => {\r\n    monitor_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn}<\/td>\r\n        <td>\r\n          <button class=\"action-btn delete-btn\" onclick=\"monitor_deletePermanently(${i})\">\ud83d\uddd1\ufe0f<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction monitor_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    monitor_trashData.splice(index, 1);\r\n    localStorage.setItem(\"monitor_trashData\", JSON.stringify(monitor_trashData));\r\n    monitor_renderTrash();\r\n  }\r\n}\r\n\r\n\/* --------------- Date\/time modal --------------- *\/\r\nlet monitor_editingRowForDate = null;\r\nfunction monitor_openDateTime(index) {\r\n  monitor_editingRowForDate = index;\r\n  monitor_datetimeModal.style.display = \"block\";\r\n  monitor_datetimeInput.value = \"\";\r\n}\r\n\r\nmonitor_saveDatetime.onclick = () => {\r\n  if (monitor_editingRowForDate !== null && monitor_datetimeInput.value) {\r\n    const selectedDate = new Date(monitor_datetimeInput.value).toLocaleString();\r\n    monitor_tickets[monitor_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"monitor_inventoryData\", JSON.stringify(monitor_tickets));\r\n    monitor_renderTable();\r\n    monitor_datetimeModal.style.display = \"none\";\r\n    monitor_editingRowForDate = null;\r\n  }\r\n};\r\nmonitor_closeDatetime.onclick = () => monitor_datetimeModal.style.display = \"none\";\r\n\r\n\/* --------------- Trash toggle --------------- *\/\r\nmonitor_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"monitor_inventoryTable\").style.display = monitor_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"monitor_trashTable\").style.display = monitor_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* --------------- Search filter --------------- *\/\r\nmonitor_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#monitor_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* --------------- Settings modal (fields + drag reorder) --------------- *\/\r\nfunction monitor_renderSettingsTable() {\r\n  const body = monitor_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  monitor_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='monitor_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction monitor_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  monitor_tableFields = monitor_tableFields.filter(f => f !== field);\r\n  monitor_saveTableFields();\r\n  monitor_renderSettingsTable();\r\n  monitor_renderTableHeaders();\r\n  monitor_renderTable();\r\n}\r\n\r\nfunction monitor_saveTableFields() {\r\n  localStorage.setItem(\"monitor_tableFields\", JSON.stringify(monitor_tableFields));\r\n  monitor_renderTableHeaders();\r\n  monitor_renderTable();\r\n}\r\n\r\nmonitor_settingsIcon.onclick = () => {\r\n  monitor_settingsModal.style.display = \"block\";\r\n  monitor_renderSettingsTable();\r\n};\r\n\r\n\/* Drag & drop reorder for settings *\/\r\nlet monitor_draggedRow = null;\r\nif (monitor_settingsBody) {\r\n  monitor_settingsBody.addEventListener(\"dragstart\", e => {\r\n    monitor_draggedRow = e.target.closest(\"tr\");\r\n    if (monitor_draggedRow) monitor_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  monitor_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = monitor_getDragAfterElement(monitor_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#monitor_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        monitor_settingsBody.appendChild(draggable);\r\n      } else {\r\n        monitor_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  monitor_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (monitor_draggedRow) monitor_draggedRow.classList.remove(\"dragging\");\r\n    monitor_draggedRow = null;\r\n    monitor_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction monitor_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction monitor_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = monitor_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  monitor_tableFields = newOrder;\r\n  monitor_saveTableFields();\r\n  monitor_renderTableHeaders();\r\n  monitor_renderTable();\r\n}\r\n\r\nfunction monitor_saveSettings() {\r\n  const newOrder = [];\r\n  const body = monitor_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  monitor_tableFields = newOrder;\r\n  monitor_saveTableFields();\r\n  monitor_renderTableHeaders();\r\n  monitor_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside monitor settings modal (if not present) *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#monitor_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"monitor_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"monitor_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = monitor_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* --------------- Add field modal --------------- *\/\r\nmonitor_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (monitor_addFieldModal) monitor_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nmonitor_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (monitor_addFieldModal) monitor_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"monitor_saveNewFieldBtn\").addEventListener(\"click\", saveNewMonitorField);\r\n\r\nfunction saveNewMonitorField() {\r\n  const fieldNameElem = document.getElementById(\"monitor_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (monitor_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = monitor_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    monitor_tableFields.push(fieldName);\r\n  } else {\r\n    monitor_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  monitor_saveTableFields();\r\n\r\n  \/\/ add cells with placeholder to existing rows\r\n  const rows = document.querySelectorAll(\"#monitor_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (monitor_addFieldModal) monitor_addFieldModal.style.display = \"none\";\r\n\r\n  monitor_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* --------------- Close\/overlay behavior --------------- *\/\r\nmonitor_closeAddModalBtn.addEventListener(\"click\", monitor_closeModal);\r\nmonitor_cancelBtn.addEventListener(\"click\", monitor_closeModal);\r\nmonitor_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  monitor_settingsModal.style.display = \"none\";\r\n});\r\nmonitor_closeDatetime.addEventListener(\"click\", () => {\r\n  monitor_datetimeModal.style.display = \"none\";\r\n});\r\nmonitor_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  monitor_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === monitor_addModal) monitor_closeModal();\r\n  if (target === monitor_settingsModal) monitor_settingsModal.style.display = \"none\";\r\n  if (target === monitor_addFieldModal) monitor_addFieldModal.style.display = \"none\";\r\n  if (target === monitor_datetimeModal) monitor_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* --------------- monitor init and wiring --------------- *\/\r\nmonitor_addBtn.addEventListener(\"click\", () => monitor_openModal(false, null));\r\n\r\nfunction monitor_init() {\r\n  monitor_renderTableHeaders();\r\n  monitor_renderTable();\r\n  monitor_renderTrash();\r\n\r\n  \/\/ Restore trash toggle state? keep default off\r\n  document.getElementById(\"monitor_inventoryTable\").style.display = monitor_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"monitor_trashTable\").style.display = monitor_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\n\/* call init *\/\r\nmonitor_init();\r\n\r\n\/* expose some functions to global scope so inline onclick handlers work *\/\r\nwindow.monitor_openModal = monitor_openModal;\r\nwindow.monitor_deleteRecord = monitor_deleteRecord;\r\nwindow.monitor_openDateTime = monitor_openDateTime;\r\nwindow.monitor_deletePermanently = monitor_deletePermanently;\r\nwindow.monitor_deleteField = monitor_deleteField;\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840983\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840983\" data-tab-index=\"3\" style=\"--n-tabs-title-order: 3;\" class=\" elementor-element elementor-element-34dab3b e-con-full e-flex e-con e-child\" data-id=\"34dab3b\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c016b5d elementor-widget elementor-widget-html\" data-id=\"c016b5d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Software<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #software_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #software_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #software_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #software_settingsModal th, #software_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #software_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #software_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #software_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #software_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #software_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #software_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #software_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #software_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #software_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #software_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #software_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #software_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #software_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #software_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"software_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"software_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"software_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"software_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"software_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"software_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"software_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"software_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"software_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"software_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"software_modalTitle\">ADD<\/h2>\r\n    <form id=\"software_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"software_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"software_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"software_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"software_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"software_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"software_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"software_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"software_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"software_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"software_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"software_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"software_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"software_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"software_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"software_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"software_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"software_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"software_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"software_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"software_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"software_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"software_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"software_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"software_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst software_container = document.getElementById(\"software_container\");\r\nlet software_tickets = JSON.parse(localStorage.getItem(\"software_inventoryData\")) || [];\r\nlet software_trashData = JSON.parse(localStorage.getItem(\"software_trashData\")) || [];\r\nlet software_tableFields = JSON.parse(localStorage.getItem(\"software_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet software_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!software_tableFields.includes(\"Name\")) {\r\n  software_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (software_tableFields[0] !== \"Name\") {\r\n    software_tableFields = software_tableFields.filter(f => f !== \"Name\");\r\n    software_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst software_addBtn = document.getElementById(\"software_addBtn\");\r\nconst software_addModal = document.getElementById(\"software_addModal\");\r\nconst software_modalTitle = document.getElementById(\"software_modalTitle\");\r\nconst software_addForm = document.getElementById(\"software_addForm\");\r\nconst software_tableBody = document.querySelector(\"#software_inventoryTable tbody\");\r\nconst software_trashTableBody = document.querySelector(\"#software_trashTable tbody\");\r\nconst software_trashToggle = document.getElementById(\"software_trashToggle\");\r\nconst software_searchInput = document.getElementById(\"software_searchInput\");\r\n\r\nconst software_settingsModal = document.getElementById(\"software_settingsModal\");\r\nconst software_settingsIcon = document.getElementById(\"software_settingsIcon\");\r\nconst software_settingsBody = document.getElementById(\"software_settingsBody\");\r\n\r\nconst software_addFieldModal = document.getElementById(\"software_addFieldModal\");\r\nconst software_openAddFieldBtn = document.getElementById(\"software_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst software_datetimeModal = document.getElementById(\"software_datetimeModal\");\r\nconst software_datetimeInput = document.getElementById(\"software_datetimeInput\");\r\nconst software_saveDatetime = document.getElementById(\"software_saveDatetime\");\r\nconst software_closeDatetime = document.getElementById(\"software_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst software_closeAddModalBtn = document.getElementById(\"software_closeAddModal\");\r\nconst software_cancelBtn = document.getElementById(\"software_cancelBtn\");\r\nconst software_closeSettingsModalBtn = document.getElementById(\"software_closeSettingsModal\");\r\nconst software_closeAddFieldBtn = document.getElementById(\"software_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst software_addLocationBtn = document.getElementById(\"software_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction software_openModal(edit = false, index = null) {\r\n  software_addModal.style.display = \"block\";\r\n  software_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  software_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = software_tickets[index];\r\n    document.getElementById(\"software_name\").value = rec.name || \"\";\r\n    document.getElementById(\"software_department\").value = rec.department || \"\";\r\n    document.getElementById(\"software_status\").value = rec.status || \"\";\r\n    document.getElementById(\"software_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"software_type\").value = rec.type || \"\";\r\n    document.getElementById(\"software_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"software_model\").value = rec.model || \"\";\r\n    document.getElementById(\"software_location\").value = rec.location || \"\";\r\n    document.getElementById(\"software_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    software_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction software_closeModal() {\r\n  software_addModal.style.display = \"none\";\r\n  software_addForm.reset();\r\n  software_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nsoftware_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"software_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nsoftware_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"software_name\").value,\r\n    department: document.getElementById(\"software_department\").value,\r\n    status: document.getElementById(\"software_status\").value,\r\n    asset: document.getElementById(\"software_asset\").value,\r\n    type: document.getElementById(\"software_type\").value,\r\n    manufacturer: document.getElementById(\"software_manufacturer\").value,\r\n    model: document.getElementById(\"software_model\").value,\r\n    location: document.getElementById(\"software_location\").value,\r\n    incharge: document.getElementById(\"software_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (software_editIndex !== null && software_editIndex !== undefined) {\r\n    software_tickets[software_editIndex] = record;\r\n    software_editIndex = null;\r\n  } else {\r\n    software_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"software_inventoryData\", JSON.stringify(software_tickets));\r\n  software_renderTable();\r\n  software_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction software_deleteRecord(index) {\r\n  const record = software_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  software_trashData.push(record);\r\n  localStorage.setItem(\"software_inventoryData\", JSON.stringify(software_tickets));\r\n  localStorage.setItem(\"software_trashData\", JSON.stringify(software_trashData));\r\n  software_renderTable();\r\n  software_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction software_renderTableHeaders() {\r\n  if (!software_tableFields.includes(\"Name\")) {\r\n    software_tableFields.unshift(\"Name\");\r\n  } else if (software_tableFields[0] !== \"Name\") {\r\n    software_tableFields = software_tableFields.filter(f => f !== \"Name\");\r\n    software_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#software_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  software_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction software_renderTable() {\r\n  software_tableBody.innerHTML = \"\";\r\n  software_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    software_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"software_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"software_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"software_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    software_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction software_renderTrash() {\r\n  software_trashTableBody.innerHTML = \"\";\r\n  software_trashData.forEach((r, i) => {\r\n    software_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"software_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"software_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction software_restore(index) {\r\n  const rec = software_trashData.splice(index, 1)[0];\r\n  \/\/ remove deletedOn before restoring\r\n  delete rec.deletedOn;\r\n  software_tickets.push(rec);\r\n  localStorage.setItem(\"software_trashData\", JSON.stringify(software_trashData));\r\n  localStorage.setItem(\"software_inventoryData\", JSON.stringify(software_tickets));\r\n  software_renderTrash();\r\n  software_renderTable();\r\n}\r\n\r\nfunction software_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    software_trashData.splice(index, 1);\r\n    localStorage.setItem(\"software_trashData\", JSON.stringify(software_trashData));\r\n    software_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet software_editingRowForDate = null;\r\nfunction software_openDateTime(index) {\r\n  software_editingRowForDate = index;\r\n  software_datetimeModal.style.display = \"block\";\r\n  software_datetimeInput.value = \"\";\r\n}\r\n\r\nsoftware_saveDatetime.onclick = () => {\r\n  if (software_editingRowForDate !== null && software_datetimeInput.value) {\r\n    const selectedDate = new Date(software_datetimeInput.value).toLocaleString();\r\n    software_tickets[software_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"software_inventoryData\", JSON.stringify(software_tickets));\r\n    software_renderTable();\r\n    software_datetimeModal.style.display = \"none\";\r\n    software_editingRowForDate = null;\r\n  }\r\n};\r\nsoftware_closeDatetime.onclick = () => software_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nsoftware_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"software_inventoryTable\").style.display = software_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"software_trashTable\").style.display = software_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nsoftware_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#software_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction software_renderSettingsTable() {\r\n  const body = software_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  software_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='software_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction software_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  software_tableFields = software_tableFields.filter(f => f !== field);\r\n  software_saveTableFields();\r\n  software_renderSettingsTable();\r\n  software_renderTableHeaders();\r\n  software_renderTable();\r\n}\r\n\r\nfunction software_saveTableFields() {\r\n  localStorage.setItem(\"software_tableFields\", JSON.stringify(software_tableFields));\r\n  software_renderTableHeaders();\r\n  software_renderTable();\r\n}\r\n\r\nsoftware_settingsIcon.onclick = () => {\r\n  software_settingsModal.style.display = \"block\";\r\n  software_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet software_draggedRow = null;\r\nif (software_settingsBody) {\r\n  software_settingsBody.addEventListener(\"dragstart\", e => {\r\n    software_draggedRow = e.target.closest(\"tr\");\r\n    if (software_draggedRow) software_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  software_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = software_getDragAfterElement(software_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#software_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        software_settingsBody.appendChild(draggable);\r\n      } else {\r\n        software_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  software_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (software_draggedRow) software_draggedRow.classList.remove(\"dragging\");\r\n    software_draggedRow = null;\r\n    software_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction software_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction software_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = software_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  software_tableFields = newOrder;\r\n  software_saveTableFields();\r\n  software_renderTableHeaders();\r\n  software_renderTable();\r\n}\r\n\r\nfunction software_saveSettings() {\r\n  const newOrder = [];\r\n  const body = software_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  software_tableFields = newOrder;\r\n  software_saveTableFields();\r\n  software_renderTableHeaders();\r\n  software_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#software_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"software_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"software_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = software_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nsoftware_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (software_addFieldModal) software_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nsoftware_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (software_addFieldModal) software_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* fixed: ensure handler name matches the function below *\/\r\ndocument.getElementById(\"software_saveNewFieldBtn\").addEventListener(\"click\", saveNewSoftwareField);\r\n\r\nfunction saveNewSoftwareField() {\r\n  const fieldNameElem = document.getElementById(\"software_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (software_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = software_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    software_tableFields.push(fieldName);\r\n  } else {\r\n    software_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  software_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#software_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (software_addFieldModal) software_addFieldModal.style.display = \"none\";\r\n\r\n  software_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nsoftware_closeAddModalBtn.addEventListener(\"click\", software_closeModal);\r\nsoftware_cancelBtn.addEventListener(\"click\", software_closeModal);\r\nsoftware_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  software_settingsModal.style.display = \"none\";\r\n});\r\nsoftware_closeDatetime.addEventListener(\"click\", () => {\r\n  software_datetimeModal.style.display = \"none\";\r\n});\r\nsoftware_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  software_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === software_addModal) software_closeModal();\r\n  if (target === software_settingsModal) software_settingsModal.style.display = \"none\";\r\n  if (target === software_addFieldModal) software_addFieldModal.style.display = \"none\";\r\n  if (target === software_datetimeModal) software_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nsoftware_addBtn.addEventListener(\"click\", () => software_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction software_init() {\r\n  software_renderTableHeaders();\r\n  software_renderTable();\r\n  software_renderTrash();\r\n\r\n  document.getElementById(\"software_inventoryTable\").style.display = software_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"software_trashTable\").style.display = software_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nsoftware_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.software_openModal = software_openModal;\r\nwindow.software_deleteRecord = software_deleteRecord;\r\nwindow.software_openDateTime = software_openDateTime;\r\nwindow.software_deletePermanently = software_deletePermanently;\r\nwindow.software_deleteField = software_deleteField;\r\nwindow.software_restore = software_restore;\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840984\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840984\" data-tab-index=\"4\" style=\"--n-tabs-title-order: 4;\" class=\" elementor-element elementor-element-5d26288 e-con-full e-flex e-con e-child\" data-id=\"5d26288\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0d1bb1 elementor-widget elementor-widget-html\" data-id=\"f0d1bb1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - NetworkDevices<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #NetworkDevices _searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #NetworkDevices_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal th, #NetworkDevices_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #NetworkDevices_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #NetworkDevices_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #NetworkDevices_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #NetworkDevices_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #NetworkDevices_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"NetworkDevices_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"NetworkDevices_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"NetworkDevices_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"NetworkDevices_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"NetworkDevices_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"NetworkDevices_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"NetworkDevices_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"NetworkDevices_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"NetworkDevices_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"NetworkDevices_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"NetworkDevices_modalTitle\">ADD<\/h2>\r\n    <form id=\"NetworkDevices_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"NetworkDevices_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"NetworkDevices_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"NetworkDevices_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"NetworkDevices_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"NetworkDevices_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"NetworkDevices_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"NetworkDevices_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"NetworkDevices_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"NetworkDevices_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"NetworkDevices_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"NetworkDevices_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"NetworkDevices_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"NetworkDevices_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"NetworkDevices_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"NetworkDevices_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"NetworkDevices_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"NetworkDevices_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"NetworkDevices_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"NetworkDevices_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"NetworkDevices_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"NetworkDevices_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"NetworkDevices_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"NetworkDevices_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"NetworkDevices_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst NetworkDevices_container = document.getElementById(\"NetworkDevices_container\");\r\nlet NetworkDevices_tickets = JSON.parse(localStorage.getItem(\"NetworkDevices_inventoryData\")) || [];\r\nlet NetworkDevices_trashData = JSON.parse(localStorage.getItem(\"NetworkDevices_trashData\")) || [];\r\nlet NetworkDevices_tableFields = JSON.parse(localStorage.getItem(\"NetworkDevices_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet NetworkDevices_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!NetworkDevices_tableFields.includes(\"Name\")) {\r\n  NetworkDevices_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (NetworkDevices_tableFields[0] !== \"Name\") {\r\n    NetworkDevices_tableFields = NetworkDevices_tableFields.filter(f => f !== \"Name\");\r\n    NetworkDevices_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst NetworkDevices_addBtn = document.getElementById(\"NetworkDevices_addBtn\");\r\nconst NetworkDevices_addModal = document.getElementById(\"NetworkDevices_addModal\");\r\nconst NetworkDevices_modalTitle = document.getElementById(\"NetworkDevices_modalTitle\");\r\nconst NetworkDevices_addForm = document.getElementById(\"NetworkDevices_addForm\");\r\nconst NetworkDevices_tableBody = document.querySelector(\"#NetworkDevices_inventoryTable tbody\");\r\nconst NetworkDevices_trashTableBody = document.querySelector(\"#NetworkDevices_trashTable tbody\");\r\nconst NetworkDevices_trashToggle = document.getElementById(\"NetworkDevices_trashToggle\");\r\nconst NetworkDevices_searchInput = document.getElementById(\"NetworkDevices_searchInput\");\r\n\r\nconst NetworkDevices_settingsModal = document.getElementById(\"NetworkDevices_settingsModal\");\r\nconst NetworkDevices_settingsIcon = document.getElementById(\"NetworkDevices_settingsIcon\");\r\nconst NetworkDevices_settingsBody = document.getElementById(\"NetworkDevices_settingsBody\");\r\n\r\nconst NetworkDevices_addFieldModal = document.getElementById(\"NetworkDevices_addFieldModal\");\r\nconst NetworkDevices_openAddFieldBtn = document.getElementById(\"NetworkDevices_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst NetworkDevices_datetimeModal = document.getElementById(\"NetworkDevices_datetimeModal\");\r\nconst NetworkDevices_datetimeInput = document.getElementById(\"NetworkDevices_datetimeInput\");\r\nconst NetworkDevices_saveDatetime = document.getElementById(\"NetworkDevices_saveDatetime\");\r\nconst NetworkDevices_closeDatetime = document.getElementById(\"NetworkDevices_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst NetworkDevices_closeAddModalBtn = document.getElementById(\"NetworkDevices_closeAddModal\");\r\nconst NetworkDevices_cancelBtn = document.getElementById(\"NetworkDevices_cancelBtn\");\r\nconst NetworkDevices_closeSettingsModalBtn = document.getElementById(\"NetworkDevices_closeSettingsModal\");\r\nconst NetworkDevices_closeAddFieldBtn = document.getElementById(\"NetworkDevices_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst NetworkDevices_addLocationBtn = document.getElementById(\"NetworkDevices_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction NetworkDevices_openModal(edit = false, index = null) {\r\n  NetworkDevices_addModal.style.display = \"block\";\r\n  NetworkDevices_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  NetworkDevices_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = NetworkDevices_tickets[index];\r\n    document.getElementById(\"NetworkDevices_name\").value = rec.name || \"\";\r\n    document.getElementById(\"NetworkDevices_department\").value = rec.department || \"\";\r\n    document.getElementById(\"NetworkDevices_status\").value = rec.status || \"\";\r\n    document.getElementById(\"NetworkDevices_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"NetworkDevices_type\").value = rec.type || \"\";\r\n    document.getElementById(\"NetworkDevices_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"NetworkDevices_model\").value = rec.model || \"\";\r\n    document.getElementById(\"NetworkDevices_location\").value = rec.location || \"\";\r\n    document.getElementById(\"NetworkDevices_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    NetworkDevices_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction NetworkDevices_closeModal() {\r\n  NetworkDevices_addModal.style.display = \"none\";\r\n  NetworkDevices_addForm.reset();\r\n  NetworkDevices_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nNetworkDevices_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"NetworkDevices_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nNetworkDevices_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"NetworkDevices_name\").value,\r\n    department: document.getElementById(\"NetworkDevices_department\").value,\r\n    status: document.getElementById(\"NetworkDevices_status\").value,\r\n    asset: document.getElementById(\"NetworkDevices_asset\").value,\r\n    type: document.getElementById(\"NetworkDevices_type\").value,\r\n    manufacturer: document.getElementById(\"NetworkDevices_manufacturer\").value,\r\n    model: document.getElementById(\"NetworkDevices_model\").value,\r\n    location: document.getElementById(\"NetworkDevices_location\").value,\r\n    incharge: document.getElementById(\"NetworkDevices_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (NetworkDevices_editIndex !== null && NetworkDevices_editIndex !== undefined) {\r\n    NetworkDevices_tickets[NetworkDevices_editIndex] = record;\r\n    NetworkDevices_editIndex = null;\r\n  } else {\r\n    NetworkDevices_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"NetworkDevices_inventoryData\", JSON.stringify(NetworkDevices_tickets));\r\n  NetworkDevices_renderTable();\r\n  NetworkDevices_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction NetworkDevices_deleteRecord(index) {\r\n  const record = NetworkDevices_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  NetworkDevices_trashData.push(record);\r\n  localStorage.setItem(\"NetworkDevices_inventoryData\", JSON.stringify(software_tickets));\r\n  localStorage.setItem(\"NetworkDevices_trashData\", JSON.stringify(NetworkDevices_trashData));\r\n  NetworkDevices_renderTable();\r\n  NetworkDevices_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction NetworkDevices_renderTableHeaders() {\r\n  if (!NetworkDevices_tableFields.includes(\"Name\")) {\r\n    NetworkDevices_tableFields.unshift(\"Name\");\r\n  } else if (NetworkDevices_tableFields[0] !== \"Name\") {\r\n    NetworkDevices_tableFields = NetworkDevices_tableFields.filter(f => f !== \"Name\");\r\n    NetworkDevices_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#NetworkDevices_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  NetworkDevices_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction NetworkDevices_renderTable() {\r\n  NetworkDevices_tableBody.innerHTML = \"\";\r\n  NetworkDevices_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    NetworkDevices_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"NetworkDevices_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"NetworkDevices_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"NetworkDevices_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    NetworkDevices_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction NetworkDevices_renderTrash() {\r\n  NetworkDevices_trashTableBody.innerHTML = \"\";\r\n  NetworkDevices_trashData.forEach((r, i) => {\r\n    NetworkDevices_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"NetworkDevices_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"NetworkDevices_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction NetworkDevices_restore(index) {\r\n  const rec = NetworkDevices_trashData.splice(index, 1)[0];\r\n  \/\/ remove deletedOn before restoring\r\n  delete rec.deletedOn;\r\n  NetworkDevices_tickets.push(rec);\r\n  localStorage.setItem(\"NetworkDevices_trashData\", JSON.stringify(NetworkDevices_trashData));\r\n  localStorage.setItem(\"NetworkDevices_inventoryData\", JSON.stringify(NetworkDevices_tickets));\r\n  NetworkDevices_renderTrash();\r\n  NetworkDevices_renderTable();\r\n}\r\n\r\nfunction NetworkDevices_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    NetworkDevices_trashData.splice(index, 1);\r\n    localStorage.setItem(\"NetworkDevices_trashData\", JSON.stringify(NetworkDevices_trashData));\r\n    NetworkDevices_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet NetworkDevices_editingRowForDate = null;\r\nfunction NetworkDevices_openDateTime(index) {\r\n  NetworkDevices_editingRowForDate = index;\r\n  NetworkDevices_datetimeModal.style.display = \"block\";\r\n  NetworkDevices_datetimeInput.value = \"\";\r\n}\r\n\r\nNetworkDevices_saveDatetime.onclick = () => {\r\n  if (NetworkDevices_editingRowForDate !== null && NetworkDevices_datetimeInput.value) {\r\n    const selectedDate = new Date(NetworkDevices_datetimeInput.value).toLocaleString();\r\n    NetworkDevices_tickets[NetworkDevices_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"NetworkDevices_inventoryData\", JSON.stringify(NetworkDevices_tickets));\r\n    NetworkDevices_renderTable();\r\n    NetworkDevices_datetimeModal.style.display = \"none\";\r\n    NetworkDevices_editingRowForDate = null;\r\n  }\r\n};\r\nNetworkDevices_closeDatetime.onclick = () => NetworkDevices_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nNetworkDevices_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"NetworkDevices_inventoryTable\").style.display = NetworkDevices_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"NetworkDevices_trashTable\").style.display = NetworkDevices_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nNetworkDevices_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#NetworkDevices_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction NetworkDevices_renderSettingsTable() {\r\n  const body = NetworkDevices_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  NetworkDevices_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='NetworkDevices_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction NetworkDevices_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  NetworkDevices_tableFields = NetworkDevices_tableFields.filter(f => f !== field);\r\n  NetworkDevices_saveTableFields();\r\n  NetworkDevices_renderSettingsTable();\r\n  NetworkDevices_renderTableHeaders();\r\n  NetworkDevices_renderTable();\r\n}\r\n\r\nfunction NetworkDevices_saveTableFields() {\r\n  localStorage.setItem(\"NetworkDevices_tableFields\", JSON.stringify(NetworkDevices_tableFields));\r\n  NetworkDevices_renderTableHeaders();\r\n  NetworkDevices_renderTable();\r\n}\r\n\r\nNetworkDevices_settingsIcon.onclick = () => {\r\n  NetworkDevices_settingsModal.style.display = \"block\";\r\n  NetworkDevices_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet NetworkDevices_draggedRow = null;\r\nif (NetworkDevices_settingsBody) {\r\n  NetworkDevices_settingsBody.addEventListener(\"dragstart\", e => {\r\n    NetworkDevices_draggedRow = e.target.closest(\"tr\");\r\n    if (NetworkDevices_draggedRow) NetworkDevices_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  NetworkDevices_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = NetworkDevices_getDragAfterElement(NetworkDevices_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#NetworkDevices_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        NetworkDevices_settingsBody.appendChild(draggable);\r\n      } else {\r\n        NetworkDevices_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  NetworkDevices_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (NetworkDevices_draggedRow) NetworkDevices_draggedRow.classList.remove(\"dragging\");\r\n    NetworkDevices_draggedRow = null;\r\n    NetworkDevices_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction NetworkDevices_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction NetworkDevices_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = NetworkDevices_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  NetworkDevices_tableFields = newOrder;\r\n  NetworkDevices_saveTableFields();\r\n  NetworkDevices_renderTableHeaders();\r\n  NetworkDevices_renderTable();\r\n}\r\n\r\nfunction NetworkDevices_saveSettings() {\r\n  const newOrder = [];\r\n  const body = NetworkDevices_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  NetworkDevices_tableFields = newOrder;\r\n  NetworkDevices_saveTableFields();\r\n  NetworkDevices_renderTableHeaders();\r\n  NetworkDevices_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#NetworkDevices_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"NetworkDevices_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"NetworkDevices_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = NetworkDevices_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nNetworkDevices_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (NetworkDevices_addFieldModal) NetworkDevices_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nNetworkDevices_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (NetworkDevices_addFieldModal) NetworkDevices_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* fixed: ensure handler name matches the function below *\/\r\ndocument.getElementById(\"NetworkDevices_saveNewFieldBtn\").addEventListener(\"click\", saveNewNetworkDevicesField);\r\n\r\nfunction saveNewNetworkDevicesField() {\r\n  const fieldNameElem = document.getElementById(\"NetworkDevices_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (NetworkDevices_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = NetworkDevices_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    NetworkDevices_tableFields.push(fieldName);\r\n  } else {\r\n    NetworkDevices_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  NetworkDevices_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#NetworkDevices_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (NetworkDevices_addFieldModal) NetworkDevices_addFieldModal.style.display = \"none\";\r\n\r\n  NetworkDevices_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nNetworkDevices_closeAddModalBtn.addEventListener(\"click\", NetworkDevices_closeModal);\r\nNetworkDevices_cancelBtn.addEventListener(\"click\", NetworkDevices_closeModal);\r\nNetworkDevices_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  NetworkDevices_settingsModal.style.display = \"none\";\r\n});\r\nNetworkDevices_closeDatetime.addEventListener(\"click\", () => {\r\n  NetworkDevices_datetimeModal.style.display = \"none\";\r\n});\r\nNetworkDevices_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  NetworkDevices_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === NetworkDevices_addModal) NetworkDevices_closeModal();\r\n  if (target === NetworkDevices_settingsModal) NetworkDevices_settingsModal.style.display = \"none\";\r\n  if (target === NetworkDevices_addFieldModal) NetworkDevices_addFieldModal.style.display = \"none\";\r\n  if (target === NetworkDevices_datetimeModal) NetworkDevices_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nNetworkDevices_addBtn.addEventListener(\"click\", () => NetworkDevices_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction NetworkDevices_init() {\r\n  NetworkDevices_renderTableHeaders();\r\n  NetworkDevices_renderTable();\r\n  NetworkDevices_renderTrash();\r\n\r\n  document.getElementById(\"NetworkDevices_inventoryTable\").style.display = NetworkDevices_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"NetworkDevices_trashTable\").style.display = NetworkDevices_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nNetworkDevices_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.NetworkDevices_openModal = NetworkDevices_openModal;\r\nwindow.NetworkDevices_deleteRecord = NetworkDevices_deleteRecord;\r\nwindow.NetworkDevices_openDateTime = NetworkDevices_openDateTime;\r\nwindow.NetworkDevices_deletePermanently = NetworkDevices_deletePermanently;\r\nwindow.NetworkDevices_deleteField = NetworkDevices_deleteField;\r\nwindow.NetworkDevices_restore = NetworkDevices_restore;\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840985\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840985\" data-tab-index=\"5\" style=\"--n-tabs-title-order: 5;\" class=\" elementor-element elementor-element-33a07de e-con-full e-flex e-con e-child\" data-id=\"33a07de\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc34f4d elementor-widget elementor-widget-html\" data-id=\"cc34f4d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Printers<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #printers_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #printers_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #printers_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #printers_settingsModal th, #printers_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #printers_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #printers_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #printers_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #printers_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #printers_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #printers_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #printers_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #printers_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #printers_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #printers_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #printers_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #printers_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #printers_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #printers_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"printers_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"printers_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"printers_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"printers_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"printers_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"printers_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"printers_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"printers_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"printers_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"printers_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"printers_modalTitle\">ADD<\/h2>\r\n    <form id=\"printers_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"printers_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"printers_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"printers_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"printers_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"printers_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"printers_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"printers_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"printers_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"printers_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"printers_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"printers_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"printers_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"printers_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"printers_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"printers_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"printers_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"printers_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"printers_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"printers_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"printers_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"printers_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"printers_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"printers_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"printers_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst printers_container = document.getElementById(\"printers_container\");\r\nlet printers_tickets = JSON.parse(localStorage.getItem(\"printers_inventoryData\")) || [];\r\nlet printers_trashData = JSON.parse(localStorage.getItem(\"printers_trashData\")) || [];\r\nlet printers_tableFields = JSON.parse(localStorage.getItem(\"printers_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet printers_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!printers_tableFields.includes(\"Name\")) {\r\n  printers_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (printers_tableFields[0] !== \"Name\") {\r\n    printers_tableFields = printers_tableFields.filter(f => f !== \"Name\");\r\n    printers_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst printers_addBtn = document.getElementById(\"printers_addBtn\");\r\nconst printers_addModal = document.getElementById(\"printers_addModal\");\r\nconst printers_modalTitle = document.getElementById(\"printers_modalTitle\");\r\nconst printers_addForm = document.getElementById(\"printers_addForm\");\r\nconst printers_tableBody = document.querySelector(\"#printers_inventoryTable tbody\");\r\nconst printers_trashTableBody = document.querySelector(\"#printers_trashTable tbody\");\r\nconst printers_trashToggle = document.getElementById(\"printers_trashToggle\");\r\nconst printers_searchInput = document.getElementById(\"printers_searchInput\");\r\n\r\nconst printers_settingsModal = document.getElementById(\"printers_settingsModal\");\r\nconst printers_settingsIcon = document.getElementById(\"printers_settingsIcon\");\r\nconst printers_settingsBody = document.getElementById(\"printers_settingsBody\");\r\n\r\nconst printers_addFieldModal = document.getElementById(\"printers_addFieldModal\");\r\nconst printers_openAddFieldBtn = document.getElementById(\"printers_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst printers_datetimeModal = document.getElementById(\"printers_datetimeModal\");\r\nconst printers_datetimeInput = document.getElementById(\"printers_datetimeInput\");\r\nconst printers_saveDatetime = document.getElementById(\"printers_saveDatetime\");\r\nconst printers_closeDatetime = document.getElementById(\"printers_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst printers_closeAddModalBtn = document.getElementById(\"printers_closeAddModal\");\r\nconst printers_cancelBtn = document.getElementById(\"printers_cancelBtn\");\r\nconst printers_closeSettingsModalBtn = document.getElementById(\"printers_closeSettingsModal\");\r\nconst printers_closeAddFieldBtn = document.getElementById(\"printers_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst printers_addLocationBtn = document.getElementById(\"printers_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction printers_openModal(edit = false, index = null) {\r\n  printers_addModal.style.display = \"block\";\r\n  printers_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  printers_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = printers_tickets[index];\r\n    document.getElementById(\"printers_name\").value = rec.name || \"\";\r\n    document.getElementById(\"printers_department\").value = rec.department || \"\";\r\n    document.getElementById(\"printers_status\").value = rec.status || \"\";\r\n    document.getElementById(\"printers_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"printers_type\").value = rec.type || \"\";\r\n    document.getElementById(\"printers_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"printers_model\").value = rec.model || \"\";\r\n    document.getElementById(\"printers_location\").value = rec.location || \"\";\r\n    document.getElementById(\"printers_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    printers_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction printers_closeModal() {\r\n  printers_addModal.style.display = \"none\";\r\n  printers_addForm.reset();\r\n  printers_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nprinters_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"printers_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nprinters_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"printers_name\").value,\r\n    department: document.getElementById(\"printers_department\").value,\r\n    status: document.getElementById(\"printers_status\").value,\r\n    asset: document.getElementById(\"printers_asset\").value,\r\n    type: document.getElementById(\"printers_type\").value,\r\n    manufacturer: document.getElementById(\"printers_manufacturer\").value,\r\n    model: document.getElementById(\"printers_model\").value,\r\n    location: document.getElementById(\"printers_location\").value,\r\n    incharge: document.getElementById(\"printers_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (printers_editIndex !== null && printers_editIndex !== undefined) {\r\n    printers_tickets[printers_editIndex] = record;\r\n    printers_editIndex = null;\r\n  } else {\r\n    printers_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"printers_inventoryData\", JSON.stringify(printers_tickets));\r\n  printers_renderTable();\r\n  printers_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction printers_deleteRecord(index) {\r\n  const record = printers_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  printers_trashData.push(record);\r\n  localStorage.setItem(\"printers_inventoryData\", JSON.stringify(printers_tickets));\r\n  localStorage.setItem(\"printers_trashData\", JSON.stringify(printers_trashData));\r\n  printers_renderTable();\r\n  printers_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction printers_renderTableHeaders() {\r\n  if (!printers_tableFields.includes(\"Name\")) {\r\n    printers_tableFields.unshift(\"Name\");\r\n  } else if (printers_tableFields[0] !== \"Name\") {\r\n    printers_tableFields = printers_tableFields.filter(f => f !== \"Name\");\r\n    printers_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#printers_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  printers_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction printers_renderTable() {\r\n  printers_tableBody.innerHTML = \"\";\r\n  printers_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    printers_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"printers_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"printers_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"printers_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    printers_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction printers_renderTrash() {\r\n  printers_trashTableBody.innerHTML = \"\";\r\n  printers_trashData.forEach((r, i) => {\r\n    printers_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"printers_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"printers_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction printers_restore(index) {\r\n  const rec = printers_trashData.splice(index, 1)[0];\r\n  \/\/ remove deletedOn before restoring\r\n  delete rec.deletedOn;\r\n  printers_tickets.push(rec);\r\n  localStorage.setItem(\"printers_trashData\", JSON.stringify(printers_trashData));\r\n  localStorage.setItem(\"printers_inventoryData\", JSON.stringify(printers_tickets));\r\n  printers_renderTrash();\r\n  printers_renderTable();\r\n}\r\n\r\nfunction printers_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    printers_trashData.splice(index, 1);\r\n    localStorage.setItem(\"printers_trashData\", JSON.stringify(printers_trashData));\r\n    printers_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet printers_editingRowForDate = null;\r\nfunction printers_openDateTime(index) {\r\n  printers_editingRowForDate = index;\r\n  printers_datetimeModal.style.display = \"block\";\r\n  printers_datetimeInput.value = \"\";\r\n}\r\n\r\nprinters_saveDatetime.onclick = () => {\r\n  if (printers_editingRowForDate !== null && printers_datetimeInput.value) {\r\n    const selectedDate = new Date(printers_datetimeInput.value).toLocaleString();\r\n    printers_tickets[printers_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"printers_inventoryData\", JSON.stringify(printers_tickets));\r\n    printers_renderTable();\r\n    printers_datetimeModal.style.display = \"none\";\r\n    printers_editingRowForDate = null;\r\n  }\r\n};\r\nprinters_closeDatetime.onclick = () => printers_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nprinters_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"printers_inventoryTable\").style.display = printers_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"printers_trashTable\").style.display = printers_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nprinters_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#printers_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction printers_renderSettingsTable() {\r\n  const body = printers_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  printers_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='printers_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction printers_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  printers_tableFields = printers_tableFields.filter(f => f !== field);\r\n  printers_saveTableFields();\r\n  printers_renderSettingsTable();\r\n  printers_renderTableHeaders();\r\n  printers_renderTable();\r\n}\r\n\r\nfunction printers_saveTableFields() {\r\n  localStorage.setItem(\"printers_tableFields\", JSON.stringify(printers_tableFields));\r\n  printers_renderTableHeaders();\r\n  printers_renderTable();\r\n}\r\n\r\nprinters_settingsIcon.onclick = () => {\r\n  printers_settingsModal.style.display = \"block\";\r\n  printers_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet printers_draggedRow = null;\r\nif (printers_settingsBody) {\r\n  printers_settingsBody.addEventListener(\"dragstart\", e => {\r\n    printers_draggedRow = e.target.closest(\"tr\");\r\n    if (printers_draggedRow) printers_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  printers_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = printers_getDragAfterElement(printers_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#printers_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        printers_settingsBody.appendChild(draggable);\r\n      } else {\r\n        printers_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  printers_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (printers_draggedRow) printers_draggedRow.classList.remove(\"dragging\");\r\n    printers_draggedRow = null;\r\n    printers_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction printers_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction printers_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = printers_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  printers_tableFields = newOrder;\r\n  printers_saveTableFields();\r\n  printers_renderTableHeaders();\r\n  printers_renderTable();\r\n}\r\n\r\nfunction printers_saveSettings() {\r\n  const newOrder = [];\r\n  const body = printers_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  printers_tableFields = newOrder;\r\n  printers_saveTableFields();\r\n  printers_renderTableHeaders();\r\n  printers_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#printers_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"printers_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"printers_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = printers_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nprinters_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (printers_addFieldModal) printers_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nprinters_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (printers_addFieldModal) printers_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* fixed: ensure handler name matches the function below *\/\r\ndocument.getElementById(\"printers_saveNewFieldBtn\").addEventListener(\"click\", saveNewPrintersField);\r\n\r\nfunction saveNewPrintersField() {\r\n  const fieldNameElem = document.getElementById(\"printers_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (printers_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = printers_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    printers_tableFields.push(fieldName);\r\n  } else {\r\n    printers_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  printers_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#printers_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (printers_addFieldModal) printers_addFieldModal.style.display = \"none\";\r\n\r\n  printers_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nprinters_closeAddModalBtn.addEventListener(\"click\", printers_closeModal);\r\nprinters_cancelBtn.addEventListener(\"click\", printers_closeModal);\r\nprinters_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  printers_settingsModal.style.display = \"none\";\r\n});\r\nprinters_closeDatetime.addEventListener(\"click\", () => {\r\n  printers_datetimeModal.style.display = \"none\";\r\n});\r\nprinters_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  printers_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === printers_addModal) printers_closeModal();\r\n  if (target === printers_settingsModal) printers_settingsModal.style.display = \"none\";\r\n  if (target === printers_addFieldModal) printers_addFieldModal.style.display = \"none\";\r\n  if (target === printers_datetimeModal) printers_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nprinters_addBtn.addEventListener(\"click\", () => printers_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction printers_init() {\r\n  printers_renderTableHeaders();\r\n  printers_renderTable();\r\n  printers_renderTrash();\r\n\r\n  document.getElementById(\"printers_inventoryTable\").style.display = printers_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"printers_trashTable\").style.display = printers_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nprinters_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.printers_openModal = printers_openModal;\r\nwindow.printers_deleteRecord = printers_deleteRecord;\r\nwindow.printers_openDateTime = printers_openDateTime;\r\nwindow.printers_deletePermanently = printers_deletePermanently;\r\nwindow.printers_deleteField = printers_deleteField;\r\nwindow.printers_restore = printers_restore;\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840986\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840986\" data-tab-index=\"6\" style=\"--n-tabs-title-order: 6;\" class=\" elementor-element elementor-element-8c3f859 e-con-full e-flex e-con e-child\" data-id=\"8c3f859\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c67e572 elementor-widget elementor-widget-html\" data-id=\"c67e572\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Peripherals<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #peripherals_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #peripherals_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #peripherals_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #peripherals_settingsModal th, #peripherals_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #peripherals_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #peripherals_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #peripherals_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #peripherals_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #peripherals_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #peripherals_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #peripherals_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #peripherals_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #peripherals_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #peripherals_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #peripherals_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #peripherals_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #peripherals_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #peripherals_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"peripherals_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"peripherals_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"peripherals_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"peripherals_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"peripherals_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"peripherals_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"peripherals_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"peripherals_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"peripherals_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"peripherals_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"peripherals_modalTitle\">ADD<\/h2>\r\n    <form id=\"peripherals_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"peripherals_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"peripherals_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"peripherals_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"peripherals_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"peripherals_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"peripherals_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"peripherals_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"peripherals_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"peripherals_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"peripherals_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"peripherals_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"peripherals_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"peripherals_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"peripherals_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"peripherals_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"peripherals_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"peripherals_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"peripherals_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"peripherals_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"peripherals_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"peripherals_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"peripherals_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"peripherals_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"peripherals_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst peripherals_container = document.getElementById(\"peripherals_container\");\r\nlet peripherals_tickets = JSON.parse(localStorage.getItem(\"peripherals_inventoryData\")) || [];\r\nlet peripherals_trashData = JSON.parse(localStorage.getItem(\"peripherals_trashData\")) || [];\r\nlet peripherals_tableFields = JSON.parse(localStorage.getItem(\"peripherals_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet peripherals_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!peripherals_tableFields.includes(\"Name\")) {\r\n  peripherals_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (peripherals_tableFields[0] !== \"Name\") {\r\n    peripherals_tableFields = peripherals_tableFields.filter(f => f !== \"Name\");\r\n    peripherals_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst peripherals_addBtn = document.getElementById(\"peripherals_addBtn\");\r\nconst peripherals_addModal = document.getElementById(\"peripherals_addModal\");\r\nconst peripherals_modalTitle = document.getElementById(\"peripherals_modalTitle\");\r\nconst peripherals_addForm = document.getElementById(\"peripherals_addForm\");\r\nconst peripherals_tableBody = document.querySelector(\"#peripherals_inventoryTable tbody\");\r\nconst peripherals_trashTableBody = document.querySelector(\"#peripherals_trashTable tbody\");\r\nconst peripherals_trashToggle = document.getElementById(\"peripherals_trashToggle\");\r\nconst peripherals_searchInput = document.getElementById(\"peripherals_searchInput\");\r\n\r\nconst peripherals_settingsModal = document.getElementById(\"peripherals_settingsModal\");\r\nconst peripherals_settingsIcon = document.getElementById(\"peripherals_settingsIcon\");\r\nconst peripherals_settingsBody = document.getElementById(\"peripherals_settingsBody\");\r\n\r\nconst peripherals_addFieldModal = document.getElementById(\"peripherals_addFieldModal\");\r\nconst peripherals_openAddFieldBtn = document.getElementById(\"peripherals_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst peripherals_datetimeModal = document.getElementById(\"peripherals_datetimeModal\");\r\nconst peripherals_datetimeInput = document.getElementById(\"peripherals_datetimeInput\");\r\nconst peripherals_saveDatetime = document.getElementById(\"peripherals_saveDatetime\");\r\nconst peripherals_closeDatetime = document.getElementById(\"peripherals_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst peripherals_closeAddModalBtn = document.getElementById(\"peripherals_closeAddModal\");\r\nconst peripherals_cancelBtn = document.getElementById(\"peripherals_cancelBtn\");\r\nconst peripherals_closeSettingsModalBtn = document.getElementById(\"peripherals_closeSettingsModal\");\r\nconst peripherals_closeAddFieldBtn = document.getElementById(\"peripherals_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst peripherals_addLocationBtn = document.getElementById(\"peripherals_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction peripherals_openModal(edit = false, index = null) {\r\n  peripherals_addModal.style.display = \"block\";\r\n  peripherals_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  peripherals_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = peripherals_tickets[index];\r\n    document.getElementById(\"peripherals_name\").value = rec.name || \"\";\r\n    document.getElementById(\"peripherals_department\").value = rec.department || \"\";\r\n    document.getElementById(\"peripherals_status\").value = rec.status || \"\";\r\n    document.getElementById(\"peripherals_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"peripherals_type\").value = rec.type || \"\";\r\n    document.getElementById(\"peripherals_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"peripherals_model\").value = rec.model || \"\";\r\n    document.getElementById(\"peripherals_location\").value = rec.location || \"\";\r\n    document.getElementById(\"peripherals_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    peripherals_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction peripherals_closeModal() {\r\n  peripherals_addModal.style.display = \"none\";\r\n  peripherals_addForm.reset();\r\n  peripherals_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nperipherals_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"peripherals_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nperipherals_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"peripherals_name\").value,\r\n    department: document.getElementById(\"peripherals_department\").value,\r\n    status: document.getElementById(\"peripherals_status\").value,\r\n    asset: document.getElementById(\"peripherals_asset\").value,\r\n    type: document.getElementById(\"peripherals_type\").value,\r\n    manufacturer: document.getElementById(\"peripherals_manufacturer\").value,\r\n    model: document.getElementById(\"peripherals_model\").value,\r\n    location: document.getElementById(\"peripherals_location\").value,\r\n    incharge: document.getElementById(\"peripherals_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (peripherals_editIndex !== null && peripherals_editIndex !== undefined) {\r\n    peripherals_tickets[peripherals_editIndex] = record;\r\n    peripherals_editIndex = null;\r\n  } else {\r\n    peripherals_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"peripherals_inventoryData\", JSON.stringify(peripherals_tickets));\r\n  peripherals_renderTable();\r\n  peripherals_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction peripherals_deleteRecord(index) {\r\n  const record = peripherals_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  peripherals_trashData.push(record);\r\n  localStorage.setItem(\"peripherals_inventoryData\", JSON.stringify(peripherals_tickets));\r\n  localStorage.setItem(\"peripherals_trashData\", JSON.stringify(peripherals_trashData));\r\n  peripherals_renderTable();\r\n  peripherals_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction peripherals_renderTableHeaders() {\r\n  if (!peripherals_tableFields.includes(\"Name\")) {\r\n    peripherals_tableFields.unshift(\"Name\");\r\n  } else if (peripherals_tableFields[0] !== \"Name\") {\r\n    peripherals_tableFields = peripherals_tableFields.filter(f => f !== \"Name\");\r\n    peripherals_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#peripherals_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  peripherals_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction peripherals_renderTable() {\r\n  peripherals_tableBody.innerHTML = \"\";\r\n  peripherals_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    peripherals_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"peripherals_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"peripherals_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"peripherals_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    peripherals_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction peripherals_renderTrash() {\r\n  peripherals_trashTableBody.innerHTML = \"\";\r\n  peripherals_trashData.forEach((r, i) => {\r\n    peripherals_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"peripherals_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"peripherals_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction peripherals_restore(index) {\r\n  const rec = peripherals_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  peripherals_tickets.push(rec);\r\n  localStorage.setItem(\"peripherals_trashData\", JSON.stringify(peripherals_trashData));\r\n  localStorage.setItem(\"peripherals_inventoryData\", JSON.stringify(peripherals_tickets));\r\n  peripherals_renderTrash();\r\n  peripherals_renderTable();\r\n}\r\n\r\nfunction peripherals_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    peripherals_trashData.splice(index, 1);\r\n    localStorage.setItem(\"peripherals_trashData\", JSON.stringify(peripherals_trashData));\r\n    peripherals_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet peripherals_editingRowForDate = null;\r\nfunction peripherals_openDateTime(index) {\r\n  peripherals_editingRowForDate = index;\r\n  peripherals_datetimeModal.style.display = \"block\";\r\n  peripherals_datetimeInput.value = \"\";\r\n}\r\n\r\nperipherals_saveDatetime.onclick = () => {\r\n  if (peripherals_editingRowForDate !== null && peripherals_datetimeInput.value) {\r\n    const selectedDate = new Date(peripherals_datetimeInput.value).toLocaleString();\r\n    peripherals_tickets[peripherals_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"peripherals_inventoryData\", JSON.stringify(peripherals_tickets));\r\n    peripherals_renderTable();\r\n    peripherals_datetimeModal.style.display = \"none\";\r\n    peripherals_editingRowForDate = null;\r\n  }\r\n};\r\nperipherals_closeDatetime.onclick = () => peripherals_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nperipherals_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"peripherals_inventoryTable\").style.display = peripherals_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"peripherals_trashTable\").style.display = peripherals_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nperipherals_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#peripherals_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction peripherals_renderSettingsTable() {\r\n  const body = peripherals_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  peripherals_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='peripherals_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction peripherals_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  peripherals_tableFields = peripherals_tableFields.filter(f => f !== field);\r\n  peripherals_saveTableFields();\r\n  peripherals_renderSettingsTable();\r\n  peripherals_renderTableHeaders();\r\n  peripherals_renderTable();\r\n}\r\n\r\nfunction peripherals_saveTableFields() {\r\n  localStorage.setItem(\"peripherals_tableFields\", JSON.stringify(peripherals_tableFields));\r\n  peripherals_renderTableHeaders();\r\n  peripherals_renderTable();\r\n}\r\n\r\nperipherals_settingsIcon.onclick = () => {\r\n  peripherals_settingsModal.style.display = \"block\";\r\n  peripherals_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet peripherals_draggedRow = null;\r\nif (peripherals_settingsBody) {\r\n  peripherals_settingsBody.addEventListener(\"dragstart\", e => {\r\n    peripherals_draggedRow = e.target.closest(\"tr\");\r\n    if (peripherals_draggedRow) peripherals_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  peripherals_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = peripherals_getDragAfterElement(peripherals_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#peripherals_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        peripherals_settingsBody.appendChild(draggable);\r\n      } else {\r\n        peripherals_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  peripherals_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (peripherals_draggedRow) peripherals_draggedRow.classList.remove(\"dragging\");\r\n    peripherals_draggedRow = null;\r\n    peripherals_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction peripherals_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction peripherals_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = peripherals_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  peripherals_tableFields = newOrder;\r\n  peripherals_saveTableFields();\r\n  peripherals_renderTableHeaders();\r\n  peripherals_renderTable();\r\n}\r\n\r\nfunction peripherals_saveSettings() {\r\n  const newOrder = [];\r\n  const body = peripherals_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  peripherals_tableFields = newOrder;\r\n  peripherals_saveTableFields();\r\n  peripherals_renderTableHeaders();\r\n  peripherals_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#peripherals_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"peripherals_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"peripherals_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = peripherals_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nperipherals_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (peripherals_addFieldModal) peripherals_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nperipherals_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (peripherals_addFieldModal) peripherals_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"peripherals_saveNewFieldBtn\").addEventListener(\"click\", saveNewPeripheralsField);\r\n\r\nfunction saveNewPeripheralsField() {\r\n  const fieldNameElem = document.getElementById(\"peripherals_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (peripherals_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = peripherals_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    peripherals_tableFields.push(fieldName);\r\n  } else {\r\n    peripherals_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  peripherals_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#peripherals_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (peripherals_addFieldModal) peripherals_addFieldModal.style.display = \"none\";\r\n\r\n  peripherals_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nperipherals_closeAddModalBtn.addEventListener(\"click\", peripherals_closeModal);\r\nperipherals_cancelBtn.addEventListener(\"click\", peripherals_closeModal);\r\nperipherals_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  peripherals_settingsModal.style.display = \"none\";\r\n});\r\nperipherals_closeDatetime.addEventListener(\"click\", () => {\r\n  peripherals_datetimeModal.style.display = \"none\";\r\n});\r\nperipherals_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  peripherals_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === peripherals_addModal) peripherals_closeModal();\r\n  if (target === peripherals_settingsModal) peripherals_settingsModal.style.display = \"none\";\r\n  if (target === peripherals_addFieldModal) peripherals_addFieldModal.style.display = \"none\";\r\n  if (target === peripherals_datetimeModal) peripherals_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nperipherals_addBtn.addEventListener(\"click\", () => peripherals_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction peripherals_init() {\r\n  peripherals_renderTableHeaders();\r\n  peripherals_renderTable();\r\n  peripherals_renderTrash();\r\n\r\n  document.getElementById(\"peripherals_inventoryTable\").style.display = peripherals_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"peripherals_trashTable\").style.display = peripherals_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nperipherals_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.peripherals_openModal = peripherals_openModal;\r\nwindow.peripherals_deleteRecord = peripherals_deleteRecord;\r\nwindow.peripherals_openDateTime = peripherals_openDateTime;\r\nwindow.peripherals_deletePermanently = peripherals_deletePermanently;\r\nwindow.peripherals_deleteField = peripherals_deleteField;\r\nwindow.peripherals_restore = peripherals_restore;\r\n<\/script>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840987\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840987\" data-tab-index=\"7\" style=\"--n-tabs-title-order: 7;\" class=\" elementor-element elementor-element-9a6ec6a e-con-full e-flex e-con e-child\" data-id=\"9a6ec6a\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c96df0b elementor-widget elementor-widget-html\" data-id=\"c96df0b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Cartridges<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #cartridges_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #cartridges_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #cartridges_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #cartridges_settingsModal th, #cartridges_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #cartridges_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #cartridges_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #cartridges_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #cartridges_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #cartridges_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #cartridges_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #cartridges_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #cartridges_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #cartridges_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #cartridges_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #cartridges_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #cartridges_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #cartridges_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"cartridges_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"cartridges_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"cartridges_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"cartridges_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"cartridges_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"cartridges_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"cartridges_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"cartridges_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"cartridges_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"cartridges_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"cartridges_modalTitle\">ADD<\/h2>\r\n    <form id=\"cartridges_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"cartridges_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"cartridges_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"cartridges_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"cartridges_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"cartridges_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"cartridges_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"cartridges_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"cartridges_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"cartridges_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"cartridges_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"cartridges_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"cartridges_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"cartridges_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"cartridges_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"cartridges_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"cartridges_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"cartridges_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"cartridges_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"cartridges_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"cartridges_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"cartridges_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"cartridges_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"cartridges_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"cartridges_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst cartridges_container = document.getElementById(\"cartridges_container\");\r\nlet cartridges_tickets = JSON.parse(localStorage.getItem(\"cartridges_inventoryData\")) || [];\r\nlet cartridges_trashData = JSON.parse(localStorage.getItem(\"cartridges_trashData\")) || [];\r\nlet cartridges_tableFields = JSON.parse(localStorage.getItem(\"cartridges_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet cartridges_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!cartridges_tableFields.includes(\"Name\")) {\r\n  cartridges_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (cartridges_tableFields[0] !== \"Name\") {\r\n    cartridges_tableFields = cartridges_tableFields.filter(f => f !== \"Name\");\r\n    cartridges_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst cartridges_addBtn = document.getElementById(\"cartridges_addBtn\");\r\nconst cartridges_addModal = document.getElementById(\"cartridges_addModal\");\r\nconst cartridges_modalTitle = document.getElementById(\"cartridges_modalTitle\");\r\nconst cartridges_addForm = document.getElementById(\"cartridges_addForm\");\r\nconst cartridges_tableBody = document.querySelector(\"#cartridges_inventoryTable tbody\");\r\nconst cartridges_trashTableBody = document.querySelector(\"#cartridges_trashTable tbody\");\r\nconst cartridges_trashToggle = document.getElementById(\"cartridges_trashToggle\");\r\nconst cartridges_searchInput = document.getElementById(\"cartridges_searchInput\");\r\n\r\nconst cartridges_settingsModal = document.getElementById(\"cartridges_settingsModal\");\r\nconst cartridges_settingsIcon = document.getElementById(\"cartridges_settingsIcon\");\r\nconst cartridges_settingsBody = document.getElementById(\"cartridges_settingsBody\");\r\n\r\nconst cartridges_addFieldModal = document.getElementById(\"cartridges_addFieldModal\");\r\nconst cartridges_openAddFieldBtn = document.getElementById(\"cartridges_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst cartridges_datetimeModal = document.getElementById(\"cartridges_datetimeModal\");\r\nconst cartridges_datetimeInput = document.getElementById(\"cartridges_datetimeInput\");\r\nconst cartridges_saveDatetime = document.getElementById(\"cartridges_saveDatetime\");\r\nconst cartridges_closeDatetime = document.getElementById(\"cartridges_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst cartridges_closeAddModalBtn = document.getElementById(\"cartridges_closeAddModal\");\r\nconst cartridges_cancelBtn = document.getElementById(\"cartridges_cancelBtn\");\r\nconst cartridges_closeSettingsModalBtn = document.getElementById(\"cartridges_closeSettingsModal\");\r\nconst cartridges_closeAddFieldBtn = document.getElementById(\"cartridges_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst cartridges_addLocationBtn = document.getElementById(\"cartridges_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction cartridges_openModal(edit = false, index = null) {\r\n  cartridges_addModal.style.display = \"block\";\r\n  cartridges_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  cartridges_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = cartridges_tickets[index];\r\n    document.getElementById(\"cartridges_name\").value = rec.name || \"\";\r\n    document.getElementById(\"cartridges_department\").value = rec.department || \"\";\r\n    document.getElementById(\"cartridges_status\").value = rec.status || \"\";\r\n    document.getElementById(\"cartridges_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"cartridges_type\").value = rec.type || \"\";\r\n    document.getElementById(\"cartridges_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"cartridges_model\").value = rec.model || \"\";\r\n    document.getElementById(\"cartridges_location\").value = rec.location || \"\";\r\n    document.getElementById(\"cartridges_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    cartridges_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction cartridges_closeModal() {\r\n  cartridges_addModal.style.display = \"none\";\r\n  cartridges_addForm.reset();\r\n  cartridges_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\ncartridges_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"cartridges_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\ncartridges_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"cartridges_name\").value,\r\n    department: document.getElementById(\"cartridges_department\").value,\r\n    status: document.getElementById(\"cartridges_status\").value,\r\n    asset: document.getElementById(\"cartridges_asset\").value,\r\n    type: document.getElementById(\"cartridges_type\").value,\r\n    manufacturer: document.getElementById(\"cartridges_manufacturer\").value,\r\n    model: document.getElementById(\"cartridges_model\").value,\r\n    location: document.getElementById(\"cartridges_location\").value,\r\n    incharge: document.getElementById(\"cartridges_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (cartridges_editIndex !== null && cartridges_editIndex !== undefined) {\r\n    cartridges_tickets[cartridges_editIndex] = record;\r\n    cartridges_editIndex = null;\r\n  } else {\r\n    cartridges_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"cartridges_inventoryData\", JSON.stringify(cartridges_tickets));\r\n  cartridges_renderTable();\r\n  cartridges_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction cartridges_deleteRecord(index) {\r\n  const record = cartridges_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  cartridges_trashData.push(record);\r\n  localStorage.setItem(\"cartridges_inventoryData\", JSON.stringify(cartridges_tickets));\r\n  localStorage.setItem(\"cartridges_trashData\", JSON.stringify(cartridges_trashData));\r\n  cartridges_renderTable();\r\n  cartridges_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction cartridges_renderTableHeaders() {\r\n  if (!cartridges_tableFields.includes(\"Name\")) {\r\n    cartridges_tableFields.unshift(\"Name\");\r\n  } else if (cartridges_tableFields[0] !== \"Name\") {\r\n    cartridges_tableFields = cartridges_tableFields.filter(f => f !== \"Name\");\r\n    cartridges_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#cartridges_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  cartridges_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction cartridges_renderTable() {\r\n  cartridges_tableBody.innerHTML = \"\";\r\n  cartridges_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    cartridges_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"cartridges_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"cartridges_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"cartridges_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    cartridges_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction cartridges_renderTrash() {\r\n  cartridges_trashTableBody.innerHTML = \"\";\r\n  cartridges_trashData.forEach((r, i) => {\r\n    cartridges_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"cartridges_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"cartridges_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction cartridges_restore(index) {\r\n  const rec = cartridges_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  cartridges_tickets.push(rec);\r\n  localStorage.setItem(\"cartridges_trashData\", JSON.stringify(cartridges_trashData));\r\n  localStorage.setItem(\"cartridges_inventoryData\", JSON.stringify(cartridges_tickets));\r\n  cartridges_renderTrash();\r\n  cartridges_renderTable();\r\n}\r\n\r\nfunction cartridges_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    cartridges_trashData.splice(index, 1);\r\n    localStorage.setItem(\"cartridges_trashData\", JSON.stringify(cartridges_trashData));\r\n    cartridges_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet cartridges_editingRowForDate = null;\r\nfunction cartridges_openDateTime(index) {\r\n  cartridges_editingRowForDate = index;\r\n  cartridges_datetimeModal.style.display = \"block\";\r\n  cartridges_datetimeInput.value = \"\";\r\n}\r\n\r\ncartridges_saveDatetime.onclick = () => {\r\n  if (cartridges_editingRowForDate !== null && cartridges_datetimeInput.value) {\r\n    const selectedDate = new Date(cartridges_datetimeInput.value).toLocaleString();\r\n    cartridges_tickets[cartridges_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"cartridges_inventoryData\", JSON.stringify(cartridges_tickets));\r\n    cartridges_renderTable();\r\n    cartridges_datetimeModal.style.display = \"none\";\r\n    cartridges_editingRowForDate = null;\r\n  }\r\n};\r\ncartridges_closeDatetime.onclick = () => cartridges_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\ncartridges_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"cartridges_inventoryTable\").style.display = cartridges_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"cartridges_trashTable\").style.display = cartridges_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\ncartridges_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#cartridges_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction cartridges_renderSettingsTable() {\r\n  const body = cartridges_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  cartridges_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='cartridges_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction cartridges_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  cartridges_tableFields = cartridges_tableFields.filter(f => f !== field);\r\n  cartridges_saveTableFields();\r\n  cartridges_renderSettingsTable();\r\n  cartridges_renderTableHeaders();\r\n  cartridges_renderTable();\r\n}\r\n\r\nfunction cartridges_saveTableFields() {\r\n  localStorage.setItem(\"cartridges_tableFields\", JSON.stringify(cartridges_tableFields));\r\n  cartridges_renderTableHeaders();\r\n  cartridges_renderTable();\r\n}\r\n\r\ncartridges_settingsIcon.onclick = () => {\r\n  cartridges_settingsModal.style.display = \"block\";\r\n  cartridges_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet cartridges_draggedRow = null;\r\nif (cartridges_settingsBody) {\r\n  cartridges_settingsBody.addEventListener(\"dragstart\", e => {\r\n    cartridges_draggedRow = e.target.closest(\"tr\");\r\n    if (cartridges_draggedRow) cartridges_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  cartridges_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = cartridges_getDragAfterElement(cartridges_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#cartridges_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        cartridges_settingsBody.appendChild(draggable);\r\n      } else {\r\n        cartridges_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  cartridges_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (cartridges_draggedRow) cartridges_draggedRow.classList.remove(\"dragging\");\r\n    cartridges_draggedRow = null;\r\n    cartridges_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction cartridges_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction cartridges_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = cartridges_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  cartridges_tableFields = newOrder;\r\n  cartridges_saveTableFields();\r\n  cartridges_renderTableHeaders();\r\n  cartridges_renderTable();\r\n}\r\n\r\nfunction cartridges_saveSettings() {\r\n  const newOrder = [];\r\n  const body = cartridges_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  cartridges_tableFields = newOrder;\r\n  cartridges_saveTableFields();\r\n  cartridges_renderTableHeaders();\r\n  cartridges_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#cartridges_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"cartridges_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"cartridges_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = cartridges_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\ncartridges_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (cartridges_addFieldModal) cartridges_addFieldModal.style.display = \"block\";\r\n});\r\n\r\ncartridges_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (cartridges_addFieldModal) cartridges_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"cartridges_saveNewFieldBtn\").addEventListener(\"click\", saveNewCartridgesField);\r\n\r\nfunction saveNewCartridgesField() {\r\n  const fieldNameElem = document.getElementById(\"cartridges_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (cartridges_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = cartridges_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    cartridges_tableFields.push(fieldName);\r\n  } else {\r\n    cartridges_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  cartridges_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#cartridges_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (cartridges_addFieldModal) cartridges_addFieldModal.style.display = \"none\";\r\n\r\n  cartridges_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\ncartridges_closeAddModalBtn.addEventListener(\"click\", cartridges_closeModal);\r\ncartridges_cancelBtn.addEventListener(\"click\", cartridges_closeModal);\r\ncartridges_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  cartridges_settingsModal.style.display = \"none\";\r\n});\r\ncartridges_closeDatetime.addEventListener(\"click\", () => {\r\n  cartridges_datetimeModal.style.display = \"none\";\r\n});\r\ncartridges_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  cartridges_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === cartridges_addModal) cartridges_closeModal();\r\n  if (target === cartridges_settingsModal) cartridges_settingsModal.style.display = \"none\";\r\n  if (target === cartridges_addFieldModal) cartridges_addFieldModal.style.display = \"none\";\r\n  if (target === cartridges_datetimeModal) cartridges_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\ncartridges_addBtn.addEventListener(\"click\", () => cartridges_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction cartridges_init() {\r\n  cartridges_renderTableHeaders();\r\n  cartridges_renderTable();\r\n  cartridges_renderTrash();\r\n\r\n  document.getElementById(\"cartridges_inventoryTable\").style.display = cartridges_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"cartridges_trashTable\").style.display = cartridges_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\ncartridges_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.cartridges_openModal = cartridges_openModal;\r\nwindow.cartridges_deleteRecord = cartridges_deleteRecord;\r\nwindow.cartridges_openDateTime = cartridges_openDateTime;\r\nwindow.cartridges_deletePermanently = cartridges_deletePermanently;\r\nwindow.cartridges_deleteField = cartridges_deleteField;\r\nwindow.cartridges_restore = cartridges_restore;\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840988\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840988\" data-tab-index=\"8\" style=\"--n-tabs-title-order: 8;\" class=\" elementor-element elementor-element-1f53de5 e-con-full e-flex e-con e-child\" data-id=\"1f53de5\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d963faa elementor-widget elementor-widget-html\" data-id=\"d963faa\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Consumables<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #consumables_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #consumables_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #consumables_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #consumables_settingsModal th, #consumables_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #consumables_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #consumables_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #consumables_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #consumables_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #consumables_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #consumables_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #consumables_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #consumables_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #consumables_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #consumables_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #consumables_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #consumables_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #consumables_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #consumables_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"consumables_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"consumables_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"consumables_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"consumables_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"consumables_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"consumables_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"consumables_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"consumables_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"consumables_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"consumables_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"consumables_modalTitle\">ADD<\/h2>\r\n    <form id=\"consumables_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"consumables_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"consumables_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"consumables_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"consumables_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"consumables_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"consumables_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"consumables_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"consumables_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"consumables_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"consumables_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"consumables_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"consumables_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"consumables_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"consumables_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"consumables_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"consumables_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"consumables_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"consumables_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"consumables_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"consumables_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"consumables_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"consumables_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"consumables_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"consumables_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst consumables_container = document.getElementById(\"consumables_container\");\r\nlet consumables_tickets = JSON.parse(localStorage.getItem(\"consumables_inventoryData\")) || [];\r\nlet consumables_trashData = JSON.parse(localStorage.getItem(\"consumables_trashData\")) || [];\r\nlet consumables_tableFields = JSON.parse(localStorage.getItem(\"consumables_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet consumables_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!consumables_tableFields.includes(\"Name\")) {\r\n  consumables_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (consumables_tableFields[0] !== \"Name\") {\r\n    consumables_tableFields = consumables_tableFields.filter(f => f !== \"Name\");\r\n    consumables_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst consumables_addBtn = document.getElementById(\"consumables_addBtn\");\r\nconst consumables_addModal = document.getElementById(\"consumables_addModal\");\r\nconst consumables_modalTitle = document.getElementById(\"consumables_modalTitle\");\r\nconst consumables_addForm = document.getElementById(\"consumables_addForm\");\r\nconst consumables_tableBody = document.querySelector(\"#consumables_inventoryTable tbody\");\r\nconst consumables_trashTableBody = document.querySelector(\"#consumables_trashTable tbody\");\r\nconst consumables_trashToggle = document.getElementById(\"consumables_trashToggle\");\r\nconst consumables_searchInput = document.getElementById(\"consumables_searchInput\");\r\n\r\nconst consumables_settingsModal = document.getElementById(\"consumables_settingsModal\");\r\nconst consumables_settingsIcon = document.getElementById(\"consumables_settingsIcon\");\r\nconst consumables_settingsBody = document.getElementById(\"consumables_settingsBody\");\r\n\r\nconst consumables_addFieldModal = document.getElementById(\"consumables_addFieldModal\");\r\nconst consumables_openAddFieldBtn = document.getElementById(\"consumables_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst consumables_datetimeModal = document.getElementById(\"consumables_datetimeModal\");\r\nconst consumables_datetimeInput = document.getElementById(\"consumables_datetimeInput\");\r\nconst consumables_saveDatetime = document.getElementById(\"consumables_saveDatetime\");\r\nconst consumables_closeDatetime = document.getElementById(\"consumables_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst consumables_closeAddModalBtn = document.getElementById(\"consumables_closeAddModal\");\r\nconst consumables_cancelBtn = document.getElementById(\"consumables_cancelBtn\");\r\nconst consumables_closeSettingsModalBtn = document.getElementById(\"consumables_closeSettingsModal\");\r\nconst consumables_closeAddFieldBtn = document.getElementById(\"consumables_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst consumables_addLocationBtn = document.getElementById(\"consumables_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction consumables_openModal(edit = false, index = null) {\r\n  consumables_addModal.style.display = \"block\";\r\n  consumables_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  consumables_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = consumables_tickets[index];\r\n    document.getElementById(\"consumables_name\").value = rec.name || \"\";\r\n    document.getElementById(\"consumables_department\").value = rec.department || \"\";\r\n    document.getElementById(\"consumables_status\").value = rec.status || \"\";\r\n    document.getElementById(\"consumables_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"consumables_type\").value = rec.type || \"\";\r\n    document.getElementById(\"consumables_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"consumables_model\").value = rec.model || \"\";\r\n    document.getElementById(\"consumables_location\").value = rec.location || \"\";\r\n    document.getElementById(\"consumables_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    consumables_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction consumables_closeModal() {\r\n  consumables_addModal.style.display = \"none\";\r\n  consumables_addForm.reset();\r\n  consumables_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nconsumables_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"consumables_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nconsumables_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"consumables_name\").value,\r\n    department: document.getElementById(\"consumables_department\").value,\r\n    status: document.getElementById(\"consumables_status\").value,\r\n    asset: document.getElementById(\"consumables_asset\").value,\r\n    type: document.getElementById(\"consumables_type\").value,\r\n    manufacturer: document.getElementById(\"consumables_manufacturer\").value,\r\n    model: document.getElementById(\"consumables_model\").value,\r\n    location: document.getElementById(\"consumables_location\").value,\r\n    incharge: document.getElementById(\"consumables_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (consumables_editIndex !== null && consumables_editIndex !== undefined) {\r\n    consumables_tickets[consumables_editIndex] = record;\r\n    consumables_editIndex = null;\r\n  } else {\r\n    consumables_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"consumables_inventoryData\", JSON.stringify(consumables_tickets));\r\n  consumables_renderTable();\r\n  consumables_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction consumables_deleteRecord(index) {\r\n  const record = consumables_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  consumables_trashData.push(record);\r\n  localStorage.setItem(\"consumables_inventoryData\", JSON.stringify(consumables_tickets));\r\n  localStorage.setItem(\"consumables_trashData\", JSON.stringify(consumables_trashData));\r\n  consumables_renderTable();\r\n  consumables_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction consumables_renderTableHeaders() {\r\n  if (!consumables_tableFields.includes(\"Name\")) {\r\n    consumables_tableFields.unshift(\"Name\");\r\n  } else if (consumables_tableFields[0] !== \"Name\") {\r\n    consumables_tableFields = consumables_tableFields.filter(f => f !== \"Name\");\r\n    consumables_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#consumables_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  consumables_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction consumables_renderTable() {\r\n  consumables_tableBody.innerHTML = \"\";\r\n  consumables_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    consumables_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"consumables_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"consumables_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"consumables_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    consumables_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction consumables_renderTrash() {\r\n  consumables_trashTableBody.innerHTML = \"\";\r\n  consumables_trashData.forEach((r, i) => {\r\n    consumables_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"consumables_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"consumables_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction consumables_restore(index) {\r\n  const rec = consumables_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  consumables_tickets.push(rec);\r\n  localStorage.setItem(\"consumables_trashData\", JSON.stringify(consumables_trashData));\r\n  localStorage.setItem(\"consumables_inventoryData\", JSON.stringify(consumables_tickets));\r\n  consumables_renderTrash();\r\n  consumables_renderTable();\r\n}\r\n\r\nfunction consumables_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    consumables_trashData.splice(index, 1);\r\n    localStorage.setItem(\"consumables_trashData\", JSON.stringify(consumables_trashData));\r\n    consumables_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet consumables_editingRowForDate = null;\r\nfunction consumables_openDateTime(index) {\r\n  consumables_editingRowForDate = index;\r\n  consumables_datetimeModal.style.display = \"block\";\r\n  consumables_datetimeInput.value = \"\";\r\n}\r\n\r\nconsumables_saveDatetime.onclick = () => {\r\n  if (consumables_editingRowForDate !== null && consumables_datetimeInput.value) {\r\n    const selectedDate = new Date(consumables_datetimeInput.value).toLocaleString();\r\n    consumables_tickets[consumables_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"consumables_inventoryData\", JSON.stringify(consumables_tickets));\r\n    consumables_renderTable();\r\n    consumables_datetimeModal.style.display = \"none\";\r\n    consumables_editingRowForDate = null;\r\n  }\r\n};\r\nconsumables_closeDatetime.onclick = () => consumables_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nconsumables_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"consumables_inventoryTable\").style.display = consumables_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"consumables_trashTable\").style.display = consumables_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nconsumables_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#consumables_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction consumables_renderSettingsTable() {\r\n  const body = consumables_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  consumables_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='consumables_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction consumables_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  consumables_tableFields = consumables_tableFields.filter(f => f !== field);\r\n  consumables_saveTableFields();\r\n  consumables_renderSettingsTable();\r\n  consumables_renderTableHeaders();\r\n  consumables_renderTable();\r\n}\r\n\r\nfunction consumables_saveTableFields() {\r\n  localStorage.setItem(\"consumables_tableFields\", JSON.stringify(consumables_tableFields));\r\n  consumables_renderTableHeaders();\r\n  consumables_renderTable();\r\n}\r\n\r\nconsumables_settingsIcon.onclick = () => {\r\n  consumables_settingsModal.style.display = \"block\";\r\n  consumables_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet consumables_draggedRow = null;\r\nif (consumables_settingsBody) {\r\n  consumables_settingsBody.addEventListener(\"dragstart\", e => {\r\n    consumables_draggedRow = e.target.closest(\"tr\");\r\n    if (consumables_draggedRow) consumables_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  consumables_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = consumables_getDragAfterElement(consumables_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#consumables_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        consumables_settingsBody.appendChild(draggable);\r\n      } else {\r\n        consumables_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  consumables_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (consumables_draggedRow) consumables_draggedRow.classList.remove(\"dragging\");\r\n    consumables_draggedRow = null;\r\n    consumables_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction consumables_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction consumables_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = consumables_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  consumables_tableFields = newOrder;\r\n  consumables_saveTableFields();\r\n  consumables_renderTableHeaders();\r\n  consumables_renderTable();\r\n}\r\n\r\nfunction consumables_saveSettings() {\r\n  const newOrder = [];\r\n  const body = consumables_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  consumables_tableFields = newOrder;\r\n  consumables_saveTableFields();\r\n  consumables_renderTableHeaders();\r\n  consumables_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#consumables_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"consumables_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"consumables_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = consumables_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nconsumables_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (consumables_addFieldModal) consumables_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nconsumables_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (consumables_addFieldModal) consumables_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"consumables_saveNewFieldBtn\").addEventListener(\"click\", saveNewConsumablesField);\r\n\r\nfunction saveNewConsumablesField() {\r\n  const fieldNameElem = document.getElementById(\"consumables_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (consumables_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = consumables_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    consumables_tableFields.push(fieldName);\r\n  } else {\r\n    consumables_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  consumables_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#consumables_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (consumables_addFieldModal) consumables_addFieldModal.style.display = \"none\";\r\n\r\n  consumables_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nconsumables_closeAddModalBtn.addEventListener(\"click\", consumables_closeModal);\r\nconsumables_cancelBtn.addEventListener(\"click\", consumables_closeModal);\r\nconsumables_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  consumables_settingsModal.style.display = \"none\";\r\n});\r\nconsumables_closeDatetime.addEventListener(\"click\", () => {\r\n  consumables_datetimeModal.style.display = \"none\";\r\n});\r\nconsumables_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  consumables_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === consumables_addModal) consumables_closeModal();\r\n  if (target === consumables_settingsModal) consumables_settingsModal.style.display = \"none\";\r\n  if (target === consumables_addFieldModal) consumables_addFieldModal.style.display = \"none\";\r\n  if (target === consumables_datetimeModal) consumables_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nconsumables_addBtn.addEventListener(\"click\", () => consumables_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction consumables_init() {\r\n  consumables_renderTableHeaders();\r\n  consumables_renderTable();\r\n  consumables_renderTrash();\r\n\r\n  document.getElementById(\"consumables_inventoryTable\").style.display = consumables_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"consumables_trashTable\").style.display = consumables_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nconsumables_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.consumables_openModal = consumables_openModal;\r\nwindow.consumables_deleteRecord = consumables_deleteRecord;\r\nwindow.consumables_openDateTime = consumables_openDateTime;\r\nwindow.consumables_deletePermanently = consumables_deletePermanently;\r\nwindow.consumables_deleteField = consumables_deleteField;\r\nwindow.consumables_restore = consumables_restore;\r\n<\/script>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1313840989\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1313840989\" data-tab-index=\"9\" style=\"--n-tabs-title-order: 9;\" class=\" elementor-element elementor-element-e559be7 e-con-full e-flex e-con e-child\" data-id=\"e559be7\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36ddb12 elementor-widget elementor-widget-html\" data-id=\"36ddb12\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Phones<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #phones_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #phones_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #phones_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #phones_settingsModal th, #phones_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #phones_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #phones_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #phones_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #phones_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #phones_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #phones_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #phones_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #phones_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #phones_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #phones_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #phones_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #phones_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #phones_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #phones_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"phones_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"phones_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"phones_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"phones_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"phones_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"phones_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"phones_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"phones_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"phones_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"phones_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"phones_modalTitle\">ADD<\/h2>\r\n    <form id=\"phones_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"phones_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"phones_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"phones_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"phones_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"phones_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"phones_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"phones_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"phones_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"phones_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"phones_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"phones_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"phones_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"phones_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"phones_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"phones_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"phones_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"phones_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"phones_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"phones_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"phones_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"phones_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"phones_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"phones_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"phones_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script> \r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst phones_container = document.getElementById(\"phones_container\");\r\nlet phones_tickets = JSON.parse(localStorage.getItem(\"phones_inventoryData\")) || [];\r\nlet phones_trashData = JSON.parse(localStorage.getItem(\"phones_trashData\")) || [];\r\nlet phones_tableFields = JSON.parse(localStorage.getItem(\"phones_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet phones_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!phones_tableFields.includes(\"Name\")) {\r\n  phones_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (phones_tableFields[0] !== \"Name\") {\r\n    phones_tableFields = phones_tableFields.filter(f => f !== \"Name\");\r\n    phones_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst phones_addBtn = document.getElementById(\"phones_addBtn\");\r\nconst phones_addModal = document.getElementById(\"phones_addModal\");\r\nconst phones_modalTitle = document.getElementById(\"phones_modalTitle\");\r\nconst phones_addForm = document.getElementById(\"phones_addForm\");\r\nconst phones_tableBody = document.querySelector(\"#phones_inventoryTable tbody\");\r\nconst phones_trashTableBody = document.querySelector(\"#phones_trashTable tbody\");\r\nconst phones_trashToggle = document.getElementById(\"phones_trashToggle\");\r\nconst phones_searchInput = document.getElementById(\"phones_searchInput\");\r\n\r\nconst phones_settingsModal = document.getElementById(\"phones_settingsModal\");\r\nconst phones_settingsIcon = document.getElementById(\"phones_settingsIcon\");\r\nconst phones_settingsBody = document.getElementById(\"phones_settingsBody\");\r\n\r\nconst phones_addFieldModal = document.getElementById(\"phones_addFieldModal\");\r\nconst phones_openAddFieldBtn = document.getElementById(\"phones_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst phones_datetimeModal = document.getElementById(\"phones_datetimeModal\");\r\nconst phones_datetimeInput = document.getElementById(\"phones_datetimeInput\");\r\nconst phones_saveDatetime = document.getElementById(\"phones_saveDatetime\");\r\nconst phones_closeDatetime = document.getElementById(\"phones_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst phones_closeAddModalBtn = document.getElementById(\"phones_closeAddModal\");\r\nconst phones_cancelBtn = document.getElementById(\"phones_cancelBtn\");\r\nconst phones_closeSettingsModalBtn = document.getElementById(\"phones_closeSettingsModal\");\r\nconst phones_closeAddFieldBtn = document.getElementById(\"phones_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst phones_addLocationBtn = document.getElementById(\"phones_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction phones_openModal(edit = false, index = null) {\r\n  phones_addModal.style.display = \"block\";\r\n  phones_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  phones_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = phones_tickets[index];\r\n    document.getElementById(\"phones_name\").value = rec.name || \"\";\r\n    document.getElementById(\"phones_department\").value = rec.department || \"\";\r\n    document.getElementById(\"phones_status\").value = rec.status || \"\";\r\n    document.getElementById(\"phones_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"phones_type\").value = rec.type || \"\";\r\n    document.getElementById(\"phones_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"phones_model\").value = rec.model || \"\";\r\n    document.getElementById(\"phones_location\").value = rec.location || \"\";\r\n    document.getElementById(\"phones_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    phones_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction phones_closeModal() {\r\n  phones_addModal.style.display = \"none\";\r\n  phones_addForm.reset();\r\n  phones_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nphones_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"phones_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nphones_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"phones_name\").value,\r\n    department: document.getElementById(\"phones_department\").value,\r\n    status: document.getElementById(\"phones_status\").value,\r\n    asset: document.getElementById(\"phones_asset\").value,\r\n    type: document.getElementById(\"phones_type\").value,\r\n    manufacturer: document.getElementById(\"phones_manufacturer\").value,\r\n    model: document.getElementById(\"phones_model\").value,\r\n    location: document.getElementById(\"phones_location\").value,\r\n    incharge: document.getElementById(\"phones_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (phones_editIndex !== null && phones_editIndex !== undefined) {\r\n    phones_tickets[phones_editIndex] = record;\r\n    phones_editIndex = null;\r\n  } else {\r\n    phones_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"phones_inventoryData\", JSON.stringify(phones_tickets));\r\n  phones_renderTable();\r\n  phones_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction phones_deleteRecord(index) {\r\n  const record = phones_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  phones_trashData.push(record);\r\n  localStorage.setItem(\"phones_inventoryData\", JSON.stringify(phones_tickets));\r\n  localStorage.setItem(\"phones_trashData\", JSON.stringify(phones_trashData));\r\n  phones_renderTable();\r\n  phones_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction phones_renderTableHeaders() {\r\n  if (!phones_tableFields.includes(\"Name\")) {\r\n    phones_tableFields.unshift(\"Name\");\r\n  } else if (phones_tableFields[0] !== \"Name\") {\r\n    phones_tableFields = phones_tableFields.filter(f => f !== \"Name\");\r\n    phones_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#phones_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  phones_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction phones_renderTable() {\r\n  phones_tableBody.innerHTML = \"\";\r\n  phones_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    phones_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"phones_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"phones_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"phones_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    phones_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction phones_renderTrash() {\r\n  phones_trashTableBody.innerHTML = \"\";\r\n  phones_trashData.forEach((r, i) => {\r\n    phones_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"phones_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"phones_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction phones_restore(index) {\r\n  const rec = phones_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  phones_tickets.push(rec);\r\n  localStorage.setItem(\"phones_trashData\", JSON.stringify(phones_trashData));\r\n  localStorage.setItem(\"phones_inventoryData\", JSON.stringify(phones_tickets));\r\n  phones_renderTrash();\r\n  phones_renderTable();\r\n}\r\n\r\nfunction phones_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    phones_trashData.splice(index, 1);\r\n    localStorage.setItem(\"phones_trashData\", JSON.stringify(phones_trashData));\r\n    phones_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet phones_editingRowForDate = null;\r\nfunction phones_openDateTime(index) {\r\n  phones_editingRowForDate = index;\r\n  phones_datetimeModal.style.display = \"block\";\r\n  phones_datetimeInput.value = \"\";\r\n}\r\n\r\nphones_saveDatetime.onclick = () => {\r\n  if (phones_editingRowForDate !== null && phones_datetimeInput.value) {\r\n    const selectedDate = new Date(phones_datetimeInput.value).toLocaleString();\r\n    phones_tickets[phones_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"phones_inventoryData\", JSON.stringify(phones_tickets));\r\n    phones_renderTable();\r\n    phones_datetimeModal.style.display = \"none\";\r\n    phones_editingRowForDate = null;\r\n  }\r\n};\r\nphones_closeDatetime.onclick = () => phones_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nphones_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"phones_inventoryTable\").style.display = phones_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"phones_trashTable\").style.display = phones_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nphones_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#phones_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction phones_renderSettingsTable() {\r\n  const body = phones_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  phones_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='phones_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction phones_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  phones_tableFields = phones_tableFields.filter(f => f !== field);\r\n  phones_saveTableFields();\r\n  phones_renderSettingsTable();\r\n  phones_renderTableHeaders();\r\n  phones_renderTable();\r\n}\r\n\r\nfunction phones_saveTableFields() {\r\n  localStorage.setItem(\"phones_tableFields\", JSON.stringify(phones_tableFields));\r\n  phones_renderTableHeaders();\r\n  phones_renderTable();\r\n}\r\n\r\nphones_settingsIcon.onclick = () => {\r\n  phones_settingsModal.style.display = \"block\";\r\n  phones_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet phones_draggedRow = null;\r\nif (phones_settingsBody) {\r\n  phones_settingsBody.addEventListener(\"dragstart\", e => {\r\n    phones_draggedRow = e.target.closest(\"tr\");\r\n    if (phones_draggedRow) phones_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  phones_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = phones_getDragAfterElement(phones_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#phones_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        phones_settingsBody.appendChild(draggable);\r\n      } else {\r\n        phones_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  phones_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (phones_draggedRow) phones_draggedRow.classList.remove(\"dragging\");\r\n    phones_draggedRow = null;\r\n    phones_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction phones_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction phones_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = phones_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  phones_tableFields = newOrder;\r\n  phones_saveTableFields();\r\n  phones_renderTableHeaders();\r\n  phones_renderTable();\r\n}\r\n\r\nfunction phones_saveSettings() {\r\n  const newOrder = [];\r\n  const body = phones_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  phones_tableFields = newOrder;\r\n  phones_saveTableFields();\r\n  phones_renderTableHeaders();\r\n  phones_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#phones_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"phones_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"phones_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = phones_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nphones_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (phones_addFieldModal) phones_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nphones_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (phones_addFieldModal) phones_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"phones_saveNewFieldBtn\").addEventListener(\"click\", saveNewPhonesField);\r\n\r\nfunction saveNewPhonesField() {\r\n  const fieldNameElem = document.getElementById(\"phones_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (phones_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = phones_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    phones_tableFields.push(fieldName);\r\n  } else {\r\n    phones_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  phones_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#phones_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (phones_addFieldModal) phones_addFieldModal.style.display = \"none\";\r\n\r\n  phones_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nphones_closeAddModalBtn.addEventListener(\"click\", phones_closeModal);\r\nphones_cancelBtn.addEventListener(\"click\", phones_closeModal);\r\nphones_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  phones_settingsModal.style.display = \"none\";\r\n});\r\nphones_closeDatetime.addEventListener(\"click\", () => {\r\n  phones_datetimeModal.style.display = \"none\";\r\n});\r\nphones_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  phones_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === phones_addModal) phones_closeModal();\r\n  if (target === phones_settingsModal) phones_settingsModal.style.display = \"none\";\r\n  if (target === phones_addFieldModal) phones_addFieldModal.style.display = \"none\";\r\n  if (target === phones_datetimeModal) phones_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nphones_addBtn.addEventListener(\"click\", () => phones_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction phones_init() {\r\n  phones_renderTableHeaders();\r\n  phones_renderTable();\r\n  phones_renderTrash();\r\n\r\n  document.getElementById(\"phones_inventoryTable\").style.display = phones_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"phones_trashTable\").style.display = phones_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nphones_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.phones_openModal = phones_openModal;\r\nwindow.phones_deleteRecord = phones_deleteRecord;\r\nwindow.phones_openDateTime = phones_openDateTime;\r\nwindow.phones_deletePermanently = phones_deletePermanently;\r\nwindow.phones_deleteField = phones_deleteField;\r\nwindow.phones_restore = phones_restore;\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409810\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409810\" data-tab-index=\"10\" style=\"--n-tabs-title-order: 10;\" class=\" elementor-element elementor-element-e72beec e-con-full e-flex e-con e-child\" data-id=\"e72beec\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66c502e elementor-widget elementor-widget-html\" data-id=\"66c502e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Racks<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #racks_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #racks_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #racks_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #racks_settingsModal th, #racks_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #racks_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #racks_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #racks_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #racks_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #racks_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #racks_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #racks_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #racks_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #racks_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #racks_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #racks_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #racks_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #racks_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #racks_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"racks_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"racks_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"racks_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"racks_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"racks_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"racks_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"racks_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"racks_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"racks_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"racks_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"racks_modalTitle\">ADD<\/h2>\r\n    <form id=\"racks_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"racks_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"racks_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"racks_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"racks_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"racks_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"racks_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"racks_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"racks_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"racks_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"racks_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"racks_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"racks_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"racks_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"racks_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"racks_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"racks_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"racks_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"racks_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"racks_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"racks_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"racks_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"racks_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"racks_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"racks_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst racks_container = document.getElementById(\"racks_container\");\r\nlet racks_tickets = JSON.parse(localStorage.getItem(\"racks_inventoryData\")) || [];\r\nlet racks_trashData = JSON.parse(localStorage.getItem(\"racks_trashData\")) || [];\r\nlet racks_tableFields = JSON.parse(localStorage.getItem(\"racks_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet racks_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!racks_tableFields.includes(\"Name\")) {\r\n  racks_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (racks_tableFields[0] !== \"Name\") {\r\n    racks_tableFields = racks_tableFields.filter(f => f !== \"Name\");\r\n    racks_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst racks_addBtn = document.getElementById(\"racks_addBtn\");\r\nconst racks_addModal = document.getElementById(\"racks_addModal\");\r\nconst racks_modalTitle = document.getElementById(\"racks_modalTitle\");\r\nconst racks_addForm = document.getElementById(\"racks_addForm\");\r\nconst racks_tableBody = document.querySelector(\"#racks_inventoryTable tbody\");\r\nconst racks_trashTableBody = document.querySelector(\"#racks_trashTable tbody\");\r\nconst racks_trashToggle = document.getElementById(\"racks_trashToggle\");\r\nconst racks_searchInput = document.getElementById(\"racks_searchInput\");\r\n\r\nconst racks_settingsModal = document.getElementById(\"racks_settingsModal\");\r\nconst racks_settingsIcon = document.getElementById(\"racks_settingsIcon\");\r\nconst racks_settingsBody = document.getElementById(\"racks_settingsBody\");\r\n\r\nconst racks_addFieldModal = document.getElementById(\"racks_addFieldModal\");\r\nconst racks_openAddFieldBtn = document.getElementById(\"racks_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst racks_datetimeModal = document.getElementById(\"racks_datetimeModal\");\r\nconst racks_datetimeInput = document.getElementById(\"racks_datetimeInput\");\r\nconst racks_saveDatetime = document.getElementById(\"racks_saveDatetime\");\r\nconst racks_closeDatetime = document.getElementById(\"racks_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst racks_closeAddModalBtn = document.getElementById(\"racks_closeAddModal\");\r\nconst racks_cancelBtn = document.getElementById(\"racks_cancelBtn\");\r\nconst racks_closeSettingsModalBtn = document.getElementById(\"racks_closeSettingsModal\");\r\nconst racks_closeAddFieldBtn = document.getElementById(\"racks_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst racks_addLocationBtn = document.getElementById(\"racks_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction racks_openModal(edit = false, index = null) {\r\n  racks_addModal.style.display = \"block\";\r\n  racks_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  racks_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = racks_tickets[index];\r\n    document.getElementById(\"racks_name\").value = rec.name || \"\";\r\n    document.getElementById(\"racks_department\").value = rec.department || \"\";\r\n    document.getElementById(\"racks_status\").value = rec.status || \"\";\r\n    document.getElementById(\"racks_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"racks_type\").value = rec.type || \"\";\r\n    document.getElementById(\"racks_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"racks_model\").value = rec.model || \"\";\r\n    document.getElementById(\"racks_location\").value = rec.location || \"\";\r\n    document.getElementById(\"racks_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    racks_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction racks_closeModal() {\r\n  racks_addModal.style.display = \"none\";\r\n  racks_addForm.reset();\r\n  racks_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nracks_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"racks_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nracks_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"racks_name\").value,\r\n    department: document.getElementById(\"racks_department\").value,\r\n    status: document.getElementById(\"racks_status\").value,\r\n    asset: document.getElementById(\"racks_asset\").value,\r\n    type: document.getElementById(\"racks_type\").value,\r\n    manufacturer: document.getElementById(\"racks_manufacturer\").value,\r\n    model: document.getElementById(\"racks_model\").value,\r\n    location: document.getElementById(\"racks_location\").value,\r\n    incharge: document.getElementById(\"racks_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (racks_editIndex !== null && racks_editIndex !== undefined) {\r\n    racks_tickets[racks_editIndex] = record;\r\n    racks_editIndex = null;\r\n  } else {\r\n    racks_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"racks_inventoryData\", JSON.stringify(racks_tickets));\r\n  racks_renderTable();\r\n  racks_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction racks_deleteRecord(index) {\r\n  const record = racks_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  racks_trashData.push(record);\r\n  localStorage.setItem(\"racks_inventoryData\", JSON.stringify(racks_tickets));\r\n  localStorage.setItem(\"racks_trashData\", JSON.stringify(racks_trashData));\r\n  racks_renderTable();\r\n  racks_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction racks_renderTableHeaders() {\r\n  if (!racks_tableFields.includes(\"Name\")) {\r\n    racks_tableFields.unshift(\"Name\");\r\n  } else if (racks_tableFields[0] !== \"Name\") {\r\n    racks_tableFields = racks_tableFields.filter(f => f !== \"Name\");\r\n    racks_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#racks_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  racks_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction racks_renderTable() {\r\n  racks_tableBody.innerHTML = \"\";\r\n  racks_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    racks_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"racks_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"racks_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"racks_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    racks_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction racks_renderTrash() {\r\n  racks_trashTableBody.innerHTML = \"\";\r\n  racks_trashData.forEach((r, i) => {\r\n    racks_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"racks_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"racks_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction racks_restore(index) {\r\n  const rec = racks_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  racks_tickets.push(rec);\r\n  localStorage.setItem(\"racks_trashData\", JSON.stringify(racks_trashData));\r\n  localStorage.setItem(\"racks_inventoryData\", JSON.stringify(racks_tickets));\r\n  racks_renderTrash();\r\n  racks_renderTable();\r\n}\r\n\r\nfunction racks_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    racks_trashData.splice(index, 1);\r\n    localStorage.setItem(\"racks_trashData\", JSON.stringify(racks_trashData));\r\n    racks_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet racks_editingRowForDate = null;\r\nfunction racks_openDateTime(index) {\r\n  racks_editingRowForDate = index;\r\n  racks_datetimeModal.style.display = \"block\";\r\n  racks_datetimeInput.value = \"\";\r\n}\r\n\r\nracks_saveDatetime.onclick = () => {\r\n  if (racks_editingRowForDate !== null && racks_datetimeInput.value) {\r\n    const selectedDate = new Date(racks_datetimeInput.value).toLocaleString();\r\n    racks_tickets[racks_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"racks_inventoryData\", JSON.stringify(racks_tickets));\r\n    racks_renderTable();\r\n    racks_datetimeModal.style.display = \"none\";\r\n    racks_editingRowForDate = null;\r\n  }\r\n};\r\nracks_closeDatetime.onclick = () => racks_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nracks_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"racks_inventoryTable\").style.display = racks_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"racks_trashTable\").style.display = racks_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nracks_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#racks_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction racks_renderSettingsTable() {\r\n  const body = racks_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  racks_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='racks_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction racks_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  racks_tableFields = racks_tableFields.filter(f => f !== field);\r\n  racks_saveTableFields();\r\n  racks_renderSettingsTable();\r\n  racks_renderTableHeaders();\r\n  racks_renderTable();\r\n}\r\n\r\nfunction racks_saveTableFields() {\r\n  localStorage.setItem(\"racks_tableFields\", JSON.stringify(racks_tableFields));\r\n  racks_renderTableHeaders();\r\n  racks_renderTable();\r\n}\r\n\r\nracks_settingsIcon.onclick = () => {\r\n  racks_settingsModal.style.display = \"block\";\r\n  racks_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet racks_draggedRow = null;\r\nif (racks_settingsBody) {\r\n  racks_settingsBody.addEventListener(\"dragstart\", e => {\r\n    racks_draggedRow = e.target.closest(\"tr\");\r\n    if (racks_draggedRow) racks_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  racks_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = racks_getDragAfterElement(racks_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#racks_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        racks_settingsBody.appendChild(draggable);\r\n      } else {\r\n        racks_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  racks_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (racks_draggedRow) racks_draggedRow.classList.remove(\"dragging\");\r\n    racks_draggedRow = null;\r\n    racks_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction racks_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction racks_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = racks_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  racks_tableFields = newOrder;\r\n  racks_saveTableFields();\r\n  racks_renderTableHeaders();\r\n  racks_renderTable();\r\n}\r\n\r\nfunction racks_saveSettings() {\r\n  const newOrder = [];\r\n  const body = racks_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  racks_tableFields = newOrder;\r\n  racks_saveTableFields();\r\n  racks_renderTableHeaders();\r\n  racks_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#racks_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"racks_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"racks_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = racks_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nracks_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (racks_addFieldModal) racks_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nracks_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (racks_addFieldModal) racks_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"racks_saveNewFieldBtn\").addEventListener(\"click\", saveNewRacksField);\r\n\r\nfunction saveNewRacksField() {\r\n  const fieldNameElem = document.getElementById(\"racks_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (racks_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = racks_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    racks_tableFields.push(fieldName);\r\n  } else {\r\n    racks_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  racks_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#racks_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (racks_addFieldModal) racks_addFieldModal.style.display = \"none\";\r\n\r\n  racks_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nracks_closeAddModalBtn.addEventListener(\"click\", racks_closeModal);\r\nracks_cancelBtn.addEventListener(\"click\", racks_closeModal);\r\nracks_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  racks_settingsModal.style.display = \"none\";\r\n});\r\nracks_closeDatetime.addEventListener(\"click\", () => {\r\n  racks_datetimeModal.style.display = \"none\";\r\n});\r\nracks_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  racks_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === racks_addModal) racks_closeModal();\r\n  if (target === racks_settingsModal) racks_settingsModal.style.display = \"none\";\r\n  if (target === racks_addFieldModal) racks_addFieldModal.style.display = \"none\";\r\n  if (target === racks_datetimeModal) racks_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nracks_addBtn.addEventListener(\"click\", () => racks_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction racks_init() {\r\n  racks_renderTableHeaders();\r\n  racks_renderTable();\r\n  racks_renderTrash();\r\n\r\n  document.getElementById(\"racks_inventoryTable\").style.display = racks_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"racks_trashTable\").style.display = racks_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nracks_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.racks_openModal = racks_openModal;\r\nwindow.racks_deleteRecord = racks_deleteRecord;\r\nwindow.racks_openDateTime = racks_openDateTime;\r\nwindow.racks_deletePermanently = racks_deletePermanently;\r\nwindow.racks_deleteField = racks_deleteField;\r\nwindow.racks_restore = racks_restore;\r\n<\/script>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409811\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409811\" data-tab-index=\"11\" style=\"--n-tabs-title-order: 11;\" class=\" elementor-element elementor-element-cdcde9b e-con-full e-flex e-con e-child\" data-id=\"cdcde9b\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2df74d elementor-widget elementor-widget-html\" data-id=\"e2df74d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - Enclosures<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #enclosures_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #enclosures_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #enclosures_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #enclosures_settingsModal th, #enclosures_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #enclosures_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #enclosures_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #enclosures_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #enclosures_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #enclosures_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #enclosures_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #enclosures_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #enclosures_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #enclosures_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #enclosures_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #enclosures_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #enclosures_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #enclosures_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #enclosures_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"enclosures_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"enclosures_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"enclosures_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"enclosures_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"enclosures_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"enclosures_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"enclosures_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"enclosures_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"enclosures_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"enclosures_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"enclosures_modalTitle\">ADD<\/h2>\r\n    <form id=\"enclosures_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"enclosures_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"enclosures_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"enclosures_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"enclosures_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"enclosures_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"enclosures_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"enclosures_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"enclosures_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"enclosures_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"enclosures_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"enclosures_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"enclosures_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"enclosures_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"enclosures_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"enclosures_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"enclosures_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"enclosures_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"enclosures_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"enclosures_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"enclosures_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"enclosures_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"enclosures_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"enclosures_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"enclosures_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst enclosures_container = document.getElementById(\"enclosures_container\");\r\nlet enclosures_tickets = JSON.parse(localStorage.getItem(\"enclosures_inventoryData\")) || [];\r\nlet enclosures_trashData = JSON.parse(localStorage.getItem(\"enclosures_trashData\")) || [];\r\nlet enclosures_tableFields = JSON.parse(localStorage.getItem(\"enclosures_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet enclosures_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!enclosures_tableFields.includes(\"Name\")) {\r\n  enclosures_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (enclosures_tableFields[0] !== \"Name\") {\r\n    enclosures_tableFields = enclosures_tableFields.filter(f => f !== \"Name\");\r\n    enclosures_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst enclosures_addBtn = document.getElementById(\"enclosures_addBtn\");\r\nconst enclosures_addModal = document.getElementById(\"enclosures_addModal\");\r\nconst enclosures_modalTitle = document.getElementById(\"enclosures_modalTitle\");\r\nconst enclosures_addForm = document.getElementById(\"enclosures_addForm\");\r\nconst enclosures_tableBody = document.querySelector(\"#enclosures_inventoryTable tbody\");\r\nconst enclosures_trashTableBody = document.querySelector(\"#enclosures_trashTable tbody\");\r\nconst enclosures_trashToggle = document.getElementById(\"enclosures_trashToggle\");\r\nconst enclosures_searchInput = document.getElementById(\"enclosures_searchInput\");\r\n\r\nconst enclosures_settingsModal = document.getElementById(\"enclosures_settingsModal\");\r\nconst enclosures_settingsIcon = document.getElementById(\"enclosures_settingsIcon\");\r\nconst enclosures_settingsBody = document.getElementById(\"enclosures_settingsBody\");\r\n\r\nconst enclosures_addFieldModal = document.getElementById(\"enclosures_addFieldModal\");\r\nconst enclosures_openAddFieldBtn = document.getElementById(\"enclosures_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst enclosures_datetimeModal = document.getElementById(\"enclosures_datetimeModal\");\r\nconst enclosures_datetimeInput = document.getElementById(\"enclosures_datetimeInput\");\r\nconst enclosures_saveDatetime = document.getElementById(\"enclosures_saveDatetime\");\r\nconst enclosures_closeDatetime = document.getElementById(\"enclosures_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst enclosures_closeAddModalBtn = document.getElementById(\"enclosures_closeAddModal\");\r\nconst enclosures_cancelBtn = document.getElementById(\"enclosures_cancelBtn\");\r\nconst enclosures_closeSettingsModalBtn = document.getElementById(\"enclosures_closeSettingsModal\");\r\nconst enclosures_closeAddFieldBtn = document.getElementById(\"enclosures_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst enclosures_addLocationBtn = document.getElementById(\"enclosures_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction enclosures_openModal(edit = false, index = null) {\r\n  enclosures_addModal.style.display = \"block\";\r\n  enclosures_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  enclosures_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = enclosures_tickets[index];\r\n    document.getElementById(\"enclosures_name\").value = rec.name || \"\";\r\n    document.getElementById(\"enclosures_department\").value = rec.department || \"\";\r\n    document.getElementById(\"enclosures_status\").value = rec.status || \"\";\r\n    document.getElementById(\"enclosures_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"enclosures_type\").value = rec.type || \"\";\r\n    document.getElementById(\"enclosures_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"enclosures_model\").value = rec.model || \"\";\r\n    document.getElementById(\"enclosures_location\").value = rec.location || \"\";\r\n    document.getElementById(\"enclosures_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    enclosures_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction enclosures_closeModal() {\r\n  enclosures_addModal.style.display = \"none\";\r\n  enclosures_addForm.reset();\r\n  enclosures_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\nenclosures_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"enclosures_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\nenclosures_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"enclosures_name\").value,\r\n    department: document.getElementById(\"enclosures_department\").value,\r\n    status: document.getElementById(\"enclosures_status\").value,\r\n    asset: document.getElementById(\"enclosures_asset\").value,\r\n    type: document.getElementById(\"enclosures_type\").value,\r\n    manufacturer: document.getElementById(\"enclosures_manufacturer\").value,\r\n    model: document.getElementById(\"enclosures_model\").value,\r\n    location: document.getElementById(\"enclosures_location\").value,\r\n    incharge: document.getElementById(\"enclosures_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (enclosures_editIndex !== null && enclosures_editIndex !== undefined) {\r\n    enclosures_tickets[enclosures_editIndex] = record;\r\n    enclosures_editIndex = null;\r\n  } else {\r\n    enclosures_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"enclosures_inventoryData\", JSON.stringify(enclosures_tickets));\r\n  enclosures_renderTable();\r\n  enclosures_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction enclosures_deleteRecord(index) {\r\n  const record = enclosures_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  enclosures_trashData.push(record);\r\n  localStorage.setItem(\"enclosures_inventoryData\", JSON.stringify(enclosures_tickets));\r\n  localStorage.setItem(\"enclosures_trashData\", JSON.stringify(enclosures_trashData));\r\n  enclosures_renderTable();\r\n  enclosures_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction enclosures_renderTableHeaders() {\r\n  if (!enclosures_tableFields.includes(\"Name\")) {\r\n    enclosures_tableFields.unshift(\"Name\");\r\n  } else if (enclosures_tableFields[0] !== \"Name\") {\r\n    enclosures_tableFields = enclosures_tableFields.filter(f => f !== \"Name\");\r\n    enclosures_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#enclosures_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  enclosures_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction enclosures_renderTable() {\r\n  enclosures_tableBody.innerHTML = \"\";\r\n  enclosures_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    enclosures_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"enclosures_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"enclosures_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"enclosures_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    enclosures_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction enclosures_renderTrash() {\r\n  enclosures_trashTableBody.innerHTML = \"\";\r\n  enclosures_trashData.forEach((r, i) => {\r\n    enclosures_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"enclosures_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"enclosures_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction enclosures_restore(index) {\r\n  const rec = enclosures_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  enclosures_tickets.push(rec);\r\n  localStorage.setItem(\"enclosures_trashData\", JSON.stringify(enclosures_trashData));\r\n  localStorage.setItem(\"enclosures_inventoryData\", JSON.stringify(enclosures_tickets));\r\n  enclosures_renderTrash();\r\n  enclosures_renderTable();\r\n}\r\n\r\nfunction enclosures_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    enclosures_trashData.splice(index, 1);\r\n    localStorage.setItem(\"enclosures_trashData\", JSON.stringify(enclosures_trashData));\r\n    enclosures_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet enclosures_editingRowForDate = null;\r\nfunction enclosures_openDateTime(index) {\r\n  enclosures_editingRowForDate = index;\r\n  enclosures_datetimeModal.style.display = \"block\";\r\n  enclosures_datetimeInput.value = \"\";\r\n}\r\n\r\nenclosures_saveDatetime.onclick = () => {\r\n  if (enclosures_editingRowForDate !== null && enclosures_datetimeInput.value) {\r\n    const selectedDate = new Date(enclosures_datetimeInput.value).toLocaleString();\r\n    enclosures_tickets[enclosures_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"enclosures_inventoryData\", JSON.stringify(enclosures_tickets));\r\n    enclosures_renderTable();\r\n    enclosures_datetimeModal.style.display = \"none\";\r\n    enclosures_editingRowForDate = null;\r\n  }\r\n};\r\nenclosures_closeDatetime.onclick = () => enclosures_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\nenclosures_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"enclosures_inventoryTable\").style.display = enclosures_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"enclosures_trashTable\").style.display = enclosures_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\nenclosures_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#enclosures_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction enclosures_renderSettingsTable() {\r\n  const body = enclosures_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  enclosures_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='enclosures_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction enclosures_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  enclosures_tableFields = enclosures_tableFields.filter(f => f !== field);\r\n  enclosures_saveTableFields();\r\n  enclosures_renderSettingsTable();\r\n  enclosures_renderTableHeaders();\r\n  enclosures_renderTable();\r\n}\r\n\r\nfunction enclosures_saveTableFields() {\r\n  localStorage.setItem(\"enclosures_tableFields\", JSON.stringify(enclosures_tableFields));\r\n  enclosures_renderTableHeaders();\r\n  enclosures_renderTable();\r\n}\r\n\r\nenclosures_settingsIcon.onclick = () => {\r\n  enclosures_settingsModal.style.display = \"block\";\r\n  enclosures_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet enclosures_draggedRow = null;\r\nif (enclosures_settingsBody) {\r\n  enclosures_settingsBody.addEventListener(\"dragstart\", e => {\r\n    enclosures_draggedRow = e.target.closest(\"tr\");\r\n    if (enclosures_draggedRow) enclosures_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  enclosures_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = enclosures_getDragAfterElement(enclosures_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#enclosures_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        enclosures_settingsBody.appendChild(draggable);\r\n      } else {\r\n        enclosures_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  enclosures_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (enclosures_draggedRow) enclosures_draggedRow.classList.remove(\"dragging\");\r\n    enclosures_draggedRow = null;\r\n    enclosures_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction enclosures_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction enclosures_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = enclosures_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  enclosures_tableFields = newOrder;\r\n  enclosures_saveTableFields();\r\n  enclosures_renderTableHeaders();\r\n  enclosures_renderTable();\r\n}\r\n\r\nfunction enclosures_saveSettings() {\r\n  const newOrder = [];\r\n  const body = enclosures_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  enclosures_tableFields = newOrder;\r\n  enclosures_saveTableFields();\r\n  enclosures_renderTableHeaders();\r\n  enclosures_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#enclosures_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"enclosures_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"enclosures_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = enclosures_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\nenclosures_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (enclosures_addFieldModal) enclosures_addFieldModal.style.display = \"block\";\r\n});\r\n\r\nenclosures_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (enclosures_addFieldModal) enclosures_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"enclosures_saveNewFieldBtn\").addEventListener(\"click\", saveNewEnclosuresField);\r\n\r\nfunction saveNewEnclosuresField() {\r\n  const fieldNameElem = document.getElementById(\"enclosures_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (enclosures_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = enclosures_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    enclosures_tableFields.push(fieldName);\r\n  } else {\r\n    enclosures_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  enclosures_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#enclosures_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (enclosures_addFieldModal) enclosures_addFieldModal.style.display = \"none\";\r\n\r\n  enclosures_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\nenclosures_closeAddModalBtn.addEventListener(\"click\", enclosures_closeModal);\r\nenclosures_cancelBtn.addEventListener(\"click\", enclosures_closeModal);\r\nenclosures_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  enclosures_settingsModal.style.display = \"none\";\r\n});\r\nenclosures_closeDatetime.addEventListener(\"click\", () => {\r\n  enclosures_datetimeModal.style.display = \"none\";\r\n});\r\nenclosures_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  enclosures_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === enclosures_addModal) enclosures_closeModal();\r\n  if (target === enclosures_settingsModal) enclosures_settingsModal.style.display = \"none\";\r\n  if (target === enclosures_addFieldModal) enclosures_addFieldModal.style.display = \"none\";\r\n  if (target === enclosures_datetimeModal) enclosures_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\nenclosures_addBtn.addEventListener(\"click\", () => enclosures_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction enclosures_init() {\r\n  enclosures_renderTableHeaders();\r\n  enclosures_renderTable();\r\n  enclosures_renderTrash();\r\n\r\n  document.getElementById(\"enclosures_inventoryTable\").style.display = enclosures_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"enclosures_trashTable\").style.display = enclosures_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\nenclosures_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.enclosures_openModal = enclosures_openModal;\r\nwindow.enclosures_deleteRecord = enclosures_deleteRecord;\r\nwindow.enclosures_openDateTime = enclosures_openDateTime;\r\nwindow.enclosures_deletePermanently = enclosures_deletePermanently;\r\nwindow.enclosures_deleteField = enclosures_deleteField;\r\nwindow.enclosures_restore = enclosures_restore;\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409812\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409812\" data-tab-index=\"12\" style=\"--n-tabs-title-order: 12;\" class=\" elementor-element elementor-element-add869a e-con-full e-flex e-con e-child\" data-id=\"add869a\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2acc71b elementor-widget elementor-widget-html\" data-id=\"2acc71b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - PDUs<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #pdus_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #pdus_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #pdus_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #pdus_settingsModal th, #pdus_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #pdus_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #pdus_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #pdus_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #pdus_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #pdus_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #pdus_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #pdus_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #pdus_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #pdus_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #pdus_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #pdus_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #pdus_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #pdus_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #pdus_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"pdus_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"pdus_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"pdus_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"pdus_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"pdus_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"pdus_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"pdus_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"pdus_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"pdus_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"pdus_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"pdus_modalTitle\">ADD<\/h2>\r\n    <form id=\"pdus_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"pdus_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"pdus_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"pdus_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"pdus_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"pdus_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"pdus_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"pdus_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"pdus_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"pdus_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"pdus_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"pdus_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"pdus_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"pdus_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"pdus_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"pdus_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"pdus_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"pdus_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"pdus_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"pdus_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"pdus_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"pdus_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"pdus_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"pdus_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"pdus_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst pdus_container = document.getElementById(\"pdus_container\");\r\nlet pdus_tickets = JSON.parse(localStorage.getItem(\"pdus_inventoryData\")) || [];\r\nlet pdus_trashData = JSON.parse(localStorage.getItem(\"pdus_trashData\")) || [];\r\nlet pdus_tableFields = JSON.parse(localStorage.getItem(\"pdus_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet pdus_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!pdus_tableFields.includes(\"Name\")) {\r\n  pdus_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (pdus_tableFields[0] !== \"Name\") {\r\n    pdus_tableFields = pdus_tableFields.filter(f => f !== \"Name\");\r\n    pdus_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst pdus_addBtn = document.getElementById(\"pdus_addBtn\");\r\nconst pdus_addModal = document.getElementById(\"pdus_addModal\");\r\nconst pdus_modalTitle = document.getElementById(\"pdus_modalTitle\");\r\nconst pdus_addForm = document.getElementById(\"pdus_addForm\");\r\nconst pdus_tableBody = document.querySelector(\"#pdus_inventoryTable tbody\");\r\nconst pdus_trashTableBody = document.querySelector(\"#pdus_trashTable tbody\");\r\nconst pdus_trashToggle = document.getElementById(\"pdus_trashToggle\");\r\nconst pdus_searchInput = document.getElementById(\"pdus_searchInput\");\r\n\r\nconst pdus_settingsModal = document.getElementById(\"pdus_settingsModal\");\r\nconst pdus_settingsIcon = document.getElementById(\"pdus_settingsIcon\");\r\nconst pdus_settingsBody = document.getElementById(\"pdus_settingsBody\");\r\n\r\nconst pdus_addFieldModal = document.getElementById(\"pdus_addFieldModal\");\r\nconst pdus_openAddFieldBtn = document.getElementById(\"pdus_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst pdus_datetimeModal = document.getElementById(\"pdus_datetimeModal\");\r\nconst pdus_datetimeInput = document.getElementById(\"pdus_datetimeInput\");\r\nconst pdus_saveDatetime = document.getElementById(\"pdus_saveDatetime\");\r\nconst pdus_closeDatetime = document.getElementById(\"pdus_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst pdus_closeAddModalBtn = document.getElementById(\"pdus_closeAddModal\");\r\nconst pdus_cancelBtn = document.getElementById(\"pdus_cancelBtn\");\r\nconst pdus_closeSettingsModalBtn = document.getElementById(\"pdus_closeSettingsModal\");\r\nconst pdus_closeAddFieldBtn = document.getElementById(\"pdus_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst pdus_addLocationBtn = document.getElementById(\"pdus_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction pdus_openModal(edit = false, index = null) {\r\n  pdus_addModal.style.display = \"block\";\r\n  pdus_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  pdus_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = pdus_tickets[index];\r\n    document.getElementById(\"pdus_name\").value = rec.name || \"\";\r\n    document.getElementById(\"pdus_department\").value = rec.department || \"\";\r\n    document.getElementById(\"pdus_status\").value = rec.status || \"\";\r\n    document.getElementById(\"pdus_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"pdus_type\").value = rec.type || \"\";\r\n    document.getElementById(\"pdus_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"pdus_model\").value = rec.model || \"\";\r\n    document.getElementById(\"pdus_location\").value = rec.location || \"\";\r\n    document.getElementById(\"pdus_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    pdus_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction pdus_closeModal() {\r\n  pdus_addModal.style.display = \"none\";\r\n  pdus_addForm.reset();\r\n  pdus_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\npdus_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"pdus_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\npdus_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"pdus_name\").value,\r\n    department: document.getElementById(\"pdus_department\").value,\r\n    status: document.getElementById(\"pdus_status\").value,\r\n    asset: document.getElementById(\"pdus_asset\").value,\r\n    type: document.getElementById(\"pdus_type\").value,\r\n    manufacturer: document.getElementById(\"pdus_manufacturer\").value,\r\n    model: document.getElementById(\"pdus_model\").value,\r\n    location: document.getElementById(\"pdus_location\").value,\r\n    incharge: document.getElementById(\"pdus_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (pdus_editIndex !== null && pdus_editIndex !== undefined) {\r\n    pdus_tickets[pdus_editIndex] = record;\r\n    pdus_editIndex = null;\r\n  } else {\r\n    pdus_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"pdus_inventoryData\", JSON.stringify(pdus_tickets));\r\n  pdus_renderTable();\r\n  pdus_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction pdus_deleteRecord(index) {\r\n  const record = pdus_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  pdus_trashData.push(record);\r\n  localStorage.setItem(\"pdus_inventoryData\", JSON.stringify(pdus_tickets));\r\n  localStorage.setItem(\"pdus_trashData\", JSON.stringify(pdus_trashData));\r\n  pdus_renderTable();\r\n  pdus_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction pdus_renderTableHeaders() {\r\n  if (!pdus_tableFields.includes(\"Name\")) {\r\n    pdus_tableFields.unshift(\"Name\");\r\n  } else if (pdus_tableFields[0] !== \"Name\") {\r\n    pdus_tableFields = pdus_tableFields.filter(f => f !== \"Name\");\r\n    pdus_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#pdus_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  pdus_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction pdus_renderTable() {\r\n  pdus_tableBody.innerHTML = \"\";\r\n  pdus_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    pdus_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"pdus_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"pdus_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"pdus_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    pdus_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction pdus_renderTrash() {\r\n  pdus_trashTableBody.innerHTML = \"\";\r\n  pdus_trashData.forEach((r, i) => {\r\n    pdus_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"pdus_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"pdus_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction pdus_restore(index) {\r\n  const rec = pdus_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  pdus_tickets.push(rec);\r\n  localStorage.setItem(\"pdus_trashData\", JSON.stringify(pdus_trashData));\r\n  localStorage.setItem(\"pdus_inventoryData\", JSON.stringify(pdus_tickets));\r\n  pdus_renderTrash();\r\n  pdus_renderTable();\r\n}\r\n\r\nfunction pdus_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    pdus_trashData.splice(index, 1);\r\n    localStorage.setItem(\"pdus_trashData\", JSON.stringify(pdus_trashData));\r\n    pdus_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet pdus_editingRowForDate = null;\r\nfunction pdus_openDateTime(index) {\r\n  pdus_editingRowForDate = index;\r\n  pdus_datetimeModal.style.display = \"block\";\r\n  pdus_datetimeInput.value = \"\";\r\n}\r\n\r\npdus_saveDatetime.onclick = () => {\r\n  if (pdus_editingRowForDate !== null && pdus_datetimeInput.value) {\r\n    const selectedDate = new Date(pdus_datetimeInput.value).toLocaleString();\r\n    pdus_tickets[pdus_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"pdus_inventoryData\", JSON.stringify(pdus_tickets));\r\n    pdus_renderTable();\r\n    pdus_datetimeModal.style.display = \"none\";\r\n    pdus_editingRowForDate = null;\r\n  }\r\n};\r\npdus_closeDatetime.onclick = () => pdus_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\npdus_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"pdus_inventoryTable\").style.display = pdus_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"pdus_trashTable\").style.display = pdus_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\npdus_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#pdus_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction pdus_renderSettingsTable() {\r\n  const body = pdus_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  pdus_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='pdus_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction pdus_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  pdus_tableFields = pdus_tableFields.filter(f => f !== field);\r\n  pdus_saveTableFields();\r\n  pdus_renderSettingsTable();\r\n  pdus_renderTableHeaders();\r\n  pdus_renderTable();\r\n}\r\n\r\nfunction pdus_saveTableFields() {\r\n  localStorage.setItem(\"pdus_tableFields\", JSON.stringify(pdus_tableFields));\r\n  pdus_renderTableHeaders();\r\n  pdus_renderTable();\r\n}\r\n\r\npdus_settingsIcon.onclick = () => {\r\n  pdus_settingsModal.style.display = \"block\";\r\n  pdus_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet pdus_draggedRow = null;\r\nif (pdus_settingsBody) {\r\n  pdus_settingsBody.addEventListener(\"dragstart\", e => {\r\n    pdus_draggedRow = e.target.closest(\"tr\");\r\n    if (pdus_draggedRow) pdus_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  pdus_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = pdus_getDragAfterElement(pdus_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#pdus_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        pdus_settingsBody.appendChild(draggable);\r\n      } else {\r\n        pdus_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  pdus_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (pdus_draggedRow) pdus_draggedRow.classList.remove(\"dragging\");\r\n    pdus_draggedRow = null;\r\n    pdus_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction pdus_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction pdus_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = pdus_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  pdus_tableFields = newOrder;\r\n  pdus_saveTableFields();\r\n  pdus_renderTableHeaders();\r\n  pdus_renderTable();\r\n}\r\n\r\nfunction pdus_saveSettings() {\r\n  const newOrder = [];\r\n  const body = pdus_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  pdus_tableFields = newOrder;\r\n  pdus_saveTableFields();\r\n  pdus_renderTableHeaders();\r\n  pdus_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#pdus_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"pdus_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"pdus_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = pdus_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\npdus_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (pdus_addFieldModal) pdus_addFieldModal.style.display = \"block\";\r\n});\r\n\r\npdus_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (pdus_addFieldModal) pdus_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"pdus_saveNewFieldBtn\").addEventListener(\"click\", saveNewPdusField);\r\n\r\nfunction saveNewPdusField() {\r\n  const fieldNameElem = document.getElementById(\"pdus_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (pdus_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = pdus_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    pdus_tableFields.push(fieldName);\r\n  } else {\r\n    pdus_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  pdus_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#pdus_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (pdus_addFieldModal) pdus_addFieldModal.style.display = \"none\";\r\n\r\n  pdus_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\npdus_closeAddModalBtn.addEventListener(\"click\", pdus_closeModal);\r\npdus_cancelBtn.addEventListener(\"click\", pdus_closeModal);\r\npdus_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  pdus_settingsModal.style.display = \"none\";\r\n});\r\npdus_closeDatetime.addEventListener(\"click\", () => {\r\n  pdus_datetimeModal.style.display = \"none\";\r\n});\r\npdus_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  pdus_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === pdus_addModal) pdus_closeModal();\r\n  if (target === pdus_settingsModal) pdus_settingsModal.style.display = \"none\";\r\n  if (target === pdus_addFieldModal) pdus_addFieldModal.style.display = \"none\";\r\n  if (target === pdus_datetimeModal) pdus_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\npdus_addBtn.addEventListener(\"click\", () => pdus_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction pdus_init() {\r\n  pdus_renderTableHeaders();\r\n  pdus_renderTable();\r\n  pdus_renderTrash();\r\n\r\n  document.getElementById(\"pdus_inventoryTable\").style.display = pdus_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"pdus_trashTable\").style.display = pdus_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\npdus_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.pdus_openModal = pdus_openModal;\r\nwindow.pdus_deleteRecord = pdus_deleteRecord;\r\nwindow.pdus_openDateTime = pdus_openDateTime;\r\nwindow.pdus_deletePermanently = pdus_deletePermanently;\r\nwindow.pdus_deleteField = pdus_deleteField;\r\nwindow.pdus_restore = pdus_restore;\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409813\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409813\" data-tab-index=\"13\" style=\"--n-tabs-title-order: 13;\" class=\" elementor-element elementor-element-e125313 e-con-full e-flex e-con e-child\" data-id=\"e125313\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-500ebd5 elementor-widget elementor-widget-html\" data-id=\"500ebd5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Inventory Management - PassiveDevices<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background: #f8f9fa;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .container {\r\n    background: white;\r\n    width: 98%;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);\r\n    padding: 20px;\r\n    margin: 20px auto;\r\n    height: 1000px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .right-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n\r\n   .search-container {\r\n    position: relative;\r\n    width: 300px;\r\n    margin-bottom: 0px;\r\n  }\r\n\r\n  #passivedevices_searchInput {\r\n    width: 100%;\r\n    padding: 8px 35px 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .search-container::after {\r\n    content: \"\ud83d\udd0d\";\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: #555;\r\n    font-size: 18px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .add-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-btn:hover { \r\n     background-color: #851c15; }\r\n\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .icon-btn {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    color: #000;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .icon-btn:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 42px;\r\n    height: 22px;\r\n  }\r\n\r\n  .switch input { \r\n     opacity: 0; \r\n     width: 0; \r\n     height: 0; }\r\n\r\n  .slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-color: #ccc;\r\n    border-radius: 34px;\r\n    transition: .4s;\r\n  }\r\n\r\n  .slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 16px; width: 16px;\r\n    left: 3px; bottom: 3px;\r\n    background-color: white;\r\n    transition: .4s;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  input:checked + .slider {\r\n    background-color: #a30000;\r\n  }\r\n\r\n  input:checked + .slider:before {\r\n    transform: translateX(20px);\r\n  }\r\n\r\n  .trash {\r\n    font-size: 20px;\r\n    color: #333;\r\n    cursor: pointer;\r\n    transition: color 0.3s, transform 0.2s;\r\n  }\r\n\r\n  .trash:hover {\r\n    color: #a30000;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .search {\r\n    font-size: 20px;\r\n    color: #000;\r\n    cursor: pointer;\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  .search:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n   table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n\r\n  th, td {\r\n    border: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  th {\r\n    background-color: #d9d9d9;\r\n    font-weight: bold;\r\n  }\r\n\r\n  tr:nth-child(even) { background-color: #f9f9f9; }\r\n\r\n  .action-btn {\r\n    padding: 6px 10px;\r\n    margin: 2px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 13px;\r\n  }\r\n  .edit-btn { background-color: #007bff; }\r\n  .edit-btn:hover { background-color: #0069d9; }\r\n  .delete-btn { background-color: #dc3545; }\r\n  .delete-btn:hover { background-color: #c82333; }\r\n\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 10;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n    overflow-y: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 75%;\r\n    max-width: 900px;\r\n    margin: 5% auto;\r\n    padding: 25px 30px;\r\n  }\r\n\r\n  .close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close:hover { color: #000; }\r\n\r\n  h2 {\r\n    font-size: 26px;\r\n    border-bottom: 2px solid #d62020;\r\n    display: inline-block;\r\n    padding-bottom: 4px;\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 30px;\r\n    row-gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .form-group input,\r\n  .form-group select {\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .location-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .add-location-btn {\r\n    background-color: #a3231c;\r\n    color: white;\r\n    border: none;\r\n    padding: 4px 10px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .add-location-btn:hover {\r\n    background-color: #851c15;\r\n  }\r\n\r\n  .form-actions {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: right;\r\n    gap: 10px;\r\n  }\r\n\r\n  .btn-add {\r\n    background-color: #d62020;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-add:hover {\r\n    background-color: #b01a1a;\r\n  }\r\n\r\n  .btn-cancel {\r\n    background-color: #6c6c6c;\r\n    color: #fff;\r\n    padding: 10px 25px;\r\n    border: none;\r\n    border-radius: 3px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .btn-cancel:hover {\r\n    background-color: #555;\r\n  }\r\n\r\n  .datetime-modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 20;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    background-color: rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .datetime-content {\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    width: 300px;\r\n    margin: 10% auto;\r\n    padding: 25px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .modal-buttons {\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n  }\r\n\r\n  .cancel-btn, .save-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .cancel-btn { background: #6c757d; color: white; }\r\n  .save-btn { background: #28a745; color: white; }\r\n\r\n  \/* ===== SETTINGS MODAL STYLING ===== *\/\r\n  #passivedevices_settingsModal .modal-content {\r\n    width: 600px;\r\n    height: 500px;\r\n    max-width: 95%;\r\n  }\r\n\r\n  #passivedevices_settingsModal table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  #passivedevices_settingsModal th, #passivedevices_settingsModal td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: left;\r\n    padding: 10px;\r\n  }\r\n\r\n  #passivedevices_settingsModal th {\r\n    background: #f8f9fa;\r\n  }\r\n\r\n  #passivedevices_settingsModal .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n\r\n  }\r\n\r\n  #passivedevices_settingsModal tbody {\r\n    display: block;\r\n    max-height: 250px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #passivedevices_settingsModal tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n  }\r\n\r\n  #passivedevices_settingsModal tr.dragging {\r\n    background-color: #ffeeba;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  #passivedevices_settingsModal .delete-icon {\r\n    color: #dc3545;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #passivedevices_settingsModal .delete-icon:hover { color: #b52a3a; }\r\n\r\n  #passivedevices_settingsModal .add-yellow {\r\n    background-color: #ffc107;\r\n    border: none;\r\n    color: black;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #passivedevices_addFieldModal .add-modal-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #passivedevices_settingsModal .add-yellow:hover { background-color: #e0a800; }\r\n\r\n  #passivedevices_settingsModal .popup-content {\r\n    background: #fff;\r\n    border-radius: 10px;\r\n    width: 400px;\r\n    margin: 15% auto;\r\n    padding: 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  #passivedevices_settingsModal .popup-content input {\r\n    width: 80%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  #passivedevices_settingsModal .popup-content button {\r\n    background: #007bff;\r\n    border: none;\r\n    color: white;\r\n    font-weight: 600;\r\n    padding: 8px 14px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #passivedevices_settingsModal .popup-content button:hover {\r\n    background: #0056b3;\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"passivedevices_container\">\r\n  <div class=\"top-bar\">\r\n    <div class=\"search-container\">\r\n      <input type=\"text\" id=\"passivedevices_searchInput\" placeholder=\"Search...\"> \r\n    <\/div>\r\n    <div class=\"right-controls\">\r\n      <div class=\"toolbar\">\r\n        <span id=\"passivedevices_settingsIcon\" class=\"icon-btn\">\u2699\ufe0f<\/span>\r\n        <label class=\"switch\">\r\n          <input type=\"checkbox\" id=\"passivedevices_trashToggle\">\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"trash\">\ud83d\uddd1\ufe0f<\/span>\r\n      <\/div>\r\n      <button class=\"add-btn\" id=\"passivedevices_addBtn\">+ ADD<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <table id=\"passivedevices_inventoryTable\">\r\n    <thead>\r\n      <tr id=\"passivedevices_tableHeader\">\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Last Update<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <table id=\"passivedevices_trashTable\" style=\"display:none; margin-top:20px;\">\r\n    <thead>\r\n      <tr>\r\n        <th>Name<\/th>\r\n        <th>Department<\/th>\r\n        <th>Status<\/th>\r\n        <th>Asset Number<\/th>\r\n        <th>Type<\/th>\r\n        <th>Manufacturer<\/th>\r\n        <th>Model<\/th>\r\n        <th>Location<\/th>\r\n        <th>In Charge<\/th>\r\n        <th>Deleted On<\/th>\r\n        <th>Action<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<div id=\"passivedevices_addModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" id=\"passivedevices_closeAddModal\">&times;<\/span>\r\n    <h2 id=\"passivedevices_modalTitle\">ADD<\/h2>\r\n    <form id=\"passivedevices_addForm\">\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n            <label>Name<\/label>\r\n            <input type=\"text\" id=\"passivedevices_name\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Department<\/label>\r\n            <select id=\"passivedevices_department\">\r\n               <option>Accounting & Finance Department<\/option>\r\n               <option>Business Development Department<\/option>\r\n               <option>Engineering Department<\/option>\r\n               <option>HR & Admin Department<\/option>\r\n               <option>IT Department<\/option>\r\n               <option>Marketing & Sales Department<\/option>\r\n               <option>Top Management<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Status<\/label>\r\n            <select id=\"passivedevices_status\">\r\n               <option>----<\/option>\r\n               <option>Available<\/option>\r\n               <option>For P.O<\/option>\r\n               <option>Reserved<\/option>\r\n               <option>Working<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Asset Number<\/label>\r\n            <input type=\"text\" id=\"passivedevices_asset\">\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n            <label>Type<\/label>\r\n            <select id=\"passivedevices_type\">\r\n                <option>Desktop<\/option>\r\n                <option>Laptop<\/option>\r\n                <option>Server<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Manufacturer<\/label>\r\n          <select id=\"passivedevices_manufacturer\">\r\n            <option>Acer<\/option>\r\n            <option>Asus<\/option>\r\n            <option>Clone<\/option>\r\n            <option>D-Link<\/option>\r\n            <option>Dell<\/option>\r\n            <option>GMKtec<\/option>\r\n            <option>HP<\/option>\r\n            <option>Intel Corporation<\/option>\r\n            <option>Lenovo<\/option>\r\n            <option>LOQ 15IRX9 \u2013 Advance Connect<\/option>\r\n            <option>LOQ 15IRX9 (Micro Image)<\/option>\r\n            <option>Microsoft<\/option>\r\n            <option>Sophos<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Model<\/label>\r\n          <select id=\"passivedevices_model\">\r\n            <option>Acer A515-56G-5186 - <\/option>\r\n            <option>Acer A315-58-55A6 - <\/option>\r\n            <option>Acer AN 151-55 - <\/option>\r\n            <option>Acer AV15-51-57W - <\/option>\r\n            <option>Acer E5-575G-52DA -<\/option>\r\n            <option>ACER NITRO 5 N20CL -<\/option>\r\n            <option>Asus X507UB -<\/option>\r\n            <option>Asus X509FJ - <\/option>\r\n            <option>Asus X515 - <\/option>\r\n            <option>Asus X540U - <\/option>\r\n            <option>Asus X542U - <\/option>\r\n            <option>Asus X556U - <\/option>\r\n            <option>Clone - <\/option>\r\n            <option>HP 14-ep1039TU - <\/option>\r\n            <option>HP 15s-du0013TX - <\/option>\r\n            <option>Ideapad 3 15IAU7 - <\/option>\r\n            <option>Ideapad Slim3 - <\/option>\r\n            <option>Lenovo V15 G3 - <\/option>\r\n            <option>Lenovo Yogabook - <\/option>\r\n            <option>LOQ 15IRX9 \u2013 83GS002APH<\/option>\r\n            <option>LOQ 15IRX9 \u2013 PC CHAIN - <\/option>\r\n            <option>LOQ 15IRX9 (Micro Image) -<\/option>\r\n            <option>M5 plus - <\/option>\r\n            <option>NXA1DSP001245002C73400 -<\/option>\r\n            <option>VIVOBOOK 14 - <\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>Location<\/label>\r\n          <div class=\"location-group\">\r\n            <select id=\"passivedevices_location\">\r\n              <option>QSI MAIN OFFICE<\/option>\r\n              <option>Engineering Department<\/option>\r\n              <option>Finance Department<\/option>\r\n              <option>Site<\/option>\r\n            <\/select>\r\n            <button type=\"button\" id=\"passivedevices_addLocationBtn\" class=\"add-location-btn\">+<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label>In Charge<\/label>\r\n          <input type=\"text\" id=\"passivedevices_incharge\">\r\n        <\/div>\r\n      <\/div>\r\n       \r\n      <div class=\"form-actions\">\r\n        <button type=\"submit\" class=\"btn-add\" id=\"passivedevices_submitBtn\">ADD<\/button>\r\n        <button type=\"button\" class=\"btn-cancel\" id=\"passivedevices_cancelBtn\">CANCEL<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n       \r\n<div id=\"passivedevices_datetimeModal\" class=\"datetime-modal\">\r\n  <div class=\"datetime-content\">\r\n    <h4>Update Last Update<\/h4>\r\n    <input type=\"datetime-local\" id=\"passivedevices_datetimeInput\">\r\n    <div class=\"modal-buttons\">\r\n      <button class=\"cancel-btn\" id=\"passivedevices_closeDatetime\">Cancel<\/button>\r\n      <button class=\"save-btn\" id=\"passivedevices_saveDatetime\">Save<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"passivedevices_settingsModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div style=\"display:flex; justify-content: space-between; align-items:center;\">\r\n      <h2>Select default item to show<\/h2>\r\n      <span class=\"close\" id=\"passivedevices_closeSettingsModal\">&times;<\/span>\r\n    <\/div>\r\n    <button class=\"add-yellow\" id=\"passivedevices_openAddFieldBtn\">+ Add Field<\/button>\r\n    <table>\r\n      <thead><tr><th>Field<\/th><th style=\"text-align:right;\">Actions<\/th><\/tr><\/thead>\r\n      <tbody id=\"passivedevices_settingsBody\">\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"passivedevices_addFieldModal\" class=\"modal\">\r\n  <div class=\"add-modal-content\">\r\n    <span class=\"close\" id=\"passivedevices_closeAddField\">&times;<\/span>\r\n    <h2>Add New Field<\/h2>\r\n    <input type=\"text\" id=\"passivedevices_newFieldName\" placeholder=\"Enter new field name\">\r\n    <br><br>\r\n    <button class=\"btn-add\" id=\"passivedevices_saveNewFieldBtn\">Save Field<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- Data + defaults (localStorage keys kept per-tab) ---------- *\/\r\nconst passivedevices_container = document.getElementById(\"passivedevices_container\");\r\nlet passivedevices_tickets = JSON.parse(localStorage.getItem(\"passivedevices_inventoryData\")) || [];\r\nlet passivedevices_trashData = JSON.parse(localStorage.getItem(\"passivedevices_trashData\")) || [];\r\nlet passivedevices_tableFields = JSON.parse(localStorage.getItem(\"passivedevices_tableFields\")) || [\r\n  \"Name\",\"Department\",\"Status\",\"Asset Number\",\"Type\",\"Manufacturer\",\"Model\",\"Location\",\"In Charge\",\"Last Update\",\"Action\"\r\n];\r\n\r\nlet passivedevices_editIndex = null;\r\n\r\n\/* ---- ensure Name column remains first ---- *\/\r\nif (!passivedevices_tableFields.includes(\"Name\")) {\r\n  passivedevices_tableFields.unshift(\"Name\");\r\n} else {\r\n  if (passivedevices_tableFields[0] !== \"Name\") {\r\n    passivedevices_tableFields = passivedevices_tableFields.filter(f => f !== \"Name\");\r\n    passivedevices_tableFields.unshift(\"Name\");\r\n  }\r\n}\r\n\r\n\/* ---------- Element refs ---------- *\/\r\nconst passivedevices_addBtn = document.getElementById(\"passivedevices_addBtn\");\r\nconst passivedevices_addModal = document.getElementById(\"passivedevices_addModal\");\r\nconst passivedevices_modalTitle = document.getElementById(\"passivedevices_modalTitle\");\r\nconst passivedevices_addForm = document.getElementById(\"passivedevices_addForm\");\r\nconst passivedevices_tableBody = document.querySelector(\"#passivedevices_inventoryTable tbody\");\r\nconst passivedevices_trashTableBody = document.querySelector(\"#passivedevices_trashTable tbody\");\r\nconst passivedevices_trashToggle = document.getElementById(\"passivedevices_trashToggle\");\r\nconst passivedevices_searchInput = document.getElementById(\"passivedevices_searchInput\");\r\n\r\nconst passivedevices_settingsModal = document.getElementById(\"passivedevices_settingsModal\");\r\nconst passivedevices_settingsIcon = document.getElementById(\"passivedevices_settingsIcon\");\r\nconst passivedevices_settingsBody = document.getElementById(\"passivedevices_settingsBody\");\r\n\r\nconst passivedevices_addFieldModal = document.getElementById(\"passivedevices_addFieldModal\");\r\nconst passivedevices_openAddFieldBtn = document.getElementById(\"passivedevices_openAddFieldBtn\");\r\n\r\n\/* datetime modal *\/\r\nconst passivedevices_datetimeModal = document.getElementById(\"passivedevices_datetimeModal\");\r\nconst passivedevices_datetimeInput = document.getElementById(\"passivedevices_datetimeInput\");\r\nconst passivedevices_saveDatetime = document.getElementById(\"passivedevices_saveDatetime\");\r\nconst passivedevices_closeDatetime = document.getElementById(\"passivedevices_closeDatetime\");\r\n\r\n\/* close buttons *\/\r\nconst passivedevices_closeAddModalBtn = document.getElementById(\"passivedevices_closeAddModal\");\r\nconst passivedevices_cancelBtn = document.getElementById(\"passivedevices_cancelBtn\");\r\nconst passivedevices_closeSettingsModalBtn = document.getElementById(\"passivedevices_closeSettingsModal\");\r\nconst passivedevices_closeAddFieldBtn = document.getElementById(\"passivedevices_closeAddField\");\r\n\r\n\/* add location *\/\r\nconst passivedevices_addLocationBtn = document.getElementById(\"passivedevices_addLocationBtn\");\r\n\r\n\/* ---------- Open \/ Close Add\/Edit modal ---------- *\/\r\nfunction passivedevices_openModal(edit = false, index = null) {\r\n  passivedevices_addModal.style.display = \"block\";\r\n  passivedevices_modalTitle.textContent = edit ? \"EDIT\" : \"ADD\";\r\n  passivedevices_editIndex = edit ? index : null;\r\n  if (edit) {\r\n    const rec = passivedevices_tickets[index];\r\n    document.getElementById(\"passivedevices_name\").value = rec.name || \"\";\r\n    document.getElementById(\"passivedevices_department\").value = rec.department || \"\";\r\n    document.getElementById(\"passivedevices_status\").value = rec.status || \"\";\r\n    document.getElementById(\"passivedevices_asset\").value = rec.asset || \"\";\r\n    document.getElementById(\"passivedevices_type\").value = rec.type || \"\";\r\n    document.getElementById(\"passivedevices_manufacturer\").value = rec.manufacturer || \"\";\r\n    document.getElementById(\"passivedevices_model\").value = rec.model || \"\";\r\n    document.getElementById(\"passivedevices_location\").value = rec.location || \"\";\r\n    document.getElementById(\"passivedevices_incharge\").value = rec.incharge || \"\";\r\n  } else {\r\n    passivedevices_addForm.reset();\r\n  }\r\n}\r\n\r\nfunction passivedevices_closeModal() {\r\n  passivedevices_addModal.style.display = \"none\";\r\n  passivedevices_addForm.reset();\r\n  passivedevices_editIndex = null;\r\n}\r\n\r\n\/* ---------- Add location button ---------- *\/\r\npassivedevices_addLocationBtn.addEventListener(\"click\", () => {\r\n  const newLoc = prompt(\"Enter new location:\");\r\n  if (newLoc) {\r\n    const locSelect = document.getElementById(\"passivedevices_location\");\r\n    const opt = document.createElement(\"option\");\r\n    opt.text = newLoc;\r\n    locSelect.add(opt);\r\n    locSelect.value = newLoc;\r\n  }\r\n});\r\n\r\n\/* ---------- Submit Add\/Edit ---------- *\/\r\npassivedevices_addForm.addEventListener(\"submit\", function(event) {\r\n  event.preventDefault();\r\n\r\n  const record = {\r\n    name: document.getElementById(\"passivedevices_name\").value,\r\n    department: document.getElementById(\"passivedevices_department\").value,\r\n    status: document.getElementById(\"passivedevices_status\").value,\r\n    asset: document.getElementById(\"passivedevices_asset\").value,\r\n    type: document.getElementById(\"passivedevices_type\").value,\r\n    manufacturer: document.getElementById(\"passivedevices_manufacturer\").value,\r\n    model: document.getElementById(\"passivedevices_model\").value,\r\n    location: document.getElementById(\"passivedevices_location\").value,\r\n    incharge: document.getElementById(\"passivedevices_incharge\").value,\r\n    lastupdate: \"\"\r\n  };\r\n\r\n  if (passivedevices_editIndex !== null && passivedevices_editIndex !== undefined) {\r\n    passivedevices_tickets[passivedevices_editIndex] = record;\r\n    passivedevices_editIndex = null;\r\n  } else {\r\n    passivedevices_tickets.push(record);\r\n  }\r\n\r\n  localStorage.setItem(\"passivedevices_inventoryData\", JSON.stringify(passivedevices_tickets));\r\n  passivedevices_renderTable();\r\n  passivedevices_closeModal();\r\n});\r\n\r\n\/* ---------- Delete (move to trash) ---------- *\/\r\nfunction passivedevices_deleteRecord(index) {\r\n  const record = passivedevices_tickets.splice(index, 1)[0];\r\n  record.deletedOn = new Date().toLocaleString();\r\n  passivedevices_trashData.push(record);\r\n  localStorage.setItem(\"passivedevices_inventoryData\", JSON.stringify(passivedevices_tickets));\r\n  localStorage.setItem(\"passivedevices_trashData\", JSON.stringify(passivedevices_trashData));\r\n  passivedevices_renderTable();\r\n  passivedevices_renderTrash();\r\n}\r\n\r\n\/* ---------- Render headers & table ---------- *\/\r\nfunction passivedevices_renderTableHeaders() {\r\n  if (!passivedevices_tableFields.includes(\"Name\")) {\r\n    passivedevices_tableFields.unshift(\"Name\");\r\n  } else if (passivedevices_tableFields[0] !== \"Name\") {\r\n    passivedevices_tableFields = passivedevices_tableFields.filter(f => f !== \"Name\");\r\n    passivedevices_tableFields.unshift(\"Name\");\r\n  }\r\n\r\n  const thead = document.querySelector(\"#passivedevices_inventoryTable thead tr\");\r\n  thead.innerHTML = \"\";\r\n  passivedevices_tableFields.forEach(f => {\r\n    thead.innerHTML += `<th>${f}<\/th>`;\r\n  });\r\n}\r\n\r\nfunction passivedevices_renderTable() {\r\n  passivedevices_tableBody.innerHTML = \"\";\r\n  passivedevices_tickets.forEach((r, i) => {\r\n    let rowHTML = \"\";\r\n\r\n    passivedevices_tableFields.forEach(field => {\r\n      if (field === \"Action\") {\r\n        rowHTML += `\r\n          <td>\r\n            <button class=\"action-btn edit-btn\" onclick=\"passivedevices_openModal(true, ${i})\">Edit<\/button>\r\n            <button class=\"action-btn delete-btn\" onclick=\"passivedevices_deleteRecord(${i})\">Delete<\/button>\r\n          <\/td>`;\r\n      } else if (field === \"Last Update\") {\r\n        rowHTML += `<td><span>${r.lastupdate || \"\u2014\"}<\/span>\r\n        <button class=\"action-btn\" onclick=\"passivedevices_openDateTime(${i})\">\ud83d\udd52<\/button><\/td>`;\r\n      } else {\r\n        const keyMap = {\r\n          \"Name\": \"name\",\r\n          \"Department\": \"department\",\r\n          \"Status\": \"status\",\r\n          \"Asset Number\": \"asset\",\r\n          \"Type\": \"type\",\r\n          \"Manufacturer\": \"manufacturer\",\r\n          \"Model\": \"model\",\r\n          \"Location\": \"location\",\r\n          \"In Charge\": \"incharge\"\r\n        };\r\n        rowHTML += `<td>${r[keyMap[field]] || \"\"}<\/td>`;\r\n      }\r\n    });\r\n\r\n    passivedevices_tableBody.innerHTML += `<tr>${rowHTML}<\/tr>`;\r\n  });\r\n}\r\n\r\n\/* ---------- Trash (render, restore, permanent delete) ---------- *\/\r\nfunction passivedevices_renderTrash() {\r\n  passivedevices_trashTableBody.innerHTML = \"\";\r\n  passivedevices_trashData.forEach((r, i) => {\r\n    passivedevices_trashTableBody.innerHTML += `\r\n      <tr>\r\n        <td>${r.name}<\/td>\r\n        <td>${r.department}<\/td>\r\n        <td>${r.status}<\/td>\r\n        <td>${r.asset}<\/td>\r\n        <td>${r.type}<\/td>\r\n        <td>${r.manufacturer}<\/td>\r\n        <td>${r.model}<\/td>\r\n        <td>${r.location}<\/td>\r\n        <td>${r.incharge}<\/td>\r\n        <td>${r.deletedOn || \"\"}<\/td>\r\n        <td>\r\n          <button class=\"action-btn edit-btn\" onclick=\"passivedevices_restore(${i})\">Restore<\/button>\r\n          <button class=\"action-btn delete-btn\" onclick=\"passivedevices_deletePermanently(${i})\">Delete<\/button>\r\n        <\/td>\r\n      <\/tr>`;\r\n  });\r\n}\r\n\r\nfunction passivedevices_restore(index) {\r\n  const rec = passivedevices_trashData.splice(index, 1)[0];\r\n  delete rec.deletedOn;\r\n  passivedevices_tickets.push(rec);\r\n  localStorage.setItem(\"passivedevices_trashData\", JSON.stringify(passivedevices_trashData));\r\n  localStorage.setItem(\"passivedevices_inventoryData\", JSON.stringify(passivedevices_tickets));\r\n  passivedevices_renderTrash();\r\n  passivedevices_renderTable();\r\n}\r\n\r\nfunction passivedevices_deletePermanently(index) {\r\n  if (confirm(\"Are you sure you want to permanently delete this record?\")) {\r\n    passivedevices_trashData.splice(index, 1);\r\n    localStorage.setItem(\"passivedevices_trashData\", JSON.stringify(passivedevices_trashData));\r\n    passivedevices_renderTrash();\r\n  }\r\n}\r\n\r\n\/* ---------- Date\/time modal ---------- *\/\r\nlet passivedevices_editingRowForDate = null;\r\nfunction passivedevices_openDateTime(index) {\r\n  passivedevices_editingRowForDate = index;\r\n  passivedevices_datetimeModal.style.display = \"block\";\r\n  passivedevices_datetimeInput.value = \"\";\r\n}\r\n\r\npassivedevices_saveDatetime.onclick = () => {\r\n  if (passivedevices_editingRowForDate !== null && passivedevices_datetimeInput.value) {\r\n    const selectedDate = new Date(passivedevices_datetimeInput.value).toLocaleString();\r\n    passivedevices_tickets[passivedevices_editingRowForDate].lastupdate = selectedDate;\r\n    localStorage.setItem(\"passivedevices_inventoryData\", JSON.stringify(passivedevices_tickets));\r\n    passivedevices_renderTable();\r\n    passivedevices_datetimeModal.style.display = \"none\";\r\n    passivedevices_editingRowForDate = null;\r\n  }\r\n};\r\npassivedevices_closeDatetime.onclick = () => passivedevices_datetimeModal.style.display = \"none\";\r\n\r\n\/* ---------- Trash toggle (switch between main & trash) ---------- *\/\r\npassivedevices_trashToggle.addEventListener(\"change\", () => {\r\n  document.getElementById(\"passivedevices_inventoryTable\").style.display = passivedevices_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"passivedevices_trashTable\").style.display = passivedevices_trashToggle.checked ? \"table\" : \"none\";\r\n});\r\n\r\n\/* ---------- Search filter ---------- *\/\r\npassivedevices_searchInput.addEventListener(\"keyup\", function() {\r\n  const filter = this.value.toLowerCase();\r\n  const rows = document.querySelectorAll(\"#passivedevices_inventoryTable tbody tr\");\r\n\r\n  rows.forEach(row => {\r\n    const text = row.textContent.toLowerCase();\r\n    row.style.display = text.includes(filter) ? \"\" : \"none\";\r\n  });\r\n});\r\n\r\n\/* ---------- Settings modal (fields list + drag reorder + delete) ---------- *\/\r\nfunction passivedevices_renderSettingsTable() {\r\n  const body = passivedevices_settingsBody;\r\n  if (!body) return;\r\n  body.innerHTML = \"\";\r\n  passivedevices_tableFields.forEach(f => {\r\n    if (f !== \"Action\") {\r\n      body.innerHTML += `\r\n        <tr draggable=\"true\">\r\n          <td>${f}<\/td>\r\n          <td style=\"text-align:right;\">\r\n            <button class='delete-icon' onclick='passivedevices_deleteField(this)'>\u2716\ufe0f<\/button>\r\n          <\/td>\r\n        <\/tr>`;\r\n    }\r\n  });\r\n}\r\n\r\nfunction passivedevices_deleteField(btn) {\r\n  const field = btn.closest(\"tr\").querySelector(\"td\").textContent;\r\n  if (field && field.trim() === \"Name\") {\r\n    alert(\"The 'Name' column cannot be removed.\");\r\n    return;\r\n  }\r\n  passivedevices_tableFields = passivedevices_tableFields.filter(f => f !== field);\r\n  passivedevices_saveTableFields();\r\n  passivedevices_renderSettingsTable();\r\n  passivedevices_renderTableHeaders();\r\n  passivedevices_renderTable();\r\n}\r\n\r\nfunction passivedevices_saveTableFields() {\r\n  localStorage.setItem(\"passivedevices_tableFields\", JSON.stringify(passivedevices_tableFields));\r\n  passivedevices_renderTableHeaders();\r\n  passivedevices_renderTable();\r\n}\r\n\r\npassivedevices_settingsIcon.onclick = () => {\r\n  passivedevices_settingsModal.style.display = \"block\";\r\n  passivedevices_renderSettingsTable();\r\n};\r\n\r\n\/* drag\/reorder handlers *\/\r\nlet passivedevices_draggedRow = null;\r\nif (passivedevices_settingsBody) {\r\n  passivedevices_settingsBody.addEventListener(\"dragstart\", e => {\r\n    passivedevices_draggedRow = e.target.closest(\"tr\");\r\n    if (passivedevices_draggedRow) passivedevices_draggedRow.classList.add(\"dragging\");\r\n  });\r\n  passivedevices_settingsBody.addEventListener(\"dragover\", e => {\r\n    e.preventDefault();\r\n    const afterElement = passivedevices_getDragAfterElement(passivedevices_settingsBody, e.clientY);\r\n    const draggable = document.querySelector(\"#passivedevices_settingsBody .dragging\");\r\n    if (draggable) {\r\n      if (afterElement == null) {\r\n        passivedevices_settingsBody.appendChild(draggable);\r\n      } else {\r\n        passivedevices_settingsBody.insertBefore(draggable, afterElement);\r\n      }\r\n    }\r\n  });\r\n  passivedevices_settingsBody.addEventListener(\"dragend\", () => {\r\n    if (passivedevices_draggedRow) passivedevices_draggedRow.classList.remove(\"dragging\");\r\n    passivedevices_draggedRow = null;\r\n    passivedevices_updateFieldOrder();\r\n  });\r\n}\r\n\r\nfunction passivedevices_getDragAfterElement(container, y) {\r\n  const draggableElements = [...container.querySelectorAll(\"tr:not(.dragging)\")];\r\n  return draggableElements.reduce((closest, child) => {\r\n    const box = child.getBoundingClientRect();\r\n    const offset = y - box.top - box.height \/ 2;\r\n    if (offset < 0 && offset > closest.offset) {\r\n      return { offset, element: child };\r\n    } else {\r\n      return closest;\r\n    }\r\n  }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction passivedevices_updateFieldOrder() {\r\n  const newOrder = [];\r\n  const body = passivedevices_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  passivedevices_tableFields = newOrder;\r\n  passivedevices_saveTableFields();\r\n  passivedevices_renderTableHeaders();\r\n  passivedevices_renderTable();\r\n}\r\n\r\nfunction passivedevices_saveSettings() {\r\n  const newOrder = [];\r\n  const body = passivedevices_settingsBody;\r\n  if (!body) return;\r\n  body.querySelectorAll(\"tr\").forEach(row => {\r\n    const field = row.querySelector(\"td\").textContent;\r\n    if (field !== \"Action\") newOrder.push(field);\r\n  });\r\n  newOrder.push(\"Action\");\r\n  passivedevices_tableFields = newOrder;\r\n  passivedevices_saveTableFields();\r\n  passivedevices_renderTableHeaders();\r\n  passivedevices_renderTable();\r\n  alert(\"Changes saved successfully!\");\r\n}\r\n\r\n\/* append Save Changes button inside modal if missing *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const modalContent = document.querySelector(\"#passivedevices_settingsModal .modal-content\");\r\n  if (modalContent && !document.getElementById(\"passivedevices_saveSettingsBtn\")) {\r\n    const saveBtn = document.createElement(\"button\");\r\n    saveBtn.id = \"passivedevices_saveSettingsBtn\";\r\n    saveBtn.textContent = \"Save Changes\";\r\n    saveBtn.style.cssText = `\r\n      background-color: #28a745;\r\n      color: white;\r\n      font-weight: bold;\r\n      padding: 10px 18px;\r\n      border: none;\r\n      border-radius: 6px;\r\n      margin-top: 15px;\r\n      float: right;\r\n      cursor: pointer;\r\n    `;\r\n    saveBtn.onclick = passivedevices_saveSettings;\r\n    modalContent.appendChild(saveBtn);\r\n  }\r\n});\r\n\r\n\/* ---------- Add Field modal ---------- *\/\r\npassivedevices_openAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (passivedevices_addFieldModal) passivedevices_addFieldModal.style.display = \"block\";\r\n});\r\n\r\npassivedevices_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  if (passivedevices_addFieldModal) passivedevices_addFieldModal.style.display = \"none\";\r\n});\r\n\r\ndocument.getElementById(\"passivedevices_saveNewFieldBtn\").addEventListener(\"click\", saveNewPassiveDevicesField);\r\n\r\nfunction saveNewPassiveDevicesField() {\r\n  const fieldNameElem = document.getElementById(\"passivedevices_newFieldName\");\r\n  if (!fieldNameElem) return;\r\n  const fieldName = fieldNameElem.value.trim();\r\n  if (fieldName === \"\") {\r\n    alert(\"Please enter a field name.\");\r\n    return;\r\n  }\r\n\r\n  if (passivedevices_tableFields.includes(fieldName)) {\r\n    alert(\"Field already exists.\");\r\n    return;\r\n  }\r\n\r\n  const actionIndex = passivedevices_tableFields.indexOf(\"Action\");\r\n  if (actionIndex === -1) {\r\n    passivedevices_tableFields.push(fieldName);\r\n  } else {\r\n    passivedevices_tableFields.splice(actionIndex, 0, fieldName);\r\n  }\r\n\r\n  passivedevices_saveTableFields();\r\n\r\n  const rows = document.querySelectorAll(\"#passivedevices_inventoryTable tbody tr\");\r\n  rows.forEach(row => {\r\n    const newCell = document.createElement(\"td\");\r\n    newCell.textContent = \"-\";\r\n    row.appendChild(newCell);\r\n  });\r\n\r\n  fieldNameElem.value = \"\";\r\n  if (passivedevices_addFieldModal) passivedevices_addFieldModal.style.display = \"none\";\r\n\r\n  passivedevices_renderSettingsTable();\r\n\r\n  alert(`New field \"${fieldName}\" has been added!`);\r\n}\r\n\r\n\/* ---------- Close buttons wiring ---------- *\/\r\npassivedevices_closeAddModalBtn.addEventListener(\"click\", passivedevices_closeModal);\r\npassivedevices_cancelBtn.addEventListener(\"click\", passivedevices_closeModal);\r\npassivedevices_closeSettingsModalBtn.addEventListener(\"click\", () => {\r\n  passivedevices_settingsModal.style.display = \"none\";\r\n});\r\npassivedevices_closeDatetime.addEventListener(\"click\", () => {\r\n  passivedevices_datetimeModal.style.display = \"none\";\r\n});\r\npassivedevices_closeAddFieldBtn.addEventListener(\"click\", () => {\r\n  passivedevices_addFieldModal.style.display = \"none\";\r\n});\r\n\r\n\/* clicking outside modals closes them (scoped) *\/\r\ndocument.addEventListener(\"click\", (event) => {\r\n  const target = event.target;\r\n  if (target === passivedevices_addModal) passivedevices_closeModal();\r\n  if (target === passivedevices_settingsModal) passivedevices_settingsModal.style.display = \"none\";\r\n  if (target === passivedevices_addFieldModal) passivedevices_addFieldModal.style.display = \"none\";\r\n  if (target === passivedevices_datetimeModal) passivedevices_datetimeModal.style.display = \"none\";\r\n});\r\n\r\n\/* ---------- Add button wiring ---------- *\/\r\npassivedevices_addBtn.addEventListener(\"click\", () => passivedevices_openModal(false, null));\r\n\r\n\/* ---------- Init ---------- *\/\r\nfunction passivedevices_init() {\r\n  passivedevices_renderTableHeaders();\r\n  passivedevices_renderTable();\r\n  passivedevices_renderTrash();\r\n\r\n  document.getElementById(\"passivedevices_inventoryTable\").style.display = passivedevices_trashToggle.checked ? \"none\" : \"table\";\r\n  document.getElementById(\"passivedevices_trashTable\").style.display = passivedevices_trashToggle.checked ? \"table\" : \"none\";\r\n}\r\n\r\npassivedevices_init();\r\n\r\n\/* expose functions for inline onclick handlers used in markup *\/\r\nwindow.passivedevices_openModal = passivedevices_openModal;\r\nwindow.passivedevices_deleteRecord = passivedevices_deleteRecord;\r\nwindow.passivedevices_openDateTime = passivedevices_openDateTime;\r\nwindow.passivedevices_deletePermanently = passivedevices_deletePermanently;\r\nwindow.passivedevices_deleteField = passivedevices_deleteField;\r\nwindow.passivedevices_restore = passivedevices_restore;\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409814\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409814\" data-tab-index=\"14\" style=\"--n-tabs-title-order: 14;\" class=\" elementor-element elementor-element-4cd6ed7 e-con-full e-flex e-con e-child\" data-id=\"4cd6ed7\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a2e0e3 elementor-widget elementor-widget-html\" data-id=\"5a2e0e3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.soft-shadow-box {\r\n    background: #ffffff;\r\n    border-radius: 20px;                     \r\n    box-shadow: 0 4px 20px rgba(0,0,0,0.1), \r\n              0 0 10px rgba(0,0,0,0.05);\r\n    padding: 30px;                          \r\n    width: 90%;                              \r\n    max-width: 2500px;\r\n    margin: 40px auto;\r\n    height: 1000px;\r\n}\r\n\r\n.soft-shadow-box {\r\n  border-radius: 25px;\r\n  box-shadow: 0 8px 30px rgba(0,0,0,0.08);\r\n  min-height: 1000px;\r\n}\r\n\r\n    \r\n<\/style>\r\n\r\n<div class=\"soft-shadow-box\">\r\n  \r\n<\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409815\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409815\" data-tab-index=\"15\" style=\"--n-tabs-title-order: 15;\" class=\" elementor-element elementor-element-7284edb e-con-full e-flex e-con e-child\" data-id=\"7284edb\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e48c6f4 elementor-widget elementor-widget-html\" data-id=\"e48c6f4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.soft-shadow-box {\r\n    background: #ffffff;\r\n    border-radius: 20px;                     \r\n    box-shadow: 0 4px 20px rgba(0,0,0,0.1), \r\n              0 0 10px rgba(0,0,0,0.05);\r\n    padding: 30px;                          \r\n    width: 90%;                              \r\n    max-width: 2500px;\r\n    margin: 40px auto;\r\n    height: 1000px;\r\n}\r\n\r\n.soft-shadow-box {\r\n  border-radius: 25px;\r\n  box-shadow: 0 8px 30px rgba(0,0,0,0.08);\r\n  min-height: 1000px;\r\n}\r\n\r\n    \r\n<\/style>\r\n\r\n<div class=\"soft-shadow-box\">\r\n  \r\n<\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-13138409816\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-13138409816\" data-tab-index=\"16\" style=\"--n-tabs-title-order: 16;\" class=\" elementor-element elementor-element-626a5be e-con-full e-flex e-con e-child\" data-id=\"626a5be\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49d35e3 elementor-widget elementor-widget-html\" data-id=\"49d35e3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.soft-shadow-box {\r\n    background: #ffffff;\r\n    border-radius: 20px;                     \r\n    box-shadow: 0 4px 20px rgba(0,0,0,0.1), \r\n              0 0 10px rgba(0,0,0,0.05);\r\n    padding: 30px;                          \r\n    width: 90%;                              \r\n    max-width: 2500px;\r\n    margin: 40px auto;\r\n    height: 1000px;\r\n}\r\n\r\n.soft-shadow-box {\r\n  border-radius: 25px;\r\n  box-shadow: 0 8px 30px rgba(0,0,0,0.08);\r\n  min-height: 1000px;\r\n}\r\n\r\n    \r\n<\/style>\r\n\r\n<div class=\"soft-shadow-box\">\r\n  \r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Assets Computers Monitors Software Network Devices Printers Peripherals Cartridges Consumables Phones Racks Enclosures PDUs Passive Devices Unmanaged Assets Cables Simcards Items Inventory Management \u2699\ufe0f \ud83d\uddd1\ufe0f + ADD Name Department Status Asset Number Type Manufacturer Model Location In Charge Last Update Action Name Department Status Asset Number Type Manufacturer Model Location In Charge Deleted On Action [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1044","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/1044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/comments?post=1044"}],"version-history":[{"count":85,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/1044\/revisions"}],"predecessor-version":[{"id":1508,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/1044\/revisions\/1508"}],"wp:attachment":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/media?parent=1044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}