document.addEventListener("DOMContentLoaded", function () {
  var toggle = document.getElementById("toggle");
  var overlay = document.getElementById("overlay");
  if (toggle) {
    toggle.addEventListener("click", function () {
      toggle.classList.toggle("active");
      overlay.classList.toggle("open");
    });
  }
});

// Get the navbar
const navbar = document.getElementsByClassName("navigation")[0];
if (navbar) {
  // When the user scrolls the page, execute myFunction
  window.onscroll = function () {
    myFunction();
  };
  // Get the offset position of the navbar
  const sticky = navbar.offsetTop;

  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const dropdown = document.querySelectorAll(".mobile-nav-container .dropdown");
  dropdown.forEach((x) => {
    x.addEventListener("click", (e) => {
      if (e.target.classList.contains("fa-caret-down")) {
        e.target.parentElement.nextElementSibling.classList.toggle(
          "dropdown-content-toggle"
        );
      }
    });
  });
});

// menu hover
const dropdowns = document.querySelectorAll(".nav .dropdown");
const header = document.getElementsByTagName("header")[0];
let container = null;
let containerf = null;
let contentAdded = false;
for (let i = 0; i < dropdowns.length; i++) {
  // all
  dropdowns[0].addEventListener("mouseover", function (e) {
    // check this line again
    let content;
    if (e.target.tagName === "A" && e.target.classList.contains("dropbtn")) {
      content = e.target.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    } else if (
      e.target.tagName === "I" &&
      e.target.classList.contains("fa-caret")
    ) {
      content = e.target.parentElement.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    }
    // console.log(content)

    // Clear container
    if (containerf && containerf.parentNode) {
      containerf.parentNode.removeChild(containerf);
    }

    containerf = document.createElement("div");
    containerf.classList.add("container-fluid");
    container = document.createElement("div");
    container.classList.add("container");
    container.style.marginTop = "40px";
    containerf.style.marginTop = "0px";
    container.style.marginBottom = "30px";
    containerf.style.position = "fixed";
    containerf.style.left = "0px";
    // containerf.style.marginTop = "10px";
    containerf.style.zIndex = 10000;
    containerf.style.backgroundColor = "#e9eef5";

    if (e.target.getAttribute("id") === "all") {
      let row = document.createElement("div");
      row.classList.add("row");
      let cols = `<div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>`;
      row.innerHTML = cols;
      row.style.backgroundColor = "#e9eef5";
      row.firstElementChild.innerHTML = `  
          <div class="sub-menu d-flex flex-column  align-items-sm-start  pt-2 w-100 round">
                <ul class="nav nav-pills border" id="submenu">
                  <li class="w-100 border p-2">
                      <a href="#trending" data-custom="trending" data-bs-toggle="collapse"
                      class=" listHead nav-link align-middle px-3">
                      <span class="  d-sm-inline">Trending</span> <div class="diagonal"></div></a>
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#searchbyhalal" data-custom="searchbyhalal" data-bs-toggle="collapse"
                          class=" listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Seach By Halal</span> </a>   
                    </li>
                  <li class="w-100 border p-2">
                      <a href="#searchbyharam" data-custom="searchbyharam" data-bs-toggle="collapse"
                      class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Seach By Haram</span> </a>    
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#searchbymushbooh" data-custom="searchbymushbooh" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Seach By Mushbooh</span> </a>            
                    </li>
                </ul> 
          </div>
        `;
      row.firstElementChild.nextElementSibling.innerHTML = `
      <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round ps-2">
        <ul id="trending" class="nav-pills nav border">
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Live Updates</span></a>
            </li>
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Most Scanned Products</span></a>
            </li>
            <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Recently Reviewed by Shariah Board</span></a>
            </li>
            <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Multi Lingual Products</span></a>
                      </li>
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">View All</span></a>
            </li>
        </ul>
    </div>
        `;

      row.lastChild.innerHTML = `
        <div class="menu-banner d-flex align-middle flex-column">
                    <div class="text-block pt-5 mt-3">
                        <h4 class="fw-bold" style="font-size: 28px;">Download Mustakshif App </h4>
                        <p style="font-size: 20px; line-height:1.2;">Scan barcode, see <br>ingredient and explore Halal <br>products instantly. </p>
                    </div>
                    <div class="btns-block pb-5">
                        <div class="container">

                            <div class="row">
                                <div class="col-md-2 qr">
                                    <a href="#"><img src="./assets/images/qrcode-menu.png" alt=""></a>
                                </div>
                                <div class="col-md-10 btnss d-flex">
                                    <a href="#"><img src="./assets/images/single-apple.png" alt=""></a>
                                    <a href="#"><img src="./assets/images//single-play.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;
      container.appendChild(row);
      containerf.appendChild(container);

      // header.insertAdjacentHTML("afterend", containerf.outerHTML);

      content.innerHTML = containerf.outerHTML;
      contentAdded = true;

      const allSubLinks = document.querySelectorAll("#submenu li a");
      const insideItems = document.createElement("div");
      insideItems.classList.add("col-lg-4", "col-md-4", "col-sm-12", "pe-1");
      allSubLinks[0].parentElement.classList.add("active");
      allSubLinks.forEach((eleme) => {
        eleme.addEventListener("mouseover", function (ev) {
          contentAdded = false;
          if (ev.target.tagName === "A") {
            if (
              ev.target.getAttribute("data-custom") === "trending" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
                <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
                    <ul id="trending" class="nav-pills nav border">
                        <li class="w-100 border p-2">
                          <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Live Updates</span></a>
                        </li>
                        <li class="w-100 border p-2">
                          <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Most Scanned Products</span></a>
                        </li>
                        <li class="w-100 border p-2">
                            <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Recently Reviewed by Shariah Board</span></a>
                        </li>
                        <li class="w-100 border p-2">
                            <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Multi Lingual Products</span></a>
                                  </li>
                        <li class="w-100 border p-2">
                          <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">View All</span></a>
                        </li>
                    </ul>
                </div>
              `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "searchbyhalal" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
                      <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
                        <ul id="searchbyhalal" class="nav-pills nav border">
                          <li class="w-100 border p-2">
                            <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal products in Australia</span></a>
                          </li>
                          <li class="w-100 border p-2">
                            <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Halal products in UK</span></a>
                          </li>
                          <li class="w-100 border p-2">
                            <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Halal products in United States</span></a>
                          </li>
                          <li class="w-100 border p-2">
                            <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Halal products in Canada</span></a>
                          </li>
                        </ul>
                      </div>
              `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "searchbyharam" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
              <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
                <ul id="searchbyharam" class="nav-pills nav border">
                    <li class="w-100 border p-2">
                      <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Haram products in Australia</span></a>
                    </li>
                    <li class="w-100 border p-2">
                      <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Haram products in UK</span></a>
                    </li>
                    <li class="w-100 border p-2">
                      <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Haram products in United States</span></a>
                    </li>
                    <li class="w-100 border p-2">
                      <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Haram products in Canada</span></a>
                    </li>
                </ul>
              </div>
              `;

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "searchbymushbooh" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              console.log();
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
              <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
                    <ul id="searchbymushbooh" class="nav-pills nav border">
                          <li class="w-100 border p-2">
                              <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Mushbooh  products in Australia</span></a>
                          </li>
                          <li class="w-100 border p-2">
                              <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Mushbooh  products in UK</span></a>
                          </li>
                          <li class="w-100 border p-2">
                              <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Mushbooh  products in United States</span></a>
                          </li>
                          <li class="w-100 border p-2">
                              <a href="#" class="listHead nav-link px-0 align-middle px-3 "> <span class=" d-sm-inline">Mushbooh  products in Canada</span></a>
                          </li>
                      </ul>
                </div>
              `;

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            }
          } else if (ev.target.tagName === "SPAN") {
          }
        });
      });
    }

    // if (header.nextElementSibling.classList.contains("container-fluid")) {
    //   header.nextElementSibling.addEventListener("mouseleave", function (eve) {
    //     e.target.style.color = "black";
    //     if (e.target.firstElementChild) {
    //       e.target.firstElementChild.style.color = "black";
    //     }
    //     header.nextElementSibling.style.display = "none";
    //     header.nextElementSibling.remove()
    //   });
    // }
    dropdowns[0].addEventListener("mouseleave", function (el) {
      // if(e.target.tagName === 'A' && e.target.classList.contains('dropbtn')){

      //   link =e.target
      //   content =e.target.nextElementSibling
      //   if (content.firstElementChild) {
      //     content.style.display = "block";
      //     link.style.color = "blue";
      //     if (e.target.firstElementChild) {
      //       e.target.firstElementChild.style.color = "blue";
      //     }
      //     return;
      //   }

      // }
      e.target.style.color = "black";
      if (e.target.firstElementChild) {
        e.target.firstElementChild.style.color = "black";
      }
      if (content) {
        content.style.display = "none";
        if (content.firstElementChild) {
          content.firstElementChild.remove();
        }
      }
    });
  });

  // country
  dropdowns[1].addEventListener("mouseover", function (e) {
    let content;
    if (e.target.tagName === "A" && e.target.classList.contains("dropbtn")) {
      content = e.target.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    } else if (
      e.target.tagName === "I" &&
      e.target.classList.contains("fa-caret")
    ) {
      content = e.target.parentElement.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    }

    // Clear container
    if (containerf && containerf.parentNode) {
      containerf.parentNode.removeChild(containerf);
    }

    containerf = document.createElement("div");
    containerf.classList.add("container-fluid");
    container = document.createElement("div");
    container.classList.add("container");
    container.style.marginTop = "40px";
    containerf.style.marginTop = "0px";
    container.style.marginBottom = "30px";
    containerf.style.position = "fixed";
    containerf.style.left = "0px";
    containerf.style.zIndex = 10000;
    containerf.style.backgroundColor = "#e9eef5";

    if (e.target.getAttribute("id") === "country") {
      let row = document.createElement("div");
      row.classList.add("row");
      let cols = `<div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>`;
      row.innerHTML = cols;
      row.style.backgroundColor = "#e9eef5";
      row.firstElementChild.innerHTML = `  
          <div class="sub-menu d-flex flex-column  align-items-sm-start  pt-2 w-100 round">
                <ul class="nav nav-pills border" id="submenu">
                  <li class="w-100 border p-2">
                      <a href="#australia" data-custom="australia" data-bs-toggle="collapse"
                      class=" listHead nav-link align-middle px-3">
                      <span class="  d-sm-inline">Australia</span> <div class="diagonal"></div></a>
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#unitedkingdom" data-custom="unitedkingdom" data-bs-toggle="collapse"
                          class=" listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">United Kingdom</span> </a>   
                    </li>
                  <li class="w-100 border p-2">
                      <a href="#unitedstates" data-custom="unitedstates" data-bs-toggle="collapse"
                      class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">United States</span> </a>    
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#canada" data-custom="canada" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Canada</span> </a>            
                    </li>
                </ul> 
          </div>
        `;
      row.firstElementChild.nextElementSibling.innerHTML = `
      <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round ps-2">
        <ul id="australia" class="nav-pills nav border">
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
            </li>
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
            </li>
            <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
            </li>
            <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
                      </li>
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
            </li>
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
            </li>
            <li class="w-100 border p-2">
              <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
            </li>
        </ul>
    </div>
        `;

      row.lastChild.innerHTML = `
        <div class="menu-banner d-flex align-middle flex-column">
                    <div class="text-block pt-5 mt-3">
                        <h4 class="fw-bold" style="font-size: 28px;">Download Mustakshif App </h4>
                        <p style="font-size: 20px; line-height:1.2;">Scan barcode, see <br>ingredient and explore Halal <br>products instantly. </p>
                    </div>
                    <div class="btns-block pb-5">
                        <div class="container">

                            <div class="row">
                                <div class="col-md-2 qr">
                                    <a href="#"><img src="./assets/images/qrcode-menu.png" alt=""></a>
                                </div>
                                <div class="col-md-10 btnss d-flex">
                                    <a href="#"><img src="./assets/images/single-apple.png" alt=""></a>
                                    <a href="#"><img src="./assets/images//single-play.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;
      container.appendChild(row);
      containerf.appendChild(container);

      content.innerHTML = containerf.outerHTML;
      contentAdded = true;

      const allSubLinks = document.querySelectorAll("#submenu li a");
      const insideItems = document.createElement("div");
      insideItems.classList.add("col-lg-4", "col-md-4", "col-sm-12", "pe-1");
      allSubLinks[0].parentElement.classList.add("active");
      allSubLinks.forEach((eleme) => {
        eleme.addEventListener("mouseover", function (ev) {
          contentAdded = false;
          if (ev.target.tagName === "A") {
            if (
              ev.target.getAttribute("data-custom") === "australia" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
                <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
                <ul id="australia" class="nav-pills nav border">
                <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
                </li>
                <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
                </li>
                <li class="w-100 border p-2">
                    <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
                </li>
                <li class="w-100 border p-2">
                    <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
                          </li>
                <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
                </li>
                <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
                </li>
                <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
                </li>
            </ul>
                </div>
              `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "unitedkingdom" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
                      <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
                      <ul id="unitedkingdom" class="nav-pills nav border">
                      <li class="w-100 border p-2">
                        <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
                      </li>
                      <li class="w-100 border p-2">
                        <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
                      </li>
                      <li class="w-100 border p-2">
                          <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
                      </li>
                      <li class="w-100 border p-2">
                          <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
                                </li>
                      <li class="w-100 border p-2">
                        <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
                      </li>
                      <li class="w-100 border p-2">
                        <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
                      </li>
                      <li class="w-100 border p-2">
                        <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
                      </li>
                  </ul>
                      </div>
              `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "unitedstates" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
              <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
              <ul id="unitedstates" class="nav-pills nav border">
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
              </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
              </li>
              <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
              </li>
              <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
                        </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
              </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
              </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
              </li>
          </ul>
              </div>
              `;

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "canada" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              console.log();
              ev.target.parentElement.classList.add("active");
              insideItems.innerHTML = `
              <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
              <ul id="canada" class="nav-pills nav border">
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
              </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
              </li>
              <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
              </li>
              <li class="w-100 border p-2">
                  <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
                        </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
              </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
              </li>
              <li class="w-100 border p-2">
                <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
              </li>
          </ul>
                </div>
              `;

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            }
          } else if (ev.target.tagName === "SPAN") {
          }
        });
      });
    }

    dropdowns[1].addEventListener("mouseleave", function (el) {
      e.target.style.color = "black";
      if (e.target.firstElementChild) {
        e.target.firstElementChild.style.color = "black";
      }
      if (content) {
        content.style.display = "none";
        if (content.firstElementChild) {
          content.firstElementChild.remove();
        }
      }
    });
  });

  // brands
  dropdowns[2].addEventListener("mouseover", function (e) {
    let content;
    if (e.target.tagName === "A" && e.target.classList.contains("dropbtn")) {
      content = e.target.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    } else if (
      e.target.tagName === "I" &&
      e.target.classList.contains("fa-caret")
    ) {
      content = e.target.parentElement.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    }
    // Clear container
    if (containerf && containerf.parentNode) {
      containerf.parentNode.removeChild(containerf);
    }
    containerf = document.createElement("div");
    containerf.classList.add("container-fluid");
    container = document.createElement("div");
    container.classList.add("container");
    container.style.marginTop = "40px";
    containerf.style.marginTop = "0px";
    container.style.marginBottom = "30px";
    containerf.style.position = "fixed";
    containerf.style.left = "0px";
    containerf.style.zIndex = 10000;
    containerf.style.backgroundColor = "#e9eef5";

    if (e.target.getAttribute("id") === "brands") {
      let row = document.createElement("div");
      row.classList.add("row");
      let cols = `<div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>`;
      row.innerHTML = cols;
      row.style.backgroundColor = "#e9eef5";
      row.firstElementChild.innerHTML = `  
          <div class="sub-menu d-flex flex-column  align-items-sm-start  pt-2 w-100 round">
                <ul class="nav nav-pills border" id="submenu">
                  <li class="w-100 border p-2">
                      <a href="#cadbury" data-custom="cadbury" data-bs-toggle="collapse"
                      class=" listHead nav-link align-middle px-3">
                      <span class="  d-sm-inline">Cadbury</span> <div class="diagonal"></div></a>
                    </li>
                  <li class="w-100 border p-2">
                    <a href="brands.html" data-custom="nestle" 
                          class=" listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Nestle</span> </a>   
                    </li>
                  <li class="w-100 border p-2">
                      <a href="#masterfoods" data-custom="masterfoods" data-bs-toggle="collapse"
                      class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Masterfoods</span> </a>    
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#dairymilk" data-custom="dairymilk" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Dairy Milk</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#viewall" data-custom="viewall" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">View All</span> </a>            
                    </li>
                </ul> 
          </div>
        `;
      //   row.firstElementChild.nextElementSibling.innerHTML = `
      //   <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round ps-2">
      //     <ul id="australia" class="nav-pills nav border">
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //             <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //             <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
      //                   </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
      //         </li>
      //     </ul>
      // </div>
      //     `;

      row.lastChild.innerHTML = `
        <div class="menu-banner d-flex align-middle flex-column">
                    <div class="text-block pt-5 mt-3">
                        <h4 class="fw-bold" style="font-size: 28px;">Download Mustakshif App </h4>
                        <p style="font-size: 20px; line-height:1.2;">Scan barcode, see <br>ingredient and explore Halal <br>products instantly. </p>
                    </div>
                    <div class="btns-block pb-5">
                        <div class="container">

                            <div class="row">
                                <div class="col-md-2 qr">
                                    <a href="#"><img src="./assets/images/qrcode-menu.png" alt=""></a>
                                </div>
                                <div class="col-md-10 btnss d-flex">
                                    <a href="#"><img src="./assets/images/single-apple.png" alt=""></a>
                                    <a href="#"><img src="./assets/images//single-play.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;
      container.appendChild(row);
      containerf.appendChild(container);

      content.innerHTML = containerf.outerHTML;
      contentAdded = true;

      const allSubLinks = document.querySelectorAll("#submenu li a");
      const insideItems = document.createElement("div");
      insideItems.classList.add("col-lg-4", "col-md-4", "col-sm-12", "pe-1");
      allSubLinks[0].parentElement.classList.add("active");
      allSubLinks.forEach((eleme) => {
        eleme.addEventListener("mouseover", function (ev) {
          contentAdded = false;
          if (ev.target.tagName === "A") {
            if (
              ev.target.getAttribute("data-custom") === "cadbury" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              //   insideItems.innerHTML = `
              //     <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
              //     <ul id="australia" class="nav-pills nav border">
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //         <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //         <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
              //               </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
              //     </li>
              // </ul>
              //     </div>
              //   `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "nestle" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "masterfoods" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "dairymilk" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              console.log();
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "viewall" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            }
          } else if (ev.target.tagName === "SPAN") {
          }
        });
      });
    }

    dropdowns[2].addEventListener("mouseleave", function (el) {
      e.target.style.color = "black";
      if (e.target.firstElementChild) {
        e.target.firstElementChild.style.color = "black";
      }
      if (content) {
        content.style.display = "none";
        if (content.firstElementChild) {
          content.firstElementChild.remove();
        }
      }
    });
  });

  // category
  dropdowns[3].addEventListener("mouseover", function (e) {
    let content;
    if (e.target.tagName === "A" && e.target.classList.contains("dropbtn")) {
      content = e.target.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    } else if (
      e.target.tagName === "I" &&
      e.target.classList.contains("fa-caret")
    ) {
      content = e.target.parentElement.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    }
    // Clear container
    if (containerf && containerf.parentNode) {
      containerf.parentNode.removeChild(containerf);
    }
    containerf = document.createElement("div");
    containerf.classList.add("container-fluid");
    container = document.createElement("div");
    container.classList.add("container");
    container.style.marginTop = "40px";
    containerf.style.marginTop = "0px";
    container.style.marginBottom = "30px";
    containerf.style.position = "fixed";
    containerf.style.left = "0px";
    containerf.style.zIndex = 10000;
    containerf.style.backgroundColor = "#e9eef5";

    if (e.target.getAttribute("id") === "category") {
      let row = document.createElement("div");
      row.classList.add("row");
      let cols = `<div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>`;
      row.innerHTML = cols;
      row.style.backgroundColor = "#e9eef5";
      row.firstElementChild.innerHTML = `  
          <div class="sub-menu d-flex flex-column  align-items-sm-start  pt-2 w-100 round">
                <ul class="nav nav-pills border" id="submenu">
                  <li class="w-100 border p-2">
                      <a href="#fruit-vegetable" data-custom="fruit-vegetable" data-bs-toggle="collapse"
                      class=" listHead nav-link align-middle px-3">
                      <span class="  d-sm-inline">Fruit & Vegetable</span> <div class="diagonal"></div></a>
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#poultry-meat-seafood" data-custom="poultry-meat-seafood" data-bs-toggle="collapse"
                          class=" listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Poultry, Meat & Seafood</span> </a>   
                    </li>
                  <li class="w-100 border p-2">
                      <a href="#freezer-fridge" data-custom="freezer-fridge" data-bs-toggle="collapse"
                      class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Freezer & Fridge</span> </a>    
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#snacks-confectionery" data-custom="snacks-confectionery" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Snacks & Confectionery</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#diary" data-custom="diary" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Diary</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#pantry" data-custom="pantry" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Pantry</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#drinks" data-custom="drinks" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Drinks</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#health-beauty" data-custom="health-beauty" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Health & Beauty</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#household" data-custom="household" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Household</span> </a>            
                    </li>
                </ul> 
          </div>
        `;
      //   row.firstElementChild.nextElementSibling.innerHTML = `
      //   <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round ps-2">
      //     <ul id="australia" class="nav-pills nav border">
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //             <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //             <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
      //                   </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
      //         </li>
      //     </ul>
      // </div>
      //     `;

      row.lastChild.innerHTML = `
        <div class="menu-banner d-flex align-middle flex-column">
                    <div class="text-block pt-5 mt-3">
                        <h4 class="fw-bold" style="font-size: 28px;">Download Mustakshif App </h4>
                        <p style="font-size: 20px; line-height:1.2;">Scan barcode, see <br>ingredient and explore Halal <br>products instantly. </p>
                    </div>
                    <div class="btns-block pb-5">
                        <div class="container">

                            <div class="row">
                                <div class="col-md-2 qr">
                                    <a href="#"><img src="./assets/images/qrcode-menu.png" alt=""></a>
                                </div>
                                <div class="col-md-10 btnss d-flex">
                                    <a href="#"><img src="./assets/images/single-apple.png" alt=""></a>
                                    <a href="#"><img src="./assets/images//single-play.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;
      container.appendChild(row);
      containerf.appendChild(container);

      content.innerHTML = containerf.outerHTML;
      contentAdded = true;

      const allSubLinks = document.querySelectorAll("#submenu li a");
      const insideItems = document.createElement("div");
      insideItems.classList.add("col-lg-4", "col-md-4", "col-sm-12", "pe-1");
      allSubLinks[0].parentElement.classList.add("active");
      allSubLinks.forEach((eleme) => {
        eleme.addEventListener("mouseover", function (ev) {
          contentAdded = false;
          if (ev.target.tagName === "A") {
            if (
              ev.target.getAttribute("data-custom") === "fruit-vegetable" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              //   insideItems.innerHTML = `
              //     <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
              //     <ul id="australia" class="nav-pills nav border">
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //         <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //         <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
              //               </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
              //     </li>
              // </ul>
              //     </div>
              //   `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") ===
                "poultry-meat-seafood" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "freezer-fridge" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") ===
                "snacks-confectionery" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              console.log();
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "diary" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "pantry" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "drinks" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "health-beauty" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "household" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            }
          } else if (ev.target.tagName === "SPAN") {
          }
        });
      });
    }

    dropdowns[3].addEventListener("mouseleave", function (el) {
      e.target.style.color = "black";
      if (e.target.firstElementChild) {
        e.target.firstElementChild.style.color = "black";
      }
      if (content) {
        content.style.display = "none";
        if (content.firstElementChild) {
          content.firstElementChild.remove();
        }
      }
    });
  });

  // products
  dropdowns[4].addEventListener("mouseover", function (e) {
    let content;
    if (e.target.tagName === "A" && e.target.classList.contains("dropbtn")) {
      content = e.target.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    } else if (
      e.target.tagName === "I" &&
      e.target.classList.contains("fa-caret")
    ) {
      content = e.target.parentElement.nextElementSibling;
      if (content.firstElementChild) {
        content.style.display = "block";
        e.target.style.color = "#b19347";
        if (e.target.firstElementChild) {
          e.target.firstElementChild.style.color = "#b19347";
        }
        return;
      }
    }

    // Clear container
    if (containerf && containerf.parentNode) {
      containerf.parentNode.removeChild(containerf);
    }

    containerf = document.createElement("div");
    containerf.classList.add("container-fluid");
    container = document.createElement("div");
    container.classList.add("container");
    container.style.marginTop = "40px";
    containerf.style.marginTop = "0px";
    container.style.marginBottom = "30px";
    containerf.style.position = "fixed";
    containerf.style.left = "0px";
    containerf.style.zIndex = 10000;
    containerf.style.backgroundColor = "#e9eef5";

    if (e.target.getAttribute("id") === "products") {
      let row = document.createElement("div");
      row.classList.add("row");
      let cols = `<div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 ps-1 pb-4"></div>`;
      row.innerHTML = cols;
      row.style.backgroundColor = "#e9eef5";
      row.firstElementChild.innerHTML = `  
          <div class="sub-menu d-flex flex-column  align-items-sm-start  pt-2 w-100 round">
                <ul class="nav nav-pills border" id="submenu">
                  <li class="w-100 border p-2">
                      <a href="whatIsHalal.html" data-custom="halal" 
                      class=" listHead nav-link align-middle px-3">
                      <span class="  d-sm-inline">Halal</span> <div class="diagonal"></div></a>
                    </li>
                    
                  <li class="w-100 border p-2">
                    <a href="whatisHaramPage.html" data-custom="haram" 
                          class=" listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Haram</span> </a>   
                    </li>
                  <li class="w-100 border p-2">
                      <a href="whatIsMushbooh.html" data-custom="mushbooh" 
                      class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline">Mushbooh</span> </a>    
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#vegetarian" data-custom="vegetarian" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Vegetarian</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#kosher" data-custom="kosher" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Kosher</span> </a>            
                    </li>
                  <li class="w-100 border p-2">
                    <a href="#gluten-free" data-custom="gluten-free" data-bs-toggle="collapse"
                          class="listHead nav-link align-middle px-3">
                          <span class="  d-sm-inline ">Gluten Free</span> </a>            
                    </li>
                </ul> 
          </div>
        `;
      //   row.firstElementChild.nextElementSibling.innerHTML = `
      //   <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round ps-2">
      //     <ul id="australia" class="nav-pills nav border">
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //             <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //             <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
      //                   </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
      //         </li>
      //         <li class="w-100 border p-2">
      //           <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
      //         </li>
      //     </ul>
      // </div>
      //     `;

      row.lastChild.innerHTML = `
        <div class="menu-banner d-flex align-middle flex-column">
                    <div class="text-block pt-5 mt-3">
                        <h4 class="fw-bold" style="font-size: 28px;">Download Mustakshif App </h4>
                        <p style="font-size: 20px; line-height:1.2;">Scan barcode, see <br>ingredient and explore Halal <br>products instantly. </p>
                    </div>
                    <div class="btns-block pb-5">
                        <div class="container">

                            <div class="row">
                                <div class="col-md-2 qr">
                                    <a href="#"><img src="./assets/images/qrcode-menu.png" alt=""></a>
                                </div>
                                <div class="col-md-10 btnss d-flex">
                                    <a href="#"><img src="./assets/images/single-apple.png" alt=""></a>
                                    <a href="#"><img src="./assets/images//single-play.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;
      container.appendChild(row);
      containerf.appendChild(container);

      content.innerHTML = containerf.outerHTML;
      contentAdded = true;

      const allSubLinks = document.querySelectorAll("#submenu li a");
      const insideItems = document.createElement("div");
      insideItems.classList.add("col-lg-4", "col-md-4", "col-sm-12", "pe-1");
      allSubLinks[0].parentElement.classList.add("active");
      allSubLinks.forEach((eleme) => {
        eleme.addEventListener("mouseover", function (ev) {
          contentAdded = false;
          if (ev.target.tagName === "A") {
            if (
              ev.target.getAttribute("data-custom") === "halal" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              //   insideItems.innerHTML = `
              //     <div class="d-flex flex-column submenulast align-items-sm-start  pt-2 w-100 round">
              //     <ul id="australia" class="nav-pills nav border">
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Halal Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Haram Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //         <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Mushbooh Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //         <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Vegetarian Products</span></a>
              //               </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Kosher Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Gluten Free Products</span></a>
              //     </li>
              //     <li class="w-100 border p-2">
              //       <a href="#" class="listHead nav-link  align-middle px-3 "> <span class=" d-sm-inline">Explore all</span></a>
              //     </li>
              // </ul>
              //     </div>
              //   `;
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "haram" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");
              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "mushbooh" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "vegetarian" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              console.log();
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "kosher" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "gluten-free" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            } else if (
              ev.target.getAttribute("data-custom") === "drinks" &&
              !contentAdded
            ) {
              Array.from(
                ev.target.parentElement.parentElement.children
              ).forEach((el) => el.classList.remove("active"));
              ev.target.parentElement.classList.add("active");

              const nextColumn =
                document.querySelector(".sub-menu").parentElement
                  .nextElementSibling;
              if (nextColumn) {
                while (nextColumn.firstChild) {
                  nextColumn.removeChild(nextColumn.firstChild);
                }
                nextColumn.innerHTML = "";
                nextColumn.outerHTML = insideItems.outerHTML;
              }
              contentAdded = true;
            }
          } else if (ev.target.tagName === "SPAN") {
          }
        });
      });
    }

    dropdowns[4].addEventListener("mouseleave", function (el) {
      e.target.style.color = "black";
      if (e.target.firstElementChild) {
        e.target.firstElementChild.style.color = "black";
      }
      if (content) {
        content.style.display = "none";
        if (content.firstElementChild) {
          content.firstElementChild.remove();
        }
      }
    });
  });
}

// client Dashboard
document.addEventListener("DOMContentLoaded", function (e) {
  const clientDashSide = document.getElementById("client-dash-side");
  const clientDashMain = document.getElementById("client-dash-main");
  if (clientDashSide && clientDashMain) {
    const tabs = Array.from(
      clientDashSide.firstElementChild.lastElementChild.firstElementChild
        .children
    );
    const clientDashHome = document.getElementById("clientDashHome");
    const clientDashHalal = document.getElementById("clientHalal");
    const clientDashHaram = document.getElementById("clientHaram");
    const clientDashMushbooh = document.getElementById("clientMushbooh");
    const clientDashEdits = document.getElementById("clientEdits");
    const clientDashFeedback = document.getElementById("clientFeedback");
    const clientDashNotifications = document.getElementById(
      "clientNotifications"
    );
    const clientDashGuestPost = document.getElementById("clientGuestPosts");
    const clientDashEditProfile = document.getElementById("clientEditProfile");
    const clientDashHelp = document.getElementById("clientHelp");
    clientDashMain.innerHTML = clientDashHome.outerHTML;
    tabs.forEach((el) => el.classList.remove("active"));
    tabs[0].classList.add("active");
    tabs.forEach((el) =>
      el.addEventListener("click", function (event) {
        let tab;
        if (event.target.nodeName === "A") {
          tab = event.target.parentElement;
        }
        if (event.target.nodeName === "SPAN") {
          tab = event.target.parentElement.parentElement;
        }
        tabs.forEach((ele) => ele.classList.remove("active"));
        tab.classList.add("active");
        const tabSelected = tab.firstElementChild.firstElementChild;

        if (tabSelected.innerHTML === "Dashboard") {
          clientDashMain.innerHTML = clientDashHome.outerHTML;
        }
        if (tabSelected.innerText === "Verified Halal") {
          clientDashMain.innerHTML = clientDashHalal.outerHTML;
        } else if (tabSelected.innerText === "Haram") {
          clientDashMain.innerHTML = clientDashHaram.outerHTML;
        } else if (tabSelected.innerText === "Mushbooh") {
          clientDashMain.innerHTML = clientDashMushbooh.outerHTML;
        } else if (tabSelected.innerText === "Edits") {
          clientDashMain.innerHTML = clientDashEdits.outerHTML;
        } else if (tabSelected.innerText === "Feedback") {
          clientDashMain.innerHTML = clientDashFeedback.outerHTML;
        } else if (tabSelected.innerText === "Notifications") {
          clientDashMain.innerHTML = clientDashNotifications.outerHTML;
        } else if (tabSelected.innerText === "Guest Post") {
          clientDashMain.innerHTML = clientDashGuestPost.outerHTML;
        } else if (tabSelected.innerText === "Edit Profile") {
          clientDashMain.innerHTML = clientDashEditProfile.outerHTML;
        } else if (tabSelected.innerText === "Help") {
          clientDashMain.innerHTML = clientDashHelp.outerHTML;
        }
      })
    );
  }
});

// Mobile menu
const mblbtns = document.querySelectorAll(".overlay-menu .dropbtn i");
if (mblbtns) {
  mblbtns.forEach((btn) => {
    btn.addEventListener("click", function (e) {
      e.preventDefault();
      if (e.target === "I") {
        e.target.parentElement.nextElementSibling.classList.toggle(
          "dropdown-content-toggle"
        );
      }
    });
  });
}

// mbl popup

const close = document.querySelector(".closePop");
const mblOver = document.querySelector(".mbloverlay");
function popUp() {
  if (mblOver.style.display === "none") {
    mblOver.style.display = "block";
  }
}
close.addEventListener("click", function () {
  mblOver.style.display = "none";
  setTimeout(popUp, 5000);
});
