@php
  $path = trim(request()->path(), '/');

  $primaryGradient = 'linear-gradient(135deg, #2563eb 0%, #1e40af 100%)';
  $activeTextColor = '#2563eb';

  // ✅ Wallet & Product position swapped (Wallet আগে, Product পরে)
  $items = [
    ['href' => url('/dashboard'), 'icon' => 'fa-house',            'label'=> 'হোম',      'key' => 'dashboard'],
    ['href' => url('/course'),    'icon' => 'fa-graduation-cap',   'label'=> 'কোর্স',     'key' => 'course'],
    ['href' => route('wallet'),   'icon' => 'fa-wallet',           'label'=> 'ওয়ালেট',   'key' => '__wallet__'],
    ['href' => url('/shop'),      'icon' => 'fa-store',            'label'=> 'প্রোডাক্ট', 'key' => 'shop'],
    ['href' => url('/my-team'),   'icon' => 'fa-users',            'label'=> 'নেটওয়ার্ক','key' => 'my-team'],
  ];

  $activeIndex = null;

  foreach ($items as $i => $it) {
    $isActive = false;

    if ($it['key'] === '__wallet__') {
      $isActive = request()->routeIs('wallet');
    } else {
      $isActive = ($path === $it['key']);
    }

    $items[$i]['active'] = $isActive;

    if ($isActive && $activeIndex === null) {
      $activeIndex = $i;
    }
  }

  // FAB positions remain 5 items (same)
  $pos = [10, 30, 50, 70, 90];

  $fabPos     = ($activeIndex !== null) ? ($pos[$activeIndex] ?? 50) : 50;
  $activeIcon = ($activeIndex !== null) ? ($items[$activeIndex]['icon'] ?? 'fa-circle') : 'fa-circle';
  $activeHref = ($activeIndex !== null) ? ($items[$activeIndex]['href'] ?? 'javascript:void(0)') : null;
@endphp

<style>
:root{
  --nav-bg: rgba(255,255,255,.96);
  --primary-grad: {!! $primaryGradient !!};
  --text-blue: {{ $activeTextColor }};
  --ft-fab-size: 60px;
  --spring-bounce: cubic-bezier(0.68,-0.55,0.27,1.55);
}

.ft-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  padding:0;
  margin:0;
  z-index:9999;
}

.ft{
  width:100%;
  margin:0;
  position:relative;
}

.ft-bar{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  height:calc(72px + var(--safe-bottom));
  width:100%;
  background:var(--nav-bg);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px var(--safe-bottom);
  box-shadow:0 -10px 30px rgba(0,0,0,.08);
  border-top:1px solid rgba(0,0,0,.06);
  position:relative;
}

.ft-item{
  flex:1;
  min-width:0;
  text-align:center;
  text-decoration:none;
  position:relative;
  z-index:10;
  transition:transform .2s ease;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:4px;
}

.ft-ico{
  display:block;
  height:26px;
}

.ft-ico i{
  font-size:20px;
  color:var(--text-blue);
}

.ft-lbl{
  display:block;
  font-size:10px;
  font-weight:800;
  color:var(--text-blue);
  margin-top:5px;
  letter-spacing:.5px;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ft-item.is-active .ft-lbl{
  font-weight:900;
}

.ft-dot{
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  background:var(--text-blue);
  border-radius:50%;
  opacity:0;
}

.ft-item.is-active .ft-dot{
  opacity:1;
}

.ft-item:active{
  transform:scale(.93);
}

.ft-fab{
  position:absolute;
  top:-28px;
  left:calc({{ $fabPos }}% - (var(--ft-fab-size) / 2));
  width:var(--ft-fab-size);
  height:var(--ft-fab-size);
  background:var(--primary-grad);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
  box-shadow:0 12px 30px rgba(37,99,235,.45);
  transition:var(--spring-bounce) .6s;
  border:5px solid #fff;
}

.ft-fab i{
  color:#fff;
  font-size:24px;
}

.ft-item.is-active .ft-ico{
  opacity:0;
  height:0;
  overflow:hidden;
}

.ft-item.is-active .ft-lbl{
  margin-top:28px;
}

.ft-fab.is-hidden{
  display:none !important;
}

@media (max-width:420px){
  :root{
    --ft-fab-size:54px;
  }

  .ft-bar{
    height:calc(68px + var(--safe-bottom));
  }

  .ft-ico i{
    font-size:18px;
  }

  .ft-lbl{
    font-size:9px;
    letter-spacing:.3px;
  }

  .ft-fab{
    top:-24px;
  }

  .ft-item.is-active .ft-lbl{
    margin-top:22px;
  }
}

@media (max-width:360px){
  .ft-bar{
    padding:0 4px var(--safe-bottom);
  }

  .ft-lbl{
    font-size:8.5px;
  }
}
</style>

<div class="ft-wrap">
  <div class="ft">
    <a class="ft-fab {{ $activeIndex === null ? 'is-hidden' : '' }}"
       href="{{ $activeHref ?? 'javascript:void(0)' }}"
       id="mainFab" aria-label="Active">
      <i class="fa-solid {{ $activeIcon }}"></i>
    </a>

    <div class="ft-bar">
      @foreach($items as $it)
        <a href="{{ $it['href'] }}" class="ft-item {{ !empty($it['active']) ? 'is-active' : '' }}">
          <span class="ft-ico"><i class="fa-solid {{ $it['icon'] }}"></i></span>
          <span class="ft-lbl">{{ $it['label'] }}</span>
          <span class="ft-dot"></span>
        </a>
      @endforeach
    </div>
  </div>
</div>

<script>
  const fab = document.getElementById('mainFab');
  document.querySelectorAll('.ft-item').forEach(btn=>{
    btn.addEventListener('touchstart', ()=>{
      if(fab && !fab.classList.contains('is-hidden')) fab.style.transform='scale(1.12)';
    }, {passive:true});

    btn.addEventListener('touchend', ()=>{
      if(fab && !fab.classList.contains('is-hidden')) setTimeout(()=>fab.style.transform='scale(1)', 90);
    }, {passive:true});
  });
</script>

