<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>
    /* Style for collapsed sidebar */
    #sidebar.collapsed {
        width: 70px;
    }
    
    #sidebar.collapsed .sidebar-text {
        display: none;
    }
    
    /* Add smooth transition for collapse */
    .collapse {
        transition: all 0.3s ease;
    }
    
    /* Fix for dropdown menu */
    .collapse:not(.show) {
        display: none;
    }
    
    /* Make sure .collapse.show is explicitly displayed */
    .collapse.show {
        display: block !important;
    }

    /* Make collapse parent non-clickable on child elements */
    .collapse.show a {
        pointer-events: auto;
    }
</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('.fa-chevron-down');
            
            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');
                            }
                        }
                    });
                });

                // Start observing the target element
                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
                });
            }
        });
    });
</script>