{% extends 'agent/base_agent.html' %}

{% block title %}Submission Details #{{ object.id }} | ChatLab{% endblock %}
{% block agent_submissions_active %}active{% endblock %}

{% block header_center %}
    <span style="font-weight: 700; font-size: 16px;">Submission Details</span>
{% endblock %}

{% block custom_styles %}
    .detail-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1.5rem;
        margin-top: 1rem;
    }
    @media (max-width: 768px) {
        .detail-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }
{% endblock %}

{% block workspace %}
<div class="workspace-container container-wide">
    <div class="page-header">
        <div>
            <h2 class="page-title">Submission Details #{{ object.id }}</h2>
            <p class="page-subtitle">Submitted for <strong>{{ object.form.title }}</strong> from visitor <strong>{{ object.visitor_id }}</strong></p>
        </div>
        <a href="{% url 'agent_submission_list' %}" class="btn btn-secondary" style="border-radius: 20px;">
            &larr; Back to Submissions
        </a>
    </div>

    <div class="detail-grid">
        <!-- Answers Panel -->
        <div class="glass-card" style="padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem;">
            <h3 style="font-size: 1.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; font-weight: 700; color: var(--text-primary);">Visitor Responses</h3>
            
            {% if object.answers %}
                <div style="display: flex; flex-direction: column; gap: 1rem;">
                    {% for question, answer in object.answers.items %}
                        <div class="glass-card" style="padding: 1.25rem; background: #f9fafb; border: 1px solid var(--border-color); border-radius: 8px;">
                            <div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 700; letter-spacing: 0.05em;">
                                {{ question }}
                            </div>
                            <div style="font-size: 1.05rem; color: var(--text-primary); font-weight: 600; word-wrap: break-word;">
                                {{ answer }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p style="color: var(--text-muted);">No response data available.</p>
            {% endif %}
        </div>

        <!-- Status & Info Panel -->
        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
            <!-- Details Card -->
            <div class="glass-card" style="padding: 1.5rem;">
                <h3 style="font-size: 1.15rem; margin-bottom: 1.25rem; font-weight: 700; color: var(--text-primary);">Details</h3>
                
                <div style="display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem;">
                    <div>
                        <span style="color: var(--text-muted); font-size: 13px; font-weight: 600;">Form Title:</span>
                        <div style="font-weight: 600; margin-top: 0.15rem; color: var(--text-primary);">{{ object.form.title }}</div>
                    </div>
                    <div>
                        <span style="color: var(--text-muted); font-size: 13px; font-weight: 600;">Trigger Keyword:</span>
                        <div style="font-family: monospace; margin-top: 0.15rem; color: var(--text-primary);">{{ object.form.keyword }}</div>
                    </div>
                    <div>
                        <span style="color: var(--text-muted); font-size: 13px; font-weight: 600;">Visitor Reference:</span>
                        <div style="font-family: monospace; margin-top: 0.15rem; color: var(--text-primary);">{{ object.visitor_id }}</div>
                    </div>
                    <div>
                        <span style="color: var(--text-muted); font-size: 13px; font-weight: 600;">Submitted At:</span>
                        <div style="margin-top: 0.15rem; color: var(--text-primary);">{{ object.created_at|date:"Y-m-d h:i:s A" }}</div>
                    </div>
                </div>
            </div>

            <!-- Workflow Status Card -->
            <div class="glass-card" style="padding: 1.5rem;">
                <h3 style="font-size: 1.15rem; margin-bottom: 1.25rem; font-weight: 700; color: var(--text-primary);">Workflow Status</h3>
                
                <form method="post" action="{% url 'agent_submission_update_status' object.pk %}">
                    {% csrf_token %}
                    <div style="margin-bottom: 1.25rem;">
                        <label for="id_status" style="font-size: 13px; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 0.4rem;">Submission Status</label>
                        <select name="status" id="id_status" class="form-select">
                            {% for val, label in status_choices %}
                                <option value="{{ val }}" {% if object.status == val %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">
                        Update Status
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}