{{-- ============================================================================
     KOMPONEN — Media Sosial NRES  (code: media_sosial_nres · #30)
     Konsep: pautan rasmi Facebook · Instagram · YouTube · TikTok (rujukan KPWKM)

     Sumber pautan: module Content Application — kategori SOCIAL_MEDIA
                    (sumber SAMA dengan komponen footer_nres)
                      FACEBOOK   https://www.facebook.com/nresmalaysia
                      YOUTUBE    https://www.youtube.com/@NRESMalaysia
                      TIKTOK     https://www.tiktok.com/@nresmalaysia
                      INSTAGRAM  https://www.instagram.com/nresmalaysia/

     Cara paparan (embed rasmi · SDK):
       Facebook   Page Plugin rasmi + SDK JS  (div.fb-page · xfbml=1)
       Instagram  profil embed → iframe /embed  (tanpa X-Frame-Options)
       YouTube    feed Atom saluran → proksi pelayan /widget/social-youtube
                  (channel ID dijejak automatik dari @handle)
       TikTok     kad "Buka di TikTok" — TikTok tidak menyokong embed profil

     Nota:
     · Jika baris SOCIAL_MEDIA tiada, kad platform itu TIDAK dipaparkan.
     · Semua kad sama tinggi; skrol dalam kad sahaja.
     ============================================================================ --}}
@php
    /* ---------------------------------------------------------------------
     | Pautan media sosial — module Content Application (SOCIAL_MEDIA)
     --------------------------------------------------------------------- */
    $msRows = DB::table('content_applications')
        ->where('application_cat', 'SOCIAL_MEDIA')
        ->where('application_status', 'ACTIVE')
        ->orderBy('application_sort')
        ->orderBy('application_id')
        ->get();

    $msUrls = [];

    foreach ($msRows as $msRow) {
        $msUrls[strtoupper(trim((string) $msRow->application_code))] = trim((string) $msRow->application_url);
    }

    /* Handle (@nama) daripada URL — untuk label & atribut embed. */
    $msHandle = function (string $url): string {
        $path = trim((string) parse_url($url, PHP_URL_PATH), '/');

        if ($path === '') {
            return '';
        }

        $first = explode('/', $path)[0];

        return $first !== '' ? (str_starts_with($first, '@') ? $first : '@'.$first) : '';
    };

    $msFb = $msUrls['FACEBOOK'] ?? '';
    $msYt = $msUrls['YOUTUBE'] ?? '';
    $msTt = $msUrls['TIKTOK'] ?? '';
    $msIg = $msUrls['INSTAGRAM'] ?? '';

    $msIgEmbed = $msIg !== '' ? rtrim($msIg, '/').'/embed' : '';

@endphp


<div class="container-xl">
    <section class="social-section mb-5" id="media-sosial"
             data-yt="{{ url('/widget/social-youtube') }}">
        <div class="section-heading">
            <div>
                <div class="section-kicker">IKUTI KAMI</div>
                <h2>Media Sosial</h2>
            </div>
            <p class="social-lead mb-0">Dapatkan perkembangan terbaru dan paling relevan mengenai aktiviti NRES di sini.</p>
        </div>

        <div class="social-grid">
            {{-- ── FACEBOOK ───────────────────────────────────────────── --}}
            @if ($msFb !== '')
                <article class="social-card" data-platform="facebook">
                    <header class="social-head">
                        <span class="social-ico social-ico-fb" aria-hidden="true">
                            <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>
                        </span>
                        <div class="social-meta">
                            <strong>Facebook</strong>
                            <em>{{ $msHandle($msFb) ?: 'Facebook' }}</em>
                        </div>
                    </header>

                    <div class="social-body social-body-fb">
                        {{-- Widget rasmi Facebook: Page Plugin + SDK JS. --}}
                        <div id="fb-root"></div>
                        <div class="fb-page" data-href="{{ $msFb }}"
                             data-tabs="timeline" data-width="300" data-height="460"
                             data-small-header="false" data-adapt-container-width="true"
                             data-hide-cover="false" data-show-facepile="true">
                            <blockquote cite="{{ $msFb }}" class="fb-xfbml-parse-ignore">
                                <a href="{{ $msFb }}">{{ $msHandle($msFb) ?: 'Facebook' }}</a>
                            </blockquote>
                        </div>
                    </div>

                    <footer class="social-foot">
                        <a href="{{ $msFb }}" target="_blank" rel="noopener">Lihat di Facebook</a>
                    </footer>
                </article>
            @endif

            {{-- ── INSTAGRAM (baris 1 bersama Facebook) ───────────────── --}}
            @if ($msIg !== '')
                <article class="social-card" data-platform="instagram">
                    <header class="social-head">
                        <span class="social-ico social-ico-ig" aria-hidden="true">
                            <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>
                        </span>
                        <div class="social-meta">
                            <strong>Instagram</strong>
                            <em>{{ $msHandle($msIg) ?: 'Instagram' }}</em>
                        </div>
                    </header>

                    <div class="social-body social-body-ig">
                        <iframe src="{{ $msIgEmbed }}" title="Instagram {{ $msHandle($msIg) }}"
                                loading="lazy" allowtransparency="true" allowfullscreen
                                referrerpolicy="no-referrer-when-downgrade" scrolling="no"></iframe>
                    </div>

                    <footer class="social-foot">
                        <a href="{{ $msIg }}" target="_blank" rel="noopener">Ikuti di Instagram</a>
                    </footer>
                </article>
            @endif

            {{-- ── YOUTUBE ────────────────────────────────────────────── --}}
            @if ($msYt !== '')
                <article class="social-card" data-platform="youtube">
                    <header class="social-head">
                        <span class="social-ico social-ico-yt" aria-hidden="true">
                            <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>
                        </span>
                        <div class="social-meta">
                            <strong>YouTube</strong>
                            <em>{{ $msHandle($msYt) ?: 'YouTube' }}</em>
                        </div>
                    </header>

                    <div class="social-body social-body-yt">
                        <div class="yt-grid" data-yt-grid>
                            <p class="social-note">Memuatkan video…</p>
                        </div>
                    </div>

                    <footer class="social-foot">
                        <a href="{{ $msYt }}" target="_blank" rel="noopener">Langgan saluran</a>
                    </footer>
                </article>
            @endif

            {{-- ── TIKTOK ─────────────────────────────────────────────── --}}
            @if ($msTt !== '')
                <article class="social-card" data-platform="tiktok">
                    <header class="social-head">
                        <span class="social-ico social-ico-tt" aria-hidden="true">
                            <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>
                        </span>
                        <div class="social-meta">
                            <strong>TikTok</strong>
                            <em>{{ $msHandle($msTt) ?: 'TikTok' }}</em>
                        </div>
                    </header>

                    <div class="social-body social-body-tt">
                        {{-- Kad "Buka di TikTok" — TikTok tidak menyokong embed
                             profil; embed akan memapar mesej ralat. --}}
                        <div class="tt-open">
                            <span class="tt-open-mark" aria-hidden="true">
                                <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>
                            </span>
                            <strong>{{ $msHandle($msTt) ?: 'TikTok' }}</strong>
                            <em>Video terbaru NRES boleh ditonton di TikTok</em>
                            <a class="tt-open-btn" href="{{ $msTt }}" target="_blank" rel="noopener">Buka di TikTok</a>
                        </div>
                    </div>

                    <footer class="social-foot">
                        <a href="{{ $msTt }}" target="_blank" rel="noopener">Ikuti di TikTok</a>
                    </footer>
                </article>
            @endif
        </div>

        @if ($msFb === '' && $msYt === '' && $msTt === '' && $msIg === '')
            <p class="social-note mb-0">Tiada pautan media sosial didaftarkan (module Content Application → kategori <em>Social Media</em>).</p>
        @endif
    </section>
</div>


{{-- SDK JS rasmi Facebook — menukar div.fb-page di atas kepada Page Plugin. --}}
<script async defer crossorigin="anonymous"
        src="https://connect.facebook.net/ms_MY/sdk.js#xfbml=1&amp;version=v21.0"></script>


<style>
    /* ── tajuk seksyen ─────────────────────────────────────────────── */
    .social-section {
        padding: 22px 24px;
        border: 1px solid #dbe7e9;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(16, 62, 56, .06);
    }

    .section-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }

    .section-kicker {
        color: #11808f;
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .08em;
    }

    .section-heading h2 {
        margin: 4px 0 0;
        color: #14413a;
        font-size: 1.35rem;
        font-weight: 800;
    }

    .social-lead {
        max-width: 560px;
        color: #5c7370;
        font-size: .88rem;
    }

    .social-note {
        color: #7b8f8c;
        font-size: .82rem;
    }

    /* ── grid: 4 kad dalam SATU baris (2 pada tablet · 1 pada telefon) ── */
    .social-grid {
        --social-body-h: 460px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    @media (max-width: 1199.98px) {
        .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 767.98px) {
        .social-grid { grid-template-columns: minmax(0, 1fr); }
    }

    /* ── kad ───────────────────────────────────────────────────────── */
    .social-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #e2edee;
        border-top: 3px solid #dbe7e9;
        border-radius: 16px;
        background: #fbfdfd;
        box-shadow: 0 4px 14px rgba(16, 62, 56, .05);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .social-card:hover {
        box-shadow: 0 12px 28px rgba(16, 62, 56, .12);
        transform: translateY(-2px);
    }

    .social-card[data-platform="facebook"] { border-top-color: #1877f2; }
    .social-card[data-platform="instagram"] { border-top-color: #dc2743; }
    .social-card[data-platform="youtube"] { border-top-color: #ff0000; }
    .social-card[data-platform="tiktok"] { border-top-color: #010101; }

    .social-head {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 12px;
        border-bottom: 1px solid #eef4f5;
        background: #fff;
    }

    .social-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 9px;
        color: #fff;
    }

    .social-ico svg { width: 18px; height: 18px; }

    .social-ico-fb { background: #1877f2; }
    .social-ico-yt { background: #ff0000; }
    .social-ico-tt { background: #010101; }
    .social-ico-ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }

    .social-meta { display: flex; flex-direction: column; min-width: 0; }
    .social-meta strong { color: #14413a; font-size: .86rem; font-weight: 800; }
    .social-meta em {
        overflow: hidden;
        color: #7b8f8c;
        font-size: .72rem;
        font-style: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .social-body {
        height: var(--social-body-h);
        padding: 0;
        overflow: hidden;
        background: #fff;
    }

    /* ── Facebook: Page Plugin rasmi (SDK JS) ──────────────────────── */
    .social-body-fb { overflow: hidden; }

    .fb-page,
    .fb-page span,
    .fb-page iframe[style] {
        width: 100% !important;
    }

    .fb-page iframe {
        display: block;
        border: 0;
    }

    .social-body-ig iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* ── TikTok: kad "Buka di TikTok" ─────────────────────────────── */
    .social-body-tt { overflow: hidden; }

    .tt-open {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 100%;
        padding: 22px 18px;
        text-align: center;
        background: linear-gradient(180deg, #fafdfd, #f2f9f9);
    }

    .tt-open-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 15px;
        background: #010101;
        color: #fff;
    }

    .tt-open-mark svg { width: 26px; height: 26px; }

    .tt-open strong { color: #14413a; font-size: .95rem; font-weight: 800; }
    .tt-open em { color: #6d8481; font-size: .78rem; font-style: normal; }

    .tt-open-btn {
        margin-top: 6px;
        padding: 9px 18px;
        border-radius: 999px;
        background: #010101;
        color: #fff;
        font-size: .8rem;
        font-weight: 800;
        text-decoration: none;
    }

    .tt-open-btn:hover { background: #232323; }

    .social-foot {
        margin-top: auto;
        padding: 9px 12px;
        border-top: 1px solid #eef4f5;
        background: #fff;
        text-align: center;
    }

    .social-foot a {
        color: #0c6a77;
        font-size: .8rem;
        font-weight: 800;
        text-decoration: none;
    }

    .social-foot a:hover { text-decoration: underline; }
</style>


<style>
    /* ── senarai video YouTube ─────────────────────────────────────── */
    .yt-grid {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
    }

    .yt-item {
        display: flex;
        gap: 9px;
        padding: 9px 11px;
        border-bottom: 1px solid #f1f6f6;
        text-decoration: none;
    }

    .yt-item:hover { background: #f4fafa; }

    .yt-thumb {
        position: relative;
        flex: 0 0 92px;
        width: 92px;
        height: 52px;
        overflow: hidden;
        border-radius: 7px;
        background: #eef4f5;
    }

    .yt-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .yt-info { min-width: 0; }

    .yt-info b {
        display: -webkit-box;
        overflow: hidden;
        color: #14413a;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .yt-info em {
        display: block;
        margin-top: 3px;
        color: #8ba09d;
        font-size: .68rem;
        font-style: normal;
    }
</style>


<script>
    (function () {
        'use strict';

        var esc = function (s) {
            return String(s === null || s === undefined ? '' : s).replace(/[&<>"']/g, function (c) {
                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
            });
        };

        /* ── 1. Senarai video YouTube (proksi pelayan) ────────────── */
        var ytSec = document.getElementById('media-sosial');
        var ytGrid = document.querySelector('[data-yt-grid]');

        if (ytSec && ytGrid && ytSec.dataset.yt) {
            var ytEmpty = '<p class="social-note" style="padding:14px">Video tidak dapat dimuatkan.</p>';

            var fmtDate = function (iso) {
                var d = new Date(iso);

                return isNaN(d.getTime()) ? '' : d.toLocaleDateString('ms-MY', { day: 'numeric', month: 'short', year: 'numeric' });
            };

            fetch(ytSec.dataset.yt + '?limit=8')
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (!d || !d.ok || !d.videos || !d.videos.length) {
                        ytGrid.innerHTML = ytEmpty;

                        return;
                    }

                    ytGrid.innerHTML = d.videos.map(function (v) {
                        return '<a class="yt-item" href="' + esc(v.url) + '" target="_blank" rel="noopener">' +
                            '<span class="yt-thumb"><img src="' + esc(v.thumb) + '" alt="" loading="lazy"></span>' +
                            '<span class="yt-info"><b>' + esc(v.title) + '</b>' +
                            '<em>' + esc(fmtDate(v.published)) + '</em></span>' +
                            '</a>';
                    }).join('');
                })
                .catch(function () {
                    ytGrid.innerHTML = ytEmpty;
                });
        }
    })();
</script>