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

{% block title %}New Shipment - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">New Shipment</h1>
        <p class="page-subtitle">Create a new specimen shipment</p>
    </div>
    <a href="/shipments" class="btn btn-ghost">← Back to Shipments</a>
</div>

<form method="POST" action="/shipments/new" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <h3 class="mb-lg">Shipment Details</h3>
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Tracking Number</label>
            <input type="text" name="tracking_number" class="form-input" placeholder="e.g., 1Z999AA10123456784">
            <p class="form-hint">Optional - can be added later. FedEx barcode example: <code>395579987149</code></p>
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Carrier</label>
            <select name="carrier" class="form-select">
                <option value="">-- Select Carrier --</option>
                <option value="FEDEX">FedEx</option>
                <option value="UPS">UPS</option>
                <option value="USPS">USPS</option>
                <option value="DHL">DHL</option>
                <option value="COURIER">Local Courier</option>
                <option value="OTHER">Other</option>
            </select>
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Origin Site</label>
            <select name="origin_site_id" class="form-select">
                <option value="">-- Select Site --</option>
                {% for site in sites %}
                <option value="{{ site.id }}">{{ site.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Destination</label>
            <select name="destination" class="form-select">
                <option value="LSMC_LAB">LSMC Lab (Default)</option>
                <option value="CLIENT">Return to Client</option>
                <option value="OTHER">Other</option>
            </select>
        </div>
    </div>

    <h3 class="mb-lg">Contents</h3>
    <p class="text-muted mb-md">Add test kits and Bloom-linked materials to this shipment after creation.</p>
    
    <div class="card mb-lg" style="background: var(--bg-tertiary);">
        <div class="flex gap-lg">
            <div style="flex: 1;">
                <div class="text-sm text-muted mb-sm">Test Kits</div>
                <div class="text-2xl font-bold">0</div>
            </div>
            <div style="flex: 1;">
                <div class="text-sm text-muted mb-sm">Bloom Materials</div>
                <div class="text-2xl font-bold">0</div>
            </div>
            <div style="flex: 1;">
                <div class="text-sm text-muted mb-sm">Documents</div>
                <div class="text-2xl font-bold">0</div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Notes</label>
        <textarea name="special_instructions" class="form-textarea" rows="3" placeholder="Any special handling instructions..."></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="/shipments" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Create Shipment</button>
    </div>
</form>
{% endblock %}