// =========================================================
// Material Dashboard 2 - v3.1.0
// =========================================================

// Product Page: https://www.creative-tim.com/product/material-dashboard
// Copyright 2023 Creative Tim (https://www.creative-tim.com)
// Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)

// Coded by www.creative-tim.com

// =========================================================

// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
// Initialization for ES Users
import { Tab, initMDB } from "mdb-ui-kit";

initMDB({ Tab });

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

// initialization of Tooltips
var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var 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) {
    var allInputs = document.querySelectorAll("input.form-control");
    allInputs.forEach((el) =>
        setAttributes(el, {
            onfocus: "focused(this)",
            onfocusout: "defocused(this)",
        })
    );
}

// Fixed Plugin

if (document.querySelector(".fixed-plugin")) {
    var fixedPlugin = document.querySelector(".fixed-plugin");
    var fixedPlugin = document.querySelector(".fixed-plugin");
    var fixedPluginButton = document.querySelector(".fixed-plugin-button");
    var fixedPluginButtonNav = document.querySelector(
        ".fixed-plugin-button-nav"
    );
    var fixedPluginCard = document.querySelector(".fixed-plugin .card");
    var fixedPluginCloseButton = document.querySelectorAll(
        ".fixed-plugin-close-button"
    );
    var navbar = document.getElementById("navbarBlur");
    var 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) {
        if (navbar.getAttribute("data-scroll") == "true" && buttonNavbarFixed) {
            buttonNavbarFixed.setAttribute("checked", "true");
        }
    }
}

//Set Sidebar Color
function sidebarColor(a) {
    var parent = document.querySelector(".nav-link.active");
    var color = a.getAttribute("data-color");

    if (parent.classList.contains("bg-gradient-primary")) {
        parent.classList.remove("bg-gradient-primary");
    }
    if (parent.classList.contains("bg-gradient-dark")) {
        parent.classList.remove("bg-gradient-dark");
    }
    if (parent.classList.contains("bg-gradient-info")) {
        parent.classList.remove("bg-gradient-info");
    }
    if (parent.classList.contains("bg-gradient-success")) {
        parent.classList.remove("bg-gradient-success");
    }
    if (parent.classList.contains("bg-gradient-warning")) {
        parent.classList.remove("bg-gradient-warning");
    }
    if (parent.classList.contains("bg-gradient-danger")) {
        parent.classList.remove("bg-gradient-danger");
    }
    parent.classList.add("bg-gradient-" + color);
}

// Set Sidebar Type
function sidebarType(a) {
    var parent = a.parentElement.children;
    var color = a.getAttribute("data-class");
    var body = document.querySelector("body");
    var bodyWhite = document.querySelector("body:not(.dark-version)");
    var bodyDark = body.classList.contains("dark-version");

    var colors = [];

    for (var i = 0; i < parent.length; i++) {
        parent[i].classList.remove("active");
        colors.push(parent[i].getAttribute("data-class"));
    }

    if (!a.classList.contains("active")) {
        a.classList.add("active");
    } else {
        a.classList.remove("active");
    }

    var sidebar = document.querySelector(".sidenav");

    for (var i = 0; i < colors.length; i++) {
        sidebar.classList.remove(colors[i]);
    }

    sidebar.classList.add(color);

    // Remove text-white/text-dark classes
    if (color == "bg-transparent" || color == "bg-white") {
        var textWhites = document.querySelectorAll(".sidenav .text-white");
        for (let i = 0; i < textWhites.length; i++) {
            textWhites[i].classList.remove("text-white");
            textWhites[i].classList.add("text-dark");
        }
    } else {
        var textDarks = document.querySelectorAll(".sidenav .text-dark");
        for (let i = 0; i < textDarks.length; i++) {
            textDarks[i].classList.add("text-white");
            textDarks[i].classList.remove("text-dark");
        }
    }

    if (color == "bg-transparent" && bodyDark) {
        var textDarks = document.querySelectorAll(".navbar-brand .text-dark");
        for (let i = 0; i < textDarks.length; i++) {
            textDarks[i].classList.add("text-white");
            textDarks[i].classList.remove("text-dark");
        }
    }

    // Remove logo-white/logo-dark

    if ((color == "bg-transparent" || color == "bg-white") && bodyWhite) {
        var navbarBrand = document.querySelector(".navbar-brand-img");
        var navbarBrandImg = navbarBrand.src;

        if (navbarBrandImg.includes("logo-ct.png")) {
            var navbarBrandImgNew = navbarBrandImg.replace(
                "logo-ct",
                "logo-ct-dark"
            );
            navbarBrand.src = navbarBrandImgNew;
        }
    } else {
        var navbarBrand = document.querySelector(".navbar-brand-img");
        var navbarBrandImg = navbarBrand.src;
        if (navbarBrandImg.includes("logo-ct-dark.png")) {
            var navbarBrandImgNew = navbarBrandImg.replace(
                "logo-ct-dark",
                "logo-ct"
            );
            navbarBrand.src = navbarBrandImgNew;
        }
    }

    if (color == "bg-white" && bodyDark) {
        var navbarBrand = document.querySelector(".navbar-brand-img");
        var navbarBrandImg = navbarBrand.src;

        if (navbarBrandImg.includes("logo-ct.png")) {
            var navbarBrandImgNew = navbarBrandImg.replace(
                "logo-ct",
                "logo-ct-dark"
            );
            navbarBrand.src = navbarBrandImgNew;
        }
    }
}

// Set Navbar Fixed
function navbarFixed(el) {
    let classes = [
        "position-sticky",
        "blur",
        "shadow-blur",
        "mt-4",
        "left-auto",
        "top-1",
        "z-index-sticky",
    ];
    const navbar = document.getElementById("navbarBlur");

    if (!el.getAttribute("checked")) {
        navbar.classList.add(...classes);
        navbar.setAttribute("navbar-scroll", "true");
        navbarBlurOnScroll("navbarBlur");
        el.setAttribute("checked", "true");
    } else {
        navbar.classList.remove(...classes);
        navbar.setAttribute("navbar-scroll", "false");
        navbarBlurOnScroll("navbarBlur");
        el.removeAttribute("checked");
    }
}

// Set Navbar Minimized
function navbarMinimize(el) {
    var 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");
    }
}

// Navbar blur on scroll
function navbarBlurOnScroll(id) {
    const navbar = document.getElementById(id);
    let navbarScrollActive = navbar
        ? navbar.getAttribute("data-scroll")
        : false;
    let scrollDistance = 5;
    let classes = ["blur", "shadow-blur", "left-auto"];
    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);
    }

    var isWindows = navigator.platform.indexOf("Win") > -1 ? true : false;

    if (isWindows) {
        var 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");
    }

    function toggleNavLinksColor(type) {
        let navLinks = document.querySelectorAll(".navbar-main .nav-link");
        let navLinksToggler = document.querySelectorAll(
            ".navbar-main .sidenav-toggler-line"
        );

        if (type === "blur") {
            navLinks.forEach((element) => {
                element.classList.remove("text-body");
            });

            navLinksToggler.forEach((element) => {
                element.classList.add("bg-dark");
            });
        } else if (type === "transparent") {
            navLinks.forEach((element) => {
                element.classList.add("text-body");
            });

            navLinksToggler.forEach((element) => {
                element.classList.remove("bg-dark");
            });
        }
    }
}

// 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) {
    var timeout;
    return function () {
        var context = this,
            args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

// initialization of Toasts
document.addEventListener("DOMContentLoaded", function () {
    var toastElList = [].slice.call(document.querySelectorAll(".toast"));

    var toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(toastEl);
    });

    var toastButtonList = [].slice.call(
        document.querySelectorAll(".toast-btn")
    );

    toastButtonList.map(function (toastButtonEl) {
        toastButtonEl.addEventListener("click", function () {
            var toastToTrigger = document.getElementById(
                toastButtonEl.dataset.target
            );

            if (toastToTrigger) {
                var toast = bootstrap.Toast.getInstance(toastToTrigger);
                toast.show();
            }
        });
    });
});

// Tabs navigation

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

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

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

        var list_length = item.getElementsByTagName("li").length;

        moving_div.style.padding = "0px";
        moving_div.style.width =
            item.querySelector("li:nth-child(1)").offsetWidth + "px";
        moving_div.style.transform = "translate3d(0px, 0px, 0px)";
        moving_div.style.transition = ".5s ease";

        item.onmouseover = function (event) {
            let target = getEventTarget(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;
                item.querySelector(
                    "li:nth-child(" + index + ") .nav-link"
                ).onclick = function () {
                    moving_div = item.querySelector(".moving-tab");
                    let sum = 0;
                    if (item.classList.contains("flex-column")) {
                        for (var j = 1; j <= nodes.indexOf(li); j++) {
                            sum += item.querySelector(
                                "li:nth-child(" + j + ")"
                            ).offsetHeight;
                        }
                        moving_div.style.transform =
                            "translate3d(0px," + sum + "px, 0px)";
                        moving_div.style.height = item.querySelector(
                            "li:nth-child(" + j + ")"
                        ).offsetHeight;
                    } else {
                        for (var 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";
                    }
                };
            }
        };
    });
}

setTimeout(function () {
    initNavs();
}, 100);

// Tabs navigation resize

window.addEventListener("resize", function (event) {
    total.forEach(function (item, i) {
        item.querySelector(".moving-tab").remove();
        var moving_div = document.createElement("div");
        var 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 (var j = 1; j <= nodes.indexOf(li); j++) {
                    sum += 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";
                moving_div.style.height = item.querySelector(
                    "li:nth-child(" + j + ")"
                ).offsetHeight;
            } else {
                for (var 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.remove("flex-row");
                item.classList.add("flex-column", "on-resize");
                let li = item.querySelector(".nav-link.active").parentElement;
                let nodes = Array.from(li.closest("ul").children); // get array
                let index = nodes.indexOf(li) + 1;
                let sum = 0;
                for (var j = 1; j <= nodes.indexOf(li); j++) {
                    sum += item.querySelector(
                        "li:nth-child(" + j + ")"
                    ).offsetHeight;
                }
                var moving_div = document.querySelector(".moving-tab");
                moving_div.style.width =
                    item.querySelector("li:nth-child(1)").offsetWidth + "px";
                moving_div.style.transform =
                    "translate3d(0px," + sum + "px, 0px)";
            }
        });
    } else {
        total.forEach(function (item, i) {
            if (item.classList.contains("on-resize")) {
                item.classList.remove("flex-column", "on-resize");
                item.classList.add("flex-row");
                let li = item.querySelector(".nav-link.active").parentElement;
                let nodes = Array.from(li.closest("ul").children); // get array
                let index = nodes.indexOf(li) + 1;
                let sum = 0;
                for (var j = 1; j <= nodes.indexOf(li); j++) {
                    sum += item.querySelector(
                        "li:nth-child(" + j + ")"
                    ).offsetWidth;
                }
                var moving_div = document.querySelector(".moving-tab");
                moving_div.style.transform =
                    "translate3d(" + sum + "px, 0px, 0px)";
                moving_div.style.width =
                    item.querySelector("li:nth-child(" + index + ")")
                        .offsetWidth + "px";
            }
        });
    }
});

// Function to remove flex row on mobile devices
if (window.innerWidth < 991) {
    total.forEach(function (item, i) {
        if (item.classList.contains("flex-row")) {
            item.classList.remove("flex-row");
            item.classList.add("flex-column", "on-resize");
        }
    });
}

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

// End tabs navigation

window.onload = function () {
    // Material Design Input function
    var inputs = document.querySelectorAll("input");

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener(
            "focus",
            function (e) {
                this.parentElement.classList.add("is-focused");
            },
            false
        );

        inputs[i].onkeyup = function (e) {
            if (this.value != "") {
                this.parentElement.classList.add("is-filled");
            } else {
                this.parentElement.classList.remove("is-filled");
            }
        };

        inputs[i].addEventListener(
            "focusout",
            function (e) {
                if (this.value != "") {
                    this.parentElement.classList.add("is-filled");
                }
                this.parentElement.classList.remove("is-focused");
            },
            false
        );
    }

    // Ripple Effect
    var ripples = document.querySelectorAll(".btn");

    for (var i = 0; i < ripples.length; i++) {
        ripples[i].addEventListener(
            "click",
            function (e) {
                var targetEl = e.target;
                var rippleDiv = targetEl.querySelector(".ripple");

                rippleDiv = document.createElement("span");
                rippleDiv.classList.add("ripple");
                rippleDiv.style.width = rippleDiv.style.height =
                    Math.max(targetEl.offsetWidth, targetEl.offsetHeight) +
                    "px";
                targetEl.appendChild(rippleDiv);

                rippleDiv.style.left =
                    e.offsetX - rippleDiv.offsetWidth / 2 + "px";
                rippleDiv.style.top =
                    e.offsetY - rippleDiv.offsetHeight / 2 + "px";
                rippleDiv.classList.add("ripple");
                setTimeout(function () {
                    rippleDiv.parentElement.removeChild(rippleDiv);
                }, 600);
            },
            false
        );
    }
};

// Toggle Sidenav
const iconNavbarSidenav = document.getElementById("iconNavbarSidenav");
const iconSidenav = document.getElementById("iconSidenav");
const 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");
    }
}

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

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

if (sidenav) {
    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 {
                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");
        });
    }
}

// Light Mode / Dark Mode
function darkMode(el) {
    const body = document.getElementsByTagName("body")[0];
    const hr = document.querySelectorAll("div:not(.sidenav) > hr");
    const hr_card = document.querySelectorAll("div:not(.bg-gradient-dark) hr");
    const text_btn = document.querySelectorAll("button:not(.btn) > .text-dark");
    const text_span = document.querySelectorAll(
        "span.text-dark, .breadcrumb .text-dark"
    );
    const text_span_white = document.querySelectorAll(
        "span.text-white, .breadcrumb .text-white"
    );
    const text_strong = document.querySelectorAll("strong.text-dark");
    const text_strong_white = document.querySelectorAll("strong.text-white");
    const text_nav_link = document.querySelectorAll("a.nav-link.text-dark");
    const text_nav_link_white = document.querySelectorAll(
        "a.nav-link.text-white"
    );
    const secondary = document.querySelectorAll(".text-secondary");
    const bg_gray_100 = document.querySelectorAll(".bg-gray-100");
    const bg_gray_600 = document.querySelectorAll(".bg-gray-600");
    const btn_text_dark = document.querySelectorAll(
        ".btn.btn-link.text-dark, .material-icons.text-dark"
    );
    const btn_text_white = document.querySelectorAll(
        ".btn.btn-link.text-white, .material-icons.text-white"
    );
    const card_border = document.querySelectorAll(".card.border");
    const card_border_dark = document.querySelectorAll(
        ".card.border.border-dark"
    );

    const svg = document.querySelectorAll("g");

    if (!el.getAttribute("checked")) {
        body.classList.add("dark-version");
        for (var i = 0; i < hr.length; i++) {
            if (hr[i].classList.contains("dark")) {
                hr[i].classList.remove("dark");
                hr[i].classList.add("light");
            }
        }

        for (var 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 (var 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 (var 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 (var 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 (var 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 (var 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 (var 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 (var 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 (var i = 0; i < svg.length; i++) {
            if (svg[i].hasAttribute("fill")) {
                svg[i].setAttribute("fill", "#fff");
            }
        }
        for (var i = 0; i < card_border.length; i++) {
            card_border[i].classList.add("border-dark");
        }
        el.setAttribute("checked", "true");
    } else {
        body.classList.remove("dark-version");
        for (var i = 0; i < hr.length; i++) {
            if (hr[i].classList.contains("light")) {
                hr[i].classList.add("dark");
                hr[i].classList.remove("light");
            }
        }
        for (var 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 (var 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 (var 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 (var 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 (var i = 0; i < text_nav_link_white.length; i++) {
            if (
                text_nav_link_white[i].classList.contains("text-white") &&
                !text_nav_link_white[i].closest(".sidenav")
            ) {
                text_nav_link_white[i].classList.remove("text-white");
                text_nav_link_white[i].classList.add("text-dark");
            }
        }
        for (var 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 (var 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 (var i = 0; i < svg.length; i++) {
            if (svg[i].hasAttribute("fill")) {
                svg[i].setAttribute("fill", "#252f40");
            }
        }
        for (var 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 (var i = 0; i < card_border_dark.length; i++) {
            card_border_dark[i].classList.remove("border-dark");
        }
        el.removeAttribute("checked");
    }
}

// side bullets

const indicators = document.querySelectorAll(".indicator");
const sections = document.querySelectorAll("section");

if (indicators) {
    const resetCurrentActiveIndicator = () => {
        const activeIndicator = document.querySelector(".indicator.active");
        if (activeIndicator) {
            activeIndicator.classList.remove("active");
        }
    };

    const onSectionLeavesViewport = (section) => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        resetCurrentActiveIndicator();
                        const element = entry.target;
                        const indicator = document.querySelector(
                            `a[href='#${element.id}']`
                        );
                        indicator.classList.add("active");
                        return;
                    }
                });
            },
            {
                root: null,
                rootMargin: "0px",
                threshold: 0.75,
            }
        );
        observer.observe(section);
    };

    indicators.forEach((indicator) => {
        indicator.addEventListener("click", function (event) {
            event.preventDefault();
            document.querySelector(this.getAttribute("href")).scrollIntoView({
                behavior: "smooth",
            });
            resetCurrentActiveIndicator();
            this.classList.add("active");
        });
    });

    sections.forEach(onSectionLeavesViewport);
}