<?php
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$dir_img = 'img_qrcodes/';
$qrcodes = glob($dir_img . "qr_" . $id . "_*.*");
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; display: flex; justify-content: center; align-items: center; }
        
        .slider { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
        
        .qr-item {
            position: absolute;
            max-width: 90%;
            max-height: 90%;
            background: #fff;
            padding: 15px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            opacity: 0;
            transition: opacity 1s ease-in-out;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .qr-item img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }

        .qr-item.active { opacity: 1; }

        .qr-label {
            margin-top: 10px;
            color: #020617;
            font-family: sans-serif;
            font-weight: 900;
            font-size: 1.2rem;
            text-transform: uppercase;
        }
    </style>
</head>
<body>

    <div class="slider">
        <?php if ($qrcodes): ?>
            <?php foreach ($qrcodes as $index => $file): 
                $parts = explode('_', pathinfo(basename($file), PATHINFO_FILENAME));
                $name = isset($parts[2]) ? $parts[2] : "Pagamento";
            ?>
                <div class="qr-item <?= ($index === 0) ? 'active' : '' ?>">
                    <img src="<?= $file ?>?v=<?= time() ?>">
                    <div class="qr-label"><?= htmlspecialchars($name) ?></div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <script>
        const items = document.querySelectorAll('.qr-item');
        let current = 0;
        if (items.length > 1) {
            setInterval(() => {
                items[current].classList.remove('active');
                current = (current + 1) % items.length;
                items[current].classList.add('active');
            }, 6000); // 6 segundos por QR-Code
        }
    </script>
</body>
</html>
