"use strict";
/*Namespace
------------------------------------------------------- */
var bloggerpress = bloggerpress || {};

document.querySelectorAll('.single.wp-embed-responsive .wp-has-aspect-ratio').forEach(element => {
    if (!element.querySelector('object, embed, iframe, video')) {
        element.querySelector('.wp-block-embed__wrapper')?.style.setProperty('display', 'none');
    }
});

/* Preloader
 **-----------------------------------------------------*/
bloggerpress.PreLoader = {
    init: function () {
        let preloader = document.querySelector("#wpmotif-preloader");
        if (preloader) {
            preloader.classList.add("wpmotif-preloader-exit");
            setTimeout(function () {
                preloader.style.display = "none";
            }, 1000);
        }
    },
};
/* Cursor
 **-----------------------------------------------------*/
bloggerpress.Cursor = {
    init: function () {
        if (document.body.classList.contains("has-custom-cursor")) {
            const innerCursor = document.querySelector(".circle-cursor-inner"),
                outerCursor = document.querySelector(".circle-cursor-outer");
            if (!innerCursor || !outerCursor) return;
            let mouseX, mouseY = 0, magnetMode = false;

            function resetOuterCursor() {
                outerCursor.style.transition = "";
                outerCursor.style.width = "";
                outerCursor.style.height = "";
                outerCursor.style.marginLeft = "";
                outerCursor.style.marginTop = "";
                magnetMode = false;
            }

            window.onmousemove = function (event) {
                if (!magnetMode) {
                    outerCursor.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
                }
                innerCursor.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
                mouseX = event.clientX;
                mouseY = event.clientY;
                const target = event.target;
                if (target.tagName === "IFRAME") {
                    outerCursor.style.visibility = "hidden";
                    innerCursor.style.visibility = "hidden";
                } else {
                    outerCursor.style.visibility = "visible";
                    innerCursor.style.visibility = "visible";
                }
            };

            function addEventListenerToElements(selector, event, handler) {
                document.querySelectorAll(selector).forEach(element => {
                    element.addEventListener(event, handler);
                });
            }

            addEventListenerToElements("a, .cursor-as-pointer", "mouseenter", () => {
                innerCursor.classList.add("cursor-link-hover");
                outerCursor.classList.add("cursor-link-hover");
            });
            addEventListenerToElements("a, .cursor-as-pointer", "mouseleave", function () {
                if (!this.closest(".cursor-as-pointer")) {
                    innerCursor.classList.remove("cursor-link-hover");
                    outerCursor.classList.remove("cursor-link-hover");
                }
            });
            addEventListenerToElements("[data-cursor-class]", "mouseenter", function () {
                const cursorClass = this.getAttribute("data-cursor-class");
                if (cursorClass.includes("dark-color")) {
                    innerCursor.classList.add("dark-color");
                    outerCursor.classList.add("dark-color");
                }
                if (cursorClass.includes("cursor-link")) {
                    innerCursor.classList.add("cursor-link");
                    outerCursor.classList.add("cursor-link");
                }
            });
            addEventListenerToElements("[data-cursor-class]", "mouseleave", function () {
                const cursorClass = this.getAttribute("data-cursor-class");
                if (cursorClass.includes("dark-color")) {
                    innerCursor.classList.remove("dark-color");
                    outerCursor.classList.remove("dark-color");
                }
                if (cursorClass.includes("cursor-link")) {
                    innerCursor.classList.remove("cursor-link");
                    outerCursor.classList.remove("cursor-link");
                }
            });
            addEventListenerToElements(".cursor-magnet, .icon-button", "mouseenter", function () {
                const rect = this.getBoundingClientRect();
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                outerCursor.style.transition = "all .2s ease-out";
                outerCursor.style.transform = `translate(${rect.left}px, ${rect.top - scrollTop}px)`;
                outerCursor.style.width = `${rect.width}px`;
                outerCursor.style.height = `${rect.height}px`;
                outerCursor.style.marginLeft = "0";
                outerCursor.style.marginTop = "0";
                magnetMode = true;
            });
            addEventListenerToElements(".cursor-magnet, .icon-button", "mouseleave", resetOuterCursor);
            document.addEventListener("ohio:cursor_mouseleave", function () {
                resetOuterCursor();
                outerCursor.style.transform = innerCursor.style.transform;
                innerCursor.classList.remove("cursor-link-hover");
                outerCursor.classList.remove("cursor-link-hover");
            });
            addEventListenerToElements("iframe", "mouseenter", function () {
                outerCursor.style.visibility = "hidden";
                innerCursor.style.visibility = "hidden";
            });
            innerCursor.style.visibility = "visible";
            outerCursor.style.visibility = "visible";
        }
    }
};
/* Display Clock
 **-----------------------------------------------------*/
bloggerpress.displayClock = {
    init: function () {
        if (document.getElementsByClassName("wpmotif-display-clock").length > 0) {
            setInterval(function () {
                let currentTime = new Date();
                let hours = currentTime.getHours();
                let minutes = currentTime.getMinutes();
                let seconds = currentTime.getSeconds();
                let ampm = hours >= 12 ? "PM" : "AM";
                hours = hours % 12;
                hours = hours ? hours : 12;
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                let timeString =
                    '<span class="wpmotif-clock-unit clock-unit-hours">' +
                    hours +
                    "</span>" +
                    ":" +
                    '<span class="wpmotif-clock-unit clock-unit-minute">' +
                    minutes +
                    "</span>" +
                    ":" +
                    '<span class="wpmotif-clock-unit clock-unit-seconds">' +
                    seconds +
                    "</span>" +
                    " " +
                    '<span class="wpmotif-clock-unit clock-unit-format">' +
                    ampm +
                    "</span>";
                document.getElementsByClassName(
                    "wpmotif-display-clock"
                )[0].innerHTML = timeString;
            }, 1000);
        }
    },
};


/* Slider
 **-----------------------------------------------------*/
bloggerpress.Slider = {
    init: function () {
        this.bannerSlider();
        this.widgetSlider();
        this.gallerySlider();
    },

    bannerSlider: function () {
        let MainBanner = new Swiper(".banner-pagination-slider", {
            spaceBetween: 30,
            slidesPerView: 1,
            loop: document.querySelectorAll('.swiper-slide').length >= 3,
            slideToClickedSlide: true,
            autoplay: {
                delay: 5000, // Add a delay for autoplay (optional, you can adjust the timing)
            },
            navigation: {
                nextEl: ".banner-slider-next",
                prevEl: ".banner-slider-prev",
            },
            thumbs: {
                swiper: {
                    el: '.main-slider-container',
                    slidesPerView: 1,
                    loop: document.querySelectorAll('.swiper-slide').length >= 3,
                    effect: "fade",
                }
            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                },
            }
        });
    },

    widgetSlider: function () {
        let sliderWrapper = document.querySelectorAll(
            ".wpi-swiper-init"
        );
        if (sliderWrapper) {
            sliderWrapper.forEach(function (item) {
                let parentWrapper = item.parentNode;
                let navNext = parentWrapper.querySelector(
                    ".widget-slider-next"
                );
                let navPrev = parentWrapper.querySelector(
                    ".widget-slider-prev"
                );
                let paginate =
                    parentWrapper.querySelector(".wpi-widget-pagination");
                let defaultOptions = {
                    slidesPerView: 1,
                    loop: document.querySelectorAll('.swiper-slide').length >= 3,
                    lazyloading: true,
                    navigation: {
                        nextEl: navNext,
                        prevEl: navPrev,
                    },
                    pagination: {
                        el: paginate,
                        clickable: true,
                    },
                };
                let data = item.getAttribute("data-slider") || {};
                if (data) {
                    var dataOptions = JSON.parse(data);
                }
                let sliderOptions = {
                    ...defaultOptions,
                    ...dataOptions,
                };
                let swiper = new Swiper(item, sliderOptions);

                let containerWidth = item.clientWidth;
                if (containerWidth < 500) {
                    swiper.params.slidesPerView = 1;
                    swiper.update();
                }
            });
        }
    },

    gallerySlider: function () {
        let galleries = document.querySelectorAll(".wp-block-gallery.columns-1");

        galleries.forEach(function (gallery, index) { // Loop through all instances
            // Add the "swiper" class
            gallery.classList.add("swiper");

            // Check if already processed to avoid duplicate initialization
            if (gallery.querySelector(".swiper-wrapper")) return;

            // Create the wrapper
            let wrapper = document.createElement("div");
            wrapper.classList.add("swiper-wrapper");

            // Move children into the wrapper
            Array.from(gallery.children).forEach(function (child) {
                child.classList.add("swiper-slide");
                wrapper.appendChild(child);
            });

            // Append the wrapper back to the gallery
            gallery.appendChild(wrapper);

            // Add pagination and navigation controls
            let pagination = document.createElement("div");
            pagination.classList.add("swiper-pagination");
            gallery.appendChild(pagination);

            let nextButton = document.createElement("div");
            nextButton.classList.add("swiper-button-next");
            gallery.appendChild(nextButton);

            let prevButton = document.createElement("div");
            prevButton.classList.add("swiper-button-prev");
            gallery.appendChild(prevButton);

            // Initialize Swiper for the current gallery
            new Swiper(gallery, {
                slidesPerView: 1,
                spaceBetween: 10,
                pagination: {
                    el: pagination,
                    clickable: true,
                },
                navigation: {
                    nextEl: nextButton,
                    prevEl: prevButton,
                },
            });
        });
    },

};

/* Tab Widget
 **-----------------------------------------------------*/
bloggerpress.TabbedWidget = {
    init: function () {
        const widgetContainers = document.querySelectorAll(".wpmotif-tabbed-widget");
        widgetContainers.forEach((container) => {
            const tabs = container.querySelectorAll(
                ".tabbed-widget-header .tabbed-header-item"
            );
            const tabPanes = container.querySelectorAll(
                ".tabbed-widget-content .tabbed-content-item"
            );
            tabs.forEach((tab) => {
                tab.addEventListener("click", function (event) {
                    const tabid = this.getAttribute("tab-data");
                    tabs.forEach((tab) => tab.classList.remove("active"));
                    tabPanes.forEach((tabPane) => tabPane.classList.remove("active"));
                    this.classList.add("active");
                    container.querySelector(`.content-${tabid}`).classList.add("active");
                });
            });
        });
    },
};
/* ProgressBar
 **-----------------------------------------------------*/
bloggerpress.ProgressBar = {
    init: function () {
        const progressBar = document.getElementById("progressBar");
        // Check if progressBar exists before proceeding
        if (progressBar) {
            const totalHeight = document.body.scrollHeight - window.innerHeight;
            const scrollPosition = window.scrollY;
            const scrollPercentage = (scrollPosition / totalHeight) * 100;
            progressBar.style.width = scrollPercentage + "%";
            // Update progress on scroll
            window.addEventListener("scroll", function () {
                const scrollPosition = window.scrollY;
                const scrollPercentage = (scrollPosition / totalHeight) * 100;
                progressBar.style.width = scrollPercentage + "%";
            });
        }
    },
};

/* Back To Top
 **-----------------------------------------------------*/
bloggerpress.BackToTop = {
    init: function () {
        const scrollTopBtn = document.getElementById('scrollToTop');

        // Scroll to the top when button is clicked
        scrollTopBtn.onclick = () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        };
    },
};
/* ProgressBar
 **-----------------------------------------------------*/

/* Load functions at proper events
 *--------------------------------------------------*/
/**
 * Is the DOM ready?
 *
 * This implementation is coming from https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
 *
 * @param {Function} fn Callback function to run.
 */
function bloggerpressDomReady(fn) {
    if (typeof fn !== "function") {
        return;
    }
    if (
        document.readyState === "interactive" ||
        document.readyState === "complete"
    ) {
        return fn();
    }
    document.addEventListener("DOMContentLoaded", fn, false);
}

bloggerpressDomReady(function () {
    bloggerpress.Cursor.init();
    bloggerpress.displayClock.init();
    bloggerpress.Slider.init();
    bloggerpress.TabbedWidget.init();
    bloggerpress.BackToTop.init();
});
window.addEventListener("load", function (event) {
    bloggerpress.PreLoader.init();
});
window.addEventListener("scroll", function (event) {
    bloggerpress.ProgressBar.init();
});