{{-- ============================================================================
     PAGE CONTENT — Galeri (Foto & Video)
     Site  : nres  ·  Page slug: gallery  ·  Page ID: 30
     Sumber: modul media
             · content_photo_gallery (+ _translations) → album foto
             · content_photo_list                      → foto dalam album
             · content_video (+ _translation)          → video
     Konsep: https://redd.nres.gov.my/redd-plus/gallery
             (tab Foto / Video + album + lightbox + pemain video)

     Parameter URL:
       tab        foto (lalai) | video
       kategori   kod GALLERY_CAT (EVENT/ACTIVITY/FACILITY/STAFF/OTHER) — tab foto
       album      id album → papar foto dalam album itu
       video      id video → auto-buka pemain

     Nota:
     · SEMUA logik + markup + CSS + JS ada dalam fail ini — tiada komponen, tiada partial.
     · Album: gallery_status = ACTIVE. Foto: photo_main = 1 (baris induk, bukan terjemahan).
     · Video: video_status = ACTIVE. Jenis ikut video_category:
         YOUTUBE  → video_url (embed URL) dipaparkan dalam <iframe>
         UPLOAD   → video_upload (fail pada disk 'public') dipaparkan dalam <video>
         EXTERNAL → video_external: .mp4/.webm → <video>, pautan YouTube → embed, lain → pautan luar
     · Media disimpan pada disk 'public' → URL = asset('storage/'.$path).
     · Warna guna CSS variable tema (--teal/--green/--fade/--line/--ink) → sokong dark mode.
     ============================================================================ --}}

@php
    /* --------------------------------------------------------------------
     | 1. Parameter & konteks
     -------------------------------------------------------------------- */
    $galBase    = url()->current();
    $galQuery   = request()->query();
    $galLang    = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';

    $galTab     = (string) ($galQuery['tab'] ?? 'foto');
    $galTab     = in_array($galTab, ['foto', 'video'], true) ? $galTab : 'foto';

    $galKat     = (string) ($galQuery['kategori'] ?? '');
    $galAlbumId = (int) ($galQuery['album'] ?? 0);
    $galVideoId = (int) ($galQuery['video'] ?? 0);

    // URL media: http → kekal; 'dynaweb4/...' → aset awam; lain → disk 'public'
    $galMedia = function ($path) {
        $path = trim((string) $path);

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

        if (str_starts_with($path, 'http://') || str_starts_with($path, 'https://')) {
            return $path;
        }

        if (str_starts_with($path, 'dynaweb4/')) {
            return asset($path);
        }

        return asset('storage/'.ltrim($path, '/'));
    };

    $galTabUrl = fn (string $key) => url()->current().'?tab='.$key;

    $galUrl = function (array $params = []) use ($galBase, $galTab, $galKat, $galAlbumId, $galVideoId) {
        $query = array_filter([
            'tab'      => array_key_exists('tab', $params) ? $params['tab'] : $galTab,
            'kategori' => array_key_exists('kategori', $params) ? $params['kategori'] : $galKat,
            'album'    => array_key_exists('album', $params) ? $params['album'] : ($galAlbumId ?: null),
            'video'    => array_key_exists('video', $params) ? $params['video'] : null,
        ], fn ($v) => $v !== null && $v !== '');

        return $query ? $galBase.'?'.http_build_query($query) : $galBase;
    };

    /* --------------------------------------------------------------------
     | 2. Rujukan kategori album (GALLERY_CAT) + warna
     -------------------------------------------------------------------- */
    $galCatLabel = [];

    foreach (DB::table('ref')->where('cat', 'GALLERY_CAT')->orderBy('sort')->get() as $galRef) {
        $galCatLabel[(string) $galRef->code] = $galLang === 'en'
            ? ((string) ($galRef->descr_en ?: $galRef->descr))
            : ((string) ($galRef->descr ?: $galRef->descr_en));
    }

    $galCatColor = [
        'EVENT'    => '#11808f',
        'ACTIVITY' => '#165c4a',
        'FACILITY' => '#b45309',
        'STAFF'    => '#6d28d9',
        'OTHER'    => '#64748b',
    ];

    if ($galKat !== '' && ! isset($galCatLabel[$galKat])) {
        $galKat = '';
    }

    $galCatName = fn ($code) => $galCatLabel[(string) $code] ?? (string) $code;
    $galCatTint = fn ($code) => $galCatColor[(string) $code] ?? '#64748b';

    // Tarikh paparan: gallery_date disimpan sebagai teks — cuba format, jika gagal kekal asal
    $galDate = function ($value) use ($galLang) {
        $value = trim((string) $value);

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

        try {
            $months = $galLang === 'en'
                ? [1 => 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
                : [1 => 'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'];

            $date = \Carbon\Carbon::parse($value);

            return $date->day.' '.$months[(int) $date->month].' '.$date->year;
        } catch (\Throwable $e) {
            return $value;
        }
    };
    /* --------------------------------------------------------------------
     | 3. Album foto (aktif) + kiraan foto + terjemahan
     -------------------------------------------------------------------- */
    $galAlbums = DB::table('content_photo_gallery')
        ->where('gallery_status', 'ACTIVE')
        ->when($galKat !== '', fn ($q) => $q->where('gallery_cat', $galKat))
        ->orderBy('gallery_sort')
        ->orderByDesc('gallery_date')
        ->orderByDesc('gallery_id')
        ->get();

    $galAlbumIds = $galAlbums->pluck('gallery_id')->all();

    $galAlbumTr = $galAlbumIds
        ? DB::table('content_photo_gallery_translations')
            ->whereIn('gallery_translation_parent_id', $galAlbumIds)
            ->get()
            ->groupBy('gallery_translation_parent_id')
        : collect();

    $galPhotoCount = $galAlbumIds
        ? DB::table('content_photo_list')
            ->whereIn('photo_gallery_id', $galAlbumIds)
            ->where(function ($q) {
                $q->whereNull('photo_main')->orWhere('photo_main', 1);
            })
            ->selectRaw('photo_gallery_id, COUNT(*) as total')
            ->groupBy('photo_gallery_id')
            ->pluck('total', 'photo_gallery_id')
        : collect();

    $galAlbumVm = [];

    foreach ($galAlbums as $galRow) {
        $galTr = $galAlbumTr[$galRow->gallery_id] ?? collect();
        $galTr = $galTr->firstWhere('gallery_translation_language', $galLang)
            ?? $galTr->firstWhere('gallery_translation_main', 1)
            ?? $galTr->first();

        $galAlbumVm[] = [
            'id'       => (int) $galRow->gallery_id,
            'title'    => (string) ($galTr->gallery_translation_title ?? ''),
            'descr'    => (string) ($galTr->gallery_translation_descr ?? ''),
            'cat'      => (string) ($galRow->gallery_cat ?? ''),
            'date'     => $galDate($galRow->gallery_date),
            'location' => (string) ($galRow->gallery_location ?? ''),
            'thumb'    => $galMedia($galRow->gallery_thumbnail),
            'count'    => (int) ($galPhotoCount[$galRow->gallery_id] ?? 0),
        ];
    }

    /* --------------------------------------------------------------------
     | 4. Album terpilih + senarai foto
     -------------------------------------------------------------------- */
    $galCurrent = null;
    $galPhotos  = [];

    if ($galAlbumId) {
        $galRow = DB::table('content_photo_gallery')
            ->where('gallery_id', $galAlbumId)
            ->where('gallery_status', 'ACTIVE')
            ->first();

        if ($galRow) {
            $galTrRows = DB::table('content_photo_gallery_translations')
                ->where('gallery_translation_parent_id', $galAlbumId)
                ->get();

            $galTrRows = $galTrRows->firstWhere('gallery_translation_language', $galLang)
                ?? $galTrRows->firstWhere('gallery_translation_main', 1)
                ?? $galTrRows->first();

            $galCurrent = [
                'id'       => (int) $galRow->gallery_id,
                'title'    => (string) ($galTrRows->gallery_translation_title ?? ''),
                'descr'    => (string) ($galTrRows->gallery_translation_descr ?? ''),
                'cat'      => (string) ($galRow->gallery_cat ?? ''),
                'date'     => $galDate($galRow->gallery_date),
                'location' => (string) ($galRow->gallery_location ?? ''),
            ];

            $galPhotoRows = DB::table('content_photo_list')
                ->where('photo_gallery_id', $galAlbumId)
                ->where(function ($q) {
                    $q->whereNull('photo_main')->orWhere('photo_main', 1);
                })
                ->orderBy('photo_sort')
                ->orderBy('photo_id')
                ->get();

            // Keterangan terjemahan (baris anak: photo_parent_id = photo_id)
            $galPhotoTr = $galPhotoRows->isNotEmpty()
                ? DB::table('content_photo_list')
                    ->whereIn('photo_parent_id', $galPhotoRows->pluck('photo_id')->all())
                    ->get()
                    ->groupBy('photo_parent_id')
                : collect();

            foreach ($galPhotoRows as $galPhotoRow) {
                $galPhotoTrRows = $galPhotoTr[$galPhotoRow->photo_id] ?? collect();
                $galPhotoTrRow  = $galPhotoTrRows->firstWhere('photo_language', $galLang);

                $galPhotos[] = [
                    'id'    => (int) $galPhotoRow->photo_id,
                    'url'   => $galMedia($galPhotoRow->photo_url),
                    'descr' => (string) ($galPhotoTrRow->photo_descr ?? $galPhotoRow->photo_descr ?? ''),
                ];
            }

            $galCurrent['count'] = count($galPhotos);
        } else {
            $galAlbumId = 0;   // album tidak sah / tidak aktif → kembali ke senarai album
        }
    }

    /* --------------------------------------------------------------------
     | 5. Video (aktif) + terjemahan
     -------------------------------------------------------------------- */
    $galVideoRows = DB::table('content_video')
        ->where('video_status', 'ACTIVE')
        ->orderBy('video_sorting')
        ->orderByDesc('video_date')
        ->orderByDesc('video_id')
        ->get();

    $galVideoIds = $galVideoRows->pluck('video_id')->all();

    $galVideoTr = $galVideoIds
        ? DB::table('content_video_translation')
            ->whereIn('video_translation_parent_id', $galVideoIds)
            ->get()
            ->groupBy('video_translation_parent_id')
        : collect();

    $galVideos = [];

    foreach ($galVideoRows as $galVideoRow) {
        $galTr = $galVideoTr[$galVideoRow->video_id] ?? collect();
        $galTr = $galTr->firstWhere('video_translation_language', $galLang)
            ?? $galTr->firstWhere('video_translation_main', 1)
            ?? $galTr->first();

        $galVideos[] = [
            'id'       => (int) $galVideoRow->video_id,
            'title'    => (string) ($galTr->video_translation_title ?? ''),
            'descr'    => (string) ($galTr->video_translation_content ?? ''),
            'location' => (string) ($galTr->video_translation_location ?? ''),
            'date'     => $galDate($galVideoRow->video_date),
            'type'     => strtoupper((string) ($galVideoRow->video_category ?? '')),
            'embed'    => (string) ($galVideoRow->video_url ?? ''),
            'upload'   => $galMedia($galVideoRow->video_upload),
            'external' => (string) ($galVideoRow->video_external ?? ''),
            'img'      => $galMedia($galVideoRow->video_img),
        ];
    }

    $galTotalAlbums = count($galAlbumVm);
    $galTotalVideos = count($galVideos);
@endphp

<style>
/* ==========================================================================
   GALERI (FOTO & VIDEO) — gaya skop .gallery (warna ikut tema, sokong dark mode)
   ========================================================================== */
.gallery{padding:34px 0 64px;color:var(--ink);font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
.gallery *,.gallery *::before,.gallery *::after{box-sizing:border-box}
.gallery__container{width:min(100% - 32px,1120px);margin:0 auto}

/* --- breadcrumb & tajuk -------------------------------------------------- */
.gallery__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;color:var(--bs-secondary-color);font-size:.85rem}
.gallery__breadcrumb a{color:var(--teal);font-weight:600;text-decoration:none}
.gallery__breadcrumb a:hover{text-decoration:underline}
.gallery__header{margin-bottom:20px}
.gallery__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}
.gallery__header h1{margin:0 0 8px;color:var(--green);font-size:clamp(1.45rem,3vw,2.05rem);font-weight:800;line-height:1.2}
.gallery__header p{margin:0;max-width:74ch;color:var(--bs-secondary-color);font-size:.95rem;line-height:1.65}

/* --- tab ----------------------------------------------------------------- */
.gallery__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.gallery__tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--bs-body-bg);color:var(--ink);font-size:.84rem;font-weight:700;text-decoration:none;transition:.18s}
.gallery__tab:hover{border-color:var(--teal);color:var(--teal)}
.gallery__tab.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
.gallery__tab svg{width:15px;height:15px}
.gallery__tab-count{padding:1px 8px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.68rem;font-weight:800}
.gallery__tab.is-active .gallery__tab-count{background:rgba(255,255,255,.25);color:#fff}

/* --- tapisan kategori ---------------------------------------------------- */
.gallery__cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.gallery__cat{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bs-body-bg);color:var(--ink);font-size:.75rem;font-weight:600;text-decoration:none;transition:.15s}
.gallery__cat:hover{border-color:var(--teal);color:var(--teal)}
.gallery__cat.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
.gallery__dot{width:8px;height:8px;border-radius:50%;background:var(--cat-color,#64748b);flex:none}
.gallery__cat.is-active .gallery__dot{background:#fff}

/* --- grid album ---------------------------------------------------------- */
.gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.gallery__album{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);overflow:hidden;text-decoration:none;color:inherit;transition:.2s}
.gallery__album:hover{border-color:var(--teal);box-shadow:0 10px 26px rgba(17,128,143,.16);transform:translateY(-2px)}
.gallery__album-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--fade),var(--line));overflow:hidden}
.gallery__album-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.gallery__album:hover .gallery__album-thumb img{transform:scale(1.04)}
.gallery__album-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--teal);opacity:.55}
.gallery__album-noimg svg{width:38px;height:38px}
.gallery__album-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;background:var(--cat-color,#64748b);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.gallery__album-count{position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(11,26,26,.72);color:#fff;font-size:.7rem;font-weight:700}
.gallery__album-count svg{width:12px;height:12px}
.gallery__album-body{padding:14px 16px 16px}
.gallery__album-title{margin:0 0 6px;color:var(--green);font-size:.95rem;font-weight:800;line-height:1.35}
.gallery__album-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin:0;padding:0;list-style:none;color:var(--bs-secondary-color);font-size:.76rem}
.gallery__album-meta li{display:inline-flex;align-items:flex-start;gap:5px}
.gallery__album-meta svg{flex:none;width:12px;height:12px;margin-top:2px;color:var(--teal)}

/* --- butiran album ------------------------------------------------------- */
.gallery__back{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;color:var(--teal);font-size:.82rem;font-weight:700;text-decoration:none}
.gallery__back:hover{text-decoration:underline}
.gallery__back svg{width:14px;height:14px}
.gallery__detail-head{margin:0 0 16px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;background:var(--bs-body-bg)}
.gallery__detail-head h2{margin:0 0 6px;color:var(--green);font-size:1.15rem;font-weight:800;line-height:1.3}
.gallery__detail-head p{margin:0 0 10px;color:var(--bs-secondary-color);font-size:.86rem;line-height:1.6}
.gallery__detail-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;color:var(--bs-secondary-color);font-size:.78rem}
.gallery__detail-meta li{display:inline-flex;align-items:flex-start;gap:6px}
.gallery__detail-meta svg{flex:none;width:13px;height:13px;margin-top:2px;color:var(--teal)}
.gallery__badge{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--cat-color,#64748b);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

/* --- grid foto ----------------------------------------------------------- */
.gallery__photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gallery__photo{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--fade);overflow:hidden;cursor:zoom-in;transition:.18s}
.gallery__photo:hover{border-color:var(--teal);box-shadow:0 8px 22px rgba(17,128,143,.16)}
.gallery__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:.25s}
.gallery__photo:hover img{transform:scale(1.05)}
.gallery__photo-zoom{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(11,26,26,.68);color:#fff;opacity:0;transition:.2s}
.gallery__photo:hover .gallery__photo-zoom{opacity:1}
.gallery__photo-zoom svg{width:14px;height:14px}

/* --- lightbox ------------------------------------------------------------ */
.gallery__lb{position:fixed;inset:0;z-index:1080;display:none;align-items:center;justify-content:center;background:rgba(6,18,18,.92);padding:24px}
.gallery__lb.is-open{display:flex}
.gallery__lb-stage{position:relative;max-width:min(100%,1120px);max-height:100%;display:flex;flex-direction:column;gap:10px;align-items:center}
.gallery__lb-img{max-width:100%;max-height:calc(100vh - 150px);border-radius:10px;background:#0b1a1a;display:block}
.gallery__lb-cap{margin:0;max-width:80ch;text-align:center;color:#e8f0ef;font-size:.85rem;line-height:1.55}
.gallery__lb-count{position:absolute;top:-34px;left:0;color:#cfe6ea;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.gallery__lb-btn{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:.15s}
.gallery__lb-btn:hover{background:rgba(255,255,255,.28)}
.gallery__lb-btn svg{width:20px;height:20px}
.gallery__lb-prev{left:-58px}
.gallery__lb-next{right:-58px}
.gallery__lb-close{position:absolute;top:-40px;right:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.gallery__lb-close:hover{background:rgba(255,255,255,.3)}
.gallery__lb-close svg{width:16px;height:16px}

/* --- grid video ---------------------------------------------------------- */
.gallery__videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gallery__video{display:flex;flex-direction:column;width:100%;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);overflow:hidden;cursor:pointer;text-align:left;color:inherit;transition:.2s}
.gallery__video:hover{border-color:var(--teal);box-shadow:0 10px 26px rgba(17,128,143,.16);transform:translateY(-2px)}
.gallery__video-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--fade),var(--line));overflow:hidden}
.gallery__video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,26,26,.28);transition:.2s}
.gallery__video:hover .gallery__video-play{background:rgba(11,26,26,.42)}
.gallery__video-play span{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--teal);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.gallery__video-play svg{width:22px;height:22px;margin-left:3px}
.gallery__video-tag{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;background:rgba(11,26,26,.72);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.gallery__video-body{padding:14px 16px 16px}
.gallery__video-title{margin:0 0 6px;color:var(--green);font-size:.93rem;font-weight:800;line-height:1.4}
.gallery__video-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin:0;padding:0;list-style:none;color:var(--bs-secondary-color);font-size:.76rem}
.gallery__video-meta li{display:inline-flex;align-items:flex-start;gap:5px}
.gallery__video-meta svg{flex:none;width:12px;height:12px;margin-top:2px;color:var(--teal)}

/* --- modal pemain video -------------------------------------------------- */
.gallery__vm{position:fixed;inset:0;z-index:1090;display:none;align-items:center;justify-content:center;background:rgba(6,18,18,.93);padding:24px}
.gallery__vm.is-open{display:flex}
.gallery__vm-stage{position:relative;width:min(100%,960px);max-height:100%;display:flex;flex-direction:column;gap:10px}
.gallery__vm-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.gallery__vm-player iframe,.gallery__vm-player video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.gallery__vm-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:#0b1a1a;color:#e8f0ef}
.gallery__vm-fallback svg{width:34px;height:34px;color:#8fd9bf}
.gallery__vm-fallback p{margin:0;font-size:.85rem;line-height:1.55;color:#cfe6ea}
.gallery__vm-info{color:#e8f0ef}
.gallery__vm-title{margin:0 0 6px;font-size:1rem;font-weight:800;line-height:1.4}
.gallery__vm-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;color:#a9c4c6;font-size:.78rem}
.gallery__vm-meta li{display:inline-flex;align-items:flex-start;gap:6px}
.gallery__vm-meta svg{flex:none;width:13px;height:13px;margin-top:2px;color:#8fd9bf}
.gallery__vm-descr{margin:8px 0 0;color:#a9c4c6;font-size:.82rem;line-height:1.6}
.gallery__vm-descr:empty{display:none}
.gallery__vm-count{position:absolute;top:-34px;left:0;color:#cfe6ea;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.gallery__btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bs-body-bg);color:var(--ink);font-size:.82rem;font-weight:700;text-decoration:none;transition:.15s}
.gallery__btn:hover{border-color:var(--teal);color:var(--teal)}
.gallery__btn--light{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff}
.gallery__btn--light:hover{border-color:#fff;background:rgba(255,255,255,.24);color:#fff}

/* --- keadaan kosong & nota ---------------------------------------------- */
.gallery__empty{padding:34px 22px;border:1px dashed var(--line);border-radius:16px;background:var(--bs-body-bg);text-align:center}
.gallery__empty svg{width:34px;height:34px;margin-bottom:10px;color:var(--teal);opacity:.7}
.gallery__empty h3{margin:0 0 6px;color:var(--green);font-size:.98rem;font-weight:800}
.gallery__empty p{max-width:56ch;margin:0 auto;color:var(--bs-secondary-color);font-size:.85rem;line-height:1.6}
.gallery__empty a{color:var(--teal);font-weight:700;text-decoration:none}
.gallery__empty a:hover{text-decoration:underline}
.gallery__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)}
.gallery__note h2{margin:0 0 8px;color:var(--green);font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.gallery__note ul{margin:0;padding-left:20px;color:var(--bs-secondary-color);font-size:.79rem;line-height:1.7}
.gallery__note li{margin-bottom:4px}
.gallery__note li:last-child{margin-bottom:0}
.gallery__note a{color:var(--teal);font-weight:700;text-decoration:none}
.gallery__note a:hover{text-decoration:underline}

/* --- responsif ----------------------------------------------------------- */
@media (max-width:1020px){
    .gallery__lb-prev{left:6px}
    .gallery__lb-next{right:6px}
    .gallery__lb-btn{background:rgba(11,26,26,.6)}
}
@media (max-width:640px){
    .gallery{padding:24px 0 46px}
    .gallery__grid,.gallery__videos{grid-template-columns:1fr}
    .gallery__photos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
    .gallery__lb,.gallery__vm{padding:14px}
    .gallery__lb-img{max-height:calc(100vh - 190px)}
}
</style>

<section class="gallery" aria-labelledby="gallery-title">
    <div class="gallery__container">

        {{-- ---------- BREADCRUMB ---------- --}}
        <nav class="gallery__breadcrumb" aria-label="Breadcrumb">
            <a href="{{ url($siteSlug.'/home') }}">{{ t('Utama') }}</a>
            <span aria-hidden="true">/</span>
            <span>{{ t('Galeri') }}</span>
        </nav>

        {{-- ---------- TAJUK ---------- --}}
        <header class="gallery__header">
            <span class="gallery__eyebrow">Media</span>
            <h1 id="gallery-title">{{ t('Galeri') }}</h1>
            <p>{{ t('gal.hero_desc') }}</p>
        </header>

        {{-- ---------- TAB: FOTO / VIDEO ---------- --}}
        <nav class="gallery__tabs" aria-label="Jenis galeri">
            <a class="gallery__tab {{ $galTab === 'foto' ? 'is-active' : '' }}" href="{{ $galTabUrl('foto') }}"
                @if ($galTab === 'foto') aria-current="page" @endif>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" aria-hidden="true">
                    <rect x="3" y="4.5" width="18" height="15" rx="2"></rect>
                    <circle cx="8.5" cy="9.5" r="1.5"></circle>
                    <path d="M21 16l-5-5-6 6-3-3-4 4"></path>
                </svg>
                {{ t('gal.tab_photo') }}
                <span class="gallery__tab-count">{{ $galTotalAlbums }}</span>
            </a>

            <a class="gallery__tab {{ $galTab === 'video' ? 'is-active' : '' }}" href="{{ $galTabUrl('video') }}"
                @if ($galTab === 'video') aria-current="page" @endif>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" aria-hidden="true">
                    <rect x="2.5" y="5" width="14" height="14" rx="2.5"></rect>
                    <path d="M16.5 10.5l5-3v9l-5-3z"></path>
                </svg>
                {{ t('gal.tab_video') }}
                <span class="gallery__tab-count">{{ $galTotalVideos }}</span>
            </a>
        </nav>

        @if ($galTab === 'foto' && count($galCatLabel))
            {{-- ---------- TAPISAN KATEGORI ALBUM ---------- --}}
            <div class="gallery__cats" role="group" aria-label="Tapisan kategori album">
                <a class="gallery__cat {{ $galKat === '' ? 'is-active' : '' }}"
                    href="{{ $galUrl(['kategori' => null, 'album' => null]) }}">{{ t('gal.all') }}</a>

                @foreach ($galCatLabel as $galCode => $galLabel)
                    <a class="gallery__cat {{ $galKat === $galCode ? 'is-active' : '' }}"
                        style="--cat-color:{{ $galCatTint($galCode) }}"
                        href="{{ $galUrl(['kategori' => $galCode, 'album' => null]) }}">
                        <span class="gallery__dot"></span>{{ $galLabel }}
                    </a>
                @endforeach
            </div>
        @endif

        @if ($galTab === 'foto')
            @if ($galCurrent)
                {{-- ---------- BUTIRAN ALBUM (foto) ---------- --}}
                <a class="gallery__back" href="{{ $galUrl(['album' => null]) }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round" aria-hidden="true">
                        <path d="M19 12H5M12 19l-7-7 7-7"></path>
                    </svg>
                    Semua album
                </a>

                <div class="gallery__detail-head">
                    <h2>{{ $galCurrent['title'] }}</h2>

                    @if ($galCurrent['descr'] !== '')
                        <p>{{ $galCurrent['descr'] }}</p>
                    @endif

                    <ul class="gallery__detail-meta">
                        @if ($galCurrent['cat'] !== '')
                            <li>
                                <span class="gallery__badge"
                                    style="--cat-color:{{ $galCatTint($galCurrent['cat']) }}">{{ $galCatName($galCurrent['cat']) }}</span>
                            </li>
                        @endif

                        @if ($galCurrent['date'] !== '')
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <rect x="3" y="5" width="18" height="16" rx="2"></rect>
                                    <path d="M8 3v4M16 3v4M3 11h18"></path>
                                </svg>
                                <span>{{ $galCurrent['date'] }}</span>
                            </li>
                        @endif

                        @if ($galCurrent['location'] !== '')
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"></path>
                                    <circle cx="12" cy="10" r="2.5"></circle>
                                </svg>
                                <span>{{ $galCurrent['location'] }}</span>
                            </li>
                        @endif

                        <li>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <rect x="3" y="4.5" width="18" height="15" rx="2"></rect>
                                <circle cx="8.5" cy="9.5" r="1.5"></circle>
                                <path d="M21 16l-5-5-6 6-3-3-4 4"></path>
                            </svg>
                            <span>{{ $galCurrent['count'] }} foto</span>
                        </li>
                    </ul>
                </div>

                @if (count($galPhotos))
                    <div class="gallery__photos">
                        @foreach ($galPhotos as $galPhotoIndex => $galPhoto)
                            <button type="button" class="gallery__photo" data-gal-photo="{{ $galPhotoIndex }}"
                                data-gal-src="{{ $galPhoto['url'] }}" data-gal-cap="{{ $galPhoto['descr'] }}"
                                aria-label="Lihat foto {{ $galPhotoIndex + 1 }} daripada {{ count($galPhotos) }}">
                                <img src="{{ $galPhoto['url'] }}"
                                    alt="{{ $galPhoto['descr'] !== '' ? $galPhoto['descr'] : $galCurrent['title'] }}"
                                    loading="lazy">
                                <span class="gallery__photo-zoom" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="11" cy="11" r="7"></circle>
                                        <path d="M20 20l-3.5-3.5M11 8v6M8 11h6"></path>
                                    </svg>
                                </span>
                            </button>
                        @endforeach
                    </div>
                @else
                    <div class="gallery__empty">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
                            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <rect x="3" y="4.5" width="18" height="15" rx="2"></rect>
                            <circle cx="8.5" cy="9.5" r="1.5"></circle>
                            <path d="M21 16l-5-5-6 6-3-3-4 4"></path>
                        </svg>
                        <h3>Tiada foto dalam album ini</h3>
                        <p>Album ini belum mempunyai foto.
                            <a href="{{ $galUrl(['album' => null]) }}">Kembali ke senarai album</a>.</p>
                    </div>
                @endif
            @else
                {{-- ---------- SENARAI ALBUM ---------- --}}
                @if ($galTotalAlbums)
                    <div class="gallery__grid">
                        @foreach ($galAlbumVm as $galAlbum)
                            <a class="gallery__album" href="{{ $galUrl(['album' => $galAlbum['id']]) }}">
                                <div class="gallery__album-thumb">
                                    @if ($galAlbum['thumb'] !== '')
                                        <img src="{{ $galAlbum['thumb'] }}" alt="{{ $galAlbum['title'] }}"
                                            loading="lazy">
                                    @else
                                        <span class="gallery__album-noimg" aria-hidden="true">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                                <rect x="3" y="4.5" width="18" height="15" rx="2"></rect>
                                                <circle cx="8.5" cy="9.5" r="1.5"></circle>
                                                <path d="M21 16l-5-5-6 6-3-3-4 4"></path>
                                            </svg>
                                        </span>
                                    @endif

                                    @if ($galAlbum['cat'] !== '')
                                        <span class="gallery__album-badge"
                                            style="--cat-color:{{ $galCatTint($galAlbum['cat']) }}">{{ $galCatName($galAlbum['cat']) }}</span>
                                    @endif

                                    <span class="gallery__album-count">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <rect x="3" y="4.5" width="18" height="15" rx="2"></rect>
                                            <circle cx="8.5" cy="9.5" r="1.5"></circle>
                                            <path d="M21 16l-5-5-6 6-3-3-4 4"></path>
                                        </svg>
                                        {{ $galAlbum['count'] }}
                                    </span>
                                </div>

                                <div class="gallery__album-body">
                                    <h2 class="gallery__album-title">{{ $galAlbum['title'] }}</h2>

                                    <ul class="gallery__album-meta">
                                        @if ($galAlbum['date'] !== '')
                                            <li>
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    aria-hidden="true">
                                                    <rect x="3" y="5" width="18" height="16" rx="2"></rect>
                                                    <path d="M8 3v4M16 3v4M3 11h18"></path>
                                                </svg>
                                                <span>{{ $galAlbum['date'] }}</span>
                                            </li>
                                        @endif

                                        @if ($galAlbum['location'] !== '')
                                            <li>
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    aria-hidden="true">
                                                    <path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"></path>
                                                    <circle cx="12" cy="10" r="2.5"></circle>
                                                </svg>
                                                <span>{{ $galAlbum['location'] }}</span>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <div class="gallery__empty">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
                            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <rect x="3" y="4.5" width="18" height="15" rx="2"></rect>
                            <circle cx="8.5" cy="9.5" r="1.5"></circle>
                            <path d="M21 16l-5-5-6 6-3-3-4 4"></path>
                        </svg>

                        @if ($galKat !== '')
                            <h3>Tiada album bagi kategori ini</h3>
                            <p>Tiada album berkategori <strong>{{ $galCatName($galKat) }}</strong>.
                                <a href="{{ $galUrl(['kategori' => null, 'album' => null]) }}">Tampilkan semua
                                    kategori</a>.</p>
                        @else
                            <h3>Galeri foto sedang dikemaskini</h3>
                            <p>Belum ada album foto diterbitkan. Sila semak semula kemudian.</p>
                        @endif
                    </div>
                @endif
            @endif
        @else
            {{-- ---------- TAB VIDEO ---------- --}}
            @if ($galTotalVideos)
                <div class="gallery__videos">
                    @foreach ($galVideos as $galVideoIndex => $galVideo)
                        <button type="button" class="gallery__video" data-gal-video="{{ $galVideoIndex }}"
                            @if ($galVideoId === $galVideo['id']) data-gal-autoopen="1" @endif
                            data-v-type="{{ $galVideo['type'] }}" data-v-embed="{{ $galVideo['embed'] }}"
                            data-v-upload="{{ $galVideo['upload'] }}" data-v-external="{{ $galVideo['external'] }}"
                            data-v-title="{{ $galVideo['title'] }}" data-v-date="{{ $galVideo['date'] }}"
                            data-v-location="{{ $galVideo['location'] }}" data-v-descr="{{ $galVideo['descr'] }}"
                            aria-label="Mainkan video {{ $galVideo['title'] }}">
                            <div class="gallery__video-thumb">
                                @if ($galVideo['img'] !== '')
                                    <img src="{{ $galVideo['img'] }}" alt="{{ $galVideo['title'] }}" loading="lazy">
                                @endif

                                <span class="gallery__video-tag">
                                    @if ($galVideo['type'] === 'YOUTUBE')
                                        YouTube
                                    @elseif ($galVideo['type'] === 'UPLOAD')
                                        Video
                                    @else
                                        Pautan
                                    @endif
                                </span>

                                <span class="gallery__video-play" aria-hidden="true">
                                    <span>
                                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                            <path d="M8 5.5v13l11-6.5z"></path>
                                        </svg>
                                    </span>
                                </span>
                            </div>

                            <div class="gallery__video-body">
                                <h2 class="gallery__video-title">{{ $galVideo['title'] }}</h2>

                                <ul class="gallery__video-meta">
                                    @if ($galVideo['date'] !== '')
                                        <li>
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                <rect x="3" y="5" width="18" height="16" rx="2"></rect>
                                                <path d="M8 3v4M16 3v4M3 11h18"></path>
                                            </svg>
                                            <span>{{ $galVideo['date'] }}</span>
                                        </li>
                                    @endif

                                    @if ($galVideo['location'] !== '')
                                        <li>
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                <path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"></path>
                                                <circle cx="12" cy="10" r="2.5"></circle>
                                            </svg>
                                            <span>{{ $galVideo['location'] }}</span>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </button>
                    @endforeach
                </div>
            @else
                <div class="gallery__empty">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
                        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="2.5" y="5" width="14" height="14" rx="2.5"></rect>
                        <path d="M16.5 10.5l5-3v9l-5-3z"></path>
                    </svg>
                    <h3>Galeri video sedang dikemaskini</h3>
                    <p>Belum ada video diterbitkan. Sila semak semula kemudian.</p>
                </div>
            @endif
        @endif

        {{-- ---------- LIGHTBOX FOTO ---------- --}}
        <div class="gallery__lb" id="galLightbox" role="dialog" aria-modal="true" aria-label="Paparan foto penuh"
            hidden>
            <div class="gallery__lb-stage">
                <span class="gallery__lb-count" id="galLbCount"></span>

                <button type="button" class="gallery__lb-close" id="galLbClose" aria-label="Tutup paparan">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"
                        aria-hidden="true">
                        <path d="M6 6l12 12M18 6L6 18"></path>
                    </svg>
                </button>

                <button type="button" class="gallery__lb-btn gallery__lb-prev" id="galLbPrev"
                    aria-label="Foto sebelumnya">
                    <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 6l-6 6 6 6"></path>
                    </svg>
                </button>

                <img class="gallery__lb-img" id="galLbImg" src="" alt="">

                <button type="button" class="gallery__lb-btn gallery__lb-next" id="galLbNext"
                    aria-label="Foto 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 6l6 6-6 6"></path>
                    </svg>
                </button>

                <p class="gallery__lb-cap" id="galLbCap"></p>
            </div>
        </div>

        {{-- ---------- MODAL PEMAIN VIDEO ---------- --}}
        <div class="gallery__vm" id="galVideoModal" role="dialog" aria-modal="true" aria-label="Pemain video" hidden>
            <div class="gallery__vm-stage">
                <span class="gallery__vm-count" id="galVmCount"></span>

                <button type="button" class="gallery__lb-close" id="galVmClose" aria-label="Tutup pemain">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"
                        aria-hidden="true">
                        <path d="M6 6l12 12M18 6L6 18"></path>
                    </svg>
                </button>

                <button type="button" class="gallery__lb-btn gallery__lb-prev" id="galVmPrev"
                    aria-label="Video sebelumnya">
                    <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 6l-6 6 6 6"></path>
                    </svg>
                </button>

                <div class="gallery__vm-player" id="galVmPlayer"></div>

                <button type="button" class="gallery__lb-btn gallery__lb-next" id="galVmNext"
                    aria-label="Video 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 6l6 6-6 6"></path>
                    </svg>
                </button>

                <div class="gallery__vm-info">
                    <h3 class="gallery__vm-title" id="galVmTitle"></h3>
                    <ul class="gallery__vm-meta" id="galVmMeta"></ul>
                    <p class="gallery__vm-descr" id="galVmDescr"></p>
                </div>
            </div>
        </div>

        {{-- ---------- NOTA ---------- --}}
        <aside class="gallery__note">
            <h2>Nota</h2>
            <ul>
                <li>{{ t('gal.note_album') }} <strong>←</strong>/<strong>→</strong> dan <strong>Esc</strong> {{ t('gal.note_close') }}</li>
                <li>{{ t('gal.note_video') }}</li>
                <li>{{ t('gal.note_contact') }}
                    <a href="{{ url($siteSlug.'/complaints-feedback') }}">{{ t('od.aduan_link') }}</a>.</li>
            </ul>
        </aside>
    </div>
</section>

<script>
    /* ======================================================================
       GALERI — lightbox foto + modal pemain video
       JS tulen (tiada library). Data dibaca dari atribut data-* pada elemen.
       ====================================================================== */
    (function () {
        'use strict';

        /* ------------------------- LIGHTBOX FOTO ------------------------- */
        var lb      = document.getElementById('galLightbox');
        var lbImg   = document.getElementById('galLbImg');
        var lbCap   = document.getElementById('galLbCap');
        var lbCount = document.getElementById('galLbCount');
        var thumbs  = Array.prototype.slice.call(document.querySelectorAll('[data-gal-photo]'));
        var lbIndex = 0;

        function lbRender() {
            if (!thumbs.length) { return; }

            lbIndex = (lbIndex + thumbs.length) % thumbs.length;

            var el  = thumbs[lbIndex];
            var cap = el.getAttribute('data-gal-cap') || '';

            lbImg.setAttribute('src', el.getAttribute('data-gal-src') || '');
            lbImg.setAttribute('alt', cap);
            lbCap.textContent = cap;
            lbCount.textContent = (lbIndex + 1) + ' / ' + thumbs.length;
        }

        function lbOpen(index) {
            if (!lb || !thumbs.length) { return; }

            lbIndex = index;
            lbRender();
            lb.hidden = false;
            lb.classList.add('is-open');
            document.body.style.overflow = 'hidden';
        }

        function lbClose() {
            if (!lb) { return; }

            lb.classList.remove('is-open');
            lb.hidden = true;
            lbImg.setAttribute('src', '');
            document.body.style.overflow = '';
        }

        thumbs.forEach(function (el, i) {
            el.addEventListener('click', function () { lbOpen(i); });
        });

        if (lb) {
            document.getElementById('galLbClose').addEventListener('click', lbClose);
            document.getElementById('galLbPrev').addEventListener('click', function () { lbIndex--; lbRender(); });
            document.getElementById('galLbNext').addEventListener('click', function () { lbIndex++; lbRender(); });
            lb.addEventListener('click', function (e) { if (e.target === lb) { lbClose(); } });
        }

        /* ---------------------- MODAL PEMAIN VIDEO ---------------------- */
        var vm       = document.getElementById('galVideoModal');
        var vmPlayer = document.getElementById('galVmPlayer');
        var vmTitle  = document.getElementById('galVmTitle');
        var vmMeta   = document.getElementById('galVmMeta');
        var vmDescr  = document.getElementById('galVmDescr');
        var vmCount  = document.getElementById('galVmCount');
        var vids     = Array.prototype.slice.call(document.querySelectorAll('[data-gal-video]'));
        var vmIndex  = 0;

        function vmClear() {
            while (vmPlayer.firstChild) {
                vmPlayer.removeChild(vmPlayer.firstChild);
            }
        }

        function vmMetaItem(text) {
            var li = document.createElement('li');
            li.textContent = text;

            return li;
        }

        // Bina elemen pemain: <video> untuk fail, <iframe> untuk embed, null jika pautan luar biasa
        function vmNode(type, embed, upload, external, title) {
            var url = '';

            if (type === 'YOUTUBE' && embed) {
                url = embed;
            } else if (type === 'UPLOAD' && upload) {
                url = upload;
            } else if (external) {
                url = external;

                var yt = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9_-]{6,})/);

                if (yt) {
                    url = 'https://www.youtube.com/embed/' + yt[1];
                }
            }

            if (!url || url.indexOf('http') !== 0) {
                return null;
            }

            var node = null;

            if (/\.(mp4|webm|ogg|m4v)(\?.*)?$/i.test(url)) {
                node = document.createElement('video');
                node.setAttribute('src', url);
                node.setAttribute('controls', 'controls');
                node.setAttribute('playsinline', 'playsinline');
                node.setAttribute('preload', 'metadata');

                return node;
            }

            if (/youtube\.com\/embed\/|player\.vimeo\.com/.test(url)) {
                node = document.createElement('iframe');
                node.setAttribute('src', url);
                node.setAttribute('title', title);
                node.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen');
                node.setAttribute('allowfullscreen', 'allowfullscreen');

                return node;
            }

            return null;
        }

        function vmFallback(external) {
            var box = document.createElement('div');
            box.className = 'gallery__vm-fallback';

            var text = document.createElement('p');
            text.textContent = external
                ? 'Video ini dibuka di laman luar dan tidak boleh dipaparkan dalam halaman ini.'
                : 'Sumber video tidak tersedia untuk video ini.';
            box.appendChild(text);

            if (external) {
                var link = document.createElement('a');
                link.className = 'gallery__btn gallery__btn--light';
                link.setAttribute('href', external);
                link.setAttribute('target', '_blank');
                link.setAttribute('rel', 'noopener');
                link.textContent = 'Buka pautan video';
                box.appendChild(link);
            }

            return box;
        }

        function vmShow(index) {
            if (!vids.length) { return; }

            vmIndex = (index + vids.length) % vids.length;

            var el = vids[vmIndex];

            var type     = (el.getAttribute('data-v-type') || '').toUpperCase();
            var embed    = el.getAttribute('data-v-embed') || '';
            var upload   = el.getAttribute('data-v-upload') || '';
            var external = el.getAttribute('data-v-external') || '';
            var title    = el.getAttribute('data-v-title') || '';
            var date     = el.getAttribute('data-v-date') || '';
            var location = el.getAttribute('data-v-location') || '';
            var descr    = el.getAttribute('data-v-descr') || '';

            vmClear();
            vmPlayer.appendChild(vmNode(type, embed, upload, external, title) || vmFallback(external));

            vmTitle.textContent = title;
            vmDescr.textContent = descr;
            vmCount.textContent = (vmIndex + 1) + ' / ' + vids.length;

            vmMeta.textContent = '';

            if (date) { vmMeta.appendChild(vmMetaItem(date)); }
            if (location) { vmMeta.appendChild(vmMetaItem(location)); }
        }

        function vmOpen(index) {
            if (!vm || !vids.length) { return; }

            vm.hidden = false;
            vm.classList.add('is-open');
            document.body.style.overflow = 'hidden';
            vmShow(index);
        }

        function vmClose() {
            if (!vm) { return; }

            vmClear();
            vm.classList.remove('is-open');
            vm.hidden = true;
            document.body.style.overflow = '';
        }

        vids.forEach(function (el, i) {
            el.addEventListener('click', function () { vmOpen(i); });
        });

        if (vm) {
            document.getElementById('galVmClose').addEventListener('click', vmClose);
            document.getElementById('galVmPrev').addEventListener('click', function () { vmShow(vmIndex - 1); });
            document.getElementById('galVmNext').addEventListener('click', function () { vmShow(vmIndex + 1); });
            vm.addEventListener('click', function (e) { if (e.target === vm) { vmClose(); } });
        }

        /* ------------------ PAPAN KEKUNCI & AUTO-BUKA ------------------ */
        document.addEventListener('keydown', function (e) {
            var lbNow = lb && lb.classList.contains('is-open');
            var vmNow = vm && vm.classList.contains('is-open');

            if (!lbNow && !vmNow) { return; }

            if (e.key === 'Escape') {
                if (lbNow) { lbClose(); }
                if (vmNow) { vmClose(); }
            } else if (e.key === 'ArrowLeft') {
                if (lbNow) { lbIndex--; lbRender(); }
                if (vmNow) { vmShow(vmIndex - 1); }
            } else if (e.key === 'ArrowRight') {
                if (lbNow) { lbIndex++; lbRender(); }
                if (vmNow) { vmShow(vmIndex + 1); }
            }
        });

        // ?video=<id> → buka pemain secara automatik
        var autoOpen = document.querySelector('[data-gal-autoopen]');

        if (autoOpen) {
            vmOpen(vids.indexOf(autoOpen));
        }
    })();
</script>