@php
  $gs = \App\Models\GeneralSetting::first();
  $siteName = $gs->site_name ?? 'NIK EARNING';
  $logoPath = $gs->logo ? asset(ltrim($gs->logo, '/')) : null;
  $telegramLink = $gs->telegram_link ?? '#';
  $facebookLink = $gs->facebook_link ?? '#';
@endphp

<style>
  :root {
    --nav-bg: rgba(255, 255, 255, .92);
    --nav-border: rgba(226, 232, 240, .9);
    --primary: #2563eb;
    --text-main: #0f172a;
  }

  .sp-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
  }

  .sp-nav {
    height: 64px;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    position: relative;
  }

  .sp-left,
  .sp-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .sp-left {
    min-width: 0;
    flex: 0 0 auto;
  }

  .sp-right {
    flex-shrink: 0;
  }

  .sp-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: calc(100% - 120px);
  }

  .sp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
  }

  .sp-name-box {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .sp-name {
    font-weight: 900;
    color: var(--text-main);
    font-size: clamp(14px, 4.2vw, 20px);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    word-break: break-word;
  }

  .sp-tag {
    font-size: clamp(7px, 2.4vw, 10px);
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin-top: 2px;
  }

  .sp-ring {
    border: 2px solid rgba(37, 99, 235, .55);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10), 0 10px 22px rgba(37, 99, 235, .10);
  }

  .sp-burger,
  .sp-btn-action {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    cursor: pointer;
    position: relative;
  }

  .sp-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  /* ===== Popup ===== */
  .tg-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .55);
  }

  .tg-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid rgba(37, 99, 235, .55);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .25);
    position: relative;
  }

  .tg-top {
    height: 64px;
    background: linear-gradient(135deg, #2563eb, #1e40af);
  }

  .tg-body {
    padding: 18px 18px 16px;
    text-align: center;
  }

  .tg-ic {
    width: 72px;
    height: 72px;
    margin: -40px auto 10px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid rgba(37, 99, 235, .55);
    box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
    color: #2563eb;
    font-size: 30px;
  }

  .tg-title {
    font-weight: 1000;
    font-size: 16px;
    color: #0f172a;
    margin: 0;
  }

  .tg-text {
    margin: 8px 0 14px;
    color: #475569;
    font-weight: 800;
    font-size: 13px;
  }

  .tg-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none;
    color: #fff !important;
    margin-bottom: 10px;
  }

  .tg-btn-telegram {
    background: #2563eb;
  }

  .tg-btn-telegram:hover {
    background: #1d4ed8;
  }

  .tg-btn-facebook {
    background: #1877f2;
  }

  .tg-btn-facebook:hover {
    background: #0f5fd1;
  }

  .tg-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  @media (max-width:420px) {
    .sp-nav {
      height: 58px;
      padding: 0 10px;
    }

    .sp-left,
    .sp-right {
      gap: 8px;
    }

    .sp-burger,
    .sp-btn-action {
      width: 38px;
      height: 38px;
      border-radius: 12px;
    }

    .sp-center {
      max-width: calc(100% - 104px);
    }

    .sp-tag {
      margin-top: 1px;
    }
  }

  @media (max-width:360px) {
    .sp-center {
      max-width: calc(100% - 96px);
    }
  }
</style>

<div class="sp-topbar">
  <div class="sp-nav">
    <div class="sp-left">
      <button class="sp-burger sp-ring" type="button" onclick="if(window.toggleSidebar){toggleSidebar();}">
        <i class="fa-solid fa-bars-staggered"></i>
      </button>
    </div>

    <div class="sp-center">
      <div class="sp-brand">
        <div class="sp-name-box">
          <span class="sp-name">{{ $siteName }}</span>
          <span class="sp-tag">Digital Ecosystem</span>
        </div>
      </div>
    </div>

    <div class="sp-right">
      <a class="sp-btn-action sp-ring" href="javascript:void(0)" onclick="openTelegramPopup()">
        <i class="fa-regular fa-bell"></i>
        <span class="sp-dot"></span>
      </a>
    </div>
  </div>
</div>

<div id="tgModal" class="tg-modal">
  <div class="tg-card">
    <button type="button" class="tg-close" onclick="closeTelegramPopup()">
      <i class="fa-solid fa-xmark"></i>
    </button>
    <div class="tg-top"></div>

    <div class="tg-body">
      <div class="tg-ic"><i class="fa-solid fa-bullhorn"></i></div>
      <h3 class="tg-title">সকল ধরনের আপডেট পেতে</h3>
      <p class="tg-text">আমাদের টেলিগ্রাম ও ফেসবুক চ্যানেলে যুক্ত থাকুন।</p>

      <a class="tg-btn tg-btn-telegram" href="{{ $telegramLink }}" target="_blank">
        <i class="fa-brands fa-telegram"></i> টেলিগ্রামে জয়েন করুন
      </a>

      <a class="tg-btn tg-btn-facebook" href="{{ $facebookLink }}" target="_blank">
        <i class="fa-brands fa-facebook-f"></i> ফেসবুকে ফলো করুন
      </a>
    </div>
  </div>
</div>

<script>
  function isDashboardPage() {
    return window.location.pathname === '/dashboard' ||
      window.location.pathname === '/dashboard/';
  }

  function openTelegramPopup() {
    if (!isDashboardPage()) return;
    const m = document.getElementById('tgModal');
    if (m) m.style.display = 'flex';
  }

  function closeTelegramPopup() {
    const m = document.getElementById('tgModal');
    if (m) m.style.display = 'none';
  }

  document.addEventListener('DOMContentLoaded', function () {
    @if(session('show_telegram_popup'))
      if (isDashboardPage()) {
        openTelegramPopup();
      }
    @endif
  });
</script>
