{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - {{ user.get_full_name }}{% endblock %}

{% block extra_css %}
<style>
    .dashboard-widget {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .dashboard-widget:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .widget-header {
        background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--secondary-color, #1d4ed8) 100%);
    }
    
    .quick-action-card {
        transition: all 0.2s ease;
        cursor: pointer;
    }
    
    .quick-action-card:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .role-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }
    
    .contextual-help {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }
    
    .widget-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .metric-card {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-left: 4px solid;
    }
    
    .metric-trend {
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    .trend-up { color: #10b981; }
    .trend-down { color: #ef4444; }
    .trend-neutral { color: #6b7280; }
    
    @media (max-width: 768px) {
        .widget-grid {
            grid-template-columns: 1fr;
        }
        
        .contextual-help {
            position: relative;
            bottom: auto;
            right: auto;
            margin-top: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Personalized Header -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="widget-header text-white px-6 py-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">
                        Welcome back, {{ user.first_name }}!
                    </h1>
                    <p class="mt-2 text-blue-100">
                        {% now "l, F j, Y" %} • {{ user.get_role_display }} Dashboard
                    </p>
                </div>
                <div class="text-right">
                    <div class="role-badge">
                        {% if user.role == 'admin' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                            <i class="fas fa-crown mr-1"></i>Administrator
                        </span>
                        {% elif user.role == 'team_leader' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                            <span>👔</span>Team Leader
                        </span>
                        {% elif user.role == 'loan_officer' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                            <i class="fas fa-handshake mr-1"></i>Loan Officer
                        </span>
                        {% elif user.role == 'secretary' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                            <i class="fas fa-user-secret mr-1"></i>Secretary
                        </span>
                        {% elif user.role == 'auditor' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                            <span>🔍</span>Auditor
                        </span>
                        {% endif %}
                    </div>
                    
                    {% if user.branch %}
                    <div class="text-blue-100 text-sm mt-2">
                        <span>🏢</span>{{ user.branch.name }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Role-Specific Quick Actions -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900">
                <span>⚡</span>
                Quick Actions
            </h2>
            <p class="text-sm text-gray-600 mt-1">Actions available based on your role and permissions</p>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
                <!-- Dynamic Quick Actions Based on Permissions -->
                {% for action in quick_actions %}
                {% if action.permission_check %}
                <div class="quick-action-card bg-gradient-to-br from-{{ action.color }}-50 to-{{ action.color }}-100 border border-{{ action.color }}-200 rounded-lg p-4 text-center"
                     onclick="window.location.href='{{ action.url }}'">
                    <div class="text-{{ action.color }}-600 text-2xl mb-2">
                        <i class="fas fa-{{ action.icon }}"></i>
                    </div>
                    <h3 class="text-sm font-medium text-{{ action.color }}-900">{{ action.title }}</h3>
                    <p class="text-xs text-{{ action.color }}-700 mt-1">{{ action.description }}</p>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Role-Specific Dashboard Widgets -->
    <div class="widget-grid">
        <!-- Admin Widgets -->
        {% if user.role == 'admin' %}
        
        <!-- System Overview Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span>🖥️</span>
                    System Overview
                </h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #3b82f6;">
                        <div class="text-2xl font-bold text-gray-900">{{ system_stats.total_users }}</div>
                        <div class="text-sm text-gray-600">Total Users</div>
                        <div class="metric-trend trend-up mt-1">
                            <span>↑</span>{{ system_stats.user_growth }}%
                        </div>
                    </div>
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #10b981;">
                        <div class="text-2xl font-bold text-gray-900">{{ system_stats.active_sessions }}</div>
                        <div class="text-sm text-gray-600">Active Sessions</div>
                        <div class="metric-trend trend-neutral mt-1">
                            <span>−</span>{{ system_stats.session_change }}%
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'users:admin_list' %}" class="text-sm text-blue-600 hover:text-blue-800">
                        Manage Users →
                    </a>
                </div>
            </div>
        </div>

        <!-- Permission Management Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-shield-alt text-purple-500 mr-2"></i>
                    Permission Management
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    {% for role, stats in permission_stats.items %}
                    <div class="flex justify-between items-center">
                        <span class="text-sm font-medium text-gray-700">{{ role|title }}</span>
                        <div class="flex items-center space-x-2">
                            <span class="text-xs text-gray-500">{{ stats.custom_overrides }} overrides</span>
                            <a href="{% url 'users:role_permissions' role %}" 
                               class="text-xs text-blue-600 hover:text-blue-800">Edit</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="mt-4">
                    <a href="{% url 'users:permission_templates' %}" class="text-sm text-purple-600 hover:text-purple-800">
                        Manage Templates →
                    </a>
                </div>
            </div>
        </div>
        
        {% elif user.role == 'team_leader' %}
        
        <!-- Team Performance Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span>👥</span>
                    Team Performance
                </h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #3b82f6;">
                        <div class="text-2xl font-bold text-gray-900">{{ team_stats.total_officers }}</div>
                        <div class="text-sm text-gray-600">Loan Officers</div>
                    </div>
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #10b981;">
                        <div class="text-2xl font-bold text-gray-900">{{ team_stats.avg_performance }}%</div>
                        <div class="text-sm text-gray-600">Avg Performance</div>
                        <div class="metric-trend trend-up mt-1">
                            <span>↑</span>{{ team_stats.performance_change }}%
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'users:team_performance' %}" class="text-sm text-blue-600 hover:text-blue-800">
                        View Details →
                    </a>
                </div>
            </div>
        </div>

        <!-- Portfolio Overview Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-briefcase text-green-500 mr-2"></i>
                    Portfolio Overview
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Total Portfolio Value</span>
                        <span class="text-lg font-semibold text-gray-900">${{ portfolio_stats.total_value|floatformat:0 }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Active Loans</span>
                        <span class="text-lg font-semibold text-gray-900">{{ portfolio_stats.active_loans }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Collection Rate</span>
                        <span class="text-lg font-semibold text-green-600">{{ portfolio_stats.collection_rate }}%</span>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'users:portfolio_analytics' %}" class="text-sm text-green-600 hover:text-green-800">
                        View Analytics →
                    </a>
                </div>
            </div>
        </div>
        
        {% elif user.role == 'loan_officer' %}
        
        <!-- My Portfolio Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span>👛</span>
                    My Portfolio
                </h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #10b981;">
                        <div class="text-2xl font-bold text-gray-900">{{ my_portfolio.total_clients }}</div>
                        <div class="text-sm text-gray-600">My Clients</div>
                        <div class="metric-trend trend-up mt-1">
                            <span>↑</span>{{ my_portfolio.client_growth }}%
                        </div>
                    </div>
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #3b82f6;">
                        <div class="text-2xl font-bold text-gray-900">${{ my_portfolio.portfolio_value|floatformat:0 }}</div>
                        <div class="text-sm text-gray-600">Portfolio Value</div>
                        <div class="metric-trend trend-up mt-1">
                            <span>↑</span>{{ my_portfolio.value_growth }}%
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'users:my_portfolio' %}" class="text-sm text-green-600 hover:text-green-800">
                        View My Portfolio →
                    </a>
                </div>
            </div>
        </div>

        <!-- Pending Tasks Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-tasks text-orange-500 mr-2"></i>
                    Pending Tasks
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    {% for task in pending_tasks %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <i class="fas fa-{{ task.icon }} text-{{ task.color }}-500 mr-3"></i>
                            <div>
                                <div class="text-sm font-medium text-gray-900">{{ task.title }}</div>
                                <div class="text-xs text-gray-500">{{ task.description }}</div>
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-{{ task.priority }}-100 text-{{ task.priority }}-800">
                            {{ task.count }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
                <div class="mt-4">
                    <a href="{% url 'loans:pending_applications' %}" class="text-sm text-orange-600 hover:text-orange-800">
                        View All Tasks →
                    </a>
                </div>
            </div>
        </div>
        
        {% elif user.role == 'secretary' %}
        
        <!-- Document Management Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span>📄</span>
                    Document Management
                </h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #8b5cf6;">
                        <div class="text-2xl font-bold text-gray-900">{{ document_stats.pending_review }}</div>
                        <div class="text-sm text-gray-600">Pending Review</div>
                    </div>
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #10b981;">
                        <div class="text-2xl font-bold text-gray-900">{{ document_stats.processed_today }}</div>
                        <div class="text-sm text-gray-600">Processed Today</div>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'utils:document_management' %}" class="text-sm text-purple-600 hover:text-purple-800">
                        Manage Documents →
                    </a>
                </div>
            </div>
        </div>

        <!-- Client Communication Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span>💬</span>
                    Client Communication
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Unread Messages</span>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                            {{ communication_stats.unread_messages }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Scheduled Calls</span>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ communication_stats.scheduled_calls }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Follow-ups Due</span>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                            {{ communication_stats.followups_due }}
                        </span>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'utils:communication_center' %}" class="text-sm text-blue-600 hover:text-blue-800">
                        Communication Center →
                    </a>
                </div>
            </div>
        </div>
        
        {% elif user.role == 'auditor' %}
        
        <!-- Audit Overview Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span>🔍</span>
                    Audit Overview
                </h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #f59e0b;">
                        <div class="text-2xl font-bold text-gray-900">{{ audit_stats.pending_audits }}</div>
                        <div class="text-sm text-gray-600">Pending Audits</div>
                    </div>
                    <div class="metric-card p-4 rounded-lg" style="border-left-color: #ef4444;">
                        <div class="text-2xl font-bold text-gray-900">{{ audit_stats.compliance_issues }}</div>
                        <div class="text-sm text-gray-600">Compliance Issues</div>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{% url 'reports:audit_dashboard' %}" class="text-sm text-yellow-600 hover:text-yellow-800">
                        Audit Dashboard →
                    </a>
                </div>
            </div>
        </div>

        <!-- Compliance Reports Widget -->
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-clipboard-check text-green-500 mr-2"></i>
                    Compliance Reports
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    {% for report in compliance_reports %}
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span>📄</span>
                            <span class="text-sm text-gray-700">{{ report.name }}</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-xs text-gray-500">{{ report.last_updated }}</span>
                            <a href="{{ report.url }}" class="text-xs text-green-600 hover:text-green-800">View</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="mt-4">
                    <a href="{% url 'reports:compliance_reports' %}" class="text-sm text-green-600 hover:text-green-800">
                        All Reports →
                    </a>
                </div>
            </div>
        </div>
        
        {% endif %}

        <!-- Universal Widgets (shown to all roles with appropriate permissions) -->
        
        <!-- Recent Activity Widget -->
        {% if user.has_page_permission.dashboard.view_activity %}
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-history text-gray-500 mr-2"></i>
                    Recent Activity
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    {% for activity in recent_activities %}
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            <div class="h-8 w-8 rounded-full bg-{{ activity.color }}-100 flex items-center justify-center">
                                <i class="fas fa-{{ activity.icon }} text-{{ activity.color }}-600 text-xs"></i>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-gray-900">{{ activity.description }}</p>
                            <p class="text-xs text-gray-500">{{ activity.timestamp|timesince }} ago</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="mt-4">
                    <a href="{% url 'users:activity_log' %}" class="text-sm text-gray-600 hover:text-gray-800">
                        View All Activity →
                    </a>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Notifications Widget -->
        {% if user.has_page_permission.dashboard.view_notifications %}
        <div class="dashboard-widget bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <span>🔔</span>
                        Notifications
                    </h3>
                    {% if unread_notifications_count > 0 %}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                        {{ unread_notifications_count }}
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="p-6">
                {% if notifications %}
                <div class="space-y-3">
                    {% for notification in notifications %}
                    <div class="flex items-start space-x-3 {% if not notification.is_read %}bg-blue-50{% endif %} p-2 rounded">
                        <div class="flex-shrink-0">
                            <div class="h-6 w-6 rounded-full bg-{{ notification.type_color }}-100 flex items-center justify-center">
                                <i class="fas fa-{{ notification.icon }} text-{{ notification.type_color }}-600 text-xs"></i>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-gray-900">{{ notification.message }}</p>
                            <p class="text-xs text-gray-500">{{ notification.created_at|timesince }} ago</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-bell-slash text-gray-400 text-2xl mb-2"></i>
                    <p class="text-sm text-gray-500">No notifications</p>
                </div>
                {% endif %}
                <div class="mt-4">
                    <a href="{% url 'utils:notifications' %}" class="text-sm text-blue-600 hover:text-blue-800">
                        View All Notifications →
                    </a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Contextual Help -->
    <div class="contextual-help">
        <div class="bg-white shadow-lg rounded-lg p-4 max-w-sm">
            <div class="flex items-center justify-between mb-3">
                <h4 class="text-sm font-semibold text-gray-900">
                    <span>❓</span>
                    Need Help?
                </h4>
                <button onclick="toggleHelp()" class="text-gray-400 hover:text-gray-600">
                    <span>✕</span>
                </button>
            </div>
            <div class="space-y-2">
                {% for help_item in contextual_help %}
                <div class="text-xs text-gray-600">
                    <strong>{{ help_item.title }}:</strong> {{ help_item.description }}
                </div>
                {% endfor %}
            </div>
            <div class="mt-3 pt-3 border-t border-gray-200">
                <a href="{% url 'utils:help_center' %}" class="text-xs text-blue-600 hover:text-blue-800">
                    Visit Help Center →
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // Dashboard customization functionality
    document.addEventListener('DOMContentLoaded', function() {
        initializeDashboard();
        setupWidgetInteractions();
        loadUserPreferences();
    });

    function initializeDashboard() {
        // Add loading states
        const widgets = document.querySelectorAll('.dashboard-widget');
        widgets.forEach(widget => {
            widget.addEventListener('click', function(e) {
                if (e.target.tagName === 'A') {
                    // Add loading state to clicked links
                    e.target.innerHTML = '<span>⟳</span>' + e.target.textContent;
                }
            });
        });
    }

    function setupWidgetInteractions() {
        // Quick action cards
        const quickActions = document.querySelectorAll('.quick-action-card');
        quickActions.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.05)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
            });
        });
    }

    function loadUserPreferences() {
        // Load user's dashboard preferences from localStorage
        const preferences = localStorage.getItem('dashboard_preferences_{{ user.id }}');
        if (preferences) {
            const prefs = JSON.parse(preferences);
            applyPreferences(prefs);
        }
    }

    function applyPreferences(preferences) {
        // Apply user's dashboard customization preferences
        if (preferences.hiddenWidgets) {
            preferences.hiddenWidgets.forEach(widgetId => {
                const widget = document.getElementById(widgetId);
                if (widget) {
                    widget.style.display = 'none';
                }
            });
        }
    }

    function toggleHelp() {
        const helpDiv = document.querySelector('.contextual-help');
        helpDiv.style.display = helpDiv.style.display === 'none' ? 'block' : 'none';
    }

    // Auto-refresh dashboard data every 5 minutes
    setInterval(function() {
        // Refresh dynamic content without full page reload
        refreshDashboardData();
    }, 300000); // 5 minutes

    function refreshDashboardData() {
        // AJAX call to refresh dashboard data
        fetch('{% url "users:dashboard_data" %}')
            .then(response => response.json())
            .then(data => {
                updateDashboardWidgets(data);
            })
            .catch(error => {
                console.error('Error refreshing dashboard:', error);
            });
    }

    function updateDashboardWidgets(data) {
        // Update widget content with fresh data
        Object.keys(data).forEach(widgetId => {
            const widget = document.getElementById(widgetId);
            if (widget && data[widgetId]) {
                // Update widget content
                const content = widget.querySelector('.widget-content');
                if (content) {
                    content.innerHTML = data[widgetId];
                }
            }
        });
    }
</script>
{% endblock %}