<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  /* ===== Header ===== */
  .agent-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #e95420;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 18px;
    font-weight: bold;
    z-index: 1000;
  }

  /* ===== Page Content ===== */
  .agent-body {
    margin-top: 60px; /* header height */
    padding: 15px;
    padding-bottom: 100px; /* reserve space for nav */
    box-sizing: border-box;
    min-height: 100vh;
  }

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

    bottom: 0; /* JS দ্বারা adjust হবে */
  }

  .agent-bottom-link {
    color: #fff;
    text-align: center;
    font-size: 14px;
    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: 8px;
  }
</style>

<!-- ===== Header ===== -->
<div class="agent-header">
  <div>Agent Panel</div>
  <?php if(isset($_SESSION) && !empty($_SESSION['user_id'])){ ?>
    <button onclick="window.location.href='/Agent/logout'" 
      style="background:none;border:none;color:#fff;font-size:16px;cursor:pointer;">
      Logout
    </button>
  <?php } ?>
</div>

<!-- ===== Content ===== -->
<div class="agent-body">
  <h2>Dashboard Content</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Scroll down to test bottom nav spacing...</p>
  <p style="margin-bottom:1000px;">Dummy long content...</p>
</div>

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

<!-- ===== JS Fix for Android Devices ===== -->
<script>
  function fixBottomNav() {
    const nav = document.getElementById("bottomNav");
    if (!nav) return;

    // পুরো window height (system bar সহ)
    let vh = window.innerHeight;

    // visual viewport height (system bar বাদে)
    let realVH = window.visualViewport ? window.visualViewport.height : vh;

    // ফারাক
    let diff = vh - realVH;

    if (diff > 0) {
      nav.style.bottom = diff + "px";  // system nav bar এর উপরে উঠবে
    } else {
      nav.style.bottom = "0px";
    }
  }

  window.addEventListener("resize", fixBottomNav);
  window.addEventListener("load", fixBottomNav);
</script>
