<?php
// /elms/includes/student_layout_bottom.php
declare(strict_types=1);
?>

    </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Shared ELMS Material Modal: PDF / Video / Quiz / Game -->
<div class="modal fade" id="gameOpenModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content" style="border-radius:18px;overflow:hidden;">
            <div class="modal-header">
                <h5 class="modal-title" id="gameOpenModalTitle">Material</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <iframe
                    id="gameOpenFrame"
                    src="about:blank"
                    style="width:100%;height:78vh;border:0;"
                    allow="fullscreen; autoplay; encrypted-media"
                    allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>
</div>

<script>
function openElmsModal(url, title = 'Material') {
    const modalEl = document.getElementById('gameOpenModal');
    const frame   = document.getElementById('gameOpenFrame');
    const titleEl = document.getElementById('gameOpenModalTitle');

    if (!modalEl || !frame) return;

    frame.src = url || 'about:blank';
    if (titleEl) titleEl.textContent = title || 'Material';

    bootstrap.Modal.getOrCreateInstance(modalEl).show();
}

document.addEventListener('click', function (e) {
    const btn = e.target.closest('[data-elms-open]');
    if (!btn) return;

    e.preventDefault();

    openElmsModal(
        btn.getAttribute('data-url'),
        btn.getAttribute('data-title') || 'Material'
    );
});

document.getElementById('gameOpenModal')?.addEventListener('hidden.bs.modal', function () {
    const frame = document.getElementById('gameOpenFrame');
    if (frame) frame.src = 'about:blank';
});

function toggleStudentSidebar() {
    const sidebar = document.getElementById('studentSidebar');
    if (sidebar) sidebar.classList.toggle('show');
}

document.addEventListener('click', function (event) {
    const sidebar = document.getElementById('studentSidebar');
    const button = event.target.closest('.mobile-menu-btn');

    if (!sidebar) return;

    if (window.innerWidth <= 992 && !sidebar.contains(event.target) && !button) {
        sidebar.classList.remove('show');
    }
});
</script>

</body>
</html>