/* Add custom Js code below */
const createHeaderSearch = () => {
  const SearchDiv = document.createElement("div");
  SearchDiv.innerHTML = `
      <div style="margin-right:10px" class="search">
      <button class="header-btn flex w-6" onclick="salla.event.dispatch('search::open')">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M18 17.5L22.5 22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.5 11C20.5 6.02944 16.4706 2 11.5 2C6.52944 2 2.5 6.02944 2.5 11C2.5 15.9706 6.52944 20 11.5 20C16.4706 20 20.5 15.9706 20.5 11Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
      </button>
    </div>`;
  return SearchDiv;
};

const createAccordion = (data, parent, head = true, order = "before") => {
  if (!data || !Array.isArray(data) || data.length === 0) return;

  const section = document.createElement("section");
  section.className = "accordion-section";

  if (head) {
    const heading = document.createElement("div");
    heading.innerHTML = `<h2 class="section-title">أهم الاسئلة</h2><p class="section-sub">قد تدور ببالك أحد هذه الأسئلة فيمكنك أن تطلع عليها</p>`;
    section.append(heading);
  }

  const accorCon = document.createElement("div");
  accorCon.className = "accordion";

  data.forEach(({ title, content }) => {
    const button = document.createElement("button");
    button.className = "accordion-button";
    button.innerHTML = `<span class="accor-title">${title}</span> <span class="icon"></span>`;

    const contentDiv = document.createElement("div");
    contentDiv.className = "accordion-content";
    typeof content === "string" && content.includes("<")
      ? (contentDiv.innerHTML = content)
      : (contentDiv.innerHTML = `<p>${content}</p>`);

    button.addEventListener("click", () => {
      const isActive = button.classList.toggle("active");
      contentDiv.style.maxHeight = isActive
        ? `${contentDiv.scrollHeight}px`
        : null;
    });

    accorCon.append(button, contentDiv);
  });

  section.append(accorCon);
  order === "before" ? parent.before(section) : parent.after(section);
};

const questions = [
  {
    title: "هل تقدمون مجموعة متنوعة من المنتجات ؟",
    content:
      "نعم، نقدم تشكيلة واسعة من المنتجات وخامات دروع متنوعة تناسب جميع الأذواق.",
  },

  {
    title: "كيف يتم توصيل الطلبات؟",
    content:
      "نستخدم شركات شحن موثوقة لضمان وصول الطلبات بسرعة وأمان إلى موقعك.",
  },
  {
    title: "ماذا أفعل إذا واجهت مشكلة في الطلب؟",
    content: "لأي مشكلة في الطلب، تواصل مع فريق الدعم وسنساعدك لحلها بسرعة.",
  },
];

document.addEventListener("DOMContentLoaded", () => {
  const parent = document.querySelector("header a.mburger.mburger--collapse");
  if (parent) {
    parent.after(createHeaderSearch());
  }
  const accorParent = document.querySelector(".index footer");
  if (accorParent) {
    createAccordion(questions, accorParent);
  }

  const proForm = document.querySelector(".product-single form.product-form");
  if (proForm) {
    const proDes = document.querySelector(
      ".product-single .product__description article"
    );
    const validData = [
      { title: "وصف المنتج", content: proDes ? proDes.innerHTML : "" },
      {
        title: "التوصيل والشحن",
        content:
          "<p>لمعرفة تفاصيل التوصيل والشحن <a href='https://awards.sa/ar/سياسة-الشحن-و-التوصيل/page-1745326101' class='click'>اضغط هنا</a></p>",
      },
      {
        title: "الاستبدال والاسترجاع",
        content:
          "<p>لمعرفة تفاصيل الاستبدال والاسترجاع <a href='https://awards.sa/ar/سياسة-الاستبدال-و-الاسترجاع/page-507080980' class='click'>اضغط هنا</a></p>",
      },
    ];
    createAccordion(validData, proForm, false, (order = "after"));
    proDes.remove();
  }
});

// Add WhatsIcon by js
function addWhatsIcon() {
  const number = "966551605960";
  const msg = window ? window.location.href : "";
  const body = document.body;
  const whatsDiv = document.createElement("div");
  whatsDiv.classList.add("WhatsupIconFixed");

  whatsDiv.innerHTML = `<div class="whatsapp--icon">
    <a href="https://wa.me/${number}?text=${msg}" target="_blank" rel="noopener" style="display: none;">
    </a>
    </div>`;
  body.appendChild(whatsDiv);
}

window.addEventListener("load", () => {
  addWhatsIcon();
});