{{-- ============================================================================
     PAGE CONTENT — Arkib Elektronik
     Site  : nres  ·  Page slug: electronic-archive  ·  Page ID: 35
     Konsep: https://www.nres.gov.my/ms-my/Pages/default.aspx  → MEDIA → Arkib Elektronik
             (portal: tab tahun 2025…2021 + Lain-lain; setiap item = tajuk + dokumen)

     Sumber data (3 skema berbeza → dinormalkan kepada satu bentuk baris):
       · content_media + content_media_translations   → Kenyataan Media / Siaran Media / Keratan Akhbar
       · content_speeches                             → Teks Ucapan (terjemahan self-referencing:
                                                         baris induk speech_main='1', anak ikut speech_parent_id)
       · content_article + content_article_translation → Berita

     Parameter URL:
       jenis   berita | ucapan | kenyataan | keratan   (kosong = halaman hab)
       tahun   tahun dokumen (cth 2026) atau 'lain'    (rekod tanpa tarikh)
       q       carian tajuk (pilihan)

     Nota:
     · SEMUA logik + markup + CSS ada dalam fail ini — tiada komponen, tiada partial.
     · Tiada paparan butiran: tajuk & butang Dokumen terus buka/muat turun fail (macam portal).
     · Warna guna CSS variable tema (--teal/--green/--fade/--line/--ink) → sokong dark mode.
     · Jadual content_clippings (tinggalan) TIDAK digunakan — Keratan Akhbar = content_media.
     ============================================================================ --}}

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

    $arkJenisDefs = [
        'berita' => [
            'ms' => 'Berita', 'en' => 'News',
            'descr_ms' => 'Arkib berita dan pengumuman kementerian.',
            'descr_en' => 'Archive of ministry news and announcements.',
        ],
        'ucapan' => [
            'ms' => 'Teks Ucapan', 'en' => 'Speeches',
            'descr_ms' => 'Arkib teks ucapan, perasmian dan majlis.',
            'descr_en' => 'Archive of speeches, openings and official events.',
        ],
        'kenyataan' => [
            'ms' => 'Kenyataan Media', 'en' => 'Media Statements',
            'descr_ms' => 'Arkib kenyataan media dan siaran media rasmi.',
            'descr_en' => 'Archive of official media statements and media releases.',
        ],
        'keratan' => [
            'ms' => 'Keratan Akhbar', 'en' => 'Newspaper Clippings',
            'descr_ms' => 'Arkib keratan akhbar daripada media massa.',
            'descr_en' => 'Archive of newspaper clippings from the mass media.',
        ],
    ];

    $arkJenisKeys = array_keys($arkJenisDefs);

    $arkJenis = (string) ($arkQuery['jenis'] ?? '');
    $arkJenis = in_array($arkJenis, $arkJenisKeys, true) ? $arkJenis : '';

    $arkTahun = (string) ($arkQuery['tahun'] ?? '');
    $arkTahun = ($arkTahun === 'lain' || preg_match('/^\d{4}$/', $arkTahun)) ? $arkTahun : '';

    $arkCari = trim((string) ($arkQuery['q'] ?? ''));
    $arkCari = mb_substr($arkCari, 0, 60);

    $arkJenisLabel = fn (string $key) => $arkJenisDefs[$key][$arkLang] ?? $arkJenisDefs[$key]['ms'];

    // Pembina URL (kekalkan param lain; set nilai '' untuk buang)
    $arkUrl = function (array $params = []) use ($arkBase, $arkJenis, $arkTahun, $arkCari) {
        $current = ['jenis' => $arkJenis, 'tahun' => $arkTahun, 'q' => $arkCari];
        $query = array_filter(array_merge($current, $params), fn ($v) => $v !== null && $v !== '');

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

    // Fail pada disk 'public' → URL awam (sama seperti halaman lain)
    $arkFile = 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, '/'));
    };

    $arkDate = function ($value) use ($arkLang) {
        if (blank($value)) {
            return '';
        }

        try {
            return \Carbon\Carbon::parse($value)->format('d/m/Y');
        } catch (\Throwable $e) {
            return (string) $value;
        }
    };

    $arkMonths = $arkLang === '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'];

    $arkDateLong = function ($value) use ($arkMonths) {
        if (blank($value)) {
            return '';
        }

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

            return $date->day.' '.$arkMonths[(int) $date->month].' '.$date->year;
        } catch (\Throwable $e) {
            return (string) $value;
        }
    };

    $arkToday = now()->toDateString();

    /* --------------------------------------------------------------------
     | 2. Adapter — 3 skema → satu bentuk baris seragam
     |    ['jenis','date','title','summary','file','img','url','source','badge']
     -------------------------------------------------------------------- */
    $arkItems = [];

    // Label sumber (ref MEDIA_SOURCE) — kod pendek untuk jadual, nama penuh dalam title
    $arkSourceLabel = [];

    foreach (DB::table('ref')->where('cat', 'MEDIA_SOURCE')->get() as $arkRef) {
        $arkSourceLabel[(string) $arkRef->code] = $arkLang === 'en'
            ? ((string) ($arkRef->descr_en ?: $arkRef->descr))
            : ((string) $arkRef->descr ?: $arkRef->descr_en);
    }

    $arkSourceShort = function ($code) use ($arkSourceLabel) {
        $label = $arkSourceLabel[(string) $code] ?? (string) $code;

        return mb_strlen($label) > 24 ? str_replace('_', ' ', (string) $code) : $label;
    };

    $arkMediaTypeLabel = [];

    foreach (DB::table('ref')->where('cat', 'MEDIA_TYPE')->get() as $arkRef) {
        $arkMediaTypeLabel[(string) $arkRef->code] = $arkLang === 'en'
            ? ((string) ($arkRef->descr_en ?: $arkRef->descr))
            : ((string) $arkRef->descr ?: $arkRef->descr_en);
    }

    /* --- 2b. content_speeches → Teks Ucapan ---
       Corak: baris induk (speech_parent_id NULL) + baris terjemahan (anak) yang
       boleh ada tajuk & fail sendiri. Status guna SPEECH_STATUS = PUBLISHED. */
    $arkSpeechLabel = [];

    foreach (DB::table('ref')->where('cat', 'SPEECH_CATEGORY')->get() as $arkRef) {
        $arkSpeechLabel[(string) $arkRef->code] = $arkLang === 'en'
            ? ((string) ($arkRef->descr_en ?: $arkRef->descr))
            : ((string) $arkRef->descr ?: $arkRef->descr_en);
    }

    $arkSpeechRows = DB::table('content_speeches')
        ->whereIn('speech_status', ['PUBLISHED', 'ACTIVE'])
        ->where(function ($q) use ($arkToday) {
            $q->whereNull('speech_start_date')->orWhere('speech_start_date', '')->orWhere('speech_start_date', '<=', $arkToday);
        })
        ->where(function ($q) use ($arkToday) {
            $q->whereNull('speech_end_date')->orWhere('speech_end_date', '')->orWhere('speech_end_date', '>=', $arkToday);
        })
        ->orderByDesc('speech_date')
        ->orderByDesc('speech_id')
        ->get();

    $arkSpeechParents  = $arkSpeechRows->filter(fn ($r) => blank($r->speech_parent_id))->values();
    $arkSpeechChildren = $arkSpeechRows->filter(fn ($r) => filled($r->speech_parent_id))->groupBy('speech_parent_id');

    foreach ($arkSpeechParents as $arkSpeech) {
        $arkKids  = $arkSpeechChildren[$arkSpeech->speech_id] ?? collect();
        $arkTrRow = $arkKids->firstWhere('speech_language', $arkLang);

        if (! $arkTrRow || blank($arkTrRow->speech_title)) {
            $arkTrRow = $arkSpeech;
        }

        $arkItems[] = [
            'jenis'   => 'ucapan',
            'date'    => (string) ($arkSpeech->speech_date ?? ''),
            'title'   => (string) ($arkTrRow->speech_title ?? ''),
            'summary' => '',
            'file'    => $arkFile($arkTrRow->speech_file ?: $arkSpeech->speech_file),
            'img'     => $arkFile($arkSpeech->speech_img),
            'url'     => '',
            'source'  => (string) ($arkSpeech->speech_speaker ?: $arkSpeech->speech_event),
            'badge'   => (string) ($arkSpeechLabel[(string) $arkSpeech->speech_category] ?? ''),
        ];
    }

    /* --- 2c. content_article + content_article_translation → Berita --- */
    $arkArticleRows = DB::table('content_article')
        ->whereIn('article_status', ['ACTIVE', 'PUBLISHED'])
        ->where(function ($q) use ($arkToday) {
            $q->whereNull('article_start_date')->orWhere('article_start_date', '')->orWhere('article_start_date', '<=', $arkToday);
        })
        ->where(function ($q) use ($arkToday) {
            $q->whereNull('article_end_date')->orWhere('article_end_date', '')->orWhere('article_end_date', '>=', $arkToday);
        })
        ->orderByDesc('article_date')
        ->orderByDesc('article_id')
        ->get();

    $arkArticleIds = $arkArticleRows->pluck('article_id')->all();

    $arkArticleTr = $arkArticleIds
        ? DB::table('content_article_translation')
            ->whereIn('article_translation_parent_id', $arkArticleIds)
            ->get()
            ->groupBy('article_translation_parent_id')
        : collect();

    foreach ($arkArticleRows as $arkRow) {
        $arkTrRows = $arkArticleTr[$arkRow->article_id] ?? collect();
        $arkTrRow  = $arkTrRows->firstWhere('article_translation_language', $arkLang)
            ?? $arkTrRows->firstWhere('article_translation_main', 1)
            ?? $arkTrRows->first();

        $arkItems[] = [
            'jenis'   => 'berita',
            'date'    => (string) ($arkRow->article_date ?? ''),
            'title'   => (string) ($arkTrRow->article_translation_title ?? ''),
            'summary' => (string) ($arkTrRow->article_translation_content ?? ''),
            'file'    => '',
            'img'     => $arkFile($arkRow->article_image),
            'url'     => (string) ($arkRow->article_url ?? ''),
            'source'  => (string) ($arkRow->article_subcategory ?: $arkRow->article_category),
            'badge'   => '',
        ];
    }

    /* --- 2a. content_media → Kenyataan Media / Keratan Akhbar --- */
    $arkMediaBuckets = [
        'kenyataan' => ['KENYATAAN_MEDIA', 'SIARAN_MEDIA'],
        'keratan'   => ['KERATAN_AKHBAR'],
    ];

    $arkMediaRows = DB::table('content_media')
        ->where('media_status', 'PUBLISHED')
        ->whereIn('media_type', ['KENYATAAN_MEDIA', 'SIARAN_MEDIA', 'KERATAN_AKHBAR'])
        ->orderByDesc('media_date')
        ->orderByDesc('media_id')
        ->get();

    $arkMediaIds = $arkMediaRows->pluck('media_id')->all();

    $arkMediaTr = $arkMediaIds
        ? DB::table('content_media_translations')
            ->whereIn('media_translation_parent_id', $arkMediaIds)
            ->get()
            ->groupBy('media_translation_parent_id')
        : collect();

    foreach ($arkMediaRows as $arkRow) {
        $arkBucket = null;

        foreach ($arkMediaBuckets as $arkKey => $arkTypes) {
            if (in_array((string) $arkRow->media_type, $arkTypes, true)) {
                $arkBucket = $arkKey;
                break;
            }
        }

        if ($arkBucket === null) {
            continue;
        }

        $arkTrRows = $arkMediaTr[$arkRow->media_id] ?? collect();
        $arkTrRow  = $arkTrRows->firstWhere('media_translation_language', $arkLang)
            ?? $arkTrRows->firstWhere('media_translation_main', 1)
            ?? $arkTrRows->first();

        $arkItems[] = [
            'jenis'   => $arkBucket,
            'date'    => (string) ($arkRow->media_date ?? ''),
            'title'   => (string) ($arkTrRow->media_translation_title ?? ''),
            'summary' => (string) ($arkTrRow->media_translation_summary ?? ''),
            'file'    => $arkFile($arkRow->media_file),
            'img'     => $arkFile($arkRow->media_img),
            'url'     => (string) ($arkRow->media_url ?? ''),
            'source'  => $arkRow->media_source ? $arkSourceShort($arkRow->media_source) : '',
            'badge'   => (string) ($arkMediaTypeLabel[(string) $arkRow->media_type] ?? ''),
        ];
    }
    /* --------------------------------------------------------------------
     | 3. Kiraan, tab tahun, penapis & data hab
     -------------------------------------------------------------------- */
    $arkCounts = [];

    foreach ($arkJenisKeys as $arkKey) {
        $arkCounts[$arkKey] = count(array_filter($arkItems, fn ($i) => $i['jenis'] === $arkKey));
    }

    $arkTotal = count($arkItems);

    // Item bagi jenis yang dipilih sahaja (tab tahun & jadual ikut jenis)
    $arkJenisItems = $arkJenis === ''
        ? []
        : array_values(array_filter($arkItems, fn ($i) => $i['jenis'] === $arkJenis));

    $arkYears   = [];
    $arkUndated = 0;

    foreach ($arkJenisItems as $arkItem) {
        $arkYear = $arkItem['date'] !== '' ? substr($arkItem['date'], 0, 4) : '';

        if (preg_match('/^\d{4}$/', $arkYear)) {
            $arkYears[$arkYear] = ($arkYears[$arkYear] ?? 0) + 1;
        } else {
            $arkUndated++;
        }
    }

    krsort($arkYears);

    // Buang nilai penapis yang tidak sah
    if ($arkTahun !== '' && $arkTahun !== 'lain' && ! isset($arkYears[$arkTahun])) {
        $arkTahun = '';
    }

    if ($arkTahun === 'lain' && $arkUndated === 0) {
        $arkTahun = '';
    }

    $arkRows = array_values(array_filter($arkJenisItems, function ($arkItem) use ($arkTahun) {
        if ($arkTahun === '') {
            return true;
        }

        $arkYear = $arkItem['date'] !== '' ? substr($arkItem['date'], 0, 4) : '';
        $arkIsYear = (bool) preg_match('/^\d{4}$/', $arkYear);

        if ($arkTahun === 'lain') {
            return ! $arkIsYear;
        }

        return $arkYear === $arkTahun;
    }));

    if ($arkCari !== '') {
        $arkRows = array_values(array_filter($arkRows, fn ($i) => mb_stripos($i['title'], $arkCari) !== false));
    }

    $arkIsFiltered = $arkTahun !== '' || $arkCari !== '';

    // Label kolum kedua-terakhir ikut jenis
    $arkColMeta = [
        'berita'    => ['ms' => 'Kategori', 'en' => 'Category'],
        'ucapan'    => ['ms' => 'Penyampai', 'en' => 'Speaker'],
        'kenyataan' => ['ms' => 'Sumber', 'en' => 'Source'],
        'keratan'   => ['ms' => 'Akhbar', 'en' => 'Newspaper'],
    ];

    $arkColLabel = $arkJenis !== ''
        ? ($arkColMeta[$arkJenis][$arkLang] ?? 'Sumber')
        : ($arkLang === 'en' ? 'Source' : 'Sumber');

    // Hab: ringkasan setiap jenis (jumlah + julat tahun)
    $arkHub = [];

    foreach ($arkJenisKeys as $arkKey) {
        $arkKeyItems = array_values(array_filter($arkItems, fn ($i) => $i['jenis'] === $arkKey));
        $arkKeyYears = [];

        foreach ($arkKeyItems as $arkItem) {
            $arkYear = $arkItem['date'] !== '' ? substr($arkItem['date'], 0, 4) : '';

            if (preg_match('/^\d{4}$/', $arkYear)) {
                $arkKeyYears[$arkYear] = true;
            }
        }

        $arkKeyYears = array_keys($arkKeyYears);
        rsort($arkKeyYears);

        $arkHub[$arkKey] = [
            'count'  => count($arkKeyItems),
            'years'  => $arkKeyYears,
            'latest' => (string) ($arkKeyItems[0]['date'] ?? ''),
        ];
    }

    // Jumlah item tanpa tarikh (untuk chip "Lain-lain")
    $arkJenisLabelText = $arkJenis !== '' ? $arkJenisLabel($arkJenis) : '';
@endphp

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

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

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

/* --- penapis & carian ---------------------------------------------------- */
.ark__filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 16px}
.ark__filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ark__filter-label{color:var(--bs-secondary-color);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.ark__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 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}
.ark__chip:hover{border-color:var(--teal);color:var(--teal)}
.ark__chip.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
.ark__search{display:flex;align-items:center;gap:8px;margin-left:auto}
.ark__search input{min-width:210px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bs-body-bg);color:var(--ink);font-size:.8rem;font-family:inherit}
.ark__search input:focus{outline:0;border-color:var(--teal)}
.ark__search button{padding:7px 14px;border:1px solid var(--teal);border-radius:999px;background:var(--teal);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit}
.ark__search button:hover{background:var(--green);border-color:var(--green)}
.ark__summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;color:var(--bs-secondary-color);font-size:.84rem}
.ark__summary strong{color:var(--ink)}
.ark__pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.73rem;font-weight:700}

/* --- hab (4 kad jenis) --------------------------------------------------- */
.ark__hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ark__card{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);text-decoration:none;color:inherit;transition:.18s}
.ark__card:hover{border-color:var(--teal);box-shadow:0 8px 22px rgba(0,0,0,.07);transform:translateY(-2px)}
.ark__card-count{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:3px 11px;border-radius:999px;background:var(--fade);color:var(--teal);font-size:.72rem;font-weight:800}
.ark__card h2{margin:0;color:var(--green);font-size:1.05rem;font-weight:800}
.ark__card p{margin:0;color:var(--bs-secondary-color);font-size:.85rem;line-height:1.6}
.ark__card-years{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.ark__card-year{padding:2px 9px;border:1px solid var(--line);border-radius:999px;color:var(--bs-secondary-color);font-size:.7rem;font-weight:700}
.ark__card-link{color:var(--teal);font-size:.8rem;font-weight:800}

/* --- jadual arkib -------------------------------------------------------- */
.ark__table-card{border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);overflow:hidden}
.ark__table{width:100%;border-collapse:collapse;font-size:.88rem}
.ark__table thead th{padding:12px 14px;border-bottom:2px solid var(--line);background:var(--fade);color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-align:left;text-transform:uppercase;white-space:nowrap}
.ark__table tbody td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.ark__table tbody tr:last-child td{border-bottom:0}
.ark__table tbody tr:hover{background:color-mix(in srgb,var(--fade) 45%,transparent)}
.ark__table tbody td:last-child{min-width:134px}
.ark__no{width:44px;color:var(--bs-secondary-color);font-variant-numeric:tabular-nums;font-weight:700}
.ark__date{width:118px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.ark__title{margin:0;font-size:.95rem;font-weight:700;line-height:1.45}
.ark__title a{color:var(--ink);text-decoration:none}
.ark__title a:hover{color:var(--teal);text-decoration:underline}
.ark__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ark__badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;border:1px solid transparent;background:var(--fade);color:var(--teal);font-size:.7rem;font-weight:700;white-space:nowrap}
.ark__source{color:var(--ink);font-size:.82rem;font-weight:600}
.ark__acts{display:flex;flex-wrap:wrap;gap:6px;white-space:nowrap}
.ark__btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--teal);border-radius:999px;background:var(--teal);color:#fff;font-size:.76rem;font-weight:700;text-decoration:none;transition:.18s}
.ark__btn:hover{background:var(--green);border-color:var(--green);color:#fff}
.ark__none{color:var(--bs-secondary-color)}

/* --- kosong & nota ------------------------------------------------------- */
.ark__empty{padding:52px 24px;border:1px dashed var(--line);border-radius:16px;color:var(--bs-secondary-color);text-align:center}
.ark__empty strong{display:block;margin-bottom:6px;color:var(--ink);font-size:1rem}
.ark__empty a{color:var(--teal);font-weight:700;text-decoration:none}
.ark__empty a:hover{text-decoration:underline}
.ark__note{margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;background:color-mix(in srgb,var(--fade) 45%,transparent);color:var(--bs-secondary-color);font-size:.82rem;line-height:1.7}
.ark__note strong{color:var(--ink)}

/* --- responsif ----------------------------------------------------------- */
@media (max-width:860px){
  .ark__hide-sm{display:none}
  .ark__search{margin-left:0;width:100%}
  .ark__search input{flex:1;min-width:0}
}
@media (max-width:680px){
  .ark__table thead{display:none}
  .ark__table,.ark__table tbody,.ark__table tr,.ark__table td{display:block;width:100%}
  .ark__table tbody tr{margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:14px}
  .ark__table tbody td{padding:0 0 10px;border-bottom:0;min-width:0}
  .ark__table tbody td:last-child{padding-bottom:0;min-width:0}
  .ark__no{display:none}
  .ark__date{width:auto;font-size:.78rem}
  .ark__hub{grid-template-columns:1fr}
}
</style>

<section class="ark">
    <div class="ark__container">

        {{-- ============================ BREADCRUMB ============================ --}}
        <nav class="ark__breadcrumb" aria-label="breadcrumb">
            <a href="{{ url('/') }}">{{ $arkLang === 'en' ? 'Home' : 'Utama' }}</a>
            <span>/</span>

            @if ($arkJenis !== '')
                <a href="{{ $arkUrl(['jenis' => '', 'tahun' => '', 'q' => '']) }}">
                    {{ $arkLang === 'en' ? 'Electronic Archive' : 'Arkib Elektronik' }}
                </a>
                <span>/</span>
                <span>{{ $arkJenisLabelText }}</span>
            @else
                <span>{{ $arkLang === 'en' ? 'Electronic Archive' : 'Arkib Elektronik' }}</span>
            @endif
        </nav>

        {{-- ============================== TAJUK ============================== --}}
        <header class="ark__header">
            <span class="ark__eyebrow">Media</span>
            <h1>
                {{ $arkJenis !== ''
                    ? $arkJenisLabelText
                    : ($arkLang === 'en' ? 'Electronic Archive' : 'Arkib Elektronik') }}
            </h1>
            <p>
                @if ($arkJenis !== '')
                    {{ $arkJenisDefs[$arkJenis][$arkLang === 'en' ? 'descr_en' : 'descr_ms'] }}
                @elseif ($arkLang === 'en')
                    Archive of ministry documents and publications — news, speeches, media statements and
                    newspaper clippings — organised by year.
                @else
                    Koleksi arkib dokumen dan penerbitan kementerian — berita, teks ucapan, kenyataan media dan
                    keratan akhbar — disusun mengikut tahun.
                @endif
            </p>
        </header>

        {{-- ============================ TAB JENIS ============================ --}}
        <nav class="ark__tabs" aria-label="{{ $arkLang === 'en' ? 'Archive type' : 'Jenis arkib' }}">
            <a class="ark__tab {{ $arkJenis === '' ? 'is-active' : '' }}"
               href="{{ $arkUrl(['jenis' => '', 'tahun' => '', 'q' => '']) }}">
                {{ $arkLang === 'en' ? 'Overview' : 'Ringkasan' }}
                <span class="ark__tab-count">{{ $arkTotal }}</span>
            </a>

            @foreach ($arkJenisKeys as $arkKey)
                <a class="ark__tab {{ $arkJenis === $arkKey ? 'is-active' : '' }}"
                   href="{{ $arkUrl(['jenis' => $arkKey, 'tahun' => '', 'q' => '']) }}">
                    {{ $arkJenisLabel($arkKey) }}
                    <span class="ark__tab-count">{{ $arkCounts[$arkKey] }}</span>
                </a>
            @endforeach
        </nav>

        @if ($arkJenis === '')
            {{-- ============================== HAB ============================== --}}
            <div class="ark__hub">
                @foreach ($arkJenisKeys as $arkKey)
                    <a class="ark__card" href="{{ $arkUrl(['jenis' => $arkKey, 'tahun' => '', 'q' => '']) }}">
                        <span class="ark__card-count">
                            {{ $arkHub[$arkKey]['count'] }} {{ $arkLang === 'en' ? 'documents' : 'dokumen' }}
                        </span>
                        <h2>{{ $arkJenisLabel($arkKey) }}</h2>
                        <p>{{ $arkJenisDefs[$arkKey][$arkLang === 'en' ? 'descr_en' : 'descr_ms'] }}</p>

                        @if (! empty($arkHub[$arkKey]['years']))
                            <div class="ark__card-years">
                                @foreach (array_slice($arkHub[$arkKey]['years'], 0, 6) as $arkYear)
                                    <span class="ark__card-year">{{ $arkYear }}</span>
                                @endforeach
                            </div>
                        @endif

                        <span class="ark__card-link">{{ $arkLang === 'en' ? 'View archive' : 'Lihat arkib' }} →</span>
                    </a>
                @endforeach
            </div>
        @else

            {{-- --------------------------- PENAPIS --------------------------- --}}
            <div class="ark__filters">
                <div class="ark__filter">
                    <span class="ark__filter-label">{{ $arkLang === 'en' ? 'Year' : 'Tahun' }}</span>

                    <a class="ark__chip {{ $arkTahun === '' ? 'is-active' : '' }}" href="{{ $arkUrl(['tahun' => '']) }}">
                        {{ $arkLang === 'en' ? 'All' : 'Semua' }}
                    </a>

                    @foreach ($arkYears as $arkYearKey => $arkYearCount)
                        <a class="ark__chip {{ $arkTahun === (string) $arkYearKey ? 'is-active' : '' }}"
                           href="{{ $arkUrl(['tahun' => (string) $arkYearKey]) }}">
                            {{ $arkYearKey }} <span>({{ $arkYearCount }})</span>
                        </a>
                    @endforeach

                    @if ($arkUndated > 0)
                        <a class="ark__chip {{ $arkTahun === 'lain' ? 'is-active' : '' }}"
                           href="{{ $arkUrl(['tahun' => 'lain']) }}">
                            {{ $arkLang === 'en' ? 'Others' : 'Lain-lain' }} <span>({{ $arkUndated }})</span>
                        </a>
                    @endif
                </div>

                <form class="ark__search" method="get" action="{{ $arkBase }}" role="search">
                    <input type="hidden" name="jenis" value="{{ $arkJenis }}">

                    @if ($arkTahun !== '')
                        <input type="hidden" name="tahun" value="{{ $arkTahun }}">
                    @endif

                    <input type="search" name="q" value="{{ $arkCari }}"
                           placeholder="{{ $arkLang === 'en' ? 'Search title…' : 'Cari tajuk…' }}"
                           aria-label="{{ $arkLang === 'en' ? 'Search title' : 'Cari tajuk' }}">

                    <button type="submit">{{ $arkLang === 'en' ? 'Search' : 'Cari' }}</button>
                </form>
            </div>

            {{-- --------------------------- KIRAAN --------------------------- --}}
            <div class="ark__summary">
                @if ($arkIsFiltered)
                    <span>
                        {{ $arkLang === 'en' ? 'Showing' : 'Menunjukkan' }}
                        <strong>{{ count($arkRows) }}</strong>
                        {{ $arkLang === 'en' ? 'of' : 'daripada' }}
                        <strong>{{ count($arkJenisItems) }}</strong>
                        {{ $arkLang === 'en' ? 'documents' : 'dokumen' }}
                    </span>
                @else
                    <span>
                        {{ $arkLang === 'en' ? 'Total' : 'Jumlah' }}
                        <strong>{{ count($arkRows) }}</strong>
                        {{ $arkLang === 'en' ? 'documents' : 'dokumen' }}
                    </span>
                @endif

                <span class="ark__pill">{{ $arkJenisLabelText }}</span>

                @if ($arkTahun !== '')
                    <span class="ark__pill">{{ $arkTahun === 'lain' ? ($arkLang === 'en' ? 'Others' : 'Lain-lain') : $arkTahun }}</span>
                @endif

                @if ($arkCari !== '')
                    <span class="ark__pill">&ldquo;{{ $arkCari }}&rdquo;</span>
                @endif
            </div>

            {{-- --------------------------- JADUAL --------------------------- --}}
            @if (count($arkRows) > 0)
                <div class="ark__table-card">
                    <table class="ark__table">
                        <thead>
                            <tr>
                                <th class="ark__no">#</th>
                                <th>{{ $arkLang === 'en' ? 'Date' : 'Tarikh' }}</th>
                                <th>{{ $arkLang === 'en' ? 'Title' : 'Tajuk' }}</th>
                                <th class="ark__hide-sm">{{ $arkColLabel }}</th>
                                <th>{{ $arkLang === 'en' ? 'Document' : 'Dokumen' }}</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($arkRows as $arkIndex => $arkItem)
                                <tr>
                                    <td class="ark__no">{{ $arkIndex + 1 }}</td>

                                    <td class="ark__date">
                                        {{ $arkItem['date'] !== '' ? $arkDate($arkItem['date']) : ($arkLang === 'en' ? 'No date' : 'Tiada tarikh') }}
                                    </td>

                                    <td>
                                        <p class="ark__title">
                                            @if ($arkItem['file'] !== '')
                                                <a href="{{ $arkItem['file'] }}" target="_blank" rel="noopener">{{ $arkItem['title'] }}</a>
                                            @elseif ($arkItem['url'] !== '')
                                                <a href="{{ $arkItem['url'] }}" target="_blank" rel="noopener">{{ $arkItem['title'] }}</a>
                                            @else
                                                {{ $arkItem['title'] }}
                                            @endif
                                        </p>

                                        @if ($arkItem['badge'] !== '' && $arkItem['badge'] !== $arkJenisLabelText)
                                            <div class="ark__meta">
                                                <span class="ark__badge">{{ $arkItem['badge'] }}</span>
                                            </div>
                                        @endif
                                    </td>

                                    <td class="ark__hide-sm">
                                        <span class="ark__source">{{ $arkItem['source'] !== '' ? $arkItem['source'] : '—' }}</span>
                                    </td>

                                    <td>
                                        <div class="ark__acts">
                                            @if ($arkItem['file'] !== '')
                                                <a class="ark__btn" href="{{ $arkItem['file'] }}" target="_blank" rel="noopener">
                                                    {{ $arkLang === 'en' ? 'Download' : 'Muat turun' }}
                                                </a>
                                            @elseif ($arkItem['url'] !== '')
                                                <a class="ark__btn" href="{{ $arkItem['url'] }}" target="_blank" rel="noopener">
                                                    {{ $arkLang === 'en' ? 'Open link' : 'Buka pautan' }}
                                                </a>
                                            @else
                                                <span class="ark__none">—</span>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="ark__empty">
                    <strong>{{ $arkLang === 'en' ? 'No documents found' : 'Tiada dokumen ditemui' }}</strong>
                    <p style="margin:0 0 10px">
                        @if ($arkIsFiltered)
                            {{ $arkLang === 'en'
                                ? 'No documents match this year or search. Try another filter.'
                                : 'Tiada dokumen sepadan dengan tahun atau carian ini. Cuba penapis lain.' }}
                        @else
                            {{ $arkLang === 'en'
                                ? 'No documents have been published in this archive yet.'
                                : 'Belum ada dokumen diterbitkan dalam arkib ini.' }}
                        @endif
                    </p>

                    @if ($arkIsFiltered)
                        <a href="{{ $arkUrl(['tahun' => '', 'q' => '']) }}">
                            {{ $arkLang === 'en' ? 'Reset filters' : 'Set semula penapis' }}
                        </a>
                    @endif
                </div>
            @endif
        @endif

        {{-- =============================== NOTA ============================== --}}
        <div class="ark__note">
            <strong>{{ $arkLang === 'en' ? 'Archive note' : 'Nota arkib' }}:</strong>
            @if ($arkLang === 'en')
                Documents are kept in PDF format. For a document that cannot be opened or for any enquiry,
                please contact the Corporate Communications Division at +603 8091 7000.
            @else
                Dokumen disimpan dalam format PDF. Bagi dokumen yang tidak dapat dibuka atau sebarang pertanyaan,
                sila hubungi Bahagian Komunikasi Korporat di talian +603 8091 7000.
            @endif
        </div>

    </div>
</section>