{{-- ============================================================================
     PAGE CONTENT — Penerbitan (MEDIA)
     Site  : nres  ·  Page slug: publication  ·  Page ID: 32
     URL   : /nres/publication

     Konsep: halaman "Penerbitan Kementerian" portal asal
       (tab kategori sektor + jadual Tahun|Tajuk|Dokumen, muat turun PDF)

     Sumber data: `content_downloads`
       · download_title    = tajuk penerbitan
       · download_category = kod sektor (BP/TUG/MG/PI/AS/URUS)
       · download_date     = tarikh (tahun diambil untuk paparan)
       · download_file     = laluan relatif fail (URL dibina semasa render)
       · download_status   = ACTIVE

     Penapis: ?kat=<kod> · ?tahun=<YYYY> · ?q=<carian>
     Nota: SEMUA logik + markup + CSS ada dalam fail ini (tiada komponen/partial).
     ============================================================================ --}}

@php
    $pubLang = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';
    $pubIsEn = $pubLang === 'en';
    $pubBase = url(trim(((string) ($siteSlug ?? '')).'/publication', '/'));
    $pubToday = now()->toDateString();

    /* --------------------------------------------------------- kategori sektor --- */
    $pubCats = [
        'BP'   => ['ms' => 'Biodiversiti & Perhutanan', 'en' => 'Biodiversity & Forestry'],
        'TUG'  => ['ms' => 'Tanah, Ukur & Geospatial', 'en' => 'Land, Survey & Geospatial'],
        'MG'   => ['ms' => 'Mineral & Geosains', 'en' => 'Minerals & Geoscience'],
        'PI'   => ['ms' => 'Perubahan Iklim', 'en' => 'Climate Change'],
        'AS'   => ['ms' => 'Alam Sekitar', 'en' => 'Environment'],
        'URUS' => ['ms' => 'Pengurusan', 'en' => 'Management'],
    ];

    $pubCatName = function ($code) use ($pubCats, $pubLang) {
        $code = (string) $code;

        return $pubCats[$code][$pubLang] ?? ($code !== '' ? $code : '—');
    };

    /* ------------------------------------------------------------------- URL --- */
    // Laluan relatif → URL penuh (encode setiap segmen); URL http dibiarkan.
    $pubUrl = function ($file) {
        $file = trim((string) $file);

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

        // Keep existing full URLs.
        if (preg_match('#^https?://#i', $file)) {
            return $file;
        }

        // Use Laravel's app URL for storage images.
        if (preg_match('#^/?storage/#i', $file)) {
            return asset(ltrim($file, '/'));
        }

        // Handle other relative paths.
        $parts = parse_url(
            'https://nres.dynaweb4.work/storage/content-download/images/' . ltrim($file, '/')
        );

        $segments = array_map(
            'rawurlencode',
            explode('/', (string) $parts['path'])
        );

        return $parts['scheme'] . '://' .
            $parts['host'] . implode('/', $segments);
    };

    /* ------------------------------------------------------------------ data --- */
    $pubWindowOk = function ($start, $end) use ($pubToday) {
        $ok = true;

        if ($start !== null && $start !== '' && preg_match('/^\d{4}-\d{2}-\d{2}/', (string) $start)) {
            $ok = $ok && substr((string) $start, 0, 10) <= $pubToday;
        }

        if ($end !== null && $end !== '' && preg_match('/^\d{4}-\d{2}-\d{2}/', (string) $end)) {
            $ok = $ok && substr((string) $end, 0, 10) >= $pubToday;
        }

        return $ok;
    };

    $pubAll = [];

    foreach (DB::table('content_downloads')
        ->where('download_status', 'ACTIVE')
        ->orderByDesc('download_date')
        ->orderBy('download_title')
        ->get() as $pubRow) {
        if (! $pubWindowOk($pubRow->download_start_date ?? null, $pubRow->download_end_date ?? null)) {
            continue;
        }

        $pubTitle = trim((string) $pubRow->download_title);

        if ($pubTitle === '') {
            continue;
        }

        $pubDate = trim((string) $pubRow->download_date);

        $pubAll[] = [
            'id' => (int) $pubRow->download_id,
            'title' => $pubTitle,
            'cat' => (string) $pubRow->download_category,
            'year' => preg_match('/^(\d{4})/', $pubDate, $pubYm) ? $pubYm[1] : '',
            'file' => (string) $pubRow->download_file,
            'image' => trim((string) ($pubRow->download_img ?? $pubRow->download_image ?? '')),
            'sorting' => (int) $pubRow->download_sorting,
        ];
    }

    /* ---------------------------------------------------------------- penapis --- */
    $pubKat = trim((string) request()->query('kat', ''));
    $pubKat = isset($pubCats[$pubKat]) ? $pubKat : '';

    $pubTahun = trim((string) request()->query('tahun', ''));
    $pubTahun = preg_match('/^\d{4}$/', $pubTahun) ? $pubTahun : '';

    $pubQ = trim((string) request()->query('q', ''));
    $pubQ = mb_substr($pubQ, 0, 80);

    $pubLink = function (array $over = []) use ($pubBase, $pubKat, $pubTahun, $pubQ) {
        $params = array_merge(['kat' => $pubKat, 'tahun' => $pubTahun, 'q' => $pubQ], $over);
        $params = array_filter($params, fn ($v) => $v !== '' && $v !== null);

        return $pubBase.($params ? '?'.http_build_query($params) : '');
    };

    // Kiraan ikut kategori & tahun (sebelum tapisan)
    $pubCatCounts = [];
    $pubYearCounts = [];

    foreach ($pubAll as $pubItem) {
        $pubCatCounts[$pubItem['cat']] = ($pubCatCounts[$pubItem['cat']] ?? 0) + 1;

        if ($pubItem['year'] !== '') {
            $pubYearCounts[$pubItem['year']] = ($pubYearCounts[$pubItem['year']] ?? 0) + 1;
        }
    }

    krsort($pubYearCounts);

    // Tapisan
    $pubFiltered = array_values(array_filter($pubAll, function ($item) use ($pubKat, $pubTahun, $pubQ) {
        if ($pubKat !== '' && $item['cat'] !== $pubKat) {
            return false;
        }

        if ($pubTahun !== '' && $item['year'] !== $pubTahun) {
            return false;
        }

        if ($pubQ !== '' && mb_stripos($item['title'], $pubQ) === false) {
            return false;
        }

        return true;
    }));
@endphp

<style>
.pub__container {
    padding: 32px 20px 60px;
    max-width: 1200px;
    margin: 0 auto;
}
.pub__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}
.pub__breadcrumb a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
}
.pub__breadcrumb a:hover {
    text-decoration: underline;
}
.pub__header {
    margin-bottom: 30px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 20px;
}
.pub__header h1 {
    margin: 0 0 10px;
    color: var(--green);
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
}
.pub__lead {
    margin: 0;
    max-width: 900px;
    color: var(--bs-secondary-color);
    font-size: .95rem;
    line-height: 1.7;
}
.pub__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.pub__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
}
.pub__tab:hover {
    border-color: var(--teal);
    color: var(--teal);
}
.pub__tab.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 25%, transparent);
}
.pub__tab-count {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--teal) 15%, transparent);
    color: var(--teal);
    font-size: .75rem;
    font-weight: 800;
}
.pub__tab.is-active .pub__tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.pub__filters-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pub__search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.pub__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 280px;
}
.pub__search input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--ink);
    font-size: .9rem;
}
.pub__search input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent);
}
.pub__search button {
    padding: 10px 22px;
    border: 1px solid var(--teal);
    border-radius: 10px;
    background: var(--teal);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.pub__search button:hover {
    background: var(--green);
    border-color: var(--green);
}
.pub__reset-btn {
    padding: 10px 20px;
    border: 1px solid #8B0000;
    border-radius: 10px;
    background: #8B0000;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    white-space: nowrap;
}
.pub__reset-btn:hover {
    opacity: 0.9;
    color: #fff;
}
.pub__year-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}
.pub__filter-label {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    margin-right: 4px;
}
.pub__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.pub__chip:hover {
    border-color: var(--teal);
    color: var(--teal);
}
.pub__chip.is-active {
    background: color-mix(in srgb, var(--teal) 15%, transparent);
    border-color: var(--teal);
    color: var(--teal);
    font-weight: 800;
}
.pub__count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--bs-secondary-color);
    font-size: .9rem;
    font-weight: 600;
}
.pub__pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--teal) 15%, transparent);
    color: var(--teal);
    font-size: .8rem;
    font-weight: 700;
}

/* Book Grid Showcase Style matching Image Reference */
.pub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}
.pub__book-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.pub__book-card:hover {
    transform: translateY(-5px);
    border-color: var(--teal);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 8%, transparent);
}
.pub__book-cover {
    position: relative;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fade) 60%, transparent), var(--fade));
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border-bottom: 1px solid var(--line);
}
/* 3D Realistic Book Graphic Simulation */
.pub__book-mockup {
    width: 140px;
    height: 190px;
    background: #ffffff;
    border-radius: 4px 8px 8px 4px;
    box-shadow: -12px 10px 25px rgba(0,0,0,0.2), inset 4px 0 10px rgba(0,0,0,0.05), inset -2px 0 3px rgba(0,0,0,0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-8deg);
    transition: transform 0.3s ease;
    border-left: 6px solid #1e293b; /* Book spine look */
}
.pub__book-card:hover .pub__book-mockup {
    transform: perspective(1000px) rotateY(0deg) scale(1.03);
}
.pub__book-mockup::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 2px;
    bottom: 2px;
    width: 6px;
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
    border-radius: 0 2px 2px 0;
    z-index: 2;
}
.pub__book-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pub__book-badge-float {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--teal);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 3;
}
.pub__book-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 16px;
}
.pub__book-title {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
}
.pub__book-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.pub__book-year {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}
.pub__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--teal);
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.pub__btn:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.pub__btn svg {
    width: 14px;
    height: 14px;
}
.pub__empty {
    grid-column: 1 / -1;
    padding: 50px 20px;
    border: 2px dashed var(--line);
    border-radius: 16px;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    background: var(--bs-body-bg);
}
.pub__note {
    margin-top: 40px;
    padding: 16px 20px;
    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: .88rem;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .pub__container { padding: 20px 16px 40px; }
    .pub__grid { grid-template-columns: 1fr; }
}
</style>

<section class="pub">
    <div class="pub__container">

        {{-- ============================ BREADCRUMB ============================ --}}
        <nav class="pub__breadcrumb" aria-label="breadcrumb">
            <a href="{{ url('/') }}">{{ $pubIsEn ? 'Home' : 'Utama' }}</a>
            <span>/</span>
            <span>Media</span>
            <span>/</span>
            <span>{{ $pubIsEn ? 'Publications' : 'Penerbitan' }}</span>
        </nav>

        {{-- ============================== TAJUK ============================== --}}
        <header class="pub__header">
            <h1>{{ $pubIsEn ? 'Publications' : 'Penerbitan' }}</h1>
            <p class="pub__lead">
                {{ $pubIsEn
                    ? 'Official publications of the Ministry of Natural Resources and Environmental Sustainability — policies, guidelines, action plans, reports and circulars. All documents are in PDF format.'
                    : 'Penerbitan rasmi Kementerian Sumber Asli dan Kelestarian Alam — dasar, garis panduan, pelan tindakan, laporan dan surat pekeliling. Semua dokumen dalam format PDF.' }}
            </p>
        </header>

        {{-- ======================= TAB KATEGORI (SEKTOR) ======================= --}}
        <nav class="pub__tabs" aria-label="{{ $pubIsEn ? 'Publication category' : 'Kategori penerbitan' }}">
            <a class="pub__tab {{ $pubKat === '' ? 'is-active' : '' }}" href="{{ $pubLink(['kat' => '']) }}">
                {{ $pubIsEn ? 'All' : 'Semua' }}
                <span class="pub__tab-count">{{ count($pubAll) }}</span>
            </a>

            @foreach ($pubCats as $pubCatCode => $pubCatLabels)
                @if (($pubCatCounts[$pubCatCode] ?? 0) > 0)
                    <a class="pub__tab {{ $pubKat === $pubCatCode ? 'is-active' : '' }}" href="{{ $pubLink(['kat' => $pubCatCode]) }}">
                        {{ $pubCatLabels[$pubLang] }}
                        <span class="pub__tab-count">{{ $pubCatCounts[$pubCatCode] }}</span>
                    </a>
                @endif
            @endforeach
        </nav>

        {{-- ====================== KAD PENAPIS / CARIAN (GAYA UKAS) ====================== --}}
        <div class="pub__filters-card">
            <form class="pub__search-row" method="get" action="{{ $pubBase }}" role="search">
                @if ($pubKat !== '')
                    <input type="hidden" name="kat" value="{{ $pubKat }}">
                @endif

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

                <div class="pub__search">
                    <input type="search" name="q" value="{{ $pubQ }}"
                           placeholder="{{ $pubIsEn ? 'Search publication…' : 'Kata Kunci' }}"
                           aria-label="{{ $pubIsEn ? 'Search publication' : 'Cari penerbitan' }}">
                </div>

                <button type="submit">{{ $pubIsEn ? 'Search' : 'CARI' }}</button>
                <a class="pub__reset-btn" href="{{ $pubBase }}{{ $pubKat !== '' ? '?kat='.$pubKat : '' }}">{{ $pubIsEn ? 'Reset' : 'SET SEMULA' }}</a>
            </form>

            @if (count($pubYearCounts) > 1)
                <div class="pub__year-filter">
                    <span class="pub__filter-label">{{ $pubIsEn ? 'YEAR' : 'TAHUN' }}</span>
                    <a class="pub__chip {{ $pubTahun === '' ? 'is-active' : '' }}" href="{{ $pubLink(['tahun' => '']) }}">
                        {{ $pubIsEn ? 'All' : 'Semua' }}
                    </a>

                    @foreach ($pubYearCounts as $pubYearKey => $pubYearCount)
                        <a class="pub__chip {{ $pubTahun === (string) $pubYearKey ? 'is-active' : '' }}"
                           href="{{ $pubLink(['tahun' => (string) $pubYearKey]) }}">
                            {{ $pubYearKey }} <span>({{ $pubYearCount }})</span>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- =========================== KIRAAN + PILL =========================== --}}
        <div class="pub__count">
            <span>{{ count($pubFiltered) }} {{ $pubIsEn ? 'publications found' : 'penerbitan dijumpai' }}</span>

            @if ($pubKat !== '')
                <span class="pub__pill">{{ $pubCatName($pubKat) }}</span>
            @endif

            @if ($pubTahun !== '')
                <span class="pub__pill">{{ $pubTahun }}</span>
            @endif

            @if ($pubQ !== '')
                <span class="pub__pill">“{{ $pubQ }}”</span>
            @endif
        </div>

        {{-- ============================== PAPARAN KAD BUKU (GAYA MODEN PORTAL) ============================== --}}
        <div class="pub__grid">
            @if (count($pubFiltered) > 0)
                @foreach ($pubFiltered as $pubIndex => $pubItem)
                   @php
                        $pubFileUrl = $pubUrl($pubItem['file']);

                        // Use each publication's own image path.
                        $pubImgUrl = $pubUrl($pubItem['image']);
                    @endphp
                    <div class="pub__book-card">
                        <div class="pub__book-cover">
                            <span class="pub__book-badge-float">{{ $pubCatName($pubItem['cat']) }}</span>
                            <div class="pub__book-mockup">
                                @if ($pubImgUrl !== '')
                                    <img src="{{ $pubImgUrl }}" alt="{{ $pubItem['title'] }}" loading="lazy">
                                @else
                                    <div style="display: flex; flex-direction: column; padding: 16px 14px; text-align: left; height: 100%;">
                                        <div style="font-size: 0.55rem; font-weight: 800; color: var(--green); text-transform: uppercase; margin-bottom: 8px; line-height: 1.2;">NRES</div>
                                        <div style="font-size: 0.75rem; font-weight: 800; color: #0f172a; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;">{{ $pubItem['title'] }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="pub__book-content">
                            <h3 class="pub__book-title">{{ $pubItem['title'] }}</h3>

                            <div class="pub__book-footer">
                                <span class="pub__book-year">{{ $pubItem['year'] !== '' ? $pubItem['year'] : '—' }}</span>
                                @if ($pubFileUrl !== '')
                                    <a class="pub__btn" href="{{ $pubFileUrl }}" target="_blank" rel="noopener">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v11"/><path d="M7.5 10L12 14.5 16.5 10"/><path d="M4.5 17.5v1.5A2 2 0 0 0 6.5 21h11a2 2 0 0 0 2-2v-1.5"/></svg>
                                        {{ $pubIsEn ? 'Download' : 'Muat Turun' }}
                                    </a>
                                @else
                                    <span class="pub__none">—</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="pub__empty">
                    <p style="margin: 0;">
                        {{ $pubIsEn
                            ? 'No publications match this filter. Try another category, year or keyword.'
                            : 'Tiada penerbitan sepadan dengan tapisan ini. Cuba kategori, tahun atau kata kunci lain.' }}
                    </p>
                </div>
            @endif
        </div>

        {{-- =============================== NOTA =============================== --}}
        <p class="pub__note">
            {{ $pubIsEn
                ? 'Note: All documents are in PDF format and open in a new tab. For a document that is unavailable or for further enquiries, please contact the Corporate Communications Division at +603 8091 7000.'
                : 'Nota: Semua dokumen dalam format PDF dan dibuka dalam tab baharu. Bagi dokumen yang tidak dapat dibuka atau sebarang pertanyaan, sila hubungi Bahagian Komunikasi Korporat di talian +603 8091 7000.' }}
        </p>
    </div>
</section>