</main>
</div><!-- .app-shell -->

<!-- Bottom Tab Bar -->
<nav class="app-bottomnav">
  <span class="bn-surface" aria-hidden="true"></span>
  <a href="dashboard.php" class="bn-item <?php echo $__nav_home ? 'active' : ''; ?>">
    <span class="bn-ic"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V9.5"/></svg></span>
    <span class="bn-lbl">Home</span>
  </a>
  <a href="wallet.php" class="bn-item <?php echo $__nav_wallet ? 'active' : ''; ?>">
    <span class="bn-ic"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 010-4h15a1 1 0 011 1v4"/><path d="M3 5v14a2 2 0 002 2h16v-5"/><path d="M18 12a2 2 0 000 4h4v-4z"/></svg></span>
    <span class="bn-lbl">Wallet</span>
  </a>
  <a href="scan.php" class="bn-fab-wrap">
    <span class="bn-fab">
      <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 012-2h2M17 3h2a2 2 0 012 2v2M21 17v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2"/><rect x="7" y="7" width="10" height="10" rx="1"/></svg>
    </span>
  </a>
  <a href="orders.php" class="bn-item <?php echo $__nav_orders ? 'active' : ''; ?>">
    <span class="bn-ic"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L4 6v14a2 2 0 002 2h12a2 2 0 002-2V6l-2-4"/><path d="M4 6h16"/><path d="M9 10a3 3 0 006 0"/></svg></span>
    <span class="bn-lbl">Orders</span>
  </a>
  <a href="profile.php" class="bn-item <?php echo $__nav_profile ? 'active' : ''; ?>">
    <span class="bn-ic"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008.6 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H2a2 2 0 110-4h.09A1.65 1.65 0 003.6 8.6a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H8a1.65 1.65 0 001-1.51V2a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V8c0 .67.39 1.27 1 1.51H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg></span>
    <span class="bn-lbl">Settings</span>
  </a>
  <span class="bn-bubble" aria-hidden="true"></span>
</nav>

<script>
// Shared back-button helper: return to the previous in-app page when there's
// history, otherwise fall back to the link's href (e.g. on a direct load).
function goBack(e) {
  if (window.history.length > 1 && document.referrer) {
    e.preventDefault();
    window.history.back();
    return false;
  }
  return true;
}

// ── Animated "bubble" bottom nav ───────────────────────────────────────
// Taps navigate INSTANTLY (no delay). The slide is a cross-page transition:
// each page remembers which tab it is, so the next page starts the bubble at
// the previous tab and glides it (with the bar's notch) to the new one. A
// concave "notch" in the bar surface follows the bubble for the water-wave.
(function () {
  var nav = document.querySelector('.app-bottomnav');
  if (!nav) return;
  var bubble  = nav.querySelector('.bn-bubble');
  var surface = nav.querySelector('.bn-surface');
  var items   = Array.prototype.slice.call(nav.querySelectorAll('.bn-item'));
  if (!bubble || !items.length) return;

  function centerOf(el) { return el.offsetLeft + el.offsetWidth / 2; }
  function notch(x) { if (surface) surface.style.setProperty('--notch-x', x + 'px'); }
  function setIcon(item) { var s = item.querySelector('.bn-ic svg'); if (s) bubble.innerHTML = s.outerHTML; }

  var activeIndex = -1;
  items.forEach(function (it, i) { if (it.classList.contains('active')) activeIndex = i; });
  if (activeIndex < 0) return;                       // page with no tab selected → no bubble
  var activeItem = items[activeIndex];
  var toX = centerOf(activeItem);
  setIcon(activeItem);
  nav.classList.add('bubbly');

  var fromIndex = null;
  try { var v = sessionStorage.getItem('dabil_nav_idx'); if (v !== null) fromIndex = parseInt(v, 10); } catch (e) {}

  if (fromIndex !== null && fromIndex !== activeIndex && items[fromIndex]) {
    // came from another tab → appear at it, then glide to the new one
    var fromX = centerOf(items[fromIndex]);
    bubble.style.transition = 'none';
    bubble.style.left = fromX + 'px'; notch(fromX);
    bubble.classList.add('ready');
    void bubble.offsetWidth;                         // commit the start frame
    requestAnimationFrame(function () {
      bubble.style.transition = '';
      bubble.style.left = toX + 'px'; notch(toX);
    });
  } else {
    // first visit / reload of same tab → gentle pop-in, no slide
    bubble.style.transition = 'none';
    bubble.style.left = toX + 'px'; notch(toX);
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        bubble.style.transition = '';
        bubble.classList.add('ready');
      });
    });
  }

  try { sessionStorage.setItem('dabil_nav_idx', String(activeIndex)); } catch (e) {}

  // keep the bubble + notch aligned if the viewport width changes
  var rt;
  window.addEventListener('resize', function () {
    clearTimeout(rt);
    rt = setTimeout(function () {
      var a = nav.querySelector('.bn-item.active');
      if (!a) return;
      var prev = bubble.style.transition; bubble.style.transition = 'none';
      var x = centerOf(a); bubble.style.left = x + 'px'; notch(x);
      requestAnimationFrame(function () { bubble.style.transition = prev; });
    }, 120);
  });
})();
</script>

</body>
</html>
