<li
    class="nav-item {{ request()->routeIs(['billCollection', 'fund-transfer.index', 'income-head.index', 'income-head.index', 'income.index', 'expense-head.index', 'expense.index', 'account-statement']) ? 'menu-open' : '' }}">
    <a href="#" class="nav-link ">
        <i class="fas fa-chart-line nav-icon "></i>
        <p>
            Accounts
            <i class="fas fa-angle-left right "></i>
        </p>
    </a>
    <ul class="nav nav-treeview ml-2">

        @can('extra')
            @can('income-section')
                @can('account-statement')
                    <li class="nav-item"><a href="{{ route('account-statement') }}"
                            class="nav-link {{ request()->routeIs(['account-statement']) ? 'active' : '' }}">
                            <i class="ml-4 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                            <p>Account Statements</p>
                        </a>
                    </li>
                @endcan
            @endcan
        @endcan

        @can('money-receipt-entry')
            <li class="nav-item">
                <a href="{{ route('billCollection') }}"
                    class="nav-link {{ request()->routeIs(['billCollection']) ? 'active' : '' }}">
                    <i class="ml-4 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                    <p>Bill Collection</p>
                </a>
            </li>
        @endcan

        @can('extra')
            @can('expense-section')
                {{-- @can('account-head')
                            <li class="nav-item">
                                <a href="#" class="nav-link">Account Head</a>
                            </li>
                        @endcan --}}
                {{-- @can('expense-head')
                    <li class="nav-item">
                        <a href="{{ route('expense-head.index') }}"
                            class="nav-link {{ request()->routeIs(['expense-head.index']) ? 'active' : '' }}"><i
                                class="fa fa-circle nav-icon"></i>Expense Head</a>
                    </li>
                @endcan --}}
                @can('expense-entry')
                    <li class="nav-item">
                        <a href="{{ route('expense.index') }}"
                            class="nav-link {{ request()->routeIs(['expense.index']) ? 'active' : '' }}">
                            <i class="ml-4 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                            <p>Expenses</p>
                        </a>
                    </li>
                @endcan
            @endcan
        @endcan

        @can('fund-transfer')
            <li class="nav-item">
                <a href="{{ route('fund-transfer.index') }}" {{-- class="nav-link {{ request()->routeIs(['fund-transfer']) ? 'active' : '' }}"> --}}
                    class="nav-link {{ request()->routeIs(['fund-transfer.index']) ? 'active' : '' }}">
                    <i class="ml-4 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                    <p>Fund Transfer</p>
                </a>
            </li>
        @endcan

        @can('extra')
            @can('income-section')
                {{-- @can('other-income')
                    <li class="nav-item">
                        <a href="#" class="nav-link"> <i class="fa fa-circle nav-icon"></i>Other Income</a>
                    </li>
                @endcan --}}

                {{-- @can('income-head')
                    <li class="nav-item">
                        <a href="{{ route('income-head.index') }}"
                            class="nav-link {{ request()->routeIs(['income-head.index']) ? 'active' : '' }}">
                            <i class="fa fa-circle nav-icon"></i>Income Head</a>
                    </li>
                @endcan --}}

                @can('income-entry')
                    <li class="nav-item"><a href="{{ route('income.index') }}"
                            class="nav-link {{ request()->routeIs(['income.index']) ? 'active' : '' }}">
                            <i class="ml-4 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                            <p>Incomes</p>
                        </a></li>
                @endcan
            @endcan
        @endcan
    </ul>
</li>


<style>
    p i {
        font-size: 8px;
        background: #f4f4f5;
        border-radius: 50%;
        padding: 5px;
        text-align: center;
        color: gray;
    }
</style>
