{% 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="{% url 'form_template_submissions_list' template.slug %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Submissions
                </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>
            {% with submission=submission %}
                {% get_all_responses_flat submission as flat_responses %}

                {% if flat_responses %}
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width: 150px;">Field Label</th>
                                    {% for response in flat_responses %}
                                        <th scope="col">{{ response.field_label }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Response Value</strong></td>
                                    {% for response in flat_responses %}
                                        <td>
                                            {% if response.uploaded_file %}
                                                <div>
                                                    <span class="text-primary"><i class="fas fa-file"></i> {{ response.uploaded_file.name }}</span>
                                                    <a href="{{ response.uploaded_file.url }}" class="btn btn-sm btn-outline-primary ms-2" target="_blank" title="Download File">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                </div>
                                            {% 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>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td><strong>Stage</strong></td>
                                    {% for response in flat_responses %}
                                        <td>
                                            {{ response.stage_name|default:"N/A" }}
                                        </td>
                                    {% endfor %}
                                </tr>
                                 <tr>
                                    <td><strong>Required</strong></td>
                                    {% for response in flat_responses %}
                                        <td>
                                            {% if response.required %}
                                                <span class="text-danger"><i class="fas fa-asterisk"></i> Yes</span>
                                            {% else %}
                                                <span>No</span>
                                            {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center text-muted py-4">
                        <p>No responses found for this submission.</p>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* Minimal styling */
.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
    vertical-align: top;
    white-space: nowrap;
}
.table td {
    vertical-align: top;
}
.response-value {
    max-width: 300px;
}
.table th:first-child,
.table td:first-child {
    background-color: #f8f9fa;
    font-weight: 600;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(0, 0, 0, 0.02);
}
.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}
</style>
{% endblock %}