@php
    $categories = \App\Models\Backend\Ref::where('cat', 'DOWNLOAD_CAT')->orderBy('sort')->pluck('descr', 'code');
    $type = request()->query('type', '');
    $search = trim((string) request()->query('search_keyword', ''));
    $selectedCategory = null;

    foreach ($categories as $code => $name) {
        if ($type !== '' && ($type === \Illuminate\Support\Str::slug($code) || $type === \Illuminate\Support\Str::slug($name))) {
            $selectedCategory = $code;
            break;
        }
    }

    $downloadsQuery = \App\Models\Backend\ContentDownload::published()
        ->where('download_language', $lang)
        ->when($selectedCategory, fn ($query) => $query->where('download_category', $selectedCategory))
        ->when($search !== '', fn ($query) => $query->where(function ($query) use ($search) {
            $query->where('download_title', 'like', "%{$search}%")
                ->orWhere('download_source', 'like', "%{$search}%");
        }))
        ->orderBy('download_sorting')
        ->orderByDesc('download_date')
        ->orderBy('download_title');
    $downloads = $downloadsQuery->paginate(12)->withQueryString();
    $pageTitle = $selectedCategory ? ($categories[$selectedCategory] ?? $selectedCategory) : 'Dokumen & Sumber';
@endphp

<section class="document-library" aria-labelledby="document-library-title">
    <div class="document-library__container">
        <nav class="document-library__breadcrumb" aria-label="Breadcrumb">
            <a href="/{{ $siteSlug }}">Utama</a>
            <span aria-hidden="true">/</span>
            <span>{{ $pageTitle }}</span>
        </nav>

        <header class="document-library__header">
            <span class="document-library__eyebrow">Pusat Sumber</span>
            <h1 id="document-library-title">{{ $pageTitle }}</h1>
            <p>Terokai dan baca koleksi dokumen serta penerbitan kami secara dalam talian.</p>
        </header>

        <div class="document-library__filters">
            <form class="document-library__search" method="get" action="{{ url()->current() }}">
                @if($type !== '')
                <input type="hidden" name="type" value="{{ $type }}">
                @endif
                <label class="document-library__sr-only" for="document-search">Kata kunci</label>
                <input id="document-search" type="search" name="search_keyword" value="{{ $search }}" placeholder="Cari tajuk dokumen...">
                <button type="submit"><i class="fas fa-search" aria-hidden="true"></i> Cari</button>
                @if($search !== '')
                <a class="document-library__reset" href="{{ $type !== '' ? url()->current().'?type='.urlencode($type) : url()->current() }}">Set Semula</a>
                @endif
            </form>

            @if($categories->isNotEmpty())
            <div class="document-library__categories" aria-label="Kategori dokumen">
                <a class="document-library__category {{ $selectedCategory === null ? 'is-active' : '' }}"
                   href="{{ url()->current() }}" @if($selectedCategory === null) aria-current="page" @endif>Semua</a>
                @foreach($categories as $code => $name)
                @php $categorySlug = \Illuminate\Support\Str::slug($code); @endphp
                <a class="document-library__category {{ $selectedCategory === $code ? 'is-active' : '' }}"
                   href="{{ url()->current().'?type='.urlencode($categorySlug) }}"
                   @if($selectedCategory === $code) aria-current="page" @endif>{{ $name }}</a>
                @endforeach
            </div>
            @endif
        </div>

        @if($downloads->isNotEmpty())
        <div class="document-library__summary">
            <span>{{ $downloads->total() }} dokumen</span>
            @if($search !== '')<span>Hasil carian untuk “{{ $search }}”</span>@endif
        </div>
        <div class="document-library__grid">
            @foreach($downloads as $item)
            @php
                $isPdf = $item->download_file && strtolower(pathinfo($item->download_file, PATHINFO_EXTENSION)) === 'pdf';
                $readerUrl = $isPdf ? route('documents.reader.show', $item->download_id) : null;
                $fileUrl = $item->download_file ? image_url($item->download_file) : null;
                $openUrl = $readerUrl ?? $fileUrl ?? '#';
                $categoryName = $categories[$item->download_category] ?? $item->download_category;
            @endphp
            <article class="document-card">
                @if($item->download_file)
                <a class="document-card__cover-link" href="{{ $openUrl }}" @if(!$isPdf) download @endif aria-label="{{ $isPdf ? 'Baca' : 'Muat turun' }} {{ $item->download_title }}">
                @else
                <div class="document-card__cover-link document-card__cover-link--disabled" aria-hidden="true">
                @endif
                    <div class="document-card__book">
                        <div class="document-card__cover">
                            @if($item->download_img)
                            <img src="{{ image_url($item->download_img) }}" alt="Kulit {{ $item->download_title }}" loading="lazy">
                            @else
                            <div class="document-card__placeholder"><i class="fas fa-book-open" aria-hidden="true"></i></div>
                            @endif
                        </div>
                    </div>
                    @if($isPdf)<span class="document-card__format">PDF</span>@endif
                @if($item->download_file)
                </a>
                @else
                </div>
                @endif

                <div class="document-card__content">
                    @if($categoryName)<span class="document-card__category">{{ $categoryName }}</span>@endif
                    <h2 class="document-card__title">{{ $item->download_title }}</h2>
                    @if($item->download_source)<p class="document-card__source">{{ $item->download_source }}</p>@endif
                    <div class="document-card__actions">
                        @if($readerUrl)
                        <a class="document-card__button document-card__button--read" href="{{ $readerUrl }}">
                            <i class="fas fa-book-open" aria-hidden="true"></i> Baca Online
                        </a>
                        @endif
                        @if($fileUrl)
                        <a class="document-card__button document-card__button--download" href="{{ $fileUrl }}" download>
                            <i class="fas fa-download" aria-hidden="true"></i> Muat Turun
                        </a>
                        @else
                        <span class="document-card__unavailable">Belum tersedia</span>
                        @endif
                    </div>
                </div>
            </article>
            @endforeach
        </div>

        @if($downloads->hasPages())
        <nav class="document-library__pagination" aria-label="Navigasi halaman">
            {{ $downloads->links() }}
        </nav>
        @endif
        @else
        <div class="document-library__empty">
            <i class="fas fa-folder-open" aria-hidden="true"></i>
            <h2>Tiada dokumen ditemui</h2>
            <p>Cuba kata kunci lain atau pilih kategori yang berbeza.</p>
        </div>
        @endif
    </div>
</section>

<style>
.document-library { position: relative; padding: 64px 0 90px; background: #f5f7fa; }
.document-library::before { position: absolute; inset: 0 0 auto; height: 260px; background: linear-gradient(135deg, #fff 0%, #edf2f7 100%); content: ""; }
.document-library__container { position: relative; width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.document-library__breadcrumb { display: flex; margin-bottom: 26px; align-items: center; gap: 10px; color: #7b8491; font-size: .85rem; }
.document-library__breadcrumb a { color: #0057ad; text-decoration: none; }
.document-library__header { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 2px solid #720b04; }
.document-library__eyebrow { color: #720b04; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.document-library__header h1 { margin: 8px 0 10px; color: #480500; font-family: Poppins, Arial, sans-serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 600; }
.document-library__header p { margin: 0; color: #515b66; font-size: 1rem; }
.document-library__filters { margin-bottom: 30px; padding: 18px; border: 1px solid #e1e6ec; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px rgb(26 44 68 / 5%); }
.document-library__search { display: flex; align-items: center; gap: 10px; }
.document-library__search input { width: min(420px, 100%); height: 44px; padding: 0 14px; border: 1px solid #cbd2da; border-radius: 6px; color: #263442; font: inherit; }
.document-library__search button, .document-library__reset { display: inline-flex; min-height: 44px; padding: 0 18px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #0057ad; border-radius: 6px; background: #0057ad; color: #fff; font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.document-library__reset { border-color: #d4dbe3; background: #f7f8fa; color: #394655; }
.document-library__categories { display: flex; margin-top: 16px; flex-wrap: wrap; gap: 8px; }
.document-library__category { padding: 7px 12px; border: 1px solid #dce2e9; border-radius: 999px; color: #46515e; font-size: .82rem; text-decoration: none; transition: .2s; }
.document-library__category:hover, .document-library__category.is-active { border-color: #720b04; background: #720b04; color: white; }
.document-library__summary { display: flex; margin-bottom: 20px; justify-content: space-between; gap: 12px; color: #687482; font-size: .88rem; }
.document-library__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.document-card { min-width: 0; overflow: hidden; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; box-shadow: 0 4px 18px rgb(25 38 52 / 6%); transition: transform .25s, box-shadow .25s; }
.document-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgb(25 38 52 / 12%); }
.document-card__cover-link { position: relative; z-index: 1; display: flex; min-height: 300px; padding: 25px 32px 16px 20px; align-items: center; justify-content: center; overflow: visible; background: radial-gradient(ellipse at center, #fff 0%, #f1f3f5 76%); text-decoration: none; }
.document-card__cover-link--disabled { cursor: default; }
.document-card__book { position: relative; display: flex; width: min(190px, 100%); aspect-ratio: 1 / 1.414; align-items: center; justify-content: center; perspective: 700px; transform: rotateY(-35deg); transform-style: preserve-3d; transition: transform .5s ease; }
.document-card__book::before { position: absolute; z-index: 0; inset: 2px -5px 2px 4px; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(0deg, #fff 0 2px, #e7e9ec 2px 3px); box-shadow: 5px 6px 12px rgb(0 0 0 / 17%); content: ""; transform: translateZ(-12px); }
.document-card__cover { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; border-radius: 0 4px 4px 0; background: #e7ebef; box-shadow: 8px 9px 18px rgb(0 0 0 / 24%), inset -5px 0 7px rgb(0 0 0 / 14%); transform: translateZ(12px); transform-origin: left center; transition: transform .5s ease, box-shadow .5s ease; }
.document-card__cover::before { position: absolute; z-index: -1; top: 2px; right: -18px; bottom: 2px; width: 20px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(0deg, #fff 0 2px, #dfe2e6 2px 3px); box-shadow: 2px 3px 5px rgb(0 0 0 / 15%); content: ""; transform: skewY(1deg); }
.document-card__cover::after { position: absolute; inset: 0 auto 0 0; width: 10px; background: linear-gradient(90deg, rgb(0 0 0 / 42%), rgb(255 255 255 / 16%)); content: ""; }
.document-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.document-card__cover-link:hover .document-card__book, .document-card__cover-link:focus-visible .document-card__book { transform: rotateY(-20deg) translateY(-3px) scale(1.025); }
.document-card__cover-link:hover .document-card__cover, .document-card__cover-link:focus-visible .document-card__cover { transform: translateZ(12px); box-shadow: 12px 12px 22px rgb(0 0 0 / 28%), inset -5px 0 7px rgb(0 0 0 / 16%); }
.document-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #7b8794; font-size: 3rem; }
.document-card__format { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border-radius: 4px; background: #720b04; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.document-card__content { display: flex; min-height: 172px; padding: 16px; flex-direction: column; border-top: 1px solid #edf0f3; }
.document-card__category { margin-bottom: 6px; color: #720b04; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.document-card__title { display: -webkit-box; overflow: hidden; margin: 0 0 6px; color: #263442; font-size: .98rem; font-weight: 650; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.document-card__source { margin: 0 0 12px; color: #7b8491; font-size: .8rem; }
.document-card__actions { display: flex; margin-top: auto; flex-wrap: wrap; gap: 8px; }
.document-card__button { display: inline-flex; min-height: 36px; padding: 0 11px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #0057ad; border-radius: 5px; color: #0057ad; font-size: .78rem; font-weight: 600; text-decoration: none; transition: .2s; }
.document-card__button:hover { background: #0057ad; color: #fff; }
.document-card__button--read { background: #0057ad; color: #fff; }
.document-card__button--read:hover { background: #004487; }
.document-card__unavailable { color: #8b949e; font-size: .8rem; }
.document-library__pagination { margin-top: 36px; }
.document-library__pagination nav { display: flex; justify-content: center; }
.document-library__empty { padding: 70px 20px; border: 1px dashed #cbd2da; border-radius: 12px; background: #fff; text-align: center; }
.document-library__empty i { color: #9aa4af; font-size: 2.5rem; }
.document-library__empty h2 { margin: 14px 0 6px; color: #364351; font-size: 1.2rem; }
.document-library__empty p { margin: 0; color: #7b8491; }
.document-library__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 1024px) { .document-library__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .document-library { padding: 36px 0 60px; } .document-library__container { width: min(100% - 28px, 600px); } .document-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } .document-card__cover-link { min-height: 250px; padding: 20px 14px 12px; } .document-card__book { width: min(160px, 100%); } .document-card__content { min-height: 185px; padding: 13px; } .document-card__button { flex: 1 1 100%; } }
@media (max-width: 460px) { .document-library__grid { grid-template-columns: 1fr; } .document-card { display: grid; grid-template-columns: 42% 1fr; } .document-card__cover-link { min-height: 235px; padding: 14px 10px; } .document-card__book { width: 100%; } .document-card__content { min-height: 0; border-top: 0; border-left: 1px solid #edf0f3; } .document-card__actions { flex-direction: column; } .document-library__search { align-items: stretch; flex-wrap: wrap; } .document-library__search input { width: 100%; } .document-library__summary { align-items: flex-start; flex-direction: column; } }
</style>