<?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'] : '';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mock Meet - Try • Develop • Work</title>
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon.png">
    <!-- Link CSS file -->
    <link rel="stylesheet" href="assets/css/uikit.min.css">
    <link rel="stylesheet" href="assets/font/inter/inter.css">
    <link rel="stylesheet" href="assets/css/style.css">

</head>

<body class="page-<?php echo basename($_SERVER['PHP_SELF'], '.php'); ?>">

    <!-- Header -->
    <header class="site-header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">
        <div class="uk-container">
            <nav class="uk-navbar-container uk-navbar-transparent uk-navbar" uk-navbar>
                <div class="uk-navbar-left">
                    <a class="logo" href="index.php">
                        <img src="assets/svg/logo.svg" alt="Mock Meet" width="148" height="56">
                    </a>
                </div>

                <div class="uk-navbar-center uk-visible@m">
                    <ul class="uk-navbar-nav">
                        <li><a class="nav-link" href="index.php">Home</a></li>
                        <li><a class="nav-link" href="why-us.php">Why us?</a></li>
                        <li><a class="nav-link" href="trainers.php">Trainers</a></li>
                        <li><a class="nav-link" href="categories.php">Categories</a></li>
                        <li><a class="nav-link" href="faq.php">FAQ</a></li>
                        <li><a class="nav-link" href="contact.php">Contact</a></li>
                    </ul>
                </div>

                <div class="uk-navbar-right">
                    <div class="uk-navbar-item">
                        <a class="header-btn search-toggle" href="#" aria-label="Search">
                            <span uk-icon="icon: search; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                        </a>
                        <div class="uk-navbar-dropdown uk-padding-small uk-width-1-1 uk-drop br-8"
                            uk-drop="mode: click; offset: 23; animation: slide-top; animate-out: true; duration: 300; delay-hide: 300; pos: bottom-left">
                            <?php include 'search-form.php'; ?>
                        </div>
                    </div>
                    <div class="uk-navbar-item">

                        <div class="header-submenu">
                            <?php if ($is_logged_in): ?>
                                <button class="btn-login" type="button"><span uk-icon="icon: user; ratio: .9" class="uk-icon" aria-hidden="true"></span></button>
                                <?php if ($user_type === 'trainer'): ?>
                                    <!-- Trainer Menu -->
                                    <div class="uk-drop" uk-dropdown="pos: top-right">
                                        <ul class="uk-nav uk-dropdown-nav">
                                            <!-- Profile & Credentials -->
                                            <li><a href="trainer-dashboard.php"><span uk-icon="icon: user; ratio: .8" class="uk-icon" aria-hidden="true"></span>Personal Info</a></li>
                                            <li><a href="trainer-dashboard-certificates.php"><span uk-icon="icon: certification; ratio: .7" class="uk-icon" aria-hidden="true"></span>Certificates</a></li>
                                            <li class="border-remove"><a href="trainer-dashboard-ratings.php"><span uk-icon="icon: star; ratio: .8" class="uk-icon" aria-hidden="true"></span>Ratings</a></li>

                                            <li class="uk-nav-divider"></li>

                                            <!-- Professional Services -->
                                            <li><a href="trainer-dashboard-professional.php"><span uk-icon="icon: briefcase; ratio: .8" class="uk-icon" aria-hidden="true"></span>Professional</a></li>
                                            <li><a href="trainer-dashboard-sessions.php"><span uk-icon="icon: sessions; ratio: .8" class="uk-icon" aria-hidden="true"></span>Sessions</a></li>
                                            <li><a href="trainer-dashboard-schedule.php"><span uk-icon="icon: calendar; ratio: .8" class="uk-icon" aria-hidden="true"></span>Schedule</a></li>
                                            <li><a href="trainer-dashboard-availabidivty.php"><span uk-icon="icon: history; ratio: .8" class="uk-icon" aria-hidden="true"></span>Availability</a></li>
                                            <li class="border-remove"><a href="trainer-dashboard-pricing.php"><span uk-icon="icon: ryal; ratio: 1" class="uk-icon" aria-hidden="true"></span>Pricing</a></li>

                                            <li class="uk-nav-divider"></li>

                                            <!-- Business Management -->
                                            <li><a href="trainer-dashboard-wallet.php"><span uk-icon="icon: wallet; ratio: .8" class="uk-icon" aria-hidden="true"></span>Wallet</a></li>
                                            <li class="border-remove"><a href="trainer-dashboard-banking.php"><span uk-icon="icon: credit-card; ratio: .8" class="uk-icon" aria-hidden="true"></span>Banking</a></li>

                                            <li class="uk-nav-divider"></li>

                                            <!-- Account Settings -->
                                            <li><a href="trainer-dashboard-notifications.php"><span uk-icon="icon: bell; ratio: .8" class="uk-icon" aria-hidden="true"></span>Notifications</a></li>
                                        </ul>
                                    </div>
                                <?php else: ?>
                                    <!-- Job Seeker Menu -->
                                    <div class="uk-drop" uk-dropdown="pos: top-right">
                                        <ul class="uk-nav uk-dropdown-nav">
                                            <li><a href="user-dashboard.php"><span uk-icon="icon: user; ratio: .8" class="uk-icon" aria-hidden="true"></span>Profile</a></li>
                                            <li><a href="user-dashboard-my-sessions.php"><span uk-icon="icon: sessions; ratio: .8" class="uk-icon" aria-hidden="true"></span>Sessions</a></li>
                                            <li><a href="user-dashboard-notifications.php"><span uk-icon="icon: bell; ratio: .8" class="uk-icon" aria-hidden="true"></span>Notifications</a></li>
                                            <li><a href="user-dashboard-log.php"><span uk-icon="icon: text; ratio: .8" class="uk-icon" aria-hidden="true"></span>Log History</a></li>
                                            <li><a href="user-dashboard-favorite-trainers.php"><span uk-icon="icon: heart; ratio: .8" class="uk-icon" aria-hidden="true"></span>Favorite Trainers</a></li>
                                        </ul>
                                    </div>
                                <?php endif; ?>
                            <?php else: ?>
                                <a href="login.php" class="btn-login"><span uk-icon="icon: user; ratio: .9" class="uk-icon" aria-hidden="true"></span></a>
                            <?php endif; ?>
                        </div><!-- .header-submenu -->

                    </div>

                    <!-- Mobile Menu Button -->
                    <a class="uk-navbar-toggle mobile-menu-btn uk-hidden@m" href="#mobile-menu" aria-label="Menu" uk-toggle uk-icon="icon: menu; ratio: 1.1" class="uk-icon"></a>

                    <?php
                    // Remove Find Trainers nutton when user is trainer
                    if (!$is_logged_in && $user_type !== 'trainer'): ?>
                        <a href="trainers.php" class="uk-button uk-button-primary btn-find-trainers uk-visible@m">Find Trainers</a>
                    <?php endif; ?>

                </div>

            </nav>

            <!-- Categories Navigation -->
            <div class="categories-nav">

                <div class="categories-nav-inner">
                    <div class="categories-flex">
                        <a href="categories.php" class="category-link f500">Technical Interviews</a>
                        <a href="categories.php" class="category-link f500">Management & Leadership</a>
                        <a href="categories.php" class="category-link f500">Sales & Marketing</a>
                        <a href="categories.php" class="category-link f500">Finance & Banking</a>
                        <a href="categories.php" class="category-link f500">Healthcare & Medical</a>
                        <a href="categories.php" class="category-link f500">General Interviews</a>
                        <a href="categories.php" class="category-link f500">Business Development</a>
                    </div>
                </div>

                <div class="scroll-arrow" id="scrollArrow">
                    <div class="scroll-arrow-icon"></div>
                </div>

                <script>
                    function checkScrollArrow() {
                        const container = document.querySelector('.categories-nav-inner');
                        const arrow = document.getElementById('scrollArrow');

                        if (container.scrollWidth > container.clientWidth) {
                            arrow.classList.add('visible');
                        } else {
                            arrow.classList.remove('visible');
                        }
                    }

                    // Check on load and resize
                    window.addEventListener('load', checkScrollArrow);
                    window.addEventListener('resize', checkScrollArrow);
                </script>

            </div><!-- .categories-nav -->

        </div>

    </header>

    <!-- Main Content -->
    <main class="site-main">