window.addEventListener('DOMContentLoaded', function () {
    $('.nav-link-main.dropdown-toggle').on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        /*
        tabs mega Menü
         */

        // andere Dropdowns schließen
        $('.navbar-nav .dropdown-menu').removeClass('show');
        $('.nav-link-toggle').removeClass('show').attr('aria-expanded', "false");

        // dieses Dropdown öffnen
        const dropdown = $(this).next();
        dropdown.toggleClass('show');
        $(this).attr('aria-expanded', dropdown.hasClass('show') ? 'true' : 'false');
        dropdown.next().toggleClass('show').attr('data-bs-popper', "static");
        imgMedia = dropdown.find('.dropdown-image.lazy').data('media');
        if(imgMedia  ) {
            dropdown.find('.dropdown-image').css({backgroundImage: 'url(' + imgMedia + ')'});
        }
        const megatabs = dropdown.find('.mega-tabs');
        if (!megatabs.length) return;

        // nur wenn KEIN Main-Tab aktiv ist, initialisieren wir
        if (megatabs.find('.active').length === 0) {

            // --- ALLES DEAKTIVIEREN (scoped auf dieses Mega-Menü) ---
            // Main-Tabs & Panes
            // megatabs.find('.nav-tabs .nav-link')
            //     .removeClass('active show').attr('aria-selected','false');
            // megatabs.find('> .tab-content .tab-pane')
            //     .removeClass('active show');
            //
            // // Inner-Tabs & Subpanes
            // megatabs.find('.nav-pills .tab-link')
            //     .removeClass('active show').attr('aria-selected','false');
            // megatabs.find('.tab-content .tab-pane')
            //     .removeClass('active show');
            //
            // // Sub-Links (Cards)
            // megatabs.find('.mega-cards .nav-link a, .mega-cards .nav-link')
            //     .removeClass('active');

            // --- ERSTEN MAIN-TAB AKTIVIEREN ---
            const firstMainTab = megatabs.find('.nav-tabs .nav-link.first').first();
            const mainTarget = firstMainTab.data('bsTarget') || firstMainTab.attr('href');

            firstMainTab.addClass('active show').attr('aria-selected','true');
            if (mainTarget) $(mainTarget).addClass('active show');

            // --- ERSTEN INNER-TAB AKTIVIEREN ---
            const innerTabs = $(mainTarget).find('.nav-pills .tab-link');
            const firstInnerTab = innerTabs.first();
            const innerTarget = firstInnerTab.data('bsTarget') || firstInnerTab.attr('href');

            firstInnerTab.addClass('active show').attr('aria-selected','true');
            if (innerTarget) $(innerTarget).addClass('active show');

            // --- ERSTEN SUB-LINK (CARD) AKTIVIEREN ---
            const firstSubLink = $(innerTarget)
                .find('.mega-cards .nav-link a, .mega-cards > .mega-cardwrap > .card .nav-link a')
                .first();

            // nur optisch markieren (kein echter Tab)
            firstSubLink.addClass('active');
            // Optional: echten Klick/Navigation auslösen
            // firstSubLink.trigger('click'); // oder window.location.href = firstSubLink.attr('href');
        }
        else{
            let mainTActive = null;
            $.each(megatabs.find('.active'),function(){
                console.log(this);
              if(!mainTActive){
                  $(this).parents('.tab-pane').first().addClass('active show');
                  if($(this).parents('.tab-pane').first().hasClass('sub-pane')){
                      $(this).parents('.tab-pane').addClass('active show');
                  }

                  // $('[aria-controls='+this.id+']').addClass('active show');
                  $('[href="#'+$(this).parents('.tab-pane').attr('id')+'"]').addClass('active show');

                  $('#'+$(this).attr('aria-controls')).addClass('active show');
                  mainTActive = this;
              }
              else{
                  // $(this).parents('.tab-pane').first().addClass('active show');
                  //
                  // // $('[href="#'+$(this).parents('.tab-pane').first().attr('id')+']').addClass('active show');
                  // $('#'+$(this).attr('aria-controls')).addClass('active show');

              }
            })
            // --- ALLES DEAKTIVIEREN (scoped auf dieses Mega-Menü) ---
            // Main-Tabs & Panes

            // megatabs.find('> .tab-content .tab-pane')
            //     .removeClass('active show');
            //
            // // Inner-Tabs & Subpanes
            // megatabs.find('.nav-pills .tab-link')
            //     .removeClass('active show').attr('aria-selected','false');
            // megatabs.find('.tab-content .tab-pane')
            //     .removeClass('active show');
            //
            // // Sub-Links (Cards)
            // megatabs.find('.mega-cards .nav-link a, .mega-cards .nav-link')
            //     .removeClass('active');

        }
    });




    /*
     * Toggle collapsed class on navbar toggle button to change
     * the appearance of the toggle button when navbar is open
     */
    const navbarCollapse = document.querySelectorAll('.navbar-collapse');
    navbarCollapse.forEach(
        function (navbar) {
            navbar.addEventListener('show.bs.collapse', function () {
                document.querySelectorAll('.navbar-toggle').forEach(function (element) {
                    element.classList.remove('collapsed');
                });
            });
            navbar.addEventListener('hide.bs.collapse', function () {
                document.querySelectorAll('.navbar-toggle').forEach(function (element) {
                    element.classList.add('collapsed');
                });
            });
        }
    )

    /*
     * Solution to enable links on dropdowns, the link will only be triggered
     * if the dropdown is visible. On touch devices you will need to double
     * click on a dropdown, the first click will open the menu.
     */
    function navbarPointerOver(element) {
        let toggle = document.querySelector('.navbar-toggler');
        if (window.getComputedStyle(toggle).display === 'none' && element.classList.contains('open') === false) {
            Array.from(element.parentElement.parentElement.querySelectorAll('li')).forEach(function(listItem) {
                listItem.classList.remove('show');
            });
            element.classList.add('show');
            element.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'true');
            element.querySelector('.dropdown-menu').classList.add('show');
        }
    }
    function navbarPointerLeave(element) {
        let toggle = document.querySelector('.navbar-toggler');
        if (window.getComputedStyle(toggle).display === 'none') {
            element.classList.remove('show');
            element.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');
            element.querySelector('.dropdown-menu').classList.remove('show');
        }
    }

    Array.from(document.querySelectorAll('li.dropdown-hover')).forEach(function(element) {
        element.addEventListener('pointerover', (e) => {
            if (e.pointerType === "mouse") {
                navbarPointerOver(element);
            }
        });
        element.addEventListener('mouseenter', () => {
            if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
                navbarPointerOver(element);
            }
        });
        element.addEventListener('pointerleave', (e) => {
            if (e.pointerType === "mouse") {
                navbarPointerLeave(element);
            }
        });
        element.addEventListener('mouseleave', () => {
            if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
                navbarPointerLeave(element);
            }
        });
    });

    Array.from(document.querySelectorAll('.nav-link')).forEach(function(element) {
        element.addEventListener('click', (e) => {
            let listElement = element.parentElement;
            if (listElement.classList.contains('dropdown-hover') && listElement.classList.contains('show') === false) {
                let listElementSiblings = listElement.parentElement.querySelectorAll('.dropdown-hover');
                Array.from(listElementSiblings).forEach(function(listElementsSibling) {
                    listElementsSibling.setAttribute('aria-expanded', 'false')
                    listElementsSibling.classList.remove('show');
                });
                let listElementMenus = listElement.parentElement.querySelectorAll('.dropdown-menu');
                Array.from(listElementMenus).forEach(function(listElementMenu) {
                    listElementMenu.classList.remove('show');
                });
                listElement.classList.add('show');
                listElement.setAttribute('aria-expanded', 'true')
                listElement.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'true');
                listElement.querySelector('.dropdown-menu').classList.add('show');
                e.stopImmediatePropagation();
                e.preventDefault();
                return false;
            }
        });
    });

    $(document).click(function (event) {

        /// If *navbar-collapse* is not among targets of event
        if (!$(event.target).is('.nav-link:not(.tab-link), .nav-link:not(.tab-link) *, .mega-tabs *')) {

            /// Collapse every *navbar-collapse*
            $('.navbar-collapse .dropdown-menu').removeClass('show');
            $('.navbar-collapse .nav-link-toggle').removeClass('show').attr('aria-expanded', "false");

        }
    });


});