/* ===== Salla Raed-compatible side menu (no HTML required) ===== */
document.addEventListener('DOMContentLoaded', function () {
  // لا ننفذ مرتين لو السكربت سبق ووُضع
  if (document.getElementById('customMenuBtn')) return;

  // محاولة إيجاد الهيدر الصحيح
  const header = document.querySelector('#mainnav, .main-nav-container, .header, header, .site-header');

  // لو ما لاقيناش الهيدر، نضيف الزر في body كحل احتياطي
  const insertTargets = [
    header && header.querySelector('.flex.items-center'),
    header && header.querySelector('.flex.items-stretch'),
    header && header.querySelector('.container'),
    header,
    document.querySelector('.navbar-brand'),
    document.body
  ];
  let insertTarget = null;
  for (let el of insertTargets) {
    if (el) { insertTarget = el; break; }
  }
  if (!insertTarget) insertTarget = document.body;

  // زر القائمة
  const btn = document.createElement('button');
  btn.id = 'customMenuBtn';
  btn.type = 'button';
  btn.setAttribute('aria-expanded', 'false');
  btn.setAttribute('aria-label', 'فتح القائمة');
  btn.innerHTML = '<span class="menu-icon">☰</span>';

// نضيف الزر بعد الشعار (navbar-brand)
const brand = document.querySelector('#mainnav .navbar-brand, .navbar-brand');
if (brand && brand.parentNode) {
  brand.parentNode.insertBefore(btn, brand);
} else {
  insertTarget.prepend(btn);
}

  // عنصر الـ overlay
  const overlay = document.createElement('div');
  overlay.className = 'custom-menu-overlay';
  overlay.id = 'customMenuOverlay';
  document.body.appendChild(overlay);

  // نحاول سحب شعار الهيدر إن وجد
  let logoSrc = '';
  const logoImg = document.querySelector('#mainnav .navbar-brand img, .navbar-brand img, #mainnav img, header img');
  if (logoImg && logoImg.src) {
    logoSrc = logoImg.src;
  } else {
    // placeholder لو مفيش لوجو
    logoSrc = 'https://via.placeholder.com/260x80?text=Logo';
  }

  // نحاول استخراج الروابط من القائمة المحمولة الأصلية (#mobile-menu) لو موجودة
  function buildLinksFromSource() {
    const srcUL = document.querySelector('#mobile-menu ul, #mobile-menu .main-menu, .mobile-menu ul, .main-menu');
    if (!srcUL) return null;
    let html = '';
    // ناخد كل روابط <a> داخل الـ srcUL
    const anchors = srcUL.querySelectorAll('a');
    anchors.forEach(a => {
      const href = a.getAttribute('href') || '#';
      const text = (a.textContent || a.innerText || '').trim();
      if (text) {
        html += `<li><a href="${href}">${text}</a></li>`;
      }
    });
    return html || null;
  }

  const extractedLinks = buildLinksFromSource();

  // لو ما فيش روابط مُستخرجة، نعرض روابط افتراضية (عدلها حسب متجرك)


  // بناء القائمة الجانبية (ننشئها ديناميكياً)
  const sideMenu = document.createElement('aside');
  sideMenu.id = 'customSideMenu';
  sideMenu.className = 'custom-side-menu';
  sideMenu.setAttribute('aria-hidden', 'true');
  sideMenu.innerHTML = `
    <button class="custom-close-btn" id="customCloseBtn" aria-label="إغلاق القائمة">✖</button>
    <div class="custom-logo">
      <a href="/">
        <img src="${logoSrc}" alt="logo">
      </a>
    </div>
    <ul class="custom-menu-links">
      ${extractedLinks || fallbackLinks}
    </ul>
  `;
  document.body.appendChild(sideMenu);

  // عمليات فتح / غلق
  const closeBtn = document.getElementById('customCloseBtn');
  const menu = document.getElementById('customSideMenu');

  function openMenu() {
    menu.classList.add('active');
    overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
    btn.style.display = 'none';                 // اخفاء الزر
    menu.setAttribute('aria-hidden', 'false');
    btn.setAttribute('aria-expanded', 'true');
  }

  function closeMenu() {
    menu.classList.remove('active');
    overlay.classList.remove('active');
    document.body.style.overflow = '';
    btn.style.display = '';                     // اظهار الزر (يرجع للـ inline)
    menu.setAttribute('aria-hidden', 'true');
    btn.setAttribute('aria-expanded', 'false');
  }

  // حدثات
  btn.addEventListener('click', function (e) {
    e.stopPropagation();
    openMenu();
  });

  closeBtn.addEventListener('click', function (e) {
    e.stopPropagation();
    closeMenu();
  });

  // غلق لو ضغطت على الـ overlay
  overlay.addEventListener('click', function () {
    closeMenu();
  });

  // غلق بالEscape
  document.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape' || ev.key === 'Esc') {
      if (menu.classList.contains('active')) closeMenu();
    }
  });

  // غلق عند الضغط على أي رابط داخل القائمة (وليُعاد اظهار الزر)
  menu.addEventListener('click', function (ev) {
    const a = ev.target.closest('a');
    if (a) {
      // نسمح بالانتقال للرابط ثم نغلق القائمة بعد تأخير صغير
      setTimeout(closeMenu, 150);
    }
  });

});