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

{% block title %}New TRF - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">New TRF</h1>
        <p class="page-subtitle">Create a test requisition form (TRF)</p>
    </div>
    <a href="/trfs" class="btn btn-ghost">← Back to TRFs</a>
</div>

<form method="POST" action="/trfs/new" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <h3 class="mb-lg">Patients</h3>
    <div id="patientsContainer" class="mb-lg">
        <div class="flex gap-md items-end mb-sm patient-item" data-index="0">
            <div class="form-group" style="flex: 2;">
                <label class="form-label">Patient</label>
                <select name="patients[0][patient_id]" class="form-select" required>
                    <option value="">-- Select Patient --</option>
                    {% for patient in patients %}
                    <option value="{{ patient.id }}">{{ patient.name }} (DOB: {{ patient.date_of_birth or 'N/A' }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group" style="flex: 1;">
                <label class="form-label">Role</label>
                <select name="patients[0][role]" class="form-select">
                    <option value="PROBAND">Proband</option>
                    <option value="FATHER">Father</option>
                    <option value="MOTHER">Mother</option>
                    <option value="SIBLING">Sibling</option>
                    <option value="OTHER">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: none;">Remove</button>
            </div>
        </div>
        <p class="form-hint">Need a new patient? <a href="/patients/new?redirect=/trfs/new">Create one</a></p>
        <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 }}">{{ clinician.name }} {% if clinician.credentials %}({{ clinician.credentials }}){% endif %}</option>
                {% endfor %}
            </select>
            <p class="form-hint">Or <a href="/clinicians/new?redirect=/trfs/new">create a new clinician</a></p>
        </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="">-- Select TRF Type --</option>
                <option value="CLINICAL">Clinical</option>
                <option value="RESEARCH">Research</option>
                <option value="OTHER">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>
    <div id="testOrdersContainer">
        <div class="card mb-md test-order-item" data-index="0">
            <div class="flex justify-between items-center mb-md">
                <strong>Test #1</strong>
                <button type="button" class="btn btn-sm btn-ghost" onclick="removeTestOrder(this)" style="display: none;">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[0][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">Priority</label>
                    <select name="test_orders[0][priority]" class="form-select">
                        <option value="NORMAL">Normal</option>
                        <option value="STAT">STAT (Rush)</option>
                    </select>
                </div>
                <div class="form-group" style="flex: 1;">
                    <label class="form-label">Specimen Type</label>
                    <select name="test_orders[0][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[0][clinical_notes]" class="form-textarea" rows="2" placeholder="Clinical indication, relevant history..."></textarea>
            </div>
        </div>
    </div>
    
    <button type="button" class="btn btn-secondary mb-lg" onclick="addTestOrder()">+ Add Another 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" placeholder="Any additional notes..."></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" class="btn btn-ghost">Cancel</a>
        <div class="flex gap-md">
            <button type="submit" class="btn btn-primary">Create TRF</button>
        </div>
    </div>
</form>

<script>
let testOrderCount = 1;
let patientCount = 1;

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

    // Show remove button
    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 = '';
    });

    // Insert before hint + add button
    const hint = container.querySelector('.form-hint');
    container.insertBefore(template, hint);
    patientCount++;
}

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

function addTestOrder() {
    const container = document.getElementById('testOrdersContainer');
    const template = container.querySelector('.test-order-item').cloneNode(true);
    template.dataset.index = testOrderCount;
    template.querySelector('strong').textContent = `Test #${testOrderCount + 1}`;
    template.querySelector('button').style.display = 'block';
    
    // Update field names
    template.querySelectorAll('[name]').forEach(field => {
        field.name = field.name.replace(/\[0\]/, `[${testOrderCount}]`);
        field.value = '';
    });
    
    container.appendChild(template);
    testOrderCount++;
}

function removeTestOrder(btn) {
    btn.closest('.test-order-item').remove();
}
</script>
{% endblock %}