@php
$route = request()->route()->getName();
@endphp
<div class="sidebar">
    <!-- Sidebar user panel (optional) -->

    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
            <img src="{{ auth()->user()->profile_image 
                    ? asset('storage/' . auth()->user()->profile_image) 
                    : asset('assets/images/no-image.png') }}"
                class="img-circle elevation-2"
                style="width: 2.5rem; height: 2.5rem;"
                alt="User Image">
        </div>
        <div class="info">
            <a href="{{ route('backend.admin.profile') }}" class="d-block text-white">
                {{ auth()->user()->name }}
            </a>
        </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            @can('dashboard_view')
            <li class="nav-item">
                <a href="{{ route('backend.admin.dashboard') }}"
                    class="nav-link {{ $route === 'backend.admin.dashboard' ? 'active' : '' }}">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        Dashboard
                    </p>
                </a>
            </li>
            @endcan

            {{-- ======================== CONTRIBUTIONS ======================== --}}
            @php
                $route = request()->route()->getName();
                $userId = auth()->id(); // current logged-in user
            @endphp

            @if (auth()->user()->hasAnyPermission([
                'view-contribution-view',
                'make-contribution-payment',
                'view-contribution-payment-history',
            ]))
            <li class="nav-header text-white">CONTRIBUTIONS</li>

            <li class="nav-item">
                <a href="#" class="nav-link d-flex justify-content-between align-items-center">
                    <span>
                        <i class="fas fa-hand-holding-usd nav-icon"></i>
                        Monthly Contributions
                    </span>
                    <span class="d-flex justify-content-between align-items-center">
                        <i class="fas fa-angle-left right"></i>
                    </span>
                </a>

                <ul class="nav nav-treeview">
                    @can('contribution_agreement')
                     <li class="nav-item">
                        <a href="{{ route('backend.admin.contributions.settings.view') }}"
                            class="nav-link {{ $route === 'backend.admin.contributions.settings.view' ? 'active' : '' }}">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Contribution Agreement</p>
                        </a>
                    </li>
                    @endcan
                    @can('view-contribution-view')
                    <li class="nav-item">
                        <a href="{{ route('backend.admin.contributions.index') }}"
                        class="nav-link {{ $route === 'backend.admin.contributions.index' ? 'active' : '' }}">
                            <i class="far fa-circle nav-icon"></i>
                            <p>All Contributions</p>
                        </a>
                    </li>
                    @endcan

                    @can('make-contribution-payment')
                    <li class="nav-item">
                        <a href="{{ route('backend.admin.contributions.payments.create') }}"
                        class="nav-link {{ $route === 'backend.admin.contributions.payments.create' ? 'active' : '' }}">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Make Payment</p>
                        </a>
                    </li>
                    @endcan

                    @can('view-contribution-payment-history')
                    <li class="nav-item">
                        <a href="{{ route('backend.admin.contributions.payments.index') }}"
                        class="nav-link {{ $route === 'backend.admin.contributions.payments.index' ? 'active' : '' }}">
                            <i class="far fa-circle nav-icon"></i>
                            <p>My Payment History</p>
                        </a>
                    </li>
                    @endcan
                </ul>
            </li>
            @endif

            {{-- settings --}}
            @if (auth()->user()->hasAnyPermission([
            //currency
            'currency-create',
            'currency-view',
            'currency-update',
            'currency-delete',
            'currency-set-default',
            //role
            'role_create',
            'role_view',
            'role_update',
            'role_delete',
            'permission_view',
            //user
            'user_create',
            'user_view',
            'user_update',
            'user_delete',
            'user_suspend',
            //setting
            'website_settings',
            'contact_settings',
            'socials_settings',
            'style_settings',
            'custom_settings',
            'notification_settings',
            'website_status_settings',
            'invoice_settings',
            ]))
            <li class="nav-header text-white">SETTINGS</li>

            <li class="nav-item">
                <a href="#" class="nav-link">
                    <i class="fas fa-cog nav-icon"></i>
                    <p>
                        Website Settings
                        <i class="fas fa-angle-left right"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    @if (auth()->user()->hasAnyPermission([
                    'website_settings',
                    'contact_settings',
                    'socials_settings',
                    'style_settings',
                    'custom_settings',
                    'notification_settings',
                    'website_status_settings',
                    'invoice_settings',
                    ]))
                    <li class="nav-item">
                        <a href="{{ route('backend.admin.settings.website.general') }}?active-tab=website-info"
                            class="nav-link {{ $route === 'backend.admin.settings.website.general' ? 'active' : '' }}">
                            <i class="fas fa-circle nav-icon"></i>
                            <p>General Settings</p>
                        </a>
                    </li>
                    @endif
                    @if (auth()->user()->hasAnyPermission(['currency-create','currency-view','currency-update','currency-delete']))
                    <li class="nav-item">
                        <a href="{{ route('backend.admin.currencies.index') }}"
                            class="nav-link {{ request()->routeIs([ 'backend.admin.currencies.index', 'backend.admin.currencies.create', 'backend.admin.currencies.edit']) ? 'active' : '' }}">
                            <i class="fas fa-coins nav-icon"></i>
                            <p>Currency</p>
                        </a>
                    </li>
                    @endif
                    @if (auth()->user()->hasAnyPermission([
                    'role_create',
                    'role_view',
                    'role_update',
                    'role_delete',
                    'permission_view',
                    ]))
                    <li class="nav-item">
                        <a href="#" class="nav-link d-flex justify-content-between align-items-center">
                            <span>
                                <i class="fas fa-chevron-circle-right nav-icon"></i>
                                Roles & Permissions
                            </span>
                            <span class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-angle-left right"></i>
                            </span>
                        </a>
                        <ul class="nav nav-treeview">
                            @can('role_view')
                            <li class="nav-item">
                                <a href="{{ route('backend.admin.roles') }}"
                                    class="nav-link {{ $route === 'backend.admin.roles' ? 'active' : '' }}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Roles</p>
                                </a>
                            </li>
                            @endcan
                            @can('permission_view')
                            <li class="nav-item">
                                <a href="{{ route('backend.admin.permissions') }}"
                                    class="nav-link {{ $route === 'backend.admin.permissions' ? 'active' : '' }}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Permissions</p>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </li>
                    @endif
                    {{-- ======================== CONTRIBUTION SETTINGS ======================== --}}
                    @can('website_settings') 
                    <li class="nav-item">
                        <a href="#" class="nav-link d-flex justify-content-between align-items-center">
                            <span>
                                <i class="fas fa-cogs nav-icon"></i>
                                Contributions
                            </span>
                            <span>
                                <i class="fas fa-angle-left right"></i>
                            </span>
                        </a>

                        <ul class="nav nav-treeview">
                            {{-- Edit / update settings --}}
                            <li class="nav-item">
                                <a href="{{ route('backend.admin.contributions.settings') }}"
                                    class="nav-link {{ $route === 'backend.admin.contributions.settings' ? 'active' : '' }}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Edit Settings</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    @endcan

                    @if (auth()->user()->hasAnyPermission([
                    //user
                    'user_create',
                    'user_view',
                    'user_update',
                    'user_delete',
                    'user_suspend',
                    ]))
                    <li class="nav-item">
                        <a href="{{ route('backend.admin.users') }}"
                            class="nav-link {{ $route === 'backend.admin.users' ? 'active' : '' }}">
                            <i class="fas fa-circle nav-icon"></i>
                            <p>User Management</p>
                        </a>
                    </li>
                    @endif
                </ul>
            </li>
            @endif
        </ul>
    </nav>
    <!-- /.sidebar-menu -->
</div>

<script>
    // Get all elements with the nav-treeview class
    const treeviewElements = document.querySelectorAll('.nav-treeview');

    // Iterate over each treeview element
    treeviewElements.forEach(treeviewElement => {
        // Check if it has the nav-link and active classes
        const navLinkElements = treeviewElement.querySelectorAll('.nav-link.active');

        // If there are nav-link elements with the active class, log the treeview element
        if (navLinkElements.length > 0) {
            // Add the menu-open class to the parent nav-item
            const parentNavItem = treeviewElement.closest('.nav-item');
            if (parentNavItem) {
                parentNavItem.classList.add('menu-open');
            }

            // Add the active class to the immediate child nav-link
            const childNavLink = parentNavItem.querySelector('.nav-link');
            if (childNavLink) {
                childNavLink.classList.add('active');
            }
        }
    });
</script>