{% extends "base.html" %}
{% set active_nav = "trfs" %}

{% block title %}Edit TRF {{ order.order_number }} - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Edit TRF <span class="text-mono">{{ order.order_number }}</span></h1>
        <p class="page-subtitle">Modify TRF details</p>
    </div>
    <a href="/trfs/{{ order.id }}" class="btn btn-ghost">← Back to TRF</a>
</div>

<form method="POST" action="/trfs/{{ order.id }}/edit" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <h3 class="mb-lg">Patients</h3>
    <div id="patientsContainer" class="mb-lg">
        {% set links = patient_links if patient_links is defined and patient_links else [] %}
        {% if not links and order.patient_id %}
            {% set links = [{'patient_id': order.patient_id, 'role': 'PROBAND'}] %}
        {% endif %}
        {% if not links %}
            {% set links = [{'patient_id': '', 'role': 'PROBAND'}] %}
        {% endif %}

        {% for link in links %}
        <div class="flex gap-md items-end mb-sm patient-item" data-index="{{ loop.index0 }}">
            <div class="form-group" style="flex: 2;">
                <label class="form-label">Patient</label>
                <select name="patients[{{ loop.index0 }}][patient_id]" class="form-select" required>
                    <option value="">-- Select Patient --</option>
                    {% for patient in patients %}
                    <option value="{{ patient.id }}" {% if patient.id == link.patient_id %}selected{% endif %}>
                        {{ patient.name }} (DOB: {{ patient.dob }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group" style="flex: 1;">
                <label class="form-label">Role</label>
                <select name="patients[{{ loop.index0 }}][role]" class="form-select">
                    <option value="PROBAND" {% if link.role == 'PROBAND' %}selected{% endif %}>Proband</option>
                    <option value="FATHER" {% if link.role == 'FATHER' %}selected{% endif %}>Father</option>
                    <option value="MOTHER" {% if link.role == 'MOTHER' %}selected{% endif %}>Mother</option>
                    <option value="SIBLING" {% if link.role == 'SIBLING' %}selected{% endif %}>Sibling</option>
                    <option value="OTHER" {% if link.role == 'OTHER' %}selected{% endif %}>Other</option>
                </select>
            </div>
            <div class="form-group" style="flex: 0;">
                <label class="form-label">&nbsp;</label>
                <button type="button" class="btn btn-sm btn-ghost" onclick="removePatient(this)" style="display: {% if loop.first %}none{% else %}inline-flex{% endif %};">Remove</button>
            </div>
        </div>
        {% endfor %}

        <button type="button" class="btn btn-secondary mt-sm" onclick="addPatient()">+ Add Patient</button>
    </div>

    <h3 class="mb-lg">Ordering Clinician</h3>
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Clinician</label>
            <select name="clinician_id" class="form-select" required>
                <option value="">-- Select Clinician --</option>
                {% for clinician in clinicians %}
                <option value="{{ clinician.id }}" {% if clinician.id == order.clinician_id %}selected{% endif %}>
                    {{ clinician.name }} {% if clinician.credentials %}({{ clinician.credentials }}){% endif %}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">TRF Type</label>
            <select name="order_type" class="form-select" required>
                <option value="CLINICAL" {% if order.order_type == 'CLINICAL' %}selected{% endif %}>Clinical</option>
                <option value="RESEARCH" {% if order.order_type == 'RESEARCH' %}selected{% endif %}>Research</option>
                <option value="OTHER" {% if order.order_type == 'OTHER' %}selected{% endif %}>Other</option>
            </select>
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Site{% if site_options|length > 1 %} <span class="text-error">*</span>{% endif %}</label>
            <select name="site_id" class="form-select" {% if site_options|length > 1 %}required{% endif %}>
                {% if site_options|length != 1 %}
                <option value="">-- Select Site --</option>
                {% endif %}
                {% for site in site_options %}
                <option value="{{ site.id }}" {% if selected_site_id == site.id %}selected{% endif %}>
                    {{ site.name }}{% if site.site_code %} ({{ site.site_code }}){% endif %}
                </option>
                {% endfor %}
            </select>
        </div>
    </div>

    <h3 class="mb-lg">Tests Ordered</h3>
    
    <!-- Existing Tests (read-only) -->
    {% if existing_test_orders %}
    <div class="mb-lg">
        <p class="text-sm text-muted mb-md">Existing Tests (cannot be modified):</p>
        {% for to in existing_test_orders %}
        <div class="card mb-sm" style="background: var(--bg-secondary);">
            <div class="flex gap-lg items-center">
                <strong>{{ to.fulfillment_route_code }}</strong>
                <span class="text-sm text-muted">Specimen: {{ to.specimen_type }}</span>
                {% if to.clinical_notes %}
                <span class="text-sm text-muted">Notes: {{ to.clinical_notes }}</span>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Add New Tests -->
    <div id="testOrdersContainer">
        <!-- New test orders will be added here -->
    </div>
    
    <button type="button" class="btn btn-secondary mb-lg" onclick="addTestOrder()">+ Add Test</button>

    <h3 class="mb-lg">Additional Notes</h3>
    <div class="form-group">
        <label class="form-label">TRF Notes</label>
        <textarea name="clinical_notes" class="form-textarea" rows="3">{{ order.clinical_notes or '' }}</textarea>
    </div>

    <div class="flex gap-md justify-between mt-lg" style="border-top: 1px solid var(--border-color); padding-top: var(--space-lg);">
        <a href="/trfs/{{ order.id }}" class="btn btn-ghost">Cancel</a>
        <div class="flex gap-md">
            <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
    </div>
</form>

<script>
let testOrderCount = 0;
let patientCount = {{ links|length }};

function addPatient() {
    const container = document.getElementById('patientsContainer');
    const template = container.querySelector('.patient-item').cloneNode(true);
    template.dataset.index = patientCount;

    // Always show remove button for dynamically added rows
    const removeBtn = template.querySelector('button');
    if (removeBtn) removeBtn.style.display = 'inline-flex';

    template.querySelectorAll('[name]').forEach(field => {
        field.name = field.name.replace(/\\[0\\]/, `[${patientCount}]`);
        field.value = '';
    });

    container.insertBefore(template, container.querySelector('button'));
    patientCount++;
}

function removePatient(btn) {
    btn.closest('.patient-item').remove();
}

function addTestOrder() {
    const container = document.getElementById('testOrdersContainer');
    const idx = testOrderCount++;
    
    const html = `
        <div class="card mb-md test-order-item" data-index="${idx}">
            <input type="hidden" name="test_orders[${idx}][is_new]" value="1">
            <div class="flex justify-between items-center mb-md">
                <strong>New Test</strong>
                <button type="button" class="btn btn-sm btn-ghost" onclick="this.closest('.test-order-item').remove()">Remove</button>
            </div>
            <div class="flex gap-lg">
                <div class="form-group" style="flex: 2;">
                    <label class="form-label">Test</label>
                    <select name="test_orders[${idx}][fulfillment_route_code]" class="form-select" required>
                        <option value="">-- Select Test --</option>
                        {% for test in fulfillment_routes %}
                        <option value="{{ test.code }}">{{ test.name }} ({{ test.code }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group" style="flex: 1;">
                    <label class="form-label">Specimen Type</label>
                    <select name="test_orders[${idx}][specimen_type]" class="form-select">
                        <option value="BLOOD">Blood</option>
                        <option value="SALIVA">Saliva</option>
                        <option value="TISSUE">Tissue</option>
                        <option value="OTHER">Other</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Clinical Notes</label>
                <textarea name="test_orders[${idx}][clinical_notes]" class="form-textarea" rows="2"></textarea>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', html);
}
</script>
{% endblock %}