<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// Check if user is logged in and get user type from URL
$is_logged_in = isset($_GET['loggedIn']) && $_GET['loggedIn'] === 'true';
$user_type = isset($_GET['userType']) ? $_GET['userType'] : '';
?>
<div class="mobile-nav-container uk-hidden@m">
    <div class="mobile-bottom-nav">
        <div class="nav-background-blur"></div>
        <div class="nav-content">

            <?php if (basename($_SERVER['PHP_SELF']) == 'trainers.php') : ?>
                <div class="nav-item" uk-toggle="target: #trainers_sidebar">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: filter; ratio: .9" class="uk-icon"></span>
                    </div>
                    </a>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        // Get the filter button element
                        const filterButton = document.querySelector('.nav-item[uk-toggle="target: #trainers_sidebar"]');

                        // Add click event listener to the button
                        filterButton.addEventListener('click', function(event) {
                            // Find the product element to scroll to
                            const productElement = document.querySelector('.trainers-grid');

                            // If the element exists, scroll to it using UIkit's scroll utility
                            if (productElement) {
                                // Using UIkit's scroll utility
                                UIkit.scroll(productElement).scrollTo(productElement, {
                                    offset: 0
                                });
                            }
                        });
                    });
                </script>
            <?php else: ?>
                <a href="index.php" class="nav-item" aria-label="Home">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: home; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
            <?php endif; ?>


            <?php
            // Show sessions link only if user is logged in AND not a trainer
            if ($is_logged_in && $user_type !== 'trainer'): ?>
                <a href="user-dashboard-my-sessions.php" class="nav-item" aria-label="Sessions">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: sessions; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
                <a href="user-dashboard-notifications.php" class="nav-item" aria-label="Mail">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: bell; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
            <?php endif; ?>

            <?php
            // Show sessions link only if user is logged in AND a trainer
            if ($is_logged_in && $user_type === 'trainer'): ?>
                <a href="trainer-dashboard-schedule.php" class="nav-item" aria-label="Sessions">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: calendar; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
                <a href="user-dashboard-notifications.php" class="nav-item" aria-label="Mail">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: bell; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
            <?php endif; ?>


            <?php if (!$is_logged_in): ?>
                <!-- Content to show when user is NOT logged in -->
                <a href="contact.php" class="nav-item" aria-label="Login">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: mail; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
                <a href="login.php" class="nav-item" aria-label="Login">
                    <div class="nav-icon-wrapper">
                        <div class="icon-background"></div>
                        <span uk-icon="icon: user; ratio: .9" class="uk-icon"></span>
                    </div>
                </a>
            <?php else: ?>

                <?php if ($user_type === 'trainer'): ?>
                    <div class="nav-item" uk-toggle="target: #trainers_menu">
                        <div class="nav-icon-wrapper">
                            <div class="icon-background"></div>
                            <span uk-icon="icon: settings; ratio: .9" class="uk-icon"></span>
                        </div>
                        </a>
                    </div>
                <?php else: ?>
                    <div class="nav-item" uk-toggle="target: #user_menu">
                        <div class="nav-icon-wrapper">
                            <div class="icon-background"></div>
                            <span uk-icon="icon: user; ratio: .9" class="uk-icon"></span>
                        </div>
                        </a>
                    </div>
                <?php endif; ?>

            <?php endif; ?>

        </div>
    </div>
</div>

<?php if (basename($_SERVER['PHP_SELF']) == 'trainers.php') : ?>
    <div id="trainers_sidebar" class="uk-offcanvas-dark uk-hidden@m" uk-offcanvas="overlay: true;">
        <div class="uk-offcanvas-bar  uk-box-shadow-small">
            <div id="cart-box" class="cart-inner">
                <button class="uk-offcanvas-close" type="button" uk-close aria-label=""></button>
                <div class="uk-margin-small-top">
                    <?php include 'sidebar.php'; ?>
                </div>
                <button class="uk-button uk-button-secondary uk-width-1-1" type="button" uk-toggle="target: #trainers_sidebar" aria-label="">
                    Apply
                </button>
            </div>
        </div>
    </div>
<?php endif; ?>


<?php if ($user_type === 'trainer'): ?>
    <div id="trainers_menu" class="uk-offcanvas-dark uk-hidden@m" uk-offcanvas="overlay: true;">
        <div class="uk-offcanvas-bar  uk-box-shadow-small">
            <div id="cart-box" class="cart-inner">
                <button class="uk-offcanvas-close" type="button" uk-close aria-label=""></button>
                <div class="uk-margin-small-top">
                    <h3>Settings</h3>
                    <?php include 'trainer-sidebar.php'; ?>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

<?php if ($user_type !== 'trainer'): ?>
    <div id="user_menu" class="uk-offcanvas-dark uk-hidden@m" uk-offcanvas="overlay: true;">
        <div class="uk-offcanvas-bar  uk-box-shadow-small">
            <div id="cart-box" class="cart-inner">
                <button class="uk-offcanvas-close" type="button" uk-close aria-label=""></button>
                <div class="uk-margin-small-top">
                    <h3>My Profile</h3>
                    <nav class="profile-nav">

                        <div class="profile-item uk-active">
                            <a href="user-dashboard.php">
                                <span uk-icon="icon: user; ratio: .8" class="uk-icon" aria-hidden="true"></span>
                                <span class="nav-text">Personal Info</span>
                            </a>
                        </div>

                        <div class="profile-item">
                            <a href="user-dashboard-my-sessions.php">
                                <span uk-icon="icon: sessions; ratio: .8" class="uk-icon" aria-hidden="true"></span>
                                <span class="nav-text">My Sessions</span>
                            </a>
                        </div>
                        <div class="profile-item">
                            <a href="user-dashboard-wallet.php">
                                <span uk-icon="icon: wallet; ratio: .8" class="uk-icon" aria-hidden="true"></span>
                                <span class="nav-text">My Wallet</span>
                            </a>
                        </div>
                        <div class="profile-item">
                            <a href="user-dashboard-notifications.php">
                                <span uk-icon="icon: bell; ratio: .8" class="uk-icon" aria-hidden="true"></span>
                                <span class="nav-text">My Notifications</span>
                            </a>
                        </div>
                        <div class="profile-item">
                            <a href="user-dashboard-favorite-trainers.php">
                                <span uk-icon="icon: heart; ratio: .8" class="uk-icon" aria-hidden="true"></span>
                                <span class="nav-text">Favorite Trainers</span>
                            </a>
                        </div>
                        <div class="profile-item">

                        </div>



                    </nav>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Navigation item active state management
        const navItems = document.querySelectorAll('.nav-item');
        let lastActiveItem = document.querySelector('.nav-item.active');
        const nav = document.querySelector('.mobile-nav-container');
        const siteFooter = document.querySelector('.site-footer');
        const isShopPage = nav.classList.contains('always-visible');

        // Function to update footer padding
        function updateFooterPadding() {
            if (nav.classList.contains('nav-visible') || isShopPage) {
                const navHeight = nav.offsetHeight;
                siteFooter.style.paddingBottom = (navHeight + 20) + 'px';
            } else {
                siteFooter.style.paddingBottom = '';
            }
        }

        navItems.forEach(item => {
            item.addEventListener('click', function() {
                if (lastActiveItem) {
                    lastActiveItem.classList.remove('active');
                }
                this.classList.add('active');
                lastActiveItem = this;
            });
        });

        // Navigation visibility on scroll with optimizations
        let lastScrollTop = 0;
        const scrollThreshold = 100; // 100px threshold
        let ticking = false;
        const directionBuffer = 5; // Pixels to use as direction buffer

        // Handle navigation visibility differently for shop pages
        if (isShopPage) {
            // Always show navigation on shop pages
            nav.classList.remove('nav-hidden');
            nav.classList.add('nav-visible');
            updateFooterPadding();
        } else {
            // Initially hide the navigation on non-shop pages
            nav.classList.add('nav-hidden');

            window.addEventListener('scroll', function() {
                if (!ticking) {
                    window.requestAnimationFrame(function() {
                        handleScroll();
                        ticking = false;
                    });
                    ticking = true;
                }
            }, {
                passive: true
            });
        }

        function handleScroll() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            // Determine scroll direction with small buffer for stability
            const isScrollingDown = scrollTop > (lastScrollTop + directionBuffer);
            const isScrollingUp = scrollTop < (lastScrollTop - directionBuffer);

            // Show when scrolling down and past threshold, hide when scrolling up
            if (isScrollingDown && scrollTop > scrollThreshold) {
                nav.classList.remove('nav-hidden');
                nav.classList.add('nav-visible');
                updateFooterPadding(); // Update footer padding when nav becomes visible
            } else if (isScrollingUp) {
                // Hide when scrolling up
                nav.classList.add('nav-hidden');
                nav.classList.remove('nav-visible');
                updateFooterPadding(); // Update footer padding when nav is hidden
            }

            // Update last scroll position
            if (isScrollingDown || isScrollingUp) {
                lastScrollTop = scrollTop;
            }
        }

        // Set active state based on current URL
        const currentPath = window.location.pathname;
        navItems.forEach(item => {
            const href = item.getAttribute('href');
            if (href && href === currentPath) {
                item.classList.add('active');
                lastActiveItem = item;
            }
        });

        // Initial footer padding update
        updateFooterPadding();

        // Handle resize events
        window.addEventListener('resize', updateFooterPadding, {
            passive: true
        });
    });
</script>