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;
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);
  } 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://api.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]?.custompageMenuText);
    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;
      custompageMenuText = config.custompageMenuText || "Support12";
      // 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 (isSidebarButtonsEnabled) runSideNavButtonScript();
      if (isBottomButtonsEnabled) runBottomButtonScript();
      if (isChatgpt) runChatGptScript();
      if (isButtonBuilder) runButtonBuilderScript();
      if (isLocationMenuLinksEnabled) CreateCustomMenuButtonInSetting();
      if (isChatBubbleEnable) runChatBubbleScript()
        // document.getElementById("683ed93a8ded1a4103d118a2").querySelector(".nav-title").textContent="Asdfasdf"
        function customMenubutton(){
          document.getElementById("683ed93a8ded1a4103d118a2").querySelector(".nav-title").textContent=custompageMenuText;
        }
        customMenubutton()
    }
  } 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 AddButtonForSupport() {
  if (
    (isTopNavForSupport === undefined || isTopNavForSupport === null) &&
    (isBodyForSupportNoRotate === undefined || isBodyForSupportNoRotate === null) &&
    (isBodyForSupport === undefined || isBodyForSupport === null)
  ) {
    isBodyForSupport = true;
  }

  const calendarsFeatureDiscovery = document.querySelector("#CalendarsFeatureDiscovery");
  const supportBtn = document.createElement("div");

  if (isTopNavForSupport) {
    // "topnav" style
    supportBtn.innerHTML = '<i class="fas fa-users"></i>';
    Object.assign(supportBtn.style, {
      width: "32px",
      height: "32px",
      borderRadius: "50%",
      backgroundColor: supportButtonBackgroundColor || "#007bff",
      color: supportButtonColor || "#fff",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      cursor: "pointer",
      boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
      zIndex: 999,
      transition: "transform 0.3s ease",
      marginRight: "-20px"
    });
    supportBtn.onmouseenter = () => { supportBtn.style.transform = "scale(1.05)"; };
    supportBtn.onmouseleave = () => { supportBtn.style.transform = "scale(1)"; };
  } else if (isBodyForSupport) {
    // "body" style with 90-degree rotation
    supportBtn.innerHTML = `
      <button class="buttonForFeedback" style="--clr: ${supportButtonBackgroundColor || "#007bff"};">
        <span class="button-decor"></span>
        <div class="button-content">
          <div class="button__icon">
            <i class="fas fa-users" style="font-size: 16px; color: ${supportButtonColor || "white"};"></i>
          </div>
          <span class="button__text">${supportButtonText ? supportButtonText:"Support"}</span>
        </div>
      </button>
    `;
    Object.assign(supportBtn.style, {
      position: "fixed",
      bottom: "50%",
      right: "5px",
      zIndex: 999,
      cursor: "pointer",
      marginRight: "-40px"
    });
    const style = document.createElement("style");
    style.innerHTML = `
      .buttonForFeedback {
        transform: rotate(-90deg);
        transform-origin: center;
        display: inline-block;
        text-decoration: none;
        line-height: 1;
        border-radius: 1.5rem;
        overflow: hidden;
        position: relative;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        background-color: #fff;
        color: #121212;
        border: none;
        cursor: pointer;
      }
      .button-decor {
        position: absolute;
        inset: 0;
        background-color: var(--clr);
        transform: translateX(-100%);
        transition: transform 0.3s;
        z-index: 0;
      }
      .button-content {
        display: flex;
        align-items: center;
        font-weight: 600;
        position: relative;
        overflow: hidden;
      }
      .button__icon {
        width: 40px;
        height: 40px;
        background-color: var(--clr);
        display: grid;
        place-items: center;
      }
      .button__text {
        display: inline-block;
        transition: color 0.2s;
        padding: 2px 1.5rem 2px;
        padding-left: 0.75rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 150px;
      }
      .button:hover .button__text { color: #fff; }
      .button:hover .button-decor { transform: translate(0); }
    `;
    document.head.appendChild(style);
    supportBtn.onmouseenter = () => {
      supportBtn.querySelector(".button").style.transform = "rotate(-90deg) scale(1.05)";
    };
    supportBtn.onmouseleave = () => {
      supportBtn.querySelector(".button").style.transform = "rotate(-90deg) scale(1)";
    };
  } else if (isBodyForSupportNoRotate) {
    // "body" style with NO rotation
    supportBtn.innerHTML = `
      <button class="buttonForFeedback" style="--clr: ${supportButtonBackgroundColor || "#007bff"};">
        <span class="button-decor"></span>
        <div class="button-content">
          <div class="button__icon">
            <i class="fas fa-users" style="font-size: 16px; color: ${supportButtonColor || "white"};"></i>
          </div>
          <span class="button__text">${supportButtonText}</span>
        </div>
      </button>
    `;
    Object.assign(supportBtn.style, {
      position: "fixed",
      bottom: "20px",
      right: "5px",
      zIndex: 999,
      cursor: "pointer"
    });
    const style = document.eeElement("style");
    style.innerHTML = `
      .buttonForFeedback {
        display: inline-block;
        text-decoration: none;
        line-height: 1;
        border-radius: 1.5rem;
        overflow: hidden;
        position: relative;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        background-color: #fff;
        color: #121212;
        border: none;
        cursor: pointer;
      }
      .button-decor {
        position: absolute;
        inset: 0;
        background-color: var(--clr);
        transform: translateX(-100%);
        transition: transform 0.3s;
        z-index: 0;
      }
      .button-content {
        display: flex;
        align-items: center;
        font-weight: 600;
        position: relative;
        overflow: hidden;
      }
      .button__icon {
        width: 40px;
        height: 40px;
        background-color: var(--clr);
        display: grid;
        place-items: center;
      }
      .button__text {
        display: inline-block;
        transition: color 0.2s;
        padding: 2px 1.5rem 2px;
        padding-left: 0.75rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 150px;
      }
      .button:hover .button__text { color: #fff; }
      .button:hover .button-decor { transform: translate(0); }
    `;
    document.head.appendChild(style);
    supportBtn.onmouseenter = () => {
      supportBtn.querySelector(".button").style.transform = "scale(1.05)";
    };
    supportBtn.onmouseleave = () => {
      supportBtn.querySelector(".button").style.transform = "scale(1)";
    };
  }

  // Create the modal, close button, and iframe
  const modal = document.createElement("div");
  Object.assign(modal.style, {
    display: "none",
    position: "fixed",
    top: "0",
    right: "-40%",
    width: "40%",
    height: "100%",
    backgroundColor: "#fff",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    zIndex: 1000,
    transition: "right 0.3s ease"
  });

  const closeBtn = document.createElement("button");
  closeBtn.innerHTML = '<i class="fa fa-times"></i>';
  Object.assign(closeBtn.style, {
    position: "absolute",
    top: "10px",
    left: "10px",
    backgroundColor: "#ff4d4f",
    color: "#fff",
    border: "none",
    borderRadius: "50%",
    width: "30px",
    height: "30px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
    transition: "background-color 0.3s, transform 0.3s"
  });
  closeBtn.onmouseenter = () => {
    closeBtn.style.backgroundColor = "#e04447";
    closeBtn.style.transform = "scale(1.1)";
  };
  closeBtn.onmouseleave = () => {
    closeBtn.style.backgroundColor = "#ff4d4f";
    closeBtn.style.transform = "scale(1)";
  };

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

  closeBtn.onclick = () => {
    modal.style.right = "-30%";
    setTimeout(() => { modal.style.display = "none"; }, 300);
  };

  supportBtn.onclick = () => {
    const newPath = window.location.pathname;
    const level = newPath?.split("/v2/location/");
    const loc_id = (level[1] && level[1]?.split("/")[0]) || "";
    if (loc_id) {
      iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/${user_id}/support_mini`;
      // iframe.src = `https://apps.alltheapps.io/updated_app/support/${companyId}/${loc_id}/support_mini`;
    } else {
      iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/${userId}/support_updated`;
      // iframe.src = `https://apps.alltheapps.io/updated_app/${companyId}/support_updated`;
    }
    modal.style.display = "block";
    setTimeout(() => { modal.style.right = "0"; }, 10);
  };

  modal.appendChild(iframe);
  modal.appendChild(closeBtn);

  // Insert in correct location
  if (isTopNavForSupport) {
    calendarsFeatureDiscovery.parentNode.insertBefore(supportBtn, calendarsFeatureDiscovery);
  } else {
    document.body.appendChild(supportBtn);
  }
  document.body.appendChild(modal);
}




}

function runFeedbackScript(){  

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

  // Set the source attribute to the jQuery CDN URL
  feedbackScript.src = `https://api.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://api.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 runSideNavButtonScript(){  
  console.log("sideNavButtons")

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

  // Set the source attribute to the jQuery CDN URL
  sideNavButtons.src = `https://api.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://api.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://api.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://api.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
  

}
function runChatGptScript(){  
  console.log("tooltip")


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

  // Set the source attribute to the jQuery CDN URL
  chatGptScript.src = `https://api.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 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://api.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://api.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 runOnpageCustomizerScript(){  
console.log("onpagecustomizerScript")
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://api.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!!!");
};

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

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

// Set the source attribute to the jQuery CDN URL
allTheAppMenuEdit.src = `https://api.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 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://api.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();
            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 UrlDetectForMenuEditForSecondyMenu() {
    
  var initialPathname = window.location.pathname;
  setInterval(function () {
      if (window.location.pathname !== initialPathname) {
        document.querySelectorAll(".customsecondry-menu").forEach((element) => {
          element.remove();
        });
        setupToolsFunctionality();
          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://api.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://api.alltheapps.io/api/v1/webhook/AppIds`;
//     const url2 = `https://api.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 ($("#CalendarsFeatureDiscovery").length > 0) {
//           console.log(customPages.data[0].app_ids, "customPages.data[0].app_ids");
//           clearInterval(checkInterval);
//           if (appIds && appIds.data) {
//             hidding(appIds.data, customPages ? customPages.data[0].app_ids : []);
//           } 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);
//   }
// }

// startMenuScriptForHide();


async function startMenuScriptForHide(){
      console.log("startMenuScriptForHide")
    const url = `https://api.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") {
            var element = $('#' + id);
            if (element.length) {
              console.log("element", id);    
              element.hide();
            }
          }
        });
        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) {
            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);