<!DOCTYPE html>

<?php
require_once("classes/SubjectData.php");
require_once("classes/TopicData.php");

if (!isset($_GET["subject"])) {
    die("Ungültige Seite");
}
$subjectData = SubjectData::fromName($_GET["subject"]);
if (!isset($subjectData)) {
    die("Ungültige Seite");
}
$topics = $subjectData->topics;
?>

<html lang="de">
<!--topics-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo($subjectData->displayName); ?> 5. Klasse</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/subject.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>

<nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
    <div class="sidebar-header">
        <i class="fas fa-graduation-cap"></i>

        <h2><?php echo($subjectData->displayName); ?></h2>
    </div>

    <a href="homepage.php" class="nav-link">
        <i class="fas fa-home"></i> Startseite
    </a>
    <a href="#" class="nav-link active">
        <i class="fas fa-book"></i> <?php echo($subjectData->displayName); ?> Übersicht
    </a>
</nav>

<div class="search-container bg-white">
    <button class="menu-toggle h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
        <i class="fas fa-bars"></i>
    </button>
    <input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]" id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
           oninput="handleSearch()">
</div>

<div class="main-content">
    <div class="container">

        <?php

        foreach ($topics as $topicData) {
            ?>

            <div class="topic-card"
                 onclick="window.location.href='topic.php?subject=<?php echo($topicData->subjectId); ?>&topic=<?php echo($topicData->id); ?>'"
                 style="cursor: pointer;">
                <div class="topic-header">
                    <i class="fas <?php echo($topicData->icon); ?> topic-icon text-[<?php echo($subjectData->color); ?>]"></i>
                    <h3 class="topic-title"><?php echo($topicData->displayName); ?></h3>
                </div>
                <div class="topic-content">
                    <p class="topic-description">
                        <?php echo($topicData->description); ?>
                    </p>
                    <div class="related-topics bg-gray-100">
                        <h4>Verwandte Themen:</h4>
                        <ul>
                            <?php
                            foreach ($topicData->relatedTopics as $relatedTopicName) {
                                $relatedTopic = $subjectData->topics[$relatedTopicName];
                                if (!isset($relatedTopicName)) {
                                    continue;
                                }

                                ?>

                                <li onclick="event.stopPropagation();" class="border-[<?php echo($subjectData->color); ?>] border-2">
                                    <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'>
                                        <?php echo($relatedTopic->displayName); ?>
                                    </a>
                                </li>

                                <?php
                            }
                            ?>
                        </ul>
                    </div>
                </div>
                <div class="download-section">
                    <h4>Übungen herunterladen:</h4>
                    <div class="download-links">
                        <?php
                        foreach ($topicData->files as $fileName) {
                            ?>

                            <a onclick="event.stopPropagation();"
                               href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>"
                               target="_blank" download class="download-btn bg-[<?php echo($subjectData->color); ?>]">
                                <i class="fas fa-file-pdf"></i>
                                <?php echo($fileName); ?>
                            </a>

                            <?php
                        }
                        ?>
                    </div>
                </div>
            </div>

            <?php
        }
        ?>

    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const menuToggle = document.querySelector('.menu-toggle');
        const sidebar = document.querySelector('.sidebar');

        // Function to handle sidebar toggle
        function toggleSidebar() {
            sidebar.classList.toggle('active');

            // Add overlay when sidebar is active on mobile/tablet
            if (window.innerWidth <= 1024) {
                if (sidebar.classList.contains('active')) {
                    addOverlay();
                } else {
                    removeOverlay();
                }
            }
        }

        // Function to add overlay
        function addOverlay() {
            const overlay = document.createElement('div');
            overlay.className = 'sidebar-overlay';
            overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 45;
                transition: opacity 0.3s ease;
            `;
            document.body.appendChild(overlay);

            // Close sidebar when clicking overlay
            overlay.addEventListener('click', () => {
                sidebar.classList.remove('active');
                removeOverlay();
            });

            // Fade in
            requestAnimationFrame(() => {
                overlay.style.opacity = '1';
            });
        }

        // Function to remove overlay
        function removeOverlay() {
            const overlay = document.querySelector('.sidebar-overlay');
            if (overlay) {
                overlay.style.opacity = '0';
                setTimeout(() => overlay.remove(), 300);
            }
        }

        // Add click event to menu toggle
        menuToggle.addEventListener('click', toggleSidebar);

        // Handle window resize
        let resizeTimer;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                if (window.innerWidth > 1024) {
                    sidebar.classList.remove('active');
                    removeOverlay();
                }
            }, 250);
        });
    });

    // Add this right after your existing toggleSidebar function
    function updateMenuVisibility() {
        const menuToggle = document.querySelector('.menu-toggle');
        if (window.innerWidth <= 768) { // Smartphone breakpoint
            menuToggle.style.display = 'flex';
        } else {
            menuToggle.style.display = 'none';
        }
    }

    // Add event listeners
    window.addEventListener('resize', updateMenuVisibility);

    // Update search function with fallback animation
    function handleSearch() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const topicCards = document.querySelectorAll('.topic-card');

        topicCards.forEach(card => {
            const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
            const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
            const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
                .map(li => li.textContent.toLowerCase())
                .join(' ');

            const content = `${title} ${description} ${relatedTopics}`;

            if (content.includes(searchTerm)) {
                card.style.display = 'block';
                if (window.gsap) {
                    gsap.to(card, {
                        opacity: 1,
                        y: 0,
                        duration: 0.3
                    });
                } else {
                    card.style.opacity = 1;
                    card.style.transform = 'translateY(0)';
                }
            } else {
                card.style.display = 'none';
            }
        });
    }
</script>

<!-- Code injected by live-server -->
</body>
</html>
