{"id":131,"date":"2025-09-19T08:45:39","date_gmt":"2025-09-19T08:45:39","guid":{"rendered":"https:\/\/helpdesk.costbook.ph\/?page_id=131"},"modified":"2025-11-03T16:52:59","modified_gmt":"2025-11-04T00:52:59","slug":"elementor-131","status":"publish","type":"page","link":"https:\/\/helpdesk.costbook.ph\/index.php\/elementor-131\/","title":{"rendered":"Tickets"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"131\" class=\"elementor elementor-131\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fb9828 e-con-full e-flex e-con e-parent\" data-id=\"4fb9828\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88caca7 elementor-widget elementor-widget-template\" data-id=\"88caca7\" 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-841efbe e-con-full e-flex e-con e-parent\" data-id=\"841efbe\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-012fa08 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"012fa08\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n\/* Container layout *\/\r\n.ticket-wrapper {\r\n  display: flex;\r\n  gap: 18px;\r\n  font-family: Arial, sans-serif;\r\n  font-size: 15px;\r\n  position: relative;\r\n  min-height: 550px;\r\n}\r\n\r\n\/* LEFT PANEL (the vertical tab panel) *\/\r\n.ticket-left {\r\n  width: 270px;\r\n  background: #8b0); (180deg, rgba(210,90,70,0.12), rgba(140,40,40,0.08));\r\n  border-right: 1px solid rgba(0,0,0,0.08);\r\n  padding: 18px;\r\n  box-shadow: 6px 6px 12px rgba(0,0,0,0.12);\r\n  border-radius: 2px;\r\n}\r\n.ticket-left .back {\r\n  cursor: pointer;\r\n  font-weight: 700;\r\n  color: #222;\r\n  margin-bottom: 8px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n}\r\n\r\n.ticket-title {\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  color: #c0392b; \r\n  margin-bottom: 15px;\r\n  text-align: center;\r\n}\r\n.ticket-left .back .arrow {\r\n  transform: translateX(-3px);\r\n  font-size: 18px;\r\n}\r\n\r\n\/* Tab buttons *\/\r\n.ticket-tab-btn {\r\n  display:block;\r\n  width:100%;\r\n  height: 50px;\r\n  box-shadow: 10px;\r\n  text-align:center;\r\n  background: ;\r\n  border: 4px solid rgba(120,80,60,0.25);\r\n  padding: 12px 6px;\r\n  margin: 10px 0;\r\n  font-weight: 600;\r\n  cursor:pointer;\r\n  border-radius:4px;\r\n  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06);\r\n}\r\n.ticket-tab-btn.active {\r\n  background: #f2a67a\r\n  border-radius: 0;\r\n  padding: 10px 20px;\r\n  background-color: #c0392b\r\n  color: white;\r\n  border: none;\r\n  cursor pointer;\r\n  box-shadow: 2px 3px 6px rgba(0,0,0,0.12);\r\n}\r\n\r\n\/* RIGHT CONTENT *\/\r\n.ticket-right {\r\n  flex:1;\r\n  font-family: Arial, sans-serif;\r\n  font-size: 15px;\r\n  background: #fff;\r\n  padding: 14px;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  min-height:450px;\r\n  box-shadow: none;\r\n}\r\n.ticket-toolbar {\r\n  display:flex;\r\n  justify-content:flex-end;\r\n  margin-bottom:10px;\r\n}\r\n.button-primary {\r\n  background:#0b67d3;\r\n  color:#fff;\r\n  border:none;\r\n  padding:10px 14px;\r\n  border-radius:4px;\r\n  cursor:pointer;\r\n  font-weight:600;\r\n}\r\n\r\n\/* Tab content areas: we toggle display *\/\r\n.tab-content {\r\n  display:none;\r\n}\r\n.tab-content.active {\r\n  display:block;\r\n}\r\n\r\n\/* Table styling *\/\r\n.ticket-table {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  margin-top:8px;\r\n}\r\n.ticket-table th {\r\n  background:#dcdcdc;\r\n  font-weight: 800;\r\n  font-size: 13px;\r\n  padding:10px;\r\n  border-bottom:2px solid #bbb;\r\n  text-align:center;\r\n}\r\n.ticket-table td {\r\n  padding:9px 10px;\r\n  border-bottom:1px solid #e6e6e6;\r\n  font-size:13px;\r\n  vertical-align: middle;\r\n}\r\n.ticket-table tr:hover td { background: #fafafa; }\r\n\r\n\/* Small action buttons inside table *\/\r\n.action-btn {\r\n  background: transparent;\r\n  border:1px solid #bbb;\r\n  padding:6px 8px;\r\n  border-radius:4px;\r\n  cursor:pointer;\r\n  margin-right:6px;\r\n  font-size:12px;\r\n}\r\n.action-btn.small { padding:6px 6px; font-size:12px; }\r\n\r\n\/* Modal (new ticket) *\/\r\n.modal-overlay {\r\n  position: fixed;\r\n  inset:0;\r\n  background: rgba(0,0,0,0.45);\r\n  display:none;\r\n  align-items:center;\r\n  justify-content:center;\r\n  z-index:9999;\r\n}\r\n.modal {\r\n  background:#fff;\r\n  padding:18px;\r\n  width:560px;\r\n  border-radius:6px;\r\n  box-shadow:0 12px 30px rgba(0,0,0,0.25);\r\n}\r\n.modal h3{ margin-top:0; }\r\n.form-row{ display:flex; gap:8px; margin-bottom:10px; }\r\n.form-row input, .form-row select, .form-row textarea {\r\n  flex:1;\r\n  padding:8px;\r\n  border:1px solid #ccc;\r\n  border-radius:4px;\r\n  font-size:14px;\r\n}\r\n.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }\r\n.btn-ghost { background: transparent; border:1px solid #bbb; padding:8px 10px; border-radius:4px; cursor:pointer; }\r\n.btn-create { background:#28a745; color:white; border:none; padding:8px 12px; border-radius:4px; cursor:pointer; }\r\n\r\n\/* Responsive small *\/\r\n@media (max-width:900px){\r\n  .ticket-wrapper { flex-direction:column; }\r\n  .ticket-left { width:100%; display:flex; gap:8px; overflow:auto; }\r\n  .ticket-left .back{ display:none; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ticket-wrapper\">\r\n  <div class=\"ticket-left\" aria-hidden=\"false\">\r\n    <div class=\"back\" id=\"backBtn\"><span class=\"arrow\">\u25c0<\/span> <span>Back<\/span><\/div>\r\n    <div class=\"ticket-title\" style=\"color: #c0392b;\">Tickets<\/div>\r\n    <button class=\"ticket-tab-btn active\" data-target=\"tab-all\" style=\"border-radius: 0 \">All Tickets<\/button>\r\n    <button class=\"ticket-tab-btn\" data-target=\"tab-new\" style=\"border-radius: 0 \">New<\/button>\r\n    <button class=\"ticket-tab-btn\" data-target=\"tab-assigned\" style=\"border-radius: 0 \" >Assigned<\/button>\r\n    <button class=\"ticket-tab-btn\" data-target=\"tab-resolved\" style=\"border-radius: 0 \" >Resolved<\/button>\r\n    <button class=\"ticket-tab-btn\" data-target=\"tab-onhold\" style=\"border-radius: 0 \" >On Hold<\/button>\r\n    <button class=\"ticket-tab-btn\" data-target=\"tab-deleted\" style=\"border-radius: 0 \" >Deleted<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"ticket-right\">\r\n    <div class=\"ticket-toolbar\">\r\n      <button class=\"button-primary open-new-ticket\">New Ticket<\/button>\r\n    <\/div>\r\n\r\n    <!-- ALL -->\r\n    <div id=\"tab-all\" class=\"tab-content active\">\r\n      <table class=\"ticket-table\" id=\"table-all\">\r\n        <thead>\r\n          <tr>\r\n            <th>Ticket ID<\/th><th>Subject<\/th><th>Customer Name<\/th><th>Department<\/th><th>Priority<\/th><th>Date Created<\/th><th>Target SLA<\/th><th>Status<\/th><th>Assigned To<\/th><th>Actions<\/th>>> \r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <!-- NEW -->\r\n    <div id=\"tab-new\" class=\"tab-content\">\r\n      <table class=\"ticket-table\" id=\"table-new\">\r\n        <thead>\r\n          <tr>\r\n            <th>Ticket ID<\/th><th>Subject<\/th><th>Customer Name<\/th><th>Department<\/th><th>Priority<\/th><th>Date Created<\/th><th>Target SLA<\/th><th>Status<\/th><th>Actions<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <!-- ASSIGNED -->\r\n    <div id=\"tab-assigned\" class=\"tab-content\">\r\n      <table class=\"ticket-table\" id=\"table-assigned\">\r\n        <thead>\r\n          <tr>\r\n            <th>Ticket ID<\/th><th>Subject<\/th><th>Customer Name<\/th><th>Department<\/th><th>Priority<\/th><th>Date Created<\/th><th>Assigned Agent<\/th><th>Date Assigned<\/th><th>Escalation<\/th><th>Actions<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <!-- RESOLVED -->\r\n    <div id=\"tab-resolved\" class=\"tab-content\">\r\n      <table class=\"ticket-table\" id=\"table-resolved\">\r\n        <thead>\r\n          <tr>\r\n            <th>Ticket ID<\/th><th>Subject<\/th><th>Customer Name<\/th><th>Department<\/th><th>Priority<\/th><th>Date Created<\/th><th>Status<\/th><th>Actions<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <!-- ON HOLD -->\r\n    <div id=\"tab-onhold\" class=\"tab-content\">\r\n      <table class=\"ticket-table\" id=\"table-onhold\">\r\n        <thead>\r\n          <tr>\r\n            <th>Ticket ID<\/th><th>Subject<\/th><th>Customer Name<\/th><th>Department<\/th><th>Priority<\/th><th>Date Created<\/th><th>Date Suspended<\/th><th>Reason<\/th><th>Expected Resume<\/th><th>Actions<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <!-- DELETED -->\r\n    <div id=\"tab-deleted\" class=\"tab-content\">\r\n      <table class=\"ticket-table\" id=\"table-deleted\">\r\n        <thead>\r\n          <tr>\r\n            <th>Ticket ID<\/th><th>Subject<\/th><th>Customer Name<\/th><th>Department<\/th><th>Priority<\/th><th>Date Created<\/th><th>Deleted By<\/th><th>Reason<\/th><th>Deletion Type<\/th><th>Actions<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Modal for New Ticket -->\r\n<div class=\"modal-overlay\" id=\"modalOverlay\">\r\n  <div class=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\r\n    <h3 id=\"modalTitle\">Create New Ticket<\/h3>\r\n    <form id=\"ticketForm\">\r\n      <div class=\"form-row\">\r\n        <input type=\"text\" id=\"ticketSubject\" placeholder=\"Subject\" required>\r\n        <input type=\"text\" id=\"ticketCustomer\" placeholder=\"Customer Name\" required>\r\n      <\/div>\r\n      <div class=\"form-row\">\r\n        <input type=\"text\" id=\"ticketDepartment\" placeholder=\"Department\">\r\n        <select id=\"ticketPriority\">\r\n          <option value=\"\">Priority<\/option>\r\n          <option>Low<\/option><option>Medium<\/option><option>High<\/option><option>Urgent<\/option>\r\n        <\/select>\r\n      <\/div>\r\n      <div class=\"form-row\">\r\n        <input type=\"text\" id=\"ticketTargetSLA\" placeholder=\"Target SLA (e.g. 48 hours)\">\r\n        <input type=\"text\" id=\"ticketAssigned\" placeholder=\"Assigned\">\r\n      <\/div>\r\n      <div class=\"form-row\">\r\n        <textarea id=\"ticketNotes\" placeholder=\"Notes (optional)\" rows=\"3\"><\/textarea>\r\n      <\/div>\r\n\r\n      <div class=\"form-actions\">\r\n        <button type=\"button\" class=\"btn-ghost\" id=\"closeModal\">Close<\/button>\r\n        <button type=\"submit\" class=\"btn-create\">Create<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  \/\/ Data store (in-memory). For production replace with REST calls to your server.\r\n  var tickets = {}; \/\/ ticketId => ticketObject\r\n\r\n  \/\/ Tab switching\r\n  var tabBtns = document.querySelectorAll('.ticket-tab-btn');\r\n  tabBtns.forEach(function(btn){\r\n    btn.addEventListener('click', function(){\r\n      tabBtns.forEach(function(b){ b.classList.remove('active'); });\r\n      btn.classList.add('active');\r\n      var target = btn.getAttribute('data-target');\r\n      document.querySelectorAll('.tab-content').forEach(function(tc){\r\n        tc.classList.remove('active');\r\n      });\r\n      var el = document.getElementById(target);\r\n      if(el) el.classList.add('active');\r\n    });\r\n  });\r\n\r\n  \/\/ Back button behavior: can close panel or navigate back\r\n  document.getElementById('backBtn').addEventListener('click', function(){\r\n    \/\/ Simple behavior: hide left panel (toggle)\r\n    var left = document.querySelector('.ticket-left');\r\n    if(left.style.display === 'none'){ left.style.display = ''; }\r\n    else { left.style.display = 'none'; }\r\n  });\r\n\r\n  \/\/ Modal open\/close\r\n  var modalOverlay = document.getElementById('modalOverlay');\r\n  document.querySelectorAll('.open-new-ticket').forEach(function(b){ b.addEventListener('click', openModal); });\r\n  document.getElementById('closeModal').addEventListener('click', closeModal);\r\n  modalOverlay.addEventListener('click', function(e){ if(e.target === modalOverlay) closeModal(); });\r\n  function openModal(){ modalOverlay.style.display = 'flex'; }\r\n  function closeModal(){ modalOverlay.style.display = 'none'; document.getElementById('ticketForm').reset(); }\r\n\r\n  \/\/ Create ticket\r\n  document.getElementById('ticketForm').addEventListener('submit', function(e){\r\n    e.preventDefault();\r\n    var id = generateId();\r\n    var ticket = {\r\n      id: id,\r\n      subject: document.getElementById('ticketSubject').value || '(no subject)',\r\n      customer: document.getElementById('ticketCustomer').value || '(no customer)',\r\n      department: document.getElementById('ticketDepartment').value || '',\r\n      priority: document.getElementById('ticketPriority').value || '',\r\n      dateCreated: new Date().toLocaleString(),\r\n      targetSLA: document.getElementById('ticketTargetSLA').value || '',\r\n      assignedTo: document.getElementById('ticketAssigned').value || '',\r\n      notes: document.getElementById('ticketNotes').value || '',\r\n      status: 'New'\r\n    };\r\n    tickets[id] = ticket;\r\n    renderAllTables();\r\n    closeModal();\r\n    \/\/ ensure New tab is active so user sees it\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-new\"]').click();\r\n  });\r\n\r\n  \/\/ Utilities\r\n  function generateId(){ return 'T' + Date.now().toString().slice(-8); }\r\n\r\n  \/\/ Render all tables according to ticket.status\r\n  function renderAllTables(){\r\n    clearBody('#table-all tbody');\r\n    clearBody('#table-new tbody');\r\n    clearBody('#table-assigned tbody');\r\n    clearBody('#table-resolved tbody');\r\n    clearBody('#table-onhold tbody');\r\n    clearBody('#table-deleted tbody');\r\n\r\n    Object.keys(tickets).forEach(function(k){\r\n      var t = tickets[k];\r\n      \/\/ Always add to ALL\r\n      appendRow(document.querySelector('#table-all tbody'), buildRowForAll(t));\r\n\r\n      \/\/ Add to each specific view\r\n      if(t.status === 'New') appendRow(document.querySelector('#table-new tbody'), buildRowForNew(t));\r\n      if(t.status === 'Assigned') appendRow(document.querySelector('#table-assigned tbody'), buildRowForAssigned(t));\r\n      if(t.status === 'Resolved') appendRow(document.querySelector('#table-resolved tbody'), buildRowForResolved(t));\r\n      if(t.status === 'On Hold') appendRow(document.querySelector('#table-onhold tbody'), buildRowForOnHold(t));\r\n      if(t.status === 'Deleted') appendRow(document.querySelector('#table-deleted tbody'), buildRowForDeleted(t));\r\n      \/\/ Resolved -> falls under Received or could be a new \"Resolved tab\"; adapt as you want\r\n    });\r\n  }\r\n\r\n  function clearBody(sel){ var el = document.querySelector(sel); if(el) el.innerHTML=''; }\r\n  function appendRow(tbody, tr){ if(tbody && tr) tbody.appendChild(tr); }\r\n\r\n  \/\/ Row builders per table type (each returns a <tr>)\r\n  function buildCell(text, center){ var td=document.createElement('td'); td.innerHTML = text || ''; if(center) td.style.textAlign='center'; return td; }\r\n  function buildAllActions(ticket){\r\n    var container = document.createElement('div');\r\n    container.innerHTML = '<button class=\"action-btn btn-assign\" data-id=\"'+ticket.id+'\">Assign<\/button>' +\r\n                          '<button class=\"action-btn btn-resolved\" data-id=\"'+ticket.id+'\">Resolved<\/button>' +\r\n                          '<button class=\"action-btn btn-hold\" data-id=\"'+ticket.id+'\">Hold<\/button>' +\r\n                          '<button class=\"action-btn btn-delete\" data-id=\"'+ticket.id+'\">Delete<\/button>';\r\n    return container;\r\n  }\r\n\r\n  function buildRowForAll(t){\r\n    var tr = document.createElement('tr');\r\n    tr.appendChild(buildCell(t.id, true));\r\n    tr.appendChild(buildCell(escapeHtml(t.subject)));\r\n    tr.appendChild(buildCell(escapeHtml(t.customer)));\r\n    tr.appendChild(buildCell(escapeHtml(t.department)));\r\n    tr.appendChild(buildCell(escapeHtml(t.priority), true));\r\n    tr.appendChild(buildCell(t.dateCreated));\r\n    tr.appendChild(buildCell(escapeHtml(t.targetSLA)));\r\n    tr.appendChild(buildCell(escapeHtml(t.status), true));\r\n    tr.appendChild(buildCell(escapeHtml(t.assignedTo)));\r\n    var actionsTd = document.createElement('td');\r\n    actionsTd.appendChild(buildAllActions(t));\r\n    tr.appendChild(actionsTd);\r\n    return tr;\r\n  }\r\n\r\n  function buildRowForNew(t){\r\n    var tr = document.createElement('tr');\r\n    tr.appendChild(buildCell(t.id, true));\r\n    tr.appendChild(buildCell(escapeHtml(t.subject)));\r\n    tr.appendChild(buildCell(escapeHtml(t.customer)));\r\n    tr.appendChild(buildCell(escapeHtml(t.department)));\r\n    tr.appendChild(buildCell(escapeHtml(t.priority), true));\r\n    tr.appendChild(buildCell(t.dateCreated));\r\n    tr.appendChild(buildCell(escapeHtml(t.targetSLA)));\r\n    tr.appendChild(buildCell(escapeHtml(t.status), true));\r\n    var act = document.createElement('td');\r\n    act.innerHTML = '<button class=\"action-btn btn-assign\" data-id=\"'+t.id+'\">Assign<\/button>' +\r\n                    '<button class=\"action-btn btn-delete\" data-id=\"'+t.id+'\">Delete<\/button>';\r\n    tr.appendChild(act);\r\n    return tr;\r\n  }\r\n\r\n  function buildRowForAssigned(t){\r\n    var tr = document.createElement('tr');\r\n    tr.appendChild(buildCell(t.id, true));\r\n    tr.appendChild(buildCell(escapeHtml(t.subject)));\r\n    tr.appendChild(buildCell(escapeHtml(t.customer)));\r\n    tr.appendChild(buildCell(escapeHtml(t.department)));\r\n    tr.appendChild(buildCell(escapeHtml(t.priority), true));\r\n    tr.appendChild(buildCell(t.dateCreated));\r\n    tr.appendChild(buildCell(escapeHtml(t.assignedTo)));\r\n    tr.appendChild(buildCell(t.dateAssigned || ''));\r\n    tr.appendChild(buildCell(t.escalation || ''));\r\n    var actionsTd = document.createElement('td');\r\n    actionsTd.innerHTML = '<button class=\"action-btn btn-resolved\" data-id=\"'+t.id+'\">Resolved<\/button>' +\r\n                           '<button class=\"action-btn btn-reassign\" data-id=\"'+t.id+'\">Re-assign<\/button>' +\r\n                           '<button class=\"action-btn btn-hold\" data-id=\"'+t.id+'\">Hold<\/button>';\r\n    tr.appendChild(actionsTd);\r\n    return tr;\r\n  }\r\n\r\n  function buildRowForResolved(t){\r\n    var tr = document.createElement('tr');\r\n    tr.appendChild(buildCell(t.id, true));\r\n    tr.appendChild(buildCell(escapeHtml(t.subject)));\r\n    tr.appendChild(buildCell(escapeHtml(t.customer)));\r\n    tr.appendChild(buildCell(escapeHtml(t.department)));\r\n    tr.appendChild(buildCell(escapeHtml(t.priority), true));\r\n    tr.appendChild(buildCell(t.dateCreated));\r\n    tr.appendChild(buildCell(escapeHtml(t.status), true));\r\n    var actionsTd = document.createElement('td');\r\n    actionsTd.innerHTML = '<button class=\"action-btn btn-assign\" data-id=\"'+t.id+'\">Assign<\/button>';\r\n    tr.appendChild(actionsTd);\r\n    return tr;\r\n  }\r\n\r\n  function buildRowForOnHold(t){\r\n    var tr = document.createElement('tr');\r\n    tr.appendChild(buildCell(t.id, true));\r\n    tr.appendChild(buildCell(escapeHtml(t.subject)));\r\n    tr.appendChild(buildCell(escapeHtml(t.customer)));\r\n    tr.appendChild(buildCell(escapeHtml(t.department)));\r\n    tr.appendChild(buildCell(escapeHtml(t.priority), true));\r\n    tr.appendChild(buildCell(t.dateCreated));\r\n    tr.appendChild(buildCell(t.dateSuspended || ''));\r\n    tr.appendChild(buildCell(escapeHtml(t.suspendReason || '')));\r\n    tr.appendChild(buildCell(escapeHtml(t.expectedResume || '')));\r\n    var actionsTd = document.createElement('td');\r\n    actionsTd.innerHTML = '<button class=\"action-btn btn-resume\" data-id=\"'+t.id+'\">Resume<\/button>' +\r\n                           '<button class=\"action-btn btn-close\" data-id=\"'+t.id+'\">Close<\/button>';\r\n    tr.appendChild(actionsTd);\r\n    return tr;\r\n  }\r\n\r\n  function buildRowForDeleted(t){\r\n    var tr = document.createElement('tr');\r\n    tr.appendChild(buildCell(t.id, true));\r\n    tr.appendChild(buildCell(escapeHtml(t.subject)));\r\n    tr.appendChild(buildCell(escapeHtml(t.customer)));\r\n    tr.appendChild(buildCell(escapeHtml(t.department)));\r\n    tr.appendChild(buildCell(escapeHtml(t.priority), true));\r\n    tr.appendChild(buildCell(t.dateCreated));\r\n    tr.appendChild(buildCell(escapeHtml(t.deletedBy || '')));\r\n    tr.appendChild(buildCell(escapeHtml(t.deleteReason || '')));\r\n    tr.appendChild(buildCell(escapeHtml(t.deletionType || '')));\r\n    var actionsTd = document.createElement('td');\r\n    actionsTd.innerHTML = '<button class=\"action-btn btn-resolved\" data-id=\"'+t.id+'\">Resolved<\/button>' +\r\n                           '<button class=\"action-btn btn-perm-delete\" data-id=\"'+t.id+'\">Delete Permanently<\/button>';\r\n    tr.appendChild(actionsTd);\r\n    return tr;\r\n  }\r\n\r\n  \/\/ Event delegation for action buttons\r\n  document.addEventListener('click', function(e){\r\n    var t = e.target;\r\n    if(t.matches('.btn-assign')) { assignTicket(t.dataset.id); }\r\n    if(t.matches('.btn-reassign')) { assignTicket(t.dataset.id, true); }\r\n    if(t.matches('.btn-resolved')) { resolvedTicket(t.dataset.id); }\r\n    if(t.matches('.btn-hold')) { holdTicket(t.dataset.id); }\r\n    if(t.matches('.btn-delete')) { deleteTicket(t.dataset.id); }\r\n    if(t.matches('.btn-restore')) { restoreTicket(t.dataset.id); }\r\n    if(t.matches('.btn-perm-delete')) { permDeleteTicket(t.dataset.id); }\r\n    if(t.matches('.btn-resume')) { resumeTicket(t.dataset.id); }\r\n    if(t.matches('.btn-close')) { closeTicket(t.dataset.id); }\r\n  });\r\n\r\n  \/\/ Action implementations (simple prompt-based)\r\n  function assignTicket(id, isReassign){\r\n    var agent = prompt((isReassign ? 'Re-assign to agent (enter name):' : 'Assign to agent (enter name):'), tickets[id] ? tickets[id].assignedTo || '' : '');\r\n    if(!agent) return;\r\n    tickets[id].assignedTo = agent;\r\n    tickets[id].status = 'Assigned';\r\n    tickets[id].dateAssigned = new Date().toLocaleString();\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-assigned\"]').click();\r\n  }\r\n\r\n  function resolvedTicket(id){\r\n    var notes = prompt('Resolution notes (optional):', tickets[id] ? (tickets[id].resolutionNotes || '') : '');\r\n    tickets[id].resolutionNotes = notes || '';\r\n    tickets[id].status = 'Resolved';\r\n    tickets[id].dateResolved = new Date().toLocaleString();\r\n    \/\/ treat resolved for display\r\n    tickets[id].status = 'Resolved';\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-resolved\"]').click();\r\n  }\r\n\r\n  function holdTicket(id){\r\n    var reason = prompt('Reason for suspension:');\r\n    if(!reason) return;\r\n    var expected = prompt('Expected resume date (optional):');\r\n    tickets[id].suspendReason = reason;\r\n    tickets[id].expectedResume = expected || '';\r\n    tickets[id].dateSuspended = new Date().toLocaleString();\r\n    tickets[id].status = 'On Hold';\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-onhold\"]').click();\r\n  }\r\n\r\n  function deleteTicket(id){\r\n    var reason = prompt('Reason for deletion (optional):');\r\n    var type = prompt('Deletion type (soft \/ permanent):', 'soft');\r\n    tickets[id].deleteReason = reason || '';\r\n    tickets[id].deletionType = type || 'soft';\r\n    tickets[id].deletedBy = 'Admin'; \/\/ replace with current user name if available\r\n    tickets[id].status = 'Deleted';\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-deleted\"]').click();\r\n  }\r\n\r\n  function restoreTicket(id){\r\n    tickets[id].status = 'New';\r\n    \/\/ clear deletion metadata\r\n    delete tickets[id].deleteReason; delete tickets[id].deletionType; delete tickets[id].deletedBy;\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-new\"]').click();\r\n  }\r\n\r\n  function permDeleteTicket(id){\r\n    if(!confirm('Permanently delete ticket ' + id + '? This cannot be undone.')) return;\r\n    delete tickets[id];\r\n    renderAllTables();\r\n  }\r\n\r\n  function resumeTicket(id){\r\n    tickets[id].status = 'Assigned';\r\n    delete tickets[id].suspendReason;\r\n    delete tickets[id].expectedResume;\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-assigned\"]').click();\r\n  }\r\n\r\n  function closeTicket(id){\r\n    \/\/ Close from On Hold -> Resolved \r\n    tickets[id].status = 'Resolved';\r\n    tickets[id].dateResolved = new Date().toLocaleString();\r\n    renderAllTables();\r\n    document.querySelector('.ticket-tab-btn[data-target=\"tab-resolved\"]').click();\r\n  }\r\n\r\n  \/\/ Utility to escape HTML for safety\r\n  function escapeHtml(str){ return String(str || '').replace(\/[&<>\"']\/g, function(m){ return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[m]; }); }\r\n\r\n  \/\/ initial render (empty)\r\n  renderAllTables();\r\n\r\n})();\r\n<\/script>\r\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>\u25c0 Back Tickets All Tickets New Assigned Resolved On Hold Deleted New Ticket Ticket ID Subject Customer Name Department Priority Date Created Target SLA Status Assigned To Actions >> Ticket ID Subject Customer Name Department Priority Date Created Target SLA Status Actions Ticket ID Subject Customer Name Department Priority Date Created Assigned Agent Date Assigned [&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-131","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/131","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=131"}],"version-history":[{"count":38,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"predecessor-version":[{"id":1476,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions\/1476"}],"wp:attachment":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}