<?php if ($func->cekLogin() == true) { ?>
  <div class="text-center">
    <?php
    $profil = $func->getProfil(session()->get('usrid'), "semua", "usrid");
    $user = $func->getUser(session()->get('usrid'), "semua");
    ?>

<!-- ================= TOPBAR SAAT LOGIN================= -->
<div class="topbar">
  <div class="topbar-inner">
    <div class="brand" aria-label="Purnama Mart">
      <?php
if (!isset($logoIcon) || empty($logoIcon)) {
  $set = $func->globalset("semua");
  $logoFile = !empty($set->logo) ? trim($set->logo) : trim($set->favicon);
  $logoIcon = base_url('admin/assets/img/' . rawurlencode($logoFile));
}
?>
<a href="<?= base_url() ?>">
<img
  src="<?= $logoIcon ?>"
  alt="Purnama Mart"
  loading="eager"
  decoding="async"
  onerror="this.onerror=null;this.src='<?= base_url('assets/img/logo.png') ?>';"
/></a>

    </div>

    <!-- SEARCH (CI GET) -->
<form action="<?= site_url('shop') ?>" method="get" class="topbar-search" role="search">
  <input type="hidden"
         name="<?= csrf_token(); ?>"
         value="<?= csrf_hash(); ?>">

  <span class="topbar-search__icon" aria-hidden="true">🔍</span>

  <input
    type="text"
    name="cari"
    id="q"
    class="topbar-search__input"
    value="<?= isset($cari) ? htmlspecialchars($cari, ENT_QUOTES, 'UTF-8') : '' ?>"
    placeholder="Cari layanan: Pulsa, PLN, BPJS..."
    autocomplete="off"
  >

  <button type="submit" class="topbar-search__btn" aria-label="Cari">
    <span class="topbar-search__btnIcon" aria-hidden="true">➜</span>
  </button>
</form>

    <div class="actions">
      <!-- TAMBAHAN MENU USER -->
      <div class="pm-user-menu" style="position: relative; display: inline-block;">
        <button class="pm-user-btn" id="pmUserBtn" aria-label="Menu pengguna" style="background: var(--menu-bg, #f8f9fa); border: 1px solid var(--menu-border, #dee2e6); border-radius: 20px; padding: 8px 15px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--menu-text, #212529); font-size: 14px; transition: all 0.2s ease; text-decoration: none; outline: none; border: none;">
          <span class="pm-user-icon">👤</span>
          <span class="pm-user-arrow">▼</span>
        </button>

        <div class="pm-user-dropdown" id="pmUserDropdown" style="position: absolute; top: 100%; right: 0; width: 260px; background: var(--menu-dropdown-bg, #ffffff); border: 1px solid var(--menu-dropdown-border, #dee2e6); border-radius: 8px; box-shadow: 0 4px 12px var(--menu-shadow, rgba(0,0,0,0.1)); padding: 12px 0; display: none; z-index: 1000; margin-top: 8px;">
          <div class="pm-user-header" style="display: flex; align-items: center; padding: 0 16px 10px; gap: 12px;">
            <span class="pm-user-avatar" style="font-size: 22px; background: var(--avatar-bg, #007bff); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">👤</span>
            <div class="pm-user-details" style="display: flex; flex-direction: column; overflow: hidden;">
              <span class="pm-user-name" style="font-weight: 600; color: var(--menu-text, #212529); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                <?= isset($profil->nama) ? htmlspecialchars($profil->nama, ENT_QUOTES, 'UTF-8') :
                   (isset($user->username) ? htmlspecialchars($user->username, ENT_QUOTES, 'UTF-8') : 'Pengguna') ?>
              </span>
              <span class="pm-user-email" style="color: var(--menu-text-secondary, #6c757d); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                <?= isset($user->email) ? htmlspecialchars($user->email, ENT_QUOTES, 'UTF-8') : '' ?>
              </span>
            </div>
          </div>

          <div class="pm-user-divider" style="height: 1px; background: var(--menu-divider, #e9ecef); margin: 8px 0;"></div>

          <a href="<?= site_url('manage') ?>" class="pm-user-item" style="display: flex; align-items: center; padding: 10px 16px; gap: 12px; color: var(--menu-text, #212529); transition: all 0.2s ease; cursor: pointer; text-decoration: none; width: 100%; text-align: left; font-size: 13px;">
            <span class="pm-user-item-icon" style="font-size: 15px; width: 20px; text-align: center; flex-shrink: 0;">👤</span>
            <span class="pm-user-item-text" style="flex: 1;">Profil</span>
          </a>

          <a href="<?= site_url('manage/historidigital') ?>" class="pm-user-item" style="display: flex; align-items: center; padding: 10px 16px; gap: 12px; color: var(--menu-text, #212529); transition: all 0.2s ease; cursor: pointer; text-decoration: none; width: 100%; text-align: left; font-size: 13px;">
            <span class="pm-user-item-icon" style="font-size: 15px; width: 20px; text-align: center; flex-shrink: 0;">💳</span>
            <span class="pm-user-item-text" style="flex: 1;">Transaksi</span>
          </a>

          <a href="<?= site_url('manage') ?>" class="pm-user-item" style="display: flex; align-items: center; padding: 10px 16px; gap: 12px; color: var(--menu-text, #212529); transition: all 0.2s ease; cursor: pointer; text-decoration: none; width: 100%; text-align: left; font-size: 13px;">
            <span class="pm-user-item-icon" style="font-size: 15px; width: 20px; text-align: center; flex-shrink: 0;">⚙️</span>
            <span class="pm-user-item-text" style="flex: 1;">Pengaturan</span>
          </a>

          <div class="pm-user-divider" style="height: 1px; background: var(--menu-divider, #e9ecef); margin: 8px 0;"></div>

          <button type="button" class="pm-user-item pm-user-logout" style="display: flex; align-items: center; padding: 10px 16px; gap: 12px; color: var(--menu-logout-text, #dc3545); transition: all 0.2s ease; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-size: 13px; text-decoration: none;" onclick="document.getElementById('btnLogout').click();">
            <span class="pm-user-item-icon" style="font-size: 15px; width: 20px; text-align: center; flex-shrink: 0;">🔒</span>
            <span class="pm-user-item-text" style="flex: 1;">Keluar</span>
          </button>
        </div>
      </div>

      <!-- TOMBOL LOGOUT ASLI (TETAP ADA TAPI DISEMBUNYIKAN) -->
      <button type="button" id="btnLogout" class="btn-login" style="display: none;">
        <span class="ic">🔒</span>
        <span>Keluar</span>
      </button>

      <button class="toggle" id="themeToggle" type="button" aria-label="Toggle theme">🌙</button>
    </div>
  </div>
</div>

<script>
// Script untuk menu user TANPA mengganggu fungsi lain
document.addEventListener('DOMContentLoaded', function() {
  // Toggle menu user
  const pmUserBtn = document.getElementById('pmUserBtn');
  const pmUserDropdown = document.getElementById('pmUserDropdown');

  if (pmUserBtn && pmUserDropdown) {
    pmUserBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      pmUserDropdown.style.display = pmUserDropdown.style.display === 'block' ? 'none' : 'block';
    });

    // Tutup menu saat klik di luar
    document.addEventListener('click', function(e) {
      if (pmUserDropdown.style.display === 'block') {
        if (!pmUserBtn.contains(e.target) && !pmUserDropdown.contains(e.target)) {
          pmUserDropdown.style.display = 'none';
        }
      }
    });
  }

  // Pastikan tombol logout asli ada
  const originalLogoutBtn = document.querySelector('#btnLogout.btn-login');
  if (!originalLogoutBtn) {
    // Jika tidak ada, buat tombol logout asli
    const logoutBtn = document.createElement('button');
    logoutBtn.id = 'btnLogout';
    logoutBtn.className = 'btn-login';
    logoutBtn.style.display = 'none';
    logoutBtn.innerHTML = '<span class="ic">🔒</span><span>Keluar</span>';
    document.querySelector('.actions').appendChild(logoutBtn);
  }
});
</script>

<style>
/* Style untuk tema dark */
[data-theme="dark"] .pm-user-btn {
  --menu-bg: #2d3748;
  --menu-border: #4a5568;
  --menu-text: #e2e8f0;
}

[data-theme="dark"] .pm-user-dropdown {
  --menu-dropdown-bg: #2d3748;
  --menu-dropdown-border: #4a5568;
  --menu-shadow: rgba(0,0,0,0.3);
  --menu-text: #e2e8f0;
  --menu-text-secondary: #a0aec0;
  --menu-divider: #4a5568;
  --menu-logout-text: #fc8181;
  --avatar-bg: #4299e1;
}

.pm-user-item:hover {
  background: var(--menu-item-hover-bg, #f8f9fa);
}

[data-theme="dark"] .pm-user-item:hover {
  background: var(--menu-item-hover-bg, #4a5568);
}

.pm-user-logout:hover {
  background: var(--menu-logout-hover-bg, #f8d7da);
}

[data-theme="dark"] .pm-user-logout:hover {
  background: var(--menu-logout-hover-bg, #742a2a);
}

/* Cegah dropdown akun terpotong/keluar layar di mobile */
@media (max-width: 520px){
  .pm-user-dropdown{
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
  }
}
</style>

<?php } else { ?>
<!-- ================= TOPBAR BELUM LOGIN ================= -->
<div class="topbar">
  <div class="topbar-inner">
    <div class="brand" aria-label="Purnama Mart">
      <?php
if (!isset($logoIcon) || empty($logoIcon)) {
  $set = $func->globalset("semua");
  $logoFile = !empty($set->logo) ? trim($set->logo) : trim($set->favicon);
  $logoIcon = base_url('admin/assets/img/' . rawurlencode($logoFile));
}
?>
<a href="<?= base_url() ?>">
<img
  src="<?= $logoIcon ?>"
  alt="Purnama Mart"
  loading="eager"
  decoding="async"
  onerror="this.onerror=null;this.src='<?= base_url('assets/img/logo.png') ?>';"
/></a>

    </div>

   <!-- SEARCH (CI GET) -->
<form action="<?= site_url('shop') ?>" method="get" class="topbar-search" role="search">
  <input type="hidden"
         name="<?= csrf_token(); ?>"
         value="<?= csrf_hash(); ?>">

  <span class="topbar-search__icon" aria-hidden="true">🔍</span>

  <input
    type="text"
    name="cari"
    id="q"
    class="topbar-search__input"
    value="<?= isset($cari) ? htmlspecialchars($cari, ENT_QUOTES, 'UTF-8') : '' ?>"
    placeholder="Cari layanan: Pulsa, PLN, BPJS..."
    autocomplete="off"
  >

  <button type="submit" class="topbar-search__btn" aria-label="Cari">
    <span class="topbar-search__btnIcon" aria-hidden="true">➜</span>
  </button>
</form>


    <div class="actions">
      <button type="button" id="btnLogin" class="btn-login-oval">
        🔒 Login
      </button>

      <button class="toggle" id="themeToggle" type="button" aria-label="Toggle theme">🌙</button>
    </div>
  </div>
</div>
<?php } ?>
