{"id":450,"date":"2025-03-25T16:39:14","date_gmt":"2025-03-25T16:39:14","guid":{"rendered":"https:\/\/staging.wildlife.gov.my\/?page_id=450"},"modified":"2025-08-04T06:49:17","modified_gmt":"2025-08-04T06:49:17","slug":"lokasi","status":"publish","type":"page","link":"https:\/\/staging.wildlife.gov.my\/en\/lokasi\/","title":{"rendered":"Lokasi"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"450\" class=\"elementor elementor-450\" 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\">Location<\/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-8b18f72 e-flex e-con-boxed e-con e-parent\" data-id=\"8b18f72\" 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-1e9ff36 elementor-widget elementor-widget-html\" data-id=\"1e9ff36\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n\n<!-- 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=\"min-h-screen\">\n<div class=\"mb-4\">\n  <!-- <div class=\"mb-2\">\n    <div>Jenis Carian<\/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 bg-orange-500 text-white\"\n      data-target=\"hq\"\n    >\n      Ibu Pejabat\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      Negeri \/ PTJ \/ Daerah\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=\"\">Sila Pilih Jawatan<\/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\">Kategori Cawangan<\/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=\"\">Sila Pilih Kategori<\/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\">Cawangan<\/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=\"\">Sila Pilih Cawangan<\/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  <\/div>\n  <\/div>\n  <div id=\"alamatHqWrapper\" class=\"w-full mb-2 mt-6\">\n    <div id=\"alamatHqContent\" class=\"flex flex-col gap-1\">\n      <div class=\"flex flex-col md:flex-row gap-10 items-start md:items-center justify-between bg-white\">\n        <!-- Google Map -->\n        <div class=\"w-full md:w-1\/2 aspect-video\">\n          <iframe \n            loading=\"lazy\"\n            src=\"https:\/\/maps.google.com\/maps?q=Ibu%20Pejabat%20Jabatan%20Perhilitan&amp;t=m&amp;z=10&amp;output=embed&amp;iwloc=near\" \n            title=\"Ibu Pejabat Jabatan Perhilitan\"\n            aria-label=\"Ibu Pejabat Jabatan Perhilitan\"\n            class=\"w-full h-full rounded shadow\"\n            allowfullscreen>\n          <\/iframe>\n        <\/div>\n      \n        <!-- Contact Information -->\n        <div class=\"w-full md:w-1\/2 text-black\">\n          <h2 class=\"text-black text-xl md:text-xl font-semibold mb-4\">\n            Jabatan Perlindungan Hidupan Liar dan Taman Negara (PERHILITAN) Semenanjung Malaysia\n          <\/h2>\n          <p class=\"mb-2\">KM10, Jln Cheras, 56100 Kuala Lumpur,<br>Wilayah Persekutuan Kuala Lumpur<\/p>\n          <p class=\"mb-2\">Tel : <a href=\"tel:0390866800\" class=\"text-blue-600 hover:underline\">03-9086 6800<\/a><\/p>\n          <p class=\"mb-2\">Faks : 03-9075 2873<\/p>\n          <p>\n            Emel :\n            <a href=\"mailto:webmaster@wildlife.gov.my\" class=\"text-orange-500 hover:underline\">\n              webmaster[at]wildlife[dot]gov[dot]my\n            <\/a>\n          <\/p>\n        <\/div>\n      <\/div>\n      \n    <\/div>\n  <\/div>\n  \n  <!-- Negeri Address Wrapper (Dynamic, Initially Hidden) -->\n<div id=\"alamatNegeriWrapper\" class=\"w-full mb-2 mt-8 hidden\">\n  <div id=\"alamatNegeriContent\" class=\"flex flex-col gap-1\">\n    <!-- Populated via JavaScript below -->\n  <\/div>\n<\/div>\n  \n\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 alamatHqWrapper = document.getElementById(\"alamatHqWrapper\");\n    const alamatNegeriWrapper = document.getElementById(\"alamatNegeriWrapper\");\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=\"\">Sila Pilih Jawatan<\/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=\"\">Sila Pilih Jawatan<\/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=\"\">Sila Pilih Kategori<\/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=\"\">Sila Pilih Cawangan<\/option>';\n    \/\/         data.data.forEach((dept) => {\n    \/\/           const opt = document.createElement(\"option\");\n    \/\/           opt.value = dept.kodbhg;\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=\"\">Sila Pilih Bahagian<\/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          \/\/ Alamat \n          alamatHqWrapper.classList.remove(\"hidden\")\n          alamatNegeriWrapper.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          \/\/ Alamat \n          alamatHqWrapper.classList.add(\"hidden\")\n          alamatNegeriWrapper.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 = '';\n      const selectedDeptId = \"\"; \/\/ bhg_id\n      const selectedCawanganId = cawanganSelect?.value || \"\"; \/\/ kodneg\n      const selectedCawanganText =\n        cawanganSelect?.options[cawanganSelect.selectedIndex]?.text || \"\";\n\n      fetchAlamat(selectedCawanganId, selectedCawanganText);\n\n      console.log(\"selectedDeptId ===> \", selectedDeptId);\n\n      const rows = document.querySelectorAll(\"tbody tr\");\n\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() || \"\";\n        const email = row.children[3]?.innerText.toLowerCase().trim() || \"\";\n        const negeri = row.children[4]?.innerText.toLowerCase().trim() || \"\";\n\n        const rowOffice =\n          row.getAttribute(\"data-office\")?.toLowerCase().trim() || \"\";\n        const rowId = row.getAttribute(\"data-id\") || \"\";\n\n        const isHQ =\n          rowOffice === \"\" || rowOffice === \"-\" || rowOffice === \"hq\";\n        const matchSection = activeSection === \"hq\" ? isHQ : !isHQ;\n\n        const matchKeyword = [name, position, department, email, negeri].some(\n          (text) => text.includes(keyword)\n        );\n\n        let matchById = true;\n        if (activeSection === \"hq\" && selectedDeptId) {\n          matchById = rowId === selectedDeptId;\n        } else if (activeSection === \"negeri\" && selectedCawanganId) {\n          matchById = rowId === selectedCawanganId;\n        }\n\n        const shouldShow = matchSection && matchKeyword && matchById;\n\n        row.style.display = shouldShow ? \"\" : \"none\";\n      });\n\n      updateClearButtons();\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=\"\">Sila Pilih Cawangan<\/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=\"\">Sila Pilih Cawangan<\/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          console.log(\"check get_child_negeri_list ====> \", data);\n          if (\n            data.success &&\n            Array.isArray(data.data) &&\n            data.data.length > 0\n          ) {\n            cawanganSelect.innerHTML =\n              '<option value=\"\">Sila Pilih Cawangan<\/option>';\n            data.data.forEach((child) => {\n              const opt = document.createElement(\"option\");\n              opt.value = child.kodneg;\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    function fetchAlamat(kod, title) {\n  fetch(ajaxurl + \"?action=get_alamat_by_kodneg&kod=\" + kod)\n    .then((res) => res.json())\n    .then((result) => {\n      const wrapper = document.getElementById(\"alamatNegeriWrapper\");\n      const content = document.getElementById(\"alamatNegeriContent\");\n\n      if (result.success && result.data.length > 0) {\n        const data = result.data[0];\n\n        function isValid(val) {\n  if (typeof val !== \"string\") return false;\n  const cleaned = val.trim().replace(\/^,+|,+$\/g, \"\"); \/\/ remove leading\/trailing commas\n  return cleaned !== \"\" && cleaned.toUpperCase() !== \"NULL\";\n}\n\nfunction clean(val) {\n  return typeof val === \"string\" ? val.trim().replace(\/^,+|,+$\/g, \"\") : \"\";\n}\n\nconst alamatLine = [data.alamat, data.alamat2, data.alamat3]\n  .map(clean)\n  .filter(isValid)\n  .join(\", \");\n\nconst poskodLine = [data.poskod, data.bandar, data.negeri]\n  .map(clean)\n  .filter(isValid)\n  .join(\", \");\n\n        const contactLines = [];\n        if (isValid(data.notel)) {\n          contactLines.push(`Tel : <a href=\"tel:${data.notel}\" class=\"text-blue-600 hover:underline\">${data.notel}<\/a>`);\n        }\n        if (isValid(data.nofax)) {\n          contactLines.push(`Faks : ${data.nofax}`);\n        }\n        if (isValid(data.Emel)) {\n          contactLines.push(\n            `Emel : <a href=\"mailto:${data.Emel}\" class=\"text-orange-500 hover:underline\">${data.Emel}<\/a>`\n          );\n        }\n\n        const mapQuery = encodeURIComponent(title || alamatLine || data.negeri || \"Malaysia\");\n\n        const html = `\n          <div class=\"flex flex-col md:flex-row gap-10 items-start md:items-center justify-between\">\n            <!-- Google Map -->\n            <div class=\"w-full md:w-1\/2 aspect-video\">\n              <iframe \n                loading=\"lazy\"\n                src=\"https:\/\/maps.google.com\/maps?q=${mapQuery}&amp;t=m&amp;z=10&amp;output=embed&amp;iwloc=near\"\n                title=\"${mapQuery}\"\n                aria-label=\"${mapQuery}\"\n                class=\"w-full h-full rounded shadow\"\n                allowfullscreen>\n              <\/iframe>\n            <\/div>\n\n            <!-- Contact Info -->\n            <div class=\"w-full md:w-1\/2 text-black\">\n              <h2 class=\"text-black text-xl md:text-xl font-semibold mb-4\">${title}<\/h2>\n              ${alamatLine ? `<p class=\"mb-2\">${alamatLine}<\/p>` : \"\"}\n              ${poskodLine ? `<p class=\"mb-2\">${poskodLine}<\/p>` : \"\"}\n              ${contactLines.map(line => `<p class=\"mb-2\">${line}<\/p>`).join(\"\")}\n            <\/div>\n          <\/div>\n        `;\n\n        content.innerHTML = html;\n        wrapper.classList.remove(\"hidden\");\n      } else {\n        content.innerHTML = \"\";\n        wrapper.classList.add(\"hidden\");\n      }\n    });\n}\n\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=\"\">Sila Pilih Cawangan<\/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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lokasi Ibu Pejabat Negeri \/ PTJ \/ Daerah Kategori Cawangan Sila Pilih Kategori Clear Cawangan Sila Pilih Cawangan Clear Jabatan Perlindungan Hidupan Liar dan Taman Negara<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":174,"footnotes":""},"class_list":["post-450","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages\/450","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=450"}],"version-history":[{"count":139,"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages\/450\/revisions"}],"predecessor-version":[{"id":13624,"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/pages\/450\/revisions\/13624"}],"wp:attachment":[{"href":"https:\/\/staging.wildlife.gov.my\/en\/wp-json\/wp\/v2\/media?parent=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}