arif_grafin/CONTENT/ROOT_URI/Agent/Agent_Nav.php

<?php
  date_default_timezone_set('Asia/Kolkata');

  // $profile_pic = !empty($_SESSION['profile_pic']) ? "/CONTENT/ROOT_URI/Agent/" . htmlspecialchars($_SESSION['profile_pic']) : "/CONTENT/ROOT_URI/Agent/default.png"; // placeholder image
?>
<style>
    .agent-body {
      margin: 0;
      padding: 0;
      margin-bottom: 0px;
      font-family: Arial, sans-serif;
      overflow-y: hidden;
    }

    /* ===== Header/Navbar ===== */
    .agent-header {
      background: #e95420;
      color: #fff;
      padding: 15px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
    }
    .agent-header-title {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .agent-header-title img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
    }
    .agent-header-logout {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }

    /* ===== Bottom Navigation ===== */
    .agent-bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 55px;
      /* margin-bottom: 50px; important for bottom nav in mobile */
      background: #e95420;
      display: flex;
      justify-content: space-around;
      align-items: center;
      /* border-top: 1px solid rgba(10, 10, 10, 1);
      z-index: 999; */
    }

    /* important for bottom nav in mobile */
    /* .agent-bottom-nav::after {
      content: "";
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      background: black;
      z-index: -1;
    } */
    .agent-bottom-link {
      color: #fff;
      text-align: center;
      font-size: 12px;
      text-decoration: none;
      flex: 1;
      padding: 5px 0;
    }
    .agent-bottom-link i {
      display: block;
      font-size: 15px;
      margin-bottom: 2px;
    }
    .agent-bottom-link.active {
      background: rgba(255,255,255,0.2);
      border-radius: 5px;
    }
</style>

<div class="agent-body">

  <!-- Top Header -->
  <div class="agent-header">
    <div class="agent-header-title">
      <!-- <img src="/CONTENT/ROOT_URI/Admin/<?php echo htmlspecialchars($_SESSION['profile_pic'] ?? 'default.svg'); ?>"  alt="Profile"> -->
      
      <span>Agent Panel</span>
    </div>
    <?php if(isset($_SESSION) && !empty($_SESSION['user_id'])){ ?>
      <button onclick="window.location.href='/Agent/logout'" class="agent-header-logout">Logout</button>
    <?php } ?>
  </div>

  <!-- Some content -->
  <div style="margin-top:20px; padding:15px;"></div>

  <!-- Bottom Navigation -->
   <?php if(isset($_SESSION) && !empty($_SESSION['user_id'])){ ?>
      <div class="agent-bottom-nav">
        <a href="/Agent/Dashboard" class="agent-bottom-link <?php echo ($current_page == 'Dashboard' || $current_page == 'Agent') ? 'active' : ''; ?>" data-page="Dashboard">
          <i class="fa-solid fa-house"></i>
          Home
        </a>
        <a href="/Agent/report" class="agent-bottom-link <?php echo ($current_page == 'report') ? 'active' : ''; ?>" data-page="report">
          <i class="fa-solid fa-chart-line"></i>
          Reports
        </a>
        <a href="/Agent/Receive" class="agent-bottom-link <?php echo ($current_page == 'Receive') ? 'active' : ''; ?>" data-page="Receive">
          <i class="fa-solid fa-plus"></i>
          Payment
        </a>
        <!-- <a href="/Agent/commission" class="agent-bottom-link">
          <i class="fa-solid fa-plus"></i>
          Commission
        </a> -->
        <a href="/Agent/transaction" class="agent-bottom-link <?php echo ($current_page == 'transaction') ? 'active' : ''; ?>" data-page="transaction">
          <i class="fa-solid fa-money-check-dollar"></i>
          Transaction
        </a>
      </div>
   <?php } ?>

</div>
 <script>
    // Function to set active state based on current page
    function setActiveNavLink() {
        // Get all navigation links
        const navLinks = document.querySelectorAll('.agent-bottom-link');
        
        // Get current page from URL
        const currentPage = window.location.pathname.split('/').pop() || 'Dashboard';
        
        // Remove active class from all links
        navLinks.forEach(link => {
            link.classList.remove('active');
            
            // Get the page identifier from data attribute or href
            const linkPage = link.getAttribute('data-page') || link.getAttribute('href').split('/').pop();
            
            // Add active class if matches current page
            if (linkPage === currentPage) {
                link.classList.add('active');
            }
        });
    }
    
    // Set active nav link on page load
    document.addEventListener('DOMContentLoaded', setActiveNavLink);
    
    // Also set active state when navigating (optional)
    document.querySelectorAll('.agent-bottom-link').forEach(link => {
        link.addEventListener('click', function() {
            document.querySelectorAll('.agent-bottom-link').forEach(l => l.classList.remove('active'));
            this.classList.add('active');
        });
    });
  </script>