{% extends "base.html" %}

{% block title %}Task Details - 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 Details</h1>
        <p class="text-gray-600">View and manage Bring Forward task</p>
    </div>
    <div class="space-x-3">
        <a href="{{ url_for('task_edit', task_id=task.id) }}" 
           class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-edit mr-2"></i>Edit
        </a>
        <a href="{{ url_for('tasks_list') }}" 
           class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-arrow-left mr-2"></i>Back to Tasks
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Task Information -->
    <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Task Information</h2>
        
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Task Title</label>
                <p class="text-lg font-semibold text-gray-900">{{ task.task_title }}</p>
            </div>
            
            {% if task.task_description %}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <p class="text-gray-900 whitespace-pre-wrap">{{ task.task_description }}</p>
            </div>
            {% endif %}
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
                    <p class="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 %}
                    </p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
                    <span class="px-3 py-1 inline-flex text-sm 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>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <span class="px-3 py-1 inline-flex text-sm 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>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Assigned To</label>
                    <p class="text-gray-900">{{ task.assigned_to or '-' }}</p>
                </div>
            </div>
            
            {% if task.notes %}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                <p class="text-gray-900 whitespace-pre-wrap">{{ task.notes }}</p>
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Linked Records -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Linked Records</h2>
        
        <div class="space-y-4">
            {% if task.file_case_id %}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Case</label>
                <a href="{{ url_for('case_view', case_id=task.case_id) }}" 
                   class="text-blue-600 hover:text-blue-900 font-semibold">
                    {{ task.file_case_id }}
                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                </a>
            </div>
            {% endif %}
            
            {% if task.appointment_date %}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Appointment</label>
                <a href="{{ url_for('appointment_view', appointment_id=task.appointment_id) }}" 
                   class="text-blue-600 hover:text-blue-900 font-semibold">
                    {{ task.appointment_date }}
                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                </a>
            </div>
            {% endif %}
            
            {% if task.invoice_number %}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Invoice</label>
                <a href="{{ url_for('invoice_view', invoice_id=task.invoice_id) }}" 
                   class="text-blue-600 hover:text-blue-900 font-semibold">
                    {{ task.invoice_number }}
                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                </a>
            </div>
            {% endif %}
            
            {% if not task.file_case_id and not task.appointment_date and not task.invoice_number %}
            <p class="text-gray-400 text-sm">No linked records</p>
            {% endif %}
        </div>
        
        <div class="mt-6 pt-6 border-t border-gray-200">
            <h3 class="text-sm font-medium text-gray-700 mb-2">Task Metadata</h3>
            <div class="space-y-2 text-sm text-gray-600">
                <div>
                    <span class="font-medium">Created:</span> 
                    {{ task.created_at or 'N/A' }}
                </div>
                <div>
                    <span class="font-medium">Created By:</span> 
                    {{ task.created_by or 'System' }}
                </div>
                {% if task.completed_at %}
                <div>
                    <span class="font-medium">Completed:</span> 
                    {{ task.completed_at }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Delete Task -->
{% if task.status != 'completed' %}
<div class="mt-6 bg-white rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-4 text-red-600">Danger Zone</h2>
    <form method="POST" action="{{ url_for('task_delete', task_id=task.id) }}" 
          onsubmit="return confirm('Are you sure you want to delete this task? This action cannot be undone.');">
        <button type="submit" 
                class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-trash mr-2"></i>Delete Task
        </button>
    </form>
</div>
{% endif %}
{% endblock %}