@extends('layouts.appreader')
@section('content')
<div id="reader-container" class="relative overflow-y-scroll h-screen bg-gray-100" oncontextmenu="return false;">
  <div id="pdf-slices" class="space-y-4"></div>
  <div id="floating-info" class="fixed bottom-0 w-full bg-white p-4 hidden transition-opacity duration-300">
    <div class="flex items-center gap-4">
      <img src="" alt="Cover" class="w-16 h-20 object-cover rounded">
      <div class="flex-1">
        <h3 class="font-bold text-lg">{{ $konten->judul }}</h3>
        <button class="bg-blue-600 text-white px-4 py-2 rounded">Beli Buku</button>
      </div>
    </div>
  </div>
  <div id="loading" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden">
    <span class="bg-white p-4 rounded shadow">Loading halaman...</span>
  </div>
</div>

<script>
let start = {{ $start }};
let loading = false;
let loaded = new Set();

function loadSlice(page) {
  if (loaded.has(page)) return;
  loading = true;
  document.getElementById('loading').classList.remove('hidden');
  fetch(`/reader/{{ $token }}/slice/${page}`)
    .then(res => res.blob())
    .then(blob => {
      const url = URL.createObjectURL(blob);
      const iframe = document.createElement('iframe');
      iframe.src = url;
      iframe.className = 'w-full h-screen border-none';
      document.getElementById('pdf-slices').appendChild(iframe);
      loaded.add(page);
      loading = false;
      document.getElementById('loading').classList.add('hidden');
    });
}

function handleScroll() {
  const scrollY = window.scrollY + window.innerHeight;
  const height = document.body.offsetHeight;
  if (scrollY + 200 >= height && !loading) {
    start += 10;
    loadSlice(start);
  }
}

window.addEventListener('scroll', handleScroll);
document.addEventListener('DOMContentLoaded', () => {
  loadSlice(start);
});

// Floating info handler
let timeout;
function showInfo() {
  clearTimeout(timeout);
  const bar = document.getElementById('floating-info');
  bar.classList.remove('hidden');
  timeout = setTimeout(() => bar.classList.add('hidden'), 3000);
}
window.addEventListener('scroll', showInfo);
document.getElementById('reader-container').addEventListener('click', showInfo);
</script>
@endsection