// // resources/js/components/sidebar.js
//
// var pathName = window.location.href;
// pathName = pathName.replace(/\/+$/, ''); // Remove last slash from string
//
// var url = window.location.href;
// var a = url.indexOf('?');
// var b = url.substring(a);
// var c = url.replace(b, '');
// url = c;
//
// $(document).ready(function () {
//     const sidebar = $('#main'); // Hier solltest du die Sidebar per ID oder Klasse auswählen
//     // Zustandsvariablen für die jeweiligen Modi:
//     let desktopCollapsed = false; // false = Sidebar ist ausgeklappt, true = eingeklappt
//     let tabletExpanded = false; // false = Sidebar ist standardmäßig geschlossen, true = geöffnet
//     let mobileExpanded = false; // false = Sidebar ist ausgeblendet, true = vollständig ausgefahren
//
//
//     // Funktion, die anhand der Fensterbreite den aktuellen Modus zurückgibt
//     function getMode() {
//         const w = $(window).width();
//         if (w < 640) {
//             return 'mobile';
//         } else if (w < 1024) {
//             return 'tablet';
//         } else {
//             return 'desktop';
//         }
//     }
//
//     function closeAllMenus() {
//         document.querySelectorAll('#sidebar [x-data]').forEach(el => {
//             if (el.__x) {
//                 el.__x.$data.open = false;
//             }
//         });
//     }
//
//     function applyMode() {
//         sidebar.removeClass('u-collapsed ut-expanded m-expanded expanded');
//         const mode = getMode();
//         if (mode === 'desktop') {
//             if (desktopCollapsed) {
//                 sidebar.addClass('u-collapsed');
//                 closeAllMenus(); // <<< HIER
//             } else {
//                 sidebar.addClass('expanded');
//             }
//         } else if (mode === 'tablet') {
//             if (tabletExpanded) {
//                 sidebar.addClass('ut-expanded expanded');
//             } else {
//                 closeAllMenus(); // <<< HIER
//             }
//         } else if (mode === 'mobile') {
//             if (mobileExpanded) {
//                 sidebar.addClass('m-expanded expanded');
//             } else {
//                 closeAllMenus(); // <<< HIER
//             }
//         }
//     }
//
//     // Funktion, die alle toggle-Klassen entfernt und anhand des aktuellen Modus den Zustand anwendet
//     // function applyMode() {
//     //     // Entferne alle Klassen, die du zur Steuerung verwendest
//     //     sidebar.removeClass('u-collapsed ut-expanded m-expanded expanded');
//     //     const mode = getMode();
//     //     if (mode === 'desktop') {
//     //         if (desktopCollapsed) {
//     //             sidebar.addClass('u-collapsed');
//     //         } else {
//     //             sidebar.addClass('expanded');
//     //         }
//     //     } else if (mode === 'tablet') {
//     //         if (tabletExpanded) {
//     //             sidebar.addClass('ut-expanded expanded');
//     //         }
//     //     } else if (mode === 'mobile') {
//     //         if (mobileExpanded) {
//     //             sidebar.addClass('m-expanded expanded');
//     //         }
//     //     }
//     // }
//
//     // Beim Klick auf den Toggle-Button wird je nach aktuellem Modus der entsprechende Zustand umgeschaltet
//     $('.sidebar-toggle').on('click', function () {
//         const mode = getMode();
//         if (mode === 'desktop') {
//             desktopCollapsed = !desktopCollapsed;
//         } else if (mode === 'tablet') {
//             tabletExpanded = !tabletExpanded;
//         } else if (mode === 'mobile') {
//             mobileExpanded = !mobileExpanded;
//         }
//         applyMode();
//     });
//
//     applyMode();
//
//     $(window).resize(function () {
//         applyMode();
//         desktopCollapsed = false
//         tabletExpanded = false
//         mobileExpanded = false
//     })
// });


// document.addEventListener('DOMContentLoaded', () => {
//     const sidebar = document.getElementById('sidebar');
//     const shell   = document.getElementById('main');
//     if (!sidebar || !shell) return;
//
//     const toggles = sidebar.querySelectorAll('.sidebar-toggle');
//     const secBtns = sidebar.querySelectorAll('.js-sec-toggle');
//
//     // state
//     let desktopCollapsed = false; // >=1024
//     let tabletExpanded   = false; // 640-1023
//     let mobileExpanded   = false; // <640 offcanvas
//
//     const getMode = () => {
//         const w = window.innerWidth;
//         if (w < 640) return 'mobile';
//         if (w < 1024) return 'tablet';
//         return 'desktop';
//     };
//
//     const closeAllMenus = () => {
//         sidebar.querySelectorAll('[x-data]').forEach(el => {
//             if (el.__x) el.__x.$data.open = false;
//         });
//     };
//
//     const applyMobileTranslate = () => {
//         if (getMode() === 'mobile') {
//             if (mobileExpanded) {
//                 sidebar.classList.add('translate-x-0');
//                 sidebar.classList.remove('-translate-x-full');
//             } else {
//                 sidebar.classList.add('-translate-x-full');
//                 sidebar.classList.remove('translate-x-0');
//             }
//         } else {
//             sidebar.classList.remove('-translate-x-full');
//             sidebar.classList.add('translate-x-0');
//         }
//     };
//
//     const applyMode = () => {
//         // clean classes
//         sidebar.classList.remove('u-collapsed','ut-expanded','m-expanded','expanded');
//         shell.classList.remove('rail','ut-expanded');
//
//         applyMobileTranslate();
//
//         const mode = getMode();
//         if (mode === 'desktop') {
//             if (desktopCollapsed) {
//                 sidebar.classList.add('u-collapsed'); // rail visuals
//                 shell.classList.add('rail');          // narrow padding
//                 closeAllMenus();
//             } else {
//                 sidebar.classList.add('expanded');
//                 // shell default (16rem) via :root --sb-w
//             }
//         } else if (mode === 'tablet') {
//             if (tabletExpanded) {
//                 sidebar.classList.add('ut-expanded','expanded');
//                 shell.classList.add('ut-expanded');   // 16rem padding
//             } else {
//                 sidebar.classList.add('u-collapsed'); // rail visuals
//                 shell.classList.add('rail');          // 5.2rem padding
//                 closeAllMenus();
//             }
//         } else {
//             // mobile
//             if (mobileExpanded) {
//                 sidebar.classList.add('m-expanded','expanded');
//             } else {
//                 closeAllMenus();
//             }
//             // shell has no padding on mobile (CSS)
//         }
//     };
//
//     // Toggle buttons (footer + mobile top)
//     toggles.forEach(btn => {
//         btn.addEventListener('click', () => {
//             const mode = getMode();
//             if (mode === 'desktop') {
//                 desktopCollapsed = !desktopCollapsed;
//             } else if (mode === 'tablet') {
//                 tabletExpanded   = !tabletExpanded;
//             } else {
//                 mobileExpanded   = !mobileExpanded;
//             }
//             applyMode();
//         });
//     });
//
//     // In RAIL: clicking a section expands sidebar first and opens submenu
//     secBtns.forEach(btn => {
//         btn.addEventListener('click', (e) => {
//             const isRail = sidebar.classList.contains('u-collapsed');
//             if (!isRail) return; // Alpine handles toggle (open=!open) already
//
//             // prevent Alpine's inline handler from running
//             e.preventDefault();
//             e.stopPropagation();
//
//             const mode = getMode();
//             if (mode === 'desktop') {
//                 desktopCollapsed = false;           // expand
//             } else if (mode === 'tablet') {
//                 tabletExpanded   = true;            // expand
//             } else {
//                 mobileExpanded   = true;            // show offcanvas
//             }
//             applyMode();
//
//             // open the correct submenu after expansion
//             const xroot = btn.closest('[x-data]');
//             if (xroot && xroot.__x) {
//                 xroot.__x.$data.open = true;
//             }
//         });
//     });
//
//     // Resize: reset and re-apply
//     window.addEventListener('resize', () => {
//         desktopCollapsed = false;
//         tabletExpanded   = false;
//         mobileExpanded   = false;
//         applyMode();
//     });
//
//     applyMode();
// });

document.addEventListener('DOMContentLoaded', () => {
    requestAnimationFrame(() => {
        document.documentElement.setAttribute('data-ui', 'ready');
    });

    // optional Anti-FOUC
    document.body.classList.remove('no-animate');

    const sidebar = document.getElementById('sidebar');
    const shell   = document.getElementById('main');
    if (!sidebar || !shell) return;

    // WICHTIG: sowohl Footer-Toggle (in Sidebar) als auch Button im Header
    const toggles = document.querySelectorAll('.sidebar-toggle');
    const secBtns = sidebar.querySelectorAll('.js-sec-toggle');

    // state
    let desktopCollapsed = false; // >=1024
    let tabletExpanded   = false; // 640-1023
    let mobileExpanded   = false; // <640 offcanvas

    const getMode = () => {
        const w = window.innerWidth;
        if (w < 640) return 'mobile';
        if (w < 1024) return 'tablet';
        return 'desktop';
    };

    const closeAllMenus = () => {
        sidebar.querySelectorAll('[x-data]').forEach(el => {
            if (el.__x) el.__x.$data.open = false;
        });
    };

    const applyMobileTranslate = () => {
        if (getMode() === 'mobile') {
            if (mobileExpanded) {
                sidebar.classList.add('translate-x-0');
                sidebar.classList.remove('-translate-x-full');
            } else {
                // sidebar.classList.add('-translate-x-full');
                sidebar.classList.remove('translate-x-0');
            }
        } else {
            sidebar.classList.remove('-translate-x-full');
            sidebar.classList.add('translate-x-0');
        }
    };

    const applyMode = () => {
        // reset Klassen
        sidebar.classList.remove('u-collapsed','ut-expanded','m-expanded','expanded');
        shell.classList.remove('rail','ut-expanded');

        applyMobileTranslate();

        const mode = getMode();
        if (mode === 'desktop') {
            if (desktopCollapsed) {
                sidebar.classList.add('u-collapsed');
                shell.classList.add('rail');     // -> CSS setzt --sb-w: 5.2rem
                closeAllMenus();
            } else {
                sidebar.classList.add('expanded');
                // shell bleibt default --sb-w:16rem
            }
        } else if (mode === 'tablet') {
            if (tabletExpanded) {
                sidebar.classList.add('ut-expanded','expanded');
                shell.classList.add('ut-expanded'); // -> --sb-w:16rem
            } else {
                sidebar.classList.add('u-collapsed');
                shell.classList.add('rail');        // -> --sb-w:5.2rem
                closeAllMenus();
            }
        } else { // mobile
            if (mobileExpanded) {
                sidebar.classList.add('m-expanded','expanded');
            } else {
                closeAllMenus();
            }
            // shell hat auf Mobile kein Padding (CSS)
        }
    };

    // Toggle-Klick (Header + Sidebar)
    toggles.forEach(btn => {
        btn.addEventListener('click', () => {
            const mode = getMode();
            if (mode === 'desktop') {
                desktopCollapsed = !desktopCollapsed;
            } else if (mode === 'tablet') {
                tabletExpanded   = !tabletExpanded;
            } else {
                mobileExpanded   = !mobileExpanded;
            }
            applyMode();
        });
    });

    // Wenn im Rail auf einen Abschnitt geklickt wird ⇒ erst expanden, dann Submenü öffnen
    secBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            const isRail = sidebar.classList.contains('u-collapsed');
            if (!isRail) return; // Alpine macht open = !open

            e.preventDefault();
            e.stopPropagation();

            const mode = getMode();
            if (mode === 'desktop') {
                desktopCollapsed = false;
            } else if (mode === 'tablet') {
                tabletExpanded   = true;
            } else {
                mobileExpanded   = true;
            }
            applyMode();

            const xroot = btn.closest('[x-data]');
            if (xroot && xroot.__x) xroot.__x.$data.open = true;
        });
    });

    // Resize → Zustand zurücksetzen, sauber neu anwenden
    window.addEventListener('resize', () => {
        desktopCollapsed = false;
        tabletExpanded   = false;
        mobileExpanded   = false;
        applyMode();
    });

    applyMode();
});