/* Add custom Js styles below */

/**
 * Initialize and rebuild page layout with breadcrumbs and title
 */
function initializePageLayout() {
  const triggerSection = document.querySelector(
    ".single-page-opt, .returnp-section"
  );
  if (!triggerSection) return;

  const container = findContainerByClass(triggerSection, "container");
  if (!container) return;

  const breadcrumbs = extractBreadcrumbs(container);
  const pageTitle = extractPageTitle(container);
  const pageContentHTML = extractPageContent(container);

  renderPageLayout(container, { breadcrumbs, pageTitle, pageContentHTML });
}

/**
 * Find parent element with specified class
 */
function findContainerByClass(element, className) {
  let current = element;
  while (current && !current.classList.contains(className)) {
    current = current.parentElement;
  }
  return current;
}

/**
 * Extract breadcrumb data from container
 */
function extractBreadcrumbs(container) {
  return [...container.querySelectorAll(".breadcrumbs ol li")]
    .filter((li) => li.innerText.trim() !== "")
    .map((li) => {
      const link = li.querySelector("a");
      return {
        text: (link?.innerText || li.innerText).trim(),
        href: link?.href || null,
      };
    })
    .slice(0, -1); // Remove last item
}

/**
 * Extract page title from h1 element
 */
function extractPageTitle(container) {
  const h1 = container.querySelector("h1");
  return h1?.innerText.trim() || "";
}

/**
 * Extract page content from content-entry element
 */
function extractPageContent(container) {
  const contentEntry = container.querySelector(".content-entry");
  return contentEntry?.innerHTML || "";
}

/**
 * Render new page layout
 */
function renderPageLayout(
  container,
  { breadcrumbs, pageTitle, pageContentHTML }
) {
  const breadcrumbsHtml = breadcrumbs
    .map((b) =>
      b.href ? `<a href="${b.href}">${b.text}</a>` : `<span>${b.text}</span>`
    )
    .join(`<span class="bc-arrow">›</span>`);

  const newHTML = `
    <div class="new-page-wrapper">
      <div class="page-title-wrapper">
        <div class="dynamic-breadcrumbs"></div>
        <h1 class="page-title">${pageTitle}</h1>
      </div>
      <div class="new-page-content">${pageContentHTML}</div>
    </div>
  `;

  container.innerHTML = newHTML;
}

document.addEventListener("DOMContentLoaded", initializePageLayout);

document.addEventListener("DOMContentLoaded", () => {
  const IMAGE_ICONS = [
    "https://cdn.salla.sa/nEmzpb/products/lyqFJGSjBuOUllRq3pHfIYcQWAem9EbZGbzpc78G.png",
    "https://cdn.salla.sa/nEmzpb/products/pU2kybduHQc0sbfAgMW7AZd670Ogx5bQSd5YXMaQ.png",
    "https://cdn.salla.sa/nEmzpb/products/ngV7uuC2fveT3sKFbxMlqaOFpFaupbY3VjD9MJSS.png",
    "https://cdn.salla.sa/nEmzpb/products/YqVQhrBCjgC69hK8uAQQxhb58caaHhVO4XU2LWJY.png",
  ];

  const ICON_SIZE = "88px";
  const ICON_STYLES = {
    width: ICON_SIZE,
    height: ICON_SIZE,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  const IMG_STYLES = {
    width: "auto",
    height: ICON_SIZE,
    objectFit: "contain",
  };

  const items = document.querySelectorAll(".store-analytics .statistics-item");

  items.forEach((item, index) => {
    const box = item.querySelector(":scope > div > div:first-child");
    if (box) box.remove();

    const imgWrapper = document.createElement("div");
    Object.assign(imgWrapper.style, ICON_STYLES);

    const img = document.createElement("img");
    img.src = IMAGE_ICONS[index] || IMAGE_ICONS[0];
    Object.assign(img.style, IMG_STYLES);

    imgWrapper.appendChild(img);

    const parent = item.querySelector(":scope > div");
    parent.insertBefore(imgWrapper, parent.firstChild);
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const certificateSection = document.querySelector(".certificates-section");
  if (!certificateSection) return;

  certificateSection.outerHTML = `
<section class="certificates-section">
  <div class="certificates-container">

    <div class="certificates-header">
      <h2 class="certificates-title">دليل تميزنا في الجودة</h2>
      <p class="certificates-description">
      نُقدّم لك ماءً نقيًا يمر بأعلى معايير الجودة والسلامة...
      </p>
    </div>

    <div class="certificates-grid">

      <!-- Certificate 1 -->
      <div class="certificate-card">
        <div class="certificate-image-container">
          <img class="certificate-image"
            src="https://cdn.files.salla.network/homepage/2047364916/b83b3727-4060-4e6d-9842-e2e021067c3f.webp"
            alt="ISO 22000" loading="lazy"/>
        </div>
        <div class="certificate-content">
          <h3 class="certificate-title">نظام إدارة سلامة الغذاء</h3>
          <p class="certificate-description">من المصدر إلى الشرب – سلامتك مصمّمة بعناية.</p>
          <div class="certificate-meta center-meta">
            <span class="certificate-type">ISO 22000</span>
          </div>
        </div>
      </div>

      <!-- Certificate 2 -->
      <div class="certificate-card">
        <div class="certificate-image-container">
          <img class="certificate-image"
            src="https://cdn.files.salla.network/homepage/2047364916/d0483ce7-6afe-4c55-9332-d8003397413b.webp"
            alt="ISO 9001" loading="lazy"/>
        </div>
        <div class="certificate-content">
          <h3 class="certificate-title">نظام إدارة الجودة</h3>
          <p class="certificate-description">الاتساق ليس صدفة، بل هو نظام.</p>
          <div class="certificate-meta center-meta">
            <span class="certificate-type">ISO 9001</span>
          </div>
        </div>
      </div>

      <!-- Certificate 3 -->
      <div class="certificate-card">
        <div class="certificate-image-container">
          <img class="certificate-image"
            src="https://cdn.files.salla.network/homepage/2047364916/0d1666df-b0d8-4cbb-b5e7-4b47feb91c2c.webp"
            alt="HACCP" loading="lazy"/>
        </div>
        <div class="certificate-content">
          <h3 class="certificate-title">نظام تحليل المخاطر</h3>
          <p class="certificate-description">لا نترك الأمور للصدفة – بل نقضي على المخاطر.</p>
          <div class="certificate-meta center-meta">
            <span class="certificate-type">HACCP</span>
          </div>
        </div>
      </div>

      <!-- Certificate 4 -->
      <div class="certificate-card">
        <div class="certificate-image-container">
          <img class="certificate-image"
            src="https://cdn.files.salla.network/homepage/2047364916/93af0573-72d8-447c-8448-a34253b076ae.webp"
            alt="SASO" loading="lazy"/>
        </div>
        <div class="certificate-content">
          <h3 class="certificate-title">علامة الجودة السعودية</h3>
          <p class="certificate-description">معتمد سعوديًا محل احترام عالميًا</p>
          <div class="certificate-meta center-meta">
            <span class="certificate-type">SASO</span>
          </div>
        </div>
      </div>

      <!-- Certificate 5 -->
      <div class="certificate-card">
        <div class="certificate-image-container">
          <img class="certificate-image"
            src="https://cdn.files.salla.network/homepage/2047364916/624101a3-6c0f-4254-806f-cc1ccc9f0c49.webp"
            alt="SIRI" loading="lazy"/>
        </div>
        <div class="certificate-content">
          <h3 class="certificate-title">مؤشر الجاهزية الصناعية الذكية</h3>
          <p class="certificate-description">مصنع الغد، اليوم.</p>
          <div class="certificate-meta center-meta">
            <span class="certificate-type">SIRI</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>`;
});



document.addEventListener("DOMContentLoaded", function () {
  const productSection = document.getElementById("product-1190564741");
  if (productSection) {
    const fastCheckoutBtn = productSection.querySelector(
      ".s-add-product-button-mini-checkout-content"
    );
    if (fastCheckoutBtn) {
      fastCheckoutBtn.innerHTML = "اطلب عرض سعر";
    }
  }
});




/** add title to custom bottles page */

document.addEventListener("DOMContentLoaded", function () {
  let currentURL = window.location.href;
  if (currentURL.includes("p1190564741")) {
    const nav = document.querySelector(".breadcrumbs");
    const pageTitle = "تميز بتقديم مياه بعلامتك التجارية الخاصة";
    if (nav) {
      nav.innerHTML = `<div class="page-title-wrapper-product">
        <h1 class="page-title">${pageTitle}</h1>
      </div>`;
    }
    const productDesc = document.querySelector("#product-tabs");
    if (productDesc) {
      productDesc.outerHTML = `<section>
  <div class="custom-product-p-container">
    <div class="custom-product-p-cards-grid">
      <div class="custom-product-p-card">
        <img
          src="https://cdn.files.salla.network/homepage/2047364916/d6496ece-8f64-4756-ac07-dd1cb1e56e6f.webp"
          alt="قصتك على كل عبوة"
          class="custom-product-p-card-icon"
        />
        <div class="custom-product-p-card-text-container">
          <h3 class="custom-product-p-card-title">قصتك على كل عبوة</h3>
          <p class="custom-product-p-card-details">
            شعارك وألوانك على عبوات فاخرة سعة 330 مل — تصميم فريد خاص بك، دون أي
            ملصقات عامة.
          </p>
        </div>
      </div>
      <div class="custom-product-p-card">
        <img
          src="https://cdn.files.salla.network/homepage/2047364916/b6fd5592-6432-4fba-aede-ee83ba0fbaed.webp"
          alt="سرعة وسهولة"
          class="custom-product-p-card-icon"
        />
        <div class="custom-product-p-card-text-container">
          <h3 class="custom-product-p-card-title">سرعة وسهولة</h3>
          <p class="custom-product-p-card-details">
            صادق على التصميم اليوم، وشاهد عبوات علامتك في السوق خلال 30 يومًا
            فقط.
          </p>
        </div>
      </div>
      <div class="custom-product-p-card">
        <img
          src="https://cdn.salla.sa/nEmzpb/products/ngV7uuC2fveT3sKFbxMlqaOFpFaupbY3VjD9MJSS.png"
          alt="بدون عناء"
          class="custom-product-p-card-icon"
        />
        <div class="custom-product-p-card-text-container">
          <h3 class="custom-product-p-card-title">بدون عناء</h3>
          <p class="custom-product-p-card-details">
            نحن نتولى كل شيء: التصميم، التغليف، والتوصيل حتى بابك — دون أن ترفع
            إصبعًا.
          </p>
        </div>
      </div>
      <div class="custom-product-p-card">
        <img
          src="https://cdn.files.salla.network/homepage/2047364916/d15c8cf6-29e9-4a6e-8e6b-b566f7e67ec8.webp"
          alt="جودة سعودية فاخرة"
          class="custom-product-p-card-icon"
        />
        <div class="custom-product-p-card-text-container">
          <h3 class="custom-product-p-card-title">
            جودة سعودية فاخرة تتحدث عن نفسها
          </h3>
          <p class="custom-product-p-card-details">
            مطابقة لمعايير الجودة السعودية، مع تنقية ثلاثية بمعايير ألمانية
            وإيطالية لضمان نقاء كل قطرة.
          </p>
        </div>
      </div>
      <div class="custom-product-p-card">
        <img
          src="https://cdn.salla.sa/nEmzpb/products/lyqFJGSjBuOUllRq3pHfIYcQWAem9EbZGbzpc78G.png"
          alt="دع قصة علامتك تنمو"
          class="custom-product-p-card-icon"
        />
        <div class="custom-product-p-card-text-container">
          <h3 class="custom-product-p-card-title">
            دع قصة علامتك تنمو مع كل طلبية
          </h3>
          <p class="custom-product-p-card-details">
            كلما زادت الكمية، زاد توفيرك — يعني تكلفة أقل وقيمة أعلى لعلامتك.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>`;
    }
  } else {
  }
});