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

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

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">New Patient</h1>
        <p class="page-subtitle">Add a new patient to the system</p>
    </div>
    <a href="{{ redirect_url }}" class="btn btn-ghost">← Cancel</a>
</div>

<form method="POST" action="/patients/new" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="redirect_url" value="{{ redirect_url }}">
    
    <h3 class="mb-lg">Patient Information</h3>
    
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="first_name">First Name <span class="text-error">*</span></label>
            <input type="text" id="first_name" name="first_name" class="form-input" required maxlength="100">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="last_name">Last Name <span class="text-error">*</span></label>
            <input type="text" id="last_name" name="last_name" class="form-input" required maxlength="100">
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="date_of_birth">Date of Birth <span class="text-error">*</span></label>
            <input type="date" id="date_of_birth" name="date_of_birth" class="form-input" required>
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="sex">Biologic Sex</label>
            <select id="sex" name="sex" class="form-select">
                <option value="">-- Select --</option>
                <option value="F">Female</option>
                <option value="M">Male</option>
                <option value="O">Other</option>
                <option value="U">Unknown</option>
            </select>
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="mrn">Medical Record Number (MRN)</label>
            <input type="text" id="mrn" name="mrn" class="form-input" maxlength="50" placeholder="Optional">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="site_id">Site{% if site_options|length > 1 %} <span class="text-error">*</span>{% endif %}</label>
            <select id="site_id" 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 mt-lg">Contact Information</h3>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="email">Email</label>
            <input type="email" id="email" name="email" class="form-input" maxlength="255" placeholder="patient@example.com">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="phone">Phone</label>
            <input type="tel" id="phone" name="phone" class="form-input" maxlength="50" placeholder="(555) 123-4567">
        </div>
    </div>

    <h3 class="mb-lg mt-lg">Address (Optional)</h3>

    <div class="form-group mb-lg">
        <label class="form-label" for="address_line1">Address Line 1</label>
        <input type="text" id="address_line1" name="address_line1" class="form-input" placeholder="Street address">
    </div>

    <div class="form-group mb-lg">
        <label class="form-label" for="address_line2">Address Line 2</label>
        <input type="text" id="address_line2" name="address_line2" class="form-input" placeholder="Apt, suite, unit, etc.">
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 2;">
            <label class="form-label" for="city">City</label>
            <input type="text" id="city" name="city" class="form-input">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="state">State</label>
            <input type="text" id="state" name="state" class="form-input" maxlength="2" placeholder="CA">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="postal_code">Postal Code</label>
            <input type="text" id="postal_code" name="postal_code" class="form-input" placeholder="12345">
        </div>
    </div>

    <div class="form-group mb-lg">
        <label class="form-label" for="country">Country</label>
        <input type="text" id="country" name="country" class="form-input" value="US" maxlength="2">
    </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="{{ redirect_url }}" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Create Patient</button>
    </div>
</form>
{% endblock %}