<?php
  date_default_timezone_set('Asia/Kolkata');
?>
<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 {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 8px;
      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">
      <?php
        if(isset($_SESSION['profile_pic']) || !empty($_SESSION['profile_pic'])){
          echo '<img src="/CONTENT/ROOT_URI/Admin/'.$_SESSION['profile_pic'].'" style="width: 35px; height: 35px; border-radius:50%; object-fit:cover;" alt="Profile" />';
        }else{
          echo '<svg style="border-radius:50%; object-fit:cover; border: 1px solid #ffffff;" class="img-responsive" version="1.1" width="28px" height="28px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#ffffff" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0z"></path></g></svg>';
        }
      ?>      
      <span>Agent Panel</span>
    </div>
    <?php if(isset($_SESSION) && !empty($_SESSION['user_id'])){ ?>

      <button onclick="window.location.href='/Agent/logout'" class="agent-header-logout">
        <svg width="22px" height="22px" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.75 9.874C11.75 10.2882 12.0858 10.624 12.5 10.624C12.9142 10.624 13.25 10.2882 13.25 9.874H11.75ZM13.25 4C13.25 3.58579 12.9142 3.25 12.5 3.25C12.0858 3.25 11.75 3.58579 11.75 4H13.25ZM9.81082 6.66156C10.1878 6.48991 10.3542 6.04515 10.1826 5.66818C10.0109 5.29121 9.56615 5.12478 9.18918 5.29644L9.81082 6.66156ZM5.5 12.16L4.7499 12.1561L4.75005 12.1687L5.5 12.16ZM12.5 19L12.5086 18.25C12.5029 18.25 12.4971 18.25 12.4914 18.25L12.5 19ZM19.5 12.16L20.2501 12.1687L20.25 12.1561L19.5 12.16ZM15.8108 5.29644C15.4338 5.12478 14.9891 5.29121 14.8174 5.66818C14.6458 6.04515 14.8122 6.48991 15.1892 6.66156L15.8108 5.29644ZM13.25 9.874V4H11.75V9.874H13.25ZM9.18918 5.29644C6.49843 6.52171 4.7655 9.19951 4.75001 12.1561L6.24999 12.1639C6.26242 9.79237 7.65246 7.6444 9.81082 6.66156L9.18918 5.29644ZM4.75005 12.1687C4.79935 16.4046 8.27278 19.7986 12.5086 19.75L12.4914 18.25C9.08384 18.2892 6.28961 15.5588 6.24995 12.1513L4.75005 12.1687ZM12.4914 19.75C16.7272 19.7986 20.2007 16.4046 20.2499 12.1687L18.7501 12.1513C18.7104 15.5588 15.9162 18.2892 12.5086 18.25L12.4914 19.75ZM20.25 12.1561C20.2345 9.19951 18.5016 6.52171 15.8108 5.29644L15.1892 6.66156C17.3475 7.6444 18.7376 9.79237 18.75 12.1639L20.25 12.1561Z" fill="currentColor"></path> </g></svg>
        <span>Logout</span>
      </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>
