{% extends "base.html" %}

{% block title %}{% if report %}Edit Report{% else %}Upload Report{% endif %} - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ url_for('reports_list') }}" class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to Reports
    </a>
</div>

<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">
        <i class="fas fa-upload mr-2 text-blue-600"></i>
        {% if report %}Edit Report{% else %}Upload New Report{% endif %}
    </h1>
    
    <form method="POST" enctype="multipart/form-data" class="space-y-6">
        
        <!-- File Upload Section -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-file mr-2 text-purple-600"></i>File Upload
            </h2>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Report File *</label>
                <input type="file" 
                       name="report_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-blue-500">
                <p class="text-xs text-gray-500 mt-2">
                    Accepted formats: PDF, DOC, DOCX, TXT, JPG, PNG (max 50MB)
                </p>
            </div>
        </div>
        
        <!-- Report Information -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-info-circle mr-2 text-blue-600"></i>Report 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">Report Title *</label>
                    <input type="text" 
                           name="report_title" 
                           required
                           placeholder="e.g., IME Report - John Doe"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
                    <select name="report_type" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Select...</option>
                        <option value="IME Report">IME Report</option>
                        <option value="Medical Opinion">Medical Opinion</option>
                        <option value="Document Review">Document Review</option>
                        <option value="FCE Report">FCE Report</option>
                        <option value="Assessment Report">Assessment Report</option>
                        <option value="Follow-up Report">Follow-up Report</option>
                        <option value="Addendum">Addendum</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Report 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-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">
                        <option value="draft">Draft</option>
                        <option value="final">Final</option>
                        <option value="sent">Sent</option>
                        <option value="archived">Archived</option>
                    </select>
                </div>
                
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea name="description" 
                              rows="3"
                              placeholder="Brief description of the report content"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>
        </div>
        
        <!-- Linkage -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-link mr-2 text-green-600"></i>Link to Case & Doctor
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Link to Case</label>
                    <select name="case_id" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Not linked to a case</option>
                        {% for case in cases %}
                        <option value="{{ case['id'] }}">
                            {{ case['file_case_id'] }} - {{ case['first_name'] }} {{ case['last_name'] }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="text-xs text-gray-500 mt-1">
                        Link this report to a specific case for easy tracking
                    </p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Assessing Doctor</label>
                    <select name="doctor_id" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Select doctor...</option>
                        {% for doctor in doctors %}
                        <option value="{{ doctor['id'] }}">
                            {{ doctor['name'] }}{% if doctor['specialty'] %} - {{ doctor['specialty'] }}{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
        
        <!-- Additional Notes -->
        <div>
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-sticky-note mr-2 text-yellow-600"></i>Additional Notes
            </h2>
            <textarea name="notes" 
                      rows="4"
                      placeholder="Any additional notes, comments, or follow-up actions needed"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
        </div>
        
        <!-- Form Actions -->
        <div class="flex justify-end space-x-4 pt-4 border-t">
            <a href="{{ url_for('reports_list') }}" 
               class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                Cancel
            </a>
            <button type="submit" 
                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition">
                <i class="fas fa-upload mr-2"></i>Upload Report
            </button>
        </div>
    </form>
</div>
{% endblock %}