{% load i18n %}
{% load hospital_filters %}
{% load static %}

<style>
    .sidebar-icon-only {
        width: 5rem;
        transition: width 0.3s ease;
    }
    .sidebar-icon-only:hover {
        width: 16rem;
    }
    .sidebar-icon-only .sidebar-text {
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
        transition: opacity 0.2s ease;
        white-space: nowrap;
    }
    .sidebar-icon-only:hover .sidebar-text {
        opacity: 1;
        visibility: visible;
        width: auto;
    }
    .sidebar-icon-only .sidebar-logo-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
        transition: opacity 0.2s ease;
    }
    .sidebar-icon-only:hover .sidebar-logo-text {
        opacity: 1;
        width: auto;
    }
    .sidebar-icon-only .submenu {
        display: none;
    }
    .sidebar-icon-only:hover .submenu {
        display: block;
    }
    .nav-item-active {
        background-color: rgba(255,255,255,0.1);
        border-left: 3px solid #fff;
    }
    .nav-item-sublink-active {
        background-color: rgba(255,255,255,0.15);
    }
    .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .submenu.open {
        max-height: 500px;
    }
    .submenu a {
        padding-left: 3.5rem;
        font-size: 0.75rem;
    }
</style>

<aside id="sidebar" class="sidebar-icon-only bg-navy text-white flex flex-col shadow-2xl z-20 fixed left-0 top-0 h-screen overflow-y-auto overflow-x-hidden">
    <!-- Brand -->
    <div class="p-4 flex flex-col items-center border-b border-white/10">
        <div class="sidebar-logo-text rounded-lg overflow-hidden mb-3" style="width: 200px; height: 100px;">
            <img src="{% static 'img/logo.png' %}" alt="Al Hammadi Hospital" class="w-full h-full object-contain">
        </div>
        {% comment %} <div class="sidebar-logo-text overflow-hidden text-center">
            <h1 class="text-lg font-black tracking-tighter whitespace-nowrap">PX360</h1>
            <p class="text-[8px] font-bold text-blue-200 tracking-widest uppercase whitespace-nowrap">Analytics Platform</p>
        </div> {% endcomment %}
    </div>
    
    <!-- Navigation -->
    <nav class="flex-1 px-2 py-4 space-y-1">
        <!-- Dashboard -->
        <a href="{% url 'analytics:command_center' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if request.resolver_match.url_name == 'command_center' %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="layout-dashboard" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Dashboard" %}</span>
        </a>
        
        <!-- Admin Evaluation (Admin only) -->
        {% if user.is_px_admin or user.is_hospital_admin %}
        <a href="{% url 'dashboard:admin_evaluation' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'admin-evaluation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="shield-check" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Admin Evaluation" %}</span>
        </a>
        {% endif %}
        
        <!-- Complaints -->
        <a href="{% url 'complaints:complaint_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'complaints' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="file-text" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Complaints" %}</span>
            {% if complaint_count|default:0 > 0 %}
            <span class="sidebar-text ml-auto bg-white/20 text-white text-xs px-1.5 py-0.5 rounded-full min-w-[1.25rem] text-center">{{ complaint_count }}</span>
            {% endif %}
        </a>
        
        <!-- Feedback -->
        {% comment %} <a href="{% url 'feedback:feedback_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'feedback' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="message-square-heart" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Feedback" %}</span>
        </a>
        
        <!-- Appreciation -->
        <a href="{% url 'appreciation:appreciation_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'appreciation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="heart" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Appreciation" %}</span>
        </a> {% endcomment %}
        
        <!-- Surveys (with submenu) -->
        {% url 'surveys:instance_list' as survey_instances_url %}
        {% url 'surveys:template_list' as survey_templates_url %}
        {% url 'surveys:template_create' as survey_create_url %}
        {% url 'surveys:manual_send' as survey_send_url %}
        {% url 'surveys:analytics_reports' as survey_reports_url %}
        {% url 'integrations:survey-mapping-settings' as survey_mapping_url %}
        <div class="survey-nav-container">
            <button onclick="toggleSurveyMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'surveys' in request.path or 'survey-mapping' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="clipboard-list" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Surveys" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'surveys' in request.path or 'survey-mapping' in request.path %}rotate-180{% endif %}" id="survey-chevron"></i>
            </button>
            <div class="submenu {% if 'surveys' in request.path or 'survey-mapping' in request.path %}open{% endif %} space-y-1 mt-1" id="survey-submenu">
                <a href="{{ survey_instances_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'surveys' in request.path and 'templates' not in request.path and 'send' not in request.path and 'reports' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Survey List" %}</span>
                </a>
                <a href="{{ survey_templates_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'templates' in request.path and 'create' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="files" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Templates" %}</span>
                </a>
                <a href="{{ survey_create_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'templates/create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="plus-circle" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Create Survey" %}</span>
                </a>
                <a href="{{ survey_send_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if '/send' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="send" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Manual Send" %}</span>
                </a>
                <a href="{% url 'surveys:his_patient_import' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'his-import' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "HIS Import" %}</span>
                </a>
                {% comment %} <a href="{% url 'surveys:bulk_job_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'bulk-jobs' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layers" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Bulk Jobs" %}</span>
                </a> {% endcomment %}
                {% comment %} <a href="{{ survey_reports_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if '/reports' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="bar-chart-2" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Reports" %}</span>
                </a> {% endcomment %}
                <a href="{{ survey_mapping_url }}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'survey-mapping' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="link" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Mapping" %}</span>
                </a>
            </div>
        </div>
        
        <!-- Staff (with submenu) -->
        <div class="staff-nav-container">
            <button onclick="toggleStaffMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'staff' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="users" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Staff" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'staff' in request.path %}rotate-180{% endif %}" id="staff-chevron"></i>
            </button>
            <div class="submenu {% if 'staff' in request.path %}open{% endif %} space-y-1 mt-1" id="staff-submenu">
                <a href="{% url 'organizations:staff_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'staff_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "All Staff" %}</span>
                </a>
                <a href="{% url 'organizations:staff_hierarchy_d3' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'hierarchy' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="git-branch" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Hierarchy" %}</span>
                </a>
                {% comment %} <a href="{% url 'organizations:section_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'section' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layers" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Sections" %}</span>
                </a> {% endcomment %}
                {% comment %} <a href="{% url 'organizations:subsection_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'subsection' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-grid" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Subsections" %}</span>
                </a> {% endcomment %}
            </div>
        </div>
        
        <!-- Patients -->
        {% comment %} <a href="{% url 'organizations:patient_list' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'patients' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="heart-pulse" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Patients" %}</span>
        </a> {% endcomment %}
        
        <!-- Physicians (with submenu) -->
        <div class="physicians-nav-container">
            <button onclick="togglePhysiciansMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'physicians' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="stethoscope" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Physicians" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'physicians' in request.path %}rotate-180{% endif %}" id="physicians-chevron"></i>
            </button>
            <div class="submenu {% if 'physicians' in request.path %}open{% endif %} space-y-1 mt-1" id="physicians-submenu">
                <a href="{% url 'physicians:physician_ratings_dashboard' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'physician_ratings_dashboard' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
                </a>
                <a href="{% url 'physicians:physician_list' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'physician_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="users" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "All Physicians" %}</span>
                </a>
                <a href="{% url 'physicians:leaderboard' %}"
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'leaderboard' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="trophy" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Leaderboard" %}</span>
                </a>
                {% if user.is_px_admin or user.is_hospital_admin %}
                <a href="{% url 'physicians:doctor_rating_import' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'import' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Import Ratings" %}</span>
                </a>
                <a href="{% url 'physicians:individual_ratings_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'individual' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="star" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Individual Ratings" %}</span>
                </a>
                {% endif %}
            </div>
        </div>
        
        <!-- Analytics (with submenu) -->
        <div class="analytics-nav-container">
            <button onclick="toggleAnalyticsMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="bar-chart-3" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Analytics" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}rotate-180{% endif %}" id="analytics-chevron"></i>
            </button>
            <div class="submenu {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}open{% endif %} space-y-1 mt-1" id="analytics-submenu">
                <a href="{% url 'analytics:dashboard' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'analytics' in request.path and 'kpi' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
                </a>
                <a href="{% url 'analytics:kpi_report_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'kpi-reports' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="file-bar-chart" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "KPI Reports" %}</span>
                </a>
            </div>
        </div>
        
        <!-- PX Sources (with submenu) -->
        <div class="px-sources-nav-container">
            <button onclick="togglePXSourcesMenu(event)" 
               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'px-sources' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                <i data-lucide="radio" class="w-5 h-5 flex-shrink-0"></i>
                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "PX Sources" %}</span>
                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'px-sources' in request.path %}rotate-180{% endif %}" id="px-sources-chevron"></i>
            </button>
            <div class="submenu {% if 'px-sources' in request.path %}open{% endif %} space-y-1 mt-1" id="px-sources-submenu">
                <a href="{% url 'px_sources:source_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'source_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "All Sources" %}</span>
                </a>
                <a href="{% url 'px_sources:source_user_dashboard' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'dashboard' in request.path and 'px-sources' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
                </a>
                <a href="{% url 'px_sources:source_user_complaint_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'complaints' in request.path and 'px-sources' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="file-text" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Source Complaints" %}</span>
                </a>
                <a href="{% url 'px_sources:source_user_inquiry_list' %}" 
                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'inquiries' in request.path and 'px-sources' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
                    <i data-lucide="help-circle" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text whitespace-nowrap">{% trans "Source Inquiries" %}</span>
                </a>
            </div>
        </div>

        <!-- Send SMS (Admin only) -->
        {% if user.is_px_admin or user.is_hospital_admin %}
        <a href="{% url 'notifications:send_sms_direct' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'send-sms' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="message-square" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Send SMS" %}</span>
        </a>
        {% endif %}
        
        <!-- Settings (Admin only) -->
        {% if user.is_px_admin or user.is_hospital_admin %}
        <a href="{% url 'config:dashboard' %}" 
           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'config' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
            <i data-lucide="settings" class="w-5 h-5 flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Settings" %}</span>
        </a>
        {% endif %}
    </nav>

    <!-- User Profile & Logout -->
    <div class="p-3 border-t border-white/10">
        <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="toggleUserMenu()">
            <div class="w-8 h-8 rounded-full bg-blue border-2 border-white/20 flex items-center justify-center font-bold text-xs flex-shrink-0">
                {{ user.first_name|first|default:"U" }}{{ user.last_name|first|default:"" }}
            </div>
            <div class="sidebar-text flex-1 overflow-hidden min-w-0">
                <p class="text-xs font-bold truncate">{{ user.get_full_name|default:user.username }}</p>
                <p class="text-[10px] text-white/50 truncate">{{ user.get_role_display|default:"User" }}</p>
            </div>
            <i data-lucide="log-out" class="w-4 h-4 text-white/40 hover:text-white cursor-pointer flex-shrink-0 sidebar-text" onclick="event.stopPropagation(); logout()"></i>
        </div>
        
        <!-- User Dropdown Menu (hidden by default) -->
        <div id="userMenu" class="hidden mt-2 space-y-1">
            <a href="{% url 'accounts:settings' %}" class="flex items-center gap-3 p-2 rounded-lg opacity-70 hover:opacity-100 hover:bg-white/10 transition">
                <i data-lucide="user" class="w-4 h-4 flex-shrink-0"></i>
                <span class="sidebar-text text-xs font-semibold whitespace-nowrap">{% trans "Profile" %}</span>
            </a>
            <form method="post" action="{% url 'accounts:logout' %}" class="m-0">
                {% csrf_token %}
                <button type="submit" class="w-full flex items-center gap-3 p-2 rounded-lg opacity-70 hover:opacity-100 hover:bg-white/10 transition text-left">
                    <i data-lucide="log-out" class="w-4 h-4 flex-shrink-0"></i>
                    <span class="sidebar-text text-xs font-semibold whitespace-nowrap">{% trans "Logout" %}</span>
                </button>
            </form>
        </div>
    </div>
</aside>

<script>
function toggleUserMenu() {
    const menu = document.getElementById('userMenu');
    menu.classList.toggle('hidden');
}

function toggleSurveyMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('survey-submenu');
    const chevron = document.getElementById('survey-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleAnalyticsMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('analytics-submenu');
    const chevron = document.getElementById('analytics-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function togglePhysiciansMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('physicians-submenu');
    const chevron = document.getElementById('physicians-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function toggleStaffMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('staff-submenu');
    const chevron = document.getElementById('staff-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function togglePXSourcesMenu(event) {
    event.preventDefault();
    const submenu = document.getElementById('px-sources-submenu');
    const chevron = document.getElementById('px-sources-chevron');
    submenu.classList.toggle('open');
    chevron.classList.toggle('rotate-180');
}

function logout() {
    if (confirm('{% trans "Are you sure you want to logout?" %}')) {
        document.querySelector('form[action="{% url 'accounts:logout' %}"]').submit();
    }
}

// Close user menu when clicking outside
document.addEventListener('click', function(e) {
    const userMenu = document.getElementById('userMenu');
    const userProfile = e.target.closest('.cursor-pointer');
    if (userMenu && !userMenu.contains(e.target) && !userProfile) {
        userMenu.classList.add('hidden');
    }
});
</script>