{% extends "base.html" %}

{% block title %}Appointment Meds - 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">Meds Documentation</h1>
            <p class="text-gray-600">Appointment for Case #{{ appointment['case_id'] }}</p>
        </div>
        <div>
            <a href="{{ url_for('appointment_view', appointment_id=appointment['id']) }}" 
               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 Appointment
            </a>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Meds List -->
    <div class="lg:col-span-2 space-y-4">
        {% if meds %}
        {% for med in meds %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <div class="flex items-center">
                        {% if med['file_type'] == 'pdf' %}
                        <i class="fas fa-file-pdf text-red-500 mr-3 text-2xl"></i>
                        {% elif med['file_type'] in ['doc', 'docx'] %}
                        <i class="fas fa-file-word text-blue-500 mr-3 text-2xl"></i>
                        {% else %}
                        <i class="fas fa-file text-gray-500 mr-3 text-2xl"></i>
                        {% endif %}
                        <div>
                            <p class="font-semibold text-gray-800">{{ med['file_name'] }}</p>
                            {% if med['notes'] %}
                            <p class="text-sm text-gray-600 mt-1">{{ med['notes'] }}</p>
                            {% endif %}
                            <p class="text-xs text-gray-400 mt-1">Uploaded: {{ med['uploaded_at'][:10] if med['uploaded_at'] else 'N/A' }}</p>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <a href="{{ url_for('appointment_meds_download', med_id=med['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_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" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="bg-white rounded-lg shadow-md p-6 text-center">
            <p class="text-gray-500 mb-4">No meds documentation uploaded yet.</p>
        </div>
        {% endif %}
    </div>
    
    <!-- Upload Form -->
    <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-lg font-bold text-white">
                <i class="fas fa-upload mr-2"></i>Upload Meds
            </h2>
        </div>
        <div class="p-6">
            <form method="POST" 
                  action="{{ url_for('appointment_meds_upload', appointment_id=appointment['id']) }}" 
                  enctype="multipart/form-data" 
                  class="space-y-4">
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">File *</label>
                    <input type="file" 
                           name="file" 
                           required
                           accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"
                           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-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes (optional)</label>
                    <textarea name="notes" rows="3" placeholder="Add any notes about this meds documentation..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"></textarea>
                </div>
                
                <button type="submit" class="w-full 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 Meds
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}