{
    "id": 25,
    "code": "agency_nres",
    "content": "{{-- ============================================================\r\n     COMPONENT: Agency NRES — JABATAN & AGENSI\r\n     Data dari modul Content Application (CMS) — kategori AGENCY_LINKS.\r\n\r\n     Sumber data:\r\n       · content_applications            → application_cat = 'AGENCY_LINKS',\r\n                                           application_status = 'ACTIVE',\r\n                                           application_code (nama pendek, cth. INSTUN),\r\n                                           application_url  (pautan laman agensi),\r\n                                           application_img  (logo — disimpan LOKAL),\r\n                                           application_sort\r\n       · content_application_translations → application_translation_title (nama penuh)\r\n\r\n     Logo disimpan LOKAL di /storage/content-application/…  (TIADA hotlink).\r\n\r\n     CSS .agency-* ada dalam Layout site NRES (site 2) dan JS marquee bergantung\r\n     pada .agency-track → markup/kelas di bawah MESTI kekal.\r\n     Track digandakan ×2 supaya animasi translateX(-50%) berulang tanpa putus.\r\n     Guna pada page lain: assign komponen ini + letak {!! $agency_nres !!}.\r\n     ============================================================ --}}\r\n\r\n@php\r\n    $agnLang = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';\r\n\r\n    $agnRows = DB::table('content_applications')\r\n        ->where('application_cat', 'AGENCY_LINKS')\r\n        ->where('application_status', 'ACTIVE')\r\n        ->orderBy('application_sort')\r\n        ->orderBy('application_id')\r\n        ->get();\r\n\r\n    $agnIds = $agnRows->pluck('application_id')->all();\r\n\r\n    $agnTr = $agnIds\r\n        ? DB::table('content_application_translations')\r\n            ->whereIn('application_translation_parent_id', $agnIds)\r\n            ->get()\r\n            ->groupBy('application_translation_parent_id')\r\n        : collect();\r\n\r\n    // Laluan relatif (disk public) → URL /storage/…  ; URL penuh dibiarkan\r\n    $agnUrl = function ($path) {\r\n        $path = trim((string) $path);\r\n\r\n        if ($path === '') {\r\n            return '';\r\n        }\r\n\r\n        if (preg_match('#^(https?:)?//#i', $path)) {\r\n            return $path;\r\n        }\r\n\r\n        return asset('storage/'.ltrim($path, '/'));\r\n    };\r\n\r\n    $agnItems = [];\r\n\r\n    foreach ($agnRows as $agnRow) {\r\n        $rows = $agnTr[$agnRow->application_id] ?? collect();\r\n\r\n        $tr = $rows->firstWhere('application_translation_language', $agnLang)\r\n            ?? $rows->firstWhere('application_translation_main', 1)\r\n            ?? $rows->first();\r\n\r\n        $img = $agnUrl($agnRow->application_img);\r\n\r\n        if ($img === '') {\r\n            continue;\r\n        }\r\n\r\n        $agnItems[] = [\r\n            'code' => trim((string) $agnRow->application_code),\r\n            'title' => trim((string) ($tr->application_translation_title ?? '')),\r\n            'img' => $img,\r\n            'url' => trim((string) $agnRow->application_url),\r\n        ];\r\n    }\r\n\r\n    $agnTotal = count($agnItems);\r\n@endphp\r\n\r\n@if ($agnTotal > 0)\r\n<section class=\"agency-band\">\r\n  <div class=\"container-xl\">\r\n    <div class=\"d-flex flex-wrap justify-content-between align-items-end gap-2\">\r\n      <div>\r\n        <h2 class=\"agency-title mb-1\">{{ $agnLang === 'en' ? 'DEPARTMENTS & AGENCIES' : 'JABATAN & AGENSI' }}</h2>\r\n        <p class=\"agency-sub mb-0\">{{ $agnTotal }} {{ $agnLang === 'en' ? 'departments and agencies under the Ministry of Natural Resources and Environmental Sustainability.' : 'jabatan dan agensi di bawah Kementerian Sumber Asli dan Kelestarian Alam.' }}</p>\r\n      </div>\r\n      <!--<a class=\"agency-more\" href=\"https://www.nres.gov.my/ms-my/Pages/default.aspx#jabatan\" target=\"_blank\" rel=\"noopener\">{{ $agnLang === 'en' ? 'View All' : 'Lihat Semua' }} <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 5l7 7-7 7\"/></svg></a>-->\r\n    </div>\r\n  </div>\r\n  <div class=\"agency-wrap\" id=\"agencyCarousel\">\n  <div class=\"agency-viewport\" role=\"region\" aria-label=\"{{ $agnLang === 'en' ? 'List of departments and agencies under NRES' : 'Senarai jabatan dan agensi di bawah NRES' }}\">\r\n    <div class=\"agency-track\">\r\n      @foreach ([0, 1] as $agnPass)\r\n        @foreach ($agnItems as $agnItem)\r\n          @php $agnLabel = $agnItem['code'] !== '' ? $agnItem['code'] : $agnItem['title']; @endphp\r\n          @php $agnTip = ($agnItem['code'] !== '' && $agnItem['title'] !== '') ? $agnItem['code'].' – '.$agnItem['title'] : $agnLabel; @endphp\r\n          @if ($agnItem['url'] !== '')\r\n          <a class=\"agency-card\" href=\"{{ $agnItem['url'] }}\" target=\"_blank\" rel=\"noopener\" title=\"{{ $agnTip }}\"><img src=\"{{ $agnItem['img'] }}\" alt=\"{{ $agnLabel }}\" loading=\"lazy\"><span class=\"agency-name\">{{ $agnLabel }}</span></a>\r\n          @else\r\n          <span class=\"agency-card\" title=\"{{ $agnTip }}\"><img src=\"{{ $agnItem['img'] }}\" alt=\"{{ $agnLabel }}\" loading=\"lazy\"><span class=\"agency-name\">{{ $agnLabel }}</span></span>\r\n          @endif\r\n        @endforeach\r\n      @endforeach\r\n    </div>\r\n  </div>\r\n  <button class=\"agency-nav prev\" type=\"button\" aria-label=\"{{ $agnLang === 'en' ? 'Previous' : 'Sebelum' }}\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 5l-7 7 7 7\"/></svg></button>\r\n  <button class=\"agency-nav next\" type=\"button\" aria-label=\"{{ $agnLang === 'en' ? 'Next' : 'Seterusnya' }}\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 5l7 7-7 7\"/></svg></button>\r\n  </div>\r\n<script>\r\n(function () {\r\n  var root = document.getElementById('agencyCarousel');\r\n  if (!root) return;\r\n  var track = root.querySelector('.agency-track');\r\n  var prev = root.querySelector('.agency-nav.prev');\r\n  var next = root.querySelector('.agency-nav.next');\r\n  if (!track || !prev || !next) return;\r\n\r\n  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var half = 0, offset = 0, hover = false, hidden = false, speed = 0.45;\r\n\r\n  function measure() { half = track.scrollWidth / 2; }\r\n  function wrapIt() { if (half > 0) { offset = ((offset % half) + half) % half; } }\r\n  function paint() { track.style.transform = 'translate3d(' + (-offset).toFixed(2) + 'px,0,0)'; }\r\n\r\n  function step(dir) {\r\n    var card = track.querySelector('.agency-card');\r\n    if (!card) return;\r\n    var cs = window.getComputedStyle(card);\r\n    offset += dir * (card.getBoundingClientRect().width + (parseFloat(cs.marginRight) || 0));\r\n    wrapIt();\r\n    paint();\r\n  }\r\n\r\n  function tick() {\r\n    if (!hover && !hidden && !reduce) { offset += speed; wrapIt(); paint(); }\r\n    window.requestAnimationFrame(tick);\r\n  }\r\n\r\n  prev.addEventListener('click', function () { step(-1); });\r\n  next.addEventListener('click', function () { step(1); });\r\n  root.addEventListener('mouseenter', function () { hover = true; });\r\n  root.addEventListener('mouseleave', function () { hover = false; });\r\n  root.addEventListener('focusin', function () { hover = true; });\r\n  root.addEventListener('focusout', function () { hover = false; });\r\n  document.addEventListener('visibilitychange', function () { hidden = document.hidden; });\r\n  window.addEventListener('resize', function () { measure(); wrapIt(); paint(); });\r\n\r\n  measure();\r\n  paint();\r\n  window.requestAnimationFrame(tick);\r\n})();\r\n</script>\r\n</section>\r\n@endif"
}