<header class="sticky-top main-navbar">
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <!-- Sidebar Toggle Button in Header for Small Screens -->
            <button class="btn btn-primary sidebar-toggle d-none d-lg-none" aria-label="Toggle sidebar">
                <i class="fa fa-chevron-left"></i>
            </button>
            <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="border-radius: 4px;border: 3px solid #40599b;width: 160px;background: #40599b;">-->
                <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" id="sidebarToggle"
                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" aria-current="page" href="index.php"><i class="fa fa-home"></i>
                            Home</a>
                    </li>

                    <li class="nav-item">
                        <a class="btn btn-sm btn-primary text-white mt-2" href="./leadx/index.php">
                            LeadX <i class="fa fa-sign-in"></i></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>

            <!-- 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"><i class="fa fa-home"></i>
                            </a>
                        </li>

                        <!--<li class="nav-item">
                                <a class="nav-link" aria-current="page" href="view-client.php"> Students</a>
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="view-employee.php"> Employee</a>
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="view-franchiee.php"> R A (Referral
                                    Associate)</a>
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="productList-status.php?status=Pending">
                                    Service (Work List)</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="view-paymentList.php">Payment List</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="payout.php?show_list">Payout</a>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                    aria-expanded="false">
                                    Others
                                </a>

                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="service.php?show_list">Service</a></li>
                                    <li>
                                        <a class="dropdown-item" href="category.php"> Service Category</a>
                                    </li>

                                    <li>
                                        <a class="dropdown-item" href="document-list.php?show_list"> Service
                                            Documents</a>
                                    </li>

                                    <li>
                                        <a class="dropdown-item" href="news.php?show_list">News</a>
                                    </li>

                                    <li>
                                        <a class="dropdown-item" href="view-notice.php">Notice</a>
                                    </li>

                                    <li><a class="dropdown-item" href="country.php">Country</a></li>
                                    <li><a class="dropdown-item" href="state.php">Add State</a></li>
                                    <li><a class="dropdown-item" href="district.php">Add District</a></li>
                                    <li><a class="dropdown-item" href="profile.php">Profile</a></li>
                                    <li><a class="dropdown-item" href="agreement.php">Agreement</a></li>
                                    <li><a class="dropdown-item" href="t&c.php">Terms & Condition</a></li>
                                </ul>

                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                    aria-expanded="false">
                                    Recycle
                                </a>

                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="recycleService.php?show_list">Recycle Service</a>
                                    </li>
                                    <li><a class="dropdown-item" href="view-recycleClient.php">Recycle Client</a></li>
                                    <li><a class="dropdown-item" href="view-recycleEmployee.php">Recycle Employee</a>
                                    </li>
                                    <li><a class="dropdown-item" href="view-recycleFranchisee.php">Recycle
                                            Franchisee</a></li>
                                </ul>
                            </li>-->

                        <li class="nav-item">
                            <a class="nav-link text-white" href="./leadx/index.php"> LeadX <i
                                    class="fa fa-sign-in"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-white" 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 #00b9ef;border-radius: 50%;color: #00b9ef;font-size: 16px;width: 30px;"></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 sidebar-dropdown">
            <a href="#" class="sidebar-link">
                <i class="fa fa-person-chalkboard"></i>
                <span class="sidebar-text">Academics</span>
                <i class="fa fa-chevron-down dropdown-icon ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="courseCategory.php">Course Department</a></li>
                <li><a href="addcourse.php">Course</a></li>
                <li><a href="view-batch.php">Batch</a></li>
                <li><a href="entrance.php">Entrance</a></li>
            </ul>
        </li>
        <li class="sidebar-item sidebar-dropdown">
            <a href="#" class="sidebar-link">
                <i class="fa fa-users"></i>
                <span class="sidebar-text">User List</span>
                <i class="fa fa-chevron-down dropdown-icon ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="view-college.php">Colleges</a></li>
                <li><a href="view-client.php">Students</a></li>
                <li><a href="view-employee.php">Employee</a></li>
                <li><a href="view-franchiee.php">Associate</a></li>
                <li><a href="view-vendor.php">Vendor/Hotel</a></li>
            </ul>
        </li>
        <li class="sidebar-item">
            <a href="view-work.php" class="sidebar-link">
                <i class="fab fa-w"></i>
                <span class="sidebar-text">Generate Work</span>
            </a>
        </li>
        <!--<li class="sidebar-item sidebar-dropdown">
            <a href="#" class="sidebar-link">
                <i class="fa fa-list"></i>
                <span class="sidebar-text">Service (Work List)</span>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="productList-status.php?status=Pending">Pending</a></li>
                <li><a href="productList-status.php?status=Ongoing">Ongoing</a></li>
                <li><a href="productList-status.php?status=Completed">Completed</a></li>
                <li><a href="productList-status.php?status=Postponed">Postponed</a></li>
                <li><a href="productList-status.php?status=Rejected">Rejected</a></li>
            </ul>
        </li>-->
        <li class="sidebar-item">
            <a href="view-productList.php" class="sidebar-link">
                <i class="fab fa-product-hunt"></i>
                <span class="sidebar-text">Work Report</span>
            </a>
        </li>
        <!--<li class="sidebar-item">
            <a href="view-paymentList.php" class="sidebar-link">
                <i class="fa fa-inr"></i>
                <span class="sidebar-text">Payment List</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 Bill List</span>
            </a>
        </li>

        <li class="sidebar-item">
            <a href="workBill-calculation.php" class="sidebar-link">
                <i class="fa fa-calculator" aria-hidden="true"></i>
                <span class="sidebar-text">Work Bill</span>
            </a>
        </li>

        <li class="sidebar-item">
            <a href="payout.php" class="sidebar-link">
                <i class="fa fa-money-bill"></i>
                <span class="sidebar-text">Payout</span>
            </a>
        </li>

        <li class="sidebar-item sidebar-dropdown">
            <a href="#" class="sidebar-link">
                <i class="fa fa-list-alt" aria-hidden="true"></i>
                <span class="sidebar-text">Others</span>
                <i class="fa fa-chevron-down dropdown-icon ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="district.php">District</a></li>
                <li><a href="state.php">State</a></li>
                <li><a href="country.php">Country</a></li>

                <li><a href="news.php?show_list">News</a></li>
                <li><a href="view-notice.php">Notice</a></li>
                <li><a href="profile.php">Profile</a></li>
                <!--<li><a href="agreement.php">Agreement</a></li>-->
                <li><a href="t&c.php">Terms & Condition</a></li>
            </ul>
        </li>

        <!--<li class="sidebar-item sidebar-dropdown">
            <a href="#" class="sidebar-link">
                <i class="fa fa-recycle" aria-hidden="true"></i>
                <span class="sidebar-text">Recycle</span>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="recycleService.php?show_list">Recycle Course</a></li>
                <li><a href="view-recycleClient.php">Recycle Student</a></li>
                <li><a href="view-recycleEmployee.php">Recycle Employee</a></li>
                <li><a href="view-recycleFranchisee.php">Recycle Associate</a></li>
            </ul>
        </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 toggleBtn = document.getElementById("sidebarToggle");
    const innerBody = document.getElementById("inner-body");

    // Initial state
    innerBody.style.marginLeft = "60px";

    // Toggle button click
    toggleBtn.addEventListener("click", () => {
        sidebar.classList.toggle("expanded");
        toggleBtn.classList.toggle("rotated");

        if (sidebar.classList.contains("expanded")) {
            innerBody.style.marginLeft = "200px";
        } else {
            innerBody.style.marginLeft = "60px";

            // Close all dropdowns when collapsed
            closeAllDropdowns();
        }
    });

    // Hover handling (temporary expansion)
    sidebar.addEventListener("mouseenter", () => {
        if (!sidebar.classList.contains("expanded")) {
            innerBody.style.marginLeft = "200px";
        }
    });

    sidebar.addEventListener("mouseleave", () => {
        if (!sidebar.classList.contains("expanded")) {
            innerBody.style.marginLeft = "60px";

            // Close all dropdowns on hover out
            closeAllDropdowns();
        }
    });

    // Dropdown click (accordion style)
    document.querySelectorAll(".sidebar-dropdown").forEach(drop => {
        const link = drop.querySelector(".sidebar-link");
        link.addEventListener("click", function(e) {
            e.preventDefault();

            // Accordion: close others
            document.querySelectorAll(".sidebar-dropdown").forEach(otherDrop => {
                if (otherDrop !== drop) {
                    otherDrop.classList.remove("open");
                }
            });

            // Toggle current
            drop.classList.toggle("open");
        });
    });

    // Helper to close all dropdowns
    function closeAllDropdowns() {
        document.querySelectorAll(".sidebar-dropdown").forEach(drop => {
            drop.classList.remove("open");
        });
    }
});
</script>