{
    "id": 28,
    "slug": "officer-directory",
    "name": "Officer Directory",
    "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    $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     -------------------------------------------------------------------- *\/\r\n    $dirOrg = [];\r\n\r\n    foreach ($dirByParent[0] ?? [] as $dirRoot) {\r\n        $dirRootId = (int) $dirRoot->directory_department_id;\r\n        $dirRows   = [];\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                $dirRows[] = [\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                ];\r\n            }\r\n        }\r\n\r\n        $dirOrg[] = [\r\n            'name'  => $dirName($dirRoot),\r\n            'code'  => (string) ($dirRoot->directory_department_code ?? ''),\r\n            'rows'  => $dirRows,\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 → pautan tel: (buang ruang, sengkang, kurungan)\r\n    $dirTel = fn ($phone) => preg_replace('\/[^0-9+]\/', '', (string) $phone);\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\/* --- kumpulan bahagian --------------------------------------------------- *\/\r\n.directory__group{margin-bottom:26px}\r\n.directory__group-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--line)}\r\n.directory__group-title{margin:0;color:var(--green);font-size:1.02rem;font-weight:800;line-height:1.3}\r\n.directory__group-code{padding:1px 7px;border-radius:6px;background:var(--fade);color:var(--teal);font-size:.68rem;font-weight:700;letter-spacing:.03em}\r\n.directory__group-path{flex-basis:100%;margin:0;color:var(--bs-secondary-color);font-size:.78rem;line-height:1.5}\r\n.directory__group-count{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.72rem;font-weight:700;white-space:nowrap}\r\n\r\n\/* --- kad pegawai --------------------------------------------------------- *\/\r\n.directory__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}\r\n.directory__card{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bs-body-bg);transition:.18s}\r\n.directory__card:hover{border-color:var(--teal);box-shadow:0 8px 22px rgba(17,128,143,.12);transform:translateY(-1px)}\r\n.directory__avatar{flex:0 0 54px;width:54px;height:54px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--fade);color:var(--teal);font-size:.95rem;font-weight:800;letter-spacing:.02em}\r\n.directory__avatar img{display:block;width:100%;height:100%;object-fit:cover}\r\n.directory__info{flex:1;min-width:0}\r\n.directory__name{margin:0 0 3px;color:var(--ink);font-size:.92rem;font-weight:700;line-height:1.3}\r\n.directory__position{margin:0 0 8px;color:var(--bs-secondary-color);font-size:.78rem;line-height:1.45}\r\n.directory__contacts{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}\r\n.directory__contacts li{display:flex;align-items:flex-start;gap:6px;min-width:0;color:var(--bs-secondary-color);font-size:.78rem;line-height:1.45}\r\n.directory__contacts svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px;color:var(--teal)}\r\n.directory__contacts a{color:var(--teal);font-weight:600;text-decoration:none;overflow-wrap:anywhere}\r\n.directory__contacts a:hover{text-decoration:underline}\r\n\r\n\/* --- keadaan kosong ------------------------------------------------------ *\/\r\n.directory__empty{padding:34px 22px;border:1px dashed var(--line);border-radius:16px;background:var(--bs-body-bg);text-align:center}\r\n.directory__empty svg{width:34px;height:34px;margin-bottom:10px;color:var(--teal);opacity:.75}\r\n.directory__empty h2{margin:0 0 6px;color:var(--green);font-size:1rem;font-weight:800}\r\n.directory__empty p{max-width:54ch;margin:0 auto;color:var(--bs-secondary-color);font-size:.85rem;line-height:1.6}\r\n.directory__empty a{color:var(--teal);font-weight:700;text-decoration:none}\r\n.directory__empty a:hover{text-decoration:underline}\r\n\r\n\/* --- gambaran bahagian & unit (details) ---------------------------------- *\/\r\n.directory__org{margin-top:26px;border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);overflow:hidden}\r\n.directory__org>summary{display:flex;align-items:center;gap:10px;padding:14px 18px;color:var(--green);font-size:.92rem;font-weight:800;cursor:pointer;list-style:none}\r\n.directory__org>summary::-webkit-details-marker{display:none}\r\n.directory__org>summary::after{content:\"\\25BE\";margin-left:auto;color:var(--teal);font-size:.9rem;line-height:1;transition:transform .2s}\r\n.directory__org[open]>summary::after{transform:rotate(180deg)}\r\n.directory__org[open]>summary{border-bottom:1px solid var(--line)}\r\n.directory__org-count{padding:2px 9px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.7rem;font-weight:700}\r\n.directory__org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:16px 18px 18px}\r\n.directory__org-card{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-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}\r\n.directory__org-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding-left:calc((var(--depth,1) - 1) * 12px);color:var(--ink);font-size:.78rem;line-height:1.45}\r\n.directory__org-item::before{content:\"\\2013\";color:var(--teal);opacity:.65}\r\n.directory__org-code{padding:0 5px;border-radius:5px;background:rgba(17,128,143,.12);color:var(--teal);font-size:.65rem;font-weight:700;letter-spacing:.02em}\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}\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    .directory__grid,.directory__org-grid{grid-template-columns:1fr}\r\n    .directory__group-count{margin-left:0}\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') }}\">Utama<\/a>\r\n            <span aria-hidden=\"true\">\/<\/span>\r\n            <span>Direktori Pegawai<\/span>\r\n        <\/nav>\r\n\r\n        {{-- ---------- TAJUK ---------- --}}\r\n        <header class=\"directory__header\">\r\n            <span class=\"directory__eyebrow\">Hubungi Kami<\/span>\r\n            <h1 id=\"directory-title\">Direktori Pegawai<\/h1>\r\n            <p>Senarai pegawai Kementerian Sumber Asli dan Kelestarian Alam mengikut bahagian dan unit. Gunakan\r\n                carian atau tapisan bahagian untuk mencari pegawai yang anda perlukan.<\/p>\r\n        <\/header>\r\n\r\n        {{-- ---------- BAR CARIAN ---------- --}}\r\n        <form class=\"directory__filter\" method=\"GET\" action=\"{{ $dirUrl }}\" role=\"search\">\r\n            <div class=\"directory__field\">\r\n                <label for=\"dir-q\">Cari pegawai<\/label>\r\n                <input type=\"search\" id=\"dir-q\" name=\"q\" class=\"directory__input\" value=\"{{ $dirQ }}\"\r\n                    placeholder=\"Nama, jawatan, e-mel atau telefon\" autocomplete=\"off\">\r\n            <\/div>\r\n\r\n            <div class=\"directory__field\">\r\n                <label for=\"dir-dept\">Bahagian \/ Unit<\/label>\r\n                <select id=\"dir-dept\" name=\"dept\" class=\"directory__select\">\r\n                    <option value=\"\">Semua bahagian \/ unit<\/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                    Cari\r\n                <\/button>\r\n                @if ($dirFiltered)\r\n                    <a href=\"{{ $dirUrl }}\" class=\"directory__btn\">Set Semula<\/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                Menunjukkan <strong>{{ $dirTotal }}<\/strong> daripada <strong>{{ $dirTotalAll }}<\/strong> pegawai\r\n                @if ($dirQ !== '')\r\n                    <span class=\"directory__chip\">carian: {{ $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> pegawai aktif dalam <strong>{{ count($dirGroups) }}<\/strong> bahagian \/ unit\r\n            @endif\r\n        <\/p>\r\n\r\n        {{-- ---------- SENARAI PEGAWAI (ikut bahagian) ---------- --}}\r\n        @if (count($dirGroups))\r\n            @foreach ($dirGroups as $dirGroup)\r\n                <section class=\"directory__group\">\r\n                    <header class=\"directory__group-head\">\r\n                        <h2 class=\"directory__group-title\">{{ $dirGroup['name'] }}<\/h2>\r\n\r\n                        @if ($dirGroup['code'] !== '')\r\n                            <span class=\"directory__group-code\">{{ $dirGroup['code'] }}<\/span>\r\n                        @endif\r\n\r\n                        <span class=\"directory__group-count\">{{ $dirGroup['staff']->count() }} pegawai<\/span>\r\n\r\n                        @if (count($dirGroup['path']) > 1)\r\n                            <p class=\"directory__group-path\">{{ implode(' › ', array_slice($dirGroup['path'], 0, -1)) }}<\/p>\r\n                        @endif\r\n                    <\/header>\r\n\r\n                    <div class=\"directory__grid\">\r\n                        @foreach ($dirGroup['staff'] as $dirStaffRow)\r\n                            <article class=\"directory__card\">\r\n                                <div class=\"directory__avatar\">\r\n                                    @if (filled($dirStaffRow->directory_staff_photo))\r\n                                        <img src=\"{{ image_url($dirStaffRow->directory_staff_photo) }}\"\r\n                                            alt=\"Foto {{ $dirStaffRow->directory_staff_name }}\" loading=\"lazy\"\r\n                                            width=\"54\" height=\"54\">\r\n                                    @else\r\n                                        {{ $dirInitials($dirStaffRow->directory_staff_name) }}\r\n                                    @endif\r\n                                <\/div>\r\n\r\n                                <div class=\"directory__info\">\r\n                                    <h3 class=\"directory__name\">{{ $dirStaffRow->directory_staff_name }}<\/h3>\r\n\r\n                                    @if (filled($dirStaffRow->directory_staff_position))\r\n                                        <p class=\"directory__position\">{{ $dirStaffRow->directory_staff_position }}<\/p>\r\n                                    @endif\r\n\r\n                                    <ul class=\"directory__contacts\">\r\n                                        @if (filled($dirStaffRow->directory_staff_email))\r\n                                            <li>\r\n                                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                                                    <rect x=\"2.5\" y=\"4.5\" width=\"19\" height=\"15\" rx=\"2\"><\/rect>\r\n                                                    <path d=\"M3 6.5l9 6 9-6\"><\/path>\r\n                                                <\/svg>\r\n                                                <a href=\"mailto:{{ $dirStaffRow->directory_staff_email }}\">{{ $dirStaffRow->directory_staff_email }}<\/a>\r\n                                            <\/li>\r\n                                        @endif\r\n\r\n                                        @if (filled($dirStaffRow->directory_staff_phone))\r\n                                            <li>\r\n                                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                                                    <path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z\"><\/path>\r\n                                                <\/svg>\r\n                                                <a href=\"tel:{{ $dirTel($dirStaffRow->directory_staff_phone) }}\">{{ $dirStaffRow->directory_staff_phone }}<\/a>\r\n                                            <\/li>\r\n                                        @endif\r\n\r\n                                        @if (! filled($dirStaffRow->directory_staff_email) && ! filled($dirStaffRow->directory_staff_phone))\r\n                                            <li>Tiada maklumat hubungan<\/li>\r\n                                        @endif\r\n                                    <\/ul>\r\n                                <\/div>\r\n                            <\/article>\r\n                        @endforeach\r\n                    <\/div>\r\n                <\/section>\r\n            @endforeach\r\n        @else\r\n            <div class=\"directory__empty\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" 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\r\n                @if ($dirTotalAll === 0)\r\n                    <h2>Direktori pegawai sedang dikemaskini<\/h2>\r\n                    <p>Rekod pegawai bagi setiap bahagian dan unit belum dimasukkan. Sementara itu, senarai bahagian\r\n                        dan unit boleh dilihat di bawah. Sebarang pertanyaan boleh dikemukakan melalui\r\n                        <a href=\"{{ $dirAduanUrl }}\">Aduan &amp; Maklum Balas<\/a>.<\/p>\r\n                @else\r\n                    <h2>Tiada pegawai sepadan<\/h2>\r\n                    <p>Tiada pegawai ditemui bagi carian atau bahagian yang dipilih. Sila cuba kata kunci lain atau\r\n                        <a href=\"{{ $dirUrl }}\">set semula tapisan<\/a>.<\/p>\r\n                @endif\r\n            <\/div>\r\n        @endif\r\n\r\n        {{-- ---------- GAMBARAN BAHAGIAN & UNIT ---------- --}}\r\n        @if (count($dirOrg))\r\n            <details class=\"directory__org\" @if ($dirTotalAll === 0) open @endif>\r\n                <summary>\r\n                    <span>Senarai Bahagian &amp; Unit<\/span>\r\n                    <span class=\"directory__org-count\">{{ count($dirOrdered) }} bahagian \/ unit<\/span>\r\n                <\/summary>\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'] }}<\/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                                            <span>{{ $dirOrgRow['name'] }}<\/span>\r\n                                            @if ($dirOrgRow['code'] !== '')\r\n                                                <span class=\"directory__org-code\">{{ $dirOrgRow['code'] }}<\/span>\r\n                                            @endif\r\n                                        <\/li>\r\n                                    @endforeach\r\n                                <\/ul>\r\n                            @else\r\n                                <p class=\"directory__org-none\">Tiada unit di bawah bahagian ini.<\/p>\r\n                            @endif\r\n                        <\/article>\r\n                    @endforeach\r\n                <\/div>\r\n            <\/details>\r\n        @endif\r\n\r\n        {{-- ---------- NOTA ---------- --}}\r\n        <aside class=\"directory__note\">\r\n            <h2>Nota<\/h2>\r\n            <ol>\r\n                <li>Untuk menghantar e-mel, klik pada alamat e-mel pegawai yang berkenaan.<\/li>\r\n                <li>TIDAK DIBENARKAN menggunakan maklumat ini untuk tujuan pengiklanan, pemasaran dan penjualan\r\n                    produk atau perkhidmatan, serta menyebar maklumat pegawai tanpa kebenaran.<\/li>\r\n            <\/ol>\r\n            <p>Sebarang pembetulan atau kemas kini maklumat pegawai boleh dikemukakan melalui\r\n                <a href=\"{{ $dirAduanUrl }}\">Aduan &amp; Maklum Balas<\/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\". *\/\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 () { form.submit(); });\r\n        }\r\n    })();\r\n<\/script>\r\n"
}