{% extends "base.html" %}

{% block title %}Generate Letter - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-800">Generate Letter from Template</h1>
        <a href="{{ url_for('templates_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 Templates
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Generation Form -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4">Template: {{ template['template_name'] }}</h2>
        
        <form method="POST">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Letter Subject</label>
                    <input type="text" name="letter_subject" 
                           placeholder="Enter letter subject..."
                           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-semibold text-gray-700 mb-2">Link to Case (Optional)</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="">None</option>
                        {% for case in cases %}
                        <option value="{{ case['id'] }}">{{ case['file_case_id'] or case['id'] }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Link to Appointment (Optional)</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">
                        <option value="">None</option>
                        {% for appointment in appointments %}
                        <option value="{{ appointment['id'] }}">{{ appointment['appointment_date'] }} - Case #{{ appointment['case_id'] }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Link to Invoice (Optional)</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">
                        <option value="">None</option>
                        {% for invoice in invoices %}
                        <option value="{{ invoice['id'] }}">{{ invoice['invoice_number'] }} - Case #{{ invoice['case_id'] }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <div class="mt-6">
                <button type="submit" 
                        class="w-full bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-semibold transition">
                    <i class="fas fa-magic mr-2"></i>Generate Letter
                </button>
            </div>
        </form>
    </div>
    
    <!-- Template Preview -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4">Template Preview</h2>
        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <pre class="whitespace-pre-wrap text-sm text-gray-700 font-mono">{{ template['template_content'] }}</pre>
        </div>
        <div class="mt-4 p-3 bg-blue-50 rounded-lg">
            <p class="text-xs text-blue-800">
                <i class="fas fa-info-circle mr-1"></i>
                Variables will be automatically replaced when you link to a case, appointment, or invoice.
            </p>
        </div>
    </div>
</div>
{% endblock %}