<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">

<!-- Main Sidebar - Collapsible -->
<nav id="sidebar" class="col-md-2 col-lg-2 d-none d-md-block bgGradDown sidebar min-vh-100 pt-4 position-fixed">
    <div class="sidebar-sticky vh-100">
        <!-- Collapse button -->
        <div class="d-flex justify-content-end mb-3 px-3">
            <button id="sidebarCollapse" class="btn btn-transparent">
                <i id="sidebarIcon" class="fas fa-arrow-left text-white"></i>
            </button>
        </div>
        
        <ul class="nav flex-column position-relative customHeight">
            @include('layouts.partials.sidebar_navigators')
        </ul>
    </div>
</nav>

<style>
    /* 1 – make the bar skinny when you click the arrow */
        #sidebar.collapsed           { width: 70px; }

        /* 2 – hide ALL text while it’s skinny … */
        #sidebar.collapsed .sidebar-text { display: none; }

        /* 3 – …except the text that lives in the OPEN dropdown panel */
        #sidebar.collapsed .collapse.show .sidebar-text {
            display: block !important;        /* <-- the magic switch-back-on line   */
        }


    
    /* Add smooth transition for collapse */
    .collapse {
        transition: height 0.3s ease;
    }
    
    

    /* Make collapse parent non-clickable on child elements */
    .collapse.show a {
        pointer-events: auto;
    }

    /* …your existing rules… */

    /* ← NEW override: when the panel is open, actually show it */
    .collapse.show {
        visibility: visible !important;
    }


</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sidebarCollapseButton = document.getElementById('sidebarCollapse');
        const sidebarIcon = document.getElementById('sidebarIcon');
        const sidebar = document.getElementById('sidebar');

        // Handle main sidebar collapse
        sidebarCollapseButton.addEventListener('click', function () {
            sidebar.classList.toggle('collapsed');
            if (sidebar.classList.contains('collapsed')) {
                sidebarIcon.classList.remove('fa-arrow-left');
                sidebarIcon.classList.add('fa-arrow-right');
            } else {
                sidebarIcon.classList.remove('fa-arrow-right');
                sidebarIcon.classList.add('fa-arrow-left');
            }
        });

        // Handle the dropdown icons
        document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function(collapseToggle) {
            // Get the target collapse element ID
            const targetId = collapseToggle.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            const iconElement = collapseToggle.querySelector('.dropdown-arrow');
            
            if (iconElement && targetElement) {
                // Create a MutationObserver to watch for changes to the collapse element
                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            // Check if the collapse is shown
                            if (targetElement.classList.contains('show')) {
                                iconElement.classList.remove('fa-chevron-down');
                                iconElement.classList.add('fa-chevron-up');
                            } else {
                                iconElement.classList.remove('fa-chevron-up');
                                iconElement.classList.add('fa-chevron-down');
                            }
                            const isOpen = targetElement.classList.contains('show');
                            iconElement.classList.toggle('fa-chevron-down', !isOpen);
                            iconElement.classList.toggle('fa-chevron-up',   isOpen);
                        }
                    });
                });

                // Start observing the target elementl
                observer.observe(targetElement, { 
                    attributes: true
                });
                
                // Handle initial click on the toggle
                collapseToggle.addEventListener('click', function(e) {
                    // This is just for the initial click if needed
                    // Bootstrap will handle the actual collapsing
                });
            }
        });
           /* ─── EIBS: allow only one open panel ─── */
        const allCollapses = document.querySelectorAll('.collapse');

        allCollapses.forEach(function (panel) {
            /* When any panel STARTS to open… */
            panel.addEventListener('show.bs.collapse', function () {

                /* …loop through every other panel… */
                allCollapses.forEach(function (openPanel) {
                    if (openPanel !== panel && openPanel.classList.contains('show')) {
                        /* …and close it. */
                        /* If Bootstrap already has an instance → use it, otherwise create one on the fly */
                        (bootstrap.Collapse.getInstance(openPanel) ||
                         new bootstrap.Collapse(openPanel))
                         .hide();
                    }
                });
            });
        });
    });
</script>
