@php
    $unreadCount = Auth::user() ? Auth::user()->unreadNotifications()->count() : 0;
@endphp
<div class="sidenav-menu">
    <!-- Brand Logo -->
    <a class="logo" href="{{ route('dashboard') }}">
        <span class="logo logo-light">
            <span class="logo-lg"><img alt="logo" src="/images/logo.png" /></span>
            <span class="logo-sm"><img alt="small logo" src="/images/logo-sm.png" /></span>
        </span>
        <span class="logo logo-dark">
            <span class="logo-lg"><img alt="dark logo" src="/images/logo-black.png" /></span>
            <span class="logo-sm"><img alt="small logo" src="/images/logo-sm.png" /></span>
        </span>
    </a>
    <!-- Sidebar Hover Menu Toggle Button -->
    <button class="button-on-hover">
        <span class="btn-on-hover-icon"></span>
    </button>
    <!-- Full Sidebar Menu Close Button -->
    <button class="button-close-offcanvas">
        <i class="align-middle" data-lucide="menu"></i>
    </button>
    <div class="scrollbar" data-simplebar="">
        <div class="sidenav-user" id="user-profile-settings" style="background: url(/images/user-bg-pattern.svg)">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a class="link-reset" href="#!">
                        <div class="avatar-md d-flex align-items-center justify-content-center bg-primary text-white rounded-circle mb-2 fs-16 fw-bold" style="width: 48px; height: 48px;">
                            {{ Auth::user() ? substr(Auth::user()->name, 0, 2) : 'U' }}
                        </div>
                        <span class="sidenav-user-name fw-bold">{{ Auth::user()->name ?? 'Guest User' }}</span>
                        <span class="fs-12 fw-semibold" data-lang="user-role">{{ Auth::user() && Auth::user()->roles->first() ? Auth::user()->roles->first()->name : 'Guest' }}</span>
                    </a>
                </div>
                <div>
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle drop-arrow-none link-reset sidenav-user-set-icon" data-bs-offset="0,12" data-bs-toggle="dropdown" href="#" id="sidenav-user-dropdown" role="button">
                        <i class="fs-24 align-middle ms-1" data-lucide="settings"></i>
                    </a>
                    <div class="dropdown-menu">
                        <!-- Header -->
                        <div class="dropdown-header noti-title">
                            <h6 class="text-overflow m-0">Welcome back!</h6>
                        </div>
                        <!-- My Profile -->
                        <a class="dropdown-item" href="{{ route('profile.edit') }}">
                            <i class="me-1 fs-lg align-middle" data-lucide="circle-user-round"></i>
                            <span class="align-middle">Profile</span>
                        </a>
                        @can('manage-settings')
                            <a class="dropdown-item" href="{{ route('settings.index') }}">
                                <i class="me-1 fs-lg align-middle" data-lucide="bolt"></i>
                                <span class="align-middle">Settings</span>
                            </a>
                        @endcan
                        <!-- Logout -->
                        <a class="dropdown-item text-danger fw-semibold" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('sidenav-logout-form').submit();">
                            <i class="me-1 fs-lg align-middle" data-lucide="log-out"></i>
                            <span class="align-middle">Log Out</span>
                        </a>
                        <form id="sidenav-logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--- Sidenav Menu -->
        <div id="sidenav-menu">
            <ul class="side-nav">
                @if(Auth::user() && Auth::user()->hasRole('family-contact'))
                    <li class="side-nav-title mt-2">Household Portal</li>
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('dashboard') }}#overview">
                            <span class="menu-icon"><i data-lucide="layout-dashboard"></i></span>
                            <span class="menu-text">Overview & Scheduling</span>
                        </a>
                    </li>
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('dashboard') }}#care">
                            <span class="menu-icon"><i data-lucide="clipboard-list"></i></span>
                            <span class="menu-text">Medical & Care Plan</span>
                        </a>
                    </li>
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('dashboard') }}#billing">
                            <span class="menu-icon"><i data-lucide="wallet"></i></span>
                            <span class="menu-text">Billing & Payments</span>
                        </a>
                    </li>
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('dashboard') }}#survey">
                            <span class="menu-icon"><i data-lucide="file-spreadsheet"></i></span>
                            <span class="menu-text">Lifestyle Risk Survey</span>
                        </a>
                    </li>
                    <li class="side-nav-item">
                        <a class="side-nav-link d-flex align-items-center justify-content-between" href="{{ route('notifications.index') }}">
                            <div class="d-flex align-items-center gap-2">
                                <span class="menu-icon"><i data-lucide="bell"></i></span>
                                <span class="menu-text">Portal Notifications</span>
                            </div>
                            @if($unreadCount > 0)
                                <span class="badge bg-danger rounded-pill px-1.5 fs-10 me-3">{{ $unreadCount }}</span>
                            @endif
                        </a>
                    </li>
                @else
                    <li class="side-nav-title mt-2">Main</li>
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('dashboard') }}">
                            <span class="menu-icon"><i data-lucide="layout-dashboard"></i></span>
                            <span class="menu-text">Main Dashboard</span>
                        </a>
                    </li>
                    @can('view-analytics')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('analytics.index') }}">
                            <span class="menu-icon"><i data-lucide="line-chart"></i></span>
                            <span class="menu-text">Analytics Dashboards</span>
                        </a>
                    </li>
                    @endcan

                    @canany(['manage-users', 'manage-roles', 'manage-settings', 'manage-locations', 'manage-providers'])
                    <li class="side-nav-title mt-2">Administration</li>

                    @can('manage-users')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('users.index') }}">
                            <span class="menu-icon"><i data-lucide="users"></i></span>
                            <span class="menu-text">Users</span>
                        </a>
                    </li>
                    @endcan

                    @can('manage-roles')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('roles.index') }}">
                            <span class="menu-icon"><i data-lucide="shield"></i></span>
                            <span class="menu-text">Roles & Permissions</span>
                        </a>
                    </li>
                    @endcan

                    @can('manage-providers')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('doctors.index') }}">
                            <span class="menu-icon"><i data-lucide="stethoscope"></i></span>
                            <span class="menu-text">Providers</span>
                        </a>
                    </li>
                    @endcan

                    @can('manage-settings')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('settings.index') }}">
                            <span class="menu-icon"><i data-lucide="bolt"></i></span>
                            <span class="menu-text">Settings</span>
                        </a>
                    </li>
                    @endcan

                    <!-- Locations Submenu -->
                    @can('manage-locations')
                    <li class="side-nav-item">
                        <a aria-controls="locations-menu-side" aria-expanded="false" class="side-nav-link" data-bs-toggle="collapse" href="#locations-menu-side">
                            <span class="menu-icon"><i data-lucide="map-pin"></i></span>
                            <span class="menu-text">Locations</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <div class="collapse" id="locations-menu-side">
                            <ul class="sub-menu">
                                <li class="side-nav-item">
                                    <a class="side-nav-link" href="{{ route('countries.index') }}">
                                        <span class="menu-text">Countries</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a class="side-nav-link" href="{{ route('provinces.index') }}">
                                        <span class="menu-text">Provinces</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a class="side-nav-link" href="{{ route('districts.index') }}">
                                        <span class="menu-text">Districts</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a class="side-nav-link" href="{{ route('constituencies.index') }}">
                                        <span class="menu-text">Constituencies</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a class="side-nav-link" href="{{ route('wards.index') }}">
                                        <span class="menu-text">Wards</span>
                                    </a>
                                </li>
                                <li class="side-nav-item">
                                    <a class="side-nav-link" href="{{ route('villages.index') }}">
                                        <span class="menu-text">Villages</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    @endcan
                    @endcanany

                    @canany(['manage-families', 'manage-patients', 'schedule-visits', 'record-consultations'])
                    <li class="side-nav-title mt-2">Healthcare</li>

                    @can('manage-families')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('families.index') }}">
                            <span class="menu-icon"><i data-lucide="home"></i></span>
                            <span class="menu-text">Families</span>
                        </a>
                    </li>
                    @endcan

                    @can('manage-patients')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('patients.index') }}">
                            <span class="menu-icon"><i data-lucide="heart-pulse"></i></span>
                            <span class="menu-text">Patients (EHR)</span>
                        </a>
                    </li>
                    @endcan

                    @can('schedule-visits')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('visits.index') }}">
                            <span class="menu-icon"><i data-lucide="calendar"></i></span>
                            <span class="menu-text">Home Visits</span>
                        </a>
                    </li>
                    @endcan

                    @can('record-consultations')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('consultations.index') }}">
                            <span class="menu-icon"><i data-lucide="clipboard-plus"></i></span>
                            <span class="menu-text">Consultations</span>
                        </a>
                    </li>
                    @endcan
                    @endcanany

                    @canany(['view-billing', 'manage-payments'])
                    <li class="side-nav-title mt-2">Finance & Billing</li>

                    @can('view-billing')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('subscriptions.index') }}">
                            <span class="menu-icon"><i data-lucide="credit-card"></i></span>
                            <span class="menu-text">Subscriptions</span>
                        </a>
                    </li>
                    @endcan

                    @can('manage-payments')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('payments.index') }}">
                            <span class="menu-icon"><i data-lucide="wallet"></i></span>
                            <span class="menu-text">Payments</span>
                        </a>
                    </li>
                    @endcan
                    @endcanany

                    @canany(['view-audit-logs', 'view-notifications'])
                    <li class="side-nav-title mt-2">System</li>

                    @can('view-audit-logs')
                    <li class="side-nav-item">
                        <a class="side-nav-link" href="{{ route('audit-logs.index') }}">
                            <span class="menu-icon"><i data-lucide="file-text"></i></span>
                            <span class="menu-text">Audit Logs</span>
                        </a>
                    </li>
                    @endcan

                    @can('view-notifications')
                    <li class="side-nav-item">
                        <a class="side-nav-link d-flex align-items-center justify-content-between" href="{{ route('notifications.index') }}">
                            <div class="d-flex align-items-center gap-2">
                                <span class="menu-icon"><i data-lucide="bell"></i></span>
                                <span class="menu-text">Notifications</span>
                            </div>
                            @if($unreadCount > 0)
                                <span class="badge bg-danger rounded-pill px-1.5 fs-10 me-3">{{ $unreadCount }}</span>
                            @endif
                        </a>
                    </li>
                    @endcan
                    @endcanany
                @endif
            </ul>
        </div>
    </div>
</div>