/* Add custom JS code below */ 
document.addEventListener("DOMContentLoaded", () => {
    const title = document.querySelector(
        '[data-testid="store-home-fixed-products"] .s-block__title'
    );

    if (!title || title.querySelector(".view-all-link")) return;

    title.style.display = "flex";
    title.style.justifyContent = "space-between";
    title.style.alignItems = "center";

    const link = document.createElement("a");
    link.href = "https://hajardelights.com/latest-products";
    link.className = "view-all-link";
    link.innerHTML = `
            <span>عرض الكل</span>
        <span class="arrow">←</span>
    `;

    title.appendChild(link);
});

document.addEventListener("DOMContentLoaded", function () {
    const firstDiv = document.querySelector("footer .grid > div:first-child h3");

    if (firstDiv) {
        const link = document.createElement("a");
        link.href = "https://beez.com.sa/";
        link.textContent = "تتبع شحنتك";
        link.style.display="block"

        firstDiv.insertAdjacentElement("afterend", link);
    }
});
function sendToWhatsapp() {
    const phoneNumber = "966569831409"; 
    
    // Get values from input fields
    const fname = document.getElementById('fname').value;
    const lname = document.getElementById('lname').value;
    const company = document.getElementById('company').value;
    const email = document.getElementById('email').value;
    const phone = document.getElementById('phone').value;
    const message = document.getElementById('message').value;

    // Check for required fields (basic validation)
    if(!fname || !lname || !email || !message) {
        alert("يرجى ملء جميع الحقول المطلوبة");
        return;
    }

    // Construct the encoded text message
    const text = "طلب هدايا شركات جديد:" + "%0a" +
                 "*الاسم:* " + fname + " " + lname + "%0a" +
                 "*الشركة:* " + (company || "غير محدد") + "%0a" +
                 "*الايميل:* " + email + "%0a" +
                 "*الجوال:* " + (phone || "غير محدد") + "%0a" +
                 "*الطلب:* " + message;

    // Build the URL and redirect
    const whatsappUrl = `https://wa.me/${phoneNumber}?text=${text}`;
    window.open(whatsappUrl, '_blank').focus();
}

/**
 * 1. UI ENHANCEMENT LOGIC
 */
const appUIEnhancements = {
  // Replace the specific User Menu SVG with a clean icon
  replaceUserMenuIcon: () => {
    const userButton = document.querySelector('#mainnav salla-user-menu button');
    if (userButton && !userButton.classList.contains('icon-replaced')) {
      // Using a standard Salla icon class for consistency
      userButton.innerHTML = '<i class="sicon-user-circle" style="font-size: 1.6rem;"></i>';
      userButton.classList.add('icon-replaced');
    }
  },

  // Replace Avatar image with Icon (if applicable)
  replaceAvatar: () => {
    const img = document.querySelector(".s-user-menu-trigger-avatar");
    if (img) {
      const icon = document.createElement("i");
      icon.className = "header-btn__icon sicon-user-circle";
      img.replaceWith(icon);
    }
  },

  // Inject WhatsApp into ALL social lists found on the page
  injectWhatsApp: () => {
    const socialLists = document.querySelectorAll('salla-social ul, .s-social-list');
    socialLists.forEach((list) => {
      if (list.querySelector('.wa-added')) return;

      const li = document.createElement('li');
      li.className = 's-social-link wa-added';
      li.innerHTML = `
        <a href="https://wa.me/966569831409?utm_source=salla_app_whatsapp_button" 
           target="_blank" rel="noopener" aria-label="whatsapp">
          <span class="s-social-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
              <path d="M16.003 3c-7.179 0-13 5.821-13 13 0 2.292.602 4.442 1.65 6.307L3 29l6.87-1.603A12.94 12.94 0 0 0 16.003 29c7.179 0 13-5.821 13-13s-5.821-13-13-13zm0 23.5c-1.97 0-3.79-.54-5.37-1.47l-.38-.22-4.08.95.87-3.97-.25-.4A10.45 10.45 0 0 1 5.5 16c0-5.79 4.71-10.5 10.5-10.5S26.5 10.21 26.5 16 21.79 26.5 16 26.5zm5.73-7.97c-.31-.15-1.83-.9-2.11-1s-.49-.15-.7.15-.8 1-1 1.21-.38.23-.69.08c-.31-.15-1.31-.48-2.49-1.53-.92-.82-1.54-1.83-1.72-2.14s-.02-.48.13-.63c.13-.13.31-.33.46-.5.15-.17.2-.29.31-.48.1-.19.05-.36-.02-.5-.08-.15-.7-1.69-.96-2.31-.25-.6-.5-.52-.7-.53h-.6c-.2 0-.5.08-.76.36s-1 1-.98 2.45c.02 1.44 1.03 2.83 1.18 3.03.15.19 2.03 3.1 4.93 4.34.69.3 1.23.48 1.65.61.69.22 1.31.19 1.8.12.55-.08 1.83-.75 2.09-1.47.26-.73.26-1.35.18-1.47-.08-.12-.28-.19-.59-.34z" fill="currentColor"/>
            </svg>
          </span>
        </a>`;
      list.appendChild(li);
    });
  }
};

/**
 * 2. LIVE OBSERVER
 * Keeps the icons working even if the user navigates or content loads late
 */
const appObserver = new MutationObserver(() => {
  appUIEnhancements.replaceUserMenuIcon();
  appUIEnhancements.replaceAvatar();
  appUIEnhancements.injectWhatsApp();
});

document.addEventListener("DOMContentLoaded", () => {
  appUIEnhancements.replaceUserMenuIcon();
  appUIEnhancements.replaceAvatar();
  appUIEnhancements.injectWhatsApp();
  appObserver.observe(document.body, { childList: true, subtree: true });
});

/**
 * 3. CONTACT PAGE LOGIC (Map & GTM)
 */
if (window.location.pathname.includes("page-1531589519")) {
  // Load FontAwesome for extra icons if needed
  if (!document.querySelector('link[href*="font-awesome"]')) {
    const fa = document.createElement("link");
    fa.rel = "stylesheet";
    fa.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css";
    document.head.appendChild(fa);
  }

  // Google Tag Manager
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-N36BWD87');

  // Map Iframe injection
  const footer = document.querySelector("footer");
  if (footer && !document.querySelector('.custom-contact-map')) {
    const mapIframe = document.createElement("iframe");
    mapIframe.className = "custom-contact-map";
    mapIframe.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3571.647274227378!2d50.04491577522299!3d26.46709647909906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e49e34e7c20892f%3A0x47ea5b165fdb8acb!2zSGFqYXIgRGVsaWdodHMgLSBEYXRlIENob2NvbGF0ZSB8INmH2KzYsSDYr9mK2YTYp9mK2KrYsyAtINi02YjZg9mI2YTYp9iq2Kkg2KjYp9mE2KrZhdix!5e0!3m2!1sen!2sus!4v1776321531352!5m2!1sen!2sus";
    mapIframe.height = "450";
    mapIframe.width = "100%";
    mapIframe.style.border = "0";
    mapIframe.style.marginTop = "3rem";
    mapIframe.allowFullscreen = true;
    mapIframe.loading = "lazy";
    mapIframe.referrerPolicy = "no-referrer-when-downgrade";
    footer.parentNode.insertBefore(mapIframe, footer);
  }
}

/**
 * 4. SALLA SEARCH BUTTON
 */
salla.onReady(() => {
  const targetDiv = document.querySelector('.inner > .container > .flex > .flex + .flex');
  if (targetDiv && !document.querySelector('.header-search-btn')) {
    const searchBtn = document.createElement('button');
    searchBtn.className = 'aspect-square header-search-btn';
    searchBtn.type = 'button';
    searchBtn.onclick = () => salla.event.dispatch('search::open');
    searchBtn.innerHTML = `
      <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" style="width:24px; height:24px;">
        <path d="M20 20L28 28M13.3333 22.6667C8.17868 22.6667 4 18.488 4 13.3333C4 8.17868 8.17868 4 13.3333 4C18.488 4 22.6667 8.17868 22.6667 13.3333C22.6667 18.488 18.488 22.6667 13.3333 22.6667Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`;
    targetDiv.appendChild(searchBtn); 
  }
});

(function () {
    const STORAGE_KEY = "hajr-loader-shown";
    const LOGO = "https://cdn.files.salla.network/theme/632614970/8450ea84-500f-4610-a65f-4e0deadf8503.webp";

    // Don't show again if it has already been displayed this session
    if (sessionStorage.getItem(STORAGE_KEY)) return;

    sessionStorage.setItem(STORAGE_KEY, "true");

    function createLoader() {
        if (document.getElementById("hajr-loader")) return;

        const loader = document.createElement("div");
        loader.id = "hajr-loader";

        loader.innerHTML = `
            <img src="${LOGO}" alt="Loading">
        `;

        document.body.prepend(loader);

        const hide = () => {
            loader.classList.add("hide");

            setTimeout(() => {
                loader.remove();
            }, 700);
        };

        if (document.readyState === "complete") {
            setTimeout(hide, 500);
        } else {
            window.addEventListener(
                "load",
                () => setTimeout(hide, 500),
                { once: true }
            );
        }
    }

    if (document.body) {
        createLoader();
    } else {
        document.addEventListener("DOMContentLoaded", createLoader, { once: true });
    }
})();


salla.onReady(() => {
  const copyright = document.querySelector("footer .copyright-text a");

  if (copyright) {
    copyright.textContent = "شركة تراليز";
  }
});