{% extends "base.html" %}
{% load i18n static %}

{% load form_filters %}

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

{% block customCSS %}
<style>
    /* ================================================= */
    /* THEME VARIABLES AND GLOBAL STYLES */
    /* ================================================= */
    :root {
        --kaauh-teal: #00636e; /* Primary */
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
    }

    /* Primary Color Overrides */
    .text-primary { color: var(--kaauh-teal) !important; }
    .text-info { color: #17a2b8 !important; }
    .text-success { color: #28a745 !important; }
    .text-secondary { color: #6c757d !important; }
    .bg-info { background-color: #17a2b8 !important; }
    .bg-secondary { background-color: #6c757d !important; }
    
    /* Card enhancements */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        background-color: white;
    }
    
    .card-header {
        font-weight: 600;
        padding: 1rem 1.25rem;
        background-color: #f8f9fa; /* Light background */
        border-bottom: 1px solid var(--kaauh-border);
    }
    
    /* Main Action Button Style */
    .btn-main-action {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        padding: 0.5rem 1rem;
        transition: all 0.2s ease;
    }
    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    /* Secondary outline button */
    .btn-outline-secondary {
        color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal);
        font-weight: 500;
    }
    .btn-outline-secondary:hover {
        background-color: var(--kaauh-teal-dark);
        color: white;
        border-color: var(--kaauh-teal-dark);
    }

    /* ================================================= */
    /* RESPONSES TABLE SPECIFIC STYLES (Horizontal Layout) */
    /* ================================================= */
    
    /* Main table container */
    .table-submission {
        margin-bottom: 0;
        border: none;
        table-layout: auto; /* Allow columns to resize based on content */
    }

    /* Fixed first column (the row headers) */
    .table-submission th:first-child,
    .table-submission td:first-child {
        background-color: #f0f4f7; /* Slightly darker than header */
        font-weight: 600;
        color: var(--kaauh-primary-text);
        width: 150px;
        min-width: 150px;
        position: sticky; /* Keep it visible when scrolling right */
        left: 0;
        z-index: 2;
        border-right: 1px solid var(--kaauh-border);
    }
    .table-submission th:first-child {
        top: 0; /* Important for sticky header/row-header intersection */
    }

    /* Field Label Header Row (Top Row) */
    .table-submission thead th {
        font-weight: 600;
        background-color: #e9ecef; /* Light gray for headers */
        color: var(--kaauh-primary-text);
        vertical-align: middle;
        text-align: center;
        border: 1px solid var(--kaauh-border);
        border-bottom: 2px solid var(--kaauh-teal); /* Highlight the bottom of the header */
        padding: 0.75rem 0.5rem;
    }
    .table-submission thead th:not(:first-child) {
        min-width: 200px; /* Give response columns space */
        max-width: 300px;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Data Cells */
    .table-submission tbody td {
        vertical-align: top;
        padding: 0.75rem 0.75rem;
        border: 1px solid var(--kaauh-border);
        border-top: none;
    }
    
    /* Styling for multi-value responses */
    .table-submission .badge {
        font-weight: 500;
        margin-top: 0.25rem;
    }
    
    /* File display */
    .table-submission .fa-file {
        color: var(--kaauh-teal);
    }
    .table-submission .btn-outline-primary {
        color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
    }

</style>
{% endblock %}

{% block content %}

<div class="container-fluid py-4">
    <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item text-decorat"><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-secondary">Job Detail</a></li>
    <li class="breadcrumb-item"><a href="{% url 'form_builder' submission.template.pk%}" class="text-secondary">Form Template</a></li>
    <li class="breadcrumb-item active" aria-current="page"  style="
                            color: #F43B5E; /* Rosy Accent Color */
                            font-weight: 600; 
                        ">Submission Details</li>
  </ol>
</nav>
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-primary fw-bold">{% trans "Submission Details" %}</h2>
                <a href="{% url 'form_template_submissions_list' template.slug %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Submissions" %}
                </a>
            </div>
        </div>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h5 class="mb-0">{% trans "Submission Metadata" %}</h5>
        </div>
        <div class="card-body small">
            <div class="row g-3">
                <div class="col-md-4">
                    <i class="fas fa-fingerprint me-2 text-primary"></i> 
                    <strong>{% trans "Submission ID:" %}</strong> <span class="text-secondary">{{ submission.id }}</span>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-calendar-check me-2 text-primary"></i> 
                    <strong>{% trans "Submitted:" %}</strong> <span class="text-secondary">{{ submission.submitted_at|date:"M d, Y H:i" }}</span>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-file-alt me-2 text-primary"></i> 
                    <strong>{% trans "Form:" %}</strong> <span class="text-secondary">{{ submission.template.name }}</span>
                </div>
            </div>
            {% if submission.applicant_name or submission.applicant_email %}
            <div class="row g-3 mt-1">
                {% if submission.applicant_name %}
                <div class="col-md-4">
                    <i class="fas fa-user me-2 text-primary"></i> 
                    <strong>{% trans "Applicant Name:" %}</strong> <span class="text-secondary">{{ submission.applicant_name }}</span>
                </div>
                {% endif %}
                {% if submission.applicant_email %}
                <div class="col-md-4">
                    <i class="fas fa-envelope me-2 text-primary"></i> 
                    <strong>{% trans "Email:" %}</strong> <span class="text-secondary">{{ submission.applicant_email }}</span>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header">
            <h5 class="mb-0">{% trans "Form Responses" %}</h5>
        </div>
        <div class="card-body p-0">
            {% with submission=submission %}
                {% get_all_responses_flat submission as flat_responses %}

                {% if flat_responses %}
                    <div class="table-responsive">
                        <table class="table table-submission table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">{% trans "Field Property" %}</th>
                                    {% for response in flat_responses %}
                                        <th scope="col">{{ response.field_label }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>{% trans "Response Value" %}</strong></td>
                                    {% for response in flat_responses %}
                                        <td>
                                            {% if response.uploaded_file %}
                                                <div>
                                                    <span class="d-block text-truncate" style="max-width: 180px;"><i class="fas fa-file me-1"></i> {{ response.uploaded_file.name }}</span>
                                                    <a href="{{ response.uploaded_file.url }}" class="btn btn-sm btn-outline-secondary mt-1" target="_blank" title="{% trans 'Download File' %}">
                                                        <i class="fas fa-download"></i> {% trans "Download" %}
                                                    </a>
                                                </div>
                                            {% elif response.value %}
                                                {% if response.field_type == 'checkbox' and response.value|length > 0 %}
                                                    <div class="d-flex flex-wrap gap-1">
                                                        {% for val in response.value %}
                                                            <span class="badge bg-secondary">{{ 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 small text-wrap">{{ response.value|linebreaksbr }}</p>
                                                {% endif %}
                                            {% else %}
                                                <span class="text-muted small">{% trans "Not provided" %}</span>
                                            {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Associated Stage" %}</strong></td>
                                    {% for response in flat_responses %}
                                        <td>
                                            <span class="small text-secondary">{{ response.stage_name|default:"N/A" }}</span>
                                        </td>
                                    {% endfor %}
                                </tr>
                                 <tr>
                                    <td><strong>{% trans "Field Required" %}</strong></td>
                                    {% for response in flat_responses %}
                                        <td>
                                            {% if response.required %}
                                                <span class="text-danger small"><i class="fas fa-asterisk"></i> {% trans "Yes" %}</span>
                                            {% else %}
                                                <span class="small text-success">{% trans "No" %}</span>
                                            {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center text-muted py-5 px-3">
                        <i class="fas fa-exclamation-circle fa-2x mb-3"></i>
                        <p class="lead">{% trans "No response fields were found for this submission." %}</p>
                        <p class="small">{% trans "This may occur if the form template was modified or responses were cleared." %}</p>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
</div>
{% endblock %}