var isTopNavForSupport;
var isBodyForSupportNoRotate;
var isBodyForSupport;
var supportButtonText;
var supportButtonBackgroundColor;
var supportButtonColor;
var isDeepLinkToolsEnabled;
var isVCardEnabled;
var isImageToolEnabled;
var isDashboardToolsEnabled;
var isLinkShortnerEnabled;
var isShareLinkToolsEnabled;
var companyId;
var userId;
var isSidebarButtonsEnabled;
var isChatgpt;
var isButtonBuilder;
var isBottomButtonsEnabled;
var isTooltipEnabled;
var toolsConfig;
var isLocationMenuLinksEnabled;
var isChatBubbleEnable;
var customPageItem;

// Simple full-page loader overlay helpers
function showGlobalLoader() {
  // Avoid creating multiple loaders
  if (document.getElementById("ata-global-loader")) return;

  // Create style for spinner only once
  if (!document.getElementById("ata-global-loader-style")) {
    var style = document.createElement("style");
    style.id = "ata-global-loader-style";
    style.innerHTML = `
      @keyframes ata-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      #ata-global-loader {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999;
      }
      #ata-global-loader .ata-spinner {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 6px solid #e0e0e0;
        border-top-color: #3b82f6;
        animation: ata-spin 0.8s linear infinite;
      }
    `;
    document.head.appendChild(style);
  }

  var overlay = document.createElement("div");
  overlay.id = "ata-global-loader";

  var spinner = document.createElement("div");
  spinner.className = "ata-spinner";

  overlay.appendChild(spinner);
  document.body.appendChild(overlay);
}

try {
  showGlobalLoader();
} catch (e) {
  console.error("Error showing loader:", e);
}
function hideGlobalLoader() {
  var overlay = document.getElementById("ata-global-loader");
  if (overlay && overlay.parentNode) {
    overlay.parentNode.removeChild(overlay);
  }
}

// ===== Custom loader resolution =====
// Fetches the company's selected custom loader and swaps the default spinner.
// On any failure (network / no record / bad data), leaves the default spinner in place.
function injectCustomLoaderStyles() {
  if (document.getElementById("ata-custom-loader-styles")) return;
  var s = document.createElement("style");
  s.id = "ata-custom-loader-styles";
  s.innerHTML = `
    @keyframes ata-bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }
    .ata-dots { display:inline-flex; gap:8px; }
    .ata-dots > span { width:14px; height:14px; background:#3b82f6; border-radius:50%; animation: ata-bounce 1.2s infinite ease-in-out both; }
    .ata-dots > span:nth-child(1) { animation-delay:-0.32s; }
    .ata-dots > span:nth-child(2) { animation-delay:-0.16s; }

    @keyframes ata-pulse { 0% { transform: scale(0); opacity:1; } 100% { transform: scale(1); opacity:0; } }
    .ata-pulse { width:60px; height:60px; background:#3b82f6; border-radius:50%; animation: ata-pulse 1.2s ease-out infinite; }

    @keyframes ata-bars { 0%,40%,100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }
    .ata-bars { display:inline-flex; gap:5px; align-items:flex-end; height:60px; }
    .ata-bars > span { width:7px; height:100%; background:#3b82f6; border-radius:3px; animation: ata-bars 1s ease-in-out infinite; }
    .ata-bars > span:nth-child(2) { animation-delay:0.1s; }
    .ata-bars > span:nth-child(3) { animation-delay:0.2s; }
    .ata-bars > span:nth-child(4) { animation-delay:0.3s; }
    .ata-bars > span:nth-child(5) { animation-delay:0.4s; }

    .ata-ring { width:60px; height:60px; border:6px solid transparent; border-top-color:#3b82f6; border-right-color:#3b82f6; border-radius:50%; animation: ata-spin 1.1s cubic-bezier(0.5,0.1,0.5,0.9) infinite; }

    @keyframes ata-wave { 0%,100% { height:14px; } 50% { height:42px; } }
    .ata-wave { display:inline-flex; align-items:center; gap:5px; height:60px; }
    .ata-wave > span { width:7px; height:14px; background:#3b82f6; border-radius:4px; animation: ata-wave 1s ease-in-out infinite; }
    .ata-wave > span:nth-child(2) { animation-delay:0.1s; }
    .ata-wave > span:nth-child(3) { animation-delay:0.2s; }
    .ata-wave > span:nth-child(4) { animation-delay:0.3s; }
    .ata-wave > span:nth-child(5) { animation-delay:0.4s; }

    .ata-orbit { width:60px; height:60px; border:3px solid #e0e0e0; border-radius:50%; position:relative; animation: ata-spin 2s linear infinite; }
    .ata-orbit > span { position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:12px; height:12px; background:#3b82f6; border-radius:50%; box-shadow:0 0 6px rgba(59,130,246,0.5); }

    @keyframes ata-grid { 0%,70%,100% { opacity:0.2; transform:scale(0.6); } 35% { opacity:1; transform:scale(1); } }
    .ata-grid { display:grid; grid-template-columns:repeat(3, 14px); gap:5px; }
    .ata-grid > span { width:14px; height:14px; background:#3b82f6; border-radius:3px; animation: ata-grid 1.3s ease-in-out infinite; }
    .ata-grid > span:nth-child(1) { animation-delay:0s; }
    .ata-grid > span:nth-child(2) { animation-delay:0.1s; }
    .ata-grid > span:nth-child(3) { animation-delay:0.2s; }
    .ata-grid > span:nth-child(4) { animation-delay:0.1s; }
    .ata-grid > span:nth-child(5) { animation-delay:0.2s; }
    .ata-grid > span:nth-child(6) { animation-delay:0.3s; }
    .ata-grid > span:nth-child(7) { animation-delay:0.2s; }
    .ata-grid > span:nth-child(8) { animation-delay:0.3s; }
    .ata-grid > span:nth-child(9) { animation-delay:0.4s; }

    #ata-global-loader .ata-custom-media { width:120px; height:120px; object-fit:contain; }
  `;
  document.head.appendChild(s);
}

function clearLoaderContent(overlay) {
  var selectors = [
    ".ata-spinner",
    ".ata-custom-media",
    ".ata-dots",
    ".ata-pulse",
    ".ata-bars",
    ".ata-ring",
    ".ata-wave",
    ".ata-orbit",
    ".ata-grid",
  ];
  selectors.forEach(function (sel) {
    var nodes = overlay.querySelectorAll(sel);
    nodes.forEach(function (n) {
      if (n && n.parentNode) n.parentNode.removeChild(n);
    });
  });
}

function applyPredefinedLoader(style) {
  var overlay = document.getElementById("ata-global-loader");
  if (!overlay) return;
  injectCustomLoaderStyles();
  clearLoaderContent(overlay);

  var el = document.createElement("div");
  switch (style) {
    case "dots":
      el.className = "ata-dots";
      el.innerHTML = "<span></span><span></span><span></span>";
      break;
    case "pulse":
      el.className = "ata-pulse";
      break;
    case "bars":
      el.className = "ata-bars";
      el.innerHTML = "<span></span><span></span><span></span><span></span><span></span>";
      break;
    case "ring":
      el.className = "ata-ring";
      break;
    case "wave":
      el.className = "ata-wave";
      el.innerHTML = "<span></span><span></span><span></span><span></span><span></span>";
      break;
    case "orbit":
      el.className = "ata-orbit";
      el.innerHTML = "<span></span>";
      break;
    case "grid":
      el.className = "ata-grid";
      el.innerHTML =
        "<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>";
      break;
    case "spinner":
    default:
      el.className = "ata-spinner";
      break;
  }
  overlay.appendChild(el);
}

function applyCustomMediaLoader(data) {
  var overlay = document.getElementById("ata-global-loader");
  if (!overlay || !data || !data.url) return;
  injectCustomLoaderStyles();
  clearLoaderContent(overlay);

  var el;
  if (data.fileType === "video") {
    el = document.createElement("video");
    el.src = data.url;
    el.autoplay = true;
    el.loop = true;
    el.muted = true;
    el.playsInline = true;
    el.setAttribute("playsinline", "");
  } else {
    el = document.createElement("img");
    el.src = data.url;
    el.alt = data.name || "Loader";
  }
  el.className = "ata-custom-media";
  overlay.appendChild(el);
}

async function applyCompanyLoader(cid) {
  if (!cid) return;
  // Don't disturb the loader if the overlay was already hidden by something else
  var overlay = document.getElementById("ata-global-loader");
  if (!overlay) return;

  try {
    var res = await fetch(
      `https://v3api.alltheapps.io/api/agency_app/customLoader/active?company_id=${encodeURIComponent(cid)}`
    );
    if (!res.ok) return; // keep default
    var json = await res.json();
    var data = json && json.data;
    if (!data) return; // keep default

    if (data.type === "custom" && data.url) {
      applyCustomMediaLoader(data);
    } else if (data.type === "predefined" && data.id) {
      var style = String(data.id).replace(/^predefined-/, "");
      applyPredefinedLoader(style);
    }
    // anything else: keep the default spinner
  } catch (e) {
    console.warn("[ata-loader] could not load custom loader, keeping default:", e);
  }
}

async function checkScriptEnabledAndRun() {
  console.log("checkScriptEnabledAndRun");
  let companyIdMain, userId;

  // Get company info
  try {
    const companyInfoMain = await AppUtils.Utilities.getCompany();
    companyIdMain = companyInfoMain.id;
    companyId = companyInfoMain.id;
    console.log("Company ID:", companyIdMain);
    // Resolve & swap to the company's selected loader (fire-and-forget; falls back to default on failure)
    applyCompanyLoader(companyIdMain);
  } catch (error) {
    console.error("Error getting company info:", error);
    return;
  }

  // Get user info
  try {
    const userInfo = await AppUtils.Utilities.getCurrentUser();
    userId = userInfo.id;
    console.log("User ID:", userId);
  } catch (error) {
    console.error("Error getting user info:", error);
    return;
  }

  // Get support customization config
  try {
    const response = await fetch(`https://v3api.alltheapps.io/api/agency_app/supportCustomization?company_id=${companyIdMain}`);
    const data = await response.json();
    console.log("Support customization data:", data);
    console.log("Support customization data length:", data?.data[0]?.customPageItem);
    if (data.data && data.data.length > 0) {
      const config = data.data[0];

      // Set global variables from config
      isSidebarButtonsEnabled = config.isSidebarButtonsEnabled === true;
      isBodyForSupport = config.isBodyForSupport === true;
      isDeepLinkToolsEnabled = config.isDeepLinkToolsEnabled === true;
      isVCardEnabled = config.isVCardEnabled === true;
      isImageToolEnabled = config.isImageToolEnabled === true;
      isDashboardToolsEnabled = config.isDashboardToolsEnabled === true;
      isLinkShortnerEnabled = config.isLinkShortnerEnabled === true;
      isShareLinkToolsEnabled = config.isShareLinkToolsEnabled === true;
      isChatgpt = config.isChatgpt === true;
      isButtonBuilder = config.isButtonBuilder === true;
      isBodyForSupportNoRotate = config.isBodyForSupportNoRotate || false;
      isTopNavForSupport = config.isTopNavForSupport || false;
      isBottomButtonsEnabled = config.isBottomButtonsEnabled || false;
      isLocationMenuLinksEnabled = config.isLocationMenuLinksEnabled || false;
      isTooltipEnabled = config.isTooltipEnabled || false;
      isChatBubbleEnable = config.isChatBubbleEnable || false;
      customPageItem = config.customPageItem;
      // Set text and color configurations
      supportButtonText = config.supportButtonText || "Support";
      supportButtonBackgroundColor = config.supportButtonBackgroundColor || "#007bff";
      supportButtonColor = config.supportButtonColor || "black";

      // Store flags for script execution
      const scriptFlags = {
        isScriptEnabled: config.isScriptEnabled === true,
        isTooltipEnabled: config.isTooltipEnabled === true,
        isFeedbackEnabled: config.isFeedbackEnabled === true,
        // isNewsFeedsEnabled: config.isNewsFeedsEnabled === true
      };

      // Run scripts based on flags
      if (scriptFlags.isScriptEnabled) runSupportScript();
      if (scriptFlags.isFeedbackEnabled) runFeedbackScript();
      
      // if (scriptFlags.isTooltipEnabled) runToolTipScript();
      // if (scriptFlags.isNewsFeedsEnabled) runNewFeedScript();
      if (isBottomButtonsEnabled) runBottomButtonScript();
      if (isSidebarButtonsEnabled) runSideNavButtonScript();
      if (isChatgpt) runChatGptScript();
      runButtonBuilderScript(); 
      // if (isButtonBuilder) runButtonBuilderScript();
      if (isLocationMenuLinksEnabled) CreateCustomMenuButtonInSetting();
      if (isChatBubbleEnable) runChatBubbleScript()
      // document.getElementById("683ed93a8ded1a4103d118a2").querySelector(".nav-title").textContent="Asdfasdf"

      // customMenubutton(customPageItem);
    }
  } catch (error) {
    console.error("Error fetching support customization:", error);
  }

  // Get extended menu edit config
  try {
    const response = await fetch(`https://agencyapi.alltheapps.io/api/agency_app/ExtendedMenuEdit?company_id=${companyIdMain}`);
    const data = await response.json();
    console.log("Extended menu edit data:", data);

    if (data.data && data.data.length > 0) {
      toolsConfig = data.data[0].toolsConfig;
      console.log("Tools Config:", toolsConfig);
    }
  } catch (error) {
    console.error("Error fetching extended menu edit config:", error);
  }
}
checkScriptEnabledAndRun();



function runSupportScript() {


  async function startHelpScript() {
    console.log("startHelpScript");

    const linkFontAwesome = document.createElement("link");
    linkFontAwesome.id = "font-awesome-stylesheet";
    linkFontAwesome.rel = "stylesheet";
    linkFontAwesome.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css";
    document.head.appendChild(linkFontAwesome);

    var checkInterval = setInterval(function () {
      if ($("#CalendarsFeatureDiscovery").length > 0) {
        clearInterval(checkInterval);
        // console.log("add the acvutiklsdfjkdf");
        // AddButtonForSupport();

      }
    }, 1000);
  }
  startHelpScript();









}

function runFeedbackScript() {

  var feedbackScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  feedbackScript.src = `https://v3api.alltheapps.io/api/agency_app/feedback_script/get_script/${companyId}`;

  // Define a callback for when the feedbackScript is loaded
  feedbackScript.onload = function () {
    console.log("feedbackScript is loaded!!!");
  };

  // Append the feedbackScript element to the document's head
  document.head.appendChild(feedbackScript);

}
function runBrandBoardScript() {

  var brandBoardScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // brandBoardScript.src = `http://localhost:8082/api/agency_app/chatWidgetScript/get_script/getbrandsBoardScript/${companyId}`;
  brandBoardScript.src = `https://v3api.alltheapps.io/api/agency_app/chatWidgetScript/get_script/getbrandsBoardScript/${companyId}`;

  // Define a callback for when the brandBoardScript is loaded
  brandBoardScript.onload = function () {
    console.log("brandBoardScript is loaded!!!");
  };

  // Append the brandBoardScript element to the document's head
  document.head.appendChild(brandBoardScript);

}
runBrandBoardScript()
function runCustomFieldScript() {

  var brandBoardScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // brandBoardScript.src = `http://localhost:8082/api/agency_app/chatWidgetScript/get_script/getbrandsBoardScript/${companyId}`;
  brandBoardScript.src = `https://v3api.alltheapps.io/api/agency_app/phoneDailerScript/customFieldManagerScript/${companyId}`;

  // Define a callback for when the brandBoardScript is loaded
  brandBoardScript.onload = function () {
    console.log("brandBoardScript is loaded!!!");
  };

  // Append the brandBoardScript element to the document's head
  document.head.appendChild(brandBoardScript);

}
runCustomFieldScript()
function runLogoManagments() {

  var brandBoardScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // brandBoardScript.src = `http://localhost:8082/api/agency_app/chatWidgetScript/get_script/getbrandsBoardScript/${companyId}`;
  brandBoardScript.src = `https://v3api.alltheapps.io/api/agency_app/phoneDailerScript/CustomLogoManagement/${companyId}`;

  // Define a callback for when the brandBoardScript is loaded
  brandBoardScript.onload = function () {
    console.log("brandBoardScript is loaded!!!");
  };

  // Append the brandBoardScript element to the document's head
  document.head.appendChild(brandBoardScript);

}
runLogoManagments()
function runSideNavButtonScript() {
  console.log("sideNavButtons")

  var sideNavButtons = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  sideNavButtons.src = `https://v3api.alltheapps.io/api/agency_app/chatWidgetScript/get_script/${companyId}`;

  // Define a callback for when the sideNavButtons is loaded
  sideNavButtons.onload = function () {
    console.log("sideNavButtons is loaded!!!");
  };

  // Append the sideNavButtons element to the document's head
  document.head.appendChild(sideNavButtons);

}
function runBottomButtonScript() {
  console.log("bottomButtons")
  var bottomButtonScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  bottomButtonScript.src = `https://v3api.alltheapps.io/api/agency_app/chatWidgetScript/get_script/bottombuttons/${companyId}`;

  // Define a callback for when the bottomButtonScript is loaded
  bottomButtonScript.onload = function () {
    console.log("bottomButtonScript is loaded!!!");
  };

  // Append the bottomButtonScript element to the document's head
  document.head.appendChild(bottomButtonScript);

}
function runChatBubbleScript() {

  var chatBubbleScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  chatBubbleScript.src = `https://v3api.alltheapps.io/api/agency_app/chatWidgetScript/get_script/bubbleButton/${companyId}`;

  // Define a callback for when the bottomButtonScript is loaded
  chatBubbleScript.onload = function () {
    console.log("chatBubbleScript is loaded!!!");
  };

  // Append the bottomButtonScript element to the document's head
  document.head.appendChild(chatBubbleScript);

}
// function runToolTipScript() {
//   console.log("tooltip")


//   var tooltip = document.createElement("script");

//   // Set the source attribute to the jQuery CDN URL
//   // tooltip.src = "http://localhost:8082/api/v1/tooltip/script";
//   tooltip.src = "https://v3api.alltheapps.io/api/v1/tooltip/script";

//   // Define a callback for when the tooltip is loaded
//   tooltip.onload = function () {
//     console.log("Tooltip is loaded!!!");
//   };

//   // Append the tooltip element to the document's head
//   document.head.appendChild(tooltip);
//   // Append the script element to the document's head


// }
// runToolTipScript()
// function runNewToolTipScript() {
//   console.log("tooltip")


//   var tooltip = document.createElement("script");

//   // Set the source attribute to the jQuery CDN URL
//   // tooltip.src = "http://localhost:8082/api/v1/tooltip/script";
//   tooltip.src = "https://v3api.alltheapps.io/api/v1/tooltip/new_tooltip_script";

//   // Define a callback for when the tooltip is loaded
//   tooltip.onload = function () {
//     console.log("Tooltip is loaded!!!");
//   };

//   // Append the tooltip element to the document's head
//   document.head.appendChild(tooltip);
//   // Append the script element to the document's head


// }
// runNewToolTipScript();
function runChatGptScript() {
  console.log("tooltip")


  var chatGptScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  chatGptScript.src = `https://v3api.alltheapps.io/api/agency_app/ai_chat_script/get_script/${companyId}`;

  // Define a callback for when the chatGptScript is loaded
  chatGptScript.onload = function () {
    console.log("chatGptScript is loaded!!!");
  };

  // Append the chatGptScript element to the document's head
  document.head.appendChild(chatGptScript);
  // Append the script element to the document's head


}
function runAllTheAppMenuEdit() {
  console.log("runAllTheAppMenuEdit")
  var allTheAppMenuEdit = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  allTheAppMenuEdit.src = `https://v3api.alltheapps.io/api/agency_app/alltheappmenuEdit_Script/get_script/asdfasd`;

  // Define a callback for when the allTheAppMenuEdit is loaded
  allTheAppMenuEdit.onload = function () {
    console.log("allTheAppMenuEdit is loaded!!!")
  };

  // Append the allTheAppMenuEdit element to the document's head
  document.head.appendChild(allTheAppMenuEdit);

}
runAllTheAppMenuEdit()

function runButtonBuilderScript() {
  console.log("topNavButton")


  var buttonBuilderScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // buttonBuilderScript.src = `http://localhost:8082/api/agency_app/customizer/customizerScript/${companyId}`;
  buttonBuilderScript.src = `https://v3api.alltheapps.io/api/agency_app/customizer/customizerScript/${companyId}`;

  // Define a callback for when the buttonBuilderScript is loaded
  buttonBuilderScript.onload = function () {  
    console.log("buttonBuilderScript is loaded!!!");
  };

  // Append the buttonBuilderScript element to the document's head
  document.head.appendChild(buttonBuilderScript);
  // Append the script element to the document's head


}
// function runNewFeedScript() {
//   console.log("newsfeed")
//   var notificationScript = document.createElement("script");

//   // Set the source attribute to the jQuery CDN URL
//   // notificationScript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
//   notificationScript.src = `https://v3api.alltheapps.io/api/agency_app/notification_script/get_script/${companyId}`;

//   // Define a callback for when the notificationScript is loaded
//   notificationScript.onload = function () {
//     console.log("notificationScript is loaded!!!");
//   };

//   // Append the notificationScript element to the document's head
//   document.head.appendChild(notificationScript);

// }
// runNewFeedScript()
function runDividerScript() {
  console.log("dividerrrrrrrrrr")
  var dividerScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // dividerScript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  dividerScript.src = `https://v3api.alltheapps.io/api/agency_app/dividerforAtaScript/get_script`;

  // Define a callback for when the dividerScript is loaded
  dividerScript.onload = function () {
    console.log("dividerScript is loaded!!!");
  };

  // Append the dividerScript element to the document's head
  document.head.appendChild(dividerScript);

}
runDividerScript()
function runBannerScript() {
  console.log("dividerrrrrrrrrr")
  var bannerSctript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // bannerSctript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  bannerSctript.src = `https://v3api.alltheapps.io/api/agency_app/dividerforAtaScript/get_banner_script`;

  // Define a callback for when the bannerSctript is loaded
  bannerSctript.onload = function () {
    console.log("bannerSctript is loaded!!!");
  };

  // Append the bannerSctript element to the document's head
  document.head.appendChild(bannerSctript);

}
runBannerScript()
function runMembershipCustomizationScript() {
  console.log("dividerrrrrrrrrr")
  var membershipCustomizationScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // bannerSctript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  membershipCustomizationScript.src = `https://v3api.alltheapps.io/api/agency_app/mindscanscript/get_member_ship_customization_script`;

  // Define a callback for when the bannerSctript is loaded
  membershipCustomizationScript.onload = function () {
    console.log("bannerSctript is loaded!!!");
  };

  // Append the bannerSctript element to the document's head
  document.head.appendChild(membershipCustomizationScript);

}
runMembershipCustomizationScript()
function runConversationUnreadReceiptScript() {
  console.log("conversationUnreadReceipt")
  var conversationUnreadReceiptScript = document.createElement("script");

  conversationUnreadReceiptScript.src = `https://v3api.alltheapps.io/api/agency_app/mindscanscript/get_conversation_unread_receipt_script`;

  conversationUnreadReceiptScript.onload = function () {
    console.log("conversationUnreadReceiptScript is loaded!!!");
  };

  document.head.appendChild(conversationUnreadReceiptScript);
}
runConversationUnreadReceiptScript()
function runMindScanCustomization() {
  console.log("dividerrrrrrrrrr")
  var mindScanCustomizationScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // bannerSctript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  mindScanCustomizationScript.src = `https://v3api.alltheapps.io/api/agency_app/mindscanscript/get_mindscan_script`;

  // Define a callback for when the bannerSctript is loaded
  mindScanCustomizationScript.onload = function () {
    console.log("bannerSctript is loaded!!!");
  };

  // Append the bannerSctript element to the document's head
  document.head.appendChild(mindScanCustomizationScript);

}
runMindScanCustomization()
function runAppsOnIntegrationpageCustomizationScript() {
  console.log("dividerrrrrrrrrr")
  var appsOnIntegrationpageCustomizationScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // bannerSctript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  appsOnIntegrationpageCustomizationScript.src = `https://v3api.alltheapps.io/api/agency_app/customizerScript/apps_on_integrationpage_customization_script`;

  // Define a callback for when the bannerSctript is loaded
  appsOnIntegrationpageCustomizationScript.onload = function () {
    console.log("bannerSctript is loaded!!!");
  };

  // Append the bannerSctript element to the document's head
  document.head.appendChild(appsOnIntegrationpageCustomizationScript);

}
runAppsOnIntegrationpageCustomizationScript()
function runAppsDistributionsScript() {
  console.log("app distribution ")
  var appsDistributionsScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // bannerSctript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  appsDistributionsScript.src = `https://v3api.alltheapps.io/api/agency_app/customizerScript/apps_distributions_script`;

  // Define a callback for when the bannerSctript is loaded
  appsDistributionsScript.onload = function () {
    console.log("appsDistributionsScript is loaded!!!");
  };

  // Append the bannerSctript element to the document's head
  document.head.appendChild(appsDistributionsScript);

}
runAppsDistributionsScript()
function runNewToolTipScript() {
  console.log("app distribution ")
  var newToolTipScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // bannerSctript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  newToolTipScript.src = `https://v3api.alltheapps.io/api/agency_app/customizerScript/new_tooltip_script`;

  // Define a callback for when the bannerSctript is loaded
  newToolTipScript.onload = function () {
    console.log("newToolTipScript is loaded!!!");
  };

  // Append the bannerSctript element to the document's head
  document.head.appendChild(newToolTipScript);

}
runNewToolTipScript()
function runLaunchpadScript() {
  console.log("dividerrrrrrrrrr")
  var launchpadScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // dividerScript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  launchpadScript.src = `https://v3api.alltheapps.io/api/agency_app/dividerforAtaScript/get_launchpad_script`;

  // Define a callback for when the dividerScript is loaded
  launchpadScript.onload = function () {
    console.log("dividerScript is loaded!!!");
  };

  // Append the dividerScript element to the document's head
  document.head.appendChild(launchpadScript);

}
runLaunchpadScript()

function runRequiredChecklistGateScript() {
  console.log("requiredChecklistGateScript loading...")
  var requiredChecklistGateScript = document.createElement("script");
  requiredChecklistGateScript.src = `https://v3api.alltheapps.io/api/agency_app/dividerforAtaScript/get_required_checklist_gate_script`;
  requiredChecklistGateScript.onload = function () {
    console.log("requiredChecklistGateScript is loaded!!!");
  };
  document.head.appendChild(requiredChecklistGateScript);
}
runRequiredChecklistGateScript()
//timee tracckinggggggggggggggggggggg

function runTimeTrackingScript() {
  console.log("timeTrackingScript loading...")
  var timeTrackingScript = document.createElement("script");
  timeTrackingScript.src = `https://v3api.alltheapps.io/api/agency_app/dividerforAtaScript/get_time_tracking_script`;
  timeTrackingScript.onload = function () {
    console.log("✅ timeTrackingScript is loaded!!!");
  };
  document.head.appendChild(timeTrackingScript);
}
runTimeTrackingScript()
function runOnpageCustomizerScript() {
  console.log("onpagecustomizerScript")

  // Show loader while on-page customizer script is loading
  try {
    showGlobalLoader();
  } catch (e) {
    console.error("Error showing loader:", e);
  }

  var onpagecustomizerScript = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // onpagecustomizerScript.src = `http://localhost:8082/api/agency_app/notification_script/get_script/${companyId}`;
  onpagecustomizerScript.src = `https://v3api.alltheapps.io/api/agency_app/customizer/onPageCustomizerScript/${companyId}`;

  // Define a callback for when the onpagecustomizerScript is loaded
  onpagecustomizerScript.onload = function () {
    console.log("onpagecustomizerScript is loaded!!!");
    // wait 3 seconds and then hide the loader
    setTimeout(() => {
      hideGlobalLoader();
    }, 5000);
  };

  // Also hide loader if script fails, so the UI is not stuck
  onpagecustomizerScript.onerror = function (err) {
    console.error("onpagecustomizerScript failed to load:", err);
    setTimeout(() => {
      hideGlobalLoader();
    }, 5000);
  };

  // Append the onpagecustomizerScript element to the document's head
  document.head.appendChild(onpagecustomizerScript);

}
runOnpageCustomizerScript()

function runAllTheAppSettingMenu() {
  console.log("runAllTheAppSettingMenu")
  var allTheAppMenuEditSetting = document.createElement("script");

  // Set the source attribute to the jQuery CDN URL
  // allTheAppMenuEditSetting.src = `http://localhost:8082/api/agency_app/alltheappmenuEdit_Script/settingMenu/get_script/asdfasd`;
  allTheAppMenuEditSetting.src = `https://v3api.alltheapps.io/api/agency_app/alltheappmenuEdit_Script/settingMenu/get_script/asdfasd`;

  // Define a callback for when the allTheAppMenuEdit is loaded
  allTheAppMenuEditSetting.onload = function () {
    console.log("allTheAppMenuEditSetting is loaded!!!")
  };

  // Append the allTheAppMenuEdit element to the document's head
  document.head.appendChild(allTheAppMenuEditSetting);

}
runAllTheAppSettingMenu()
function CreateCustomMenuButtonInSetting() {



  const elementsForSeetinMenu = {
    topbar_element: `<a href="#" aria-current="page" class="group text-left mx-1 pb-2 md:pb-3 text-sm font-medium
          topmenu-navitem cursor-pointer relative px-2" id="team-managment" style="line-height: 1.6rem;"><span class="flex items-center"> Team Management </span><div x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" class="hidden group-hover:block origin-top-right absolute right-0 mt-2 w-max rounded-md
              shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5
              focus:outline-none z-40"></div></a>`,
  };

  var levelForSettingMenu = "";
  var active_pathForSettingMenu = "";
  var active_opportunity = "";
  var setting_links = [

    {
      name: "Custom Menu Links",
      id: "setting_4",
      // link: `https://example.com`
      link: `https://agencyapp.levelupmarketplace.io/location-control-menu-link/{company.id}/670ce982292541018a34fb9a/{location.id}`

    },

  ]


  function add_pageForSettingMenu(data) {
    // alert('add_pageForSettingMenu')
    // #sb_my-staff
    if (active_pathForSettingMenu == "settings") {
      if (data.type == "insert") {
        if ($(`#${data.id}`).length == 0) {
          if ($("#sb_business_info")) {
            $("#sb_business_info").after(data.element);
          }
          else {
            $("#sb_my-business").after(data.element)
          }
          // $("#sb_business_info").before(data.element)
          // $("#sb_my-business").before(data.element)
        }

      } else {

        console.log(data)
        var element = `<a href="#"
      class="w-full group px-3 flex items-center justify-start sm:justify-center md:justify-center lg:justify-start xl:justify-start text-sm font-medium rounded-md cursor-pointer font-medium opacity-70 hover:opacity-100 py-2 md:py-2 custom_page_sidenav settings_el"
      id="${data?.id}" exact-path-active-class="exact-path-active-class" meta="dashboard" custom_url="${data?.link.replace('{location.id}', location_id).replace('{company.id}', companyId)}"><span
        class="hl_text-overflow sm:hidden md:hidden nav-title lg:block xl:block">${data?.name}</span></a>`;
        console.log(element)

        console.log($(`#${data?.id}`).length, "staffstaffstaff")
        if ($(`#${data?.id}`).length == 0) {

          $("#sb_custom-values").after(element);

        }
      }

    }
  }
  const settingsPage = () => {
    var element = elementsForSeetinMenu.topbar_element;
    // alert('{{user.role}}+{{user.type}}')
    var settingInterval = setInterval(async function () {
      if ($("#sidebar-v2").length > 0) {


        for (let index = 0; index < setting_links.length; index++) {
          const link = setting_links[index];
          add_pageForSettingMenu(link)
        }

        clearInterval(settingInterval);

      }
    }, 500);
  };





  var functionHandler = {
    settings: settingsPage,
  };

  $(document).ready(function () {
    var Path = window.location.pathname;
    var path_check = Path?.split("/v2/location/");
    if (path_check.length > 1 && path_check[0] === "") {
      location_id = path_check[1]?.split("/")[0];
      active_pathForSettingMenu = path_check[1]?.split("/")[1];

      // alert(active_pathForSettingMenu)
      levelForSettingMenu = "location";

      console.log("repositionnnnnnnnnnnnnn")
      OnloadForSettingMenu();
      UrlDetectForSettingMenu();
      var checkInterval = setInterval(async function () {
        if ($("#sidebar-v2").length > 0) {
          clearInterval(checkInterval);
          // $("#sb_opportunities span").text("Pipelines")
        }
      }, 500);
    } else {
      levelForSettingMenu = "agency";
      UrlDetectForSettingMenu();
    }
  });

  function UrlDetectForSettingMenu() {

    var initialPathname = window.location.pathname;
    setInterval(function () {
      if (window.location.pathname !== initialPathname) {
        var Path = window.location.pathname;
        var path_check = Path?.split("/v2/location/");
        active_pathForSettingMenu = path_check[1]?.split("/")[1];
        location_id = path_check[1]?.split("/")[0];
        OnloadForSettingMenu();
        if (path_check.length > 1 && path_check[0] === "") {
          if (levelForSettingMenu != "location" || location_id != path_check[1]?.split("/")[0]) {
            levelForSettingMenu = "location";
            location_id = path_check[1]?.split("/")[0];

          }
        } else {
          if (levelForSettingMenu != "agency") {
            levelForSettingMenu = "agency";
            OnloadForSettingMenu();
          }
        }
        initialPathname = window.location.pathname;
        functionHandler[active_pathForSettingMenu]();
      }
      // $("#sb_opportunities span").text("Pipelines")

    }, 500);
  }

  function OnloadForSettingMenu() {

    if (functionHandler[active_pathForSettingMenu] != undefined) {
      // alert('called')
      functionHandler[active_pathForSettingMenu]();
    }

    // alert(active_pathForSettingMenu)
    if (active_pathForSettingMenu == "settings") {
      $('.custom_page_sidenav').remove()
    } else {
      $('.settings_el').remove()

    }

  }

  $(document).delegate("#backButtonv2", "click", function () {
    $(
      "header > div.flex.flex-row.justify-start.items-center.topmenu-nav"
    ).show();

    $("#custom_page").remove();
  });

  $(document).delegate("#sidebar-v2 nav a", "click", function () {
    $("#sidebar-v2 nav a").removeClass("active");
    $(this).addClass("active");
    if ($(this).hasClass("custom_page_sidenav")) {
      if ($("custom_page").length > 0) {
        $("#custom_page_iframe").attr("src", $(this).attr("custom_url"));
      } else {
        $(
          "header > div.flex.flex-row.justify-start.items-center.topmenu-nav"
        ).hide();
        var element = `<section class="w-full" id="custom_page">
                          <div class="hl_wrapper hl_without-topbar"
                              style="height: calc(0px + 100vh); border: none;">

                              <iframe name="payment-app" class="h-100 w-100" id="custom_page_iframe"
                                  src="${$(this).attr(
          "custom_url"
        )}"></iframe>
                          </div>
                      </section>`;
        $("header").after(element);
      }
    } else {
      $(
        "header > div.flex.flex-row.justify-start.items-center.topmenu-nav"
      ).show();

      $("#custom_page").remove();
    }
  });






}


// CreateCustomMenuButtonInSetting()


// Extended Nav
function createSecondrymenubutton() {


  async function startScriptForSecondryMenu() {




    var checkInterval = setInterval(function () {
      if ($("#CalendarsFeatureDiscovery").length > 0) {
        clearInterval(checkInterval);
        console.log("add the createSecondrymenubuttoncreateSecondrymenubutton");
        setupToolsFunctionality();
        // customMenubutton(customPageItem);
        UrlDetectForMenuEditForSecondyMenu();
      }
    }, 1000);
  }
  startScriptForSecondryMenu();


  function handleButtonClickForExtendedMenu(event, button, container, iframeSrc, iframeId) {
    event.preventDefault();
    const existingIframe = document.querySelector(`#${iframeId}`);
    var containerTabs;
    const currentPath = window.location.pathname;
    if (currentPath.includes("smart_list")) {
      containerTabs = document.querySelector("#smartlists")
    } else {
      containerTabs = document.querySelectorAll(".hl_topbar-tabs")[0].children[0];
    }
    if (existingIframe) {
      existingIframe.remove();
      button.classList.remove(
        "cursor-pointer",
        "relative",
        "px-2",
        "router-link-exact-active",
        "router-link-active",
        "active"
      );
    } else {
      console.log("Creating iframe");
      const iframe = document.createElement("iframe");
      iframe.id = iframeId;

      const loc_id = getLocationIdForSecondryMenu(window.location.href);
      // const cfg = { url: iframeSrc, app: iframeSrc, customUrl: iframeSrc };

      if (iframeSrc === "supportchat") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/support_mini`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/support_updated`;
        }
      } else if (iframeSrc === "aisupport") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/ai-support?userType=null`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${userId}/ai-support?userType=null`;
        }
      } else if (iframeSrc === "quiz") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/questions`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/questions`;
        }
      } else if (iframeSrc === "onboarding") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/onboarding-list`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/onboarding-list`;
        }
      } else if (iframeSrc === "checklist") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/check-list`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/check-list`;
        }
      } else if (iframeSrc === "installedApps") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/app`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/app`;
        }
      } else if (iframeSrc === "videos") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/media-library`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/media-library`;
        }
      } else if (iframeSrc === "onboarding") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/onboarding-list`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/onboarding-list`;
        }
      } else if (iframeSrc === "documents") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/mini-documents`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/mini-documents`;
        }
      } else if (iframeSrc === "primeContact") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/primeContact`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/primeContact`;
        }
      } else if (iframeSrc === "faqs") {
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${userId}/mini-faq`;
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/mini-faq`;
        }
      } else if (iframeSrc === "vcard") {
        iframe.src = `https://agencyapp.levelupmarketplace.io/vCard_tool/${companyId}/${loc_id}/64f21872d160302acd0cf0e0`;
      } else if (iframeSrc === "imagetools") {
        iframe.src = `https://agencyapp.levelupmarketplace.io/marketplace/location/image-tools/${companyId}/${loc_id}/64f2185e9bace7498aa41794`;
      } else if (iframeSrc === "dashboardtools") {
        iframe.src = `https://kpi.alltheapps.io/dashboard-apis/${loc_id}`;
      } else if (iframeSrc === "deeplinktools") {
        iframe.src = `https://agencyapp.levelupmarketplace.io/deeplink/${companyId}/${loc_id}/64f2188b842fcd81b0be4964`;
      } else if (iframeSrc === "shatelinktools") {
        iframe.src = `https://agencyapp.levelupmarketplace.io/sharelink/${companyId}/${loc_id}/64f2189613ad53cf3883b9c2`;

      } else if (iframeSrc === "qrtools") {
        iframe.src = `https://agencyapp.levelupmarketplace.io/marketplace/location/games/qrcodewithTemplate/${companyId}/${loc_id}/64f2185213ad53893483b9b0`;

      } else if (iframeSrc === "linkshortner") {
        iframe.src = `https://agencyapp.levelupmarketplace.io/urlShortner/${companyId}/${loc_id}/66795567384b1a290a66c818`;
      } else if (iframeSrc) {
        iframe.src = iframeSrc;
      } else {
        iframe.src = "#";
      }

      Object.assign(iframe.style, {
        top: "50px",
        left: "0",
        width: "100%",
        height: "100vh",
        zIndex: "9999",
        border: "none",
        display: "block"
      });

      while (containerTabs.firstChild) {
        containerTabs.removeChild(containerTabs.firstChild);
      }
      containerTabs.appendChild(iframe);
      button.classList.add(
        "cursor-pointer",
        "relative",
        "px-2",
        "router-link-exact-active",
        "router-link-active",
        "active"
      );
    }
  }

  function getLocationIdForSecondryMenu(url) {
    // Use regex to extract the alphanumeric string after "location/"
    const match = url.match(/location\/([a-zA-Z0-9]+)/);
    // If there's a match, save it to a variable
    locationId = match ? match[1] : null;
    // Return the extracted ID
    return locationId;
  }
  // const toolsConfig = {
  //   opportunities: {
  //     referenceElementSelector: "#tb_bulk-actions",
  //     containerSelector: ".hl-wrapper-container",
  //     tools: [
  //       { id: "tb-deep-link-tools", text: "Deep Link Tools", src: `https://agencyapp.levelupmarketplace.io/deeplink/${LocIdForSecondryMenu}/64f2188b842fcd81b0be4964`, iframeId: "tb-deep-link-iframe", enabled: isDeepLinkToolsEnabled }
  //     ]
  //   },
  //   marketing: {
  //     referenceElementSelector: "#tb_email-templates",
  //     containerSelector: ".hl-wrapper-container",
  //     tools: [
  //       { id: "tb-vcard-tools", text: "V Card", src: `https://agencyapp.levelupmarketplace.io/VcardGenerator/${LocIdForSecondryMenu}/64f21872d160302acd0cf0e0`, iframeId: "tb-vcard-iframe", enabled: isVCardEnabled },
  //       { id: "tb-image-tools", text: "Image Tool", src: `https://agencyapp.levelupmarketplace.io/marketplace/location/image-tools/${LocIdForSecondryMenu}/64f2185e9bace7498aa41794`, iframeId: "tb-image-iframe", enabled: isImageToolEnabled },
  //       { id: "tb-dashboard-tools", text: "Dashboard Tools", src: `https://kpi.alltheapps.io/dashboard-apis/${LocIdForSecondryMenu}`, iframeId: "tb-dashboard-iframe", enabled: isDashboardToolsEnabled },

  //     ]
  //   },
  //   sites: {
  //     referenceElementSelector: "#tb_qr-codes",
  //     containerSelector: ".hl-wrapper-container",
  //     tools: [
  //       { id: "tb-share-link-tools", text: "Share Link Tools", src: `https://agencyapp.levelupmarketplace.io/sharelink/${LocIdForSecondryMenu}/64f2189613ad53cf3883b9c2`, iframeId: "tb-share-link-iframe", enabled: isShareLinkToolsEnabled },
  //       { id: "tb-link-shortner", text: "Link Shortner", src: `https://agencyapp.levelupmarketplace.io/urlShortner/${LocIdForSecondryMenu}/66795567384b1a290a66c818`, iframeId: "tb-link-shortner-iframe", enabled: isLinkShortnerEnabled }
  //     ]
  //   }
  // };
  function setupToolsFunctionality() {
    var LocIdForSecondryMenu = getLocationIdForSecondryMenu(window.location.href);


    const currentPath = window.location.pathname;
    let currentConfig;

    if (currentPath.includes("opportunities") || currentPath.includes("bulk-actions")) {
      currentConfig = toolsConfig?.opportunities;
    } else if (currentPath.includes("marketing")) {
      currentConfig = toolsConfig?.marketing;
    } else if (currentPath.includes("funnels-websites")) {
      currentConfig = toolsConfig?.sites;
    } else if (currentPath.includes("conversations")) {
      currentConfig = toolsConfig?.conversations;
    } else if (currentPath.includes("calendars")) {
      currentConfig = toolsConfig?.calendars;
    } else if (currentPath.includes("contacts")) {
      if (currentPath.includes("smart_list")) {
        currentConfig = { ...toolsConfig?.contacts, containerSelector: ".hl_topbar-tabs" };
      } else {
        currentConfig = toolsConfig?.contacts;
      }
    }

    if (currentConfig) {
      console.log(currentConfig, "........")
      const referenceElement = document.querySelector(currentConfig.referenceElementSelector);
      const container = document.querySelector(currentConfig.containerSelector);
      if (!referenceElement) return;

      currentConfig.tools.forEach(tool => {
        if (tool.enabled && !document.querySelector(`#${tool.id}`)) {
          console.log(tool.text + "is" + tool.enabled)
          const button = document.createElement("div");
          button.id = tool.id;
          button.textContent = tool.text;
          button.style.cursor = "pointer";
          button.className = referenceElement.className;
          button.classList.remove("cursor-pointer", "relative", "px-2", "router-link-exact-active", "router-link-active", "active");
          button.classList.add("customsecondry-menu");
          referenceElement.parentNode.insertBefore(button, referenceElement.nextSibling);
          button.addEventListener("click", (event) => handleButtonClickForExtendedMenu(event, button, container, tool.src, tool.iframeId));
        }
      });

      // Add event listeners to .topmenu-navitem elements
      document.querySelectorAll(".topmenu-navitem").forEach((item) => {
        item.addEventListener("click", function () {
          document.querySelectorAll(".topmenu-navitem").forEach((el) => {
            el.classList.remove("router-link-exact-active", "router-link-active", "active");
          });
          this.classList.add("router-link-exact-active", "router-link-active", "active");
        });
      });
    } else {
      document.querySelectorAll(".customsecondry-menu").forEach((element) => {
        element.remove();
      });
    }
  }


  //  function customMenubutton(customPageItem) {
  //           console.log("customMenubutton called", customPageItem);

  //           var checkInterval = setInterval(function () {
  //             const el = document.getElementById("683ed93a8ded1a4103d118a2");
  //             if (el && el.querySelector(".nav-title")) {
  //               // Change name
  //               el.querySelector(".nav-title").textContent = customPageItem?.name || "Support";
  //               // Change icon if available
  //               if (customPageItem?.icon && customPageItem?.icon !== "&#xundefined;" && customPageItem?.icon !== "") {
  //                 const iconSpan = document.createElement("span");
  //                 iconSpan.className = "h-5 w-5 mr-2";
  //                 iconSpan.innerHTML = `<i class="sm-button nav-fa-icon" style="--fa: '${customPageItem?.icon}'; --ff: 'Font Awesome 5 Free'; font-size: 1rem;"></i>`;
  //                 // Replace existing icon (assumes first child is icon)
  //                 const firstChild = el.querySelector(".hl_text-overflow").previousElementSibling;
  //                 if (firstChild) {
  //                   firstChild.replaceWith(iconSpan);
  //                 } else {
  //                   el.querySelector(".nav-title").parentNode.insertBefore(iconSpan, el.querySelector(".nav-title"));
  //                 }
  //               }
  //               clearInterval(checkInterval);
  //             }
  //           }, 500);
  //         }


  function UrlDetectForMenuEditForSecondyMenu() {

    var initialPathname = window.location.pathname;
    setInterval(function () {
      if (window.location.pathname !== initialPathname) {
        document.querySelectorAll(".customsecondry-menu").forEach((element) => {
          element.remove();
        });
        setupToolsFunctionality();
        // customMenubutton(customPageItem)
        initialPathname = window.location.pathname;
      }
    }, 1000);
  }

}
createSecondrymenubutton()

var script = document.createElement("script");

// Set the source attribute to the jQuery CDN URL
script.src = "https://code.jquery.com/jquery-3.6.0.min.js";

// Define a callback for when the script is loaded
script.onload = function () {
  console.log("jQuery is loaded!!!");
  console.log("Hlo");
};

// Append the script element to the document's head
document.head.appendChild(script);



setTimeout(() => {
  jQuery(document).ready(function ($) {


    let apiData = null;

    var videoUrls;
    var locationId;
    // get locationId from the locationlevel url
    function getLocationId(url) {
      // Use regex to extract the alphanumeric string after "location/"
      const match = url.match(/location\/([a-zA-Z0-9]+)/);
      // If there's a match, save it to a variable
      locationId = match ? match[1] : null;
      // Return the extracted ID
      return locationId;
    }
    async function logCompanyId() {
      try {
        const companyInfo = await AppUtils.Utilities.getCompany();
        console.log(companyInfo.id); // Log the id
        companyId = companyInfo.id;
      } catch (error) {
        console.error("Error fetching company info:", error);
      }
    }

    // Call the function
    logCompanyId();

    async function startMenuScript() {
      console.log("startMenuScript")
      const url = `https://v3api.alltheapps.io/api/v1/webhook/videoUrl`;
      let data = await apiHandler(url, "GET");
      videoUrls = data.data;
      console.log(data.data, "vvideoUrls")
    }
    startMenuScript();


    function apiHandler(url, method) {

      return new Promise(function (resolve, reject) {
        $.ajax({
          url: url,
          method: method,
          success: function (response) {
            resolve(response);
          },
          error: function (xhr, status, error) {
            reject(error);
          },
        });
      });
    }

    // hidding
    let appIds = [];

    async function startMenuScriptForHide() {
      try {
        const url = `https://v3api.alltheapps.io/api/v1/webhook/AppIds`;
        const url2 = `https://v3api.alltheapps.io/api/v1/app/getEnableCustomPages?company_id=${companyId}`;

        try {
          appIds = await apiHandlerForHideApp(url, "GET");
        } catch (error) {
          console.error("Error fetching AppIds:", error);
          appIds = { data: [] }; // Fallback to an empty array to prevent crashes
        }

        let customPages;
        try {
          customPages = await apiHandlerForHideApp(url2, "GET");
          console.log(customPages, "customPages");
        } catch (error) {
          console.error("Error fetching custom pages:", error);
          customPages = null; // Fallback to null if fetching fails
        }

        const checkInterval = setInterval(function () {
          try {
            if ($("a.custom-link").length > 0) {
              console.log(appIds.data, "appIds.data");
              clearInterval(checkInterval);
              if (appIds && appIds.data) {
                // Remove ids in customPages.data[0].app_ids from appIds.data
                let idsToHide = appIds.data;
                if (customPages && customPages.data && customPages.data[0] && Array.isArray(customPages.data[0].app_ids)) {
                  idsToHide = idsToHide.filter(id => !customPages.data[0].app_ids.includes(id));
                }
                hidding(idsToHide);
              } else {
                console.warn("AppIds data is not available for hiding.");
              }
              UrlDetectForMenuEdit();
            }
          } catch (error) {
            console.error("Error during interval execution:", error);
            clearInterval(checkInterval); // Ensure the interval is cleared on error
          }
        }, 1000);
      } catch (error) {
        console.error("Unexpected error in startMenuScriptForHide:", error);
      }
    }

    if (window.location.pathname.includes("/location/")) {
      startMenuScriptForHide();
    }


    // async function startMenuScriptForHide(){
    //       console.log("startMenuScriptForHide")
    //     const url = `https://v3api.alltheapps.io/api/v1/webhook/AppIds`;
    //     appIds = await apiHandlerForHideApp(url, "GET");

    //     var checkInterval = setInterval(function () {
    //         if ($("#CalendarsFeatureDiscovery").length > 0) {
    //             clearInterval(checkInterval);

    //             hidding(appIds.data);
    //             UrlDetectForMenuEdit();
    //         }
    //     }, 1000);
    // }
    // startMenuScriptForHide();
    function hidding(appIds) {

      var checkInterval = setInterval(function () {
        if ($('a.custom-link').length > 0) {
          appIds.forEach(function (id) {
            if (id !== "" && id !== "683ed93a8ded1a4103d118a2" && id !== "683052a256e6dd0c2f4c2ba7" && id !== "683efd5ea78c77efc1d8fe6e" && id !== "683ed93a8ded1a4103d118a2") {
              var element = document.getElementById(id);
              if (element) {
                console.log("element", id);
                element.style.display = "none";
              }
            }
          });
          clearInterval(checkInterval);
        }
      }, 500);
    }

    function apiHandlerForHideApp(url, method) {

      return new Promise(function (resolve, reject) {
        $.ajax({
          url: url,
          method: method,
          success: function (response) {
            resolve(response);
          },
          error: function (xhr, status, error) {
            reject(error);
          },
        });
      });
    }

    function UrlDetectForMenuEdit() {

      var initialPathname = window.location.pathname;
      setInterval(function () {
        if (window.location.pathname !== initialPathname) {
          if (window.location.pathname.includes("/location/")) {
            hidding(appIds.data);
          }
          initialPathname = window.location.pathname;
        }
      }, 1000);
    }


    async function start() {
      const linkFontAwesome = document.createElement("link");
      linkFontAwesome.id = "font-awesome-stylesheet";
      linkFontAwesome.rel = "stylesheet";
      linkFontAwesome.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css";
      document.head.appendChild(linkFontAwesome);

      var checkInterval = setInterval(function () {
        if (document.getElementById("CalendarsFeatureDiscovery")) {


          clearInterval(checkInterval);

          onLoad();
          UrlDetect();
        }
      }, 1000);
    }

    start();
    let allAppssupportButtonText;
    async function onLoad() {
      console.log("Onload")
      const url = window.location.href;
      if (url.includes("v2/location")) {
        console.log("location level");

        // location level qr hide
        // replaceQrCode();
        const locationId = getLocationId(url);
        console.log("Location ID:", locationId);

        if (window.location.href.includes("integration")) {
          console.log("integration level");

          //  integration id mean app id sometime it not get thats why setinterval to find it
          const checkIntegrationIdInterval = setInterval(function () {
            const integrationId = window.location.pathname?.split("/integration/")[1];
            if (integrationId) {
              console.log("Integration ID:", integrationId);
              clearInterval(checkIntegrationIdInterval);
              //   supportSection(integrationId,locationId);
            }
          }, 500);

          PreviewVideo();
          // Call the function to set everything up
          setupArticlesAndModal();
          createAndAppendElement();

          // This function is to create a button to show all the apps
          // AllAppButton("All The Apps");
          allAppssupportButtonText = "All The Apps";
        }
      } else {
        console.log("agency level");
        // replaceQrCode();
        if (window.location.href.includes("integration")) {
          console.log("integration level");


          //  integration id mean app id sometime it not get thats why setinterval to find it
          const checkIntegrationIdInterval = setInterval(function () {
            const integrationId = window.location.pathname?.split("/integration/")[1];
            if (integrationId) {
              console.log("Integration ID:", integrationId);
              clearInterval(checkIntegrationIdInterval);
              //   supportSection(integrationId);
            }
          }, 500);



          PreviewVideo();
          // Call the function to set everything up
          setupArticlesAndModal();
          createAndAppendElement();
          // This function is to create a button to show all the apps
          // AllAppButton("Level Up Marketplace");
          allAppssupportButtonText = "Level Up Marketplace";
          // supportSection(integrationId);
        }
      }

      // replaceQrCode();
      // PreviewVideo();
      // createAndAppendElement();
      // AllAppButton();
      // supportSection();
    }

    // location level for Qr page
    function replaceQrCode() {
      console.log("function executed");
      // Select the #QrCodeList element

      const qrCodeList = document.getElementById("QrCodeList");

      // Check if the element exists
      if (qrCodeList) {
        // Hide all inner elements of #QrCodeList
        qrCodeList.innerHTML = "";

        // Generate a temporary email (using a free service like temp-mail)
        const tempEmailService = "https://example.com";

        // Create an iframe element
        const iframe = document.createElement("iframe");
        iframe.src = tempEmailService;
        iframe.width = "100%";
        iframe.height = "1000px";
        iframe.style.border = "none"; // Optional: remove iframe border

        // Append the iframe to the #QrCodeList element
        qrCodeList.appendChild(iframe);
      } else {
        console.error("Element with id #QrCodeList not found.");
      }
    }

    // detail page button
    function createAndAppendElement() {
      console.log("createAndAppendElement function called");

      // Check if the URL contains 'integration'
      if (window.location.href.includes("integration")) {
        // Define a unique ID for the new element
        const newElementId = "custom-overview-tab";
        // Get the pathname and split it to extract the ID

        // class="n-tabs-bar"
        const hideTabsBarInterval = setInterval(() => {
          const nTabsBar = document.querySelector(".n-tabs-bar");

          // Check if the element is found
          if (nTabsBar) {
            // Hide the element
            nTabsBar.style.display = "none";

            // Clear the interval to stop further checks
            clearInterval(hideTabsBarInterval);
            console.log(".n-tabs-bar found and hidden");
          }
        }, 500);

        // Function to find and process the existing element
        function findElement() {
          const existingElement = document.querySelector(
            '[data-name="overview"]'
          );

          // Check if the new element is already appended
          if (document.getElementById(newElementId)) {
            console.log("New element already appended.");
            return;
          }

          if (existingElement) {
            // Existing element found, proceed
            console.log("Existing element found, creating a new tab.");

            // Create a new div element
            const newElement = document.createElement("div");

            // Set attributes for the new element
            newElement.setAttribute("id", newElementId);
            newElement.setAttribute("data-name", "overview");
            newElement.classList.add("n-tabs-tab");
            newElement.style.marginLeft = "10px"; // Add margin to the new tab

            // Create a span element inside the new div
            const spanElement = document.createElement("span");
            spanElement.classList.add("n-tabs-tab__label");
            spanElement.textContent = "How It Works";

            // Append the span to the new div
            // newElement.appendChild(spanElement);

            // Append the new div next to the existing element
            existingElement.parentNode.insertBefore(
              newElement,
              existingElement.nextSibling
            );

            // Add click event listener to the newly created tab
            newElement.addEventListener("click", handleTabClick);

            // Add click event listener to the original tab
            existingElement.addEventListener("click", handleTabClick);

            console.log("New element appended successfully.");

            // Call the function to set up the buttons and modal
            setupButtonsAndModal();
          } else {
            // Element not found, try again after some time
            console.log(
              'Element with data-name="overview" not found. Retrying...'
            );
            setTimeout(findElement, 500); // Retry after 500ms
          }
        }

        // Start looking for the element
        findElement();
      } else {
        console.log('URL does not contain "integration". Function not executed.');
      }
    }


    function setupButtonsAndModal() {
      let installButton = document.querySelector("#install-btn-4");
      if (!installButton) {
        console.error("Element with id 'install-btn-4' not found. Appending to .n-button instead.");
        installButton = document.querySelector(".n-button");
        if (!installButton) {
          console.error("Element with class 'n-button' not found.");
          return;
        }
      }

      const buttonStyleBase = `
          padding: 8px 15px;
          margin-left: 10px;
          border: none;
          border-radius: 5px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
      `;

      const helpGuideStyle = `
          ${buttonStyleBase}
          background-color: #FFA000;
          color: white;
      `;

      const requestFeatureStyle = `
          ${buttonStyleBase}
          background-color: #4CAF50;
          color: white;
      `;

      const helpGuideHoverStyle = `background-color: #FF8F00;`;
      const requestFeatureHoverStyle = `background-color: #388E3C;`;

      const button1 = document.createElement("button");
      button1.innerHTML = '<i class="fas fa-question-circle"></i>&nbsp;Help Guide';
      button1.style.cssText = helpGuideStyle;
      button1.addEventListener("mouseover", () => (button1.style.cssText = helpGuideStyle + helpGuideHoverStyle));
      button1.addEventListener("mouseout", () => (button1.style.cssText = helpGuideStyle));

      const button2 = document.createElement("button");
      button2.innerHTML = '<i class="fas fa-question-circle"></i>&nbsp;Request Any Feature';
      button2.style.cssText = requestFeatureStyle;
      button2.addEventListener("mouseover", () => (button2.style.cssText = requestFeatureStyle + requestFeatureHoverStyle));
      button2.addEventListener("mouseout", () => (button2.style.cssText = requestFeatureStyle));

      installButton.parentNode.insertBefore(button1, installButton.nextSibling);
      // installButton.parentNode.insertBefore(button2, button1.nextSibling);

      // Check if matched videoUrl is found; if not, hide the Help Guide button
      const url = window.location.href;
      const splitted = url.split("/integration/");
      const id = splitted?.[1]?.split('?')[0];
      const matched = videoUrls.filter(item => item.appid === id);
      if (!matched.length || !matched[0].videoUrl) {
        button1.style.display = "none";
      }

      // Function to create and return the modal
      function createModal() {
        const modalOverlay = document.createElement("div");
        modalOverlay.id = "customModal";
        Object.assign(modalOverlay.style, {
          position: "fixed",
          top: "0",
          left: "0",
          width: "100%",
          height: "100%",
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          zIndex: "1000",
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        });

        const modalContent = document.createElement("div");
        Object.assign(modalContent.style, {
          position: "relative",
          width: "80%",
          maxWidth: "800px",
          backgroundColor: "#000",
          borderRadius: "8px",
          overflow: "hidden"
        });

        const closeButton = document.createElement("button");
        closeButton.innerHTML = '<i class="fas fa-times" style="font-size: 18px;"></i>';
        Object.assign(closeButton.style, {
          position: "absolute",
          top: "15px",
          right: "15px",
          background: "none",
          border: "none",
          color: "#fff",
          cursor: "pointer"
        });

        const iframe = document.createElement("iframe");
        Object.assign(iframe.style, {
          width: "100%",
          height: "450px",
          border: "none"
        });

        closeButton.addEventListener("click", () => {
          // Remove the modal from DOM when closed
          document.body.removeChild(modalOverlay);
        });

        modalContent.appendChild(closeButton);
        modalContent.appendChild(iframe);
        modalOverlay.appendChild(modalContent);

        return { modalOverlay, iframe };
      }

      button1.addEventListener("click", () => {
        // Create new modal each time
        const { modalOverlay, iframe } = createModal();

        iframe.src = matched.length
          ? `https://www.youtube.com/embed/${matched[0].videoUrl}`
          : "https://example.com/url1";

        document.body.appendChild(modalOverlay);
      });

      button2.addEventListener("click", () => {
        // Create new modal each time
        const { modalOverlay, iframe } = createModal();

        // Get loc_id dynamically from the URL pathname
        var newPath = window.location.pathname;
        var level = newPath?.split("/v2/location/");
        var loc_id = (level[1] && level[1]?.split("/")[0]) || "";

        // Build the dynamic URL with the loc_id replacing the static string
        if (loc_id) {
          iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/appfeature/678640dacf4bd16a98c1f01a?userType=null`;
          console.log(`https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/appfeature/678640dacf4bd16a98c1f01a?userType=null`);
        } else {
          iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/appfeature/678640dacf4bd16a98c1f01a`;
        }

        document.body.appendChild(modalOverlay);
      });
    }



    function supportSection(integrationId, locationId) {
      console.log("supportSection function called");

      // Check if the URL contains 'integration'
      if (window.location.href.includes("integration")) {
        // Define a unique ID for the new element
        const newElementId = "custom-overview-tab";

        var checkReviewSectionInterval = setInterval(function () {
          var reviewSection = document.getElementById("review-section");
          if (reviewSection) {
            if (!document.getElementById("appended-element-id")) {
              const elementToClone = document.querySelector(
                "div.text-gray-900.py-3.hl-text-lg-medium"
              );
              if (elementToClone) {
                // Create a new container element
                var newElement = document.createElement("div");
                newElement.id = "appended-element-id";

                // Add a heading to the new element
                var heading = document.createElement("h2");
                heading.id = `SupportSection`; // Heading text
                heading.textContent = `Support ${integrationId}.. ${locationId}`; // Heading text

                heading.classList.add(
                  "text-gray-900",
                  "py-3",
                  "hl-text-lg-medium"
                ); // Append classes

                newElement.appendChild(heading);

                // Check if 'custom_iframe' exists
                var iframe = document.getElementById('custom_iframe');

                if (iframe) {
                  // If it exists, update the src and height
                  console.log("support change");
                  iframe.src = "https://google.com"; // Replace with your iframe source
                  iframe.height = "400px";
                } else {
                  // If it doesn't exist, create and append the iframe
                  iframe = document.createElement("iframe");
                  iframe.src = "https://google.com"; // Replace with your iframe source
                  iframe.width = "100%";
                  iframe.height = "400px";
                  iframe.style.border = "0";
                  iframe.id = "custom_iframe";

                  newElement.appendChild(iframe);
                }

                // Append the new element after the review-section
                const allTabPanes = document.querySelector(".n-tab-pane");
                if (allTabPanes) {
                  allTabPanes.appendChild(newElement);
                } else {
                  console.error("Element with class .n-tab-pane not found.");
                }
              } else {
                console.error("Element to clone not found");
              }
            }
            clearInterval(checkReviewSectionInterval);
          }
        }, 500);

        // Start looking for the element
      } else {
        console.log('URL does not contain "integration". Function not executed.');
      }
    }
    function PreviewVideo() {
      console.log("createAndAppendElement function called");

      // Check if the URL contains 'integration'
      if (window.location.href.includes("integration")) {
        // Define a unique ID for the new element
        const newElementId = "custom-overview-tab";

        // Function to find and process the existing element
        function findElement() {
          const existingElement = document.querySelector(
            '[data-name="installedApps"]'
          );

          // Check if the new element is already appended
          if (document.getElementById(newElementId)) {
            console.log("New element already appended.");
            return;
          }

          if (existingElement) {
            // Existing element found, proceed
            console.log("Existing element found, creating new tabs.");

            // Create a new div element for Preview Video
            const previewVideoElement = document.createElement("div");
            previewVideoElement.setAttribute("id", newElementId);
            previewVideoElement.setAttribute("data-name", "overview");
            previewVideoElement.classList.add("n-tabs-tab");
            previewVideoElement.style.marginLeft = "20px"; // Add margin to the new tab

            const previewVideoSpan = document.createElement("span");
            previewVideoSpan.classList.add("n-tabs-tab__label");
            previewVideoSpan.textContent = "Request an App";
            // previewVideoElement.appendChild(previewVideoSpan);

            // Create a new div element for Menu Item 1
            const menuItem1Element = document.createElement("div");
            menuItem1Element.setAttribute("id", "custom-menu-item-1");
            menuItem1Element.setAttribute("data-name", "menuItem1");
            menuItem1Element.classList.add("n-tabs-tab");
            menuItem1Element.style.marginLeft = "20px"; // Add margin to the new tab

            const menuItem1Span = document.createElement("span");
            menuItem1Span.classList.add("n-tabs-tab__label");
            menuItem1Span.textContent = "FAQ's";
            menuItem1Element.appendChild(menuItem1Span);

            // Create a new div element for Menu Item 2
            const menuItem2Element = document.createElement("div");
            menuItem2Element.setAttribute("id", "custom-menu-item-2");
            menuItem2Element.setAttribute("data-name", "menuItem2");
            menuItem2Element.classList.add("n-tabs-tab");
            menuItem2Element.style.marginLeft = "20px"; // Add margin to the new tab

            const menuItem2Span = document.createElement("span");
            menuItem2Span.classList.add("n-tabs-tab__label");
            menuItem2Span.textContent = "Support";
            menuItem2Element.appendChild(menuItem2Span);
            // Create a new div element for Menu Item 2
            const menuItem3Element = document.createElement("div");
            menuItem3Element.setAttribute("id", "custom-menu-item-2");
            menuItem3Element.setAttribute("data-name", "menuItem2");
            menuItem3Element.classList.add("n-tabs-tab");
            menuItem3Element.style.marginLeft = "20px"; // Add margin to the new tab

            const menuItem3Span = document.createElement("span");
            menuItem3Span.classList.add("n-tabs-tab__label");
            menuItem3Span.textContent = "Road Map";
            menuItem3Element.appendChild(menuItem3Span);


            const menuItem4Element = document.createElement("div");
            menuItem4Element.setAttribute("id", "custom-menu-item-2");
            menuItem4Element.setAttribute("data-name", "menuItem2");
            menuItem4Element.classList.add("n-tabs-tab");
            menuItem4Element.style.marginLeft = "20px"; // Add margin to the new tab

            const menuItem4Span = document.createElement("span");
            menuItem4Span.classList.add("n-tabs-tab__label");
            menuItem4Span.textContent = "Request an App ";
            menuItem4Element.appendChild(menuItem4Span);

            // Append the new divs next to the existing element
            // existingElement.parentNode.insertBefore(
            //     previewVideoElement,
            //     existingElement.nextSibling
            // );
            // existingElement.parentNode.insertBefore(
            //     menuItem1Element,
            //     previewVideoElement.nextSibling
            // );
            // existingElement.parentNode.insertBefore(
            //     menuItem2Element,
            //     menuItem1Element.nextSibling
            // );
            // existingElement.parentNode.insertBefore(
            //     menuItem3Element,
            //     menuItem2Element.nextSibling
            // );
            // existingElement.parentNode.insertBefore(
            //     menuItem4Element,
            //     menuItem3Element.nextSibling
            // );

            // Add click event listeners to the newly created tabs
            // previewVideoElement.addEventListener("click", handleTabClickOnPreviewVideo);
            // menuItem1Element.addEventListener("click", handleTabClickOnMenuItem1);
            // menuItem2Element.addEventListener("click", handleTabClickOnMenuItem2);
            // menuItem3Element.addEventListener("click", handleTabClickOnMenuItem3);
            // menuItem4Element.addEventListener("click", handleTabClickOnMenuItem4);

            console.log("New elements appended successfully.");
          } else {
            // Element not found, try again after some time
            console.log(
              'Element with data-name="overview" not found. Retrying...'
            );
            setTimeout(findElement, 500); // Retry after 500ms
          }
        }

        // Start looking for the element
        findElement();
      } else {
        console.log('URL does not contain "integration". Function not executed.');
      }
    }
    // function handleTabClickOnMenuItem2(event) {
    //     console.log("Menu Item 2 clicked");
    //     showIframe(`https://apps.alltheapps.io/app/${companyId}`);
    // }
    function handleTabClickOnMenuItem2(event) {
      console.log("Menu Item 1 clicked");


      document.querySelectorAll('.n-tabs-tab').forEach(tab => {
        // Check if the tab element has the attribute role="tab"


        tab.addEventListener('click', event => {
          if (tab.getAttribute('role') === 'tab') {
            console.log('custom');

            document.querySelector("#custom_iframe").style.display = "none"

            document.querySelector(".tab-panels").children[0].children[0].style.display = "block"

          }
          document.querySelectorAll('.n-tabs-tab').forEach(item => {
            item.classList.remove('n-tabs-tab--active');
            window.iframeOpen = false;
          });
          event.currentTarget.classList.add('n-tabs-tab--active');
        });
      });


      // Use companyId if locationId is undefined or falsy
      // const loc = (typeof locationId === "undefined" || !locationId) ? companyId : locationId;
      if (locationId) {

        //   showIframe(`https://apps.alltheapps.io/support/${companyId}/${locationId}/faq`);
        showIframe(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/support`);
        console.log(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/support`)

      } else {

        showIframe(`https://apps.alltheapps.io/updated_app/${companyId}/support`);
        console.log(`https://apps.alltheapps.io/updated_app/${companyId}/support`)

      }
    }

    function handleTabClickOnMenuItem1(event) {
      console.log("Menu Item 1 clicked");


      document.querySelectorAll('.n-tabs-tab').forEach(tab => {
        // Check if the tab element has the attribute role="tab"


        tab.addEventListener('click', event => {
          if (tab.getAttribute('role') === 'tab') {
            console.log('custom');

            document.querySelector("#custom_iframe").style.display = "none"

            document.querySelector(".tab-panels").children[0].children[0].style.display = "block"

          }
          document.querySelectorAll('.n-tabs-tab').forEach(item => {
            item.classList.remove('n-tabs-tab--active');
            window.iframeOpen = false;
          });
          event.currentTarget.classList.add('n-tabs-tab--active');
        });
      });


      // Use companyId if locationId is undefined or falsy
      // const loc = (typeof locationId === "undefined" || !locationId) ? companyId : locationId;
      if (locationId) {

        //   showIframe(`https://apps.alltheapps.io/support/${companyId}/${locationId}/faq`);
        showIframe(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/faq`);
        console.log(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/faq`)

      } else {

        showIframe(`https://apps.alltheapps.io/updated_app/${companyId}/faq`);
        console.log(`https://apps.alltheapps.io/updated_app/${companyId}/faq`)

      }
    }

    function handleTabClickOnMenuItem3(event) {
      console.log("Menu Item 3 clicked");


      document.querySelectorAll('.n-tabs-tab').forEach(tab => {
        // Check if the tab element has the attribute role="tab"


        tab.addEventListener('click', event => {
          if (tab.getAttribute('role') === 'tab') {
            console.log('custom');

            document.querySelector("#custom_iframe").style.display = "none"

            document.querySelector(".tab-panels").children[0].children[0].style.display = "block"

          }
          document.querySelectorAll('.n-tabs-tab').forEach(item => {
            item.classList.remove('n-tabs-tab--active');
            window.iframeOpen = false;
          });
          event.currentTarget.classList.add('n-tabs-tab--active');
        });
      });

      // const loc = (typeof locationId === "undefined" || !locationId) ? companyId : locationId;
      if (locationId) {

        // showIframe(`https://apps.alltheapps.io/support/${companyId}/${locationId}/roadmap/request/679b39946ff296a888c4cc16/app`);
        showIframe(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/roadmap`);
        console.log(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/roadmap`)
      } else {

        showIframe(`https://apps.alltheapps.io/updated_app/${companyId}/roadmap`);
        console.log(`https://apps.alltheapps.io/updated_app/${companyId}/roadmap`)
      }

    }

    function handleTabClickOnMenuItem4(event) {

      console.log("Menu Item 3 clicked");


      document.querySelectorAll('.n-tabs-tab').forEach(tab => {
        // Check if the tab element has the attribute role="tab"


        tab.addEventListener('click', event => {
          if (tab.getAttribute('role') === 'tab') {
            console.log('custom');

            document.querySelector("#custom_iframe").style.display = "none"

            document.querySelector(".tab-panels").children[0].children[0].style.display = "block"

          }
          document.querySelectorAll('.n-tabs-tab').forEach(item => {
            item.classList.remove('n-tabs-tab--active');
            window.iframeOpen = false;
          });
          event.currentTarget.classList.add('n-tabs-tab--active');
        });
      });

      // const loc = (typeof locationId === "undefined" || !locationId) ? companyId : locationId;
      // showIframe(`https://apps.alltheapps.io/support/${companyId}/${loc}/request`);
      if (locationId) {

        // showIframe(`https://apps.alltheapps.io/support/${companyId}/${locationId}/request`)
        showIframe(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/request`)
        console.log(`https://apps.alltheapps.io/updated_app/support/${companyId}/${locationId}/request`)
      } else {

        showIframe(`https://apps.alltheapps.io/updated_app/${companyId}/request`);
        console.log(`https://apps.alltheapps.io/updated_app/${companyId}/request`)

      }
    }

    function handleTabClickOnPreviewVideo(event) {
      console.log("Preview Video clicked");


      document.querySelectorAll('.n-tabs-tab').forEach(tab => {
        // Check if the tab element has the attribute role="tab"


        tab.addEventListener('click', event => {
          if (tab.getAttribute('role') === 'tab') {
            console.log('custom');

            document.querySelector("#custom_iframe").style.display = "none"

            document.querySelector(".tab-panels").children[0].children[0].style.display = "block"

          }
          document.querySelectorAll('.n-tabs-tab').forEach(item => {
            item.classList.remove('n-tabs-tab--active');
            window.iframeOpen = false;
          });
          event.currentTarget.classList.add('n-tabs-tab--active');
        });
      });

      showIframe("https://goole.com/request-app");
    }



    function showIframe(url) {
      console.log(url, "urlurlurlurl")
      const panelAllApps = document.querySelector(".tab-panels").children[0];
      if (panelAllApps) {
        // Hide all inner elements of panelAllApps
        Array.from(panelAllApps.children).forEach(child => {
          child.style.display = "none";
        });

        // Create and append the iframe
        let iframe = document.getElementById("custom_iframe");
        if (iframe) {
          iframe.src = url;
          iframe.style.display = "block";
        } else {
          iframe = document.createElement("iframe");
          iframe.id = "custom_iframe";
          iframe.src = url;
          iframe.style.width = "100%";
          iframe.style.height = "100vh";
          iframe.style.border = "none";
          panelAllApps.appendChild(iframe);
        }
      }
    }

    function handleExistingTabClick(event) {
      console.log("Existing tab clicked");
      const panelAllApps = document.getElementById("panel-allApps");
      if (panelAllApps) {
        panelAllApps.style.display = "block";
      }

      const iframe = document.getElementById("custom_iframe");
      if (iframe) {
        iframe.style.display = "none";
      }
    }





    //     function setupArticlesAndModal() {
    //       console.log("setupArticlesAndModal");

    //       // Create a reusable modal
    //       const modal = document.createElement("div");
    //       modal.style.display = "none";
    //       modal.style.position = "fixed";
    //       modal.style.top = "50%";
    //       modal.style.left = "50%";
    //       modal.style.transform = "translate(-50%, -50%)";
    //       modal.style.width = "80%";
    //       modal.style.height = "80%";
    //       modal.style.background = "white";
    //       modal.style.border = "1px solid #ccc";
    //       modal.style.zIndex = "1000";
    //       modal.style.padding = "20px";
    //       modal.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.2)";
    //       modal.style.borderRadius = "8px";

    //       // Add a close button to the modal
    //       const closeButton = document.createElement("button");
    //       closeButton.textContent = "Close";
    //       closeButton.style.float = "right";
    //       closeButton.style.marginBottom = "10px";
    //       closeButton.style.padding = "8px 16px";
    //       closeButton.style.background = "#ff4d4f";
    //       closeButton.style.color = "#fff";
    //       closeButton.style.border = "none";
    //       closeButton.style.borderRadius = "4px";
    //       closeButton.style.cursor = "pointer";
    //       closeButton.style.fontSize = "14px";
    //       closeButton.addEventListener("click", () => {
    //           modal.style.display = "none";
    //       });

    //       // Add hover effect for close button
    //       closeButton.addEventListener("mouseover", () => {
    //           closeButton.style.background = "#e04447";
    //       });
    //       closeButton.addEventListener("mouseout", () => {
    //           closeButton.style.background = "#ff4d4f";
    //       });

    //       // Add an iframe to the modal
    //       const iframe = document.createElement("iframe");
    //       iframe.style.width = "100%";
    //       iframe.style.height = "calc(100% - 40px)"; // Leave space for the close button
    //       iframe.src = ""; // The URL will be set dynamically

    //       // Append the close button and iframe to the modal
    //       modal.appendChild(closeButton);
    //       modal.appendChild(iframe);

    //       // Append the modal to the body
    //       document.body.appendChild(modal);

    //       // Function to add buttons to articles
    //       function addButtonsToArticles() {
    //           const articles = document.querySelectorAll('[role="article"]');

    //           articles.forEach((article, index) => {
    //               // Find all .n-tag elements in the current article
    //               const nTags = article.querySelectorAll(".n-tag");

    //               // Check if there are at least two .n-tag elements and button is not already added
    //               if (nTags.length > 1 && !article.querySelector(".custom-modal-button")) {
    //                   // Create a button
    //                   const button = document.createElement("button");
    //                   button.textContent = `Open Modal ${index + 1}`;
    //                   button.classList.add("custom-modal-button");

    //                   // Add proper styling to the button
    //                   button.style.padding = "5px 10px";
    //                   button.style.marginLeft = "10px";
    //                   button.style.marginTop = "10px";
    //                   button.style.backgroundColor = "#4CAF50"; // Green background
    //                   button.style.color = "white"; // White text
    //                   button.style.border = "none";
    //                   button.style.borderRadius = "3px";
    //                   button.style.fontSize = "12px";
    //                   button.style.cursor = "pointer";
    //                   button.style.transition = "all 0.3s ease";

    //                   // Add hover effect for the button
    //                   button.addEventListener("mouseover", () => {
    //                       button.style.backgroundColor = "#45a049"; // Darker green
    //                   });
    //                   button.addEventListener("mouseout", () => {
    //                       button.style.backgroundColor = "#4CAF50";
    //                   });

    //                   // Append the button after the second .n-tag
    //                   nTags[1].parentNode.insertBefore(button, nTags[1].nextSibling);

    //                   // Add click event to the button
    //                   button.addEventListener("click", () => {
    //                       iframe.src = `https://example.com/article-${index + 1}`; // Set a dynamic URL
    //                       modal.style.display = "block";
    //                   });
    //               }
    //           });
    //       }

    //       // Use MutationObserver to detect changes in the DOM
    //       const observer = new MutationObserver(addButtonsToArticles);

    //       // Start observing the document for changes
    //       observer.observe(document.body, { childList: true, subtree: true });

    //       // Initial call to add buttons to existing articles
    //       addButtonsToArticles();
    // function setupArticlesAndModal() {
    //     console.log("setupArticlesAndModal");

    //     const modal = document.createElement("div");
    //     Object.assign(modal.style, {
    //         display: "none",
    //         position: "fixed",
    //         top: "50%",
    //         left: "50%",
    //         transform: "translate(-50%, -50%)",
    //         width: "60%",
    //         maxWidth: "800px",
    //         height: "60%",
    //         background: "#000",
    //         borderRadius: "10px",
    //         overflow: "hidden",
    //         zIndex: "1000",
    //         boxShadow: "0 4px 10px rgba(0,0,0,0.6)"
    //     });

    //     const closeButton = document.createElement("button");
    //     closeButton.innerHTML = '<i class="fas fa-times fa-2x"></i>';
    //     Object.assign(closeButton.style, {
    //         position: "absolute",
    //         top: "10px",
    //         right: "15px",
    //         background: "none",
    //         border: "none",
    //         color: "#fff",
    //         cursor: "pointer"
    //     });

    //     const iframe = document.createElement("iframe");
    //     Object.assign(iframe.style, {
    //         width: "100%",
    //         height: "100%",
    //         border: "none"
    //     });

    //     closeButton.addEventListener("click", () => {
    //         iframe.src = "";
    //         modal.style.display = "none";
    //     });

    //     modal.appendChild(closeButton);
    //     modal.appendChild(iframe);
    //     document.body.appendChild(modal);

    //     function addButtonsToArticles() {
    //         const articles = document.querySelectorAll('[role="article"]');
    //         articles.forEach((article) => {
    //             const imgSrc = article.querySelector("img")?.src;
    //             if (!imgSrc) return;
    //             const match = imgSrc.match(/\/apps\/([^/]+)/);
    //             const id = match ? match[1] : null;
    //             const matched = videoUrls.filter(item => item.appid === id);
    //             if (!matched.length || !matched[0].videoUrl) return;

    //             const nTags = article.querySelectorAll(".n-tag");
    //             if (nTags.length > 0 && !article.querySelector(".custom-modal-button")) {
    //                 const button = document.createElement("button");
    //                 button.innerHTML = '<i class="fas fa-info-circle"></i>';
    //                 button.classList.add("custom-modal-button");
    //                 Object.assign(button.style, {
    //                     padding: "5px 10px",
    //                     marginLeft: "10px",
    //                     backgroundColor: "#E8FDF3",
    //                     color: "#00C853",
    //                     border: "1px solid #00C853",
    //                     borderRadius: "15px",
    //                     fontSize: "12px",
    //                     cursor: "pointer"
    //                 });

    //                 if (nTags[1]) {
    //                     nTags[1].parentNode.insertBefore(button, nTags[1].nextSibling);
    //                 } else {
    //                     nTags[0].parentNode.insertBefore(button, nTags[0].nextSibling);
    //                 }

    //                 button.addEventListener("click", event => {
    //                     event.stopPropagation();
    //                     iframe.src = `https://www.youtube.com/embed/${matched[0].videoUrl}?autoplay=1`;
    //                     modal.style.display = "block";
    //                 });
    //             }
    //         });
    //     }

    //     const observer = new MutationObserver(addButtonsToArticles);
    //     observer.observe(document.body, { childList: true, subtree: true });
    //     addButtonsToArticles();
    // }



    function setupArticlesAndModal() {
      console.log("setupArticlesAndModal");

      // Modal is now created inside a function so it can be recreated each time
      function createModal() {
        const modal = document.createElement("div");
        Object.assign(modal.style, {
          position: "fixed",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: "60%",
          maxWidth: "800px",
          height: "60%",
          background: "#000",
          borderRadius: "10px",
          overflow: "hidden",
          zIndex: "1000",
          boxShadow: "0 4px 10px rgba(0,0,0,0.6)"
        });

        const closeButton = document.createElement("button");
        closeButton.innerHTML = '<i class="fas fa-times fa-2x"></i>';
        Object.assign(closeButton.style, {
          position: "absolute",
          top: "10px",
          right: "15px",
          background: "none",
          border: "none",
          color: "#fff",
          cursor: "pointer"
        });

        const iframe = document.createElement("iframe");
        Object.assign(iframe.style, {
          width: "100%",
          height: "100%",
          border: "none"
        });

        closeButton.addEventListener("click", () => {
          iframe.src = "";
          // Remove the modal from DOM instead of hiding
          document.body.removeChild(modal);
        });

        modal.appendChild(closeButton);
        modal.appendChild(iframe);

        return { modal, iframe };
      }

      function addButtonsToArticles() {
        // const articles = document.querySelectorAll('[role="article"]');

        const articles = document.querySelectorAll(".crm-marketplace-app-details-card")
        articles.forEach((article) => {
          const imgSrc = article.querySelector("img")?.src;
          if (!imgSrc) return;
          const match = imgSrc.match(/\/apps\/([^/]+)/);
          const id = match ? match[1] : null;
          const matched = videoUrls.filter(item => item.appid === id);
          if (!matched.length || !matched[0].videoUrl) return;

          const nTags = article.querySelectorAll(".n-tag");
          if (nTags.length > 0 && !article.querySelector(".custom-modal-button")) {
            const button = document.createElement("button");
            button.innerHTML = '<i class="fas fa-info-circle"></i>';
            button.classList.add("custom-modal-button");
            Object.assign(button.style, {
              padding: "5px 10px",
              marginLeft: "10px",
              backgroundColor: "#E8FDF3",
              color: "#00C853",
              border: "1px solid #00C853",
              borderRadius: "15px",
              fontSize: "12px",
              cursor: "pointer"
            });

            if (nTags[1]) {
              nTags[1].parentNode.insertBefore(button, nTags[1].nextSibling);
            } else {
              nTags[0].parentNode.insertBefore(button, nTags[0].nextSibling);
            }

            button.addEventListener("click", event => {
              event.stopPropagation();

              // Create a new modal each time button is clicked
              const { modal, iframe } = createModal();
              iframe.src = `https://www.youtube.com/embed/${matched[0].videoUrl}?autoplay=1`;
              document.body.appendChild(modal);
            });
          }
        });
      }

      const observer = new MutationObserver(addButtonsToArticles);
      observer.observe(document.body, { childList: true, subtree: true });
      addButtonsToArticles();
    }







    function handleTabClickOnPreviewVideo(event) {
      // Select all elements with the class 'n-tabs-tab'
      // const allTabs = document.querySelectorAll(".n-tabs-tab");

      // Remove the 'n-tabs-tab--active' class from all tabs
      // allTabs.forEach((tab) => tab.classList.remove("n-tabs-tab--active"));

      // Add the 'n-tabs-tab--active' class to the clicked tab
      // event.currentTarget.classList.add("n-tabs-tab--active");

      // Get the tab pane element
      // const allTabPanes = document.querySelector(".n-tab-pane");

      // Show or hide the tab pane based on which tab was clicked
      if (event.currentTarget.id === "custom-overview-tab") {
        // New tab clicked, hide the tab pane
        previewModal();
        if (allTabPanes) {
          allTabPanes.style.display = "none";
        }
      } else {
        // Existing tab clicked, show the tab pane
        if (allTabPanes) {
          allTabPanes.style.display = "";
        }
      }

      console.log("Tab clicked:", event.currentTarget.textContent);
    }

    function showVideoModal() {
      // Remove existing modal if it exists
      const existingModal = document.getElementById("videoModal");
      if (existingModal) {
        existingModal.parentNode.removeChild(existingModal);
      }

      // Create overlay
      const modalOverlay = document.createElement("div");
      modalOverlay.id = "videoModal";
      modalOverlay.style.position = "fixed";
      modalOverlay.style.top = "0";
      modalOverlay.style.left = "0";
      modalOverlay.style.width = "100%";
      modalOverlay.style.height = "100%";
      modalOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
      modalOverlay.style.display = "flex";
      modalOverlay.style.alignItems = "center";
      modalOverlay.style.justifyContent = "center";
      modalOverlay.style.zIndex = "9999";

      // Create modal content container
      const modalContent = document.createElement("div");
      modalContent.style.position = "relative";
      modalContent.style.width = "80%";
      modalContent.style.maxWidth = "800px";
      modalContent.style.backgroundColor = "#fff";
      modalContent.style.borderRadius = "10px";
      modalContent.style.overflow = "hidden";
      modalContent.style.boxShadow = "0 5px 15px rgba(0,0,0,0.3)";
      modalContent.style.animation = "fadeIn 0.5s";

      // Close button
      const closeButton = document.createElement("button");
      closeButton.innerHTML = "&times;";
      closeButton.style.position = "absolute";
      closeButton.style.top = "10px";
      closeButton.style.right = "15px";
      closeButton.style.fontSize = "30px";
      closeButton.style.background = "none";
      closeButton.style.border = "none";
      closeButton.style.cursor = "pointer";
      closeButton.style.color = "#aaa";
      closeButton.addEventListener("mouseenter", function () {
        closeButton.style.color = "#000";
      });
      closeButton.addEventListener("mouseleave", function () {
        closeButton.style.color = "#aaa";
      });
      closeButton.addEventListener("click", function () {
        document.body.removeChild(modalOverlay);
      });

      // Video iframe
      const iframe = document.createElement("iframe");
      iframe.src = "https://www.youtube.com/embed/eMgKV_XKqNo?autoplay=1&rel=0";
      iframe.width = "100%";
      iframe.height = "450px";
      iframe.style.border = "none";

      // Append elements
      modalContent.appendChild(closeButton);
      modalContent.appendChild(iframe);
      modalOverlay.appendChild(modalContent);
      document.body.appendChild(modalOverlay);

      // Optional: Add fade-in animation via CSS
      const style = document.createElement("style");
      style.innerHTML = `
      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }`;
      document.head.appendChild(style);
    }

    function previewModal() {
      showVideoModal();
    }

    function AllAppButton(name) {
      console.log("AllAppButton function called");
      window.iframeOpen = false;
      let hiddenElements = [];
      let iframe = null;

      function restoreElements() {
        hiddenElements.forEach(el => (el.style.display = ""));
        hiddenElements = [];
        if (iframe && iframe.parentNode) {
          iframe.parentNode.removeChild(iframe);
          iframe = null;
        }
        window.iframeOpen = false;
      }

      document.addEventListener("click", (event) => {
        if (window.iframeOpen) {
          const clickedElement = event.target;
          if (
            clickedElement.matches(".py-2.cursor-pointer") &&
            !clickedElement.closest("#newButton")
          ) {
            restoreElements();
          }
        }
      });

      if (window.location.href.includes("integration")) {
        const hideTabsBarInterval = setInterval(() => {
          const nTabsBar = document.querySelector(".n-tabs-bar");
          if (nTabsBar) {
            nTabsBar.style.display = "none";
            clearInterval(hideTabsBarInterval);
          }
        }, 500);

        function addNewButton() {
          document.querySelectorAll(".py-2.cursor-pointer").forEach((button) => {
            button.removeEventListener("click", handleButtonClick);
            button.addEventListener("click", handleButtonClick);
          });
          document.querySelectorAll(".mb-2.capitalize").forEach((button) => {
            button.removeEventListener("click", handleButtonClick);
            button.addEventListener("click", handleButtonClick);
          });

          function handleButtonClick() {
            const iframe = document.getElementById("custom_iframe");
            if (iframe) {
              iframe.style.display = "none";
            }
          }

          // Always check if the button exists or not when we come back:
          const checkContainer = setInterval(() => {
            if (!document.getElementById("newButton")) {
              const container = document.querySelector(
                ".row-start-1.row-end-4 .mt-2 .n-collapse"
              );
              if (container && container.children.length <= 4) {
                const newButtonHTML = `
                  <div class="n-collapse-item n-collapse-item--left-arrow-placement n-collapse-item--trigger-area-main n-collapse-item--trigger-area-extra" id="newButton">
                    <div class="n-collapse-item__header" style="cursor: pointer;">
                      <div>${allAppssupportButtonText}</div>
                    </div>
                  </div>
                `;
                container.insertAdjacentHTML("afterbegin", newButtonHTML);

                document.getElementById("newButton").addEventListener("click", () => {
                  console.log(" new")

                  if (window.iframeOpen) return;
                  const footer = document.querySelector("#marketplace")?.querySelector("footer");
                  if (footer) {
                    footer.style.display = "none";
                    hiddenElements.push(footer);
                  }
                  const firstChild = document.querySelector("#marketplace")?.children[0];
                  if (firstChild) {
                    Array.from(firstChild.children).forEach(child => {
                      if (child.tagName.toLowerCase() !== "nav") {
                        child.style.display = "none";
                        hiddenElements.push(child);
                      }
                    });
                  }
                  iframe = document.getElementById("custom_iframe");
                  if (iframe) {
                    iframe.src = "https://apps.alltheapps.io/";
                    iframe.style.height = "100vh";
                  } else {
                    const mainComponent = document.querySelector("#marketplace").children[0]
                    // const mainComponent = document
                    //   .querySelector(".n-config-provider")
                    //   .querySelectorAll(".w-full")[1].children[0].children[1];
                    iframe = document.createElement("iframe");
                    iframe.src = "https://apps.alltheapps.io/";
                    iframe.style.width = "70vw";
                    iframe.style.height = "100vh";
                    iframe.style.border = "none";
                    iframe.id = "custom_iframe";
                    mainComponent.appendChild(iframe);
                  }
                  window.iframeOpen = true;
                });
              }
            }
          }, 500);
        }
        addNewButton();
      } else {
        console.log('URL does not contain "integration". Function not executed.');
      }
    }

    // Function to handle tab activation
    function handleTabClick(event) {
      console.log("handel tab click ")
      // Select all elements with the class 'n-tabs-tab'
      const allTabs = document.querySelectorAll(".n-tabs-tab");

      // Remove the 'n-tabs-tab--active' class from all tabs
      allTabs.forEach((tab) => tab.classList.remove("n-tabs-tab--active"));

      // Add the 'n-tabs-tab--active' class to the clicked tab
      event.currentTarget.classList.add("n-tabs-tab--active");

      // Get the tab pane element
      const allTabPanes = document.querySelector(".n-tab-pane");

      // Show or hide the tab pane based on which tab was clicked
      if (event.currentTarget.id === "custom-overview-tab") {
        // New tab clicked, hide the tab pane and show iframe
        if (allTabPanes) {
          allTabPanes.children[0].style.display = "none";
        }

        // SupportSection hide
        const supportSection = document.getElementById("SupportSection");
        if (supportSection) {
          supportSection.style.display = "none";
        }

        // Check if 'custom_iframe' already exists
        let iframe = document.getElementById("custom_iframe");
        if (iframe) {
          // If it exists, update the src
          console.log("menu change");
          iframe.src = "https://example.com";
          iframe.style.height = "100vh";
        } else {
          // If it doesn't exist, create and append the iframe
          iframe = document.createElement("iframe");
          iframe.src = "https://example.com";
          iframe.style.width = "100%";
          iframe.style.height = "100vh";
          iframe.style.border = "none";
          iframe.id = "custom_iframe";

          // Append the iframe to the tab pane
          allTabPanes.appendChild(iframe);
        }
      } else {
        // supportSection show
        // Existing tab clicked, show the tab pane and remove iframe
        if (allTabPanes) {
          console.log("existing tab clicked");
          allTabPanes.children[0].style.display = "block";

          // supportSection(integrationId)
          // const iframe = allTabPanes.querySelector("iframe");
          // if (iframe) {
          //   allTabPanes.removeChild(iframe);
          // }
        }

        const supportSection = document.getElementById("SupportSection");
        if (supportSection) {
          supportSection.style.display = "block";
        }

        let iframe = document.getElementById("custom_iframe");
        if (iframe) {
          // If it exists, update the src
          console.log("menu change");
          iframe.src = "https://google.com";
          iframe.style.height = "400px";
        } else {
          // If it doesn't exist, create and append the iframe
          iframe = document.createElement("iframe");
          iframe.src = "https://google.com";
          iframe.style.width = "100%";
          iframe.style.height = "100vh";
          iframe.style.border = "none";
          iframe.id = "custom_iframe";
        }
      }

      console.log("Tab clicked:", event.currentTarget.textContent);
    }

    // Call the function to execute

    function createModal(url) {
      // Create modal
      var modal = document.createElement("div");
      modal.id = "customModal";
      modal.style.position = "fixed";
      modal.style.top = "0";
      modal.style.left = "0";
      modal.style.width = "100%";
      modal.style.height = "100%";
      modal.style.backgroundColor = "rgba(0,0,0,0.5)";
      modal.style.display = "flex";
      modal.style.alignItems = "center";
      modal.style.justifyContent = "center";
      modal.style.zIndex = "1000";

      // Modal content container
      var modalContent = document.createElement("div");
      modalContent.style.position = "relative";
      modalContent.style.width = "80%";
      modalContent.style.height = "80%";
      modalContent.style.backgroundColor = "#fff";
      modalContent.style.borderRadius = "10px";
      modalContent.style.overflow = "hidden";

      // Close button
      var closeButton = document.createElement("span");
      closeButton.innerHTML = "&times;";
      closeButton.style.position = "absolute";
      closeButton.style.top = "10px";
      closeButton.style.right = "20px";
      closeButton.style.fontSize = "30px";
      closeButton.style.cursor = "pointer";
      closeButton.addEventListener("click", function () {
        document.body.removeChild(modal);
      });

      // Loading animation
      var loading = document.createElement("div");
      loading.className = "loading-spinner";
      loading.style.position = "absolute";
      loading.style.top = "50%";
      loading.style.left = "50%";
      loading.style.transform = "translate(-50%, -50%)";

      // CSS for loading animation
      var style = document.createElement("style");
      style.type = "text/css";
      style.innerHTML = `
          .loading-spinner {
              border: 8px solid #f3f3f3;
              border-top: 8px solid #3498db;
              border-radius: 50%;
              width: 60px;
              height: 60px;
              animation: spin 1s linear infinite;
          }
          
          @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
          }`;
      document.head.appendChild(style);

      // Iframe
      var iframe = document.createElement("iframe");
      iframe.src = url;
      iframe.style.width = "100%";
      iframe.style.height = "100%";
      iframe.style.border = "none";
      iframe.onload = function () {
        modalContent.removeChild(loading);
      };

      modalContent.appendChild(closeButton);
      modalContent.appendChild(loading);
      modalContent.appendChild(iframe);
      modal.appendChild(modalContent);
      document.body.appendChild(modal);
    }

    // function checkLocation() {
    //     var newPath = window.location.pathname;
    //     var level = newPath.split("/v2/location/");
    //     var location = level[1].split("/")[1];
    //     var path = level[1].split("/")[2];
    //     var contactId = level[1].split("/")[3];

    //     return { location, path, contactId };
    // }

    function getContactIdFromUrl() {
      const url = window.location.href;
      const match = url.match(/\/contacts\/detail\/([^\/?#]+)/);
      return match ? match[1] : null;
    }

    function UrlDetect() {
      var initialPathname = window.location.pathname;
      setInterval(function () {
        if (window.location.pathname !== initialPathname) {

          var Path = window.location.pathname;
          const url = window.location.href;
          const locationId = getLocationId(url);

          onLoad();

          initialPathname = window.location.pathname;
        }
      }, 500);
    }
  });
}, 3000);







// ==== ATA Cancel Subscription Feedback Interceptor (isolated, self-guarded) ====
(function () {
  if (window.__ataCancelInterceptorInstalled) return;
  window.__ataCancelInterceptorInstalled = true;

  var API_BASE = "https://v3api.alltheapps.io/api/v1/cancellationConfig";
  var THEME_API_BASE = "https://v3api.alltheapps.io/api/agency_app/ghltheme";
  var DEFAULT_COLOR = "#7c3aed";
  var bypass = false;
  var configCache = null;
  var configCompanyId = null;
  var colorCache = null;
  var colorCompanyId = null;

  function isOnBillingPage() {
    return window.location.pathname.indexOf("company-billing") !== -1;
  }

  function getLocationId() {
    var m = window.location.pathname.match(/\/v2\/location\/([^/]+)/);
    return m ? m[1] : "";
  }

  function getCompanyId() {
    return AppUtils.Utilities.getCompany()
      .then(function (company) { return (company && company.id) || ""; })
      .catch(function () { return ""; });
  }

  function getUserEmail() {
    return AppUtils.Utilities.getCurrentUser()
      .then(function (user) { return (user && (user.email || user.userEmail)) || ""; })
      .catch(function () { return ""; });
  }

  function fetchConfig(companyId) {
    if (configCache && configCompanyId === companyId) return Promise.resolve(configCache);
    return fetch(API_BASE + "/config?company_id=" + encodeURIComponent(companyId))
      .then(function (r) { return r.json(); })
      .then(function (res) {
        configCache = res && res.data;
        configCompanyId = companyId;
        return configCache;
      })
      .catch(function () { return null; });
  }

  function getBackgroundValue(colorObj) {
    if (!colorObj || !colorObj.stops) return "";
    var angle = colorObj.angle;
    var stops = colorObj.stops;
    var first = stops[0] && stops[0].color;
    var last = stops[1] && stops[1].color;
    if (!first || !last) return "";
    if (first === last) return first;
    return "linear-gradient(" + angle + "deg, " + first + " " + stops[0].position + "%, " + last + " " + stops[1].position + "%)";
  }

  function fetchBrandColor(companyId) {
    if (colorCache && colorCompanyId === companyId) return Promise.resolve(colorCache);
    return fetch(THEME_API_BASE + "?company_id=" + encodeURIComponent(companyId))
      .then(function (r) { return r.json(); })
      .then(function (res) {
        var raw = res && res.data && res.data[0] && res.data[0].brand_colors;
        var color = (raw && getBackgroundValue(raw.primary)) || DEFAULT_COLOR;
        colorCache = color;
        colorCompanyId = companyId;
        return color;
      })
      .catch(function () { return DEFAULT_COLOR; });
  }

  function saveFeedback(payload) {
    return fetch(API_BASE + "/feedback", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    }).catch(function () {});
  }

  function proceedWithCancel(btn, modalContainer) {
    if (modalContainer) modalContainer.removeAttribute("inert");
    bypass = true;
    btn.disabled = false;
    btn.click();
  }

  function escapeHtml(str) {
    var div = document.createElement("div");
    div.textContent = str == null ? "" : str;
    return div.innerHTML;
  }

  function buildPopup(config, btn, companyId, locId, email, modalContainer, primaryColor) {
    var reasons = (config.reasons && config.reasons.length)
      ? config.reasons
      : ["Too expensive", "Missing features I need", "Switching to a different tool", "Not using it enough", "Technical issues or bugs", "Other"];

    // The native "Modify subscription" dialog keeps its own focus trap active
    // underneath our overlay, which steals focus back out of our inputs on every
    // keystroke/click. Making it inert disables that while our popup is open.
    if (modalContainer) modalContainer.setAttribute("inert", "");

    var overlay = document.createElement("div");
    overlay.id = "ata-cancel-feedback-overlay";
    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999999;display:flex;align-items:center;justify-content:center;font-family:Inter,Arial,sans-serif;";

    var checkboxesHtml = reasons.map(function (r, i) {
      return '<label style="display:flex;align-items:center;gap:8px;font-size:14px;color:#374151;margin-bottom:8px;cursor:pointer;">' +
        '<input type="checkbox" data-reason="' + i + '" style="width:16px;height:16px;" />' + escapeHtml(r) + '</label>';
    }).join("");

    overlay.innerHTML =
      '<div style="background:#fff;border-radius:16px;max-width:440px;width:92%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);">' +
        '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;">' +
          '<h2 style="margin:0;font-size:17px;font-weight:700;color:#111827;">Before you go...</h2>' +
          '<button id="ata-cancel-close" style="border:none;background:none;font-size:20px;cursor:pointer;color:#9ca3af;line-height:1;">&times;</button>' +
        '</div>' +
        '<p style="font-size:13px;color:#6b7280;margin:0 0 16px;">Help us understand why you are cancelling</p>' +
        '<div id="ata-cancel-reasons">' + checkboxesHtml + '</div>' +
        '<textarea id="ata-cancel-comment" rows="3" placeholder="Anything else you would like to share? (optional)" style="width:100%;box-sizing:border-box;margin-top:8px;padding:10px;border:1px solid #e5e7eb;border-radius:10px;font-size:13px;resize:none;"></textarea>' +
        '<div style="display:flex;gap:8px;margin-top:16px;">' +
          '<button id="ata-cancel-submit" style="flex:1;padding:10px;border:none;border-radius:10px;background:' + (primaryColor || DEFAULT_COLOR) + ';color:#fff;font-weight:600;font-size:14px;cursor:pointer;">Submit &amp; Cancel</button>' +
          (config.required ? '' : '<button id="ata-cancel-skip" style="padding:10px 16px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#6b7280;font-weight:600;font-size:14px;cursor:pointer;">Skip</button>') +
        '</div>' +
      '</div>';

    document.body.appendChild(overlay);

    var commentField = overlay.querySelector("#ata-cancel-comment");
    // Give the field focus once it's actually mounted and interactive.
    setTimeout(function () { commentField.focus(); }, 0);

    function cleanup() {
      overlay.remove();
    }

    overlay.querySelector("#ata-cancel-close").addEventListener("click", function () {
      // Closing aborts the cancellation entirely — the native click is never re-fired.
      cleanup();
      if (modalContainer) modalContainer.removeAttribute("inert");
      btn.disabled = false;
    });

    overlay.querySelector("#ata-cancel-submit").addEventListener("click", function () {
      var checked = Array.prototype.slice
        .call(overlay.querySelectorAll("[data-reason]"))
        .filter(function (el) { return el.checked; })
        .map(function (el) { return reasons[Number(el.getAttribute("data-reason"))]; });
      var comment = commentField.value;

      saveFeedback({
        company_id: companyId,
        loc_id: locId,
        email: email,
        reasons: checked,
        comment: comment,
      }).then(function () {
        cleanup();
        proceedWithCancel(btn, modalContainer);
      });
    });

    var skipBtn = overlay.querySelector("#ata-cancel-skip");
    if (skipBtn) {
      skipBtn.addEventListener("click", function () {
        cleanup();
        proceedWithCancel(btn, modalContainer);
      });
    }
  }

  document.addEventListener("click", function (e) {
    if (!isOnBillingPage()) return;

    var btn = e.target && e.target.closest ? e.target.closest("#cancel") : null;
    if (!btn) return;

    if (bypass) {
      bypass = false;
      return;
    }

    if (typeof AppUtils === "undefined" || !AppUtils.Utilities) return;

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    btn.disabled = true;
    var locId = getLocationId();
    var modalContainer = btn.closest(".n-modal-container") || btn.closest(".n-modal") || null;

    Promise.all([getCompanyId(), getUserEmail()]).then(function (results) {
      var companyId = results[0];
      var email = results[1];

      if (!companyId) {
        proceedWithCancel(btn, modalContainer);
        return;
      }

      Promise.all([fetchConfig(companyId), fetchBrandColor(companyId)]).then(function (configResults) {
        var config = configResults[0];
        var primaryColor = configResults[1];
        if (!config || config.enabled === false) {
          proceedWithCancel(btn, modalContainer);
          return;
        }
        buildPopup(config, btn, companyId, locId, email, modalContainer, primaryColor);
      });
    });
  }, true);
})();

function runConversationLineSelectorScript() {
  var conversationLineSelectorScript = document.createElement("script");

  conversationLineSelectorScript.src = `https://v3api.alltheapps.io/api/agency_app/conversationLineSelectorScript/get_script`;

  conversationLineSelectorScript.onload = function () {
    console.log("conversationLineSelectorScript is loaded!!!");
  };

  document.head.appendChild(conversationLineSelectorScript);
}
// DISABLED for now — uncomment the line below to re-enable the Twilio line
// selector next to the conversation composer's expand button.
// runConversationLineSelectorScript()