{% extends "base.html" %}

{% block title %}Upload Manifest - LSMC Hub{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Upload Manifest</h1>
        <p class="subtitle">Upload a CSV or Excel file containing intake paperwork metadata</p>
    </div>

    <div class="upload-section">
        <form method="post" action="/manifests/upload" enctype="multipart/form-data" id="uploadForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

            <div class="form-group">
                <label for="file">Manifest File:</label>
                <input type="file" name="file" id="file" accept=".csv,.xlsx,.xls" required class="form-control">
                <p class="help-text">Supported formats: CSV, Excel (.xlsx, .xls)</p>
            </div>

            <div class="form-group">
                <label for="shipment_id">Link to Shipment (Optional):</label>
                <select name="shipment_id" id="shipment_id" class="form-control">
                    <option value="">-- No Shipment --</option>
                    {% for shipment in shipments %}
                    <option value="{{ shipment.id }}">{{ shipment.tracking_number }}</option>
                    {% endfor %}
                </select>
            </div>

            <p class="help-text">Manifest upload does not create Bloom materials. Use Atlas intake outcomes to accept or reject received material.</p>

            <div class="button-group">
                <button type="submit" class="btn btn-primary">Upload Manifest</button>
                <a href="/manifests" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>

    <!-- File Format Help -->
    <div class="help-section">
        <h2>File Format Requirements</h2>
        <p>Your manifest file must include the following columns:</p>
        <ul>
            <li><strong>specimen_barcode</strong> (required) - Intake or label barcode recorded on the paperwork</li>
            <li><strong>specimen_type</strong> (optional) - Requested material type (e.g., Blood, Saliva, Tissue)</li>
            <li><strong>patient_id</strong> (optional) - Atlas patient EUID</li>
            <li><strong>trf_euid</strong> (optional) - Associated Atlas TRF EUID</li>
            <li><strong>collection_date</strong> (optional) - Date specimen was collected</li>
            <li><strong>notes</strong> (optional) - Additional notes</li>
        </ul>

        <h3>Example CSV Format:</h3>
        <pre class="code-block">specimen_barcode,specimen_type,patient_id,trf_euid,collection_date,notes
SPEC-001,Blood,PAT-123,TRF-456,2026-01-15,Sample collected at clinic
SPEC-002,Saliva,PAT-124,TRF-457,2026-01-15,
SPEC-003,Tissue,PAT-125,TRF-458,2026-01-16,Frozen sample</pre>

        <h3>Download Template:</h3>
        <a href="/manifests/template.csv" class="btn btn-secondary" download>Download CSV Template</a>
    </div>
</div>

<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    const fileInput = document.getElementById('file');
    if (!fileInput.files || fileInput.files.length === 0) {
        e.preventDefault();
        alert('Please select a file to upload');
        return false;
    }

    // Show loading indicator
    const submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.textContent = 'Uploading...';
});
</script>
{% endblock %}