<header class="sticky-top main-navbar">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
                aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="index.php">
                <!--<img src="./assets/image/logo.png" alt="" class="img-fluid"
                    style="pa dding: 2px;border-radius: 4px;  border: 3px solid white; width: 160px;">-->
                <span
                    style="display: inline-block;border-radius: 4px;border: 3px solid #40599b;background: #40599b;color: white;padding: 1px 20px;font-size: 24px;font-weight: bold;">PIMS</span>
            </a>
            <!-- Sidebar Toggle Button in Header for Large Screens -->
            <button class="btn btn-primary sidebar-toggle d-none d-lg-block" style="position: relative;top: 0;left: 0;"
                aria-label="Toggle sidebar">
                <i class="fa fa-chevron-left"></i>
            </button>
            <div class="collapse navbar-collapse d-none d-lg-block" id="navbarNav">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" style="padding: 0px 10px;font-size: 20px;" aria-current="page"
                            href="index.php">
                            <i class="fa fa-home"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="profile.php" style="padding: 0px 10px 0px 0px;">
                            <i class="fa fa-user text-center"
                                style="background: #fff; padding: 5px; border: 2px solid #0b5990; border-radius: 50%; font-size: 16px; width: 30px;color: #1d7a85;"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link p-0" href="#logoutModal" data-bs-toggle="modal">
                            <i class="fa fa-sign-out"
                                style="background: #fff;padding: 5px;border: 2px solid #0b5990;border-radius: 50%;/* font-size: 16px; *//* width: 30px; */color: #1d7a85;"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Offcanvas Navbar (for small screens) -->
            <div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="offcanvasNavbar"
                aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-body">
                    <button type="button" class="btn-close btn-nav-close" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="index.php">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="view-product.php?client_id=<?php echo $_SESSION["uid"];?>">My
                                Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="service.php?show_list">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="uplodDocuments.php?show_list">Documents</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="workbill-student.php">Work Bills</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="all-bill.php">All Fees</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="notice.php">Notice</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="news.php?show_list">News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.php">Contact Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="profile.php">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#logoutModal" data-bs-toggle="modal"> Logout <i
                                    class="fa fa-sign-out"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Placeholder for User Profile Icon in Mobile View -->
            <a class="navbar-brand d-block d-md-none" href="profile.php" style="width: 0;">
                <i class="fa fa-user text-center"
                    style="background: #fff; padding: 5px; border: 2px solid #0b5990; border-radius: 50%; font-size: 16px; width: 30px;color: #1d7a85;"></i>
            </a>
        </div>
    </nav>
</header>

<!-- Sidebar (Desktop View) -->
<div class="sidebar d-none d-lg-block">
    <ul class="sidebar-menu mb-5">
        <li class="sidebar-item">
            <a href="index.php" class="sidebar-link">
                <i class="fa fa-home"></i>
                <span class="sidebar-text">Home</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="service.php?show_list" class="sidebar-link">
                <i class="fa fa-chalkboard"></i>
                <span class="sidebar-text">Courses</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="view-product.php?client_id=<?php echo $_SESSION["uid"];?>" class="sidebar-link">
                <i class="fab fa-product-hunt"></i>
                <span class="sidebar-text">My Courses</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="uplodDocuments.php?show_list" class="sidebar-link">
                <i class="fa fa-file"></i>
                <span class="sidebar-text">Documents</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="workbill-student.php" class="sidebar-link">
                <i class="fa fa-calculator" aria-hidden="true"></i>
                <span class="sidebar-text">Work Bills</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="all-bill.php" class="sidebar-link">
                <i class="fa fa-inr"></i>
                <span class="sidebar-text">All Fees</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="notice.php" class="sidebar-link">
                <i class="fa fa-bell"></i>
                <span class="sidebar-text">Notice</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="news.php?show_list" class="sidebar-link">
                <i class="fa fa-newspaper"></i>
                <span class="sidebar-text">News</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="contact.php" class="sidebar-link">
                <i class="fa fa-phone"></i>
                <span class="sidebar-text">Contact Us</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="profile.php" class="sidebar-link">
                <i class="fa fa-user-circle"></i>
                <span class="sidebar-text">Profile</span>
            </a>
        </li>
    </ul>
</div>

<!-- Logout Modal -->
<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Select "Logout" below if you are ready to end your current session.
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="logout.php">Logout</a>
            </div>
        </div>
    </div>
</div>




<script>
document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.querySelector('.sidebar');
    const sidebarToggle = document.querySelectorAll('.sidebar-toggle');

    // Toggle sidebar expand/collapse
    sidebarToggle.forEach(button => {
        button.addEventListener('click', function() {
            sidebar.classList.toggle('expanded');
            adjustInnerBody(); // Adjust inner-body size when sidebar expands or collapses
        });
    });

    // Close sidebar when navbar toggler is clicked (on smaller screens)
    const navbarToggle = document.querySelector('.navbar-toggler');
    navbarToggle.addEventListener('click', function() {
        sidebar.classList.remove('expanded');
        adjustInnerBody(); // Adjust inner-body size when sidebar is collapsed via navbar toggler
    });

    // Handle sidebar dropdowns on hover (desktop only)
    const sidebarItems = document.querySelectorAll('.sidebar-item');
    sidebarItems.forEach(item => {
        const submenu = item.querySelector('.sidebar-submenu');
        item.addEventListener('mouseenter', function() {
            if (window.innerWidth >= 992) { // Only for desktop view
                submenu.style.display = 'block';
                adjustInnerBody(); // Adjust inner-body size when submenu opens
            }
        });
        item.addEventListener('mouseleave', function() {
            if (window.innerWidth >= 992) { // Only for desktop view
                submenu.style.display = 'none';
                adjustInnerBody(); // Adjust inner-body size when submenu closes
            }
        });
    });

    // Function to adjust inner-body size based on sidebar's expanded state
    function adjustInnerBody() {
        const innerBody = document.getElementById('inner-body');
        const sidebarWidth = sidebar.offsetWidth;
        const windowWidth = window.innerWidth;
        const gap = 10;

        if (windowWidth >= 992) { // Only adjust for desktop view
            if (sidebar.classList.contains('expanded')) {
                innerBody.style.marginLeft = `${sidebarWidth}px`;
            } else {
                innerBody.style.marginLeft = `${sidebarWidth}px`;
            }
        } else {
            // Reset margin-left for smaller screens
            innerBody.style.marginLeft = '0';
        }
    }

    // Call adjustInnerBody initially and on window resize
    adjustInnerBody(); // Initial adjustment
    window.addEventListener('resize', adjustInnerBody); // Adjust on resize
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropdowns = document.querySelectorAll('.navbar-nav .dropdown-toggle');

    // Function to handle opening and closing of dropdowns on mobile
    const handleDropdownClick = function(e) {
        if (window.innerWidth < 992) { // Check if the viewport is less than 992px
            e.preventDefault();
            const menu = this.nextElementSibling;
            const isOpen = menu.classList.contains('show');

            // Close all other open dropdowns
            document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach(openDropdown => {
                if (openDropdown !== menu) {
                    openDropdown.classList.remove('show');
                    openDropdown.previousElementSibling.setAttribute('aria-expanded', 'false');
                }
            });

            // Toggle the current dropdown
            menu.classList.toggle('show', !isOpen);
            this.setAttribute('aria-expanded', !isOpen);
        }
    };

    dropdowns.forEach(dropdown => {
        dropdown.addEventListener('click', handleDropdownClick);
    });

    // Close dropdowns when clicking outside on mobile
    document.addEventListener('click', function(e) {
        if (window.innerWidth < 992 && !e.target.closest('.dropdown-toggle')) {
            document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach(openDropdown => {
                openDropdown.classList.remove('show');
                openDropdown.previousElementSibling.setAttribute('aria-expanded', 'false');
            });
        }
    });
});
</script>