@php
    $thumbClass = 'materi-thumb-t' . ($row->id % 5);
    $tipe = $row->tipe_efektif ?? 'teks';
    
    if ($tipe === 'file') {
        $tipeLabel = 'File PDF';
        $tipeIcon  = 'bi-file-earmark-pdf-fill';
    } elseif ($tipe === 'slide') {
        $tipeLabel = 'Slide';
        $tipeIcon  = 'bi-easel2-fill';
    } else {
        $tipeLabel = 'Teks';
        $tipeIcon  = 'bi-file-text-fill';
    }

    $babLabel = (!empty($row->nama_bab)) ? 'Bab ' . $row->bab_ke . ': ' . $row->nama_bab : null;
@endphp

<div class="col-12 col-md-6 col-lg-4">
    <div class="card h-100 border-0 shadow-sm materi-card">
        {{-- Thumbnail --}}
        <div class="materi-thumb {{ $thumbClass }}">
            <div class="materi-thumb-icon"><i class="bi {{ $tipeIcon }}"></i></div>
            <span class="materi-badge-tipe"><i class="bi {{ $tipeIcon }}"></i> {{ $tipeLabel }}</span>
        </div>

        {{-- Body --}}
        <div class="materi-card-body flex-grow-1">
            @if($babLabel)
                <div class="mb-2">
                    <span class="badge bg-info-subtle text-primary border border-info materi-badge-bab">
                        {{ $babLabel }} &middot; Pertemuan {{ $row->pertemuan ?: '-' }}
                    </span>
                </div>
            @endif

            <h6 class="fw-bold text-dark materi-title mb-2">{{ $row->judul }}</h6>
            <div class="materi-meta text-muted mb-1">
                <i class="bi bi-person-circle me-1"></i>{{ $row->nama_guru ?: 'Administrator' }}
            </div>
            <div class="materi-meta text-muted mb-3">
                <i class="bi bi-calendar4-event me-1"></i>{{ $row->tanggal_tampil ? date('d M Y', strtotime($row->tanggal_tampil)) : '-' }}
            </div>

            @if($tipe === 'file')
                <a href="{{ route('kbm.file', ['kind' => 'materi', 'id' => $row->id]) }}"
                   target="_blank"
                   class="btn btn-outline-danger w-100 materi-btn-lihat no-underline">
                    <i class="bi bi-cloud-arrow-down-fill me-1"></i> Unduh Lampiran Berkas
                </a>
            @else
                <button type="button"
                        class="btn btn-outline-primary w-100 materi-btn-lihat btn-lihat-materi"
                        data-bs-toggle="modal"
                        data-bs-target="#modalLihatMateri"
                        data-judul="{{ $row->judul }}"
                        data-tipe="{{ $tipe }}"
                        data-konten="{{ base64_encode($row->konten_processed ?? $row->konten) }}">
                    <i class="bi bi-{{ $tipe === 'slide' ? 'easel2' : 'book-open' }} me-1"></i>
                    {{ $tipe === 'slide' ? 'Lihat Slide' : 'Baca Materi' }}
                </button>
            @endif
        </div>

        {{-- Footer --}}
        <div class="materi-footer">
            <span class="mapel-name"><i class="bi bi-mortarboard-fill me-1"></i>{{ $row->nama_guru ?: 'Administrator' }}</span>
            <span class="badge {{ $tipe === 'file' ? 'bg-danger-subtle text-danger' : 'bg-success-subtle text-success' }}">
                {{ $tipeLabel }}
            </span>
        </div>
    </div>
</div>