{% extends "base.html" %}

{% block title %}{% if task %}Edit Task{% else %}New Task{% endif %} - Vera Medical CMS{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">
        {% if task %}Edit Task{% else %}Add Task{% endif %}
    </h1>
    <p class="text-gray-600">Create or update a follow-up task</p>
</div>

<form method="POST" action="{% if task %}{{ url_for('task_edit', task_id=task.id) }}{% else %}{{ url_for('task_new') }}{% endif %}" class="bg-white rounded-lg shadow-md p-6">
    
    <!-- Task Information -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Task Information</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Task Title *
                </label>
                <input type="text" name="task_title" value="{{ task.task_title if task else '' }}" 
                       required
                       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 class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Description
                </label>
                <textarea name="task_description" rows="3"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ task.task_description if task else '' }}</textarea>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Due Date
                </label>
                <input type="date" name="due_date" value="{{ task.due_date if task and task.due_date else '' }}"
                       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">
                    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="low" {% if task and task.priority == 'low' %}selected{% endif %}>Low</option>
                    <option value="medium" {% if not task or task.priority == 'medium' %}selected{% endif %}>Medium</option>
                    <option value="high" {% if task and task.priority == 'high' %}selected{% endif %}>High</option>
                </select>
            </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="pending" {% if not task or task.status == 'pending' %}selected{% endif %}>Pending</option>
                    <option value="in_progress" {% if task and task.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                    <option value="completed" {% if task and task.status == 'completed' %}selected{% endif %}>Completed</option>
                    <option value="cancelled" {% if task and task.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Assigned To
                </label>
                <input type="text" name="assigned_to" value="{{ task.assigned_to if task else '' }}"
                       placeholder="Username or name"
                       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>
    </div>
    
    <!-- Link to Case/Appointment/Invoice -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Link to Record</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Case
                </label>
                <!-- Hidden input for case_id -->
                <input type="hidden" name="case_id" id="case_id" value="{% if task and task.case_id %}{{ task.case_id }}{% elif prefill.case_id %}{{ prefill.case_id }}{% endif %}">
                
                <!-- Search input -->
                <div class="relative">
                    <input type="text" 
                           id="case_search" 
                           placeholder="Type case ID, case number, or claimant name..." 
                           autocomplete="off"
                           value="{% if task and case_data %}Case #{{ case_data.file_case_id }} - {{ case_data.claimant_first_name }} {{ case_data.claimant_last_name }}{% elif prefill and prefill.case_file_id %}Case #{{ prefill.case_file_id }}{% endif %}"
                           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 id="case_search_results" 
                         class="hidden absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto">
                    </div>
                </div>
                
                <!-- Selected Case Display -->
                <div id="selected_case_display" 
                     class="mt-3 {% if (not task or not task.case_id) and (not prefill or not prefill.case_id) %}hidden{% endif %} bg-green-50 border-l-4 border-green-500 p-4 rounded">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="text-sm font-medium text-green-800">Selected Case</h3>
                            <div class="mt-2 text-sm text-green-700" id="selected_case_details">
                                {% if task and case_data %}
                                <p class="font-semibold">Case #{{ case_data.file_case_id }}</p>
                                <p>Claimant: {{ case_data.claimant_first_name }} {{ case_data.claimant_last_name }}</p>
                                {% if case_data.client_company_name %}
                                <p>Client: {{ case_data.client_company_name }}</p>
                                {% endif %}
                                {% elif prefill and case_data %}
                                <p class="font-semibold">Case #{{ case_data.file_case_id }}</p>
                                <p>Claimant: {{ case_data.claimant_first_name }} {{ case_data.claimant_last_name }}</p>
                                {% if case_data.client_company_name %}
                                <p>Client: {{ case_data.client_company_name }}</p>
                                {% endif %}
                                {% endif %}
                            </div>
                            <button type="button" 
                                    onclick="clearCaseSelection()" 
                                    class="mt-2 text-xs text-green-600 hover:text-green-800 underline">
                                Change case
                            </button>
                        </div>
                    </div>
                </div>
                
                <p class="text-xs text-gray-500 mt-1">
                    <i class="fas fa-info-circle mr-1"></i>Search by case ID, case number, or claimant name
                </p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Appointment
                </label>
                <select name="appointment_id" 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="">Select Appointment...</option>
                    {% for appointment in appointments %}
                    <option value="{{ appointment.id }}"
                            {% if (task and task.appointment_id == appointment.id) or (prefill.appointment_id == appointment.id) %}selected{% endif %}>
                        {{ appointment.appointment_date }} (Case: {{ appointment.case_id }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Invoice
                </label>
                <select name="invoice_id" 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="">Select Invoice...</option>
                    {% for invoice in invoices %}
                    <option value="{{ invoice.id }}"
                            {% if (task and task.invoice_id == invoice.id) or (prefill.invoice_id == invoice.id) %}selected{% endif %}>
                        {{ invoice.invoice_number }}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
    
    <!-- Notes -->
    <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">
            Notes
        </label>
        <textarea name="notes" rows="4"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ task.notes if task else '' }}</textarea>
    </div>
    
    <!-- Form Actions -->
    <div class="flex justify-between items-center pt-4 border-t border-gray-200">
        <a href="{% if task %}{{ url_for('task_view', task_id=task.id) }}{% else %}{{ url_for('tasks_list') }}{% endif %}" 
           class="text-gray-600 hover:text-gray-800 font-semibold">
            <i class="fas fa-arrow-left mr-2"></i>Cancel
        </a>
        <div class="space-x-3">
            {% if task and task.status != 'completed' %}
            <button type="submit" name="action" value="complete" 
                    class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-check mr-2"></i>Mark Complete
            </button>
            {% endif %}
            <button type="submit" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-save mr-2"></i>{% if task %}Update Task{% else %}Create Task{% endif %}
            </button>
        </div>
    </div>
</form>

<script>
// Case Search Autocomplete
const caseSearchInput = document.getElementById('case_search');
const caseSearchResults = document.getElementById('case_search_results');
const caseIdInput = document.getElementById('case_id');
const selectedCaseDisplay = document.getElementById('selected_case_display');
const selectedCaseDetails = document.getElementById('selected_case_details');
let caseSearchTimeout;

// Search for cases as user types
if (caseSearchInput) {
    caseSearchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        // Clear previous timeout
        if (caseSearchTimeout) {
            clearTimeout(caseSearchTimeout);
        }
        
        // Hide results if query is too short
        if (query.length < 2) {
            caseSearchResults.classList.add('hidden');
            return;
        }
        
        // Debounce search
        caseSearchTimeout = setTimeout(() => {
            searchCases(query);
        }, 300);
    });
}

// Close results when clicking outside
document.addEventListener('click', function(event) {
    if (caseSearchResults && !event.target.closest('#case_search') && !event.target.closest('#case_search_results')) {
        caseSearchResults.classList.add('hidden');
    }
});

// Search cases via API
function searchCases(query) {
    fetch(`/api/search/cases?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(cases => {
            displayCaseResults(cases);
        })
        .catch(error => {
            console.error('Error searching cases:', error);
            caseSearchResults.innerHTML = '<div class="p-4 text-red-600 text-sm">Error searching cases</div>';
            caseSearchResults.classList.remove('hidden');
        });
}

// Display search results
function displayCaseResults(cases) {
    if (cases.length === 0) {
        caseSearchResults.innerHTML = `
            <div class="p-4 text-gray-500 text-sm text-center">
                <i class="fas fa-search mr-2"></i>No cases found
            </div>
        `;
        caseSearchResults.classList.remove('hidden');
        return;
    }
    
    let html = '<div class="divide-y divide-gray-200">';
    
    cases.forEach(caseItem => {
        const dobDisplay = caseItem.claimant_dob ? ` (DOB: ${caseItem.claimant_dob})` : '';
        const clientDisplay = caseItem.client_company ? `<div class="text-xs text-gray-500 mt-1">Client: ${caseItem.client_company}</div>` : '';
        const dateOpened = caseItem.date_opened ? `<div class="text-xs text-gray-400 mt-1">Opened: ${caseItem.date_opened}</div>` : '';
        
        html += `
            <div class="p-3 hover:bg-blue-50 cursor-pointer transition case-result-item"
                 onclick="selectCase(${caseItem.id}, '${escapeHtml(caseItem.file_case_id)}', '${escapeHtml(caseItem.claimant_name)}', '${escapeHtml(caseItem.client_company || '')}', '${escapeHtml(caseItem.claimant_dob || '')}')">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <span class="font-semibold text-blue-600">Case #${escapeHtml(caseItem.file_case_id)}</span>
                            ${caseItem.client_file_number ? `<span class="ml-2 text-xs text-gray-500">(${escapeHtml(caseItem.client_file_number)})</span>` : ''}
                        </div>
                        <div class="text-sm text-gray-700 mt-1">
                            <i class="fas fa-user mr-1"></i>${escapeHtml(caseItem.claimant_name)}${dobDisplay}
                        </div>
                        ${clientDisplay}
                        ${dateOpened}
                    </div>
                    <div class="ml-2">
                        <i class="fas fa-arrow-right text-blue-400"></i>
                    </div>
                </div>
            </div>
        `;
    });
    
    html += '</div>';
    
    caseSearchResults.innerHTML = html;
    caseSearchResults.classList.remove('hidden');
}

// Select a case from results
function selectCase(id, caseNumber, claimantName, clientCompany, claimantDob) {
    // Set hidden input
    caseIdInput.value = id;
    
    // Update search input
    caseSearchInput.value = `Case #${caseNumber} - ${claimantName}`;
    
    // Hide results
    caseSearchResults.classList.add('hidden');
    
    // Show selected case display with verification details
    const dobDisplay = claimantDob ? `<p>Date of Birth: ${claimantDob}</p>` : '';
    const clientDisplay = clientCompany ? `<p>Client: ${clientCompany}</p>` : '';
    
    selectedCaseDetails.innerHTML = `
        <p class="font-semibold text-lg">Case #${escapeHtml(caseNumber)}</p>
        <p class="mt-1"><i class="fas fa-user mr-2"></i>Claimant: ${escapeHtml(claimantName)}</p>
        ${dobDisplay}
        ${clientDisplay}
        <p class="mt-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded inline-block">
            <i class="fas fa-check mr-1"></i>Verified and linked
        </p>
    `;
    
    selectedCaseDisplay.classList.remove('hidden');
    
    // Load appointments and invoices for this case (don't preserve selection when changing case)
    loadCaseAppointments(id, false);
    loadCaseInvoices(id, false);
}

// Load appointments for selected case
function loadCaseAppointments(caseId, preserveSelection = false) {
    const appointmentSelect = document.querySelector('select[name="appointment_id"]');
    if (!appointmentSelect) return;
    
    // Store current selection if we need to preserve it
    const currentValue = preserveSelection ? appointmentSelect.value : null;
    
    // Clear existing options except the first one
    appointmentSelect.innerHTML = '<option value="">Select Appointment...</option>';
    
    fetch(`/api/cases/${caseId}/appointments`)
        .then(response => response.json())
        .then(appointments => {
            appointments.forEach(apt => {
                const option = document.createElement('option');
                option.value = apt.id;
                option.textContent = apt.display;
                appointmentSelect.appendChild(option);
            });
            
            // Restore previous selection if it exists in the new list
            if (currentValue && appointments.some(apt => apt.id == currentValue)) {
                appointmentSelect.value = currentValue;
            }
        })
        .catch(error => {
            console.error('Error loading appointments:', error);
        });
}

// Load invoices for selected case
function loadCaseInvoices(caseId, preserveSelection = false) {
    const invoiceSelect = document.querySelector('select[name="invoice_id"]');
    if (!invoiceSelect) return;
    
    // Store current selection if we need to preserve it
    const currentValue = preserveSelection ? invoiceSelect.value : null;
    
    // Clear existing options except the first one
    invoiceSelect.innerHTML = '<option value="">Select Invoice...</option>';
    
    fetch(`/api/cases/${caseId}/invoices`)
        .then(response => response.json())
        .then(invoices => {
            invoices.forEach(inv => {
                const option = document.createElement('option');
                option.value = inv.id;
                option.textContent = inv.display;
                invoiceSelect.appendChild(option);
            });
            
            // Restore previous selection if it exists in the new list
            if (currentValue && invoices.some(inv => inv.id == currentValue)) {
                invoiceSelect.value = currentValue;
            }
        })
        .catch(error => {
            console.error('Error loading invoices:', error);
        });
}

// Clear case selection
function clearCaseSelection() {
    caseIdInput.value = '';
    caseSearchInput.value = '';
    caseSearchInput.focus();
    selectedCaseDisplay.classList.add('hidden');
    caseSearchResults.classList.add('hidden');
    
    // Clear appointment and invoice dropdowns
    const appointmentSelect = document.querySelector('select[name="appointment_id"]');
    const invoiceSelect = document.querySelector('select[name="invoice_id"]');
    if (appointmentSelect) {
        appointmentSelect.innerHTML = '<option value="">Select Appointment...</option>';
    }
    if (invoiceSelect) {
        invoiceSelect.innerHTML = '<option value="">Select Invoice...</option>';
    }
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Validate form submission
document.querySelector('form').addEventListener('submit', function(event) {
    // Case selection is optional, so we don't require it
    // But if they typed something in the search field, make sure they selected a case
    if (caseSearchInput && caseSearchInput.value.trim() && !caseIdInput.value) {
        event.preventDefault();
        alert('Please select a case from the search results, or clear the search field');
        caseSearchInput.focus();
        caseSearchInput.classList.add('border-red-500');
        setTimeout(() => {
            caseSearchInput.classList.remove('border-red-500');
        }, 3000);
        return false;
    }
});

// On page load, if a case is already selected (editing task or prefill), load appointments and invoices
window.addEventListener('DOMContentLoaded', function() {
    if (caseIdInput && caseIdInput.value) {
        const caseId = parseInt(caseIdInput.value);
        if (caseId) {
            // Store current selections before loading
            const appointmentSelect = document.querySelector('select[name="appointment_id"]');
            const invoiceSelect = document.querySelector('select[name="invoice_id"]');
            
            const selectedAppointmentId = appointmentSelect ? appointmentSelect.value : null;
            const selectedInvoiceId = invoiceSelect ? invoiceSelect.value : null;
            
            // Show selected case display if it's hidden
            if (selectedCaseDisplay) {
                selectedCaseDisplay.classList.remove('hidden');
            }
            
            // Load appointments and invoices (preserve current selections)
            loadCaseAppointments(caseId, true);
            loadCaseInvoices(caseId, true);
        }
    }
});
</script>
{% endblock %}