{% extends "base.html" %}

{% block title %}Appointment Details - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Appointment Details</h1>
            <p class="text-gray-600">Case #{{ appointment['file_case_id'] or 'N/A' }}</p>
        </div>
        <div class="space-x-2">
            <a href="{{ url_for('appointment_print', appointment_id=appointment['id']) }}" 
               target="_blank"
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-print mr-2"></i>Print
            </a>
            <a href="{{ url_for('appointment_edit', appointment_id=appointment['id']) }}" 
               class="bg-yellow-600 hover:bg-yellow-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('appointments_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 List
            </a>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Appointment Information -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Date & Time Card -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-calendar-alt mr-2"></i>Date & Time
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Appointment Date</p>
                        <p class="font-semibold text-gray-800 text-lg">{{ appointment['appointment_date']|format_date }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Time</p>
                        <p class="font-semibold text-gray-800 text-lg">{{ appointment['appointment_time'] or 'Not set' }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Case & Claimant Information -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-user mr-2"></i>Case & Claimant
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Case ID</p>
                        <p class="font-semibold text-gray-800">
                            <a href="{{ url_for('case_view', case_id=appointment['case_id']) }}" 
                               class="text-blue-600 hover:text-blue-800">
                                Case #{{ appointment['file_case_id'] }}
                            </a>
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Claimant Name</p>
                        <p class="font-semibold text-gray-800">
                            {{ appointment['claimant_first_name'] }} {{ appointment['claimant_last_name'] }}
                        </p>
                    </div>
                    {% if appointment['client_company_name'] %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Client</p>
                        <p class="font-semibold text-gray-800">{{ appointment['client_company_name'] }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Doctor & Location -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-user-md mr-2"></i>Doctor & Location
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Doctor/Specialist</p>
                        <p class="font-semibold text-gray-800">{{ appointment['doctor_name'] or 'Not assigned' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Specialist Number</p>
                        <p class="font-semibold text-gray-800">{{ appointment['specialist_number'] or 'N/A' }}</p>
                    </div>
                    {% if appointment['location'] %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Location</p>
                        <p class="text-gray-800"><i class="fas fa-map-marker-alt mr-2 text-red-500"></i>{{ appointment['location'] }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Assessment Details -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-file-medical mr-2"></i>Assessment Details
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Service Code</p>
                        <p class="font-semibold text-gray-800">
                            <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded font-mono text-sm">
                                {{ appointment['service_code'] or 'N/A' }}
                            </span>
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Assessment Type</p>
                        <p class="font-semibold text-gray-800">{{ appointment['assessment_type'] or 'N/A' }}</p>
                    </div>
                    {% if appointment['description'] %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600 mb-2">Description</p>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-gray-800 whitespace-pre-wrap">{{ appointment['description'] }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Status & Dates -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-tasks mr-2"></i>Status & Important Dates
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600 mb-2">Status</p>
                        {% if appointment['status'] == 'scheduled' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">
                            <i class="fas fa-clock mr-1"></i>Scheduled
                        </span>
                        {% elif appointment['status'] == 'completed' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">
                            <i class="fas fa-check-circle mr-1"></i>Completed
                        </span>
                        {% elif appointment['status'] == 'cancelled' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-red-100 text-red-800">
                            <i class="fas fa-times-circle mr-1"></i>Cancelled
                        </span>
                        {% elif appointment['status'] == 'no-show' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-gray-100 text-gray-800">
                            <i class="fas fa-user-slash mr-1"></i>No-Show
                        </span>
                        {% endif %}
                    </div>
                    <div>
                        <p class="text-sm text-gray-600 mb-2">Invoiced</p>
                        {% if appointment['invoiced'] == 1 %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-purple-100 text-purple-800">
                            <i class="fas fa-dollar-sign mr-1"></i>Yes
                        </span>
                        {% else %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-gray-100 text-gray-800">
                            No
                        </span>
                        {% endif %}
                    </div>
                    {% if appointment['reference'] %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Reference Number</p>
                        <p class="font-semibold text-gray-800">{{ appointment['reference'] }}</p>
                    </div>
                    {% endif %}
                    <div>
                        <p class="text-sm text-gray-600">Date Confirmed</p>
                        <p class="font-semibold text-gray-800">{{ appointment['date_confirmed']|format_date }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Date Received</p>
                        <p class="font-semibold text-gray-800">{{ appointment['date_received']|format_date }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Date Released</p>
                        <p class="font-semibold text-gray-800">{{ appointment['date_released']|format_date }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Phase 2: PIL Instructions & LOI -->
        {% set pil_received = appointment.get('pil_instructions_received') %}
        {% set loi_received = appointment.get('loi_received') %}
        {% if pil_received or loi_received %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-file-medical-alt mr-2"></i>PIL Instructions & LOI
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    {% if appointment.get('pil_instructions_received') %}
                    <div>
                        <p class="text-sm text-gray-600">PIL Instructions Received</p>
                        <p class="font-semibold text-gray-800">{{ 'Yes' if appointment['pil_instructions_received'] == 1 else 'No' }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('pil_instruction_type') %}
                    <div>
                        <p class="text-sm text-gray-600">PIL Instruction Type</p>
                        <p class="font-semibold text-gray-800">{{ appointment['pil_instruction_type'] }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('loi_received') %}
                    <div>
                        <p class="text-sm text-gray-600">LOI Received</p>
                        <p class="font-semibold text-gray-800">{{ 'Yes' if appointment['loi_received'] == 1 else 'No' }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('loi_received_date') %}
                    <div>
                        <p class="text-sm text-gray-600">LOI Received Date</p>
                        <p class="font-semibold text-gray-800">{{ appointment['loi_received_date']|format_date }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Confirmation Letters Section -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4 flex justify-between items-center">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-envelope mr-2"></i>Confirmation Letters
                    <span class="ml-2 text-sm font-normal opacity-90">({{ confirmation_letters|length if confirmation_letters else 0 }})</span>
                </h2>
                <button onclick="document.getElementById('uploadConfirmationLetterModal').classList.remove('hidden')" 
                        class="bg-white text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-upload mr-2"></i>Upload Letter
                </button>
            </div>
            <div class="p-6">
                {% if confirmation_letters and confirmation_letters|length > 0 %}
                    <ul class="space-y-3">
                        {% for letter in confirmation_letters %}
                        <li class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center">
                                        {% if letter['file_type'] == 'pdf' %}
                                        <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                                        {% elif letter['file_type'] in ['doc', 'docx'] %}
                                        <i class="fas fa-file-word text-blue-500 mr-2"></i>
                                        {% else %}
                                        <i class="fas fa-file text-gray-500 mr-2"></i>
                                        {% endif %}
                                        <span class="font-medium text-gray-900">{{ letter['file_name'] }}</span>
                                    </div>
                                    {% if letter['report_date'] %}
                                    <p class="text-sm text-gray-600 ml-6 mt-1">Date: {{ letter['report_date']|format_date }}</p>
                                    {% endif %}
                                    {% if letter['notes'] %}
                                    <p class="text-sm text-gray-600 ml-6 mt-1">Notes: {{ letter['notes'] }}</p>
                                    {% endif %}
                                    <p class="text-xs text-gray-400 ml-6 mt-1">
                                        Uploaded by {{ letter['uploaded_by'] or 'System' }} on {{ letter['uploaded_at'][:10] if letter['uploaded_at'] else '' }}
                                    </p>
                                </div>
                                <div class="flex space-x-2 ml-4">
                                    <a href="{{ url_for('appointment_confirmation_letter_download', appointment_id=appointment['id'], report_id=letter['id']) }}" 
                                       class="text-green-600 hover:text-green-900" title="Download">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <form method="POST" 
                                          action="{{ url_for('appointment_confirmation_letter_delete', appointment_id=appointment['id'], report_id=letter['id']) }}" 
                                          onsubmit="return confirm('Are you sure you want to delete this confirmation letter?');"
                                          style="display: inline;">
                                        <button type="submit" class="text-red-600 hover:text-red-900" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <div class="text-center py-8">
                        <i class="fas fa-envelope-open-text text-4xl text-gray-300 mb-3"></i>
                        <p class="text-gray-500">No confirmation letters uploaded yet</p>
                        <button onclick="document.getElementById('uploadConfirmationLetterModal').classList.remove('hidden')" 
                                class="mt-4 text-indigo-600 hover:text-indigo-800 font-semibold">
                            <i class="fas fa-upload mr-1"></i>Upload First Letter
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Upload Confirmation Letter Modal -->
        <div id="uploadConfirmationLetterModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
                <div class="bg-indigo-600 px-6 py-4 rounded-t-lg">
                    <h3 class="text-xl font-bold text-white">Upload Confirmation Letter</h3>
                </div>
                <form method="POST" action="{{ url_for('appointment_upload_letter', appointment_id=appointment['id']) }}" enctype="multipart/form-data" class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Letter File *</label>
                            <input type="file" name="confirmation_letter_file" required accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Date</label>
                            <input type="date" name="report_date" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Notes</label>
                            <textarea name="notes" rows="3" 
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
                        </div>
                    </div>
                    <div class="flex gap-3 mt-6">
                        <button type="submit" 
                                class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                            <i class="fas fa-upload mr-2"></i>Upload Letter
                        </button>
                        <button type="button" 
                                onclick="document.getElementById('uploadConfirmationLetterModal').classList.add('hidden')"
                                class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg font-semibold transition">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Phase 2: Report Tracking -->
        {% set report_deadline = appointment.get('report_deadline_date') %}
        {% set report_due = appointment.get('report_due_date') %}
        {% if report_deadline or report_due %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-red-500 to-red-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-calendar-check mr-2"></i>Report Tracking
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    {% if appointment.get('report_deadline_date') %}
                    <div>
                        <p class="text-sm text-gray-600">Report Deadline Date</p>
                        <p class="font-semibold text-gray-800">{{ appointment['report_deadline_date']|format_date }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('report_due_date') %}
                    <div>
                        <p class="text-sm text-gray-600">Report Due Date</p>
                        <p class="font-semibold text-gray-800">{{ appointment['report_due_date']|format_date }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Phase 2: Confirmation Tracking -->
        {% set conf_deposit = appointment.get('confirmation_deposit_letter_sent') %}
        {% set conf_doctor = appointment.get('confirmation_sent_to_doctor') %}
        {% set in_cal = appointment.get('in_calendar') %}
        {% if conf_deposit is not none or conf_doctor is not none or in_cal is not none %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-teal-500 to-teal-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-envelope-open-text mr-2"></i>Confirmation Tracking
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    {% if appointment.get('confirmation_deposit_letter_sent') is not none %}
                    <div>
                        <p class="text-sm text-gray-600">Confirmation Deposit Letter to Client</p>
                        <p class="font-semibold text-gray-800">{{ 'Yes' if appointment['confirmation_deposit_letter_sent'] == 1 else 'No' }}</p>
                        {% if appointment.get('confirmation_deposit_letter_date') %}
                        <p class="text-xs text-gray-500 mt-1">{{ appointment['confirmation_deposit_letter_date']|format_date }}</p>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% if appointment.get('confirmation_sent_to_doctor') is not none %}
                    <div>
                        <p class="text-sm text-gray-600">Confirmation Sent to Doctor</p>
                        <p class="font-semibold text-gray-800">{{ 'Yes' if appointment['confirmation_sent_to_doctor'] == 1 else 'No' }}</p>
                        {% if appointment.get('confirmation_sent_to_doctor_date') %}
                        <p class="text-xs text-gray-500 mt-1">{{ appointment['confirmation_sent_to_doctor_date']|format_date }}</p>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% if appointment.get('in_calendar') is not none %}
                    <div>
                        <p class="text-sm text-gray-600">In Calendar</p>
                        <p class="font-semibold text-gray-800">{{ 'Yes' if appointment['in_calendar'] == 1 else 'No' }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Phase 2: Retainer & ATP Tracking -->
        {% set ret_required = appointment.get('retainer_required') %}
        {% set atp_req = appointment.get('atp_requested_on') %}
        {% if ret_required is not none or atp_req %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-money-bill-wave mr-2"></i>Retainer & ATP Tracking
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    {% if appointment.get('retainer_required') is not none %}
                    <div>
                        <p class="text-sm text-gray-600">Retainer Required</p>
                        <p class="font-semibold text-gray-800">{{ 'Yes' if appointment['retainer_required'] == 1 else 'No' }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('retainer_requested_on') %}
                    <div>
                        <p class="text-sm text-gray-600">Retainer Requested On</p>
                        <p class="font-semibold text-gray-800">{{ appointment['retainer_requested_on']|format_date }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('retainer_received_on') %}
                    <div>
                        <p class="text-sm text-gray-600">Retainer Received On</p>
                        <p class="font-semibold text-gray-800">{{ appointment['retainer_received_on']|format_date }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('retainer_amount') %}
                    <div>
                        <p class="text-sm text-gray-600">Retainer Amount</p>
                        <p class="font-semibold text-gray-800">${{ "%.2f"|format(appointment['retainer_amount']) }} CAD</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('atp_requested_on') %}
                    <div>
                        <p class="text-sm text-gray-600">ATP Requested On</p>
                        <p class="font-semibold text-gray-800">{{ appointment['atp_requested_on']|format_date }}</p>
                    </div>
                    {% endif %}
                    {% if appointment.get('atp_received_on') %}
                    <div>
                        <p class="text-sm text-gray-600">ATP Received On</p>
                        <p class="font-semibold text-gray-800">{{ appointment['atp_received_on']|format_date }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Phase 3: Additional Services -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4 flex justify-between items-center">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-users mr-2"></i>Additional Services ({{ additional_services|length if additional_services else 0 }})
                </h2>
                <a href="{{ url_for('appointment_additional_services', appointment_id=appointment['id']) }}" 
                   class="bg-white text-orange-600 hover:bg-orange-50 px-3 py-1 rounded text-sm font-semibold">
                    <i class="fas fa-plus mr-1"></i>Add Service
                </a>
            </div>
            <div class="p-6">
                {% if additional_services %}
                <div class="space-y-3">
                    {% for service in additional_services %}
                    <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="flex items-center mb-2">
                                    <span class="px-2 py-1 text-xs font-semibold rounded bg-orange-100 text-orange-800 mr-2">
                                        {{ service['service_type']|replace('_', ' ')|title }}
                                    </span>
                                    <span class="text-sm {% if service['present'] == 1 %}text-green-600{% else %}text-gray-400{% endif %}">
                                        {% if service['present'] == 1 %}<i class="fas fa-check-circle"></i> Present{% else %}<i class="fas fa-times-circle"></i> Not Present{% endif %}
                                    </span>
                                </div>
                                {% if service['name'] %}
                                <p class="text-sm text-gray-700"><strong>Name:</strong> {{ service['name'] }}</p>
                                {% endif %}
                                {% if service['company'] %}
                                <p class="text-sm text-gray-700"><strong>Company:</strong> {{ service['company'] }}</p>
                                {% endif %}
                                {% if service['language'] %}
                                <p class="text-sm text-gray-700"><strong>Language:</strong> {{ service['language'] }}</p>
                                {% endif %}
                                {% if service['travel_details'] %}
                                <div class="mt-2 p-2 bg-gray-50 rounded text-xs text-gray-600">
                                    <strong>Travel Details:</strong><br>
                                    {{ service['travel_details']|replace('\n', '<br>')|safe }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="flex space-x-2 ml-4">
                                <a href="{{ url_for('appointment_additional_service_edit', service_id=service['id']) }}" 
                                   class="text-blue-600 hover:text-blue-900 text-sm" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form method="POST" 
                                      action="{{ url_for('appointment_additional_service_delete', service_id=service['id']) }}" 
                                      onsubmit="return confirm('Are you sure you want to delete this service?');"
                                      style="display: inline;">
                                    <button type="submit" class="text-red-600 hover:text-red-900 text-sm" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-sm text-gray-500 text-center py-4">No additional services added</p>
                <div class="text-center">
                    <a href="{{ url_for('appointment_additional_services', appointment_id=appointment['id']) }}" 
                       class="inline-block bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition">
                        <i class="fas fa-plus mr-2"></i>Add Service
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Phase 3: Appointment Meds -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4 flex justify-between items-center">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-pills mr-2"></i>Meds Documentation ({{ meds|length }})
                </h2>
                <button onclick="document.getElementById('uploadMedsModal').classList.remove('hidden')" 
                        class="bg-white text-indigo-600 hover:bg-indigo-50 px-3 py-1 rounded text-sm font-semibold">
                    <i class="fas fa-upload mr-1"></i>Upload
                </button>
            </div>
            <div class="p-6">
                {% if meds %}
                <ul class="space-y-3">
                    {% for med in meds %}
                    <li class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center">
                                    {% if med['file_type'] == 'pdf' %}
                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                                    {% elif med['file_type'] in ['doc', 'docx'] %}
                                    <i class="fas fa-file-word text-blue-500 mr-2"></i>
                                    {% else %}
                                    <i class="fas fa-file text-gray-500 mr-2"></i>
                                    {% endif %}
                                    <span class="text-sm font-medium text-gray-900">{{ med['file_name'] }}</span>
                                </div>
                                {% if med.get('notes') or med.get('description') %}
                                <p class="text-xs text-gray-600 ml-6 mt-1">{{ med.get('notes') or med.get('description') }}</p>
                                {% endif %}
                                <p class="text-xs text-gray-400 ml-6 mt-1">{{ med['uploaded_at'][:10] if med['uploaded_at'] else '' }}</p>
                            </div>
                            <div class="flex space-x-2 ml-2">
                                <a href="{{ url_for('appointment_meds_download', med_id=med['id']) }}" 
                                   class="text-green-600 hover:text-green-900 text-sm" title="Download">
                                    <i class="fas fa-download"></i>
                                </a>
                                <form method="POST" 
                                      action="{{ url_for('appointment_meds_delete', med_id=med['id']) }}" 
                                      onsubmit="return confirm('Are you sure you want to delete this meds document?');"
                                      style="display: inline;">
                                    <button type="submit" class="text-red-600 hover:text-red-900 text-sm" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="text-sm text-gray-500 text-center py-4">No meds documentation uploaded</p>
                <div class="text-center">
                    <button onclick="document.getElementById('uploadMedsModal').classList.remove('hidden')" 
                            class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition">
                        <i class="fas fa-upload mr-2"></i>Upload Meds
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Upload Meds Modal -->
        <div id="uploadMedsModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
                <div class="bg-indigo-600 px-6 py-4 rounded-t-lg">
                    <h3 class="text-xl font-bold text-white">Upload Meds Documentation</h3>
                </div>
                <form method="POST" action="{{ url_for('appointment_meds_upload', appointment_id=appointment['id']) }}" enctype="multipart/form-data" class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">File *</label>
                            <input type="file" name="meds_file" required accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Notes</label>
                            <textarea name="notes" rows="3" 
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
                        </div>
                    </div>
                    <div class="flex gap-3 mt-6">
                        <button type="submit" 
                                class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                            <i class="fas fa-upload mr-2"></i>Upload
                        </button>
                        <button type="button"
                                onclick="document.getElementById('uploadMedsModal').classList.add('hidden')"
                                class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg font-semibold transition">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Notes -->
        {% if appointment['notes'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-sticky-note mr-2"></i>Notes
                </h2>
            </div>
            <div class="p-6">
                <div class="bg-yellow-50 rounded-lg p-4">
                    <p class="text-gray-800 whitespace-pre-wrap">{{ appointment['notes'] }}</p>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Attached Letters -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-teal-500 to-teal-600 px-6 py-4">
                <h2 class="text-lg font-bold text-white">
                    <i class="fas fa-paperclip mr-2"></i>Attached Letters ({{ letters|length }})
                </h2>
            </div>
            <div class="p-6">
                {% if letters %}
                <ul class="space-y-3">
                    {% for letter in letters %}
                    <li class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center">
                                    {% if letter['file_type'] == 'pdf' %}
                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                                    {% elif letter['file_type'] in ['doc', 'docx'] %}
                                    <i class="fas fa-file-word text-blue-500 mr-2"></i>
                                    {% else %}
                                    <i class="fas fa-file text-gray-500 mr-2"></i>
                                    {% endif %}
                                    <span class="text-sm font-medium text-gray-900">{{ letter['file_name'] }}</span>
                                </div>
                                {% if letter['letter_type'] %}
                                <span class="text-xs text-gray-500 ml-6">{{ letter['letter_type']|title }}</span>
                                {% endif %}
                                {% if letter['description'] %}
                                <p class="text-xs text-gray-600 ml-6 mt-1">{{ letter['description'] }}</p>
                                {% endif %}
                                <p class="text-xs text-gray-400 ml-6 mt-1">{{ letter['uploaded_at'][:10] if letter['uploaded_at'] else '' }}</p>
                            </div>
                            <div class="flex space-x-2 ml-2">
                                <a href="{{ url_for('appointment_letter_download', letter_id=letter['id']) }}" 
                                   class="text-green-600 hover:text-green-900 text-sm" title="Download">
                                    <i class="fas fa-download"></i>
                                </a>
                                <form method="POST" 
                                      action="{{ url_for('appointment_letter_delete', letter_id=letter['id']) }}" 
                                      onsubmit="return confirm('Are you sure you want to delete this letter?');"
                                      style="display: inline;">
                                    <button type="submit" class="text-red-600 hover:text-red-900 text-sm" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="text-sm text-gray-500 text-center py-4">No letters attached</p>
                {% endif %}
                
                <!-- Upload Form -->
                <div class="mt-4 pt-4 border-t">
                    <form method="POST" 
                          action="{{ url_for('appointment_upload_letter', appointment_id=appointment['id']) }}" 
                          enctype="multipart/form-data" 
                          class="space-y-3">
                        <input type="hidden" name="appointment_id" value="{{ appointment['id'] }}">
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Attach Letter</label>
                            <input type="file" 
                                   name="letter_file" 
                                   required
                                   accept=".pdf,.doc,.docx,.txt"
                                   class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Letter Type</label>
                            <select name="letter_type" 
                                    class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                <option value="confirmation">Confirmation</option>
                                <option value="reminder">Reminder</option>
                                <option value="report">Report</option>
                                <option value="correspondence">Correspondence</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Description (optional)</label>
                            <input type="text" 
                                   name="description" 
                                   placeholder="Brief description"
                                   class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <button type="submit" 
                                class="w-full bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition">
                            <i class="fas fa-upload mr-2"></i>Upload Letter
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Phase 3: Medical Documentation -->
        {% if medical_docs %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-pink-500 to-pink-600 px-6 py-4">
                <h2 class="text-lg font-bold text-white">
                    <i class="fas fa-file-medical mr-2"></i>Medical Documentation ({{ medical_docs|length }})
                </h2>
            </div>
            <div class="p-6">
                <ul class="space-y-3">
                    {% for doc in medical_docs %}
                    <li class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center">
                                    {% if doc['file_type'] == 'pdf' %}
                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                                    {% elif doc['file_type'] in ['doc', 'docx'] %}
                                    <i class="fas fa-file-word text-blue-500 mr-2"></i>
                                    {% else %}
                                    <i class="fas fa-file text-gray-500 mr-2"></i>
                                    {% endif %}
                                    <span class="text-sm font-medium text-gray-900">{{ doc['file_name'] }}</span>
                                </div>
                                {% if doc['receipt_method'] %}
                                <p class="text-xs text-gray-600 ml-6 mt-1">Received: {{ doc['receipt_method']|title }}</p>
                                {% endif %}
                                {% if doc['documents_received_date'] %}
                                <p class="text-xs text-gray-600 ml-6 mt-1">Date: {{ doc['documents_received_date']|format_date }}</p>
                                {% endif %}
                                <p class="text-xs text-gray-400 ml-6 mt-1">{{ doc['uploaded_at'][:10] if doc['uploaded_at'] else '' }}</p>
                            </div>
                            <div class="flex space-x-2 ml-2">
                                <a href="{{ url_for('medical_documentation_download', doc_id=doc['id']) }}" 
                                   class="text-green-600 hover:text-green-900 text-sm" title="Download">
                                    <i class="fas fa-download"></i>
                                </a>
                                <form method="POST" 
                                      action="{{ url_for('medical_documentation_delete', doc_id=doc['id']) }}" 
                                      onsubmit="return confirm('Are you sure you want to delete this medical documentation?');"
                                      style="display: inline;">
                                    <button type="submit" class="text-red-600 hover:text-red-900 text-sm" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
        
        <!-- Quick Actions -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-gray-700 to-gray-800 px-6 py-4">
                <h2 class="text-lg font-bold text-white">
                    <i class="fas fa-cog mr-2"></i>Actions
                </h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="{{ url_for('invoice_new', appointment_id=appointment['id']) }}" 
                   class="block w-full text-center bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-file-invoice-dollar mr-2"></i>Create Invoice
                </a>
                <a href="{{ url_for('appointment_print', appointment_id=appointment['id']) }}" 
                   target="_blank"
                   class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-print mr-2"></i>Print for Client
                </a>
                <a href="{{ url_for('appointment_edit', appointment_id=appointment['id']) }}" 
                   class="block w-full text-center bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-edit mr-2"></i>Edit Appointment
                </a>
                <a href="{{ url_for('case_view', case_id=appointment['case_id']) }}" 
                   class="block w-full text-center bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-folder-open mr-2"></i>View Case
                </a>
                <form method="POST" 
                      action="{{ url_for('appointment_delete', appointment_id=appointment['id']) }}" 
                      onsubmit="return confirm('Are you sure you want to delete this appointment? All attached letters will also be deleted.');">
                    <button type="submit" 
                            class="block w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                        <i class="fas fa-trash mr-2"></i>Delete Appointment
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}