{% extends "base.html" %}
{% load form_filters %}

{% block title %}{{ form.name }} - Submission Details{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>Submission Details</h2>
                <a href="" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Back
                </a>
            </div>
        </div>
    </div>

    <!-- Basic Information -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <strong>Submission ID:</strong> {{ submission.id }}
                </div>
                <div class="col-md-4">
                    <strong>Submitted:</strong> {{ submission.submitted_at|date:"M d, Y H:i" }}
                </div>
                <div class="col-md-4">
                    <strong>Form:</strong> {{ form.name }}
                </div>
            </div>
            {% if submission.applicant_name or submission.applicant_email %}
            <div class="row mt-2">
                {% if submission.applicant_name %}
                <div class="col-md-6">
                    <strong>Applicant Name:</strong> {{ submission.applicant_name }}
                </div>
                {% endif %}
                {% if submission.applicant_email %}
                <div class="col-md-6">
                    <strong>Email:</strong> {{ submission.applicant_email }}
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Responses Table -->
    <div class="card">
        <div class="card-body">
            <h5 class="mb-3">Responses</h5>
            {% get_all_responses_flat stage_responses as all_responses %}
            {% if all_responses %}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Field Label</th>
                            <th>Response Value</th>
                            <th>File</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for response in all_responses %}
                        <tr>
                            <td>
                                <strong>{{ response.field_label }}</strong>
                                {% if response.required %}
                                    <span class="text-danger">*</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if response.uploaded_file %}
                                    <span class="text-primary">File: {{ response.uploaded_file.name }}</span>
                                {% elif response.value %}
                                    {% if response.field_type == 'checkbox' and response.value|length > 0 %}
                                        <div>
                                            {% for val in response.value %}
                                                <span class="badge bg-secondary me-1">{{ val }}</span>
                                            {% endfor %}
                                        </div>
                                    {% elif response.field_type == 'radio' or response.field_type == 'select' %}
                                        <span class="badge bg-info">{{ response.value }}</span>
                                    {% else %}
                                        <p class="mb-0">{{ response.value|linebreaksbr }}</p>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">Not provided</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if response.uploaded_file %}
                                    <a href="{{ response.uploaded_file.url }}" class="btn btn-sm btn-outline-primary" target="_blank">
                                        <i class="fas fa-download"></i> Download
                                    </a>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center text-muted py-4">
                <p>No responses found for this submission.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* Minimal styling */
.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}
.table td {
    vertical-align: top;
}
.response-value {
    max-width: 300px;
}
</style>
{% endblock %}