{{-- 
    Lokasi File: resources/views/library/show.blade.php (atau file pembaca Anda)
    Deskripsi: Immersive E-Book Reader - Ultra Modern UI
--}}

@extends('layouts.app_siswa')

@section('title', 'Membaca: ' . Str::limit($materi->judul, 20))

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    :root {
        --primary: #0284C7;
        --dark-bg: #0F172A;
        --app-bg: #F8FAFC;
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--app-bg); box-sizing: border-box; }
    * { box-sizing: inherit; }

    /* --- RESPONSIVE LAYOUT FIXES --- */
    @media (max-width: 991.98px) {
        .main-header, .main-sidebar, .content-header { display: none !important; }
        .content-wrapper, .content, .container-fluid { margin: 0 !important; padding: 0 !important; background: var(--app-bg) !important; overflow-x: hidden; }
        .reader-container { padding-bottom: 100px; width: 100%; }
        
        /* Maksimalkan tinggi PDF di HP */
        .pdf-frame { height: 75vh !important; border-radius: 0 0 24px 24px !important; }
        .desktop-back-btn { display: none !important; }
    }

    @media (min-width: 992px) {
        .pdf-frame { height: 85vh; border-radius: 24px; }
        .reader-container { padding: 20px 15px; }
    }

    /* --- IFRAME (PDF VIEWER) --- */
    .pdf-frame { 
        width: 100%; 
        border: none; 
        background: #525659; 
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
        transition: 0.3s;
    }

    /* --- SIDEBAR META (GLASSMORPHISM) --- */
    .meta-sidebar { 
        background: white; 
        border-radius: 28px; 
        padding: 24px; 
        box-shadow: 0 15px 35px -5px rgba(0,0,0,0.05);
        border: 1px solid rgba(255,255,255,0.8);
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    
    /* Dekorasi Sidebar */
    .meta-sidebar::before {
        content: ''; position: absolute; width: 150px; height: 150px;
        background: rgba(2, 132, 199, 0.05); filter: blur(40px);
        top: -50px; right: -50px; border-radius: 50%; pointer-events: none;
    }

    .cover-wrapper {
        width: 100%; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-bottom: 20px;
    }
    .cover-img { width: 100%; height: 100%; object-fit: cover; }

    .book-title { font-weight: 900; font-size: 1.15rem; color: var(--dark-bg); line-height: 1.3; margin-bottom: 5px; }
    .book-author { font-size: 0.8rem; color: #64748B; font-weight: 600; margin-bottom: 20px; }

    .info-label { font-size: 0.65rem; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; }
    .info-value { font-weight: 800; color: var(--dark-bg); font-size: 0.9rem; margin-bottom: 15px; }

    .badge-source { font-size: 0.65rem; font-weight: 800; padding: 6px 12px; border-radius: 10px; letter-spacing: 0.5px; }
    .bg-internal { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
    .bg-global { background: #E0F2FE; color: #075985; border: 1px solid #BAE6FD; }

    .btn-download {
        background: linear-gradient(135deg, #0284C7, #0369A1);
        color: white; border: none; padding: 14px; border-radius: 16px;
        font-weight: 800; font-size: 0.85rem; width: 100%; transition: 0.3s;
        display: flex; align-items: center; justify-content: center; text-decoration: none !important;
        box-shadow: 0 10px 20px rgba(2, 132, 199, 0.3);
        margin-top: 20px;
    }
    .btn-download:hover { transform: translateY(-3px); color: white; box-shadow: 0 15px 25px rgba(2, 132, 199, 0.4); }

    .btn-back-desk {
        background: #F1F5F9; color: #475569; border: none; padding: 8px 16px;
        border-radius: 12px; font-weight: 800; font-size: 0.75rem; transition: 0.3s;
        text-decoration: none !important; display: inline-flex; align-items: center;
    }
    .btn-back-desk:hover { background: #E2E8F0; color: #0F172A; }

</style>
@endsection

@section('content')

{{-- 1. HEADER MOBILE PARTIALS --}}
@include('partials.header_mobile')

<div class="reader-container animate__animated animate__fadeIn">
    <div class="row m-0">
        
        {{-- Area Baca (PDF Viewer) -> Dipindah ke Atas pada Mobile --}}
        <div class="col-12 col-lg-9 p-0 px-lg-2 order-1 order-lg-2 mb-4 mb-lg-0">
            <iframe src="{{ $fileUrl }}" class="pdf-frame animate__animated animate__zoomIn" allowfullscreen></iframe>
        </div>

        {{-- Sidebar Info (Glassmorphism) --}}
        <div class="col-12 col-lg-3 px-3 px-lg-2 order-2 order-lg-1">
            <div class="meta-sidebar animate__animated animate__fadeInLeft">
                
                {{-- Tombol Kembali Desktop --}}
                <div class="desktop-back-btn mb-4">
                    <a href="{{ route('library.index') }}" class="btn-back-desk">
                        <i class="fas fa-arrow-left mr-2"></i> KEMBALI
                    </a>
                </div>
                
                @php
                    $cover = Str::startsWith($materi->cover_url, 'http') 
                             ? $materi->cover_url 
                             : ($materi->cover_url == 'default_book.png' || !$materi->cover_url
                                ? 'https://placehold.co/400x600/0284C7/FFF?text=E-Book' 
                                : asset('storage/'.$materi->cover_url));
                @endphp
                
                <div class="cover-wrapper">
                    <img src="{{ $cover }}" class="cover-img" alt="Cover Buku">
                </div>
                
                <h5 class="book-title">{{ $materi->judul }}</h5>
                <p class="book-author">
                    <i class="fas fa-user-edit mr-1"></i> {{ $materi->penulis ?? 'Anonim' }} &bull; {{ $materi->tahun_terbit ?? date('Y') }}
                </p>

                <hr style="border-color: #F1F5F9; margin: 20px 0;">
                
                <div>
                    <span class="info-label">Mata Pelajaran</span>
                    <div class="info-value text-primary">{{ $materi->mataPelajaran->nama_mapel ?? 'Materi Umum' }}</div>
                </div>

                <div>
                    <span class="info-label">Sumber Modul</span>
                    <div>
                        @if($materi->sumber == 'eksternal')
                            <span class="badge-source bg-global"><i class="fas fa-globe-asia mr-1"></i> KATALOG ONLINE</span>
                        @else
                            <span class="badge-source bg-internal"><i class="fas fa-school mr-1"></i> MATERI GURU</span>
                        @endif
                    </div>
                </div>

                <a href="{{ $fileUrl }}" target="_blank" class="btn-download">
                    <i class="fas fa-cloud-download-alt mr-2" style="font-size: 1.2rem;"></i> UNDUH DOKUMEN
                </a>
            </div>
        </div>

    </div>
</div>

{{-- 5. FOOTER MOBILE PARTIALS --}}
@include('partials.mobile-nav')

@endsection

@section('js')
<script>
    $(document).ready(function() {
        if ($(window).width() < 992) { 
            $('body').addClass('sidebar-collapse'); 
        }
    });
</script>
@endsection