@if (auth()->user()->roles()->exists() || auth()->user()->permissions()->exists())
        <ul class="navbar-nav" data-top-nav-dropdowns="data-top-nav-dropdowns">
            <li class="nav-item">
                <!-- parent pages-->
                <a wire:navigate.hover wire:current="active" class="nav-link" href="{{ route('dashboard') }}"
                    role="button">{{ __('Dashboard') }}</a>
            </li>
            <li class="nav-item">
                <a wire:navigate.hover wire:current="active" class="nav-link" href="{{ route('mikrotik-sync') }}"
                    role="button">{{ __('Mikrotik Sync') }}</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="mikrotikSetupNav">{{ __('Mikrotik Setup') }}</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0"
                    aria-labelledby="mikrotikSetupNav">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2">
                        <img class="img-dropdown" src="{{ asset('images/authentication-corner.png') }}"
                            width="60" alt="" />

                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-ip-setup') }}">{{ __('IP & Pool') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-pppoe-setup') }}">{{ __('PPPoE Server') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-radius-setup') }}">{{ __('RADIUS') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-firewall-setup') }}">{{ __('Firewall') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-walled-garden') }}">
                            {{ __('Walled Garden') }} <span class="badge rounded-pill ms-2 badge-subtle-info">{{ __('New') }}</span>
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-queue-setup') }}">{{ __('Queues') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-vpn-setup') }}">{{ __('VPN Server') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-interface-setup') }}">{{ __('Interfaces & VLAN') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-traffic-monitor') }}">{{ __('Live Traffic') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-log-viewer') }}">{{ __('Router Logs') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-backup-setup') }}">{{ __('Backup & Restore') }}</a>

                        <hr class="my-2">
                        {{-- Highlighted Hotspot --}}
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('mikrotik-hotspot-manager') }}">
                            <span>📶 {{ __('Hotspot Manager') }}</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <!-- parent pages-->
                <a wire:navigate.hover wire:current="active" class="nav-link" href="{{ route('address-setup') }}"
                    role="button">{{ __('Address') }}</a>
            </li>
            <li class="nav-item">
                <!-- parent pages-->
                <a wire:navigate.hover wire:current="active" class="nav-link"
                    href="{{ route('package-list-setup') }}" role="button">{{ __('Package') }}</a>
            </li>
            <li class="nav-item">
                <!-- parent pages-->
                <a wire:navigate.hover wire:current="active" class="nav-link" href="{{ route('new-customer') }}"
                    role="button">{{ __('Create Customer') }}</a>
            </li>
            <li class="nav-item">
                <!-- parent pages-->
                <a wire:navigate.hover wire:current.exact="active" class="nav-link"
                    href="{{ route('customers.index') }}" role="button">{{ __('Subscribers') }}</a>
            </li>
            <li class="nav-item">
                <a wire:navigate.hover wire:current="active" class="nav-link" href="{{ route('admin-tickets') }}"
                    role="button">{{ __('Support Tickets') }}</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="collections">{{ __('Collection') }}</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0"
                    aria-labelledby="collections">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2">
                        <img class="img-dropdown" src="{{ asset('images/authentication-corner.png') }}"
                            width="60" alt="" />
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('payment-collection') }}">{{ __('Payment Collection') }}</a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('collection-edit') }}">
                            {{ __('Collection Edit') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('payment-invoice') }}">
                            {{ __('Payment Invoice') }}
                        </a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="reports">{{ __('Reports') }}</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="reports">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2">
                        <img class="img-dropdown" src="{{ asset('images/authentication-corner.png') }}"
                            width="60" alt="" />
                        <a wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('collection-report.index') }}">
                            {{ __('Collections Report') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('customer-summary') }}">
                            {{ __('Customer Summary') }}
                        </a>
                        <a wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('dis-report') }}">
                            {{ __('DIS Summary') }}
                            <span class="badge rounded-pill ms-2 badge-subtle-success">{{ __('New') }}</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="financeDropdown">{{ __('Finance') }}</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0"
                    aria-labelledby="financeDropdown">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2">
                        <img class="img-dropdown" src="{{ asset('images/authentication-corner.png') }}"
                            width="60" alt="" />
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.expenses') }}">
                            {{ __('Expense Management') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.profit-summary') }}">
                            {{ __('Profit & Loss') }}
                        </a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="admin">{{ __('Admin') }}</a>
                <div class="dropdown-menu dropdown-caret dropdown-menu-card border-0 mt-0" aria-labelledby="admin">
                    <div class="bg-white dark__bg-1000 rounded-3 py-2">
                        <img class="img-dropdown" src="{{ asset('images/authentication-corner.png') }}" width="60" alt="" />
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.resellers.index') }}">
                            {{ __('Tenant setup') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.purchase-requests') }}">
                            {{ __('Purchase Requests') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.activity-logs') }}">
                            {{ __('Activity Logs') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.login-logs') }}">
                            {{ __('Login Logs') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.system-logs') }}">
                            {{ __('System Logs') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.reviews') }}">
                            {{ __('Customer Reviews') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('admin.vouchers') }}">
                            {{ __('Tenant vouchers') }}
                        </a>
                        <a wire:navigate.hover wire:current="active" class="dropdown-item link-600 fw-medium"
                            href="{{ route('sms-setup') }}">
                            {{ __('SMS Setup') }}
                        </a>
                    </div>
                </div>
            </li>
        </ul>
@else
    <ul class="navbar-nav" data-top-nav-dropdowns="data-top-nav-dropdowns">
        <li class="nav-item">
            <a wire:navigate.hover wire:current="active" class="nav-link" href="{{ route('profile.show') }}"
                role="button">{{ __('Profile') }}</a>
        </li>
    </ul>
@endif