{% extends 'django_forms_workflows/base.html' %}
{% load forms_workflows_tags %}

{% block title %}Submission #{{ submission.id }} - {{ site_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-10 mx-auto">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>Submission #{{ submission.id }}</h1>
            <div class="d-flex align-items-center gap-2">
                {% if submission.status == 'draft' %}
                    <span class="badge bg-secondary">Draft</span>
                {% elif submission.status == 'submitted' %}
                    <span class="badge bg-info">Submitted</span>
                {% elif submission.status == 'pending_approval' %}
                    <span class="badge bg-warning text-dark">Pending Approval</span>
                {% elif submission.status == 'approved' %}
                    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Approved</span>
                {% elif submission.status == 'pending_approval' %}
                    <span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i>Pending Approval</span>
                {% elif submission.status == 'rejected' %}
                    <span class="badge bg-danger">Rejected</span>
                {% elif submission.status == 'withdrawn' %}
                    <span class="badge bg-secondary">Withdrawn</span>
                {% endif %}
                {% with pdf=submission.form_definition.pdf_generation %}
                    {% if pdf == 'anytime' and submission.status != 'draft' %}
                        <a href="{% url 'forms_workflows:submission_pdf' submission.id %}" class="btn btn-sm btn-outline-primary" target="_blank">
                            <i class="bi bi-file-earmark-pdf"></i> View PDF
                        </a>
                        <a href="{% url 'forms_workflows:submission_pdf' submission.id %}" class="btn btn-sm btn-outline-primary" download data-download-spinner="Generating PDF…">
                            <i class="bi bi-download"></i> Download PDF
                        </a>
                    {% elif pdf == 'post_approval' and submission.status == 'approved' %}
                        <a href="{% url 'forms_workflows:submission_pdf' submission.id %}" class="btn btn-sm btn-outline-primary" target="_blank">
                            <i class="bi bi-file-earmark-pdf"></i> View PDF
                        </a>
                        <a href="{% url 'forms_workflows:submission_pdf' submission.id %}" class="btn btn-sm btn-outline-primary" download data-download-spinner="Generating PDF…">
                            <i class="bi bi-download"></i> Download PDF
                        </a>
                    {% elif pdf == 'post_approval' and can_approve_pdf and submission.status != 'draft' %}
                        <a href="{% url 'forms_workflows:submission_pdf' submission.id %}" class="btn btn-sm btn-outline-secondary" target="_blank">
                            <i class="bi bi-file-earmark-pdf"></i> View PDF (Pending)
                        </a>
                        <a href="{% url 'forms_workflows:submission_pdf' submission.id %}" class="btn btn-sm btn-outline-secondary" download data-download-spinner="Generating PDF…">
                            <i class="bi bi-download"></i> Download PDF (Pending)
                        </a>
                    {% endif %}
                {% endwith %}
            </div>
        </div>

        <!-- Submission Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Submission Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Form:</strong> {{ submission.form_definition.name }}</p>
                        <p><strong>Submitter:</strong> {% if submission.submitter %}{{ submission.submitter.get_full_name|default:submission.submitter.username }}{% else %}Anonymous{% endif %}</p>
                        <p><strong>Created:</strong> {{ submission.created_at|date:"Y-m-d H:i" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Status:</strong> {{ submission.get_status_display }}</p>
                        {% if submission.submitted_at %}
                            <p><strong>Submitted:</strong> {{ submission.submitted_at|date:"Y-m-d H:i" }}</p>
                        {% endif %}
                        {% if submission.completed_at %}
                            <p><strong>Completed:</strong> {{ submission.completed_at|date:"Y-m-d H:i" }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Data (original submission fields only — approval-step fields rendered separately below) -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Form Data</h5>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    {% for entry in form_data_ordered %}
                        {% if entry.key not in approval_field_names %}
                        <tr>
                            <th style="width: 30%;">{{ entry.label }}</th>
                            <td>
                                {% if entry.value.url %}
                                    {# Single file upload with URL #}
                                    {% if entry.value.content_type and 'image' in entry.value.content_type %}
                                        <div class="mb-2">
                                            <img src="{{ entry.value.url }}" alt="{{ entry.value.filename }}" class="img-fluid" style="max-width: 400px; max-height: 400px;">
                                        </div>
                                    {% endif %}
                                    <a href="{{ entry.value.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-download"></i> {{ entry.value.filename }}
                                    </a>
                                    <small class="text-muted ms-2">
                                        {% if entry.value.size %}({{ entry.value.size|filesizeformat }}){% endif %}
                                    </small>
                                {% elif entry.value.path %}
                                    {# Single file with path but no URL #}
                                    <span class="text-muted">{{ entry.value.filename }}</span>
                                    <small class="text-muted ms-2">(File stored but URL unavailable)</small>
                                {% elif entry.value|is_signature %}
                                    {# Signature — inline base64 image #}
                                    <img src="{{ entry.value }}" alt="Signature" class="img-fluid" style="max-width: 400px; max-height: 160px; border: 1px solid #dee2e6; border-radius: .375rem;">
                                {% elif entry.value.0.filename %}
                                    {# Multi-file upload: list of file dicts #}
                                    <ul class="list-unstyled mb-0">
                                    {% for f in entry.value %}
                                        <li class="mb-1">
                                            {% if f.url %}
                                                {% if f.content_type and 'image' in f.content_type %}
                                                    <div class="mb-1">
                                                        <img src="{{ f.url }}" alt="{{ f.filename }}" class="img-fluid" style="max-width: 200px; max-height: 200px;">
                                                    </div>
                                                {% endif %}
                                                <a href="{{ f.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-download"></i> {{ f.filename }}
                                                </a>
                                                <small class="text-muted ms-2">{% if f.size %}({{ f.size|filesizeformat }}){% endif %}</small>
                                            {% else %}
                                                <span class="text-muted">{{ f.filename }}</span>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                    </ul>
                                {% else %}
                                    {{ entry.value }}
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}{# /approval_field_names check #}
                    {% endfor %}
                </table>
            </div>
        </div>

        <!-- Model-level Attachments (e.g. migrated SharePoint documents) -->
        {% if resolved_attachments %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-paperclip"></i> Attachments</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                {% for att in resolved_attachments %}
                    <li class="mb-2">
                        {% if att.url %}
                            <a href="{{ att.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-download"></i> {{ att.filename }}
                            </a>
                        {% else %}
                            <span class="text-muted"><i class="bi bi-file-earmark"></i> {{ att.filename }}</span>
                            <small class="text-muted ms-2">(URL unavailable)</small>
                        {% endif %}
                    </li>
                {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}

        <!-- Approval Step Responses (fields filled in by each approver, separate from original submission) -->
        {% if approval_step_sections and not hide_approval_history %}
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="bi bi-pencil-square"></i> Approval Step Responses</h5>
            </div>
            <div class="card-body p-0">
                {% for section in approval_step_sections %}
                <div {% if not forloop.last %}class="border-bottom"{% endif %}>
                    <div class="px-3 pt-3 pb-1 d-flex justify-content-between align-items-start flex-wrap gap-2">
                        <div>
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="mb-0 fw-bold">{{ section.step_name }}</h6>
                                {% if section.status == "approved" %}
                                <span class="badge bg-success">&#10003; Approved</span>
                                {% elif section.status == "rejected" %}
                                <span class="badge bg-danger">&#10007; Rejected</span>
                                {% endif %}
                            </div>
                            {% if section.completed_by %}
                            <div class="text-muted small">
                                by <strong>{{ section.completed_by }}</strong>{% if section.completed_at %} &middot; {{ section.completed_at|date:"N j, Y \a\t g:i a" }}{% endif %}
                            </div>
                            {% endif %}
                            {% if section.comments %}
                            <p class="mb-0 mt-1 small fst-italic text-secondary">
                                <span class="badge bg-warning text-dark me-1" title="This comment is visible to the submitter."><i class="bi bi-eye-fill"></i> Public</span>
                                &#8220;{{ section.comments }}&#8221;
                            </p>
                            {% endif %}
                        </div>
                    </div>
                    {% if section.fields %}
                    <div class="px-3 pb-3">
                        <table class="table table-bordered table-sm mb-0">
                            {% for field in section.fields %}
                            <tr>
                                <th style="width: 30%;">{{ field.label }}</th>
                                <td>
                                    {% if field.value.url %}
                                        {# Single file upload with URL #}
                                        {% if field.value.content_type and 'image' in field.value.content_type %}
                                            <div class="mb-2">
                                                <img src="{{ field.value.url }}" alt="{{ field.value.filename }}" class="img-fluid" style="max-width: 400px; max-height: 400px;">
                                            </div>
                                        {% endif %}
                                        <a href="{{ field.value.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-download"></i> {{ field.value.filename }}
                                        </a>
                                        <small class="text-muted ms-2">
                                            {% if field.value.size %}({{ field.value.size|filesizeformat }}){% endif %}
                                        </small>
                                    {% elif field.value.path %}
                                        {# Single file with path but no URL #}
                                        <span class="text-muted">{{ field.value.filename }}</span>
                                        <small class="text-muted ms-2">(File stored but URL unavailable)</small>
                                    {% elif field.value|is_signature %}
                                        {# Signature — inline base64 image #}
                                        <img src="{{ field.value }}" alt="Signature" class="img-fluid" style="max-width: 400px; max-height: 160px; border: 1px solid #dee2e6; border-radius: .375rem;">
                                    {% elif field.value.0.filename %}
                                        {# Multi-file upload: list of file dicts #}
                                        <ul class="list-unstyled mb-0">
                                        {% for f in field.value %}
                                            <li class="mb-1">
                                                {% if f.url %}
                                                    {% if f.content_type and 'image' in f.content_type %}
                                                        <div class="mb-1">
                                                            <img src="{{ f.url }}" alt="{{ f.filename }}" class="img-fluid" style="max-width: 200px; max-height: 200px;">
                                                        </div>
                                                    {% endif %}
                                                    <a href="{{ f.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                        <i class="bi bi-download"></i> {{ f.filename }}
                                                    </a>
                                                    <small class="text-muted ms-2">{% if f.size %}({{ f.size|filesizeformat }}){% endif %}</small>
                                                {% else %}
                                                    <span class="text-muted">{{ f.filename }}</span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                        </ul>
                                    {% else %}
                                        {{ field.value }}
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </table>
                    </div>
                {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Approval History -->
        {% if approval_tasks %}

        {% if hide_approval_history %}
        {# ---- Privacy mode: submitter sees only the final decision ---- #}
        <h5 class="mb-3"><i class="bi bi-shield-lock"></i> Approval Status</h5>
        <div class="card mb-4
            {% if submission.status == 'approved' %}border-success
            {% elif submission.status == 'rejected' %}border-danger
            {% else %}border-warning{% endif %}">
            <div class="card-body text-center py-4">
                {% if submission.status == 'approved' %}
                    <span class="badge bg-success fs-5 px-4 py-2">Approved</span>
                    {% if submission.completed_at %}
                    <p class="text-muted mt-2 mb-0">Decision made on {{ submission.completed_at|date:"F d, Y g:i A" }}</p>
                    {% endif %}
                {% elif submission.status == 'rejected' %}
                    <span class="badge bg-danger fs-5 px-4 py-2">Rejected</span>
                    {% if submission.completed_at %}
                    <p class="text-muted mt-2 mb-0">Decision made on {{ submission.completed_at|date:"F d, Y g:i A" }}</p>
                    {% endif %}
                    {% for task in approval_tasks %}
                        {% if task.status == 'rejected' and task.comments %}
                        <div class="alert alert-danger mt-3 mb-0 text-start">
                            <strong>Reason:</strong> {{ task.comments }}
                        </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <span class="badge bg-warning text-dark fs-5 px-4 py-2">Under Review</span>
                    <p class="text-muted mt-2 mb-0">Your submission is being reviewed. You will be notified when a decision is made.</p>
                {% endif %}
            </div>
        </div>

        {% elif stage_groups %}
        {# ---- Staged workflow: one card per stage ---- #}
        <h5 class="mb-3"><i class="bi bi-diagram-3"></i> Approval History</h5>
        {% for stage in stage_groups %}
        <div class="card mb-3
            {% if stage.rejected_count > 0 %}border-danger
            {% elif stage.approved_count == stage.total_count %}border-success
            {% elif stage.approved_count > 0 %}border-primary
            {% else %}border-secondary{% endif %}">
            <div class="card-header d-flex justify-content-between align-items-center
                {% if stage.rejected_count > 0 %}bg-danger text-white
                {% elif stage.approved_count == stage.total_count %}bg-success text-white
                {% elif stage.approved_count > 0 %}bg-primary text-white
                {% else %}bg-light text-muted{% endif %}">
                <span>
                    <strong>{% if workflow_name_label %}{{ workflow_name_label }}{% else %}Stage {{ stage.number }}{% if not stage.has_multiple_stages %}: {{ stage.name }}{% endif %}{% endif %}</strong>
                </span>
                <span class="badge bg-white
                    {% if stage.rejected_count > 0 %}text-danger
                    {% elif stage.approved_count == stage.total_count %}text-success
                    {% else %}text-secondary{% endif %}">
                    {{ stage.approved_count }}/{{ stage.total_count }} approved
                    {% if stage.rejected_count > 0 %}&nbsp;· {{ stage.rejected_count }} rejected{% endif %}
                </span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Step</th>
                                <th>Assigned To</th>
                                <th>Status</th>
                                <th>Completed By</th>
                                <th>Completed At</th>
                                <th>Decision Comment <span class="badge bg-warning text-dark" title="Comments are visible to the submitter."><i class="bi bi-eye-fill"></i> Public</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in stage.tasks %}
                            <tr>
                                <td><strong>{{ task.step_display_name }}</strong></td>
                                <td>
                                    {% if task.assigned_to %}
                                        {{ task.assigned_to.get_full_name|default:task.assigned_to.username }}
                                    {% elif task.assigned_group %}
                                        {{ task.assigned_group.name }} <span class="text-muted">(Group)</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td>
                                    {% if task.status == 'pending' %}<span class="badge bg-warning text-dark">Pending</span>
                                    {% elif task.status == 'approved' %}<span class="badge bg-success">Approved</span>
                                    {% elif task.status == 'rejected' %}<span class="badge bg-danger">Rejected</span>
                                    {% elif task.status == 'expired' %}<span class="badge bg-secondary">Expired</span>
                                    {% elif task.status == 'skipped' %}<span class="badge bg-secondary">Skipped</span>
                                    {% endif %}
                                </td>
                                <td>{% if task.completed_by %}{{ task.completed_by.get_full_name|default:task.completed_by.username }}{% else %}-{% endif %}</td>
                                <td>{% if task.completed_at %}{{ task.completed_at|date:"Y-m-d H:i" }}{% else %}-{% endif %}</td>
                                <td>{{ task.comments|default:"-" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endfor %}

        {% if sub_workflow_instance_stages %}
        {# ---- One table per sub-workflow instance, steps as rows ---- #}
        {% for section in sub_workflow_instance_stages %}
        <div class="card mb-3
            {% if section.rejected_count > 0 %}border-danger
            {% elif section.approved_count == section.total_count and section.total_count > 0 %}border-success
            {% elif section.approved_count > 0 %}border-primary
            {% else %}border-secondary{% endif %}">
            <div class="card-header d-flex justify-content-between align-items-center
                {% if section.rejected_count > 0 %}bg-danger text-white
                {% elif section.approved_count == section.total_count and section.total_count > 0 %}bg-success text-white
                {% elif section.approved_count > 0 %}bg-primary text-white
                {% else %}bg-light text-muted{% endif %}">
                <span>
                    <strong>{{ section.label }}</strong>
                </span>
                <span class="badge bg-white
                    {% if section.rejected_count > 0 %}text-danger
                    {% elif section.approved_count == section.total_count and section.total_count > 0 %}text-success
                    {% else %}text-secondary{% endif %}">
                    {{ section.approved_count }}/{{ section.total_count }} approved
                    {% if section.rejected_count > 0 %}&nbsp;· {{ section.rejected_count }} rejected{% endif %}
                </span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Step</th>
                                <th>Assigned To</th>
                                <th>Status</th>
                                <th>Completed By</th>
                                <th>Completed At</th>
                                <th>Decision Comment <span class="badge bg-warning text-dark" title="Comments are visible to the submitter."><i class="bi bi-eye-fill"></i> Public</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stage in section.stage_groups %}
                            {% for task in stage.tasks %}
                            <tr>
                                <td><strong>{{ stage.name }}</strong></td>
                                <td>
                                    {% if task.assigned_to %}
                                        {{ task.assigned_to.get_full_name|default:task.assigned_to.username }}
                                    {% elif task.assigned_group %}
                                        {{ task.assigned_group.name }} <span class="text-muted">(Group)</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td>
                                    {% if task.status == 'pending' %}<span class="badge bg-warning text-dark">Pending</span>
                                    {% elif task.status == 'approved' %}<span class="badge bg-success">Approved</span>
                                    {% elif task.status == 'rejected' %}<span class="badge bg-danger">Rejected</span>
                                    {% elif task.status == 'expired' %}<span class="badge bg-secondary">Expired</span>
                                    {% elif task.status == 'skipped' %}<span class="badge bg-secondary">Skipped</span>
                                    {% endif %}
                                </td>
                                <td>{% if task.completed_by %}{{ task.completed_by.get_full_name|default:task.completed_by.username }}{% else %}-{% endif %}</td>
                                <td>{% if task.completed_at %}{{ task.completed_at|date:"Y-m-d H:i" }}{% else %}-{% endif %}</td>
                                <td>{{ task.comments|default:"-" }}</td>
                            </tr>
                            {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endif %}

        {% else %}
        {# ---- Legacy flat workflow ---- #}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Approval History</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Step</th>
                                <th>Assigned To</th>
                                <th>Status</th>
                                <th>Completed By</th>
                                <th>Completed At</th>
                                <th>Decision Comment <span class="badge bg-warning text-dark" title="Comments are visible to the submitter."><i class="bi bi-eye-fill"></i> Public</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in approval_tasks %}
                            <tr>
                                <td>{{ task.step_name }}</td>
                                <td>
                                    {% if task.assigned_to %}
                                        {{ task.assigned_to.get_full_name|default:task.assigned_to.username }}
                                    {% elif task.assigned_group %}
                                        {{ task.assigned_group.name }} <span class="text-muted">(Group)</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if task.status == 'pending' %}<span class="badge bg-warning text-dark">Pending</span>
                                    {% elif task.status == 'approved' %}<span class="badge bg-success">Approved</span>
                                    {% elif task.status == 'rejected' %}<span class="badge bg-danger">Rejected</span>
                                    {% elif task.status == 'expired' %}<span class="badge bg-secondary">Expired</span>
                                    {% elif task.status == 'skipped' %}<span class="badge bg-secondary">Skipped</span>
                                    {% endif %}
                                </td>
                                <td>{% if task.completed_by %}{{ task.completed_by.get_full_name|default:task.completed_by.username }}{% else %}-{% endif %}</td>
                                <td>{% if task.completed_at %}{{ task.completed_at|date:"Y-m-d H:i" }}{% else %}-{% endif %}</td>
                                <td>{{ task.comments|default:"-" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}

        {% endif %}



        <!-- Actions -->
        <div class="mt-3 d-flex flex-wrap gap-2 align-items-center">
            <a href="{% url 'forms_workflows:my_submissions' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to My Submissions
            </a>
            {% if submission.status == 'draft' %}
                {% if submission.submitter == user %}
                    <a href="{% url 'forms_workflows:form_submit' submission.form_definition.slug %}"
                       class="btn btn-primary">
                        <i class="bi bi-pencil"></i> Continue Editing
                    </a>
                    <a href="{% url 'forms_workflows:discard_draft' submission.id %}"
                       class="btn btn-outline-danger">
                        <i class="bi bi-trash"></i> Discard Draft
                    </a>
                {% endif %}
            {% endif %}
            {% if submission.status == 'submitted' or submission.status == 'pending_approval' %}
                {% if submission.form_definition.allow_withdrawal and submission.submitter == user %}
                    <a href="{% url 'forms_workflows:withdraw_submission' submission.id %}" class="btn btn-outline-danger">
                        <i class="bi bi-x-circle"></i> Withdraw Submission
                    </a>
                {% endif %}
            {% endif %}
            {% if submission.status == 'rejected' or submission.status == 'withdrawn' %}
                {% if submission.form_definition.allow_resubmit and submission.submitter == user %}
                    <a href="{% url 'forms_workflows:resubmit_submission' submission.id %}" class="btn btn-outline-info">
                        <i class="bi bi-arrow-repeat"></i> Resubmit
                    </a>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}