{% extends 'familytouch/base.html' %}

{% block title %}All Users - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .all-users-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Sticky header for scroll navigation */
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .page-header h1 {
        margin: 0 0 0.5rem 0;
        font-size: 2.5rem;
        font-weight: 700;
    }
    
    .page-header p {
        margin: 0;
        opacity: 0.9;
        font-size: 1.1rem;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        text-align: center;
        border-top: 4px solid;
    }
    
    .stat-card.patients { border-top-color: #4caf50; }
    .stat-card.doctors { border-top-color: #2196f3; }
    .stat-card.family { border-top-color: #ff9800; }
    .stat-card.total { border-top-color: #9c27b0; }
    .stat-card.appointments { border-top-color: #f44336; }
    .stat-card.connections { border-top-color: #00bcd4; }
    .stat-card.invitations { border-top-color: #e91e63; }
    .stat-card.messages { border-top-color: #673ab7; }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .stat-card.patients .stat-number { color: #4caf50; }
    .stat-card.doctors .stat-number { color: #2196f3; }
    .stat-card.family .stat-number { color: #ff9800; }
    .stat-card.total .stat-number { color: #9c27b0; }
    .stat-card.appointments .stat-number { color: #f44336; }
    .stat-card.connections .stat-number { color: #00bcd4; }
    .stat-card.invitations .stat-number { color: #e91e63; }
    .stat-card.messages .stat-number { color: #673ab7; }
    
    .stat-label {
        color: #666;
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    .detail-section {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e0e0e0;
    }
    
    .detail-section-title {
        font-weight: 600;
        color: #666;
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .detail-item {
        padding: 0.75rem;
        background: #f9f9f9;
        border-radius: 6px;
        border-left: 3px solid #667eea;
    }
    
    .detail-item-label {
        font-size: 0.8rem;
        color: #999;
        margin-bottom: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .detail-item-value {
        font-size: 1rem;
        color: #333;
        font-weight: 600;
    }
    
    .appointment-mini-list {
        background: #f5f5f5;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
    }
    
    .appointment-mini-item {
        padding: 0.5rem;
        background: white;
        border-radius: 4px;
        margin-bottom: 0.5rem;
        border-left: 3px solid #667eea;
        font-size: 0.9rem;
    }
    
    .appointment-mini-item:last-child {
        margin-bottom: 0;
    }
    
    .expand-btn {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .expand-btn:hover {
        background: #5568d3;
        transform: translateY(-1px);
    }
    
    .expandable-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .expandable-content.expanded {
        max-height: 2000px;
    }
    
    .tabs {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        border-bottom: 2px solid #e0e0e0;
        position: sticky;
        top: 120px;
        background: white;
        z-index: 99;
        padding: 1rem 0 0 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .tab-btn {
        padding: 1rem 2rem;
        background: none;
        border: none;
        font-size: 1.1rem;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        position: relative;
        bottom: -2px;
    }
    
    .tab-btn.active {
        color: #667eea;
        border-bottom-color: #667eea;
    }
    
    .tab-btn:hover {
        color: #667eea;
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    .user-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        position: relative;
    }
    
    .user-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }
    
    .user-card.patient { border-left: 4px solid #4caf50; }
    .user-card.doctor { border-left: 4px solid #2196f3; }
    .user-card.family { border-left: 4px solid #ff9800; }
    
    /* User card numbering */
    .user-number {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
    }
    
    /* Scroll to top button */
    .scroll-top-btn {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        transition: all 0.3s;
        opacity: 0;
        visibility: hidden;
        z-index: 1000;
    }
    
    .scroll-top-btn.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .scroll-top-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }
    
    /* Custom scrollbar */
    .tab-content::-webkit-scrollbar {
        width: 8px;
    }
    
    .tab-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .tab-content::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }
    
    .tab-content::-webkit-scrollbar-thumb:hover {
        background: #5568d3;
    }
    
    /* View All Members Button & Modal */
    .view-all-btn {
        position: fixed;
        bottom: 6rem;
        right: 2rem;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 25px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        transition: all 0.3s;
        z-index: 999;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.95rem;
    }
    
    .view-all-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }
    
    .members-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 1002;
        align-items: center;
        justify-content: center;
    }
    
    .members-modal.active {
        display: flex;
    }
    
    .members-modal-content {
        background: white;
        border-radius: 16px;
        max-width: 900px;
        width: 90%;
        max-height: 80vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        animation: modalSlideIn 0.3s ease;
    }
    
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .members-modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .members-modal-header h2 {
        margin: 0;
        font-size: 1.5rem;
    }
    
    .members-modal-close {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }
    
    .members-modal-close:hover {
        background: rgba(255,255,255,0.3);
        transform: rotate(90deg);
    }
    
    .members-search {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .members-search input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s;
    }
    
    .members-search input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .members-tabs {
        display: flex;
        padding: 0 1.5rem;
        background: #f9f9f9;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .members-tab-btn {
        padding: 1rem 1.5rem;
        background: none;
        border: none;
        font-weight: 600;
        cursor: pointer;
        color: #666;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
    }
    
    .members-tab-btn.active {
        color: #667eea;
        border-bottom-color: #667eea;
    }
    
    .members-list {
        flex: 1;
        overflow-y: auto;
        padding: 1rem 1.5rem;
    }
    
    .members-list::-webkit-scrollbar {
        width: 8px;
    }
    
    .members-list::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .members-list::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }
    
    .member-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        margin-bottom: 0.5rem;
        background: #f9f9f9;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .member-item:hover {
        background: #667eea;
        color: white;
        transform: translateX(5px);
    }
    
    .member-item-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .member-item-avatar {
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }
    
    .member-item:hover .member-item-avatar {
        background: rgba(255,255,255,0.2);
    }
    
    .member-item-details h4 {
        margin: 0 0 0.25rem 0;
        font-size: 1rem;
    }
    
    .member-item-details p {
        margin: 0;
        font-size: 0.85rem;
        opacity: 0.8;
    }
    
    .member-item-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    .member-item-badge.patient {
        background: #e8f5e9;
        color: #2e7d32;
    }
    
    .member-item-badge.doctor {
        background: #e3f2fd;
        color: #1565c0;
    }
    
    .member-item-badge.family {
        background: #fff3e0;
        color: #e65100;
    }
    
    .member-item:hover .member-item-badge {
        background: rgba(255,255,255,0.3);
        color: white;
    }
    
    .no-results {
        text-align: center;
        padding: 3rem 1rem;
        color: #999;
    }
    
    .user-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }
    
    .user-avatar.patient { background: #e8f5e9; }
    .user-avatar.doctor { background: #e3f2fd; }
    .user-avatar.family { background: #fff3e0; }
    
    .user-details h3 {
        margin: 0 0 0.25rem 0;
        font-size: 1.3rem;
        color: #333;
    }
    
    .user-details p {
        margin: 0;
        color: #666;
        font-size: 0.95rem;
    }
    
    .user-badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .user-badge.patient {
        background: #e8f5e9;
        color: #2e7d32;
    }
    
    .user-badge.doctor {
        background: #e3f2fd;
        color: #1565c0;
    }
    
    .user-badge.family {
        background: #fff3e0;
        color: #e65100;
    }
    
    .user-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .stat-item {
        padding: 0.75rem;
        background: #f5f5f5;
        border-radius: 8px;
        text-align: center;
    }
    
    .stat-item-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #667eea;
        margin-bottom: 0.25rem;
    }
    
    .stat-item-label {
        font-size: 0.85rem;
        color: #666;
        font-weight: 600;
    }
    
    .connections-list {
        margin-top: 1rem;
    }
    
    .connections-title {
        font-weight: 600;
        color: #666;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }
    
    .connection-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .connection-tag {
        padding: 0.75rem 1rem;
        background: #f5f5f5;
        border-radius: 8px;
        font-size: 0.9rem;
        color: #333;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .connection-tag.doctor { border-left: 4px solid #2196f3; }
    .connection-tag.family { border-left: 4px solid #ff9800; }
    .connection-tag.patient { border-left: 4px solid #4caf50; }
    
    .empty-state {
        text-align: center;
        padding: 3rem 2rem;
        color: #999;
    }
    
    .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    /* Progress indicator */
    .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        z-index: 1001;
        transition: width 0.1s ease;
    }
    
    @media (max-width: 768px) {
        .all-users-container {
            padding: 1rem;
        }
        
        .page-header {
            position: relative;
            top: auto;
        }
        
        .page-header h1 {
            font-size: 1.8rem;
        }
        
        .user-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .tabs {
            overflow-x: auto;
            position: relative;
            top: auto;
        }
        
        .tab-btn {
            padding: 0.75rem 1.25rem;
            font-size: 1rem;
        }
        
        .scroll-top-btn {
            width: 45px;
            height: 45px;
            bottom: 1.5rem;
            right: 1.5rem;
        }
        
        .user-number {
            width: 35px;
            height: 35px;
            font-size: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Scroll Progress Bar -->
<div class="scroll-progress" id="scrollProgress"></div>

<div class="all-users-container">
    <div class="page-header">
        <h1>👥 All Users</h1>
        <p>Comprehensive view of all patients, doctors, and family members</p>
    </div>
    
    <!-- Statistics Overview -->
    <div class="stats-grid">
        <div class="stat-card patients">
            <div class="stat-number">{{ total_patients }}</div>
            <div class="stat-label">Patients</div>
        </div>
        <div class="stat-card doctors">
            <div class="stat-number">{{ total_doctors }}</div>
            <div class="stat-label">Doctors</div>
        </div>
        <div class="stat-card family">
            <div class="stat-number">{{ total_family }}</div>
            <div class="stat-label">Family Members</div>
        </div>
        <div class="stat-card total">
            <div class="stat-number">{{ total_users }}</div>
            <div class="stat-label">Total Users</div>
        </div>
        <div class="stat-card appointments">
            <div class="stat-number">{{ total_appointments }}</div>
            <div class="stat-label">Appointments</div>
        </div>
        <div class="stat-card connections">
            <div class="stat-number">{{ total_connections }}</div>
            <div class="stat-label">Connections</div>
        </div>
        <div class="stat-card invitations">
            <div class="stat-number">{{ total_pending_invitations }}</div>
            <div class="stat-label">Pending Invitations</div>
        </div>
        <div class="stat-card messages">
            <div class="stat-number">{{ total_messages }}</div>
            <div class="stat-label">Messages</div>
        </div>
    </div>
    
    <!-- Tabs -->
    <div class="tabs">
        <button class="tab-btn active" onclick="switchTab(event, 'patients')">
            🧑‍⚕️ Patients ({{ total_patients }})
        </button>
        <button class="tab-btn" onclick="switchTab(event, 'doctors')">
            👨‍⚕️ Doctors ({{ total_doctors }})
        </button>
        <button class="tab-btn" onclick="switchTab(event, 'family')">
            👪 Family ({{ total_family }})
        </button>
    </div>
    
    <!-- Patients Tab -->
    <div id="patients" class="tab-content active">
        {% if patients %}
            {% for patient in patients %}
            <div class="user-card patient" id="patient-{{ forloop.counter }}">
                <div class="user-number">{{ forloop.counter }}</div>
                <div class="user-header">
                    <div class="user-info">
                        <div class="user-avatar patient">🧑‍⚕️</div>
                        <div class="user-details">
                            <h3>{{ patient.user.get_full_name|default:patient.user.username }}</h3>
                            <p>@{{ patient.user.username }} • {{ patient.user.email|default:"No email" }}</p>
                            <p style="font-size: 0.85rem; color: #999;">Joined: {{ patient.user.date_joined|date:"M d, Y" }}</p>
                        </div>
                    </div>
                    <div class="user-badge patient">Patient</div>
                </div>
                
                <div class="user-stats">
                    <div class="stat-item">
                        <div class="stat-item-number">{{ patient.total_appointments }}</div>
                        <div class="stat-item-label">Total Appointments</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ patient.upcoming_appointments }}</div>
                        <div class="stat-item-label">Upcoming</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ patient.completed_appointments }}</div>
                        <div class="stat-item-label">Completed</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ patient.cancelled_appointments }}</div>
                        <div class="stat-item-label">Cancelled</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ patient.doctor_count }}</div>
                        <div class="stat-item-label">Doctors</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ patient.family_count }}</div>
                        <div class="stat-item-label">Family Members</div>
                    </div>
                </div>
                
                <!-- Additional Details Grid -->
                <div class="detail-section">
                    <div class="detail-section-title">📊 Health Tracking & Activity</div>
                    <div class="detail-grid">
                        <div class="detail-item">
                            <div class="detail-item-label">Vitals Recorded</div>
                            <div class="detail-item-value">{{ patient.vitals_count }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Meal Choices</div>
                            <div class="detail-item-value">{{ patient.meals_count }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Patient Updates</div>
                            <div class="detail-item-value">{{ patient.updates_count }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Invitations Sent</div>
                            <div class="detail-item-value">{{ patient.pending_invitations_sent }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Invitations Received</div>
                            <div class="detail-item-value">{{ patient.pending_invitations_received }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Profile Type</div>
                            <div class="detail-item-value">{{ patient.profile.user_type|title }}</div>
                        </div>
                    </div>
                </div>
                
                {% if patient.appointment_list %}
                <div class="detail-section">
                    <div class="detail-section-title">📅 Upcoming Appointments</div>
                    <div class="appointment-mini-list">
                        {% for appt in patient.appointment_list %}
                        <div class="appointment-mini-item">
                            <strong>{{ appt.start|date:"M d, Y @ g:i A" }}</strong> with Dr. {{ appt.provider.get_full_name|default:appt.provider.username }}
                            <br><span style="color: #666; font-size: 0.85rem;">{{ appt.reason|default:"General consultation" }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                
                {% if patient.doctors %}
                <div class="connections-list">
                    <div class="connections-title">👨‍⚕️ Connected Doctors ({{ patient.doctor_count }}):</div>
                    <div class="connection-tags">
                        {% for doctor in patient.doctors %}
                        <div class="connection-tag doctor">
                            <span>{{ doctor.name }}</span>
                            <div style="font-size: 0.85rem; color: #999;">
                                @{{ doctor.username }} • {{ doctor.email|default:"No email" }}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                
                {% if patient.family_members %}
                <div class="connections-list">
                    <div class="connections-title">👪 Connected Family ({{ patient.family_count }}):</div>
                    <div class="connection-tags">
                        {% for family in patient.family_members %}
                        <div class="connection-tag family">
                            <span>{{ family.name }}</span>
                            <div style="font-size: 0.85rem; color: #999;">
                                @{{ family.username }} • {{ family.email|default:"No email" }}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <div class="empty-icon">🧑‍⚕️</div>
                <p>No patients found</p>
            </div>
        {% endif %}
    </div>
    
    <!-- Doctors Tab -->
    <div id="doctors" class="tab-content">
        {% if doctors %}
            {% for doctor in doctors %}
            <div class="user-card doctor" id="doctor-{{ forloop.counter }}">
                <div class="user-number">{{ forloop.counter }}</div>
                <div class="user-header">
                    <div class="user-info">
                        <div class="user-avatar doctor">👨‍⚕️</div>
                        <div class="user-details">
                            <h3>{{ doctor.user.get_full_name|default:doctor.user.username }}</h3>
                            <p>@{{ doctor.user.username }} • {{ doctor.user.email|default:"No email" }}</p>
                            <p style="font-size: 0.85rem; color: #999;">Joined: {{ doctor.user.date_joined|date:"M d, Y" }}</p>
                        </div>
                    </div>
                    <div class="user-badge doctor">Doctor</div>
                </div>
                
                <div class="user-stats">
                    <div class="stat-item">
                        <div class="stat-item-number">{{ doctor.total_appointments }}</div>
                        <div class="stat-item-label">Total Appointments</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ doctor.upcoming_appointments }}</div>
                        <div class="stat-item-label">Upcoming</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ doctor.completed_appointments }}</div>
                        <div class="stat-item-label">Completed</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ doctor.requested_appointments }}</div>
                        <div class="stat-item-label">Requested</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ doctor.cancelled_appointments }}</div>
                        <div class="stat-item-label">Cancelled</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ doctor.patient_count }}</div>
                        <div class="stat-item-label">Patients</div>
                    </div>
                </div>
                
                <!-- Additional Details Grid -->
                <div class="detail-section">
                    <div class="detail-section-title">📊 Doctor Activity</div>
                    <div class="detail-grid">
                        <div class="detail-item">
                            <div class="detail-item-label">Invitations Sent</div>
                            <div class="detail-item-value">{{ doctor.pending_invitations_sent }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Invitations Received</div>
                            <div class="detail-item-value">{{ doctor.pending_invitations_received }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Profile Type</div>
                            <div class="detail-item-value">{{ doctor.profile.user_type|title }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Past Appointments</div>
                            <div class="detail-item-value">{{ doctor.past_appointments }}</div>
                        </div>
                    </div>
                </div>
                
                {% if doctor.appointment_list %}
                <div class="detail-section">
                    <div class="detail-section-title">📅 Upcoming Appointments</div>
                    <div class="appointment-mini-list">
                        {% for appt in doctor.appointment_list %}
                        <div class="appointment-mini-item">
                            <strong>{{ appt.start|date:"M d, Y @ g:i A" }}</strong> with {{ appt.patient.get_full_name|default:appt.patient.username }}
                            <br><span style="color: #666; font-size: 0.85rem;">{{ appt.reason|default:"General consultation" }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                
                {% if doctor.patients %}
                <div class="connections-list">
                    <div class="connections-title">🧑‍⚕️ Connected Patients ({{ doctor.patient_count }}):</div>
                    <div class="connection-tags">
                        {% for patient in doctor.patients %}
                        <div class="connection-tag patient">
                            <span>{{ patient.name }}</span>
                            <div style="font-size: 0.85rem; color: #999;">
                                @{{ patient.username }} • {{ patient.email|default:"No email" }}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <div class="empty-icon">👨‍⚕️</div>
                <p>No doctors found</p>
            </div>
        {% endif %}
    </div>
    
    <!-- Family Tab -->
    <div id="family" class="tab-content">
        {% if family_members %}
            {% for family in family_members %}
            <div class="user-card family" id="family-{{ forloop.counter }}">
                <div class="user-number">{{ forloop.counter }}</div>
                <div class="user-header">
                    <div class="user-info">
                        <div class="user-avatar family">👪</div>
                        <div class="user-details">
                            <h3>{{ family.user.get_full_name|default:family.user.username }}</h3>
                            <p>@{{ family.user.username }} • {{ family.user.email|default:"No email" }}</p>
                            <p style="font-size: 0.85rem; color: #999;">Joined: {{ family.user.date_joined|date:"M d, Y" }}</p>
                        </div>
                    </div>
                    <div class="user-badge family">Family Member</div>
                </div>
                
                <div class="user-stats">
                    <div class="stat-item">
                        <div class="stat-item-number">{{ family.patient_count }}</div>
                        <div class="stat-item-label">Connected Patients</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ family.sent_messages }}</div>
                        <div class="stat-item-label">Messages Sent</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ family.received_messages }}</div>
                        <div class="stat-item-label">Messages Received</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-item-number">{{ family.unread_messages }}</div>
                        <div class="stat-item-label">Unread Messages</div>
                    </div>
                </div>
                
                <!-- Additional Details Grid -->
                <div class="detail-section">
                    <div class="detail-section-title">📊 Family Activity</div>
                    <div class="detail-grid">
                        <div class="detail-item">
                            <div class="detail-item-label">Invitations Sent</div>
                            <div class="detail-item-value">{{ family.pending_invitations_sent }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Invitations Received</div>
                            <div class="detail-item-value">{{ family.pending_invitations_received }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Profile Type</div>
                            <div class="detail-item-value">{{ family.profile.user_type|title }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">Total Messages</div>
                            <div class="detail-item-value">{{ family.sent_messages|add:family.received_messages }}</div>
                        </div>
                    </div>
                </div>
                
                {% if family.patients %}
                <div class="connections-list">
                    <div class="connections-title">🧑‍⚕️ Connected Patients ({{ family.patient_count }}):</div>
                    <div class="connection-tags">
                        {% for patient in family.patients %}
                        <div class="connection-tag patient">
                            <span>{{ patient.name }}</span>
                            <div style="font-size: 0.85rem; color: #999;">
                                @{{ patient.username }} • {{ patient.email|default:"No email" }}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <div class="empty-icon">👪</div>
                <p>No family members found</p>
            </div>
        {% endif %}
    </div>
</div>

<!-- Scroll to Top Button -->
<button class="scroll-top-btn" id="scrollTopBtn" onclick="scrollToTop()">↑</button>

<!-- View All Members Button -->
<button class="view-all-btn" id="viewAllBtn">
    <span>📋</span>
    <span>View All Members</span>
</button>

<!-- Members Modal -->
<div class="members-modal" id="membersModal">
    <div class="members-modal-content">
        <div class="members-modal-header">
            <h2>👥 All Members</h2>
            <button class="members-modal-close" id="closeModalBtn">×</button>
        </div>
        
        <div class="members-search">
            <input type="text" id="memberSearch" placeholder="🔍 Search by name or username...">
        </div>
        
        <div class="members-tabs">
            <button class="members-tab-btn active" onclick="filterMembers('all')">All ({{ total_users }})</button>
            <button class="members-tab-btn" onclick="filterMembers('patient')">Patients ({{ patients|length }})</button>
            <button class="members-tab-btn" onclick="filterMembers('doctor')">Doctors ({{ doctors|length }})</button>
            <button class="members-tab-btn" onclick="filterMembers('family')">Family ({{ family_members|length }})</button>
        </div>
        
        <div class="members-list" id="membersList">
            {% for patient in patients %}
            <div class="member-item" data-type="patient" data-name="{{ patient.user.get_full_name|default:patient.user.username }}" data-username="{{ patient.user.username }}" onclick="scrollToUser('patient-{{ forloop.counter }}')">
                <div class="member-item-info">
                    <div class="member-item-avatar">🧑‍⚕️</div>
                    <div class="member-item-details">
                        <h4>{{ patient.user.get_full_name|default:patient.user.username }}</h4>
                        <p>@{{ patient.user.username }}</p>
                    </div>
                </div>
                <span class="member-item-badge patient">Patient</span>
            </div>
            {% endfor %}
            
            {% for doctor in doctors %}
            <div class="member-item" data-type="doctor" data-name="{{ doctor.user.get_full_name|default:doctor.user.username }}" data-username="{{ doctor.user.username }}" onclick="scrollToUser('doctor-{{ forloop.counter }}')">
                <div class="member-item-info">
                    <div class="member-item-avatar">👨‍⚕️</div>
                    <div class="member-item-details">
                        <h4>{{ doctor.user.get_full_name|default:doctor.user.username }}</h4>
                        <p>@{{ doctor.user.username }}</p>
                    </div>
                </div>
                <span class="member-item-badge doctor">Doctor</span>
            </div>
            {% endfor %}
            
            {% for family in family_members %}
            <div class="member-item" data-type="family" data-name="{{ family.user.get_full_name|default:family.user.username }}" data-username="{{ family.user.username }}" onclick="scrollToUser('family-{{ forloop.counter }}')">
                <div class="member-item-info">
                    <div class="member-item-avatar">👨‍👩‍👧‍👦</div>
                    <div class="member-item-details">
                        <h4>{{ family.user.get_full_name|default:family.user.username }}</h4>
                        <p>@{{ family.user.username }}</p>
                    </div>
                </div>
                <span class="member-item-badge family">Family</span>
            </div>
            {% endfor %}
            
            <div class="no-results" id="noResults" style="display: none;">
                <p>🔍 No members found</p>
            </div>
        </div>
    </div>
</div>

<script>
    function switchTab(event, tabName) {
        // Hide all tabs
        const tabs = document.querySelectorAll('.tab-content');
        tabs.forEach(tab => tab.classList.remove('active'));
        
        // Remove active from all buttons
        const buttons = document.querySelectorAll('.tab-btn');
        buttons.forEach(btn => btn.classList.remove('active'));
        
        // Show selected tab
        document.getElementById(tabName).classList.add('active');
        
        // Mark button as active
        event.target.classList.add('active');
        
        // Scroll to top of content when switching tabs
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    
    // Scroll to top function
    function scrollToTop() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }
    
    // Show/hide scroll to top button & update progress bar
    window.addEventListener('scroll', function() {
        const scrollTopBtn = document.getElementById('scrollTopBtn');
        const scrollProgress = document.getElementById('scrollProgress');
        
        // Show/hide button
        if (window.pageYOffset > 300) {
            scrollTopBtn.classList.add('visible');
        } else {
            scrollTopBtn.classList.remove('visible');
        }
        
        // Update progress bar
        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = (winScroll / height) * 100;
        scrollProgress.style.width = scrolled + '%';
    });
    
    // Smooth scroll for all anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Track active section while scrolling (optional enhancement)
    let ticking = false;
    window.addEventListener('scroll', function() {
        if (!ticking) {
            window.requestAnimationFrame(function() {
                // Update UI based on scroll position
                ticking = false;
            });
            ticking = true;
        }
    });
    
    // View All Members Modal
    const viewAllBtn = document.getElementById('viewAllBtn');
    const membersModal = document.getElementById('membersModal');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const memberSearch = document.getElementById('memberSearch');
    const membersList = document.getElementById('membersList');
    const noResults = document.getElementById('noResults');
    
    // Open modal
    viewAllBtn.addEventListener('click', function() {
        membersModal.classList.add('active');
        memberSearch.value = '';
        filterMembers('all');
        memberSearch.focus();
    });
    
    // Close modal
    closeModalBtn.addEventListener('click', function() {
        membersModal.classList.remove('active');
    });
    
    // Close on background click
    membersModal.addEventListener('click', function(e) {
        if (e.target === membersModal) {
            membersModal.classList.remove('active');
        }
    });
    
    // Close on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && membersModal.classList.contains('active')) {
            membersModal.classList.remove('active');
        }
    });
    
    // Search functionality
    memberSearch.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const items = membersList.querySelectorAll('.member-item');
        let visibleCount = 0;
        
        items.forEach(item => {
            const name = item.getAttribute('data-name').toLowerCase();
            const username = item.getAttribute('data-username').toLowerCase();
            
            if (name.includes(searchTerm) || username.includes(searchTerm)) {
                item.style.display = 'flex';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });
        
        noResults.style.display = visibleCount === 0 ? 'block' : 'none';
    });
    
    // Filter by type
    function filterMembers(type) {
        const items = membersList.querySelectorAll('.member-item');
        const buttons = document.querySelectorAll('.members-tab-btn');
        
        // Update active button
        buttons.forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');
        
        // Filter items
        let visibleCount = 0;
        items.forEach(item => {
            const itemType = item.getAttribute('data-type');
            if (type === 'all' || itemType === type) {
                item.style.display = 'flex';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });
        
        // Reset search
        memberSearch.value = '';
        noResults.style.display = visibleCount === 0 ? 'block' : 'none';
    }
    
    // Make filterMembers global
    window.filterMembers = filterMembers;
    
    // Scroll to user in main page
    function scrollToUser(userId) {
        membersModal.classList.remove('active');
        
        // Determine which tab to switch to
        let tabName = '';
        if (userId.startsWith('patient-')) {
            tabName = 'patients';
        } else if (userId.startsWith('doctor-')) {
            tabName = 'doctors';
        } else if (userId.startsWith('family-')) {
            tabName = 'family';
        }
        
        // Switch tab first
        if (tabName) {
            const tabButtons = document.querySelectorAll('.tab-btn');
            tabButtons.forEach(btn => {
                if (btn.textContent.toLowerCase().includes(tabName.slice(0, -1))) {
                    btn.click();
                }
            });
        }
        
        // Wait for tab switch, then scroll
        setTimeout(() => {
            const element = document.getElementById(userId);
            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
                
                // Highlight the card briefly
                element.style.boxShadow = '0 0 0 4px #667eea';
                setTimeout(() => {
                    element.style.boxShadow = '';
                }, 2000);
            }
        }, 100);
    }
    
    // Make scrollToUser global
    window.scrollToUser = scrollToUser;
</script>
{% endblock %}