<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Admin Dashboard</title>
    <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/plugins.min.css" />
    <link rel="stylesheet" href="css/dashboard.min.css" />

    <style>
    .sidebar .nav-collapse, .sidebar[data-background-color=white] .nav-collapse{

      margin-bottom: 0px !important;
      padding-bottom: 0px !important;
    }
    @media (max-width: 1800px) {
          .page-inner {
            margin-left: 15%;
          }
          .wrapper{
                min-height: 12vh !important;
                    height: 0vh !important;
          }

          .main-panel {
      position: relative;
      height: 0vh !important;
      min-height: 0% !important;
  }
  }
        @media (max-width: 991.98px) {
            /* Force the mobile menu to slide out properly when nav-open is active */
            .wrapper.nav-open .sidebar {
                transform: translate3d(0, 0, 0) !important;
                left: 0 !important;
            }
            /* Dark overlay element placeholder configuration */
            .sidebar-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.4);
                z-index: 999;
                display: none;
            }
            .wrapper.nav-open .sidebar-overlay {
                display: block;
            }
        }

  @media (max-width: 470px) {
    .page-inner {
      margin-left: 0% !important;
    }
        .wrapper{
              min-height: 8vh !important;
                  height: 0vh !important;
        }

        .main-panel {
    position: relative;
    height: 0vh !important;
    min-height: 0% !important;
}
}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="sidebar-overlay" id="mobileDismissShield"></div>

        <div class="sidebar" data-background-color="dark">
            <div class="sidebar-logo">
                <div class="logo-header" data-background-color="dark" style="background-color: white !important;">
                    <a href="dashboard.php" class="logo">
                        <img src="img/logo-new.png" alt="navbar brand" class="navbar-brand" style="width: 75%;" />
                    </a>
                    <div class="nav-toggle">
                        <button class="btn btn-toggle toggle-sidebar">
                            <i class="gg-menu-right"></i>
                        </button>
                        <button class="btn btn-toggle sidenav-toggler">
                            <i class="gg-menu-left"></i>
                        </button>
                    </div>
                    <button class="topbar-toggler more">
                        <i class="gg-more-vertical-alt"></i>
                    </button>
                </div>
                </div>
            <div class="sidebar-wrapper scrollbar scrollbar-inner">
                <div class="sidebar-content">
                    <ul class="nav nav-secondary">
                        <li class="nav-item">
                            <a href="dashboard.php">
                                <i class="fa fa-tachometer"></i>
                                <p>Dashboard</p>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a data-bs-toggle="collapse" href="#user">
                                <i class="fa fa-user"></i>
                                <p>User Management</p>
                                <span class="caret"></span>
                            </a>
                            <div class="collapse" id="user">
                                <ul class="nav nav-collapse">
                                    <li>
                                        <a href="user_add.php">
                                            <span class="sub-item">Add</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="view_add.php">
                                            <span class="sub-item">View</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li class="nav-item">
                            <a data-bs-toggle="collapse" href="#lead">
                                <i class="fa fa-line-chart"></i>
                                <p>Lead Management</p>
                                <span class="caret"></span>
                            </a>
                            <div class="collapse" id="lead">
                                <ul class="nav nav-collapse">
                                    <li>
                                        <a href="lead_add.php">
                                            <span class="sub-item">Add</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="view_lead.php">
                                            <span class="sub-item">View</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-panel">
            <div class="main-header">
                <div class="main-header-logo">
                    <div class="logo-header" data-background-color="dark" style="background-color: white !important;">
                        <a href="dashboard.php" class="logo">
                            <img src="img/logo-new.png" alt="navbar brand" class="navbar-brand" style="width: 75%;" />
                        </a>
                        <div class="nav-toggle">
                            <button class="btn btn-toggle toggle-sidebar">
                                <i class="gg-menu-right"></i>
                            </button>
                            <button class="btn btn-toggle sidenav-toggler">
                                <i class="gg-menu-left"></i>
                            </button>
                        </div>
                        <button class="topbar-toggler more">
                            <i class="gg-more-vertical-alt"></i>
                        </button>
                    </div>
                    </div>

                <nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom">
                    <div class="container-fluid">
                        <nav class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex"></nav>

                        <ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
                            <li class="nav-item topbar-icon dropdown hidden-caret d-flex d-lg-none">
                                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                    <i class="fa fa-search"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-search animated fadeIn">
                                    <form class="navbar-left navbar-form nav-search">
                                        <div class="input-group">
                                            <input type="text" placeholder="Search ..." class="form-control" />
                                        </div>
                                    </form>
                                </ul>
                            </li>

                            <li class="nav-item topbar-user dropdown hidden-caret">
                                <a class="dropdown-toggle profile-pic" data-bs-toggle="dropdown" href="#" aria-expanded="false">
                                    <div class="avatar-sm">
                                        <i class='fa fa-user-circle' style='font-size:36px'></i>
                                    </div>
                                    <span class="profile-username">
                                        <span class="fw-bold">Admin</span>
                                    </span>
                                </a>
                                <ul class="dropdown-menu dropdown-user animated fadeIn">
                                    <div class="dropdown-user-scroll scrollbar-outer">
                                        <li>
                                            <a class="dropdown-item" href="profile.php">My Profile</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="change-password.php">Change Password</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="login.php">Logout</a>
                                        </li>
                                    </div>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
                </div>

            <div class="container p-4">
                </div>

        </div> </div> <script src="js/jquery.3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

    <script>
    document.addEventListener("DOMContentLoaded", function () {
        // ========================================================
        // 1. ACTIVE URL DROPDOWN ENGINE ROUTINE
        // ========================================================
        var currentUrl = window.location.pathname.split("/").pop();
        if (currentUrl === "") {
            currentUrl = "dashboard.php";
        }

        var navLinks = document.querySelectorAll(".sidebar .nav-item a, .sidebar .nav-collapse a");

        navLinks.forEach(function (link) {
            var linkHref = link.getAttribute("href");

            if (linkHref === currentUrl) {
                var subItemLi = link.closest("li");
                if (subItemLi) {
                    subItemLi.classList.add("active");
                }

                var collapseContainer = link.closest(".collapse");
                if (collapseContainer) {
                    collapseContainer.classList.add("show");

                    var parentNavItem = collapseContainer.closest(".nav-item");
                    if (parentNavItem) {
                        parentNavItem.classList.add("active");

                        var parentTriggerLink = parentNavItem.querySelector('[data-bs-toggle="collapse"]');
                        if (parentTriggerLink) {
                            parentTriggerLink.setAttribute("aria-expanded", "true");
                            parentTriggerLink.classList.remove("collapsed");
                        }
                    }
                } else {
                    var topNavItem = link.closest(".nav-item");
                    if (topNavItem) {
                        topNavItem.classList.add("active");
                    }
                }
            }
        });

        // ========================================================
        // 2. UNIFIED RESPONSIVE TOGGLE EVENT CONTROLLERS
        // ========================================================
        const wrapper = document.querySelector('.wrapper');
        const dismissShield = document.getElementById('mobileDismissShield');

        // Capture both header and navbar instances of toggler triggers
        const sidenavTaggers = document.querySelectorAll('.sidenav-toggler, .logo-header .sidenav-toggler');
        const desktopMinimizeTaggers = document.querySelectorAll('.toggle-sidebar');
        const topbarTaggers = document.querySelectorAll('.topbar-toggler.more');

        // Mobile Sidebar Trigger Handler Loop
        sidenavTaggers.forEach(function(btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                wrapper.classList.toggle('nav-open');
                btn.classList.toggle('toggled');
            });
        });

        // Background Dark Shield Click Dismiss Loop
        if (dismissShield) {
            dismissShield.addEventListener('click', function() {
                wrapper.classList.remove('nav-open');
                sidenavTaggers.forEach(b => b.classList.remove('toggled'));
            });
        }

        // Desktop Minimize Sidebar Trigger Handler Loop
        desktopMinimizeTaggers.forEach(function(btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                wrapper.classList.toggle('sidebar_minimize');
                btn.classList.toggle('toggled');
            });
        });

        // Mobile Topbar Vertical Dots Action Trigger Loop
        topbarTaggers.forEach(function(btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                wrapper.classList.toggle('topbar_open');
                btn.classList.toggle('toggled');
            });
        });

        // Safety Cleanup when changing viewport dimensions
        window.addEventListener('resize', function() {
            if (window.innerWidth > 991) {
                wrapper.classList.remove('nav-open');
                wrapper.classList.remove('topbar_open');
                sidenavTaggers.forEach(b => b.classList.remove('toggled'));
            }
        });
    });
    </script>
