@extends('layouts.app')

@section('title', 'Materi Belajar · SmartPenF')

@section('content')
<style>
    /* Standarisasi Font & Tampilan Materi Siswa */
    .student-materials-page,
    .student-materials-page * {
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
    }

    .student-materials-page a,
    .student-materials-page a:hover,
    .student-materials-page a:focus {
        text-decoration: none !important;
    }

    /* Bab Card Styles — Persis seperti desain referensi */
    .bab-box-card {
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid #edf2f7;
        box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
        transition: all 0.2s ease;
        overflow: hidden;
        margin-bottom: 12px;
    }
    .bab-box-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.08);
    }
    .bab-click-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: #ffffff;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: background 0.15s ease;
    }
    .bab-click-header:hover {
        background: #f8fafc;
    }
    .bab-squircle-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2563eb;
        color: #ffffff;
        font-size: 18px;
        flex-shrink: 0;
        box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22);
    }
    .bab-squircle-icon-muted {
        background: #64748b;
        box-shadow: 0 3px 8px rgba(100, 116, 139, 0.2);
    }
    .bab-card-title {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }
    .bab-card-desc {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
    }
    .bab-badge-count {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #2563eb !important;
        background-color: #eff6ff !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        border: 1px solid #dbeafe !important;
        white-space: nowrap !important;
    }
    .bab-arrow-icon {
        transition: transform 0.2s ease;
        font-size: 13px;
        color: #94a3b8;
    }
    .bab-click-header[aria-expanded="true"] .bab-arrow-icon {
        transform: rotate(90deg);
    }

    /* ===================== KARTU MATERI (GAYA CLASSROOM SESUAI MATERI_SISWA.PHP) ===================== */
    .materi-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        transition: transform .15s ease, box-shadow .15s ease;
        background: #ffffff !important;
    }
    .materi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
    }

    .materi-thumb {
        position: relative;
        height: 120px;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }
    .materi-thumb::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cpath d='M-20,40 C20,10 60,70 100,40 C140,10 180,70 220,40' stroke='rgba(255,255,255,0.20)' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3Cpath d='M-20,85 C20,55 60,115 100,85 C140,55 180,115 220,85' stroke='rgba(255,255,255,0.15)' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3Cpath d='M-20,130 C20,100 60,160 100,130 C140,100 180,160 220,130' stroke='rgba(255,255,255,0.10)' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-size: cover;
        background-position: center;
    }
    .materi-thumb-icon {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        color: rgba(255,255,255,.55);
    }
    .materi-thumb-t0 { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
    .materi-thumb-t1 { background: linear-gradient(135deg,#8b5cf6,#5b21b6); }
    .materi-thumb-t2 { background: linear-gradient(135deg,#06b6d4,#0e7490); }
    .materi-thumb-t3 { background: linear-gradient(135deg,#f59e0b,#b45309); }
    .materi-thumb-t4 { background: linear-gradient(135deg,#ec4899,#a21caf); }

    .materi-badge-tipe {
        position: absolute;
        left: 12px;
        bottom: 4px;
        z-index: 2;
        background: #ffffff;
        color: #333333;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 3px 8px rgba(0,0,0,.15);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    .materi-card-body {
        padding: 16px 14px 4px 14px;
    }
    .materi-title {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 38px;
    }
    .materi-meta {
        font-size: 11.5px;
    }
    .materi-badge-bab {
        display: inline-block;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        line-height: 1.35;
        font-size: 10.5px;
        max-width: 100%;
        padding: 3px 8px;
    }

    .materi-btn-lihat {
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        padding: 7px 10px;
        margin-bottom: 8px;
    }

    .materi-footer {
        background: #eef4ff;
        border-top: 1px solid #e2eaff;
        border-radius: 0 0 16px 16px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .materi-footer .mapel-name {
        font-size: 11.5px;
        font-weight: 700;
        color: #1d4ed8;
        display: flex;
        align-items: center;
    }

    /* Slide Viewer dalam Modal */
    .slidev-toolbar { padding: 4px 2px; }
    .slidev-canvas-wrap {
        display: flex;
        justify-content: center;
        overflow: auto;
        background: #0f172a;
        border-radius: 12px;
        padding: 14px;
    }
    .slidev-canvas-outer { position: relative; flex-shrink: 0; }
    .slidev-canvas {
        width: 960px;
        height: 540px;
        position: relative;
        background: #ffffff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        transform-origin: top left;
        overflow: hidden;
        border-radius: 8px;
    }
    .slidev-bg-layer { position: absolute; inset: 0; background-repeat: no-repeat; z-index: 0; }
    .slidev-el { position: absolute; box-sizing: border-box; z-index: 1; }
    .slidev-el-content { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; }
    .slidev-el-btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-weight: 700;
        user-select: none;
    }

    /* Modal styling */
    .materi-modal-header {
        background: #0f172a;
        color: #ffffff;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
        padding: 14px 20px;
        border-bottom: 1px solid #1e293b;
    }

    /* Tabrakan kelas .collapse: utilitas Tailwind (visibility:collapse)
       menimpa akordeon Bootstrap, sehingga panel bab yang dibuka tampil kosong.
       Panel tertutup tetap tersembunyi lewat display:none, jadi aman. */
    .student-materials-page .collapse {
        visibility: visible;
    }
</style>

<div class="student-materials-page mx-auto max-w-6xl space-y-5">
    {{-- ── Header Navigasi ─────────────────────────────────── --}}
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb">
                    <a href="{{ route('student.dashboard') }}" class="hover:text-blue-200 text-white/80 no-underline">Ruang Belajar</a>
                    <i class="bi bi-chevron-right text-white/60" aria-hidden="true"></i>
                    <span class="text-white font-bold">Materi Belajar</span>
                </p>
                <h1 class="pkbm-dashboard__title text-white">Materi Belajar</h1>
                <p class="pkbm-dashboard__subtitle text-blue-100">
                    {{ $student->className }}
                    @if($period) · TP {{ $period->tahun_pelajaran }} · Semester {{ $period->semester }} @endif
                </p>
            </div>
            <div class="flex items-center gap-2">
                <span class="inline-flex items-center gap-1.5 rounded-2xl bg-white/20 backdrop-blur-md px-3.5 py-1.5 text-xs font-bold text-white border border-white/20 shadow-sm">
                    <i class="bi bi-book-half"></i>
                    <span>{{ $materials->count() }} Modul Tersedia</span>
                </span>
            </div>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs text-emerald-800 flex items-center gap-2 font-medium">
            <i class="bi bi-check-circle-fill text-emerald-600"></i>
            <span>{{ session('status') }}</span>
        </div>
    @endif

    @if (! $period)
        <div class="rounded-2xl border border-amber-200 bg-amber-50 p-5 text-center">
            <i class="bi bi-exclamation-triangle text-3xl text-amber-500"></i>
            <h3 class="mt-2 text-sm font-bold text-amber-900">Periode Akademik Belum Aktif</h3>
            <p class="text-xs text-amber-700 mt-0.5">Pengelola akademik belum mengaktifkan tahun pelajaran berjalan.</p>
        </div>
    @else
        {{-- ── Dropdown Pemilih Mata Pelajaran (Teks Putih) ─────── --}}
        <div class="pt-1 pb-2">
            <label for="select-mapel" class="block text-xs font-black text-white uppercase tracking-wider mb-2 px-0.5">
                Pilih Mata Pelajaran
            </label>
            <div class="relative max-w-md">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-blue-600">
                    <i class="bi bi-book-half text-lg"></i>
                </div>
                <select id="select-mapel"
                        onchange="if(this.value) window.location.href=this.value;"
                        class="w-full pl-11 pr-10 py-3 rounded-2xl bg-white text-slate-800 font-bold text-xs sm:text-sm shadow-md border-0 focus:ring-4 focus:ring-white/30 outline-none cursor-pointer appearance-none transition-all">
                    <option value="{{ route('student.learning.materials') }}" @selected($selectedSubjectId == 0)>
                        Semua Mapel ({{ $materials->count() }} Modul)
                    </option>
                    @foreach($subjects as $mp)
                        <option value="{{ route('student.learning.materials', ['id_mapel' => $mp->id]) }}" @selected($selectedSubjectId == $mp->id)>
                            {{ $mp->nama_mapel }}
                        </option>
                    @endforeach
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3.5 text-slate-400">
                    <i class="bi bi-chevron-down text-xs"></i>
                </div>
            </div>
        </div>

        {{-- ── Kondisi Materi Kosong ──────────────────────────── --}}
        @if ($materials->isEmpty())
            <div class="sp-card p-12 text-center">
                <i class="bi bi-folder-x text-5xl text-slate-300"></i>
                <h3 class="mt-3 text-sm font-bold text-slate-700">Belum Ada Materi</h3>
                <p class="mt-1 text-xs text-slate-500 max-w-sm mx-auto">
                    Belum ada modul atau dokumen materi belajar yang diterbitkan untuk mata pelajaran dan tingkatan kelas Anda.
                </p>
            </div>
        @else
            {{-- ── Daftar Kartu Bab Sesuai Referensi Gambar ────────── --}}
            <div class="space-y-3 pt-2">
                {{-- Daftar Bab --}}
                @foreach($materiByBab as $key => $grup)
                    @php
                        $collapseId = 'babCollapse_' . md5($key);
                        $countItems = count($grup['items']);
                    @endphp
                    <div class="bab-box-card">
                        <button type="button"
                                class="bab-click-header"
                                data-bs-target="#{{ $collapseId }}"
                                aria-expanded="false">
                            <div class="flex items-center gap-3.5">
                                <div class="bab-squircle-icon">
                                    <i class="bi bi-journal-bookmark-fill"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="bab-card-title">
                                        Bab {{ $grup['bab_ke'] }}
                                    </div>
                                    <div class="bab-card-desc truncate sm:whitespace-normal">
                                        {{ $grup['nama_bab'] }}
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2.5 shrink-0 ml-2">
                                <span class="bab-badge-count">
                                    {{ $countItems }} Materi
                                </span>
                                <i class="bi bi-chevron-right bab-arrow-icon"></i>
                            </div>
                        </button>

                        {{-- Isi Materi Saat Bab Dibuka (Gaya Classroom Sesuai materi_siswa.php) --}}
                        <div class="collapse" id="{{ $collapseId }}" style="display: none;">
                            <div class="p-3 sm:p-4 border-top bg-slate-50/60">
                                <div class="row g-3 g-md-4">
                                    @foreach($grup['items'] as $item)
                                        @include('student.learning._material_card', ['row' => $item])
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                {{-- Materi Lainnya (Tanpa Bab) --}}
                @if(!empty($materiTanpaBab))
                    @php
                        $countTanpaBab = count($materiTanpaBab);
                    @endphp
                    <div class="bab-box-card">
                        <button type="button"
                                class="bab-click-header"
                                data-bs-target="#babCollapseTanpaBab"
                                aria-expanded="false">
                            <div class="flex items-center gap-3.5">
                                <div class="bab-squircle-icon bab-squircle-icon-muted">
                                    <i class="bi bi-collection-fill"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="bab-card-title">
                                        Materi Lainnya
                                    </div>
                                    <div class="bab-card-desc">
                                        Modul pembelajaran umum belum dikelompokkan ke Bab tertentu
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2.5 shrink-0 ml-2">
                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[10.5px] font-bold text-slate-600 whitespace-nowrap">
                                    {{ $countTanpaBab }} Materi
                                </span>
                                <i class="bi bi-chevron-right bab-arrow-icon"></i>
                            </div>
                        </button>

                        <div class="collapse" id="babCollapseTanpaBab" style="display: none;">
                            <div class="p-3 sm:p-4 border-top bg-slate-50/60">
                                <div class="row g-3 g-md-4">
                                    @foreach($materiTanpaBab as $item)
                                        @include('student.learning._material_card', ['row' => $item])
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @endif
    @endif
</div>

{{-- ═══════════════════════════════════════════════════════════════
     MODAL LIHAT MATERI (Teks, Video & Slide Interaktif)
     ═══════════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="modalLihatMateri" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content border-0 shadow-2xl rounded-3xl overflow-hidden">
            <div class="modal-header materi-modal-header">
                <div class="flex items-center gap-2 overflow-hidden">
                    <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-white/10 text-blue-300 text-xs shrink-0">
                        <i class="bi bi-book-half"></i>
                    </span>
                    <h6 class="modal-title font-bold text-white text-xs sm:text-sm truncate" id="modalLihatMateriTitle">
                        Materi Belajar
                    </h6>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body p-4 sm:p-6 bg-white" id="modalLihatMateriBody">
                <div class="text-center py-6 text-slate-400">
                    <i class="bi bi-arrow-repeat animate-spin text-2xl"></i>
                    <p class="text-xs mt-2">Memuat konten materi...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    /* ── Click Event untuk Toggle Kartu Bab (Native Robust Handler) ── */
    document.querySelectorAll('.bab-click-header').forEach(function (header) {
        header.addEventListener('click', function (e) {
            e.preventDefault();
            var targetSelector = this.getAttribute('data-bs-target') || this.getAttribute('data-target');
            if (!targetSelector) return;
            var targetEl = document.querySelector(targetSelector);
            if (!targetEl) return;

            var isExpanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded', !isExpanded);

            if (isExpanded) {
                targetEl.classList.remove('show');
                targetEl.style.display = 'none';
            } else {
                targetEl.classList.add('show');
                targetEl.style.display = 'block';
            }
        });
    });

    var modalEl = document.getElementById('modalLihatMateri');
    var modalTitle = document.getElementById('modalLihatMateriTitle');
    var modalBody = document.getElementById('modalLihatMateriBody');
    var currentScaleFn = null;

    function decodeKonten(b64) {
        if (!b64) return '';
        try {
            return decodeURIComponent(escape(atob(b64)));
        } catch (e) {
            try {
                return atob(b64);
            } catch (err) {
                return '';
            }
        }
    }

    /* ── Render Slide Player (Interactive Presentation) ───────── */
    function renderSlideViewer(data) {
        var slides = (data && data.slides && data.slides.length) ? data.slides : [];
        if (!slides.length) {
            modalBody.innerHTML = '<p class="text-slate-500 text-center text-xs py-4">Slide ini belum memiliki halaman konten.</p>';
            currentScaleFn = null;
            return;
        }

        modalBody.innerHTML =
            '<div class="slidev-toolbar flex items-center justify-between mb-3">' +
                '<button type="button" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition cursor-pointer" id="slidevPrev">' +
                    '<i class="bi bi-chevron-left"></i> Sebelumnya' +
                '</button>' +
                '<span class="text-xs font-bold text-slate-700 font-mono" id="slidevCounter">1 / ' + slides.length + '</span>' +
                '<button type="button" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition cursor-pointer" id="slidevNext">' +
                    'Berikutnya <i class="bi bi-chevron-right"></i>' +
                '</button>' +
            '</div>' +
            '<div class="slidev-canvas-wrap">' +
                '<div class="slidev-canvas-outer" id="slidevCanvasOuter">' +
                    '<div class="slidev-canvas" id="slidevCanvas"></div>' +
                '</div>' +
            '</div>';

        var idx = 0;
        var canvas = document.getElementById('slidevCanvas');
        var canvasOuter = document.getElementById('slidevCanvasOuter');
        var counter = document.getElementById('slidevCounter');
        var btnPrev = document.getElementById('slidevPrev');
        var btnNext = document.getElementById('slidevNext');
        var scale = 1;

        function applyBg(target, slide) {
            var opacityPct = (slide.bgOpacity === undefined || slide.bgOpacity === null) ? 100 : slide.bgOpacity;
            target.style.opacity = (opacityPct / 100);
            target.style.backgroundColor = slide.bg || '#ffffff';
            if (slide.bgImage) {
                target.style.backgroundImage = "url('" + slide.bgImage + "')";
                var fit = slide.bgFit || 'cover';
                target.style.backgroundSize = fit === 'contain' ? 'contain' : (fit === 'stretch' ? '100% 100%' : 'cover');
                target.style.backgroundPosition = 'center';
            } else {
                target.style.backgroundImage = 'none';
            }
        }

        function scaleToFit() {
            var wrap = canvas.closest('.slidev-canvas-wrap');
            if (!wrap) return;
            var available = wrap.clientWidth - 28;
            scale = Math.min(1, Math.max(0.25, available / 960));
            canvas.style.transform = 'scale(' + scale + ')';
            canvasOuter.style.width = (960 * scale) + 'px';
            canvasOuter.style.height = (540 * scale) + 'px';
        }

        function handleAction(action) {
            if (!action) return;
            if (action === 'next') { goTo(idx + 1); }
            else if (action === 'prev') { goTo(idx - 1); }
            else if (action.indexOf('goto:') === 0) {
                var n = parseInt(action.split(':')[1], 10) - 1;
                goTo(n);
            } else if (action.indexOf('link:') === 0) {
                var url = action.substring(5);
                if (url) window.open(url, '_blank');
            }
        }

        function render() {
            var slide = slides[idx];
            canvas.innerHTML = '';

            var bgLayer = document.createElement('div');
            bgLayer.className = 'slidev-bg-layer';
            applyBg(bgLayer, slide);
            canvas.appendChild(bgLayer);

            (slide.elements || []).forEach(function (el) {
                var div = document.createElement('div');
                div.className = 'slidev-el';
                div.style.left = el.x + 'px';
                div.style.top = el.y + 'px';
                div.style.width = el.w + 'px';
                div.style.height = el.h + 'px';

                var content = document.createElement('div');
                content.className = 'slidev-el-content';
                var bw = el.borderWidth || 0;

                if (el.type === 'text') {
                    if (bw > 0) {
                        content.style.webkitTextStroke = bw + 'px ' + (el.borderColor || '#000000');
                        content.style.paintOrder = 'stroke fill';
                    }
                    content.style.fontSize = (el.fontSize || 20) + 'px';
                    content.style.color = el.color || '#111111';
                    content.style.fontWeight = el.bold ? '700' : '400';
                    content.style.fontStyle = el.italic ? 'italic' : 'normal';
                    content.style.textAlign = el.align || 'left';
                    content.style.padding = '6px';
                    content.style.whiteSpace = 'pre-wrap';
                    content.style.wordWrap = 'break-word';
                    content.textContent = el.content || '';
                } else if (el.type === 'image') {
                    content.style.border = bw > 0 ? (bw + 'px ' + (el.borderStyle || 'solid') + ' ' + (el.borderColor || '#000000')) : 'none';
                    content.innerHTML = el.src
                        ? '<img src="' + el.src + '" style="width:100%;height:100%;object-fit:cover;display:block;">'
                        : '';
                } else if (el.type === 'button') {
                    content.classList.add('slidev-el-btn-content');
                    content.style.border = bw > 0 ? (bw + 'px ' + (el.borderStyle || 'solid') + ' ' + (el.borderColor || '#000000')) : 'none';
                    content.style.background = el.bg || '#1769d2';
                    content.style.color = el.color || '#ffffff';
                    content.textContent = el.label || 'Tombol';
                    div.style.cursor = 'pointer';
                    div.addEventListener('click', function () { handleAction(el.action); });
                }

                div.appendChild(content);
                canvas.appendChild(div);
            });

            counter.textContent = (idx + 1) + ' / ' + slides.length;
            btnPrev.disabled = (idx === 0);
            btnNext.disabled = (idx === slides.length - 1);
        }

        function goTo(newIdx) {
            if (newIdx < 0 || newIdx >= slides.length) return;
            idx = newIdx;
            render();
        }

        btnPrev.addEventListener('click', function () { goTo(idx - 1); });
        btnNext.addEventListener('click', function () { goTo(idx + 1); });

        render();
        currentScaleFn = scaleToFit;
        setTimeout(scaleToFit, 60);
    }

    /* ── Click Event untuk Tombol Lihat Materi ───────────────── */
    document.querySelectorAll('.btn-lihat-materi').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var judul = btn.dataset.judul || 'Materi Belajar';
            var tipe  = btn.dataset.tipe || 'teks';
            var kontenRaw = decodeKonten(btn.dataset.konten || '');

            var isSlide = /^\s*\{\s*"slides"\s*:/.test(kontenRaw);
            if (tipe !== 'slide' && isSlide) { tipe = 'slide'; }

            modalTitle.textContent = judul;
            currentScaleFn = null;

            if (tipe === 'slide') {
                var data = null;
                try { data = JSON.parse(kontenRaw); } catch (e) { data = null; }
                if (data) {
                    renderSlideViewer(data);
                } else {
                    modalBody.innerHTML = '<p class="text-rose-600 text-center text-xs py-4 font-semibold">Format slide presentasi tidak terbaca.</p>';
                }
            } else {
                modalBody.innerHTML = '<div class="content-text" style="line-height:1.8; font-size:14px; color:#1e293b;">' +
                    (kontenRaw || '<p class="text-slate-400 text-center py-4">Tidak ada isi konten materi teks.</p>') + '</div>';
            }
        });
    });

    if (modalEl) {
        modalEl.addEventListener('shown.bs.modal', function () {
            if (currentScaleFn) currentScaleFn();
        });
        modalEl.addEventListener('hidden.bs.modal', function () {
            modalBody.innerHTML = '<div class="text-center py-6 text-slate-400"><i class="bi bi-arrow-repeat animate-spin text-2xl"></i></div>';
            currentScaleFn = null;
        });
    }

    window.addEventListener('resize', function () {
        if (currentScaleFn) currentScaleFn();
    });
});
</script>
@endsection