@extends('layouts.app')

@section('title', 'Preview Materi')

@section('content')
@php($isPdfPreview = $material->tipe === 'file' && $fileMimeType === 'application/pdf')
<div @class(['pkbm-master-page mx-auto space-y-5', 'max-w-none' => $isPdfPreview, 'max-w-7xl' => ! $isPdfPreview])>
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen KBM</span><i class="bi bi-chevron-right" aria-hidden="true"></i><a class="text-blue-700 hover:underline" href="{{ route('pkbm.kbm.index', ['section' => 'materi', 'mapel' => $material->id_mapel]) }}">Kelola Materi</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Preview</p>
            <h1 class="pkbm-dashboard__title">Preview Materi</h1>
            <p class="pkbm-dashboard__subtitle">{{ $material->nama_mapel ?: 'Materi pembelajaran' }}{{ $material->nama_bab ? ' · BAB '.$material->bab_ke.': '.$material->nama_bab : '' }}{{ $material->pertemuan ? ' · Pertemuan '.$material->pertemuan : '' }}</p>
        </div>
        <a class="sp-btn-secondary shrink-0" href="{{ route('pkbm.kbm.index', ['section' => 'materi', 'mapel' => $material->id_mapel]) }}"><i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali</a>
    </header>

    <article @class(['sp-card space-y-5', 'p-3 sm:p-4' => $isPdfPreview, 'p-5 sm:p-6' => ! $isPdfPreview])>
        <div class="border-b border-slate-100 pb-4">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <h2 class="sp-section-title">{{ $material->judul }}</h2>
                <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">{{ ucfirst($material->tipe) }}</span>
            </div>
            <p class="mt-2 text-sm text-slate-500">Tanggal tampil: {{ $material->tanggal_tampil ?: '—' }}</p>
        </div>

        @if ($material->tipe === 'link')
            @if ($material->konten && in_array(strtolower((string) parse_url($material->konten, PHP_URL_SCHEME)), ['http', 'https'], true))
                <a class="sp-btn-primary w-fit" href="{{ $material->konten }}" target="_blank" rel="noopener noreferrer"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>Buka tautan materi</a>
                <p class="break-all text-sm text-slate-500">{{ $material->konten }}</p>
            @else
                <p class="text-sm text-slate-500">Tautan materi belum tersedia atau tidak valid.</p>
            @endif
        @elseif ($material->tipe === 'file')
            @if (! $fileExists)
                <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Lampiran materi tidak ditemukan.</p>
            @elseif ($filePreviewUrl)
                @if ($fileMimeType === 'application/pdf')
                    <iframe class="w-full rounded-xl border border-slate-200" style="display: block; height: 85vh; min-height: 36rem;" src="{{ $filePreviewUrl }}#view=FitH" title="Preview {{ $material->judul }}"></iframe>
                @else
                    <img class="mx-auto max-h-[75vh] max-w-full rounded-xl border border-slate-200 object-contain" src="{{ $filePreviewUrl }}" alt="Preview {{ $material->judul }}">
                @endif
            @else
                <p class="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">Jenis lampiran ini belum dapat ditampilkan langsung. Silakan unduh untuk melihat isinya.</p>
            @endif
            @if ($material->file_path && $fileExists)
                <a class="sp-btn-secondary w-fit" href="{{ route('kbm.file', ['kind' => 'materi', 'id' => $material->id]) }}"><i class="bi bi-download" aria-hidden="true"></i>Unduh lampiran</a>
            @endif
        @else
            <div class="prose max-w-none break-words text-slate-700">
                {!! $previewContent ?: '<p>Belum ada isi materi.</p>' !!}
            </div>
        @endif
    </article>
</div>
@endsection