{% extends "base.html" %}

{% block title %}Task Manager - Vera Medical CMS{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Task Manager</h1>
        <p class="text-gray-600">Manage follow-up tasks and reminders</p>
    </div>
    <a href="{{ url_for('task_new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition shadow-md hover:shadow-lg">
        <i class="fas fa-plus mr-2"></i>New Task
    </a>
</div>

<!-- Alerts for Pending and Overdue Tasks -->
{% if pending_count > 0 or overdue_count > 0 %}
<div class="mb-6 space-y-3">
    {% if overdue_count > 0 %}
    <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded">
        <div class="flex justify-between items-center">
            <div>
                <h3 class="text-sm font-medium text-red-800">
                    <i class="fas fa-exclamation-triangle mr-2"></i>{{ overdue_count }} Overdue Task(s)
                </h3>
                <p class="text-sm text-red-700 mt-1">Some tasks are past their due date and require attention.</p>
            </div>
            <a href="{{ url_for('tasks_list', status='pending') }}" 
               class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold">
                View Tasks
            </a>
        </div>
    </div>
    {% endif %}
    {% if pending_count > 0 %}
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
        <div class="flex justify-between items-center">
            <div>
                <h3 class="text-sm font-medium text-yellow-800">
                    <i class="fas fa-clock mr-2"></i>{{ pending_count }} Pending Task(s)
                </h3>
                <p class="text-sm text-yellow-700 mt-1">Tasks waiting to be completed.</p>
            </div>
            <a href="{{ url_for('tasks_list', status='pending') }}" 
               class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-semibold">
                View Pending
            </a>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Search and Filters -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <form method="GET" action="{{ url_for('tasks_list') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
            <input type="text" name="search" value="{{ search }}" 
                   placeholder="Search tasks..." 
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
            <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="">All Statuses</option>
                <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
                <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>In Progress</option>
                <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>Completed</option>
                <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Priority</label>
            <select name="priority" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="">All Priorities</option>
                <option value="high" {% if priority_filter == 'high' %}selected{% endif %}>High</option>
                <option value="medium" {% if priority_filter == 'medium' %}selected{% endif %}>Medium</option>
                <option value="low" {% if priority_filter == 'low' %}selected{% endif %}>Low</option>
            </select>
        </div>
        <div class="flex items-end">
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-search mr-2"></i>Filter
            </button>
        </div>
    </form>
</div>

<!-- Tasks Table -->
{% if tasks %}
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Task</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Linked To</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Priority</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Assigned To</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for task in tasks %}
                <tr class="hover:bg-gray-50 {% if task.due_date and task.status == 'pending' %}{% set task_date = task.due_date|string %}{% set today_str = today|string %}{% if task_date < today_str %}bg-red-50{% endif %}{% endif %}">
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">{{ task.task_title }}</div>
                        {% if task.task_description %}
                        <div class="text-xs text-gray-500 mt-1">{{ task.task_description[:100] }}{% if task.task_description|length > 100 %}...{% endif %}</div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {% if task.file_case_id %}
                        <a href="{{ url_for('case_view', case_id=task.case_id) }}" class="text-blue-600 hover:text-blue-900">
                            Case: {{ task.file_case_id }}
                        </a>
                        {% endif %}
                        {% if task.appointment_date %}
                        <div class="text-xs text-gray-500">Appt: {{ task.appointment_date }}</div>
                        {% endif %}
                        {% if task.invoice_number %}
                        <div class="text-xs text-gray-500">Invoice: {{ task.invoice_number }}</div>
                        {% endif %}
                        {% if not task.file_case_id and not task.appointment_date and not task.invoice_number %}
                        <span class="text-gray-400">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {% if task.due_date %}
                            {% set task_date_str = task.due_date|string %}
                            {% set today_str = today|string %}
                            {% if task_date_str < today_str and task.status == 'pending' %}
                            <span class="text-red-600 font-semibold">{{ task.due_date }} (Overdue)</span>
                            {% else %}
                            {{ task.due_date }}
                            {% endif %}
                        {% else %}
                        <span class="text-gray-400">No due date</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if task.priority == 'high' %}bg-red-100 text-red-800
                            {% elif task.priority == 'medium' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ task.priority|title }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if task.status == 'completed' %}bg-green-100 text-green-800
                            {% elif task.status == 'in_progress' %}bg-blue-100 text-blue-800
                            {% elif task.status == 'cancelled' %}bg-gray-100 text-gray-800
                            {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                            {{ task.status|replace('_', ' ')|title }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ task.assigned_to or '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('task_view', task_id=task.id) }}" 
                           class="text-blue-600 hover:text-blue-900 mr-3">
                            <i class="fas fa-eye mr-1"></i>View
                        </a>
                        <a href="{{ url_for('task_edit', task_id=task.id) }}" 
                           class="text-green-600 hover:text-green-900 mr-3">
                            <i class="fas fa-edit mr-1"></i>Edit
                        </a>
                        <form action="{{ url_for('task_delete', task_id=task.id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this task? This cannot be undone.');" class="inline">
                            <button type="submit" class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash mr-1"></i>Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-12 text-center">
    <i class="fas fa-tasks text-gray-300 text-6xl mb-4"></i>
    <h3 class="text-xl font-semibold text-gray-700 mb-2">No Tasks Found</h3>
    <p class="text-gray-500 mb-6">Get started by creating your first task.</p>
    <a href="{{ url_for('task_new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition inline-block">
        <i class="fas fa-plus mr-2"></i>Create Task
    </a>
</div>
{% endif %}
{% endblock %}