{% extends 'admin_base.html' %}
{% load custom_filters %}
{% block content %}
<style>
.timeline-entry:not(:last-child)::after {
        content: '';
        position: absolute;
        left: -2px;
        top: 16px;
        bottom: 0;
        width: 2px;
        background: #bfdbfe;
    }

    @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}
</style>
<div class="container mx-auto px-4 py-8 font-sans">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-light text-gray-800">Task Management</h1>
            <p class="text-gray-500 mt-1">Monitor and manage all tasks in one place</p>
        </div>
        {% if request.user.is_superuser %}
        <a href="{% url 'mimansha_main:create_update_task' %}" class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
            Create Task
        </a>
        {% endif %}
    </div>

    {% if request.user.is_superuser %}
    <!-- Progress Dashboard -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-blue-600">Not Started</p>
                    <h3 class="text-2xl font-light text-gray-800 mt-1">{{ status_counts.not_started|default:0 }}</h3>
                </div>
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-amber-50 to-yellow-50 p-6 rounded-xl border border-amber-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-amber-600">In Progress</p>
                    <h3 class="text-2xl font-light text-gray-800 mt-1">{{ status_counts.in_progress|default:0 }}</h3>
                </div>
                <div class="bg-amber-100 p-3 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl border border-green-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-green-600">Completed</p>
                    <h3 class="text-2xl font-light text-gray-800 mt-1">{{ status_counts.completed|default:0 }}</h3>
                </div>
                <div class="bg-green-100 p-3 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-gray-50 to-blue-gray-50 p-6 rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Cancelled</p>
                    <h3 class="text-2xl font-light text-gray-800 mt-1">{{ status_counts.cancelled|default:0 }}</h3>
                </div>
                <div class="bg-gray-100 p-3 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Filters Card -->
    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-8">
        <h2 class="text-lg font-light text-gray-700 mb-4 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
            </svg>
            Filter Tasks
        </h2>
        <form method="get" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" id="status" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition-all">
                    <option value="">All Statuses</option>
                    {% for value, label in status_choices %}
                        <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
                <select name="priority" id="priority" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition-all">
                    <option value="">All Priorities</option>
                    {% for value, label in priority_choices %}
                        <option value="{{ value }}" {% if priority_filter == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    Apply Filters
                </button>
            </div>
        </form>
    </div>

    <!-- Task List -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <h2 class="text-lg font-light text-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
                </svg>
                Task List
            </h2>
            <p class="text-sm text-gray-500">{{ page_obj.paginator.count }} tasks found</p>
        </div>
        
        <ul class="divide-y divide-gray-100">
            {% for task in page_obj %}
            <li class="px-6 py-5 hover:bg-gray-50 transition-colors duration-150">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0 pt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ task.priority_class }}">
                                {{ task.get_priority_display }}
                            </span>
                        </div>
                        <div class="min-w-0 flex-1">
                            {% if request.user.is_superuser %}
                            <a href="{% url 'mimansha_main:create_update_task' task.pk %}" class="text-lg font-normal text-gray-900 hover:text-indigo-600 hover:underline focus:outline-none">
                                {{ task.title }}
                            </a>
                            {% else %}
                            <p class="text-lg font-normal text-gray-900">{{ task.title }}</p>
                            {% endif %}
                            <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:space-x-6">
                                <div class="flex items-center text-sm text-gray-500">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    Due: {{ task.due_date|date:"M j, Y" }}
                                    {% if task.is_overdue %}<span class="ml-1 text-red-500">(Overdue)</span>{% endif %}
                                </div>
                                {% if request.user.is_superuser and task.assigned_to %}
                                <div class="flex items-center text-sm text-gray-500 mt-1 sm:mt-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                    {{ task.assigned_to.get_full_name|default:task.assigned_to.username }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 md:mt-0 flex items-center space-x-4">
                        <span class="px-3 py-1 rounded-full text-xs font-medium {% if task.status == 'completed' %}bg-green-100 text-green-800{% elif task.status == 'cancelled' %}bg-gray-100 text-gray-800{% else %}bg-amber-100 text-amber-800{% endif %}">
                            {{ task.get_status_display }}
                        </span>
                        
                        {% if not request.user.is_superuser %}
                            {% if task.status != 'completed' and task.status != 'cancelled' %}
                            <button onclick="openStatusModal('{{ task.id }}')" class="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-lg hover:bg-blue-100 transition-colors flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                </svg>
                                Update
                            </button>
                            {% endif %}
                        {% endif %}
                        
                        {% if request.user.is_superuser and task.response_from_team %}
                        <span class="text-gray-600 hover:text-indigo-600 cursor-pointer relative group" title="View team response">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                            </svg>
                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
                                View Response
                            </span>
                        </span>
                        {% endif %}
                    </div>
                </div>
                
                {% load custom_filters %}

                {% if request.user.is_superuser and task.response_from_team %}
                <div class="mt-3 pl-14 pr-4">
                    <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                        <p class="text-sm font-medium text-blue-800 mb-3">Progress Timeline</p>
                        
                        <div class="space-y-4">
                            {% for response in task.response_from_team|split:'|||' %}
                                {% if response.strip %}
                                <div class="relative pl-6 pb-4 border-l-2 border-blue-200 group last:border-l-0 last:pb-0">
                                    <!-- Timeline dot -->
                                    <div class="absolute w-3 h-3 bg-blue-400 rounded-full -left-[7px] top-1 border-2 border-white group-hover:bg-blue-600 transition-colors"></div>
                                    
                                    <!-- Response content -->
                                    <div class="text-sm">
                                        {% with parts=response|split:"] " %}
                                        <div class="flex items-baseline">
                                            <span class="text-xs font-mono text-blue-600 mr-2">{{ parts.0 }}]</span>
                                            <span class="font-medium text-gray-700">{{ parts.1|split:": "|first }}</span>
                                        </div>
            
                                        {% endwith %}
                                    </div>
                                </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}

            </li>
            {% empty %}
            <li class="px-6 py-8 text-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                <h3 class="mt-2 text-lg font-medium text-gray-900">No tasks found</h3>
                <p class="mt-1 text-gray-500">Try adjusting your filters or create a new task</p>
                {% if request.user.is_superuser %}
                <div class="mt-6">
                    <a href="{% url 'mimansha_main:create_update_task' %}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        New Task
                    </a>
                </div>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
    <div class="mt-8 flex items-center justify-between">
        <div class="text-sm text-gray-500">
            Showing <span class="font-medium">{{ page_obj.start_index }}</span> to <span class="font-medium">{{ page_obj.end_index }}</span> of <span class="font-medium">{{ page_obj.paginator.count }}</span> tasks
        </div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if priority_filter %}&priority={{ priority_filter }}{% endif %}" class="relative inline-flex items-center px-3 py-2 rounded-l-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
                    <span class="sr-only">Previous</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </a>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a href="?page={{ num }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if priority_filter %}&priority={{ priority_filter }}{% endif %}" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors">
                        {{ num }}
                    </a>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if priority_filter %}&priority={{ priority_filter }}{% endif %}" class="relative inline-flex items-center px-3 py-2 rounded-r-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
                    <span class="sr-only">Next</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                </a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>

<!-- Status Update Modal (for regular users) -->
{% if not request.user.is_superuser %}
<div id="statusModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-40 backdrop-blur-sm transition-opacity duration-300 ease-in-out">
    <div class="fixed inset-0 overflow-y-auto">
        <div class="flex items-center justify-center min-h-full p-6 sm:p-8">
            <div class="relative w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white shadow-2xl transition-all sm:w-full animate-fadeIn">
                <div class="px-6 py-8 sm:px-8 sm:py-10">
                    <!-- Header -->
                    <div class="flex items-start justify-between mb-6">
                        <div>
                            <h3 class="text-2xl font-semibold text-gray-900">Update Task Status</h3>
                            <p class="mt-1 text-sm text-gray-500">Provide a quick progress update or note blockers</p>
                        </div>
                        <button type="button" onclick="closeStatusModal()" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-full p-1">
                            <span class="sr-only">Close</span>
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <!-- Form -->
                    <form id="statusForm" method="post" class="space-y-6">
                        {% csrf_token %}
                        <input type="hidden" name="task_id" id="modalTaskId">

                        <!-- Status Select -->
                        <div>
                            <label for="status_update" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <select name="status_update" id="status_update" class="w-full rounded-lg border border-gray-300 py-2 px-3 text-sm shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 transition">
                                {% for value, label in status_choices %}
                                    {% if value != 'completed' and value != 'cancelled' %}
                                        <option value="{{ value }}">{{ label }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Progress Report -->
                        <div>
                            <label for="response_text" class="block text-sm font-medium text-gray-700 mb-2">Progress Report</label>
                            <textarea name="response_text" id="response_text" rows="4" placeholder="e.g., Completed 80% of assigned tasks, blocked on API response issue..."
                                class="w-full rounded-lg border border-gray-300 py-2 px-3 text-sm shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 transition resize-none"></textarea>
                            <p class="mt-2 text-xs text-gray-500">Briefly describe your progress or any blockers</p>
                        </div>

                        <!-- Buttons -->
                        <div class="flex justify-end gap-3 pt-4">
                            <button type="button" onclick="closeStatusModal()" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                Cancel
                            </button>
                            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-md hover:bg-indigo-700 transition focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                Submit Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    function openStatusModal(taskId) {
        document.getElementById('modalTaskId').value = taskId;
        document.getElementById('statusModal').classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }
    
    function closeStatusModal() {
        document.getElementById('statusModal').classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }
    
    document.getElementById('statusForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const submitButton = this.querySelector('button[type="submit"]');
        const originalButtonText = submitButton.innerHTML;
        
        // Show loading state
        submitButton.disabled = true;
        submitButton.innerHTML = `
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Processing...
        `;
        
        fetch("{% url 'mimansha_main:update_task_status' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': formData.get('csrfmiddlewaretoken'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                closeStatusModal();
                // Show success notification
                showNotification('Status updated successfully', 'success');
                // Reload after a short delay
                setTimeout(() => window.location.reload(), 1000);
            } else {
                showNotification(data.error || 'Error updating status', 'error');
                submitButton.disabled = false;
                submitButton.innerHTML = originalButtonText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('An error occurred while updating the status', 'error');
            submitButton.disabled = false;
            submitButton.innerHTML = originalButtonText;
        });
    });
    
    function showNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg text-white font-medium flex items-center ${
            type === 'success' ? 'bg-green-500' : 'bg-red-500'
        }`;
        notification.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
            </svg>
            ${message}
        `;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
</script>
{% endif %}

{% if request.user.is_superuser %}
<!-- Chart.js for progress graph -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('taskProgressChart').getContext('2d');
        const taskProgressChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Not Started', 'In Progress', 'Completed', 'Cancelled'],
                datasets: [{
                    data: [
                        {{ status_counts.not_started|default:0 }},
                        {{ status_counts.in_progress|default:0 }},
                        {{ status_counts.completed|default:0 }},
                        {{ status_counts.cancelled|default:0 }}
                    ],
                    backgroundColor: [
                        'rgba(99, 102, 241, 0.7)',
                        'rgba(245, 158, 11, 0.7)',
                        'rgba(16, 185, 129, 0.7)',
                        'rgba(156, 163, 175, 0.7)'
                    ],
                    borderColor: [
                        'rgba(99, 102, 241, 1)',
                        'rgba(245, 158, 11, 1)',
                        'rgba(16, 185, 129, 1)',
                        'rgba(156, 163, 175, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '70%',
            }
        });
    });
</script>
{% endif %}
{% endblock %}