{% extends 'base.html' %}
{% block title %}Teacher Dashboard{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/teacher-dashboard.css') }}">
<style>
    /* Dashboard Styles */
    .dashboard-content {
        position: relative;
        z-index: 10;
    }
    .dashboard-header {
        position: relative;
        z-index: 20;
    }
    .dashboard-card {
        position: relative;
        z-index: 10;
        transform: none !important;
        transition: none !important;
    }
    .stats {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        border-radius: 1rem;
        padding: 1rem;
        transition: box-shadow 0.3s;
    }
    .stats:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .stat-figure {
        font-size: 1.5rem;
        opacity: 0.9;
        margin-bottom: 0.75rem;
        color: #2563eb; /* blue-600 */
    }
    .stat-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: #64748b; /* slate-500 */
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .stat-value {
        font-size: 1.75rem;
        font-weight: bold;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        color: #2563eb; /* blue-600 */
    }
    .stat-desc {
        font-size: 0.875rem;
        color: #6b7280; /* gray-500 */
        margin-top: 0.5rem;
    }
    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        display: inline-block;
    }
    .badge-primary {
        background: #6366f1; /* indigo-500 */
        color: #fff;
    }
    .badge-accent {
        background: #14b8a6; /* teal-500 */
        color: #fff;
    }
    .badge-warning {
        background: #facc15; /* yellow-400 */
        color: #fff;
    }
    .badge-info {
        background: #0ea5e9; /* sky-500 */
        color: #fff;
    }

    /* Mobile-specific improvements */
    @media (max-width: 640px) {
        .stats {
            padding: 1rem 0.75rem;
        }
        
        .stat-figure {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        
        .stat-title {
            font-size: 0.75rem;
        }
        
        .stat-value {
            font-size: 1.5rem;
        }
        
        .stat-desc {
            font-size: 0.75rem;
        }
        
        .card-title {
            font-size: 1rem;
        }
        
        .badge {
            font-size: 0.625rem;
            padding: 0.125rem 0.5rem;
        }
        
        /* Improve touch targets */
        .btn {
            min-height: 2.5rem;
            padding: 0.5rem 1rem;
        }
        
        .btn-sm {
            min-height: 2rem;
            padding: 0.375rem 0.75rem;
        }
        
        /* Better spacing for mobile */
        .space-y-8 > * + * {
            margin-top: 1.5rem;
        }
        
        /* Improve readability on small screens */
        .truncate {
            white-space: normal;
            overflow: visible;
            text-overflow: initial;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    /* Tablet-specific adjustments */
    @media (min-width: 641px) and (max-width: 1024px) {
        .stats {
            padding: 1.25rem;
        }
        
        .stat-figure {
            font-size: 1.75rem;
        }
        
        .stat-value {
            font-size: 1.875rem;
        }
    }

    /* Ensure good contrast for all elements */
    .bg-base-200 {
        background-color: #f1f5f9;
    }
    
    .text-base-content\/70 {
        color: rgba(30, 41, 59, 0.7);
    }
    
    /* Improve focus states for accessibility */
    .btn:focus,
    .link:focus {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
    
    /* Better desktop layout */
    @media (min-width: 1536px) {
        .stats {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .stat {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .stat-value {
            font-size: 2.5rem;
        }
    }
    
    /* Improved card layouts for larger screens */
    @media (min-width: 1280px) {
        .stats {
            padding: 1.5rem;
        }
    }

    /* Larger title on larger screens */
    @media (min-width: 1024px) {
        h1.text-4xl {
            font-size: 2.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="teacher-dashboard-container space-y-6 sm:space-y-8 mx-auto w-full px-4 sm:px-6 lg:px-8 max-w-7xl">
    <!-- Enhanced Page Header with Gradient -->
    <div class="relative bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white rounded-2xl shadow-2xl overflow-hidden">
        <!-- Animated Background Pattern -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
        </div>
        
        <div class="relative p-6 sm:p-8">
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-6">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-chalkboard-teacher text-3xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white">
                            {{ greeting }}, {{ current_user.username }}!
                        </h1>
                        <p class="text-white/90 mt-1 flex items-center gap-2">
                            <i class="fas fa-calendar-alt"></i>
                            {{ stats.last_updated }}
                        </p>
                    </div>
                </div>
                
                <div class="flex flex-wrap gap-3">
                    <a href="{{ url_for('teacher.add_topic') }}" class="btn btn-lg bg-white/20 backdrop-blur-lg border-white/30 hover:bg-white/30 text-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <i class="fas fa-plus mr-2"></i> New Topic
                    </a>
                    <a href="{{ url_for('teacher.add_student') }}" class="btn btn-lg bg-white/20 backdrop-blur-lg border-white/30 hover:bg-white/30 text-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <i class="fas fa-user-plus mr-2"></i> Add Student
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Enhanced Stats Cards with Modern Design -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Students Card -->
        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 border border-blue-200 dark:border-blue-800 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-users text-white text-2xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-semibold uppercase tracking-wide">Students</div>
                        <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ stats.total_students }}</div>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2 text-sm">
                <div class="flex-1 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
                    <div class="bg-gradient-to-r from-blue-500 to-indigo-600 h-2 rounded-full transition-all duration-500" 
                         style="width: {{ (stats.active_students / stats.total_students * 100) if stats.total_students > 0 else 0 }}%"></div>
                </div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-3">
                <span class="font-bold text-green-600">{{ stats.active_students }}</span> active in last 30 days
            </p>
        </div>
        
        <!-- Topics Card -->
        <div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 border border-purple-200 dark:border-purple-800 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-book text-white text-2xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-semibold uppercase tracking-wide">Topics</div>
                        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400">{{ stats.total_topics }}</div>
                    </div>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-purple-200 dark:border-purple-800">
                <a href="{{ url_for('teacher.manage_topics') }}" class="text-sm text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
                    <span>Manage Topics</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
        
        <!-- Submissions Card -->
        <div class="bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 border border-orange-200 dark:border-orange-800 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-clipboard-check text-white text-2xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-semibold uppercase tracking-wide">Pending</div>
                        <div class="text-3xl font-bold text-orange-600 dark:text-orange-400">{{ stats.pending_submissions }}</div>
                    </div>
                </div>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600 dark:text-gray-400">Reviewed</span>
                    <span class="font-bold text-green-600">{{ stats.reviewed_submissions }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600 dark:text-gray-400">Total</span>
                    <span class="font-bold text-gray-700 dark:text-gray-300">{{ stats.pending_submissions + stats.reviewed_submissions }}</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Two Column Layout for remaining content -->
    <div class="dashboard-layout">
        <!-- Left Column - Pending Items -->
        <div class="dashboard-main space-y-4 sm:space-y-6">
            <!-- Student Approval Requests -->
            {% if pending_approvals %}
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body p-4 sm:p-6">
                        <h2 class="card-title flex flex-col sm:flex-row sm:justify-between gap-2">
                            <span class="flex items-center">
                                <i class="fas fa-user-check text-info mr-2"></i>
                                New Student Requests
                            </span>
                            <span class="badge badge-info">{{ pending_approvals|length }}</span>
                        </h2>
                        
                        <div class="divider my-1"></div>
                        
                        <div class="space-y-3 sm:space-y-4">
                            {% for student in pending_approvals %}
                                <div class="bg-base-200 p-3 sm:p-4 rounded-lg">
                                    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
                                        <div class="flex-1">
                                            <h3 class="font-bold text-sm sm:text-base">{{ student.username }}</h3>
                                            <p class="text-xs sm:text-sm text-base-content/70">{{ student.email }}</p>
                                            <div class="text-xs mt-1 space-y-1">
                                                <div><span class="font-semibold">Program:</span> {{ student.program }}</div>
                                                <div><span class="font-semibold">Department:</span> {{ student.department }}</div>
                                            </div>
                                        </div>
                                        <div class="text-xs text-base-content/70 text-right sm:text-left">
                                            {{ student.created_at.strftime('%b %d, %Y') }}
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-end gap-2 mt-3">
                                        <form method="POST" action="{{ url_for('teacher.approve_student', student_id=student.id) }}" class="flex-1 sm:flex-initial">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <button type="submit" class="btn btn-sm btn-success gap-1 w-full sm:w-auto">
                                                <i class="fas fa-check"></i> Approve
                                            </button>
                                        </form>
                                        <form method="POST" action="{{ url_for('teacher.reject_student', student_id=student.id) }}" class="flex-1 sm:flex-initial">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <button type="submit" class="btn btn-sm btn-error gap-1 w-full sm:w-auto">
                                                <i class="fas fa-times"></i> Reject
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        
        <!-- Right Column - Quick Actions -->
        <div class="dashboard-sidebar space-y-4 sm:space-y-6">
            <!-- Modern Quick Actions -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Quick Actions</h2>
                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center shadow-md">
                        <i class="fas fa-bolt text-white"></i>
                    </div>
                </div>
                    
                    <div class="grid grid-cols-1 gap-3">
                        <a href="{{ url_for('teacher.pending_submissions') }}" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/10 dark:to-orange-900/10 rounded-xl p-4 border-2 border-yellow-200 dark:border-yellow-800 hover:border-yellow-400 dark:hover:border-yellow-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-clipboard-list text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Pending Reviews</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">Review submissions</div>
                                </div>
                                {% if stats.pending_submissions > 0 %}
                                    <div class="absolute -top-2 -right-2 w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center font-bold text-sm shadow-lg animate-pulse">{{ stats.pending_submissions }}</div>
                                {% endif %}
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.add_topic') }}" class="group relative overflow-hidden bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/10 dark:to-purple-900/10 rounded-xl p-4 border-2 border-indigo-200 dark:border-indigo-800 hover:border-indigo-400 dark:hover:border-indigo-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-plus text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Create Topic</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">Add new content</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.manage_courses') }}" class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/10 dark:to-pink-900/10 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-book-reader text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Course Outlines</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">Organize curriculum</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.manage_students') }}" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/10 dark:to-cyan-900/10 rounded-xl p-4 border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-users-cog text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Manage Students</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">View & edit students</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.manage_topics') }}" class="group relative overflow-hidden bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10 rounded-xl p-4 border-2 border-green-200 dark:border-green-800 hover:border-green-400 dark:hover:border-green-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-book text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Manage Topics</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">Edit materials</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.manage_dictionary') }}" class="group relative overflow-hidden bg-gradient-to-br from-pink-50 to-rose-50 dark:from-pink-900/10 dark:to-rose-900/10 rounded-xl p-4 border-2 border-pink-200 dark:border-pink-800 hover:border-pink-400 dark:hover:border-pink-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-pink-400 to-rose-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-book-open text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Dictionary</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">Manage vocabulary</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.manage_quizzes') }}" class="group relative overflow-hidden bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/10 dark:to-amber-900/10 rounded-xl p-4 border-2 border-orange-200 dark:border-orange-800 hover:border-orange-400 dark:hover:border-orange-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-orange-400 to-amber-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-question-circle text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Quizzes</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">Create assessments</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="{{ url_for('teacher.topic_scores') }}" class="group relative overflow-hidden bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/10 dark:to-cyan-900/10 rounded-xl p-4 border-2 border-teal-200 dark:border-teal-800 hover:border-teal-400 dark:hover:border-teal-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                                    <i class="fas fa-chart-bar text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="font-bold text-gray-800 dark:text-white text-base">Reports & Analytics</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">View performance</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Auto-refresh indicator -->
            <div class="text-center text-xs sm:text-sm text-base-content/70" id="refresh-indicator">
                Dashboard automatically refreshes every 5 minutes
            </div>
        </div>
    </div>
</div>

<script>
    // Auto-refresh functionality
    function updateLastUpdatedTime() {
        const now = new Date();
        document.getElementById('last-updated').textContent = 
            String(now.getHours()).padStart(2, '0') + ':' + 
            String(now.getMinutes()).padStart(2, '0') + ':' + 
            String(now.getSeconds()).padStart(2, '0');
    }
    
    // Page auto-refresh every 5 minutes
    setInterval(function() {
        fetch(window.location.href)
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                // Update stats
                const newStats = doc.querySelectorAll('.stat-value');
                const currentStats = document.querySelectorAll('.stat-value');
                for (let i = 0; i < newStats.length; i++) {
                    currentStats[i].innerHTML = newStats[i].innerHTML;
                }
                
                // Update pending reviews
                const newSubmissions = doc.querySelector('.card-body .space-y-4');
                const currentSubmissions = document.querySelector('.card-body .space-y-4');
                if (newSubmissions && currentSubmissions) {
                    currentSubmissions.innerHTML = newSubmissions.innerHTML;
                }
                
                // Update approval requests if present
                const newApprovals = doc.querySelectorAll('.card-body .space-y-4')[1];
                const currentApprovals = document.querySelectorAll('.card-body .space-y-4')[1];
                if (newApprovals && currentApprovals) {
                    currentApprovals.innerHTML = newApprovals.innerHTML;
                }
                
                updateLastUpdatedTime();
            })
            .catch(err => {
                console.error('Error refreshing dashboard:', err);
            });
    }, 300000); // 5 minutes
    
    // Initial setup
    document.addEventListener('DOMContentLoaded', function() {
        updateLastUpdatedTime();
    });
</script>
{% endblock %}