<!-- A FORM TO AVOID BUTTON ERRORS IN HTML. IT WILL NEVER BE USED AND SUBMITTING THE DATA BY RECALLING THE PHP IN A LOOP -->
<script>
    function toggleCollapse(el) {
        el.classList.toggle('active');
    }

    function hideNavigation() {
        if (!document.getElementById("navigation").classList.contains("navigation-hide")) {
            toggleNavigation();
        }
    }

    function toggleNavigation() {
        document.getElementById("navigation").classList.toggle("navigation-hide");
    }

    function logoutUser() {
        document.body.style.transition = "opacity 0.5s ease";
        document.body.style.setProperty("opacity", "0.5", "important");

        setTimeout(() => {
            if (confirm("Are you sure you want to log out?")) {
                window.location.href = "logout.php";
            } else {
                document.body.style.setProperty("opacity", "1", "important");
            }
        }, 300);
    }


    document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") {
            hideNavigation();
        }
    });
</script>
<form action="#" name="myForm" id="myForm"></form>
<?php
$currentPage = basename($_SERVER['REQUEST_URI']);
?>
<div class="navigation navigation-hide" id="navigation" onclick="event.stopPropagation()">
    <nav class="navBar" id="navBar">
        <button class="update" id="menu" title="Menu" onclick="toggleNavigation()">☰</button>
        <h2 class="usernameHeading">Welcome
            <?php echo $_SESSION["uname"]; ?>
        </h2>
        <ul class="navList" id="navList">
            <li class="navListItems <?php if($currentPage == 'profile.php') echo 'selectedDashboard'; ?>"
                id="navListItems" onclick="window.location.href=`profile.php`">Profile</li>
            <li class="navListItems <?php if($currentPage == 'landing.php') echo 'selectedDashboard'; ?>"
                id="navListItems" onclick="window.location.href=`landing.php`">Homepage</li>
            <li class="navListItems navigation-parent" onclick="toggleCollapse(this)">
                Dashboards
                <span class="collapse-arrow">▸</span>
                <ul class="child-content" onclick="event.stopPropagation()">
                    <li class="navListItems <?php if($currentPage == 'main2.php') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href=`main2.php`">Finance Dashboard</li>
                    <li class="navListItems <?php if($currentPage == 'sales_dashboard.php') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href=`sales_dashboard.php`">IT Sales Dashboard
                    </li>
                    <li class="navListItems <?php if($currentPage == 'salesAnalytics.php') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href=`salesAnalytics.php`">Sales Analytics Dashboard</li>
                    <li class="navListItems" onclick="window.location.href=`#`">Others 2</li>
                    <li class="navListItems" onclick="window.location.href=`#`">Others 3</li>
                    <li class="navListItems" onclick="window.location.href=`#`">Others 4</li>
                </ul>
            </li>
            <li class="navListItems navigation-parent" onclick="toggleCollapse(this)">
                Data Upload
                <span class="collapse-arrow">▸</span>
                <ul class="child-content" onclick="event.stopPropagation()">
                    <li class="navListItems <?php if($currentPage == 'universal_upload.php?type=finance') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href='universal_upload.php?type=finance'">Finance Data Upload</li>
                    <li class="navListItems <?php if($currentPage == 'universal_upload.php?type=sales') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href='universal_upload.php?type=sales'">Sales Data Upload</li>
                    <li class="navListItems <?php if($currentPage == 'universal_upload.php?type=inventory') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href='universal_upload.php?type=inventory'">Inventory Data Upload</li>
                    <li class="navListItems <?php if($currentPage == 'universal_upload.php?type=hr') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href='universal_upload.php?type=hr'">HR Data Upload</li>
                    <li class="navListItems <?php if($currentPage == 'universal_upload.php?type=marketing') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href='universal_upload.php?type=marketing'">Marketing Data Upload</li>
                    <li class="navListItems <?php if($currentPage == 'universal_upload.php?type=operations') echo 'selectedDashboard'; ?>"
                        onclick="window.location.href='universal_upload.php?type=operations'">Operations Data Upload
                    </li>
                </ul>
            </li>
            <li class="navListItems" id="navListItems" onclick="window.location.href=`change_password.php`">Change
                Password</li>
            <li class="navListItems" id="navListItems" onclick="logoutUser()">Logout</li>
        </ul>
    </nav>
</div>