{"id":9217,"date":"2025-07-08T08:10:15","date_gmt":"2025-07-08T08:10:15","guid":{"rendered":"https:\/\/staging.wildlife.gov.my\/?page_id=9217"},"modified":"2026-01-22T20:16:59","modified_gmt":"2026-01-22T12:16:59","slug":"direktori","status":"publish","type":"page","link":"https:\/\/staging.wildlife.gov.my\/en\/direktori\/","title":{"rendered":"Direktori"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9217\" class=\"elementor elementor-9217\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72aaab7 e-flex e-con-boxed e-con e-parent\" data-id=\"72aaab7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d11bcdd e-con-full e-flex e-con e-child\" data-id=\"d11bcdd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4712ca9 elementor-widget elementor-widget-heading\" data-id=\"4712ca9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Directory<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba14243 e-flex e-con-boxed e-con e-parent\" data-id=\"ba14243\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9542332 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"9542332\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d70174 e-flex e-con-boxed e-con e-parent\" data-id=\"4d70174\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc391b elementor-widget elementor-widget-html\" data-id=\"1fc391b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Full-page loading overlay -->\n<div\n  id=\"loadingOverlay\"\n  style=\"\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 9999;\n    background-color: rgba(255, 255, 255, 0.7);\n    backdrop-filter: blur(2px);\n  \"\n>\n  <div\n    style=\"\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    \"\n  >\n    <div class=\"spinner\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .spinner {\n    width: 50px;\n    height: 50px;\n    border: 6px solid #ddd;\n    border-top-color: #e37200; \/* blue *\/\n    border-radius: 50%;\n    animation: spin 0.8s linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n<\/style>\n\n<div class=\"mb-4\">\n  <div class=\"mb-2\">\n    <div>Search Type<\/div>\n  <\/div>\n  <div class=\"staff-filter-buttons flex flex-col md:flex-row\">\n    <button\n      class=\"px-6 py-2 text-sm mb-2 md:mb-0 md:mr-1 rounded-lg staff-filter-btn active\"\n      data-target=\"hq\"\n    >\n      Headquarters\n    <\/button>\n    <button\n      class=\"px-6 py-2 text-sm rounded-lg bg-gray-200 staff-filter-btn md:ml-1\"\n      data-target=\"negeri\"\n    >\n      States \/ PTJ \/ District\n    <\/button>\n  <\/div>\n<\/div>\n\n<div class=\"flex gap-4\">\n  <!-- HQ Jawatan Section -->\n  <!--<div class=\"w-full mb-4\" id=\"hqJawatan\">-->\n  <!--  <div class=\"mb-2\">Jawatan<\/div>-->\n  <!--  <div class=\"flex items-center\">-->\n  <!--    <select id=\"hqJawatanSelect\" class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\">-->\n  <!--      <option value=\"\">Choose Position<\/option>-->\n  <!--    <\/select>-->\n  <!--    <div id=\"clearHqJawatan\" class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\">Clear<\/div>-->\n  <!--  <\/div>-->\n  <!--<\/div>-->\n  <!--<\/div>-->\n\n  <!-- Non HQ Section -->\n\n  <div class=\"w-full hidden\" id=\"nonHqSelections\">\n    <!-- Top row: Kategori Cawangan & Cawangan -->\n    <div class=\"w-full flex flex-col md:flex-row gap-4\">\n      <!-- Kategori Cawangan -->\n      <div class=\"w-full\" id=\"kategoriCawanganWrapper\">\n        <div class=\"mb-2\">Department Category<\/div>\n        <div class=\"flex items-center\">\n          <select\n            id=\"kategoriCawanganSelect\"\n            class=\"w-full bg-transparent border border-slate-200 rounded-md px-3 py-2 text-sm\"\n          >\n            <option value=\"\">Choose Category<\/option>\n          <\/select>\n          <div\n            id=\"clearKategoriCawangan\"\n            class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\"\n          >\n            Clear\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Cawangan -->\n      <div class=\"w-full\" id=\"cawanganWrapper\">\n        <div class=\"mb-2\">Department<\/div>\n        <div class=\"flex items-center\">\n          <select\n            id=\"cawanganSelect\"\n            class=\"w-full bg-transparent border border-slate-200 rounded-md px-3 py-2 text-sm\"\n            disabled\n          >\n            <option value=\"\">Choose Department<\/option>\n          <\/select>\n          <div\n            id=\"clearCawangan\"\n            class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\"\n          >\n            Clear\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Jawatan row (always full width) -->\n    <!--<div class=\"w-full\" id=\"nonHqJawatan\">-->\n    <!--  <div class=\"mb-2\">Jawatan<\/div>-->\n    <!--  <div class=\"flex items-center\">-->\n    <!--    <select-->\n    <!--      id=\"nonHqJawatanSelect\"-->\n    <!--      class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\"-->\n    <!--    >-->\n    <!--      <option value=\"\">Choose Position<\/option>-->\n    <!--    <\/select>-->\n    <!--    <div-->\n    <!--      id=\"clearNonHqJawatan\"-->\n    <!--      class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\"-->\n    <!--    >-->\n    <!--      Clear-->\n    <!--    <\/div>-->\n    <!--  <\/div>-->\n    <!--<\/div>-->\n  <\/div>\n\n  <!-- HQ Section -->\n  <div class=\"w-full flex flex-col md:flex-row gap-4\" id=\"hqSelections\">\n    <!-- Bahagian -->\n    <div class=\"w-full\" id=\"hqDepartments\">\n      <div class=\"mb-2\">Department<\/div>\n      <div class=\"flex items-center\">\n        <select\n          id=\"hqDepartmentSelect\"\n          class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\"\n        >\n          <option value=\"\">Choose Department<\/option>\n        <\/select>\n        <div\n          id=\"clearHq\"\n          class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\"\n        >\n          Clear\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Jawatan -->\n    <!--<div class=\"w-full\" id=\"hqJawatan\">-->\n    <!--  <div class=\"mb-2\">Jawatan<\/div>-->\n    <!--  <div class=\"flex items-center\">-->\n    <!--    <select-->\n    <!--      id=\"hqJawatanSelect\"-->\n    <!--      class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\"-->\n    <!--    >-->\n    <!--      <option value=\"\">Choose Position<\/option>-->\n    <!--    <\/select>-->\n    <!--    <div-->\n    <!--      id=\"clearHqJawatan\"-->\n    <!--      class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\"-->\n    <!--    >-->\n    <!--      Clear-->\n    <!--    <\/div>-->\n    <!--  <\/div>-->\n    <!--<\/div>-->\n  <\/div>\n<\/div>\n\n<!-- HQ Section -->\n<!--<div class=\"w-full\" id=\"hqDepartments\">-->\n<!--  <div class=\"mb-2\">Bahagian<\/div>-->\n<!--  <div class=\"flex items-center\">-->\n<!--    <select id=\"hqDepartmentSelect\" class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\">-->\n<!--      <option value=\"\">Choose Department<\/option>-->\n<!--    <\/select>-->\n<!--    <div id=\"clearHq\" class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\">Clear<\/div>-->\n<!--  <\/div>-->\n<!--<\/div>-->\n\n<!-- Negeri Section -->\n<!--<div class=\"w-full hidden\" id=\"negeriDepartments\">-->\n<!--  <div class=\"mb-2\">Bahagian<\/div>-->\n<!--  <div class=\"flex items-center\">-->\n<!--    <select id=\"negeriDepartmentSelect\" class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\">-->\n<!--      <option value=\"\">Choose Department<\/option>-->\n<!--    <\/select>-->\n<!--    <div id=\"clearNegeri\" class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\">Clear<\/div>-->\n<!--  <\/div>-->\n<!--<\/div>-->\n\n<div class=\"w-full mb-2 mt-4\">\n  <div class=\"mb-2\">Search<\/div>\n  <div class=\"flex items-center\">\n    <input\n      id=\"staffSearchInput\"\n      class=\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\"\n      placeholder=\"Search Name, Position, Department\"\n    \/>\n    <div\n      id=\"clearSearch\"\n      class=\"ml-2 bg-red-500 text-white text-sm px-3 py-2 rounded-md cursor-pointer hidden\"\n    >\n      Clear\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- SCRIPT -->\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    const buttons = document.querySelectorAll(\".staff-filter-btn\");\n    \/\/   const hqContainer = document.getElementById(\"hqDepartments\");\n    \/\/   const negeriContainer = document.getElementById(\"negeriDepartments\");\n    const hqSelect = document.getElementById(\"hqDepartmentSelect\");\n    \/\/   const negeriSelect = document.getElementById(\"negeriDepartmentSelect\");\n    \/\/ const hqJawatanContainer = document.getElementById(\"hqJawatan\");\n    \/\/ const hqJawatanSelect = document.getElementById(\"hqJawatanSelect\");\n    \/\/ const nonHqJawatanContainer = document.getElementById(\"nonHqJawatan\");\n    \/\/ const nonHqJawatanSelect = document.getElementById(\"nonHqJawatanSelect\");\n    const kategoriCawanganSelect = document.getElementById(\n      \"kategoriCawanganSelect\"\n    );\n    const kategoriCawanganWrapper = document.getElementById(\n      \"kategoriCawanganWrapper\"\n    );\n    const cawanganSelect = document.getElementById(\"cawanganSelect\");\n    const cawanganWrapper = document.getElementById(\"cawanganWrapper\");\n    const searchInput = document.getElementById(\"staffSearchInput\");\n\n    const clearHq = document.getElementById(\"clearHq\");\n    const clearNegeri = document.getElementById(\"clearNegeri\");\n    const clearSearch = document.getElementById(\"clearSearch\");\n\n    \/\/ const clearHqJawatan = document.getElementById(\"clearHqJawatan\");\n    \/\/ const clearNonHqJawatan = document.getElementById(\"clearNonHqJawatan\");\n\n    let activeSection = \"hq\";\n\n    function showLoading() {\n      document.getElementById(\"loadingOverlay\").style.display = \"block\";\n    }\n\n    function hideLoading() {\n      document.getElementById(\"loadingOverlay\").style.display = \"none\";\n    }\n\n    function setSelectDisabledStyle(selectEl, isDisabled) {\n      const disabledClasses = [\n        \"bg-gray-100\",\n        \"text-gray-500\",\n        \"cursor-not-allowed\",\n        \"opacity-70\",\n        \"border-gray-300\",\n      ];\n\n      if (isDisabled) {\n        selectEl.disabled = true;\n        selectEl.classList.add(...disabledClasses);\n      } else {\n        selectEl.disabled = false;\n        selectEl.classList.remove(...disabledClasses);\n      }\n    }\n\n    setSelectDisabledStyle(cawanganSelect, true);\n\n    \/\/ function fetchHQJawatanList() {\n    \/\/   return fetch(ajaxurl + \"?action=get_hq_jawatan_list\")\n    \/\/     .then((res) => res.json())\n    \/\/     .then((data) => {\n    \/\/       if (data.success && Array.isArray(data.data)) {\n    \/\/         hqJawatanSelect.innerHTML =\n    \/\/           '<option value=\"\">Choose Position<\/option>';\n    \/\/         data.data.forEach((dept) => {\n    \/\/           const opt = document.createElement(\"option\");\n    \/\/           opt.value = dept.title;\n    \/\/           opt.textContent = dept.title;\n    \/\/           hqJawatanSelect.appendChild(opt);\n    \/\/         });\n    \/\/       }\n    \/\/     });\n    \/\/ }\n\n    \/\/ function fetchNonHQJawatanList() {\n    \/\/   return fetch(ajaxurl + \"?action=get_non_hq_jawatan_list\")\n    \/\/     .then((res) => res.json())\n    \/\/     .then((data) => {\n    \/\/       if (data.success && Array.isArray(data.data)) {\n    \/\/         nonHqJawatanSelect.innerHTML =\n    \/\/           '<option value=\"\">Choose Position<\/option>';\n    \/\/         data.data.forEach((dept) => {\n    \/\/           const opt = document.createElement(\"option\");\n    \/\/           opt.value = dept.title;\n    \/\/           opt.textContent = dept.title;\n    \/\/           nonHqJawatanSelect.appendChild(opt);\n    \/\/         });\n    \/\/       }\n    \/\/     });\n    \/\/ }\n\n    function fetchParentNegeriList() {\n      return fetch(ajaxurl + \"?action=get_parent_negeri_list\")\n        .then((res) => res.json())\n        .then((data) => {\n          console.log(\"Returned fetchParentNegeriList Data:\", data);\n          if (data.success && Array.isArray(data.data)) {\n            kategoriCawanganSelect.innerHTML =\n              '<option value=\"\">Choose Category<\/option>';\n\n            data.data.forEach((item) => {\n              const opt = document.createElement(\"option\");\n              opt.value = item.post_id;\n              opt.textContent = item.title;\n\n              \/\/ Store metadata for later use\n              opt.setAttribute(\"data-is-parent\", item.is_parent); \/\/ \u2190 needed for logic\n              opt.setAttribute(\"data-title\", item.title); \/\/ \u2190 used to assign value if is_parent === '0'\n\n              kategoriCawanganSelect.appendChild(opt);\n            });\n          }\n        });\n    }\n\n    function fetchHQDepartments() {\n      return fetch(ajaxurl + \"?action=get_hq_departments\")\n        .then((res) => res.json())\n        .then((data) => {\n          if (data.success && Array.isArray(data.data)) {\n            hqDepartmentSelect.innerHTML =\n              '<option value=\"\">Choose Department<\/option>';\n            data.data.forEach((dept) => {\n              const opt = document.createElement(\"option\");\n              opt.value = dept.title;\n              opt.textContent = dept.title;\n              hqDepartmentSelect.appendChild(opt);\n            });\n          }\n        });\n    }\n\n    function callHqData() {\n      showLoading();\n      Promise.all([fetchHQDepartments()]).then(() => {\n        hideLoading();\n      });\n    }\n\n    function callNonHqData() {\n      showLoading();\n      Promise.all([fetchParentNegeriList()]).then(() => {\n        hideLoading();\n      });\n    }\n\n    callHqData();\n\n    \/\/ Fetch Negeri Departments\n    \/\/   fetch(ajaxurl + '?action=get_negeri_list')\n    \/\/     .then(res => res.json())\n    \/\/     .then(data => {\n    \/\/       if (data.success && Array.isArray(data.data)) {\n    \/\/         negeriSelect.innerHTML = '<option value=\"\">Choose Department<\/option>';\n    \/\/         data.data.forEach(dept => {\n    \/\/           const opt = document.createElement('option');\n    \/\/           opt.value = dept.title;\n    \/\/           opt.textContent = dept.title;\n    \/\/           negeriSelect.appendChild(opt);\n    \/\/         });\n    \/\/       }\n    \/\/     });\n\n    \/\/ Toggle between HQ and Negeri sections\n    buttons.forEach((btn) => {\n      btn.addEventListener(\"click\", function () {\n        buttons.forEach((b) => {\n          b.classList.remove(\"active\", \"text-white\", \"bg-orange-500\");\n          b.classList.add(\"bg-gray-200\", \"text-black\");\n        });\n\n        this.classList.remove(\"bg-gray-200\", \"text-black\");\n        this.classList.add(\"active\", \"bg-orange-500\", \"text-white\");\n\n        activeSection = this.dataset.target;\n\n        if (activeSection === \"hq\") {\n          \/\/ Jawatan Dropdown\n          \/\/   hqJawatanContainer.classList.remove(\"hidden\");\n          \/\/   nonHqJawatanContainer.classList.add(\"hidden\");\n          \/\/   nonHqJawatanSelect.selectedIndex = 0\n          callHqData();\n          kategoriCawanganSelect.selectedIndex = 0;\n          cawanganSelect.selectedIndex = 0;\n          \/\/ nonHqJawatanSelect.selectedIndex = 0;\n          setSelectDisabledStyle(cawanganSelect, true);\n          cawanganSelect.disabled = true;\n          \/\/ Cawangan Dropdown\n          hqSelections.classList.remove(\"hidden\");\n          nonHqSelections.classList.add(\"hidden\");\n          kategoriCawanganWrapper.classList.add(\"hidden\");\n        } else {\n          callNonHqData();\n          \/\/ Jawatan Dropdown\n          \/\/   nonHqJawatanContainer.classList.remove(\"hidden\");\n          \/\/   hqJawatanContainer.classList.add(\"hidden\");\n          \/\/   hqJawatanSelect.selectedIndex = 0;\n          \/\/ hqJawatanSelect.selectedIndex = 0;\n          hqSelect.selectedIndex = 0;\n          \/\/ Cawangan Dropdown\n          hqSelections.classList.add(\"hidden\");\n          nonHqSelections.classList.remove(\"hidden\");\n          kategoriCawanganWrapper.classList.remove(\"hidden\");\n        }\n\n        searchInput.value = \"\"; \/\/ Clear search on section switch\n        updateClearButtons();\n        filterTable();\n      });\n    });\n\n    \/\/ Filtering logic\n    \/\/   function filterTable() {\n    \/\/   const keyword = searchInput.value.toLowerCase().trim();\n    \/\/   const selectedDept = (activeSection === \"hq\" ? hqSelect.value : negeriSelect.value).toLowerCase();\n\n    \/\/   const rows = document.querySelectorAll(\"tbody tr\");\n    \/\/   rows.forEach((row) => {\n    \/\/     const name = row.children[0]?.innerText.toLowerCase() || \"\";\n    \/\/     const position = row.children[1]?.innerText.toLowerCase() || \"\";\n    \/\/     const department = row.children[2]?.innerText.toLowerCase() || \"\";\n    \/\/     const email = row.children[3]?.innerText.toLowerCase() || \"\"; \/\/ Assuming email is now 4th column\n\n    \/\/     const rowOffice = row.getAttribute(\"data-office\")?.toLowerCase() || \"\";\n    \/\/     const isHQ = rowOffice === \"\" || rowOffice === \"-\";\n    \/\/     const matchSection = activeSection === \"hq\" ? isHQ : !isHQ;\n\n    \/\/     const matchKeyword = [name, position, department, email].some(text => text.includes(keyword));\n    \/\/     const matchDept = !selectedDept || department === selectedDept;\n\n    \/\/     row.style.display = (matchSection && matchKeyword && matchDept) ? \"\" : \"none\";\n    \/\/   });\n\n    \/\/   updateClearButtons();\n    \/\/   paginateTable();\n    \/\/ }\n\n    function filterTable() {\n      const keyword = searchInput.value.toLowerCase().trim();\n      \/\/ const selectedJawatan = (\n      \/\/   activeSection === \"hq\"\n      \/\/     ? hqJawatanSelect.value\n      \/\/     : nonHqJawatanSelect.value\n      \/\/ )\n      \/\/   .toLowerCase()\n      \/\/   .trim();\n      const selectedCawangan =\n        cawanganSelect?.value?.toLowerCase().trim() || \"\";\n      const selectedDept = hqSelect?.value?.toLowerCase().trim() || \"\";\n\n      const rows = document.querySelectorAll(\"tbody tr\");\n      rows.forEach((row) => {\n        const name = row.children[0]?.innerText.toLowerCase().trim() || \"\";\n        const position = row.children[1]?.innerText.toLowerCase().trim() || \"\";\n        const department =\n          row.children[2]?.innerText.toLowerCase().trim() || \"\"; \/\/ Bahagian = Cawangan\n        const email = row.children[3]?.innerText.toLowerCase().trim() || \"\";\n        const negeri = row.children[4]?.innerText.toLowerCase().trim() || \"\"; \/\/ optional\n\n        const rowOffice =\n          row.getAttribute(\"data-office\")?.toLowerCase().trim() || \"\";\n        const isHQ = rowOffice === \"\" || rowOffice === \"-\";\n        const matchSection = activeSection === \"hq\" ? isHQ : !isHQ;\n\n        const matchKeyword = [name, position, department, email, negeri].some(\n          (text) => text.includes(keyword)\n        );\n        \/\/ const matchJawatan = !selectedJawatan || position === selectedJawatan;\n        const matchDept = !selectedDept || department === selectedDept;\n        const matchCawangan =\n          !selectedCawangan || department === selectedCawangan;\n\n        const shouldShow =\n          matchSection && matchKeyword && matchDept && matchCawangan;\n\n        row.style.display = shouldShow ? \"\" : \"none\";\n      });\n\n      updateClearButtons();\n      \/\/ paginateTable();\n    }\n\n    \/\/ Show\/hide clear buttons\n    \/\/   function updateClearButtons() {\n    \/\/     clearHq.classList.toggle(\"hidden\", hqSelect.value === \"\");\n    \/\/     clearNegeri.classList.toggle(\"hidden\", negeriSelect.value === \"\");\n    \/\/     clearSearch.classList.toggle(\"hidden\", searchInput.value.trim() === \"\");\n    \/\/   }\n\n    \/\/ Update clear buttons\n    function updateClearButtons() {\n      \/\/ clearHqJawatan.classList.toggle(\"hidden\", hqJawatanSelect.value === \"\");\n      \/\/ clearNonHqJawatan.classList.toggle(\n      \/\/   \"hidden\",\n      \/\/   nonHqJawatanSelect.value === \"\"\n      \/\/ );\n      clearKategoriCawangan.classList.toggle(\n        \"hidden\",\n        kategoriCawanganSelect.value === \"\"\n      );\n      clearCawangan.classList.toggle(\"hidden\", cawanganSelect.value === \"\");\n      clearSearch.classList.toggle(\"hidden\", searchInput.value.trim() === \"\");\n    }\n\n    \/\/ Attach event listeners\n    hqSelect.addEventListener(\"change\", () => {\n      filterTable();\n      updateClearButtons();\n    });\n\n    \/\/   negeriSelect.addEventListener(\"change\", () => {\n    \/\/     filterTable();\n    \/\/     updateClearButtons();\n    \/\/   });\n\n    \/\/   searchInput.addEventListener(\"input\", () => {\n    \/\/     filterTable();\n    \/\/     updateClearButtons();\n    \/\/   });\n\n    \/\/   clearHq.addEventListener(\"click\", () => {\n    \/\/     hqSelect.selectedIndex = 0;\n    \/\/     updateClearButtons();\n    \/\/     filterTable();\n    \/\/   });\n\n    \/\/   clearNegeri.addEventListener(\"click\", () => {\n    \/\/     negeriSelect.selectedIndex = 0;\n    \/\/     updateClearButtons();\n    \/\/     filterTable();\n    \/\/   });\n\n    \/\/   clearSearch.addEventListener(\"click\", () => {\n    \/\/     searchInput.value = \"\";\n    \/\/     updateClearButtons();\n    \/\/     filterTable();\n    \/\/   });\n\n    kategoriCawanganSelect.addEventListener(\"change\", function () {\n      const selected = this.value;\n      const selectedOption = this.options[this.selectedIndex];\n      const isParent = selectedOption.getAttribute(\"data-is-parent\") === \"true\";\n\n      console.log(\n        \"check selected, selectedoption, isparent ===> \",\n        selected,\n        selectedOption,\n        isParent\n      );\n\n      if (!selected) {\n        cawanganSelect.disabled = true;\n        cawanganSelect.innerHTML =\n          '<option value=\"\">Choose Department<\/option>';\n        filterTable();\n        updateClearButtons();\n        return;\n      }\n\n      if (!isParent) {\n        \/\/ Not a pte\" arent, so skip child fetch and treat this as final filter\n        cawanganWrapper.classList.add(\"hidden\");\n        setSelectDisabledStyle(cawanganSelect, true);\n        cawanganSelect.disabled = true;\n        cawanganSelect.innerHTML =\n          '<option value=\"\">Choose Department<\/option>';\n\n        \/\/ Manually set the value in cawanganSelect for filtering (if needed)\n        const singleOption = document.createElement(\"option\");\n        singleOption.value = selectedOption.getAttribute(\"data-title\");\n        singleOption.textContent = selectedOption.getAttribute(\"data-title\");\n        cawanganSelect.appendChild(singleOption);\n        cawanganSelect.value = selectedOption.getAttribute(\"data-title\");\n\n        filterTable();\n        updateClearButtons();\n        return;\n      }\n\n      \/\/ If is_parent === \"1\", fetch child options\n      cawanganWrapper.classList.remove(\"hidden\");\n      setSelectDisabledStyle(cawanganSelect, false);\n      cawanganSelect.disabled = false;\n      showLoading();\n\n      fetch(ajaxurl + \"?action=get_child_negeri_list&parent_id=\" + selected)\n        .then((res) => res.json())\n        .then((data) => {\n          hideLoading();\n\n          if (\n            data.success &&\n            Array.isArray(data.data) &&\n            data.data.length > 0\n          ) {\n            cawanganSelect.innerHTML =\n              '<option value=\"\">Choose Department<\/option>';\n            data.data.forEach((child) => {\n              const opt = document.createElement(\"option\");\n              opt.value = child.title;\n              opt.textContent = child.title;\n              cawanganSelect.appendChild(opt);\n            });\n          } else {\n            cawanganSelect.innerHTML =\n              '<option value=\"\">Tiada Cawangan<\/option>';\n          }\n\n          filterTable();\n          updateClearButtons();\n        });\n    });\n\n    cawanganSelect.addEventListener(\"change\", () => {\n      filterTable();\n      updateClearButtons();\n    });\n\n    \/\/ hqJawatanSelect.addEventListener(\"change\", () => {\n    \/\/   filterTable();\n    \/\/   updateClearButtons();\n    \/\/ });\n\n    \/\/ nonHqJawatanSelect.addEventListener(\"change\", () => {\n    \/\/   filterTable();\n    \/\/   updateClearButtons();\n    \/\/ });\n\n    searchInput.addEventListener(\"input\", () => {\n      filterTable();\n      updateClearButtons();\n    });\n\n    \/\/ clearHqJawatan.addEventListener(\"click\", () => {\n    \/\/   hqJawatanSelect.selectedIndex = 0;\n    \/\/   updateClearButtons();\n    \/\/   filterTable();\n    \/\/ });\n\n    \/\/ clearNonHqJawatan.addEventListener(\"click\", () => {\n    \/\/   nonHqJawatanSelect.selectedIndex = 0;\n    \/\/   updateClearButtons();\n    \/\/   filterTable();\n    \/\/ });\n\n    clearKategoriCawangan.addEventListener(\"click\", () => {\n      kategoriCawanganSelect.selectedIndex = 0;\n      cawanganWrapper.classList.remove(\"hidden\");\n      cawanganSelect.selectedIndex = 0;\n      setSelectDisabledStyle(cawanganSelect, true);\n      cawanganSelect.disabled = true;\n      \/\/ cawanganSelect.innerHTML = '<option value=\"\">Choose Department<\/option>';\n      \/\/ cawanganWrapper.classList.add(\"hidden\");\n      updateClearButtons();\n      filterTable();\n    });\n\n    clearCawangan.addEventListener(\"click\", () => {\n      cawanganSelect.selectedIndex = 0;\n      updateClearButtons();\n      filterTable();\n    });\n\n    clearSearch.addEventListener(\"click\", () => {\n      searchInput.value = \"\";\n      updateClearButtons();\n      filterTable();\n    });\n  });\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0bc8158 e-flex e-con-boxed e-con e-parent\" data-id=\"0bc8158\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0cfe0dc elementor-widget elementor-widget-shortcode\" data-id=\"0cfe0dc\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">[staff_directory_en]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\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>Direktori Jenis Carian Ibu Pejabat Negeri \/ PTJ \/ Daerah Kategori Cawangan Sila Pilih Kategori \u2715 Cawangan Sila Pilih Cawangan \u2715 Cawangan Sila Pilih Cawangan \u2715<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"iawp_total_views":3476,"footnotes":""},"class_list":["post-9217","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages\/9217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/comments?post=9217"}],"version-history":[{"count":938,"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages\/9217\/revisions"}],"predecessor-version":[{"id":14937,"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages\/9217\/revisions\/14937"}],"wp:attachment":[{"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/media?parent=9217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}