/* Add custom JS code below */ 
document.addEventListener("DOMContentLoaded", function () {
  function addAlkaramCRFooter() {
    const footer = document.querySelector("footer");

    if (!footer) return;

    // Prevent duplicate
    if (document.querySelector(".alkaram-cr-footer")) return;

    const crNumber = "4030480281";

    const logoUrl = "https://media.licdn.com/dms/image/v2/C560BAQHCeI4QxbNxZw/company-logo_200_200/company-logo_200_200/0/1630628896844/ministry_of_commerce_saudiarabia_logo?e=2147483647&v=beta&t=SUDWo3VrmbrTj3Lo-AlBUxNXA1sslXnfFfOnSl8cNzs";

    const verifyUrl = "https://qr.saudibusiness.gov.sa/viewcr?nCrNumber=1aOR00B2ioMndF3F3Ndyeg==";

    const crBox = document.createElement("div");
    crBox.className = "alkaram-cr-footer";

    crBox.innerHTML = `
      <button class="alkaram-cr-logo-btn" type="button" aria-label="View Commercial Registration">
        <img 
          src="${logoUrl}" 
          alt="Ministry of Commerce" 
          class="alkaram-cr-logo"
        >
      </button>

      <div class="alkaram-cr-text">
        <div>السجل التجاري: <strong>${crNumber}</strong></div>
        <div>Commercial Registration: <strong>${crNumber}</strong></div>
      </div>
    `;

    footer.appendChild(crBox);

    const modal = document.createElement("div");
    modal.className = "alkaram-cr-modal";

    modal.innerHTML = `
      <div class="alkaram-cr-modal-content">
        <button class="alkaram-cr-close" type="button" aria-label="Close">&times;</button>

        <img 
          src="${logoUrl}" 
          alt="Ministry of Commerce" 
          class="alkaram-cr-modal-logo"
        >

        <h3>Commercial Registration</h3>
        <p class="alkaram-arabic-title">السجل التجاري</p>

        <div class="alkaram-cr-number">${crNumber}</div>

        <a 
          href="${verifyUrl}" 
          target="_blank" 
          rel="noopener noreferrer" 
          class="alkaram-cr-verify-btn"
        >
          Verify Official CR
        </a>

        <p class="alkaram-cr-note">
          Click the button above to view the official commercial registration verification page.
        </p>
      </div>
    `;

    document.body.appendChild(modal);

    const logoButton = crBox.querySelector(".alkaram-cr-logo-btn");
    const closeButton = modal.querySelector(".alkaram-cr-close");

    logoButton.addEventListener("click", function () {
      modal.classList.add("active");
    });

    closeButton.addEventListener("click", function () {
      modal.classList.remove("active");
    });

    modal.addEventListener("click", function (event) {
      if (event.target === modal) {
        modal.classList.remove("active");
      }
    });

    document.addEventListener("keydown", function (event) {
      if (event.key === "Escape") {
        modal.classList.remove("active");
      }
    });
  }

  addAlkaramCRFooter();

  // Backup for Salla themes that load footer slightly late
  setTimeout(addAlkaramCRFooter, 1500);
});