<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>navbar</title>
    <link rel="stylesheet" href="../assets/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="../assets/css/style.css">
</head>

<body>
    <div class="navbar">
        <div class="logo">
            <h3 class="fw-bold">POTZUS</h3>
        </div>
        <div class="navButtons">
            <ul class="d-flex mb-0">
                <li><button><a href="./index.php">Dashboard</a></button></li>
                <li class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Vehcile
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item d-flex align-items-center gap-3" href="./addvehcile.php"><i
                                    class="fa-solid fa-chevron-right"></i> Add Vehcile</a></li>
                        <li><a class="dropdown-item d-flex align-items-center gap-3" href="./vehicle-list.php"><i
                                    class="fa-solid fa-chevron-right"></i> Vehcile List</a></li>
                    </ul>
                </li>
                <li><button><a href="./complain.php">Complains</a></button></li>
                <li><button><a href="./attendence.php">Attendance</a></button></li>
                <li class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Mechanics
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item d-flex align-items-center gap-3" href="./add-mechanic.php"><i
                                    class="fa-solid fa-chevron-right"></i> Add Mechanics Information</a></li>
                        <li><a class="dropdown-item d-flex align-items-center gap-3"
                                href="./mechanic-information.php"><i class="fa-solid fa-chevron-right"></i>
                                Mechanics Information</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- Hamburger Icon -->
        <div class="mobile-menu-icon d-lg-none">
            <img src="./assets/images/profile.png" class="menuToggle" alt="profile">
        </div>

        <!-- mobile side here  -->
        <div class="mobile-sidebar" class="mobileSidebar">
            <div class="close-btn" class="closeSidebar">
                <i class="fa-solid fa-xmark"></i>
            </div>

            <div class="d-flex align-items-center gap-3">
                <div class="user-profile dropdown">
                    <button class="btn-secondary openPopupBtn" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        <img width="40px" src="./assets/images/profile.png" alt="profile">
                    </button>
                </div>
                <div class="username">
                    <h1>Michael Luis</h1>
                    <p>Admin</p>
                </div>
            </div>

            <ul>
                <li><a href="./index.php">Dashboard</a></li>
                <li><a href="./addvehcile.php">Vehicle</a></li>
                <li class="subMenu"><a href="./vehicle-list.php">Vehicle List</a></li>
                <li><a href="./complain.php">Complains</a></li>
                <li><a href="./attendence.php">Attendance</a></li>
                <li><a href="./add-mechanic.php">Mechanics</a></li>
                <li class="subMenu"><a href="./mechanic-information.php">Mechanics Information</a></li>
            </ul>

            <div class="search-wrapper">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" placeholder="Search here...">
            </div>

        </div>
        <!-- mobile side here  -->


        <div class="searchBox search-wrapper">
            <i class="fa-solid fa-magnifying-glass"></i>
            <input type="text" id="searchInput" placeholder="Search here...">
        </div>

        <div class="profile d-flex align-items-center">
            <div class="username">
                <h1>Michael Luis</h1>
                <p>Admin</p>
            </div>
            <div class="user-profile dropdown">
                <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <img width="40px" src="./assets/images/profile.png" alt="profile">
                </button>
                <ul class="dropdown-menu profileDrop px-0">
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">
                            <span class="navicon d-flex align-items-center gap-2">
                                <i class="fa-solid fa-user"></i> Edit Profile
                            </span>
                        </a>
                    </li>

                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">
                            <span class="navicon d-flex align-items-center gap-2">
                                <i class="fa-solid fa-gear"></i> Setting & Privacy
                            </span>
                        </a>
                    </li>

                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" onclick="logout()">
                            <span class="navicon d-flex align-items-center gap-2">
                                <i class="fa-solid fa-right-from-bracket"></i> Log Out
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <?php include './includes/popup.php'; ?>

    <script>
        // side bar code here 
        document.addEventListener("DOMContentLoaded", function () {
            const toggleBtns = document.querySelectorAll('.menuToggle');
            const sidebars = document.querySelectorAll('.mobile-sidebar');
            const closeBtns = document.querySelectorAll('.close-btn');

            toggleBtns.forEach((toggleBtn, index) => {
                toggleBtn.addEventListener('click', () => {
                    if (sidebars[index]) {
                        sidebars[index].style.right = '0px';
                    }
                });
            });

            closeBtns.forEach((closeBtn, index) => {
                closeBtn.addEventListener('click', () => {
                    if (sidebars[index]) {
                        sidebars[index].style.right = '-250px';
                    }
                });
            });
        });
        // side bar code here 

        // logout here 
        function logout() {
            localStorage.removeItem("loggedIn");
            window.location.href = "./login/signin.php";
        }
        // logout here 
    </script>
</body>

</html>