{
    "id": 39,
    "slug": "faq",
    "page_content": "{{-- ============================================================================\r\n     PAGE CONTENT — Soalan Lazim (FAQ)\r\n     Site  : nres  ·  Page slug: faq  ·  Page ID: auto (dicipta oleh apply-faq.php)\r\n     URL   : /nres/faq\r\n\r\n     Sumber data: `content_article` (article_subcategory = FAQ, status ACTIVE)\r\n                  + `content_article_translation` (BM/EN)\r\n     Setiap artikel = 1 pasangan Soalan (tajuk) + Jawapan (kandungan HTML).\r\n\r\n     Ciri: senarai akordion (<details>), carian segera (JS), CTA hubungi,\r\n           BM/EN ikut sesi, dark mode + responsif.\r\n     Nota: SEMUA logik + markup + CSS ada dalam fail ini (tiada komponen/partial).\r\n     ============================================================================ --}}\r\n\r\n@php\r\n    $faqLang = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';\r\n    $faqIsEn = $faqLang === 'en';\r\n\r\n    $faqRows = DB::table('content_article as a')\r\n        ->join('content_article_translation as t', 't.article_translation_parent_id', '=', 'a.article_id')\r\n        ->where(function ($q) {\n            $q->where('a.article_subcategory', 'FAQ')->orWhere('a.article_category', 'FAQ');\n        })\r\n        ->where('a.article_status', 'ACTIVE')\r\n        ->where('t.article_translation_language', $faqLang)\r\n        ->orderBy('a.article_sorting')\r\n        ->orderBy('a.article_id')\r\n        ->select('a.article_id', 'a.article_code', 't.article_translation_title as title', 't.article_translation_content as body')\r\n        ->get();\r\n\r\n    $faqItems = [];\r\n\r\n    foreach ($faqRows as $faqRow) {\r\n        $faqTitle = trim((string) $faqRow->title);\r\n        $faqBody = (string) $faqRow->body;\r\n\r\n        if ($faqTitle === '') {\r\n            continue;\r\n        }\r\n\r\n        $faqItems[] = [\r\n            'id' => (int) $faqRow->article_id,\r\n            'code' => (string) $faqRow->article_code,\r\n            'title' => $faqTitle,\r\n            'body' => $faqBody,\r\n            // teks rata untuk carian klien\r\n            'search' => mb_strtolower($faqTitle.' '.trim(preg_replace('/\\s+/', ' ', strip_tags($faqBody)))),\r\n        ];\r\n    }\r\n\r\n    $faqTotal = count($faqItems);\r\n\r\n    $faqLinks = [\r\n        [\r\n            'title' => $faqIsEn ? 'Complaints and Feedback' : 'Aduan dan Maklum Balas',\r\n            'desc' => $faqIsEn ? 'Lodge a complaint or send us feedback.' : 'Hantar aduan atau maklum balas kepada kami.',\r\n            'url' => url(trim(((string) ($siteSlug ?? '')).'/complaints-feedback', '/')),\r\n            'icon' => '<path d=\"M4 5h16v11H9l-5 4z\"/><path d=\"M8 9h8M8 12h5\"/>',\r\n        ],\r\n        [\r\n            'title' => $faqIsEn ? 'Location' : 'Lokasi',\r\n            'desc' => $faqIsEn ? 'Address, map and contact numbers.' : 'Alamat, peta dan nombor perhubungan.',\r\n            'url' => url(trim(((string) ($siteSlug ?? '')).'/location', '/')),\r\n            'icon' => '<path d=\"M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z\"/><circle cx=\"12\" cy=\"10\" r=\"2.5\"/>',\r\n        ],\r\n        [\r\n            'title' => $faqIsEn ? 'Officer Directory' : 'Direktori Pegawai',\r\n            'desc' => $faqIsEn ? 'Find the officer in charge of a matter.' : 'Cari pegawai yang bertanggungjawab bagi sesuatu perkara.',\r\n            'url' => url(trim(((string) ($siteSlug ?? '')).'/officer-directory', '/')),\r\n            'icon' => '<circle cx=\"10.5\" cy=\"7.5\" r=\"3.5\"/><path d=\"M4 20.5c0-4 2.9-6.5 6.5-6.5 1.1 0 2.1.2 3 .7\"/><circle cx=\"17\" cy=\"16.5\" r=\"3\"/><path d=\"M19.2 18.7l2.3 2.3\"/>',\r\n        ],\r\n    ];\r\n@endphp\r\n\r\n<style>\r\n.faq__container{padding:26px 16px 40px}\r\n.faq__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 auto 14px;max-width:880px;color:var(--bs-secondary-color);font-size:.8rem}\r\n.faq__breadcrumb a{color:var(--teal);font-weight:600;text-decoration:none}\r\n.faq__breadcrumb a:hover{text-decoration:underline}\r\n.faq__header{margin:0 auto 18px;max-width:880px;text-align:center}\r\n.faq__header h1{margin:0 0 10px;color:var(--green);font-size:clamp(1.4rem,2.9vw,2rem);font-weight:800;line-height:1.25}\r\n.faq__lead{margin:0 auto;max-width:700px;color:var(--bs-secondary-color);font-size:.9rem;line-height:1.8}\r\n.faq__search{display:flex;justify-content:center;max-width:880px;margin:0 auto 10px}\r\n.faq__search-wrap{position:relative;width:100%;max-width:540px}\r\n.faq__search input{width:100%;padding:11px 16px 11px 42px;border:1px solid var(--line);border-radius:999px;background:var(--bs-body-bg);color:var(--ink);font-size:.86rem}\r\n.faq__search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent)}\r\n.faq__search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--bs-secondary-color)}\r\n.faq__count{margin:0 auto 16px;max-width:880px;text-align:center;color:var(--bs-secondary-color);font-size:.78rem}\r\n.faq__list{display:flex;flex-direction:column;gap:10px;max-width:880px;margin:0 auto}\r\n.faq__item{border:1px solid var(--line);border-radius:14px;background:var(--bs-body-bg);overflow:hidden;transition:.18s}\r\n.faq__item[open]{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}\r\n.faq__q{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;color:var(--ink);font-size:.92rem;font-weight:700;line-height:1.55;cursor:pointer;list-style:none}\r\n.faq__q::-webkit-details-marker{display:none}\r\n.faq__q:hover{color:var(--teal)}\r\n.faq__num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;margin-top:1px;border-radius:50%;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);font-size:.74rem;font-weight:800;flex:none}\r\n.faq__chev{width:16px;height:16px;margin-top:4px;margin-left:auto;color:var(--teal);flex:none;transition:transform .2s}\r\n.faq__item[open] .faq__chev{transform:rotate(90deg)}\r\n.faq__a{padding:0 18px 18px 56px;color:var(--ink);font-size:.88rem;line-height:1.85}\r\n.faq__a p{margin:0 0 12px}\r\n.faq__a ul,.faq__a ol{margin:0 0 12px;padding-left:20px}\r\n.faq__a li{margin-bottom:6px}\r\n.faq__a a{color:var(--teal);font-weight:600;text-decoration:underline}\r\n.faq__a a:hover{color:var(--green)}\r\n.faq__a strong{color:var(--ink)}\r\n.faq__a>*:last-child{margin-bottom:0}\r\n.faq__none{max-width:880px;margin:0 auto;padding:30px 20px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--bs-secondary-color);font-size:.88rem}\r\n.faq__cta{max-width:880px;margin:22px auto 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--fade) 45%,transparent)}\r\n.faq__cta h2{margin:0 0 4px;color:var(--green);font-size:1rem;font-weight:800}\r\n.faq__cta p{margin:0 0 14px;color:var(--bs-secondary-color);font-size:.84rem;line-height:1.7}\r\n.faq__cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}\r\n.faq__cta-grid a{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--bs-body-bg);color:var(--ink);text-decoration:none;transition:.18s}\r\n.faq__cta-grid a:hover{border-color:var(--teal);color:var(--teal)}\r\n.faq__cta-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);flex:none}\r\n.faq__cta-ico svg{width:17px;height:17px}\r\n.faq__cta-title{display:block;font-size:.85rem;font-weight:700}\r\n.faq__cta-desc{display:block;margin-top:3px;color:var(--bs-secondary-color);font-size:.76rem;line-height:1.55}\r\n.faq__note{max-width:880px;margin:16px auto 0;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;background:color-mix(in srgb,var(--fade) 45%,transparent);color:var(--bs-secondary-color);font-size:.82rem;line-height:1.75}\r\n@media (max-width:600px){\r\n  .faq__container{padding:18px 12px 30px}\r\n  .faq__q{padding:13px 15px;font-size:.88rem}\r\n  .faq__a{padding:0 15px 15px 15px}\r\n}\r\n</style>\r\n\r\n<section class=\"faq\">\r\n    <div class=\"faq__container\">\r\n\r\n        {{-- ============================ BREADCRUMB ============================ --}}\r\n        <nav class=\"faq__breadcrumb\" aria-label=\"breadcrumb\">\r\n            <a href=\"{{ url('/') }}\">{{ $faqIsEn ? 'Home' : 'Utama' }}</a>\r\n            <span>/</span>\r\n            <span>Media</span>\r\n            <span>/</span>\r\n            <span>{{ $faqIsEn ? 'FAQ' : 'Soalan Lazim' }}</span>\r\n        </nav>\r\n\r\n        {{-- ============================== TAJUK ============================== --}}\r\n        <header class=\"faq__header\">\r\n            <h1>{{ $faqIsEn ? 'Frequently Asked Questions' : 'Soalan Lazim' }}</h1>\r\n            <p class=\"faq__lead\">\r\n                {{ $faqIsEn\r\n                    ? 'Answers to common questions about the Ministry — services, contact details, publications and media materials.'\r\n                    : 'Jawapan kepada soalan lazim berkaitan kementerian — perkhidmatan, perhubungan, penerbitan dan bahan media.' }}\r\n            </p>\r\n        </header>\r\n\r\n        {{-- ============================= CARIAN ============================= --}}\r\n        <div class=\"faq__search\">\r\n            <div class=\"faq__search-wrap\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"M20 20l-3.5-3.5\"/></svg>\r\n                <input id=\"faqSearch\" type=\"search\" autocomplete=\"off\"\r\n                       placeholder=\"{{ $faqIsEn ? 'Type a keyword…' : 'Taip kata kunci…' }}\"\r\n                       aria-label=\"{{ $faqIsEn ? 'Search questions' : 'Cari soalan' }}\">\r\n            </div>\r\n        </div>\r\n\r\n        <p class=\"faq__count\" id=\"faqCount\" data-label-all=\"{{ $faqIsEn ? 'questions' : 'soalan' }}\">\r\n            {{ $faqTotal }} {{ $faqIsEn ? 'questions' : 'soalan' }}\r\n        </p>\r\n\r\n        {{-- ============================= SENARAI ============================= --}}\r\n        @if ($faqTotal > 0)\r\n            <div class=\"faq__list\" id=\"faqList\">\r\n                @foreach ($faqItems as $faqIndex => $faqItem)\r\n                    <details class=\"faq__item\" data-q=\"{{ $faqItem['search'] }}\">\r\n                        <summary class=\"faq__q\">\r\n                            <span class=\"faq__num\">{{ $faqIndex + 1 }}</span>\r\n                            <span>{{ $faqItem['title'] }}</span>\r\n                            <svg class=\"faq__chev\" 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>\r\n                        </summary>\r\n\r\n                        <div class=\"faq__a\">\r\n                            {!! $faqItem['body'] !!}\r\n                        </div>\r\n                    </details>\r\n                @endforeach\r\n            </div>\r\n\r\n            <p class=\"faq__none\" id=\"faqNone\" hidden>\r\n                {{ $faqIsEn\r\n                    ? 'No question matches your keyword. Try another keyword, or contact us directly.'\r\n                    : 'Tiada soalan sepadan dengan kata kunci anda. Cuba kata kunci lain, atau hubungi kami terus.' }}\r\n            </p>\r\n        @else\r\n            <p class=\"faq__none\">\r\n                {{ $faqIsEn\r\n                    ? 'The FAQ content is being updated and will be published soon.'\r\n                    : 'Kandungan Soalan Lazim sedang dikemaskini dan akan diterbitkan tidak lama lagi.' }}\r\n            </p>\r\n        @endif\r\n\r\n        {{-- ========================== MASIH ADA SOALAN ========================== --}}\r\n        <aside class=\"faq__cta\">\r\n            <h2>{{ $faqIsEn ? 'Still have a question?' : 'Masih ada soalan?' }}</h2>\r\n            <p>\r\n                {{ $faqIsEn\r\n                    ? 'If your question is not listed above, reach us through any of the channels below.'\r\n                    : 'Jika soalan anda tiada dalam senarai di atas, hubungi kami melalui mana-mana saluran di bawah.' }}\r\n            </p>\r\n\r\n            <div class=\"faq__cta-grid\">\r\n                @foreach ($faqLinks as $faqLink)\r\n                    <a href=\"{{ $faqLink['url'] }}\">\r\n                        <span class=\"faq__cta-ico\" aria-hidden=\"true\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">{!! $faqLink['icon'] !!}</svg>\r\n                        </span>\r\n                        <span>\r\n                            <span class=\"faq__cta-title\">{{ $faqLink['title'] }}</span>\r\n                            <span class=\"faq__cta-desc\">{{ $faqLink['desc'] }}</span>\r\n                        </span>\r\n                    </a>\r\n                @endforeach\r\n            </div>\r\n        </aside>\r\n\r\n        {{-- =============================== NOTA =============================== --}}\r\n        <p class=\"faq__note\">\r\n            {{ $faqIsEn\r\n                ? 'Note: For enquiries by telephone, please call +603 8091 7000 during office hours (Monday – Friday, 8:00 am – 5:00 pm).'\r\n                : 'Nota: Bagi pertanyaan melalui telefon, sila hubungi +603 8091 7000 pada waktu pejabat (Isnin – Jumaat, 8:00 pagi – 5:00 petang).' }}\r\n        </p>\r\n    </div>\r\n</section>\r\n\r\n<script>\r\n(function () {\r\n    var input = document.getElementById('faqSearch');\r\n    var list = document.getElementById('faqList');\r\n    var none = document.getElementById('faqNone');\r\n    var count = document.getElementById('faqCount');\r\n\r\n    if (!input || !list) {\r\n        return;\r\n    }\r\n\r\n    var items = [].slice.call(list.querySelectorAll('.faq__item'));\r\n    var total = items.length;\r\n\r\n    input.addEventListener('input', function () {\r\n        var q = (input.value || '').toLowerCase().trim();\r\n        var shown = 0;\r\n\r\n        items.forEach(function (el) {\r\n            var hay = (el.getAttribute('data-q') || '').toLowerCase();\r\n            var hit = q === '' || hay.indexOf(q) !== -1;\r\n\r\n            el.hidden = !hit;\r\n\r\n            if (hit) {\r\n                shown++;\r\n\r\n                if (q !== '') {\r\n                    el.open = true;\r\n                }\r\n            } else {\r\n                el.open = false;\r\n            }\r\n        });\r\n\r\n        if (none) {\r\n            none.hidden = shown !== 0;\r\n        }\r\n\r\n        if (count) {\r\n            count.textContent = q === ''\r\n                ? total + ' ' + (count.getAttribute('data-label-all') || '')\r\n                : shown + ' / ' + total;\r\n        }\r\n    });\r\n})();\r\n</script>\r\n"
}