{% extends "admin_base.html" %}

{% block content %}
<div x-data="dashboardData()" class="px-4 py-6 sm:px-0">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Dashboard Overview</h1>
        <p class="mt-2 text-sm text-gray-600">Today is {{ today|date:"F j, Y" }} • Last updated just now</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <!-- Blog Stats -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                        <i class="fas fa-newspaper text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Blogs</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ total_blogs }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Published</span>
                                    {{ published_blogs }} published
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Author Stats -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                        <i class="fas fa-users text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Authors</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ total_authors }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Verified</span>
                                    {{ verified_authors }} verified
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- View Stats -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                        <i class="fas fa-eye text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Views</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ total_views }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Today's views</span>
                                    {{ today_views }} today
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Subscriber Stats -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                        <i class="fas fa-envelope text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Subscribers</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ total_subscribers }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Recent</span>
                                    {{ recent_subscribers|length }} new
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Second Row Stats Cards -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <!-- Unique Visitors -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
                        <i class="fas fa-user-shield text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Unique Visitors</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ total_unique_visitors }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Today</span>
                                    {{ today_unique_visitors }} today
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Weekly Views -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                        <i class="fas fa-chart-line text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Weekly Views</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ weekly_views }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Unique</span>
                                    {{ weekly_unique_visitors }} unique
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Views -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-teal-500 rounded-md p-3">
                        <i class="fas fa-chart-bar text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Monthly Views</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ monthly_views }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Unique</span>
                                    {{ monthly_unique_visitors }} unique
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Authors -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-pink-500 rounded-md p-3">
                        <i class="fas fa-user-edit text-white"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Active Authors</dt>
                            <dd class="flex items-baseline">
                                <div class="text-2xl font-semibold text-gray-900">{{ active_authors }}</div>
                                <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <span class="sr-only">Top</span>
                                    {{ top_authors|length }} top
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Blog Status Chart -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Blog Status Distribution</h3>
            <div class="h-64">
                <canvas id="blogStatusChart"></canvas>
            </div>
        </div>

        <!-- Views Trend Chart -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Views Trend (Last 30 Days)</h3>
            <div class="h-64">
                <canvas id="viewsTrendChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Tables Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Recent Blogs -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Blogs</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for blog in recent_blogs %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="text-sm font-medium text-gray-900">{{ blog.title }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ blog.created_at|date:"M d, Y" }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    {% if blog.status == 1 %}bg-green-100 text-green-800
                                    {% elif blog.status == 2 %}bg-blue-100 text-blue-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ blog.get_status_display }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6 text-right">
                <a href="{% url 'mimansha_main:blog_list' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
            </div>
        </div>

                    <!-- Popular Blogs -->
                <div class="bg-white shadow rounded-lg overflow-hidden">
                    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">Popular Blogs</h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <tbody class="bg-white divide-y divide-gray-200">
                                {% for blog in popular_blogs %}
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="text-sm font-medium text-gray-900">{{ blog.title }}</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <!-- Changed from view_count to unique_view_count -->
                                        <div class="text-sm text-gray-500">{{ blog.total_views }} views</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="bg-gray-50 px-4 py-4 sm:px-6 text-right">
                        <a href="{% url 'mimansha_main:blog_list' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
                    </div>
                </div>


    </div>

    <!-- Trending Blogs and Top Authors Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Trending Blogs -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Trending Blogs (Last 7 Days)</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for blog in trending_blogs %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="text-sm font-medium text-gray-900">{{ blog.title }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ blog.recent_views }} views</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6 text-right">
                <a href="{% url 'mimansha_main:blog_list' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
            </div>
        </div>

        <!-- Top Authors -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Top Authors</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for author in top_authors %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                        <span class="text-gray-600">{{ author.name|first|upper }}</span>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ author.get_full_name|default:author.name }}</div>
                                        <div class="text-sm text-gray-500">{{ author.email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ author.blog_count }} blogs</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{% url 'mimansha_main:author_blogs' author.id %}" class="text-indigo-600 hover:text-indigo-900">View</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6 text-right">
                <a href="{% url 'mimansha_main:author_list' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
            </div>
        </div>
    </div>

    <!-- Bottom Row -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Activity Notifications -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Activity</h3>
            </div>
            <div class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
                {% for activity in recent_activities %}
                <div class="px-4 py-4 sm:px-6 border-l-4 
                    {% if activity.type == 'blog' %}border-indigo-400 bg-indigo-50
                    {% elif activity.type == 'comment' %}border-green-400 bg-green-50
                    {% elif activity.type == 'subscriber' %}border-yellow-400 bg-yellow-50
                    {% elif activity.type == 'system' %}border-gray-400 bg-gray-50
                    {% elif activity.type == 'alert' %}border-red-400 bg-red-50{% endif %}">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="
                                {% if activity.type == 'blog' %}fas fa-newspaper text-indigo-500
                                {% elif activity.type == 'comment' %}fas fa-comment text-green-500
                                {% elif activity.type == 'subscriber' %}fas fa-user-plus text-yellow-500
                                {% elif activity.type == 'system' %}fas fa-cog text-gray-500
                                {% elif activity.type == 'alert' %}fas fa-exclamation-triangle text-red-500{% endif %}
                            "></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">{{ activity.title }}</p>
                            <p class="text-sm text-gray-500">{{ activity.description }}</p>
                            <p class="text-xs text-gray-400 mt-1">{{ activity.timestamp|timesince }} ago</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all activity</a>
            </div>
        </div>

        <!-- Recent Subscribers -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Subscribers</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for subscriber in recent_subscribers %}
                <div class="px-4 py-4 sm:px-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                            <span class="text-gray-600">{{ subscriber.name|first|upper }}</span>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-sm font-medium text-gray-900">{{ subscriber.name }}</h4>
                            <p class="text-sm text-gray-500">{{ subscriber.email }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <a href="{% url 'mimansha_main:subscriber_list' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all subscribers</a>
            </div>
        </div>

        <!-- Active Polls -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Active Polls</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for poll in active_polls %}
                <div class="px-4 py-4 sm:px-6">
                    <h4 class="text-sm font-medium text-gray-900">{{ poll.question }}</h4>
                    <div class="mt-2 space-y-2">
                        {% for option in poll.options.all %}
                        <div>
                            <div class="flex justify-between text-xs text-gray-500 mb-1">
                                <span>{{ option.option_text }}</span>
                                <span>{{ option.percentage|floatformat:1 }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: {{ option.percentage }}%"></div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <a href="{% url 'mimansha_main:all_polls' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all polls</a>
            </div>
        </div>
    </div>

    <!-- Additional Information Row -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
        <!-- Pending Tasks -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Pending Tasks</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for task in pending_tasks %}
                <div class="px-4 py-4 sm:px-6">
                    <div class="flex justify-between">
                        <h4 class="text-sm font-medium text-gray-900">{{ task.title }}</h4>
                        <span class="text-xs text-gray-500">Due: {{ task.due_date|date:"M d" }}</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">{{ task.description|truncatechars:50 }}</p>
                </div>
                {% empty %}
                <div class="px-4 py-4 sm:px-6 text-center text-sm text-gray-500">
                    No pending tasks
                </div>
                {% endfor %}
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all tasks</a>
            </div>
        </div>

        <!-- Overdue Tasks -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200 bg-red-50">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Overdue Tasks</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for task in overdue_tasks %}
                <div class="px-4 py-4 sm:px-6 bg-red-50">
                    <div class="flex justify-between">
                        <h4 class="text-sm font-medium text-gray-900">{{ task.title }}</h4>
                        <span class="text-xs text-red-500">Overdue: {{ task.due_date|date:"M d" }}</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">{{ task.description|truncatechars:50 }}</p>
                </div>
                {% empty %}
                <div class="px-4 py-4 sm:px-6 text-center text-sm text-gray-500">
                    No overdue tasks
                </div>
                {% endfor %}
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all tasks</a>
            </div>
        </div>

        <!-- Recent Contacts -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Contacts</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for contact in recent_contacts %}
                <div class="px-4 py-4 sm:px-6">
                    <div class="flex justify-between">
                        <h4 class="text-sm font-medium text-gray-900">{{ contact.name }}</h4>
                        <span class="text-xs text-gray-500">{{ contact.created_at|date:"M d" }}</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">{{ contact.message|truncatechars:50 }}</p>
                </div>
                {% empty %}
                <div class="px-4 py-4 sm:px-6 text-center text-sm text-gray-500">
                    No recent contacts
                </div>
                {% endfor %}
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <a href="{% url 'mimansha_main:contact_message' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all contacts</a>
            </div>
        </div>
    </div>

    <!-- Category Statistics -->
    <div class="bg-white shadow rounded-lg overflow-hidden mt-6">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <h3 class="text-lg font-medium leading-6 text-gray-900">Category Statistics</h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {% for category in categories_with_counts %}
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-medium text-gray-900">{{ category.title }}</h4>
                    <p class="text-sm text-gray-500 mt-1">{{ category.blog_count }} blogs</p>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-indigo-600 h-2 rounded-full" style="width: {% widthratio category.blog_count total_blogs 100 %}%"></div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="bg-gray-50 px-4 py-4 sm:px-6">
            <a href="{% url 'mimansha_main:blog_category_list' %}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all categories</a>
        </div>
    </div>
</div>

<script>
    function dashboardData() {
        return {
            init() {
                // Blog Status Chart
                const blogStatusCtx = document.getElementById('blogStatusChart').getContext('2d');
                const blogStatusChart = new Chart(blogStatusCtx, {
                    type: 'doughnut',
                    data: {
                        labels: [
                            {% for status in blog_status_counts %}
                                '{{ status.get_status_display }}',
                            {% endfor %}
                        ],
                        datasets: [{
                            data: [
                                {% for status in blog_status_counts %}
                                    {{ status.count }},
                                {% endfor %}
                            ],
                            backgroundColor: [
                                '#10B981', // Published - green
                                '#3B82F6', // Draft - blue
                                '#F59E0B', // Archived - yellow
                                '#EF4444', // Rejected - red
                                '#8B5CF6'  // Featured - purple
                            ],
                            hoverOffset: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                            }
                        }
                    }
                });

                // Views Trend Chart (using actual weekly data)
                const viewsTrendCtx = document.getElementById('viewsTrendChart').getContext('2d');
                const viewsTrendChart = new Chart(viewsTrendCtx, {
                    type: 'line',
                    data: {
                        labels: [
                            {% for day in site_analytics_weekly %}
                                '{{ day.date|date:"M d" }}',
                            {% endfor %}
                        ],
                        datasets: [{
                            label: 'Daily Views',
                            data: [
                                {% for day in site_analytics_weekly %}
                                    {{ day.views }},
                                {% endfor %}
                            ],
                            fill: false,
                            borderColor: 'rgb(99, 102, 241)',
                            tension: 0.1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }
    }
</script>
{% endblock %}