"use strict";
(function() {
  let isWindows = !!(navigator.platform.indexOf("Win") > -1);
  if (isWindows) {
    // If we are on windows OS we activate the perfectScrollbar function.
    // if (document.getElementsByClassName('main-content')[0]) {
    //   let mainpanel = document.querySelector('.main-content');
    //   let ps = new PerfectScrollbar(mainpanel);
    // };
    let sidebar = document.querySelector(".sidenav");
    if (sidebar) {
      new PerfectScrollbar(sidebar);
    };
    let fixedplugin = document.querySelector(".navbar:not(.navbar-expand-lg) .navbar-collapse");
    if (fixedplugin) {
      new PerfectScrollbar(fixedplugin);
    };
    let fixedplugin2 = document.querySelector(".fixed-plugin");
    if (fixedplugin) {
      new PerfectScrollbar(fixedplugin2);
    };
    let scrollbar = document.querySelector("#sidenav-scrollbar");
    if (scrollbar) {
      let options = {
        damping: "0.5"
      }
      Scrollbar.init(scrollbar, options);
    }
  };
})();

// Verify navbar blur on scroll.
if (document.getElementById("navbarBlur")) {
  navbarBlurOnScroll("navbarBlur");
}

// Initialization of Tooltips.
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})


// When input is focused add focused class for style.
function focused(el) {
  if (el.parentElement.classList.contains("input-group")) {
    el.parentElement.classList.add("focused");
  }
}

// When input is focused remove focused class for style.
function defocused(el) {
  if (el.parentElement.classList.contains("input-group")) {
    el.parentElement.classList.remove("focused");
  }
}

// Helper for adding on all elements multiple attributes.
function setAttributes(el, options) {
  Object.keys(options).forEach(function(attr) {
    el.setAttribute(attr, options[attr]);
  })
}

// Adding on inputs attributes for calling the focused and defocused functions.
if (document.querySelectorAll(".input-group").length != 0) {
  let allInputs = document.querySelectorAll("input.form-control");
  allInputs.forEach(el => setAttributes(el, {
    "onfocus": "focused(this)",
    "onfocusout": "defocused(this)"
  }));
}

// Fixed Plugin.
if (document.querySelector(".fixed-plugin")) {
  let fixedPlugin = document.querySelector(".fixed-plugin");
  let fixedPluginButton = document.querySelector(".fixed-plugin-button");
  let fixedPluginButtonNav = document.querySelector(".fixed-plugin-button-nav");
  let fixedPluginCard = document.querySelector(".fixed-plugin .card");
  let fixedPluginCloseButton = document.querySelectorAll(".fixed-plugin-close-button");
  let navbar = document.getElementById("navbarBlur");
  let buttonNavbarFixed = document.getElementById("navbarFixed");

  if (fixedPluginButton) {
    fixedPluginButton.onclick = function() {
      if (!fixedPlugin.classList.contains("show")) {
        fixedPlugin.classList.add("show");
      } else {
        fixedPlugin.classList.remove("show");
      }
    }
  }

  if (fixedPluginButtonNav) {
    fixedPluginButtonNav.onclick = function() {
      if (!fixedPlugin.classList.contains("show")) {
        fixedPlugin.classList.add("show");
      } else {
        fixedPlugin.classList.remove("show");
      }
    }
  }

  fixedPluginCloseButton.forEach(function(el) {
    el.onclick = function() {
      fixedPlugin.classList.remove("show");
    }
  })

  document.querySelector("body").onclick = function(e) {
    if (e.target != fixedPluginButton && e.target != fixedPluginButtonNav && e.target.closest(".fixed-plugin .card") != fixedPluginCard) {
      fixedPlugin.classList.remove("show");
    }
  }

  if (navbar && (navbar.getAttribute("data-scroll") == 'true' && buttonNavbarFixed)) {
        buttonNavbarFixed.setAttribute("checked", "true");
  }

}

// Set Sidenav Color.
function sidenavColor(a) {
  let parent = a.parentElement.children;
  let color = a.getAttribute("data-color");
  let oldColor = null;
  for (let i = 0; i < parent.length; i++) {
    if (parent[i].classList.contains("active")) {
      oldColor = parent[i].getAttribute("data-color");
    }
    parent[i].classList.remove("active");
  }
  if (!a.classList.contains("active")) {
    a.classList.add("active");
  } else {
    a.classList.remove("active");
  }
  let background = document.querySelector(".min-height-300");
  background.classList.remove("bg-gradient-" + oldColor);
  background.classList.add("bg-gradient-" + color);
  let buttons = document.querySelectorAll(".btn.bg-gradient-" + oldColor);
  for (let i = 0; i < buttons.length; i++) {
    if (buttons[i].tagName == "button") {
      continue
    }
    buttons[i].classList.remove("bg-gradient-" + oldColor);
    buttons[i].classList.add("bg-gradient-" + color);
  }
}

// Set Background Theme.
function backgroundTheme(a) {
  let theme = a.checked ? "dark" : "white";
  document.querySelector("#background_theme").href = "/static/assets/css/themes/background_theme_" + theme + ".css";
  if (theme === "dark") {
    document.querySelector("#sidenav-theme-select").children[1].click();
  } else {
    document.querySelector("#sidenav-theme-select").children[0].click();
  }
}

// Set Sidenav Theme.
function sidenavTheme(a) {
  let parent = a.parentElement.children;
  let theme = a.getAttribute("data-class");
  let themes = [];
  for (let i = 0; i < parent.length; i++) {
    parent[i].classList.remove("active");
    themes.push(parent[i].getAttribute("data-class"));
  }
  if (!a.classList.contains("active")) {
    a.classList.add("active");
  } else {
    a.classList.remove("active");
  }
  document.querySelector("#sidenav_theme").href = "/static/assets/css/themes/sidenav_theme_" + theme + ".css";
}

// Set Navbar Fixed.
function navbarFixed(el) {
  let classes = ["position-sticky", "bg-white", "left-auto", "top-2", "z-index-sticky"];
  let navbar = document.getElementById("navbarBlur");
  if (!el.getAttribute("checked")) {
    toggleNavLinksColor("blur");
    navbar.classList.add(...classes);
    navbar.setAttribute("data-scroll", "true");
    navbarBlurOnScroll("navbarBlur");
    el.setAttribute("checked", "true");
  } else {
    toggleNavLinksColor("transparent");
    navbar.classList.remove(...classes);
    navbar.setAttribute("data-scroll", "false");
    navbarBlurOnScroll("navbarBlur");
    el.removeAttribute("checked");
  }
};

// Set Navbar Minimized.
function navbarMinimize(el) {
  let sidenavShow = document.getElementsByClassName("g-sidenav-show")[0];
  if (!el.getAttribute("checked")) {
    sidenavShow.classList.remove("g-sidenav-pinned");
    sidenavShow.classList.add("g-sidenav-hidden");
    el.setAttribute("checked", "true");
  } else {
    sidenavShow.classList.remove("g-sidenav-hidden");
    sidenavShow.classList.add("g-sidenav-pinned");
    el.removeAttribute("checked");
  }
}

function toggleNavLinksColor(type) {
  let navLinks = document.querySelectorAll(".navbar-main .nav-link, .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a, .navbar-main h6");
  let navLinksToggler = document.querySelectorAll(".navbar-main .sidenav-toggler-line");
  if (type === "blur") {
    navLinks.forEach(element => {
      element.classList.remove("text-white");
    });
    navLinksToggler.forEach(element => {
      element.classList.add("bg-dark");
      element.classList.remove("bg-white");
    });
  } else if (type === "transparent") {
    navLinks.forEach(element => {
      element.classList.add("text-white");
    });
    navLinksToggler.forEach(element => {
      element.classList.remove("bg-dark");
      element.classList.add("bg-white");
    });
  }
}

// Navbar blur on scroll.
function navbarBlurOnScroll(id) {
  let navbar = document.getElementById(id);
  let navbarScrollActive = navbar ? navbar.getAttribute("data-scroll") : false;
  let scrollDistance = 5;
  let classes = ["bg-white", "left-auto", "position-sticky"];
  let toggleClasses = ["shadow-none"];

  if (navbarScrollActive == "true") {
    window.onscroll = debounce(function() {
      if (window.scrollY > scrollDistance) {
        blurNavbar();
      } else {
        transparentNavbar();
      }
    }, 10);
  } else {
    window.onscroll = debounce(function() {
      transparentNavbar();
    }, 10);
  }

  let isWindows = !!(navigator.platform.indexOf("Win") > -1);

  if (isWindows) {
    let content = document.querySelector(".main-content");
    if (navbarScrollActive == "true") {
      content.addEventListener("ps-scroll-y", debounce(function() {
        if (content.scrollTop > scrollDistance) {
          blurNavbar();
        } else {
          transparentNavbar();
        }
      }, 10));
    } else {
      content.addEventListener("ps-scroll-y", debounce(function() {
        transparentNavbar();
      }, 10));
    }
  }

  function blurNavbar() {
    navbar.classList.add(...classes)
    navbar.classList.remove(...toggleClasses)

    toggleNavLinksColor("blur");
  }

  function transparentNavbar() {
    navbar.classList.remove(...classes)
    navbar.classList.add(...toggleClasses)

    toggleNavLinksColor("transparent");
  }
}


// Debounce Function
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    let context = this,
      args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// Toggle Sidenav.
let iconNavbarSidenav = document.getElementById("iconNavbarSidenav");
let iconSidenav = document.getElementById("iconSidenav");
let sidenav = document.getElementById("sidenav-main");
let body = document.getElementsByTagName("body")[0];
let className = "g-sidenav-pinned";

if (iconNavbarSidenav) {
  iconNavbarSidenav.addEventListener("click", toggleSidenav);
}

if (iconSidenav) {
  iconSidenav.addEventListener("click", toggleSidenav);
}

function toggleSidenav() {
  if (body.classList.contains(className)) {
    body.classList.remove(className);
    setTimeout(function() {
      sidenav.classList.remove("bg-white");
    }, 100);
    sidenav.classList.remove("bg-transparent");

  } else {
    body.classList.add(className);
    sidenav.classList.add("bg-white");
    sidenav.classList.remove("bg-transparent");
    iconSidenav.classList.remove("d-none");
  }
}

let html = document.getElementsByTagName("html")[0];

html.addEventListener("click", function(e) {
  if (body.classList.contains("g-sidenav-pinned") && !e.target.classList.contains("sidenav-toggler-line")) {
    body.classList.remove(className);
  }
});

// Resize navbar color depends on configurator active type of sidenav.

let referenceButtons = document.querySelector("[data-class]");

window.addEventListener("resize", navbarColorOnResize);

function navbarColorOnResize() {
  if (window.innerWidth > 1200) {
    if (referenceButtons.classList.contains("active") && referenceButtons.getAttribute("data-class") === "bg-transparent") {
      sidenav.classList.remove("bg-white");
    } else {
      if (!body.classList.contains("dark-version")) {
        sidenav.classList.add("bg-white");
      }
    }
  } else {
    sidenav.classList.add("bg-white");
    sidenav.classList.remove("bg-transparent");
  }
}

// Deactivate sidenav type buttons on resize and small screens.
window.addEventListener("resize", sidenavTypeOnResize);
window.addEventListener("load", sidenavTypeOnResize);

function sidenavTypeOnResize() {
  let elements = document.querySelectorAll('[onclick="sidebarType(this)"]');
  if (window.innerWidth < 1200) {
    elements.forEach(function(el) {
      el.classList.add("disabled");
    });
  } else {
    elements.forEach(function(el) {
      el.classList.remove("disabled");
    });
  }
}


// Tabs navigation.

let total = document.querySelectorAll(".nav-pills");

total.forEach(function(item, i) {
  let moving_div = document.createElement("div");
  let first_li = item.querySelector("li:first-child .nav-link");
  let tab = first_li.cloneNode();
  tab.innerHTML = "-";

  moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
  moving_div.appendChild(tab);
  item.appendChild(moving_div);

  let active_li = item.querySelector("li > .active");
  moving_div.style.padding = "0px";
  if (!active_li || Array.from(item.querySelectorAll("li")).indexOf(active_li) === 0) {
    moving_div.style.width = item.querySelector("li:nth-child(1)").offsetWidth + "px";
    moving_div.style.transform = "translate3d(0px, 0px, 0px)";
  } else {
    moving_div.style.width = active_li.offsetWidth + "px";
    moving_div.style.transform = "translate3d(" + active_li.offsetLeft + "px, 0px, 0px)";
  }
  moving_div.style.transition = ".5s ease";

  item.onmouseover = function(event) {
    let target = getEventTarget(event) || event;
    let li = target.closest("li"); // get reference
    if (li) {
      let nodes = Array.from(li.closest("ul").children); // get array
      let index = nodes.indexOf(li) + 1;
      let nav_link = item.querySelector("li:nth-child(" + index + ") .nav-link")
      if (nav_link) {
        nav_link.onclick = function() {
          moving_div = item.querySelector(".moving-tab");
          let sum = 0;
          if (item.classList.contains("flex-column")) {
            for (let j = 1; j <= nodes.indexOf(li); j++) {
              sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight - 0.4;
              moving_div.style.height = item.querySelector("li:nth-child(" + j + ")").offsetHeight;
            }
            moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
          } else {
            for (let j = 1; j <= nodes.indexOf(li); j++) {
              sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth - 0.4;
            }
            moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
            moving_div.style.width = item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
          }
        }
      }
    }
  }
});


// Tabs navigation resize.

window.addEventListener("resize", function(event) {
  total.forEach(function(item, i) {
    item.querySelector(".moving-tab").remove();
    let moving_div = document.createElement("div");
    let tab = item.querySelector(".nav-link.active").cloneNode();
    tab.innerHTML = "-";

    moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
    moving_div.appendChild(tab);

    item.appendChild(moving_div);

    moving_div.style.padding = "0px";
    moving_div.style.transition = ".5s ease";

    let li = item.querySelector(".nav-link.active").parentElement;

    if (li) {
      let nodes = Array.from(li.closest("ul").children); // get array
      let index = nodes.indexOf(li) + 1;

      let sum = 0;
      if (item.classList.contains("flex-column")) {
        for (let j = 1; j <= nodes.indexOf(li); j++) {
          sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
          moving_div.style.height = item.querySelector("li:nth-child(" + j + ")").offsetHeight;
        }
        moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
        moving_div.style.width = item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
      } else {
        for (let j = 1; j <= nodes.indexOf(li); j++) {
          sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
        }
        moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
        moving_div.style.width = item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";

      }
    }
  });

  if (window.innerWidth < 991) {
    total.forEach(function(item, i) {
      if (!item.classList.contains("flex-column")) {
        item.classList.add("flex-column", "on-resize");
      }
    });
  } else {
    total.forEach(function(item, i) {
      if (item.classList.contains("on-resize")) {
        item.classList.remove("flex-column", "on-resize");
      }
    })
  }
});


function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

// End tabs navigation.

// Light Mode / Dark Mode.
function darkMode(el) {
  let body = document.getElementsByTagName("body")[0];
  let hr = document.querySelectorAll("div:not(.sidenav) > hr");
  let sidebar = document.querySelector(".sidenav");
  let sidebarWhite = document.querySelectorAll(".sidenav.bg-white");
  let hr_card = document.querySelectorAll("div:not(.bg-gradient-dark) hr");
  let text_btn = document.querySelectorAll("button:not(.btn) > .text-dark");
  let text_span = document.querySelectorAll("span.text-dark");
  let text_span_white = document.querySelectorAll("span.text-white");
  let text_strong = document.querySelectorAll("strong.text-dark");
  let text_strong_white = document.querySelectorAll("strong.text-white");
  let text_nav_link = document.querySelectorAll("a.nav-link.text-dark");
  let secondary = document.querySelectorAll(".text-secondary");
  let bg_gray_100 = document.querySelectorAll(".bg-gray-100");
  let bg_gray_600 = document.querySelectorAll(".bg-gray-600");
  let btn_text_dark = document.querySelectorAll(".btn.btn-link.text-dark, .btn .ni.text-dark");
  let btn_text_white = document.querySelectorAll(".btn.btn-link.text-white, .btn .ni.text-white");
  let card_border = document.querySelectorAll(".card.border");
  let card_border_dark = document.querySelectorAll(".card.border.border-dark");
  let svg = document.querySelectorAll("g");
  let navbarBrand = document.querySelector(".navbar-brand-img");
  let navbarBrandImg = navbarBrand.src;
  let navLinks = document.querySelectorAll(".navbar-main .nav-link, .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a, .navbar-main h6");
  let cardNavLinksIcons = document.querySelectorAll(".card .nav .nav-link i");
  let cardNavSpan = document.querySelectorAll(".card .nav .nav-link span");


  if (!el.getAttribute("checked")) {
    body.classList.add("dark-version");
    if (navbarBrandImg.includes("logo-ct-dark.png")) {
      let navbarBrandImgNew = navbarBrandImg.replace("logo-ct-dark", "logo-ct");
      navbarBrand.src = navbarBrandImgNew;
    }
    for (let i = 0; i < cardNavLinksIcons.length; i++) {
      if (cardNavLinksIcons[i].classList.contains("text-dark")) {
        cardNavLinksIcons[i].classList.remove("text-dark");
        cardNavLinksIcons[i].classList.add("text-white");
      }
    }
    for (let i = 0; i < cardNavSpan.length; i++) {
      if (cardNavSpan[i].classList.contains("text-sm")) {
        cardNavSpan[i].classList.add("text-white");
      }
    }
    for (let i = 0; i < hr.length; i++) {
      if (hr[i].classList.contains("dark")) {
        hr[i].classList.remove("dark");
        hr[i].classList.add("light");
      }
    }
    for (let i = 0; i < hr_card.length; i++) {
      if (hr_card[i].classList.contains("dark")) {
        hr_card[i].classList.remove("dark");
        hr_card[i].classList.add("light");
      }
    }
    for (let i = 0; i < text_btn.length; i++) {
      if (text_btn[i].classList.contains("text-dark")) {
        text_btn[i].classList.remove("text-dark");
        text_btn[i].classList.add("text-white");
      }
    }
    for (let i = 0; i < text_span.length; i++) {
      if (text_span[i].classList.contains("text-dark")) {
        text_span[i].classList.remove("text-dark");
        text_span[i].classList.add("text-white");
      }
    }
    for (let i = 0; i < text_strong.length; i++) {
      if (text_strong[i].classList.contains("text-dark")) {
        text_strong[i].classList.remove("text-dark");
        text_strong[i].classList.add("text-white");
      }
    }
    for (let i = 0; i < text_nav_link.length; i++) {
      if (text_nav_link[i].classList.contains("text-dark")) {
        text_nav_link[i].classList.remove("text-dark");
        text_nav_link[i].classList.add("text-white");
      }
    }
    for (let i = 0; i < secondary.length; i++) {
      if (secondary[i].classList.contains("text-secondary")) {
        secondary[i].classList.remove("text-secondary");
        secondary[i].classList.add("text-white");
        secondary[i].classList.add("opacity-8");
      }
    }
    for (let i = 0; i < bg_gray_100.length; i++) {
      if (bg_gray_100[i].classList.contains("bg-gray-100")) {
        bg_gray_100[i].classList.remove("bg-gray-100");
        bg_gray_100[i].classList.add("bg-gray-600");
      }
    }
    for (let i = 0; i < btn_text_dark.length; i++) {
      btn_text_dark[i].classList.remove("text-dark");
      btn_text_dark[i].classList.add("text-white");
    }
    for (let i = 0; i < sidebarWhite.length; i++) {
      sidebarWhite[i].classList.remove("bg-white");
    }
    for (let i = 0; i < svg.length; i++) {
      if (svg[i].hasAttribute("fill")) {
        svg[i].setAttribute("fill", "#fff");
      }
    }
    for (let i = 0; i < card_border.length; i++) {
      card_border[i].classList.add("border-dark");
    }
    el.setAttribute("checked", "true");

    document.querySelector("#sidebar-theme-select").children[1].click(); // Toggle sidebar dark theme, even if the change isn't asked by the user.
  } else {
    body.classList.remove("dark-version");
    sidebar.classList.add("bg-white");
    if (navbarBrandImg.includes("logo-ct.png")) {
      let navbarBrandImgNew = navbarBrandImg.replace("logo-ct", "logo-ct-dark");
      navbarBrand.src = navbarBrandImgNew;
    }
    for (let i = 0; i < navLinks.length; i++) {
      if (navLinks[i].classList.contains("text-dark")) {
        navLinks[i].classList.add("text-white");
        navLinks[i].classList.remove("text-dark");
      }
    }
    for (let i = 0; i < cardNavLinksIcons.length; i++) {
      if (cardNavLinksIcons[i].classList.contains("text-white")) {
        cardNavLinksIcons[i].classList.remove("text-white");
        cardNavLinksIcons[i].classList.add("text-dark");
      }
    }
    for (let i = 0; i < cardNavSpan.length; i++) {
      if (cardNavSpan[i].classList.contains("text-white")) {
        cardNavSpan[i].classList.remove("text-white");
      }
    }
    for (let i = 0; i < hr.length; i++) {
      if (hr[i].classList.contains("light")) {
        hr[i].classList.add("dark");
        hr[i].classList.remove("light");
      }
    }
    for (let i = 0; i < hr_card.length; i++) {
      if (hr_card[i].classList.contains("light")) {
        hr_card[i].classList.add("dark");
        hr_card[i].classList.remove("light");
      }
    }
    for (let i = 0; i < text_btn.length; i++) {
      if (text_btn[i].classList.contains("text-white")) {
        text_btn[i].classList.remove("text-white");
        text_btn[i].classList.add("text-dark");
      }
    }
    for (let i = 0; i < text_span_white.length; i++) {
      if (text_span_white[i].classList.contains("text-white")) {  //  && !text_span_white[i].closest(".sidenav") && !text_span_white[i].closest(".card.bg-gradient-dark")
        text_span_white[i].classList.remove("text-white");
        text_span_white[i].classList.add("text-dark");
      }
    }
    for (let i = 0; i < text_strong_white.length; i++) {
      if (text_strong_white[i].classList.contains("text-white")) {
        text_strong_white[i].classList.remove("text-white");
        text_strong_white[i].classList.add("text-dark");
      }
    }
    for (let i = 0; i < secondary.length; i++) {
      if (secondary[i].classList.contains("text-white")) {
        secondary[i].classList.remove("text-white");
        secondary[i].classList.remove("opacity-8");
        secondary[i].classList.add("text-dark");
      }
    }
    for (let i = 0; i < bg_gray_600.length; i++) {
      if (bg_gray_600[i].classList.contains("bg-gray-600")) {
        bg_gray_600[i].classList.remove("bg-gray-600");
        bg_gray_600[i].classList.add("bg-gray-100");
      }
    }
    for (let i = 0; i < svg.length; i++) {
      if (svg[i].hasAttribute("fill")) {
        svg[i].setAttribute("fill", "#252f40");
      }
    }
    for (let i = 0; i < btn_text_white.length; i++) {
      if (!btn_text_white[i].closest(".card.bg-gradient-dark")) {
        btn_text_white[i].classList.remove("text-white");
        btn_text_white[i].classList.add("text-dark");
      }
    }
    for (let i = 0; i < card_border_dark.length; i++) {
      card_border_dark[i].classList.remove("border-dark");
    }
    el.removeAttribute("checked");

    document.querySelector("#sidebar-theme-select").children[0].click(); // Even the sidebar change of theme when theme changing, but the change wasn"t saved in a cookie.
  }
};
