@push('styles')
<style>
  /* Navbar tetap di atas */
  .navbar, .custom-nav, .navbar.fixed-top { position: relative; z-index: 2000; }

  .custom-nav .navbar-collapse{
    position:relative; z-index:2001; background:#fff;
    padding:.75rem 1rem; max-height:calc(100vh - 72px); overflow-y:auto;
  }

  /* Matikan overlay dekorasi agar tidak intercept klik */
  #particles-js, .waves-bg-img, .waves-bg-img::before, .waves-bg-img::after,
  .home-bg::before, .home-bg::after, .menu-overlay {
    pointer-events:none !important; z-index:0 !important;
  }

  /* MOBILE: dropdown ikut flow, tampil hanya saat .show */
  @media (max-width: 991.98px){
  .custom-nav .dropdown-menu{
    position: static !important;
    display: none !important;
    visibility: hidden; opacity: 0;
    background: transparent !important;
    border: 0 !important; box-shadow:none !important;
    padding:.25rem 0 !important; margin:.25rem 0 .5rem !important;
  }
  .custom-nav .dropdown-menu.show{
    display:block !important; visibility:visible !important; opacity:1 !important;
  }
}

  /* Desktop: biarkan BS5 handle. Variasi warna aktif opsional */
  @media (min-width: 992px){
    .custom-nav .dropdown-menu{
      --bs-dropdown-bg:#fff;
      --bs-dropdown-link-active-bg:#6c63ff;
      --bs-dropdown-link-active-color:#fff;
    }
  }
  
    /* ===== Base: biarkan putih di atas gradient hero ===== */
    .custom-nav .nav-link { color:#fff !important; }
    .custom-nav .nav-link:hover,
    .custom-nav .nav-link:focus { color:#fff !important; }

    /* ===== MOBILE: saat panel collapse terbuka, pakai background putih & teks gelap */
    @media (max-width: 991.98px) {
        .custom-nav .navbar-collapse.show {
        background:#fff !important;
        }
        .custom-nav .navbar-collapse.show .nav-link {
        color:#212529 !important;
        }
        .custom-nav .navbar-collapse.show .nav-link:hover,
        .custom-nav .navbar-collapse.show .nav-link:focus {
        color:#4b35b3 !important;
        }

        /* Matikan bar ungu pada hover/active item saat mobile menu terbuka */
        .custom-nav .navbar-collapse.show .navbar-nav > li > a:hover,
        .custom-nav .navbar-collapse.show .navbar-nav > li.active > a {
        background:transparent !important;
        color:#212529 !important;
        }

        /* Dropdown mobile: tampil normal di atas putih */
        .custom-nav .dropdown-menu {
        position:static !important;
        float:none !important;
        display:none !important;
        visibility:hidden; opacity:0;
        background:transparent !important;
        border:0 !important; box-shadow:none !important;
        padding:.25rem 0 !important; margin:.25rem 0 .5rem !important;
        z-index:2002;
        }
        .custom-nav .dropdown-menu.show {
        display:block !important;
        visibility:visible !important; opacity:1 !important;
        }
        .custom-nav .dropdown-item { color:#212529 !important; }
        .custom-nav .dropdown-item:hover,
        .custom-nav .dropdown-item:focus {
        color:#fff !important; background:#6c63ff !important;
        }
    }

    /* ===== STICKY/SCROLLED (desktop & mobile): navbar jadi putih, teks gelap */
    .custom-nav.sticky,           /* kalau class-mu "sticky" */
    .custom-nav.sticky-header,    /* atau "sticky-header" */
    .custom-nav.header-scrolled,  /* atau "header-scrolled" */
    .custom-nav.navbar.fixed-top.header-scrolled {
        background:#fff !important;
    }
    .custom-nav.sticky .nav-link,
    .custom-nav.sticky-header .nav-link,
    .custom-nav.header-scrolled .nav-link {
        color:#212529 !important;
    }
    .custom-nav.sticky .nav-link:hover,
    .custom-nav.sticky-header .nav-link:hover,
    .custom-nav.header-scrolled .nav-link:hover {
        color:#4b35b3 !important;
    }

    /* Netralisir bar ungu pada hover/active ketika sticky */
    .custom-nav.sticky .navbar-nav > li > a:hover,
    .custom-nav.sticky .navbar-nav > li.active > a,
    .custom-nav.sticky-header .navbar-nav > li > a:hover,
    .custom-nav.sticky-header .navbar-nav > li.active > a,
    .custom-nav.header-scrolled .navbar-nav > li > a:hover,
    .custom-nav.header-scrolled .navbar-nav > li.active > a {
        background:transparent !important;
        color:#212529 !important;
    }

</style>
@endpush


<nav class="navbar navbar-expand-lg fixed-top custom-nav sticky">
  <div class="container">
    <!-- MENU OVERLAY -->
    <div class="menu-overlay"></div>
    <!-- MENU CLOSE ICON -->
    <div class="menu-close-btn"><i class="mdi mdi-close-circle-outline"></i></div>

    <!-- LOGO -->
    <a class="navbar-brand brand-logo me-4" href="{{ url('/') }}">
      <img src="{{ asset('/') }}assets/compiled/png/logo-pt-riau oke2.png"
           style="height:40%;width:40%" class="img-fluid logo-light" alt="Logo PT Riau">
      <img src="{{ asset('/') }}assets/compiled/png/logo-pt-riau oke2.png"
           class="img-fluid logo-dark" alt="Logo PT Riau">
    </a>

    <!-- Toggler -->
    <div class="contact_btn">
      <button class="navbar-toggler ms-2 p-0" type="button"
              data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
              aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <i class="mdi mdi-menu"></i>
      </button>
    </div>

    <!-- Menu -->
    <div class="collapse navbar-collapse justify-content-center" id="navbarCollapse">
      <ul class="navbar-nav navbar-center" id="mySidenav">
        <li class="nav-item active">
          <a href="{{ route('buku-tamu') }}" class="nav-link {{ request()->routeIs('/') ? 'active' : '' }}">Beranda</a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="ddProfil" role="button"
             data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Profil
          </a>
          <div class="dropdown-menu" aria-labelledby="ddProfil">
            <a class="dropdown-item" href="{{ url('/#profil-singkat') }}">Profil PPID</a>
            <a class="dropdown-item" href="{{ url('/#tugas-fungsi') }}">Tugas dan Fungsi PPID</a>
            <a class="dropdown-item" href="{{ url('/#struktur') }}">Struktur Organisasi</a>
            <a class="dropdown-item" href="{{ url('/#visi-misi') }}">Visi dan Misi</a>
          </div>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="ddRegulasi" role="button"
             data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Regulasi
          </a>
          <div class="dropdown-menu" aria-labelledby="ddRegulasi">
            <a class="dropdown-item" href="https://jdih.mahkamahagung.go.id/dokumen?pengadilan=439">Kebijakan PT Riau</a>
            <a class="dropdown-item" href="https://jdih.mahkamahagung.go.id/">Kebijakan Mahkamah Agung</a>
          </div>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="ddInformasiPublik" role="button"
             data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Informasi Publik
          </a>
          <div class="dropdown-menu" aria-labelledby="ddInformasiPublik">
            <a class="dropdown-item" href="{{ url('/#informasi-berkala') }}">Informasi Berkala</a>
            <a class="dropdown-item" href="{{ url('/#informasi-serta-merta') }}">Informasi Serta Merta</a>
            <a class="dropdown-item" href="{{ url('/#informasi-setiap-saat') }}">Informasi Tersedia Setiap Saat</a>
            <a class="dropdown-item" href="{{ route('dip') }}">Daftar Informasi Publik</a>
            <a class="dropdown-item" href="#">Video Informasi Publik</a>
          </div>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="ddStandar" role="button"
             data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Standar Layanan
          </a>
          <div class="dropdown-menu" aria-labelledby="ddStandar">
            <a class="dropdown-item" href="{{ route('maklumat') }}">Maklumat Pelayanan</a>
            <a class="dropdown-item" href="{{ route('standar-pelayanan') }}">Standar Pelayanan</a>
            <a class="dropdown-item" href="{{ route('jenis-layanan') }}">Jenis Layanan</a>
            <a class="dropdown-item" href="{{ route('persyaratan') }}">Persyaratan Permohonan Informasi</a>
            <a class="dropdown-item" href="{{ route('prosedur') }}">Prosedur Permohonan Informasi</a>
            <a class="dropdown-item" href="{{ route('biaya') }}">Biaya Layanan</a>
            <a class="dropdown-item" href="{{ route('prosedur-keberatan') }}">Prosedur Pengajuan Keberatan</a>
            <a class="dropdown-item" href="{{ route('prosedur-sengketa') }}">Prosedur Sengketa Informasi</a>
            <a class="dropdown-item" href="{{ route('jam-layanan') }}">Jalur dan Waktu layanan</a>
          </div>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="ddPermohonan" role="button"
             data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Permohonan Informasi
          </a>
          <div class="dropdown-menu" aria-labelledby="ddPermohonan">
            <a class="dropdown-item {{ request()->routeIs('form-khusus') ? 'active' : '' }}"
               href="{{ route('form-khusus') }}">Pengajuan Informasi Secara Elektronik</a>
            <a class="dropdown-item"
               href="https://docs.google.com/document/d/193lGgTis3Vs4t6xFI9-PiH5TsfRyRnpJS0fGio1sI7U/edit?usp=sharing">
               Formulir Keberatan
            </a>
          </div>
        </li>

        <li class="nav-item">
          <a href="{{ route('laporan-landing') }}"
                        class="nav-link {{ request()->routeIs('laporan-landing') ? 'active' : '' }}">Laporan</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

@push('scripts')
<script>
(function () {
  /* ---- 0) Cabut handler jQuery lama yang nembak href# & navbar ---- */
  if (window.jQuery) {
    try {
      $('a[href^="#"]').off('click');
      $(document).off('click', 'a[href^="#"]');
      $('.navbar-nav a').off('click');
      $(document).off('click', '.navbar-nav a');
      $('.navbar .dropdown > a').off('click');
      $(document).off('click', '.navbar .dropdown > a');
    } catch(e){}
  }

  /* ---- 1) Hindari error Sizzle: blokir href="#" (kecuali toggle dropdown) ---- */
  document.addEventListener('click', function (e) {
    const a = e.target.closest('a');
    if (!a) return;
    const href = (a.getAttribute('href') || '').trim();
    if ((href === '#' || href === '') &&
        !a.matches('[data-bs-toggle="dropdown"], .dropdown-toggle')) {
      e.preventDefault();
      e.stopPropagation();
    }
  }, true);

  /* ---- 2) Dropdown mobile = accordion; desktop pakai default BS5 ---- */
  const isMobile = () => window.innerWidth < 992;

  document.querySelectorAll('.custom-nav .dropdown-toggle').forEach(function (tg) {
    // pastikan opsi tidak auto-close dalam navbar
    tg.setAttribute('data-bs-display', 'static');
    tg.setAttribute('data-bs-auto-close', 'outside');

    // manual toggle khusus mobile, supaya tidak bentrok handler lama
    tg.addEventListener('click', function (ev) {
      if (!isMobile()) return;            // desktop: biarkan BS handle
      ev.preventDefault();
      ev.stopPropagation();

      // toggle via BS API
      const dd = bootstrap.Dropdown.getOrCreateInstance(tg);
      dd.toggle();

      // force class .show agar CSS lama yang pakai display:none tunduk
      const li   = tg.closest('.dropdown');
      const menu = li ? li.querySelector('.dropdown-menu') : null;
      if (li)   li.classList.toggle('show',   !!menu && menu.classList.contains('show'));
      if (menu) menu.classList.toggle('show'); // selaraskan bila tema tidak menambahkannya
      tg.setAttribute('aria-expanded', menu && menu.classList.contains('show') ? 'true' : 'false');
    }, true);
  });

  /* ---- 3) Klik dalam dropdown (mobile) jangan menutup apa pun ---- */
  document.querySelectorAll('.custom-nav .dropdown-menu').forEach(function (m) {
    m.addEventListener('click', function (ev) {
      if (!isMobile()) return;
      ev.stopPropagation();
    }, true);
  });

  /* ---- 4) Tutup collapse HANYA saat klik link biasa (bukan dropdown) ---- */
  const collapseEl = document.getElementById('navbarCollapse');
  if (collapseEl) {
    collapseEl.addEventListener('click', function (ev) {
      const a = ev.target.closest('.nav-link');
      if (!a) return;
      if (a.classList.contains('dropdown-toggle') || a.closest('.dropdown-menu')) return;
      bootstrap.Collapse.getOrCreateInstance(collapseEl).hide();
    });

    // Jangan izinkan collapse menutup saat ada dropdown yang sedang .show
    collapseEl.addEventListener('hide.bs.collapse', function (e) {
      if (document.querySelector('.custom-nav .dropdown-menu.show')) {
        e.preventDefault();
      }
    });
  }

  /* ---- 5) Smooth scroll aman hanya untuk .scrollto dg target nyata ---- */
  document.addEventListener('click', function (e) {
    const link = e.target.closest('a.scrollto[href^="#"]:not([href="#"])');
    if (!link) return;
    const target = document.querySelector(link.getAttribute('href'));
    if (!target) return;
    e.preventDefault();
    if (collapseEl && collapseEl.classList.contains('show')) {
      bootstrap.Collapse.getOrCreateInstance(collapseEl).hide();
    }
    target.scrollIntoView({behavior:'smooth', block:'start'});
  });
})();
</script>
@endpush