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

{% block title %}Upload After Photos — {{ order.order_number }}{% endblock %}
{% block page_title %}Upload After-Cleaning Photos{% endblock %}
{% block page_subtitle %}{{ order.order_number }} — {{ order.customer.name }}{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="flex flex-wrap gap-3 mb-6">
    <a href="{% url 'orders:detail' order.pk %}" class="btn-secondary">Back to Order</a>
</div>

<div class="card mb-6">
    <p class="text-sm text-slate-600 mb-4">
        Capture or upload after-cleaning garment photos for AI assisted comparison.
        Manual verification is recommended before sharing results with customers.
    </p>

    {% if after_photos %}
    <h3 class="text-sm font-semibold text-slate-700 mb-3">Existing After-Cleaning Photos</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {% for photo in after_photos %}
        <div class="border rounded-lg p-2">
            <img src="{{ photo.photo.url }}" alt="{{ photo.get_photo_type_display }}" class="w-full rounded object-cover" style="max-height:120px">
            <p class="text-xs font-medium mt-1">{{ photo.get_photo_type_display }}</p>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <form method="post" enctype="multipart/form-data" id="after-photo-form">
        {% csrf_token %}
        <div id="after-photo-rows"></div>
        <div class="flex flex-wrap gap-3 mt-4">
            <button type="button" id="add-after-photo-row" class="btn-secondary">Add Photo Row</button>
            <button type="submit" class="btn-primary">Save After-Cleaning Photos</button>
        </div>
    </form>
</div>

<script id="after-photo-types-data" type="application/json">{{ photo_types_json|safe }}</script>
<script src="{% static 'js/damage_upload.js' %}"></script>
{% endblock %}