{
    "component": {
        "id": 30,
        "name": "Media Sosial NRES",
        "code": "media_sosial_nres",
        "content": "{{-- ============================================================================\n     KOMPONEN — Media Sosial NRES  (code: media_sosial_nres · #30)\n     Konsep: pautan rasmi Facebook · Instagram · YouTube · TikTok (rujukan KPWKM)\n\n     Sumber pautan: module Content Application — kategori SOCIAL_MEDIA\n                    (sumber SAMA dengan komponen footer_nres)\n                      FACEBOOK   https://www.facebook.com/nresmalaysia\n                      YOUTUBE    https://www.youtube.com/@NRESMalaysia\n                      TIKTOK     https://www.tiktok.com/@nresmalaysia\n                      INSTAGRAM  https://www.instagram.com/nresmalaysia/\n\n     Cara paparan (embed rasmi · SDK):\n       Facebook   Page Plugin rasmi + SDK JS  (div.fb-page · xfbml=1)\n       Instagram  profil embed → iframe /embed  (tanpa X-Frame-Options)\n       YouTube    feed Atom saluran → proksi pelayan /widget/social-youtube\n                  (channel ID dijejak automatik dari @handle)\n       TikTok     Creator Embed rasmi + SDK JS  (blockquote.tiktok-embed)\n\n     Nota:\n     · Jika baris SOCIAL_MEDIA tiada, kad platform itu TIDAK dipaparkan.\n     · Semua kad sama tinggi; skrol dalam kad sahaja.\n     ============================================================================ --}}\n@php\n    /* ---------------------------------------------------------------------\n     | Pautan media sosial — module Content Application (SOCIAL_MEDIA)\n     --------------------------------------------------------------------- */\n    $msRows = DB::table('content_applications')\n        ->where('application_cat', 'SOCIAL_MEDIA')\n        ->where('application_status', 'ACTIVE')\n        ->orderBy('application_sort')\n        ->orderBy('application_id')\n        ->get();\n\n    $msUrls = [];\n\n    foreach ($msRows as $msRow) {\n        $msUrls[strtoupper(trim((string) $msRow->application_code))] = trim((string) $msRow->application_url);\n    }\n\n    /* Handle (@nama) daripada URL — untuk label & atribut embed. */\n    $msHandle = function (string $url): string {\n        $path = trim((string) parse_url($url, PHP_URL_PATH), '/');\n\n        if ($path === '') {\n            return '';\n        }\n\n        $first = explode('/', $path)[0];\n\n        return $first !== '' ? (str_starts_with($first, '@') ? $first : '@'.$first) : '';\n    };\n\n    $msFb = $msUrls['FACEBOOK'] ?? '';\n    $msYt = $msUrls['YOUTUBE'] ?? '';\n    $msTt = $msUrls['TIKTOK'] ?? '';\n    $msIg = $msUrls['INSTAGRAM'] ?? '';\n\n    $msIgEmbed = $msIg !== '' ? rtrim($msIg, '/').'/embed' : '';\n\n@endphp\n\n\n<div class=\"container-xl\">\n    <section class=\"social-section mb-5\" id=\"media-sosial\"\n             data-yt=\"{{ url('/widget/social-youtube') }}\">\n        <div class=\"section-heading\">\n            <div>\n                <div class=\"section-kicker\">IKUTI KAMI</div>\n                <h2>Media Sosial</h2>\n            </div>\n            <p class=\"social-lead mb-0\">Dapatkan perkembangan terbaru dan paling relevan mengenai aktiviti NRES di sini.</p>\n        </div>\n\n        <div class=\"social-grid\">\n            {{-- ── FACEBOOK ───────────────────────────────────────────── --}}\n            @if ($msFb !== '')\n                <article class=\"social-card\" data-platform=\"facebook\">\n                    <header class=\"social-head\">\n                        <span class=\"social-ico social-ico-fb\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5H16.7V4.6c-.3-.04-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.22v2.21H7.4V14h2.72v8z\"/></svg>\n                        </span>\n                        <div class=\"social-meta\">\n                            <strong>Facebook</strong>\n                            <em>{{ $msHandle($msFb) ?: 'Facebook' }}</em>\n                        </div>\n                    </header>\n\n                    <div class=\"social-body social-body-fb\">\n                        {{-- Widget rasmi Facebook: Page Plugin + SDK JS. --}}\n                        <div id=\"fb-root\"></div>\n                        <div class=\"fb-page\" data-href=\"{{ $msFb }}\"\n                             data-tabs=\"timeline\" data-width=\"500\" data-height=\"560\"\n                             data-small-header=\"false\" data-adapt-container-width=\"true\"\n                             data-hide-cover=\"false\" data-show-facepile=\"true\">\n                            <blockquote cite=\"{{ $msFb }}\" class=\"fb-xfbml-parse-ignore\">\n                                <a href=\"{{ $msFb }}\">{{ $msHandle($msFb) ?: 'Facebook' }}</a>\n                            </blockquote>\n                        </div>\n                    </div>\n\n                    <footer class=\"social-foot\">\n                        <a href=\"{{ $msFb }}\" target=\"_blank\" rel=\"noopener\">Lihat di Facebook</a>\n                    </footer>\n                </article>\n            @endif\n\n            {{-- ── INSTAGRAM (baris 1 bersama Facebook) ───────────────── --}}\n            @if ($msIg !== '')\n                <article class=\"social-card\" data-platform=\"instagram\">\n                    <header class=\"social-head\">\n                        <span class=\"social-ico social-ico-ig\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.2c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9s.68.82.9 1.38c.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38s-.82.68-1.38.9c-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9c-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38s.82-.68 1.38-.9c.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2m0 5.6a4.2 4.2 0 1 0 0 8.4 4.2 4.2 0 0 0 0-8.4m0 6.93a2.73 2.73 0 1 1 0-5.46 2.73 2.73 0 0 1 0 5.46m5.34-7.1a.98.98 0 1 1-1.96 0 .98.98 0 0 1 1.96 0\"/></svg>\n                        </span>\n                        <div class=\"social-meta\">\n                            <strong>Instagram</strong>\n                            <em>{{ $msHandle($msIg) ?: 'Instagram' }}</em>\n                        </div>\n                    </header>\n\n                    <div class=\"social-body social-body-ig\">\n                        <iframe src=\"{{ $msIgEmbed }}\" title=\"Instagram {{ $msHandle($msIg) }}\"\n                                loading=\"lazy\" allowtransparency=\"true\" allowfullscreen\n                                referrerpolicy=\"no-referrer-when-downgrade\" scrolling=\"no\"></iframe>\n                    </div>\n\n                    <footer class=\"social-foot\">\n                        <a href=\"{{ $msIg }}\" target=\"_blank\" rel=\"noopener\">Ikuti di Instagram</a>\n                    </footer>\n                </article>\n            @endif\n\n            {{-- ── YOUTUBE ────────────────────────────────────────────── --}}\n            @if ($msYt !== '')\n                <article class=\"social-card\" data-platform=\"youtube\">\n                    <header class=\"social-head\">\n                        <span class=\"social-ico social-ico-yt\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77C22 15.2 22 12 22 12s0-3.2-.4-4.8M10 15V9l5.2 3z\"/></svg>\n                        </span>\n                        <div class=\"social-meta\">\n                            <strong>YouTube</strong>\n                            <em>{{ $msHandle($msYt) ?: 'YouTube' }}</em>\n                        </div>\n                    </header>\n\n                    <div class=\"social-body social-body-yt\">\n                        <div class=\"yt-grid\" data-yt-grid>\n                            <p class=\"social-note\">Memuatkan video…</p>\n                        </div>\n                    </div>\n\n                    <footer class=\"social-foot\">\n                        <a href=\"{{ $msYt }}\" target=\"_blank\" rel=\"noopener\">Langgan saluran</a>\n                    </footer>\n                </article>\n            @endif\n\n            {{-- ── TIKTOK ─────────────────────────────────────────────── --}}\n            @if ($msTt !== '')\n                <article class=\"social-card\" data-platform=\"tiktok\">\n                    <header class=\"social-head\">\n                        <span class=\"social-ico social-ico-tt\" aria-hidden=\"true\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16.6 5.82A4.28 4.28 0 0 1 15.54 3h-3.1v12.4a2.6 2.6 0 1 1-1.86-2.5V9.7a5.7 5.7 0 1 0 4.96 5.65V8.9a7.3 7.3 0 0 0 4.26 1.37V7.16a4.3 4.3 0 0 1-3.2-1.34\"/></svg>\n                        </span>\n                        <div class=\"social-meta\">\n                            <strong>TikTok</strong>\n                            <em>{{ $msHandle($msTt) ?: 'TikTok' }}</em>\n                        </div>\n                    </header>\n\n                    <div class=\"social-body social-body-tt\">\n                        {{-- Creator Embed rasmi TikTok (SDK embed.js). --}}\n                        <div class=\"tt-wrap\">\n                            <blockquote class=\"tiktok-embed\" cite=\"{{ $msTt }}\"\n                                        data-unique-id=\"{{ ltrim($msHandle($msTt), '@') }}\"\n                                        data-embed-type=\"creator\">\n                                <section>\n                                    <a target=\"_blank\" rel=\"noopener\"\n                                       href=\"{{ $msTt }}?refer=creator_embed\">{{ $msHandle($msTt) }}</a>\n                                </section>\n                            </blockquote>\n                        </div>\n                    </div>\n\n                    <footer class=\"social-foot\">\n                        <a href=\"{{ $msTt }}\" target=\"_blank\" rel=\"noopener\">Ikuti di TikTok</a>\n                    </footer>\n                </article>\n            @endif\n        </div>\n\n        @if ($msFb === '' && $msYt === '' && $msTt === '' && $msIg === '')\n            <p class=\"social-note mb-0\">Tiada pautan media sosial didaftarkan (module Content Application → kategori <em>Social Media</em>).</p>\n        @endif\n    </section>\n</div>\n\n\n{{-- SDK JS rasmi Facebook — menukar div.fb-page di atas kepada Page Plugin. --}}\n<script async defer crossorigin=\"anonymous\"\n        src=\"https://connect.facebook.net/ms_MY/sdk.js#xfbml=1&amp;version=v21.0\"></script>\n\n{{-- SDK JS rasmi TikTok — menukar blockquote.tiktok-embed di atas kepada embed. --}}\n<script async src=\"https://www.tiktok.com/embed.js\"></script>\n\n\n<style>\n    /* ── tajuk seksyen ─────────────────────────────────────────────── */\n    .social-section {\n        padding: 22px 24px;\n        border: 1px solid #dbe7e9;\n        border-radius: 16px;\n        background: #fff;\n        box-shadow: 0 10px 26px rgba(16, 62, 56, .06);\n    }\n\n    .section-heading {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 18px;\n    }\n\n    .section-kicker {\n        color: #11808f;\n        font-size: .74rem;\n        font-weight: 800;\n        letter-spacing: .08em;\n    }\n\n    .section-heading h2 {\n        margin: 4px 0 0;\n        color: #14413a;\n        font-size: 1.35rem;\n        font-weight: 800;\n    }\n\n    .social-lead {\n        max-width: 560px;\n        color: #5c7370;\n        font-size: .88rem;\n    }\n\n    .social-note {\n        color: #7b8f8c;\n        font-size: .82rem;\n    }\n\n    /* ── grid 2×2: baris 1 = Facebook + Instagram · baris 2 = YouTube + TikTok ── */\n    .social-grid {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 18px;\n    }\n\n    @media (max-width: 767.98px) {\n        .social-grid { grid-template-columns: minmax(0, 1fr); }\n    }\n\n    /* ── kad ───────────────────────────────────────────────────────── */\n    .social-card {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        border: 1px solid #e2edee;\n        border-radius: 14px;\n        background: #fbfdfd;\n    }\n\n    .social-head {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 12px 14px;\n        border-bottom: 1px solid #eef4f5;\n        background: #fff;\n    }\n\n    .social-ico {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 34px;\n        height: 34px;\n        flex: 0 0 34px;\n        border-radius: 10px;\n        color: #fff;\n    }\n\n    .social-ico svg { width: 19px; height: 19px; }\n\n    .social-ico-fb { background: #1877f2; }\n    .social-ico-yt { background: #ff0000; }\n    .social-ico-tt { background: #010101; }\n    .social-ico-ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }\n\n    .social-meta { display: flex; flex-direction: column; min-width: 0; }\n    .social-meta strong { color: #14413a; font-size: .9rem; font-weight: 800; }\n    .social-meta em {\n        overflow: hidden;\n        color: #7b8f8c;\n        font-size: .76rem;\n        font-style: normal;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .social-body {\n        height: 560px;\n        padding: 0;\n        overflow: hidden;\n        background: #fff;\n    }\n\n    /* ── Facebook: Page Plugin rasmi (SDK JS) ──────────────────────── */\n    .social-body-fb { overflow: hidden; }\n\n    .fb-page,\n    .fb-page span,\n    .fb-page iframe[style] {\n        width: 100% !important;\n    }\n\n    .fb-page iframe {\n        display: block;\n        border: 0;\n    }\n\n    .social-body-ig iframe {\n        display: block;\n        width: 100%;\n        height: 100%;\n        border: 0;\n    }\n\n    /* ── TikTok: Creator Embed rasmi (SDK embed.js) ────────────────── */\n    .social-body-tt { overflow-y: auto; }\n\n    /* Sembunyi teks mentah daripada TikTok; iframe embed tidak terjejas. */\n    .tt-wrap { min-height: 100%; font-size: 0; }\n\n    .tt-wrap iframe { font-size: initial; }\n\n    .tt-wrap blockquote.tiktok-embed {\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        margin: 0;\n    }\n\n    .social-foot {\n        margin-top: auto;\n        padding: 10px 14px;\n        border-top: 1px solid #eef4f5;\n        background: #fff;\n        text-align: center;\n    }\n\n    .social-foot a {\n        color: #0c6a77;\n        font-size: .8rem;\n        font-weight: 800;\n        text-decoration: none;\n    }\n\n    .social-foot a:hover { text-decoration: underline; }\n</style>\n\n\n<style>\n    /* ── senarai video YouTube ─────────────────────────────────────── */\n    .yt-grid {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        overflow: auto;\n    }\n\n    .yt-item {\n        display: flex;\n        gap: 10px;\n        padding: 10px 12px;\n        border-bottom: 1px solid #f1f6f6;\n        text-decoration: none;\n    }\n\n    .yt-item:hover { background: #f4fafa; }\n\n    .yt-thumb {\n        position: relative;\n        flex: 0 0 104px;\n        width: 104px;\n        height: 59px;\n        overflow: hidden;\n        border-radius: 8px;\n        background: #eef4f5;\n    }\n\n    .yt-thumb img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .yt-info { min-width: 0; }\n\n    .yt-info b {\n        display: -webkit-box;\n        overflow: hidden;\n        color: #14413a;\n        font-size: .78rem;\n        font-weight: 700;\n        line-height: 1.35;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n    }\n\n    .yt-info em {\n        display: block;\n        margin-top: 3px;\n        color: #8ba09d;\n        font-size: .68rem;\n        font-style: normal;\n    }\n</style>\n\n\n<script>\n    (function () {\n        'use strict';\n\n        var esc = function (s) {\n            return String(s === null || s === undefined ? '' : s).replace(/[&<>\"']/g, function (c) {\n                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[c];\n            });\n        };\n\n        /* ── 1. Senarai video YouTube (proksi pelayan) ────────────── */\n        var ytSec = document.getElementById('media-sosial');\n        var ytGrid = document.querySelector('[data-yt-grid]');\n\n        if (ytSec && ytGrid && ytSec.dataset.yt) {\n            var ytEmpty = '<p class=\"social-note\" style=\"padding:14px\">Video tidak dapat dimuatkan.</p>';\n\n            var fmtDate = function (iso) {\n                var d = new Date(iso);\n\n                return isNaN(d.getTime()) ? '' : d.toLocaleDateString('ms-MY', { day: 'numeric', month: 'short', year: 'numeric' });\n            };\n\n            fetch(ytSec.dataset.yt + '?limit=8')\n                .then(function (r) { return r.json(); })\n                .then(function (d) {\n                    if (!d || !d.ok || !d.videos || !d.videos.length) {\n                        ytGrid.innerHTML = ytEmpty;\n\n                        return;\n                    }\n\n                    ytGrid.innerHTML = d.videos.map(function (v) {\n                        return '<a class=\"yt-item\" href=\"' + esc(v.url) + '\" target=\"_blank\" rel=\"noopener\">' +\n                            '<span class=\"yt-thumb\"><img src=\"' + esc(v.thumb) + '\" alt=\"\" loading=\"lazy\"></span>' +\n                            '<span class=\"yt-info\"><b>' + esc(v.title) + '</b>' +\n                            '<em>' + esc(fmtDate(v.published)) + '</em></span>' +\n                            '</a>';\n                    }).join('');\n                })\n                .catch(function () {\n                    ytGrid.innerHTML = ytEmpty;\n                });\n        }\n    })();\n</script>\n\n",
        "type": "PHP",
        "category": "Section",
        "status": 1,
        "created_at": "2026-11-01 16:19:08",
        "updated_at": "2026-11-01 19:43:39"
    },
    "pages": [
        {
            "id": 98,
            "page_fk": 22,
            "component_fk": 30,
            "sort": 7,
            "params": null,
            "created_at": "2026-11-01 17:17:03",
            "updated_at": "2026-11-01 17:17:03"
        }
    ]
}