var offcanvasElement = document.getElementById('offcanvasRight');
var bsOffcanvas = new bootstrap.Offcanvas(offcanvasElement);

function showMenu(content, title) {

    if (offcanvasElement.classList.contains('show')) {
        bsOffcanvas.hide();
    } else {
        bsOffcanvas.show();
        offcanvasElement.querySelector(".offcanvas-body").innerHTML = content;
        offcanvasElement.querySelector("h5").innerHTML = title;
    }
}

function closeMenu() {
    bsOffcanvas.hide()
}

function mainMenu() {
    let content = `<div class="p-3">
        <span class="">دسته‌بندی</span>
        <a class="btn bg-secondary rounded-0 bg-opacity-10 mt-2 w-100" href="/product/">همه محصولات</a>
        <div class="accordion" id="accordionExample"></div>
        <hr class="text-muted my-2 opacity-25">
        <div>
            <span class="">حساب کاربری</span>

            <a class="d-block small mt-2" href="/profile/">پروفایل</a>
            <a class="d-block small mt-2" href="/profile/cart/">سبدخرید</a>
            <a class="d-block small mt-2" href="/profile/orders/">پیگیری سفارش‌ها</a>
        </div>
                <hr class="text-muted my-2 opacity-25">

        <div>
            <span class="mt-3">ویرا</span>

            <a class="d-block small mt-2" href="/about-us/">درباره ما</a>
            <a class="d-block small mt-2" href="/contact-us/">تماس با ما</a>
            <a class="d-block small mt-2" href="/after-sales-service/">خدمات پس از فروش</a>
            <a class="d-block small mt-2" href="/terms/">سیاست حریم خصوصی</a>
        </div>
    </div>`;
    showMenu(content, "منو");
    const accordionContainer = document.getElementById('accordionExample');
    createAccordion(categories, accordionContainer);
}

// اجرای تابع هنگام بارگذاری صفحه
window.addEventListener('load', function () {
    handleResponsiveDesign();

});

// اجرای تابع هنگام تغییر اندازه صفحه
window.addEventListener('resize', handleResponsiveDesign);

function handleResponsiveDesign() {
    if (window.innerWidth <= 768) {
        // کد برای حالت موبایل
        console.log('Mobile view');
        // اینجا کدهای مخصوص موبایل را بنویسید
    } else {
        // کد برای حالت دسکتاپ
        document.getElementById("offcanvasRight").classList.remove("w-75");
        document.getElementById("offcanvasRight").classList.add("w-25");
    }
}

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {})

function show_modal(content, title) {
    let modal = document.getElementById("exampleModal")
    myModal.hide();
    modal.querySelector(".modal-body").innerHTML = content;
    modal.querySelector(".modal-title").innerHTML = title;
    myModal.show();
}
function close_modal() {

    myModal.hide();
}



function createAccordion(categories, parentElement, parentId = '') {
    let index = 0;
    for (const [key, value] of Object.entries(categories)) {
        if (Object.keys(value.subcategories).length === 0) {
            // Create a button for leaf nodes
            const leafButton = document.createElement('a');
            leafButton.className = 'btn bg-dark rounded-0 bg-opacity-10 mt-2 w-100';
            leafButton.textContent = key;
            leafButton.href = value.slug;
            parentElement.appendChild(leafButton);
        } else {
            const itemId = `${parentId}collapse${index}`;
            const accordionItem = document.createElement('div');
            accordionItem.className = 'accordion-item rounded-0 mt-2 border-0';
            accordionItem.dir = 'ltr';

            const header = document.createElement('h2');
            header.className = 'accordion-header';

            const button = document.createElement('button');
            button.className = 'accordion-button collapsed bg-secondary bg-opacity-10 rounded-0 py-2';
            button.type = 'button';
            button.setAttribute('data-bs-toggle', 'collapse');
            button.setAttribute('data-bs-target', `#${itemId}`);
            button.setAttribute('aria-expanded', 'false');
            button.setAttribute('aria-controls', itemId);
            button.textContent = key;

            header.appendChild(button);
            accordionItem.appendChild(header);

            const collapseDiv = document.createElement('div');
            collapseDiv.id = itemId;
            collapseDiv.className = 'accordion-collapse collapse';

            const body = document.createElement('div');
            body.className = 'accordion-body p-2';

            createAccordion(value.subcategories, body, itemId);

            collapseDiv.appendChild(body);
            accordionItem.appendChild(collapseDiv);
            parentElement.appendChild(accordionItem);

            index++;
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {


});
function formatNumber(num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

window.onload = function () {
    var path = window.location.pathname;
    var isMobile = window.innerWidth <= 768;
    var buble = document.getElementById('buble');
    var bubleSection = buble.parentNode;
    if (path.match(/^\/product\/\d+\/.+$/)) {
        if (buble) {
            if (isMobile) {
                bubleSection.classList.add("mb-5");
                bubleSection.classList.add("pb-5");
            }
        }
        bubleSection.classList.remove("d-none");
    } else {
        bubleSection.classList.add("mb-4");
    }
    setTimeout(function () {
        if (!sessionStorage.getItem('bubleHidden')) {
            if (buble) {
                buble.classList.remove("d-none");
            }
        }
        setTimeout(function () {
            if (buble) {
                buble.classList.add("d-none");
            }
        }, 15000);
    }, 3000);
    bubleSection.classList.remove("d-none");
    if (path.startsWith('/profile/') || path.startsWith('/contact-us/')) {
        if (bubleSection) {
            bubleSection.classList.add("d-none");
        }
    }
};
function hideBuble() {
    var buble = document.getElementById('buble');
    if (buble) {
        buble.classList.add("d-none");
        sessionStorage.setItem('bubleHidden', 'true');
    }
}
