{
    "page_content": "{{-- ============================================================================\r\n     PAGE CONTENT — Direktori Pegawai (Officer Directory)\r\n     Site  : nres  ·  Page slug: officer-directory  ·  Page ID: 28\r\n     Sumber: modul content-directory\r\n             · content_directory_departments → bahagian \/ unit (hierarki)\r\n             · content_directory_staff       → pegawai\r\n     Konsep: https:\/\/www.nres.gov.my\/ms-my\/hubungikami\/Pages\/Direktori-Pegawai.aspx\r\n             (senarai pegawai mengikut bahagian\/unit + carian + nota)\r\n\r\n     Parameter URL:\r\n       q      carian nama \/ jawatan \/ e-mel \/ telefon\r\n       dept   id bahagian — termasuk SEMUA sub-bahagian di bawahnya\r\n\r\n     Nota:\r\n     · SEMUA logik + markup + CSS ada dalam fail ini — tiada komponen, tiada partial.\r\n     · Hanya pegawai aktif (directory_staff_status = 1) dipaparkan.\r\n     · Nama bahagian ikut bahasa semasa ($lang): 'en' guna directory_department_name_en.\r\n     · Warna guna CSS variable tema (--teal\/--green\/--fade\/--line\/--ink) → sokong dark mode.\r\n     ============================================================================ --}}\r\n\r\n@php\r\n    \/* --------------------------------------------------------------------\r\n     | 1. Parameter & konteks\r\n     -------------------------------------------------------------------- *\/\r\n    $dirUrl      = url()->current();                                  \/\/ URL halaman (tanpa query)\r\n    $dirQuery    = request()->query();\r\n    $dirQ        = trim((string) ($dirQuery['q'] ?? ''));\r\n    $dirDept     = (int) ($dirQuery['dept'] ?? 0);\r\n    $dirLang     = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';\r\n    $dirFiltered = $dirQ !== '' || $dirDept > 0;\r\n    $dirAduanUrl = url(($siteSlug ?? request()->segment(1)).'\/complaints-feedback');\r\n\r\n    \/\/ Nama bahagian ikut bahasa semasa (EN fallback ke BM bila kosong)\r\n    $dirName = function ($d) use ($dirLang) {\r\n        $ms = (string) ($d->directory_department_name ?? '');\r\n        $en = (string) ($d->directory_department_name_en ?? '');\r\n\r\n        return ($dirLang === 'en' && $en !== '') ? $en : $ms;\r\n    };\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 2. Bahagian \/ unit — hierarki\r\n     |    $dirByParent : parent_id => Collection anak (0 = akar)\r\n     |    $dirOrdered  : susunan DFS [ ['dept'=>obj,'level'=>n,'id'=>int] ]\r\n     |    $dirPath     : id => [rootName, ..., selfName]  (rantai penuh)\r\n     -------------------------------------------------------------------- *\/\r\n    $dirDepartments = DB::table('content_directory_departments')\r\n        ->orderBy('directory_department_sort')\r\n        ->orderBy('directory_department_name')\r\n        ->get();\r\n\r\n    $dirByParent = $dirDepartments->groupBy(fn ($d) => (int) ($d->directory_department_parent_id ?? 0));\r\n\r\n    $dirOrdered   = [];\r\n    $dirPath      = [];\r\n    $dirOrderedId = [];\r\n\r\n    $dirWalk = function (int $parentId, int $level, array $trail) use (\r\n        &$dirWalk, &$dirOrdered, &$dirPath, &$dirOrderedId, $dirByParent, $dirName\r\n    ) {\r\n        foreach ($dirByParent[$parentId] ?? [] as $d) {\r\n            $id              = (int) $d->directory_department_id;\r\n            $childTrail      = $trail;              \/\/ salinan — JANGAN kongsi antara adik-beradik\r\n            $childTrail[$id] = $dirName($d);\r\n\r\n            $dirOrdered[]   = ['dept' => $d, 'level' => $level, 'id' => $id];\r\n            $dirPath[$id]   = $childTrail;\r\n            $dirOrderedId[] = $id;\r\n\r\n            $dirWalk($id, $level + 1, $childTrail);\r\n        }\r\n    };\r\n\r\n    $dirWalk(0, 0, []);\r\n\r\n    \/\/ Kes tepi: bahagian yang parent-nya hilang (data orphan) — tetap dipaparkan\r\n    foreach ($dirByParent as $dirParentKey => $dirChildren) {\r\n        if ((int) $dirParentKey !== 0 && ! isset($dirPath[(int) $dirParentKey])) {\r\n            $dirWalk((int) $dirParentKey, 0, []);\r\n        }\r\n    }\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 3. Filter bahagian → id terpilih + semua keturunannya\r\n     -------------------------------------------------------------------- *\/\r\n    $dirDeptIds = [];\r\n\r\n    if ($dirDept > 0) {\r\n        $dirDeptIds[] = $dirDept;\r\n        $dirStack     = [$dirDept];\r\n\r\n        while ($dirStack) {\r\n            $dirCursor = array_pop($dirStack);\r\n\r\n            foreach ($dirByParent[$dirCursor] ?? [] as $dirChild) {\r\n                $dirChildId   = (int) $dirChild->directory_department_id;\r\n                $dirDeptIds[] = $dirChildId;\r\n                $dirStack[]   = $dirChildId;\r\n            }\r\n        }\r\n    }\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 4. Pegawai (aktif sahaja) + kumpulan ikut bahagian\r\n     -------------------------------------------------------------------- *\/\r\n    $dirStaffQuery = DB::table('content_directory_staff as s')\r\n        ->where('s.directory_staff_status', 1)\r\n        ->select('s.*');\r\n\r\n    if ($dirDeptIds) {\r\n        $dirStaffQuery->whereIn('s.directory_staff_department_id', $dirDeptIds);\r\n    }\r\n\r\n    if ($dirQ !== '') {\r\n        $dirLike = '%'.$dirQ.'%';\r\n\r\n        $dirStaffQuery->where(function ($w) use ($dirLike) {\r\n            $w->where('s.directory_staff_name', 'like', $dirLike)\r\n                ->orWhere('s.directory_staff_position', 'like', $dirLike)\r\n                ->orWhere('s.directory_staff_email', 'like', $dirLike)\r\n                ->orWhere('s.directory_staff_phone', 'like', $dirLike);\r\n        });\r\n    }\r\n\r\n    $dirStaff = $dirStaffQuery\r\n        ->orderBy('s.directory_staff_sort')\r\n        ->orderBy('s.directory_staff_name')\r\n        ->get();\r\n\r\n    $dirByDept = $dirStaff->groupBy(fn ($s) => (int) $s->directory_staff_department_id);\r\n\r\n    \/\/ Susun kumpulan ikut hierarki bahagian (bukan ikut abjad)\r\n    $dirGroups = [];\r\n\r\n    foreach ($dirOrdered as $dirRow) {\r\n        if (! isset($dirByDept[$dirRow['id']])) {\r\n            continue;\r\n        }\r\n\r\n        $dirGroups[] = [\r\n            'name'  => $dirName($dirRow['dept']),\r\n            'code'  => (string) ($dirRow['dept']->directory_department_code ?? ''),\r\n            'path'  => $dirPath[$dirRow['id']] ?? [],\r\n            'staff' => $dirByDept[$dirRow['id']],\r\n        ];\r\n    }\r\n\r\n    \/\/ Kes tepi: pegawai yang bahagiannya tidak dikenali\r\n    foreach ($dirByDept as $dirDeptKey => $dirDeptStaff) {\r\n        if (! in_array((int) $dirDeptKey, $dirOrderedId, true)) {\r\n            $dirGroups[] = [\r\n                'name'  => 'Bahagian tidak dikenali',\r\n                'code'  => '',\r\n                'path'  => [],\r\n                'staff' => $dirDeptStaff,\r\n            ];\r\n        }\r\n    }\r\n\r\n    \/\/ Senarai rata untuk jadual (susunan hierarki bahagian) — dipakai oleh tab \"Direktori Pegawai\"\r\n    \/\/ Nama $dirStaffRows (BUKAN $dirRows) — $dirRows sudah dipakai oleh seksyen gambaran bahagian.\r\n    $dirStaffRows = [];\r\n\r\n    foreach ($dirGroups as $dirGroup) {\r\n        foreach ($dirGroup['staff'] as $dirStaffRow) {\r\n            $dirStaffRows[] = $dirStaffRow;\r\n        }\r\n    }\r\n\r\n    $dirTotal    = $dirStaff->count();                                                                 \/\/ sepadan carian\r\n    $dirTotalAll = DB::table('content_directory_staff')->where('directory_staff_status', 1)->count();  \/\/ jumlah keseluruhan\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 5. Gambaran bahagian & unit (dikumpul ikut bahagian akar)\r\n     |    + kiraan pegawai aktif (sendiri + keturunan) untuk setiap bahagian\r\n     -------------------------------------------------------------------- *\/\r\n    $dirDeptDirect = [];\r\n\r\n    foreach (DB::table('content_directory_staff')\r\n        ->where('directory_staff_status', 1)\r\n        ->selectRaw('directory_staff_department_id, COUNT(*) as total')\r\n        ->groupBy('directory_staff_department_id')\r\n        ->get() as $dirCountRow) {\r\n        $dirDeptDirect[(int) $dirCountRow->directory_staff_department_id] = (int) $dirCountRow->total;\r\n    }\r\n\r\n    \/\/ Kiraan kumulatif: susunan DFS terbalik → anak diproses sebelum ibu bapa\r\n    $dirDeptTotal = $dirDeptDirect;\r\n\r\n    foreach (array_reverse($dirOrdered) as $dirCountRow) {\r\n        $dirCountParent = (int) ($dirCountRow['dept']->directory_department_parent_id ?? 0);\r\n\r\n        if ($dirCountParent) {\r\n            $dirDeptTotal[$dirCountParent] = ($dirDeptTotal[$dirCountParent] ?? 0) + ($dirDeptTotal[$dirCountRow['id']] ?? 0);\r\n        }\r\n    }\r\n\r\n    $dirOrg = [];\r\n\r\n    foreach ($dirByParent[0] ?? [] as $dirRoot) {\r\n        $dirRootId  = (int) $dirRoot->directory_department_id;\r\n        $dirOrgRows = [];\r\n\r\n        foreach ($dirOrdered as $dirRow) {\r\n            if ($dirRow['id'] === $dirRootId) {\r\n                continue;   \/\/ nama akar sudah jadi tajuk kad\r\n            }\r\n\r\n            if ((int) array_key_first($dirPath[$dirRow['id']] ?? []) === $dirRootId) {\r\n                $dirOrgRows[] = [\r\n                    'id'    => $dirRow['id'],\r\n                    'name'  => $dirName($dirRow['dept']),\r\n                    'code'  => (string) ($dirRow['dept']->directory_department_code ?? ''),\r\n                    'level' => max(1, (int) $dirRow['level']),\r\n                    'count' => (int) ($dirDeptTotal[$dirRow['id']] ?? 0),\r\n                ];\r\n            }\r\n        }\r\n\r\n        $dirOrg[] = [\r\n            'name'  => $dirName($dirRoot),\r\n            'code'  => (string) ($dirRoot->directory_department_code ?? ''),\r\n            'count' => (int) ($dirDeptTotal[$dirRootId] ?? 0),\r\n            'rows'  => $dirOrgRows,\r\n        ];\r\n    }\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 6. Helper paparan\r\n     -------------------------------------------------------------------- *\/\r\n    \/\/ Inisial nama → avatar bila tiada foto (cth. \"Ahmad Faizal\" → \"AF\")\r\n    $dirInitials = function ($name) {\r\n        $name  = trim((string) $name);\r\n        $parts = $name === '' ? [] : preg_split('\/\\s+\/', $name);\r\n\r\n        if (! $parts) {\r\n            return '?';\r\n        }\r\n\r\n        $first = mb_substr($parts[0], 0, 1);\r\n        $last  = count($parts) > 1 ? mb_substr($parts[count($parts) - 1], 0, 1) : '';\r\n\r\n        return mb_strtoupper($first.$last);\r\n    };\r\n\r\n    \/\/ Nombor telefon dipaparkan sebagai TEKS BIASA sahaja (tiada pautan tel:)\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 7. Peta bahagian (untuk lajur \"Bahagian \/ Unit\" dalam jadual)\r\n     -------------------------------------------------------------------- *\/\r\n    $dirDeptLabel = [];\r\n    $dirDeptCode  = [];\r\n\r\n    foreach ($dirDepartments as $dirDeptRow) {\r\n        $dirDeptId                  = (int) $dirDeptRow->directory_department_id;\r\n        $dirDeptLabel[$dirDeptId]   = $dirName($dirDeptRow);\r\n        $dirDeptCode[$dirDeptId]    = (string) ($dirDeptRow->directory_department_code ?? '');\r\n    }\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 8. E-mel — konsep \"Emel [@nres.gov.my]\"\r\n     |    Domain dikeluarkan ke TAJUK LAJUR; sel papar nama pengguna sahaja.\r\n     |    Mod: 'local' → nurul.aisyah        (lalai — domain pada tajuk lajur)\r\n     |         'mask'  → nur•••@nres.gov.my\r\n     |         'label' → \"E-mel\"             (pautan sahaja)\r\n     |         'full'  → alamat penuh         (tidak disyorkan)\r\n     -------------------------------------------------------------------- *\/\r\n    $dirEmailMode = 'local';\r\n\r\n    \/\/ Domain paling kerap dalam direktori → dipaparkan pada tajuk lajur\r\n    $dirDomainCount = [];\r\n\r\n    foreach (DB::table('content_directory_staff')->where('directory_staff_status', 1)->pluck('directory_staff_email') as $dirEmailValue) {\r\n        $dirEmailValue = trim((string) $dirEmailValue);\r\n        $dirAtPos      = strrpos($dirEmailValue, '@');\r\n\r\n        if ($dirAtPos === false) {\r\n            continue;\r\n        }\r\n\r\n        $dirDomain = strtolower(trim(substr($dirEmailValue, $dirAtPos + 1)));\r\n\r\n        if ($dirDomain !== '') {\r\n            $dirDomainCount[$dirDomain] = ($dirDomainCount[$dirDomain] ?? 0) + 1;\r\n        }\r\n    }\r\n\r\n    $dirEmailDomain = '';\r\n\r\n    if ($dirDomainCount) {\r\n        arsort($dirDomainCount);\r\n        $dirEmailDomain = (string) array_key_first($dirDomainCount);\r\n    }\r\n\r\n    $dirEmailDomainLabel = $dirEmailDomain !== '' ? '@'.$dirEmailDomain : '';\r\n\r\n    $dirEmailText = function ($email) use ($dirEmailMode, $dirEmailDomain) {\r\n        $email = trim((string) $email);\r\n\r\n        if ($email === '') {\r\n            return '';\r\n        }\r\n\r\n        if ($dirEmailMode === 'label') {\r\n            return 'E-mel';\r\n        }\r\n\r\n        if ($dirEmailMode === 'full') {\r\n            return $email;\r\n        }\r\n\r\n        $parts = explode('@', $email, 2);\r\n\r\n        if (count($parts) < 2) {\r\n            return $dirEmailMode === 'mask' ? '•••' : $email;\r\n        }\r\n\r\n        $local  = (string) $parts[0];\r\n        $domain = strtolower((string) $parts[1]);\r\n\r\n        if ($dirEmailMode === 'mask') {\r\n            return mb_substr($local, 0, min(3, mb_strlen($local))).'•••@'.$domain;\r\n        }\r\n\r\n        \/\/ 'local' — papar nama pengguna sahaja; domain berbeza → papar alamat penuh\r\n        if ($dirEmailDomain !== '' && $domain !== $dirEmailDomain) {\r\n            return $email;\r\n        }\r\n\r\n        return $local;\r\n    };\r\n\r\n    \/* --------------------------------------------------------------------\r\n     | 9. Tab: Direktori Pegawai | Pegawai Perhubungan Awam | Bahagian & Unit\r\n     |    (konsep tab seperti laman NRES Direktori Pegawai)\r\n     -------------------------------------------------------------------- *\/\r\n    $dirTab = (string) ($dirQuery['tab'] ?? 'pegawai');\r\n\r\n    if (! in_array($dirTab, ['pegawai', 'perhubungan', 'bahagian'], true)) {\r\n        $dirTab = 'pegawai';\r\n    }\r\n\r\n    $dirTabs = [\r\n        'pegawai'     => t('Direktori Pegawai'),\r\n        'perhubungan' => t('od.tab_pr'),\r\n        'bahagian'    => t('od.tab_dept'),\r\n    ];\r\n\r\n    $dirTabUrl  = fn (string $key) => url()->current().'?tab='.$key;\r\n    $dirDeptUrl = fn (int $deptId) => url()->current().'?tab=pegawai&dept='.$deptId;\r\n\r\n    \/\/ Unit \"Perhubungan Awam\" — padanan kod bahagian atau nama (Unit Komunikasi Korporat)\r\n    $dirPrCodes   = ['UKK'];\r\n    $dirPrDeptIds = [];\r\n\r\n    foreach ($dirDepartments as $dirDeptRow) {\r\n        $dirRowCode = strtoupper((string) ($dirDeptRow->directory_department_code ?? ''));\r\n        $dirRowName = mb_strtolower((string) ($dirDeptRow->directory_department_name ?? ''));\r\n\r\n        if (in_array($dirRowCode, $dirPrCodes, true)\r\n            || str_contains($dirRowName, 'komunikasi korporat')\r\n            || str_contains($dirRowName, 'perhubungan awam')) {\r\n            $dirPrDeptIds[] = (int) $dirDeptRow->directory_department_id;\r\n        }\r\n    }\r\n\r\n    $dirPrStaff = DB::table('content_directory_staff')\r\n        ->where('directory_staff_status', 1)\r\n        ->whereIn('directory_staff_department_id', $dirPrDeptIds ?: [0])\r\n        ->orderBy('directory_staff_sort')\r\n        ->orderBy('directory_staff_name')\r\n        ->get();\r\n@endphp\r\n\r\n<style>\r\n\/* ==========================================================================\r\n   DIREKTORI PEGAWAI — gaya skop .directory (warna ikut tema, sokong dark mode)\r\n   ========================================================================== *\/\r\n.directory{padding:34px 0 64px;color:var(--ink);font-family:\"Inter\",\"Segoe UI\",system-ui,-apple-system,Roboto,Arial,sans-serif}\r\n.directory *,.directory *::before,.directory *::after{box-sizing:border-box}\r\n.directory__container{width:min(100% - 32px,1120px);margin:0 auto}\r\n\r\n\/* --- breadcrumb ---------------------------------------------------------- *\/\r\n.directory__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;color:var(--bs-secondary-color);font-size:.85rem}\r\n.directory__breadcrumb a{color:var(--teal);font-weight:600;text-decoration:none}\r\n.directory__breadcrumb a:hover{text-decoration:underline}\r\n\r\n\/* --- tajuk --------------------------------------------------------------- *\/\r\n.directory__header{margin-bottom:22px}\r\n.directory__eyebrow{display:inline-block;margin-bottom:8px;padding:4px 12px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}\r\n.directory__header h1{margin:0 0 8px;color:var(--green);font-size:clamp(1.45rem,3vw,2.05rem);font-weight:800;line-height:1.2}\r\n.directory__header p{margin:0;max-width:72ch;color:var(--bs-secondary-color);font-size:.95rem;line-height:1.65}\r\n\r\n\/* --- bar carian ---------------------------------------------------------- *\/\r\n.directory__filter{display:grid;grid-template-columns:1.5fr 1fr auto;gap:12px;align-items:end;margin-bottom:18px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);box-shadow:0 6px 22px rgba(17,128,143,.07)}\r\n.directory__field{display:flex;flex-direction:column;gap:6px;min-width:0}\r\n.directory__field label{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bs-secondary-color)}\r\n.directory__input,.directory__select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bs-body-bg);color:var(--ink);font:inherit;font-size:.88rem;outline:none;transition:.15s}\r\n.directory__select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%2311808f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;cursor:pointer}\r\n.directory__input::placeholder{color:var(--bs-secondary-color);opacity:.75}\r\n.directory__input:focus,.directory__select:focus{border-color:var(--teal);box-shadow:0 0 0 .18rem rgba(17,128,143,.15)}\r\n.directory__actions{display:flex;gap:8px;align-items:center}\r\n.directory__btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bs-body-bg);color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:.15s}\r\n.directory__btn:hover{border-color:var(--teal);color:var(--teal)}\r\n.directory__btn--primary{border-color:var(--teal);background:var(--teal);color:#fff}\r\n.directory__btn--primary:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff}\r\n\r\n\/* --- ringkasan ----------------------------------------------------------- *\/\r\n.directory__summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;color:var(--bs-secondary-color);font-size:.85rem}\r\n.directory__summary strong{color:var(--ink)}\r\n.directory__chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.73rem;font-weight:700}\r\n.directory__chip svg{width:12px;height:12px}\r\n\r\n\/* --- tab ----------------------------------------------------------------- *\/\r\n.directory__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding-bottom:14px;border-bottom:2px solid var(--line)}\r\n.directory__tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bs-body-bg);color:var(--ink);font-size:.82rem;font-weight:700;text-decoration:none;transition:.18s}\r\n.directory__tab:hover{border-color:var(--teal);color:var(--teal)}\r\n.directory__tab.is-active{border-color:var(--teal);background:var(--teal);color:#fff}\r\n.directory__tab-count{padding:1px 8px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.68rem;font-weight:800}\r\n.directory__tab.is-active .directory__tab-count{background:rgba(255,255,255,.25);color:#fff}\r\n\r\n\/* --- jadual pegawai ------------------------------------------------------ *\/\r\n.directory__hint{display:none;margin:0 0 8px;color:var(--bs-secondary-color);font-size:.74rem;font-weight:600}\r\n.directory__table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg)}\r\n.directory__table{width:100%;min-width:880px;border-collapse:collapse;font-size:.84rem}\r\n.directory__table thead th{padding:11px 14px;background:var(--fade);color:var(--teal);border-bottom:1px solid var(--line);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-align:left;text-transform:uppercase;white-space:nowrap}\r\n.directory__th-note{display:inline-block;margin-left:5px;color:var(--teal);font-size:.68rem;font-weight:700;letter-spacing:0;text-transform:none;opacity:.85}\r\n.directory__table tbody td{padding:11px 14px;border-top:1px solid var(--line);color:var(--ink);vertical-align:middle}\r\n.directory__table tbody tr:hover td{background:rgba(17,128,143,.05)}\r\n.directory__table tbody tr.directory__empty-row td{padding:28px 14px;text-align:center;color:var(--bs-secondary-color);font-size:.85rem}\r\n.directory__num{width:54px;text-align:center;color:var(--bs-secondary-color);font-size:.78rem;font-weight:700}\r\n.directory__who{display:flex;align-items:center;gap:10px;min-width:0}\r\n.directory__who-name{font-weight:700;line-height:1.35}\r\n.directory__avatar{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--fade);color:var(--teal);font-size:.72rem;font-weight:800;letter-spacing:.02em}\r\n.directory__avatar img{display:block;width:100%;height:100%;object-fit:cover}\r\n.directory__dept{color:var(--bs-secondary-color);font-size:.8rem;line-height:1.45}\r\n.directory__email{font-weight:600;color:var(--ink)}\r\n.directory__phone{color:var(--ink)}\r\n.directory__dept-code{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;background:var(--fade);color:var(--teal);font-size:.66rem;font-weight:800;letter-spacing:.02em}\r\n.directory__nowrap{white-space:nowrap}\r\n.directory__link{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:600;text-decoration:none}\r\n.directory__link:hover{text-decoration:underline}\r\n.directory__link svg{flex:none;width:13px;height:13px}\r\n.directory__muted{color:var(--bs-secondary-color)}\r\n\r\n\/* --- gambaran bahagian & unit -------------------------------------------- *\/\r\n.directory__org-grid{columns:270px;column-gap:12px;padding:0}\r\n.directory__org-card{break-inside:avoid;page-break-inside:avoid;margin-bottom:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--fade)}\r\n.directory__org-card h3{margin:0 0 9px;color:var(--green);font-size:.83rem;font-weight:800;line-height:1.35}\r\n.directory__org-count{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:rgba(17,128,143,.14);color:var(--teal);font-size:.64rem;font-weight:800;vertical-align:middle}\r\n.directory__org-item a{color:var(--ink);text-decoration:none}\r\n.directory__org-item a:hover{color:var(--teal);text-decoration:underline}\r\n.directory__org-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}\r\n\/* display:block (bukan flex) supaya teks panjang mengalir semula jadi dan\r\n   tanda sempang tidak melompat ke baris sendiri bila nama unit panjang. *\/\r\n.directory__org-item{position:relative;padding-left:calc((var(--depth,1) - 1) * 12px + 14px);color:var(--ink);font-size:.78rem;line-height:1.5}\r\n.directory__org-item::before{content:\"\\2013\";position:absolute;left:calc((var(--depth,1) - 1) * 12px);color:var(--teal);opacity:.65}\r\n.directory__org-code{display:inline-block;margin-left:6px;padding:0 5px;border-radius:5px;background:rgba(17,128,143,.12);color:var(--teal);font-size:.65rem;font-weight:700;letter-spacing:.02em;vertical-align:middle}\r\n.directory__org-none{margin:0;color:var(--bs-secondary-color);font-size:.78rem}\r\n\r\n\/* --- nota ---------------------------------------------------------------- *\/\r\n.directory__note{margin-top:24px;padding:16px 20px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;background:var(--bs-body-bg)}\r\n.directory__note h2{margin:0 0 8px;color:var(--green);font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}\r\n.directory__note ol{margin:0;padding-left:20px;color:var(--bs-secondary-color);font-size:.79rem;line-height:1.7}\r\n.directory__note li{margin-bottom:4px}\r\n.directory__note li:last-child{margin-bottom:0}\r\n.directory__note p{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--bs-secondary-color);font-size:.79rem;line-height:1.6}\r\n.directory__note a{color:var(--teal);font-weight:700;text-decoration:none}\r\n.directory__note a:hover{text-decoration:underline}\r\n\r\n\/* --- responsif ----------------------------------------------------------- *\/\r\n@media (max-width:900px){\r\n    .directory__filter{grid-template-columns:1fr 1fr}\r\n    .directory__actions{grid-column:1\/-1}\r\n    .directory__hint{display:block}\r\n}\r\n@media (max-width:640px){\r\n    .directory{padding:24px 0 46px}\r\n    .directory__filter{grid-template-columns:1fr;padding:14px}\r\n}\r\n<\/style>\r\n\r\n<section class=\"directory\" aria-labelledby=\"directory-title\">\r\n    <div class=\"directory__container\">\r\n\r\n        {{-- ---------- BREADCRUMB ---------- --}}\r\n        <nav class=\"directory__breadcrumb\" aria-label=\"Breadcrumb\">\r\n            <a href=\"{{ url($siteSlug.'\/home') }}\">{{ t('Utama') }}<\/a>\r\n            <span aria-hidden=\"true\">\/<\/span>\r\n            <span>{{ t('Mengenai Kami') }}<\/span>\r\n            <span aria-hidden=\"true\">\/<\/span>\r\n            <span>{{ t('Direktori Pegawai') }}<\/span>\r\n        <\/nav>\r\n\r\n        {{-- ---------- TAJUK ---------- --}}\r\n        <header class=\"directory__header\">\r\n            <span class=\"directory__eyebrow\">{{ t('Mengenai Kami') }}<\/span>\r\n            <h1 id=\"directory-title\">{{ t('Direktori Pegawai') }}<\/h1>\r\n            <p>{{ t('od.hero_desc') }}<\/p>\r\n        <\/header>\r\n\r\n        {{-- ---------- TAB ---------- --}}\r\n        <nav class=\"directory__tabs\" aria-label=\"{{ t('od.tabs_aria') }}\">\r\n            @foreach ($dirTabs as $dirTabKey => $dirTabLabel)\r\n                <a class=\"directory__tab {{ $dirTab === $dirTabKey ? 'is-active' : '' }}\"\r\n                    href=\"{{ $dirTabUrl($dirTabKey) }}\"\r\n                    @if ($dirTab === $dirTabKey) aria-current=\"page\" @endif>\r\n                    {{ $dirTabLabel }}\r\n                    <span class=\"directory__tab-count\">\r\n                        @if ($dirTabKey === 'pegawai')\r\n                            {{ $dirTotalAll }}\r\n                        @elseif ($dirTabKey === 'perhubungan')\r\n                            {{ $dirPrStaff->count() }}\r\n                        @else\r\n                            {{ count($dirOrdered) }}\r\n                        @endif\r\n                    <\/span>\r\n                <\/a>\r\n            @endforeach\r\n        <\/nav>\r\n\r\n        @if ($dirTab === 'pegawai')\r\n        {{-- ---------- BAR CARIAN ---------- --}}\r\n        <form class=\"directory__filter\" method=\"GET\" action=\"{{ $dirUrl }}\" role=\"search\">\r\n            <input type=\"hidden\" name=\"tab\" value=\"pegawai\">\r\n            <div class=\"directory__field\">\r\n                <label for=\"dir-q\">{{ t('od.search_label') }}<\/label>\r\n                <input type=\"search\" id=\"dir-q\" name=\"q\" class=\"directory__input\" value=\"{{ $dirQ }}\"\r\n                    placeholder=\"{{ t('od.search_ph') }}\" autocomplete=\"off\">\r\n            <\/div>\r\n\r\n            <div class=\"directory__field\">\r\n                <label for=\"dir-dept\">{{ t('od.dept_label') }}<\/label>\r\n                <select id=\"dir-dept\" name=\"dept\" class=\"directory__select\">\r\n                    <option value=\"\">{{ t('od.dept_all') }}<\/option>\r\n                    @foreach ($dirOrdered as $dirOption)\r\n                        <option value=\"{{ $dirOption['id'] }}\" @selected($dirDept === $dirOption['id'])>{{ str_repeat('— ', $dirOption['level']) }}{{ $dirName($dirOption['dept']) }}<\/option>\r\n                    @endforeach\r\n                <\/select>\r\n            <\/div>\r\n\r\n            <div class=\"directory__actions\">\r\n                <button type=\"submit\" class=\"directory__btn directory__btn--primary\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width:15px;height:15px\" aria-hidden=\"true\">\r\n                        <circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle>\r\n                        <path d=\"M20 20l-3.5-3.5\"><\/path>\r\n                    <\/svg>\r\n                    {{ t('common.search') }}\r\n                <\/button>\r\n                @if ($dirFiltered)\r\n                    <a href=\"{{ $dirUrl }}\" class=\"directory__btn\">{{ t('common.reset') }}<\/a>\r\n                @endif\r\n            <\/div>\r\n        <\/form>\r\n\r\n        {{-- ---------- RINGKASAN ---------- --}}\r\n        <p class=\"directory__summary\">\r\n            @if ($dirFiltered)\r\n                {{ str_replace([':shown', ':total'], [$dirTotal, $dirTotalAll], t('od.showing')) }}\r\n                @if ($dirQ !== '')\r\n                    <span class=\"directory__chip\">{{ t('od.search_chip') }} {{ $dirQ }}<\/span>\r\n                @endif\r\n                @if ($dirDept > 0 && isset($dirPath[$dirDept]))\r\n                    <span class=\"directory__chip\">{{ implode(' › ', $dirPath[$dirDept]) }}<\/span>\r\n                @endif\r\n            @else\r\n                <strong>{{ $dirTotal }}<\/strong> {{ t('od.active_in') }} <strong>{{ count($dirGroups) }}<\/strong> {{ t('od.div_unit') }}\r\n            @endif\r\n        <\/p>\r\n\r\n        @elseif ($dirTab === 'perhubungan')\r\n            {{-- ---------- TAB: PEGAWAI PERHUBUNGAN AWAM ---------- --}}\r\n            <p class=\"directory__summary\">\r\n                <strong>{{ $dirPrStaff->count() }}<\/strong> {{ t('od.pr_count') }}\r\n                @forelse ($dirPrDeptIds as $dirPrDeptId)\r\n                    <span class=\"directory__chip\">{{ $dirDeptLabel[$dirPrDeptId] ?? '' }}<\/span>\r\n                @empty\r\n                    <span class=\"directory__chip\">{{ t('od.pr_none') }}<\/span>\r\n                @endforelse\r\n            <\/p>\r\n        @endif\r\n\r\n        @if ($dirTab !== 'bahagian')\r\n            {{-- ---------- JADUAL PEGAWAI ---------- --}}\r\n            @php $dirTableRows = $dirTab === 'perhubungan' ? $dirPrStaff : $dirStaffRows; @endphp\r\n\r\n            <p class=\"directory__hint\">{{ t('od.table_hint') }}<\/p>\r\n\r\n            <div class=\"directory__table-wrap\">\r\n                <table class=\"directory__table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th scope=\"col\" class=\"directory__num\">#<\/th>\r\n                            <th scope=\"col\">{{ t('od.col_name') }}<\/th>\r\n                            <th scope=\"col\">{{ t('od.col_position') }}<\/th>\r\n                            <th scope=\"col\">{{ t('od.col_dept') }}<\/th>\r\n                            <th scope=\"col\">\r\n                                {{ t('od.col_email') }}\r\n                                @if ($dirEmailMode === 'local' && $dirEmailDomainLabel !== '')\r\n                                    <span class=\"directory__th-note\">[{{ $dirEmailDomainLabel }}]<\/span>\r\n                                @endif\r\n                            <\/th>\r\n                            <th scope=\"col\">{{ t('od.col_phone') }}<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody>\r\n                        @forelse ($dirTableRows as $dirRowItem)\r\n                            @php\r\n                                $dirRowDeptId = (int) $dirRowItem->directory_staff_department_id;\r\n                                $dirRowEmail  = (string) ($dirRowItem->directory_staff_email ?? '');\r\n                                $dirRowPhone  = (string) ($dirRowItem->directory_staff_phone ?? '');\r\n                            @endphp\r\n\r\n                            <tr>\r\n                                <td class=\"directory__num\">{{ $loop->iteration }}<\/td>\r\n\r\n                                <td>\r\n                                    <div class=\"directory__who\">\r\n                                        <span class=\"directory__avatar\">\r\n                                            @if (filled($dirRowItem->directory_staff_photo))\r\n                                                <img src=\"{{ image_url($dirRowItem->directory_staff_photo) }}\"\r\n                                                    alt=\"Foto {{ $dirRowItem->directory_staff_name }}\" loading=\"lazy\"\r\n                                                    width=\"38\" height=\"38\">\r\n                                            @else\r\n                                                {{ $dirInitials($dirRowItem->directory_staff_name) }}\r\n                                            @endif\r\n                                        <\/span>\r\n                                        <span class=\"directory__who-name\">{{ $dirRowItem->directory_staff_name }}<\/span>\r\n                                    <\/div>\r\n                                <\/td>\r\n\r\n                                <td class=\"directory__muted\">\r\n                                    {{ filled($dirRowItem->directory_staff_position) ? $dirRowItem->directory_staff_position : '—' }}\r\n                                <\/td>\r\n\r\n                                <td class=\"directory__dept\">\r\n                                    {{ $dirDeptLabel[$dirRowDeptId] ?? '—' }}\r\n                                    @if (filled($dirDeptCode[$dirRowDeptId] ?? ''))\r\n                                        <span class=\"directory__dept-code\">{{ $dirDeptCode[$dirRowDeptId] }}<\/span>\r\n                                    @endif\r\n                                <\/td>\r\n\r\n                                <td class=\"directory__nowrap\">\r\n                                    @if (filled($dirRowEmail))\r\n                                        <span class=\"directory__email\">{{ $dirEmailText($dirRowEmail) }}<\/span>\r\n                                    @else\r\n                                        <span class=\"directory__muted\">—<\/span>\r\n                                    @endif\r\n                                <\/td>\r\n\r\n                                <td class=\"directory__nowrap\">\r\n                                    @if (filled($dirRowPhone))\r\n                                        <span class=\"directory__phone\">{{ $dirRowPhone }}<\/span>\r\n                                    @else\r\n                                        <span class=\"directory__muted\">—<\/span>\r\n                                    @endif\r\n                                <\/td>\r\n                            <\/tr>\r\n                        @empty\r\n                            <tr class=\"directory__empty-row\">\r\n                                <td colspan=\"6\">\r\n                                    @if ($dirTab === 'perhubungan')\r\n                                        {{ t('od.empty_pr') }}\r\n                                    @elseif ($dirTotalAll === 0)\r\n                                        {{ t('od.empty_all') }}\r\n                                    @else\r\n                                        {{ t('od.empty_filter') }}\r\n                                        <a class=\"directory__link\" href=\"{{ $dirUrl }}\">{{ t('od.reset_filter') }}<\/a>\r\n                                    @endif\r\n                                <\/td>\r\n                            <\/tr>\r\n                        @endforelse\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        @else\r\n\r\n            {{-- ---------- TAB: BAHAGIAN & UNIT ---------- --}}\r\n            @if (count($dirOrg))\r\n                <p class=\"directory__summary\">\r\n                    <strong>{{ count($dirOrdered) }}<\/strong> {{ t('od.org_count') }}\r\n                    @if ($dirTotalAll > 0)\r\n                        <span class=\"directory__chip\">{{ $dirTotalAll }} {{ t('od.active_officers') }}<\/span>\r\n                    @endif\r\n                <\/p>\r\n\r\n                <div class=\"directory__org-grid\">\r\n                    @foreach ($dirOrg as $dirOrgGroup)\r\n                        <article class=\"directory__org-card\">\r\n                            <h3>{{ $dirOrgGroup['name'] }}\r\n                                @if ($dirOrgGroup['count'] > 0)\r\n                                    <span class=\"directory__org-count\"\r\n                                        title=\"{{ $dirOrgGroup['count'] }} {{ t('od.officers_incl') }}\">{{ $dirOrgGroup['count'] }}<\/span>\r\n                                @endif\r\n                            <\/h3>\r\n\r\n                            @if (count($dirOrgGroup['rows']))\r\n                                <ul class=\"directory__org-list\">\r\n                                    @foreach ($dirOrgGroup['rows'] as $dirOrgRow)\r\n                                        <li class=\"directory__org-item\" style=\"--depth:{{ $dirOrgRow['level'] }}\">\r\n                                            <a href=\"{{ $dirDeptUrl($dirOrgRow['id']) }}\"\r\n                                                title=\"{{ t('od.view_officers') }} {{ $dirOrgRow['name'] }}\">{{ $dirOrgRow['name'] }}<\/a>\r\n                                            @if ($dirOrgRow['code'] !== '')\r\n                                                <span class=\"directory__org-code\">{{ $dirOrgRow['code'] }}<\/span>\r\n                                            @endif\r\n                                            @if ($dirOrgRow['count'] > 0)\r\n                                                <span class=\"directory__org-count\"\r\n                                                    title=\"{{ $dirOrgRow['count'] }} {{ t('od.officers_incl') }}\">{{ $dirOrgRow['count'] }}<\/span>\r\n                                            @endif\r\n                                        <\/li>\r\n                                    @endforeach\r\n                                <\/ul>\r\n                            @else\r\n                                <p class=\"directory__org-none\">{{ t('od.no_subunit') }}<\/p>\r\n                            @endif\r\n                        <\/article>\r\n                    @endforeach\r\n                <\/div>\r\n            @endif\r\n        @endif\r\n\r\n        {{-- ---------- NOTA ---------- --}}\r\n        <aside class=\"directory__note\">\r\n            <h2>{{ t('od.note_title') }}<\/h2>\r\n            <ol>\r\n                <li>{{ t('od.note_email') }}<\/li>\r\n                <li>{{ t('od.note_disclaimer') }}<\/li>\r\n            <\/ol>\r\n            <p>{{ t('od.note_contact') }}\r\n                <a href=\"{{ $dirAduanUrl }}\">{{ t('od.aduan_link') }}<\/a>.<\/p>\r\n        <\/aside>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    \/* Tapisan bahagian: hantar borang secara automatik bila pilihan berubah.\r\n       Medan carian sengaja TIDAK auto-hantar (elak fokus hilang semasa menaip) —\r\n       tekan Enter atau butang \"Cari\". Medan kosong dilumpuhkan supaya tidak\r\n       muncul sebagai ?q= dalam URL. *\/\r\n    (function () {\r\n        var form = document.querySelector('.directory__filter');\r\n        if (!form) { return; }\r\n\r\n        var select = form.querySelector('.directory__select');\r\n        if (select) {\r\n            select.addEventListener('change', function () {\r\n                Array.prototype.forEach.call(form.querySelectorAll('input, select'), function (el) {\r\n                    if (el.value === '') { el.disabled = true; }\r\n                });\r\n                form.submit();\r\n            });\r\n        }\r\n    })();\r\n<\/script>\r\n"
}