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

{% block title %}Create Support Ticket - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-stack">
    <section class="brand-hero brand-hero-compact support-create-hero">
        <div class="brand-hero-copy">
            <p class="brand-eyebrow">Support</p>
            <h1 class="brand-title">Create a support ticket</h1>
            <p class="brand-description">
                Share the operational context and the LSMC team can route the request with the
                right priority and follow-up.
            </p>
        </div>
        <aside class="brand-panel brand-panel-compact">
            <div class="brand-mark brand-mark-md" aria-hidden="true"></div>
            <p class="brand-panel-kicker">support@lsmc.bio</p>
            <p class="brand-panel-copy">
                Use this form for technical issues, access questions, billing, specimen coordination,
                or result follow-up.
            </p>
        </aside>
    </section>

    <div class="card support-form-card">
        <form method="post" action="/support/create">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            {% if error %}
            <div class="alert alert-danger">
                {{ error }}
            </div>
            {% endif %}

            {% if prefill_trace_id %}
            <div class="alert alert-info">
                This ticket has been pre-filled from an error report (Trace ID: <code>{{ prefill_trace_id }}</code>).
                Please add any additional details about what you were doing, then submit.
            </div>
            {% endif %}

            <div class="form-group">
                <label for="subject" class="form-label">Subject *</label>
                <input
                    type="text"
                    id="subject"
                    name="subject"
                    class="form-input"
                    required
                    maxlength="500"
                    placeholder="Brief description of the issue"
                    value="{{ prefill_subject or '' }}"
                >
            </div>

            <div class="form-group">
                <label for="description" class="form-label">Description *</label>
                <textarea
                    id="description"
                    name="description"
                    class="form-textarea"
                    rows="6"
                    required
                    placeholder="Detailed description of the issue or request"
                >{{ prefill_description or '' }}</textarea>
            </div>

            <div class="form-group">
                <label for="ticket_type" class="form-label">Type *</label>
                <select id="ticket_type" name="ticket_type" class="form-select" required>
                    <option value="">Select Type</option>
                    <option value="TECHNICAL" {% if prefill_ticket_type == 'TECHNICAL' %}selected{% endif %}>Technical Issue</option>
                    <option value="BILLING" {% if prefill_ticket_type == 'BILLING' %}selected{% endif %}>Billing Question</option>
                    <option value="ORDER_ISSUE" {% if prefill_ticket_type == 'ORDER_ISSUE' %}selected{% endif %}>TRF Issue</option>
                    <option value="SPECIMEN_ISSUE" {% if prefill_ticket_type == 'SPECIMEN_ISSUE' %}selected{% endif %}>Specimen Issue</option>
                    <option value="RESULT_INQUIRY" {% if prefill_ticket_type == 'RESULT_INQUIRY' %}selected{% endif %}>Result Inquiry</option>
                    <option value="ACCESS_REQUEST" {% if prefill_ticket_type == 'ACCESS_REQUEST' %}selected{% endif %}>Access Request</option>
                    <option value="FEATURE_REQUEST" {% if prefill_ticket_type == 'FEATURE_REQUEST' %}selected{% endif %}>Feature Request</option>
                    <option value="OTHER" {% if prefill_ticket_type == 'OTHER' %}selected{% endif %}>Other</option>
                </select>
            </div>

            <div class="form-group">
                <label for="priority" class="form-label">Priority *</label>
                <select id="priority" name="priority" class="form-select" required>
                    <option value="NORMAL" {% if not prefill_priority or prefill_priority == 'NORMAL' %}selected{% endif %}>Normal</option>
                    <option value="LOW" {% if prefill_priority == 'LOW' %}selected{% endif %}>Low</option>
                    <option value="HIGH" {% if prefill_priority == 'HIGH' %}selected{% endif %}>High</option>
                    <option value="URGENT" {% if prefill_priority == 'URGENT' %}selected{% endif %}>Urgent</option>
                </select>
            </div>

            <div class="form-group">
                <label for="site_id" class="form-label">Site{% if site_options|length > 1 %} *{% 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 class="form-group">
                <label for="related_order_id" class="form-label">Related TRF EUID (optional)</label>
                <input
                    type="text"
                    id="related_order_id"
                    name="related_order_id"
                    class="form-input"
                    placeholder="EUID of related TRF"
                >
                <small class="text-muted">If this ticket is related to a specific TRF</small>
            </div>

            <div class="form-group">
                <label for="related_shipment_id" class="form-label">Related Shipment ID (optional)</label>
                <input
                    type="text"
                    id="related_shipment_id"
                    name="related_shipment_id"
                    class="form-input"
                    placeholder="EUID of related shipment"
                >
                <small class="text-muted">If this ticket is related to a specific shipment</small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Create Ticket</button>
                <a href="/support" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}