{% extends "base.html" %}

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

{% block content %}
<div class="page-header">
    <h1>Create Support Ticket</h1>
</div>

<div class="card" style="max-width: 800px;">
    <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" style="margin-bottom: 1rem;">
            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">Subject *</label>
            <input
                type="text"
                id="subject"
                name="subject"
                required
                maxlength="500"
                placeholder="Brief description of the issue"
                value="{{ prefill_subject or '' }}"
            >
        </div>

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

        <div class="form-group">
            <label for="ticket_type">Type *</label>
            <select id="ticket_type" name="ticket_type" 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">Priority *</label>
            <select id="priority" name="priority" 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">Site{% if site_options|length > 1 %} *{% endif %}</label>
            <select id="site_id" name="site_id" {% 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">Related TRF EUID (optional)</label>
            <input 
                type="text" 
                id="related_order_id" 
                name="related_order_id"
                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">Related Shipment ID (optional)</label>
            <input 
                type="text" 
                id="related_shipment_id" 
                name="related_shipment_id"
                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>
{% endblock %}