{% extends "base.html" %}

{% block title %}Upload Medical Documentation - 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">Upload Medical Documentation</h1>
            {% if case_id %}
            <p class="text-gray-600">Case ID: {{ case_id }}</p>
            {% elif appointment_id %}
            <p class="text-gray-600">Appointment ID: {{ appointment_id }}</p>
            {% endif %}
        </div>
        <div>
            {% if case_id %}
            <a href="{{ url_for('case_view', case_id=case_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 Case
            </a>
            {% elif appointment_id %}
            <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>
            {% endif %}
        </div>
    </div>
</div>

<div class="max-w-3xl mx-auto">
    <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-xl font-bold text-white">
                <i class="fas fa-file-medical mr-2"></i>Upload Medical Documentation
            </h2>
        </div>
        <div class="p-6">
            <form method="POST" 
                  action="{% if case_id %}{{ url_for('medical_documentation_upload', case_id=case_id) }}{% else %}{{ url_for('medical_documentation_upload', appointment_id=appointment_id) }}{% endif %}" 
                  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-pink-50 file:text-pink-700 hover:file:bg-pink-100">
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Receipt Method</label>
                        <select name="receipt_method" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500">
                            <option value="">Select...</option>
                            <option value="digital">Digital</option>
                            <option value="mail">Mail</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Document Type</label>
                        <select name="document_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500">
                            <option value="">Select...</option>
                            <option value="PAPER">Paper</option>
                            <option value="Digital">Digital</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <input type="checkbox" name="printed_required" value="1" class="mr-2">
                        Printed Required
                    </label>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Waybill Tracking Number</label>
                    <input type="text" name="waybill_tracking_number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500">
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Documents Received Date</label>
                        <input type="date" name="documents_received_date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Amount Received (CAD $)</label>
                        <input type="number" step="0.01" name="amount_received" placeholder="0.00" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500">
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Return or Shred</label>
                    <select name="return_or_shred" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500">
                        <option value="">Select...</option>
                        <option value="return">Return</option>
                        <option value="shred">Shred</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <input type="checkbox" name="client_provided_waybill" value="1" class="mr-2">
                            Client Provided Waybill
                        </label>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <input type="checkbox" name="clinic_chart" value="1" class="mr-2">
                            Clinic Chart
                        </label>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <input type="checkbox" name="clinic_chart_sent" value="1" class="mr-2">
                        Clinic Chart Sent
                    </label>
                </div>
                
                <div class="flex space-x-3 pt-4">
                    <button type="submit" class="flex-1 bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                        <i class="fas fa-upload mr-2"></i>Upload Document
                    </button>
                    {% if case_id %}
                    <a href="{{ url_for('case_view', case_id=case_id) }}" 
                       class="flex-1 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition text-center">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </a>
                    {% elif appointment_id %}
                    <a href="{{ url_for('appointment_view', appointment_id=appointment_id) }}" 
                       class="flex-1 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition text-center">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}