<?php

require_once "config.php";

/*
|--------------------------------------------------------------------------
| Membaca nama buku dari URL
|--------------------------------------------------------------------------
| Contoh:
| https://files.stsrdvisi.ac.id/book/jadwal
| atau
| viewer.php?book=jadwal
|
*/

$book = isset($_GET['book']) ? basename($_GET['book']) : '';

if ($book == '') {

    http_response_code(404);
    exit("Dokumen tidak ditemukan.");

}

/*
|--------------------------------------------------------------------------
| Folder buku
|--------------------------------------------------------------------------
*/

$bookDir = __DIR__ . "/library/" . $book;

if (!is_dir($bookDir)) {

    http_response_code(404);
    exit("Folder buku tidak ditemukan.");

}

/*
|--------------------------------------------------------------------------
| Metadata
|--------------------------------------------------------------------------
*/

$meta = [

    "title" => ucfirst(str_replace("_"," ",$book)),
    "category" => "",
    "author" => "",
    "year" => "",
    "description" => ""

];

$metaFile = $bookDir . "/metadata.json";

if(file_exists($metaFile)){

    $json = file_get_contents($metaFile);

    $tmp = json_decode($json,true);

    if(is_array($tmp)){

        $meta = array_merge($meta,$tmp);

    }

}

/*
|--------------------------------------------------------------------------
| Cover
|--------------------------------------------------------------------------
*/

$cover = "library/".$book."/cover.webp";

if(!file_exists(__DIR__."/".$cover)){

    $cover = "assets/images/no-cover.webp";

}

/*
|--------------------------------------------------------------------------
| Semua halaman
|--------------------------------------------------------------------------
*/

$pages = glob($bookDir."/page*.{webp,jpg,jpeg,png}",GLOB_BRACE);

sort($pages);

$totalPages = count($pages);

if($totalPages==0){

    exit("Belum ada halaman.");

}

?>
<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1">

<title>

<?= htmlspecialchars($meta['title']) ?>

</title>

<link
rel="stylesheet"
href="assets/css/style.css">

<style>

/* ====================================================== */
/* Viewer */
/* ====================================================== */

body{

    margin:0;

    background:#f4f6f9;

    font-family:Arial,Helvetica,sans-serif;

}

/* HEADER */

.viewer-header{

    background:#1565C0;

    color:#fff;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

}

.viewer-header h2{

    margin:0;

    font-size:22px;

    font-weight:normal;

}

.viewer-header a{

    color:#fff;

    text-decoration:none;

}

.toolbar{

    display:flex;

    gap:10px;

}

.toolbar button{

    width:40px;

    height:40px;

    border:none;

    border-radius:5px;

    cursor:pointer;

    font-size:18px;

}

.toolbar button:hover{

    background:#eeeeee;

}

/* BODY */

.viewer-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

}

.page{

    background:#fff;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

    padding:20px;

}

.page img{

    max-width:100%;

    height:auto;

    display:block;

}

</style>

</head>

<body>

<div class="viewer-header">

<div>

<a href="./">

← Kembali

</a>

</div>

<div>

<h2>

<?= htmlspecialchars($meta['title']) ?>

</h2>

</div>

<div class="toolbar">

<button id="zoomOut">−</button>

<button id="zoomIn">+</button>

<button id="darkMode">🌙</button>

<button id="fullscreen">⛶</button>

</div>

</div>

<div class="viewer-container">

<div class="page">

<img

id="pageImage"

src="/library/<?= rawurlencode($book) ?>/<?= rawurlencode(basename($pages[0])) ?>"

alt="Page">

</div>

</div>