<?php
header("Access-Control-Allow-Origin: *");
header("Content-Security-Policy: frame-ancestors 'self' https://sii.santander.edu.mx https://santander.edu.mx");
header_remove("X-Frame-Options");

$file_param = isset($_GET['file']) ? $_GET['file'] : 'M1';
$folder = str_replace('eBook', '', $file_param); 
$path = $folder . "/";
$images = glob($path . "*.webp");
natsort($images);

$image_list = [];
foreach ($images as $img) {
    $image_list[] = "https://peru.unisant.net/ebooks/" . $img;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title><?php echo $folder; ?>Ebook</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dearhive/dearflip-js-flipbook@master/dflip/css/dflip.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dearhive/dearflip-js-flipbook@master/dflip/css/themify-icons.min.css">

    <style>
        body { 
            background: #1a1a1a url('https://peru.unisant.net/ebooks/img/fondo.png') no-repeat center center fixed; 
            background-size: cover; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif;
        }
        
        #viewport {
            width: 100vw; height: 100vh;
            display: flex; justify-content: center; align-items: center;
            overflow: auto; transition: 0.3s;
        }
        
        #flipbook-container {
            width: 92vw; height: 92vh; 
            transform-origin: center center;
            transition: transform 0.3s ease-out;
        }
        
        .df-container { background: transparent !important; }
        
        /* Controles Inferiores Estilo Minimalista */
        .custom-controls-bottom {
            position: fixed;
            bottom: 15px;
            right: 20px; /* Movido a la derecha */
            display: flex;
            gap: 5px;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.6);
            padding: 5px 10px;
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
        }
        
        .btn-action {
            background: transparent;
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 50%;
            font-size: 16px;
            font-weight: bold;
            transition: 0.2s;
        }
        
        .btn-action:hover { background: #007bff; }
        
        /* Ajuste para que el contador de páginas de DearFlip no choque */
        .df-ui-page-number { margin-right: 150px !important; }
    </style>
</head>
<body>

<div class="custom-controls-bottom">
    <button class="btn-action" title="Alejar" onclick="changeZoom(-0.2)">-</button>
    <button class="btn-action" title="Reset" onclick="resetZoom()">R</button>
    <button class="btn-action" title="Acercar" onclick="changeZoom(0.2)">+</button>
    <button class="btn-action" title="Pantalla Completa" onclick="toggleFullscreen()">⛶</button>
</div>

<div id="viewport">
    <div id="flipbook-container"></div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dearhive/dearflip-js-flipbook@master/dflip/js/dflip.min.js"></script>

<script>
    let currentScale = 1;
    const bookContainer = $('#flipbook-container');
    const viewport = $('#viewport');

    $(document).ready(function () {
        const images = <?php echo json_encode($image_list); ?>;
        const options = {
            source: images,
            pageSize: 'auto',
            autoSize: true,
            duration: 600,
            webgl: true,
            scrollWheel: false,
            allControls: "alt,pageNumber,fullscreen",
            hideOptions: "sound,zoom" 
        };
        $("#flipbook-container").flipBook(images, options);
    });

    function changeZoom(mult) {
        currentScale += mult;
        if(currentScale < 1) currentScale = 1;
        if(currentScale > 3) currentScale = 3;
        applyZoom();
    }

    function resetZoom() {
        currentScale = 1;
        applyZoom();
    }

    function applyZoom() {
        bookContainer.css({'transform': `scale(${currentScale})`});
        if(currentScale > 1) {
            viewport.css('align-items', 'flex-start');
        } else {
            viewport.css('align-items', 'center');
        }
    }

    function toggleFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            if (document.exitFullscreen) document.exitFullscreen();
        }
    }
</script>
</body>
</html>