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

{% block title %}Admin Dashboard{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/apexcharts@3.35.0/dist/apexcharts.min.css" rel="stylesheet">
<style>
    :root {
        --primary: #4f46e5;
        --primary-light: #eef2ff;
        --primary-dark: #4338ca;
        --success: #10b981;
        --success-light: #ecfdf5;
        --info: #3b82f6;
        --info-light: #eff6ff;
        --warning: #f59e0b;
        --warning-light: #fffbeb;
        --danger: #ef4444;
        --danger-light: #fef2f2;
        --secondary: #6b7280;
        --light: #f9fafb;
        --dark: #111827;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-400: #9ca3af;
        --gray-500: #6b7280;
        --gray-600: #4b5563;
        --border-radius: 0.75rem;
        --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body {
        background-color: #f8fafc;
        color: #1f2937;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .container-fluid {
        padding: 2rem;
        max-width: 1600px;
        margin: 0 auto;
    }
    
    /* Page Header */
    .page-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--gray-200);
    }
    
    .page-header h1 {
        font-weight: 700;
        color: var(--dark);
        font-size: 1.75rem;
        margin: 0;
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }
    
    .page-header p {
        color: var(--secondary);
        margin-bottom: 0;
    }
    
    /* Card Styles */
    .card {
        border: none;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        transition: var(--transition);
        margin-bottom: 1.5rem;
        background: white;
        overflow: hidden;
    }
    
    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow);
    }
    
    .card-header {
        background: white;
        border-bottom: 1px solid var(--gray-200);
        padding: 1.25rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .card-header h6 {
        margin: 0;
        font-weight: 600;
        color: var(--dark);
        font-size: 1.1rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    /* Stats Cards */
    .stat-card {
        background: white;
        border-radius: var(--border-radius);
        padding: 1.75rem 1.5rem;
        box-shadow: var(--box-shadow);
        transition: var(--transition);
        height: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
    }
    
    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        transition: var(--transition);
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--card-shadow);
    }
    
    .stat-card.primary::before {
        background-color: var(--primary);
    }
    
    .stat-card.success::before {
        background-color: var(--success);
    }
    
    .stat-card.info::before {
        background-color: var(--info);
    }
    
    .stat-card.warning::before {
        background-color: var(--warning);
    }
    
    .stat-card.danger::before {
        background-color: var(--danger);
    }
    
    .stat-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--gray-500);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
    }
    
    .stat-number {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--dark);
        margin: 0.25rem 0 0.5rem;
        line-height: 1.2;
        position: relative;
        z-index: 1;
        color: white;
    }
    
    /* Utility Classes */
    .bg-primary-soft { background-color: rgba(79, 70, 229, 0.1) !important; }
    .bg-success-soft { background-color: rgba(16, 185, 129, 0.1) !important; }
    .bg-info-soft { background-color: rgba(59, 130, 246, 0.1) !important; }
    .bg-warning-soft { background-color: rgba(245, 158, 11, 0.1) !important; }
    .bg-danger-soft { background-color: rgba(239, 68, 68, 0.1) !important; }
    .bg-purple-soft { background-color: rgba(139, 92, 246, 0.1) !important; }
    
    .text-purple { color: #8b5cf6 !important; }
    .btn-outline-purple { 
        color: #8b5cf6;
        border-color: #8b5cf6;
    }
    .btn-outline-purple:hover {
        background-color: #8b5cf6;
        color: white;
    }
    
    .icon-shape {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .icon-shape.icon-sm { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    .icon-shape.icon-md { width: 3rem; height: 3rem; font-size: 1.25rem; }
    .icon-shape.icon-lg { width: 4rem; height: 4rem; font-size: 1.75rem; }
    
    .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 0.25rem;
        position: relative;
        z-index: 1;
    }
    
    .stat-label {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--secondary);
        font-weight: 600;
    }
    
    .stat-change {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }
    
    .stat-change.positive {
        color: var(--success);
    }
    
    .stat-change.negative {
        color: var(--danger);
    }
    
    /* Navigation */
    .admin-nav {
        background: white;
        border-radius: var(--border-radius);
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--box-shadow);
        border: 1px solid #e3e6f0;
    }
    
    .admin-nav .nav-link {
        color: #6e707e;
        font-weight: 600;
        padding: 0.7rem 1.2rem;
        border-radius: 0.35rem;
        margin-right: 0.5rem;
        font-size: 0.85rem;
        transition: var(--transition);
        border: 1px solid transparent;
    }
    
    .admin-nav .nav-link i {
        margin-right: 0.5rem;
        width: 16px;
        text-align: center;
    }
    
    .admin-nav .nav-link.active,
    .admin-nav .nav-link:hover {
        background-color: var(--primary);
        color: white;
        border-color: var(--primary);
    }
    
    /* Quick Actions */
    .quick-actions {
        margin: 1.5rem 0;
    }
    
    .quick-actions h5 {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6e707e;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    
    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-icon i {
        margin-right: 0.5rem;
    }
    
    /* Recent Activity */
    .recent-activity {
        max-height: 400px;
        overflow-y: auto;
        padding-right: 0.5rem;
    }
    
    .quick-actions .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: var(--dark);
        transition: color 0.2s ease;
    }
    
    .quick-actions .card-text {
        font-size: 0.9375rem;
        color: var(--gray-600);
        margin-bottom: 1.5rem;
        line-height: 1.6;
        flex-grow: 1;
    }
    
    .quick-actions .btn {
        min-width: 120px;
        padding: 0.5rem 1.25rem;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
    }
    
    .quick-actions .btn i {
        transition: transform 0.2s ease;
    }
    
    .quick-actions .btn:hover i {
        transform: translateX(3px);
    }
    
    .badge {
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 600;
        border-radius: 0.25rem;
    }
    
    /* Task Progress */
    .task-progress {
        height: 5px;
        background-color: var(--gray-200);
        border-radius: 3px;
        margin: 0.5rem 0;
        overflow: hidden;
    }
    
    .task-progress .progress-bar {
        height: 100%;
        border-radius: 3px;
        transition: width 0.6s ease;
    }
    
    /* Task Status Badge */
    .task-status-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 0.25rem;
        color: white;
        margin-top: 0.25rem;
    }
    
    .badge-president { background-color: #6f42c1; color: white; }
    .badge-minister { background-color: #20c9a6; color: white; }
    .badge-director { background-color: #36b9cc; color: white; }
    .badge-head { background-color: #f6c23e; color: #000; }
    .badge-secretary { background-color: #858796; color: white; }
    .badge-admin { background-color: #e74a3b; color: white; }
    
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #d1d3e2;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #b7b9cc;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1>Dashboard Overview</h1>
                <p>Welcome back, {{ request.user.get_full_name|default:request.user.username }}! Here's what's happening.</p>
            </div>
            <div class="d-flex">
                <span class="badge bg-primary-soft text-primary rounded-pill px-3 py-2">
                    <i class="fas fa-shield-alt me-2"></i>{{ user_role|title }} Access
                </span>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="m-0 fw-bold">Quick Actions</h6>
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <!-- User Management -->
                        <div class="col-md-3">
                            <div class="card h-100 border-0 bg-light">
                                <div class="card-body text-center">
                                    <div class="icon-shape icon-lg bg-primary-soft text-primary rounded-circle mb-3 mx-auto">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <h6 class="mb-2">User Management</h6>
                                    <div class="d-grid gap-2">
                                        <a href="{% url 'users:user_create' %}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-user-plus me-1"></i> Add User
                                        </a>
                                        <a href="{% url 'users:user_list' %}" class="btn btn-sm btn-outline-secondary">
                                            View All Users
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Department Management -->
                        <div class="col-md-3">
                            <div class="card h-100 border-0 bg-light">
                                <div class="card-body text-center">
                                    <div class="icon-shape icon-lg bg-success-soft text-success rounded-circle mb-3 mx-auto">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <h6 class="mb-2">Departments</h6>
                                    <div class="d-grid gap-2">
                                        <a href="{% url 'departments:department_create' %}" class="btn btn-sm btn-outline-success">
                                            Add New
                                        </a>
                                        <a href="{% url 'departments:department_list' %}" class="btn btn-sm btn-outline-secondary">
                                            View All
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Task Management -->
                        <div class="col-md-3">
                            <div class="card h-100 border-0 bg-light">
                                <div class="card-body text-center">
                                    <div class="icon-shape icon-lg bg-warning-soft text-warning rounded-circle mb-3 mx-auto">
                                        <i class="fas fa-tasks"></i>
                                    </div>
                                    <h6 class="mb-2">Tasks</h6>
                                    <div class="d-grid gap-2">
                                        <a href="{% url 'tasks:task-create' %}" class="btn btn-sm btn-outline-warning">
                                            <i class="fas fa-plus me-1"></i> Create Task
                                        </a>
                                        <a href="{% url 'tasks:task-list' %}" class="btn btn-sm btn-outline-secondary">
                                            View All Tasks
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Appointments -->
                        <div class="col-md-3">
                            <div class="card h-100 border-0 bg-light">
                                <div class="card-body text-center">
                                    <div class="icon-shape icon-lg bg-info-soft text-info rounded-circle mb-3 mx-auto">
                                        <i class="far fa-calendar-alt"></i>
                                    </div>
                                    <h6 class="mb-2">Appointments</h6>
                                    <div class="d-grid gap-2">
                                        <a href="{% url 'appointments:appointment-create' %}" class="btn btn-sm btn-outline-info">
                                            <i class="far fa-calendar-plus me-1"></i> New Appointment
                                        </a>
                                        <a href="{% url 'appointments:appointment-list' %}" class="btn btn-sm btn-outline-secondary">
                                            View Calendar
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if can_manage_roles %}
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card border-0 bg-light">
                                <div class="card-body text-center">
                                    <div class="d-flex align-items-center justify-content-center">
                                        <div class="icon-shape icon-md bg-purple-soft text-purple rounded-circle me-3">
                                            <i class="fas fa-user-shield"></i>
                                        </div>
                                        <h6 class="mb-0">Administrator Tools</h6>
                                    </div>
                                    <div class="mt-3 d-flex justify-content-center gap-2">
                                        <a href="{% url 'users:role_list' %}" class="btn btn-sm btn-outline-purple">
                                            <i class="fas fa-user-tag me-1"></i> Manage Roles
                                        </a>
                                        <a href="{% url 'appointments:service-list' %}" class="btn btn-sm btn-outline-purple">
                                            <i class="fas fa-cut me-1"></i> Manage Services
                                        </a>
                                        <!-- Admin Site link removed - Using custom admin dashboard -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div>
            {% if can_manage_users %}
            <a href="{% url 'users:user_create' %}" class="btn btn-success btn-sm shadow-sm mr-2">
                <i class="fas fa-user-plus fa-sm"></i> Add User
            </a>
            {% endif %}
            <a href="{% url 'appointments:appointment-create' %}" class="btn btn-primary btn-sm shadow-sm">
                <i class="fas fa-plus fa-sm"></i> New Appointment
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-4 mb-4">
        <!-- Total Users Card -->
        <div class="col-xl-3 col-md-6">
            <div class="stat-card primary">
                <div class="stat-label">Total Users</div>
                <div class="stat-number">{{ stats.total_users }}</div>
                <div class="d-flex align-items-center">
                    <span class="stat-change">
                        <i class="fas fa-arrow-up me-1"></i> {{ stats.active_user_count }} active
                    </span>
                </div>
                <i class="fas fa-users card-icon"></i>
            </div>
        </div>

        <!-- Departments Card -->
        <div class="col-xl-3 col-md-6">
            <div class="stat-card info">
                <div class="stat-label">Departments</div>
                <div class="stat-number">{{ stats.total_departments }}</div>
                <div class="d-flex align-items-center">
                    <a href="{% url 'departments:department_list' %}" class="text-white text-decoration-underline">View all</a>
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Pending Appointments</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.pending_appointments }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Users -->
        <div class="col-xl-2 col-md-4 mb-4">
            <div class="card staff-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Total Users</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_users }}</div>
                            {% if can_manage_users %}
                            <a href="{% url 'users:user_list' %}" class="small text-info">Manage Users</a>
                            {% endif %}
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Departments -->
        {% if stats.total_departments %}
        <div class="col-xl-2 col-md-4 mb-4">
            <div class="card border-left-success h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Departments</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_departments }}</div>
                            {% if can_manage_roles %}
                            <a href="{% url 'departments:department_list' %}" class="small text-success">Manage</a>
                            {% endif %}
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-building fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Total Tasks -->
        <div class="col-xl-2 col-md-4 mb-4">
            <div class="card border-left-primary h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Tasks</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_tasks }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-tasks fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Open Tasks -->
        <div class="col-xl-2 col-md-4 mb-4">
            <div class="card border-left-warning h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Open Tasks</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.open_tasks }}</div>
                            {% if stats.overdue_tasks > 0 %}
                            <div class="mt-1">
                                <span class="badge bg-danger text-white">{{ stats.overdue_tasks }} overdue</span>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Completed Tasks (30 Days) -->
        <div class="col-xl-2 col-md-4 mb-4">
            <div class="card border-left-success h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Tasks Completed (30d)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.completed_tasks_30d }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!-- Main Content -->
    <div class="row g-4">
        <!-- Recent Activity -->
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="m-0 fw-bold">Recent Activity</h6>
                        <div class="dropdown
                            <button class="btn btn-sm btn-link text-muted p-0" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="#">This Week</a></li>
                                <li><a class="dropdown-item" href="#">This Month</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Custom Range</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for activity in recent_activities %}
                        <a href="{{ activity.link }}" class="list-group-item list-group-item-action border-0 px-4 py-3">
                            <div class="d-flex align-items-center">
                                <div class="icon-shape icon-sm rounded-circle bg-{{ activity.type }}-light text-{{ activity.type }} me-3">
                                    <i class="fas {{ activity.icon }}"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="mb-1">{{ activity.title }}</h6>
                                        <small class="text-muted">{{ activity.timestamp|timesince }} ago</small>
                                    </div>
                                    <p class="mb-0 text-muted small">{{ activity.description }}</p>
                                </div>
                            </div>
                        </a>
                        {% empty %}
                        <div class="text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No recent activities found</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="card-footer bg-white border-0 py-3 text-center">
                    <a href="#" class="text-primary text-decoration-none">View all activity</a>
                </div>
            </div>
        </div>

        <!-- Upcoming Appointments -->
        <div class="col-lg-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="m-0 fw-bold">Upcoming Appointments</h6>
                        <a href="{% url 'appointments:appointment-list' %}" class="btn btn-sm btn-link p-0">View All</a>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for appointment in upcoming_appointments %}
                        <a href="{% url 'admin:appointments_appointment_change' appointment.id %}" class="list-group-item list-group-item-action border-0 px-4 py-3">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="d-flex align-items-center mb-1">
                                        <h6 class="mb-0">{{ appointment.client_name }}</h6>
                                        <span class="badge ms-2 {% if appointment.status == 'confirmed' %}bg-success{% elif appointment.status == 'pending' %}bg-warning{% else %}bg-secondary{% endif %}">
                                            {{ appointment.get_status_display }}
                                        </span>
                                    </div>
                                    <p class="mb-0 text-muted small">
                                        <i class="far fa-calendar-alt me-1"></i> {{ appointment.start_time|date:"M d, Y" }}
                                        <span class="mx-2">•</span>
                                        <i class="far fa-clock me-1"></i> {{ appointment.start_time|time:"H:i" }}
                                    </p>
                                    <p class="mb-0 small text-muted">
                                        <i class="fas fa-cut me-1"></i> {{ appointment.service.name|truncatechars:30 }}
                                    </p>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                        {% empty %}
                        <div class="text-center py-4">
                            <i class="far fa-calendar-plus fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No upcoming appointments</p>
                            <a href="{% url 'appointments:appointment-create' %}" class="btn btn-sm btn-primary mt-2">
                                <i class="fas fa-plus me-1"></i> Schedule Appointment
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% if upcoming_appointments %}
                <div class="card-footer bg-white border-0 py-3 text-center">
                    <a href="{% url 'appointments:appointment-list' %}" class="text-primary text-decoration-none">
                        View all appointments <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Recent Tasks -->
        <div class="col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="m-0 fw-bold d-flex align-items-center">
                            <i class="fas fa-tasks text-primary me-2"></i> Recent Tasks
                        </h6>
                        <div class="btn-group" role="group">
                            <a href="{% url 'tasks:task-create' %}" class="btn btn-sm btn-primary">
                                <i class="fas fa-plus me-1"></i> New Task
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-filter"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><h6 class="dropdown-header">Filter by Status</h6></li>
                                <li><a class="dropdown-item" href="{% url 'tasks:task-list' %}?status=all">All Tasks</a></li>
                                <li><a class="dropdown-item" href="{% url 'tasks:task-list' %}?status=pending">
                                    <i class="fas fa-circle text-warning me-2"></i>Pending
                                </a></li>
                                <li><a class="dropdown-item" href="{% url 'tasks:task-list' %}?status=in_progress">
                                    <i class="fas fa-circle text-primary me-2"></i>In Progress
                                </a></li>
                                <li><a class="dropdown-item" href="{% url 'tasks:task-list' %}?status=completed">
                                    <i class="fas fa-circle text-success me-2"></i>Completed
                                </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    {% if recent_tasks %}
                    <div class="list-group list-group-flush">
                        {% for task in recent_tasks %}
                        <a href="{% url 'tasks:task-detail' task.id %}" class="list-group-item list-group-item-action border-0 px-4 py-3 hover-shadow">
                            <div class="d-flex align-items-start">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                        <div class="avatar-title rounded-circle bg-soft-{% if task.status == 'completed' %}success{% elif task.status == 'in_progress' %}primary{% else %}warning{% endif %} text-{% if task.status == 'completed' %}success{% elif task.status == 'in_progress' %}primary{% else %}warning{% endif %}">
                                            <i class="fas fa-{% if task.status == 'completed' %}check-circle{% elif task.status == 'in_progress' %}spinner fa-spin{% else %}clock{% endif %}"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <h6 class="mb-0 text-dark fw-semibold">{{ task.title|truncatechars:40 }}</h6>
                                        <span class="badge {% if task.priority == 'high' %}bg-danger{% elif task.priority == 'medium' %}bg-warning{% else %}bg-secondary{% endif %} ms-2">
                                            {{ task.get_priority_display }}
                                        </span>
                                    </div>
                                    
                                    <div class="d-flex align-items-center text-muted small mb-2">
                                        <span class="me-3">
                                            <i class="far fa-user me-1"></i> {{ task.assigned_to.get_full_name|default:'Unassigned' }}
                                        </span>
                                        {% if task.due_date %}
                                        <span class="me-3">
                                            <i class="far fa-calendar-alt me-1"></i> 
                                            <span class="{% if task.is_overdue %}text-danger{% endif %}">
                                                {{ task.due_date|date:"M d, Y" }}
                                                {% if task.is_overdue %}<span class="badge bg-danger-soft text-danger ms-1">Overdue</span>{% endif %}
                                            </span>
                                        </span>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="progress flex-grow-1 me-3" style="height: 6px;">
                                            {% if task.status == 'completed' %}
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            {% elif task.status == 'in_progress' %}
                                            <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            {% else %}
                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                            {% endif %}
                                        </div>
                                        <span class="badge {% if task.status == 'completed' %}bg-success-soft text-success
                                            {% elif task.status == 'in_progress' %}bg-primary-soft text-primary
                                            {% elif task.is_overdue %}bg-danger-soft text-danger
                                            {% else %}bg-warning-soft text-warning{% endif %} px-2 py-1">
                                            {{ task.get_status_display }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <div class="mb-3">
                            <i class="fas fa-tasks fa-3x text-muted"></i>
                        </div>
                        <h5 class="text-muted">No tasks found</h5>
                        <p class="text-muted small">Create a new task to get started</p>
                        <a href="{% url 'tasks:task-create' %}" class="btn btn-sm btn-primary mt-2">
                            <i class="fas fa-plus me-1"></i> Create Task
                        </a>
                    </div>
                    {% endif %}
                </div>
                {% if recent_tasks %}
                <div class="card-footer bg-white border-0 py-3 text-center">
                    <a href="{% url 'tasks:task-list' %}" class="text-primary">View all tasks <i class="fas fa-arrow-right ms-1"></i></a>
                </div>
                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
                </div>
                <div class="card-body">
                    <div class="recent-activity">
                        {% for activity in recent_activities %}
                        <div class="mb-3 pb-3 border-bottom">
                            <div class="d-flex justify-content-between">
                                <div>
                                    {% if activity.type == 'appointment' %}
                                        <i class="fas fa-calendar text-primary me-2"></i>
                                    {% elif activity.type == 'task' %}
                                        <i class="fas fa-tasks text-info me-2"></i>
                                    {% elif activity.type == 'note' %}
                                        <i class="fas fa-sticky-note text-warning me-2"></i>
                                    {% endif %}
                                    <strong>{{ activity.title }}</strong>
                                </div>
                                <small class="text-muted">{{ activity.timestamp|timesince }} ago</small>
                            </div>
                            <p class="mb-1 mt-1">{{ activity.description }}</p>
                            {% if activity.link %}
                            <a href="{{ activity.link }}" class="btn btn-sm btn-outline-primary">View</a>
                            {% endif %}
                        </div>
                        {% empty %}
                        <p class="text-muted">No recent activity</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Admin Navigation -->
    <div class="row mb-4">
        <div class="col-12">
            <ul class="nav nav-pills admin-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#dashboard" data-bs-toggle="tab">
                        <i class="fas fa-tachometer-alt me-2"></i>Dashboard
                    </a>
                </li>
                {% if user.is_superuser %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'admin_dashboard' %}">
                        <i class="fas fa-cog me-2"></i>Admin Dashboard
                    </a>
                </li>
                {% endif %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'users:user_list' %}">
                        <i class="fas fa-users me-2"></i>Users
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'departments:department_list' %}">
                        <i class="fas fa-building me-2"></i>Departments
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'tasks:task-list' %}">
                        <i class="fas fa-tasks me-2"></i>Tasks
                    </a>
                </li>
            </ul>
        </div>
    </div>


</div>

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Update the time ago for activities every minute
        function updateTimeAgo() {
            document.querySelectorAll('.time-ago').forEach(function(element) {
                const timestamp = element.getAttribute('data-timestamp');
                if (timestamp) {
                    const time = moment(timestamp);
                    element.textContent = time.fromNow();
                }
            });
        }

        // Initial update
        updateTimeAgo();
        
        // Update every minute
        setInterval(updateTimeAgo, 60000);

        // Initialize charts if needed
        if (typeof Chart !== 'undefined') {
            // Add chart initialization code here if needed
        }
    });
</script>
{% endblock %}
