{% extends 'shop/base.html' %}
{% load i18n %}
{% block content %}
{% include 'shop/_manage_header.html' %}
<div class="d-flex align-items-center gap-2 mb-3">
    <h4 class="m-0"><code>#{{ order.reference }}</code></h4>
    {% include 'shop/_order_status_badge.html' %}
    <span class="text-muted ms-auto">{{ order.created_at|date:"Y-m-d H:i" }}</span>
</div>
<div class="row g-3">
    <div class="col-md-5">
        <div class="card"><div class="card-body">
            <div class="d-flex align-items-center gap-3 mb-3">
                <img src="{{ buyer_portrait }}" alt="" width="48" height="48" class="rounded">
                <div>
                    <div class="text-muted small">{% trans "Buyer" %}</div>
                    <div class="fw-semibold">{{ order.buyer.character_name }}</div>
                </div>
            </div>
            <div class="mb-2"><span class="text-muted small">{% trans "Discord" %}:</span>
                {% if order.buyer.discord_handle %}<button type="button" class="btn btn-sm btn-link p-0 align-baseline text-decoration-none"
                        data-copy="{{ order.buyer.discord_handle }}" title="{% trans 'Click to copy' %}">
                    <code>{{ order.buyer.discord_handle }}</code> <i class="fa-solid fa-copy"></i></button>{% else %}<span class="text-muted">&mdash;</span>{% endif %}
            </div>
            <p class="text-muted small mb-3">{% trans "Contact in-game (EVE-mail / contract) or via Discord if given." %}</p>
            <div class="text-muted small">{% trans "Additional information" %}</div>
            <div>{% if order.additional_info %}{{ order.additional_info|linebreaksbr }}{% else %}<span class="text-muted">{% trans "None" %}</span>{% endif %}</div>
        </div></div>
        <form method="post" action="{% url 'backoffice:set_order_status' shop.pk order.reference %}" class="card mt-3"><div class="card-body">
            {% csrf_token %}
            <label class="form-label">{% trans "Status" %}</label>
            <div class="d-flex gap-2">
                <select name="status" class="form-select">
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if order.status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
            </div>
        </div></form>
    </div>
    <div class="col-md-7">
        <div class="card"><div class="card-body">
            <table class="table align-middle mb-0">
                <thead><tr>
                    <th></th><th>{% trans "Item" %}</th>
                    <th class="text-end">{% trans "Qty" %}</th>
                    <th class="text-end">{% trans "Unit" %}</th>
                    <th class="text-end">{% trans "Total" %}</th>
                </tr></thead>
                <tbody>
                {% for line in order.lines.all %}
                <tr>
                    <td><img src="https://images.evetech.net/types/{{ line.eve_type.id }}/{% if line.section == 'bpc' %}bpc{% else %}icon{% endif %}?size=32" width="32" height="32" alt=""></td>
                    <td>{{ line.eve_type.name }}{% if line.label %} <span class="text-muted small">· {{ line.label }}</span>{% endif %}</td>
                    <td class="text-end">{{ line.quantity }}</td>
                    <td class="text-end">{{ line.unit_price_display }}</td>
                    <td class="text-end">{{ line.line_total_display }}</td>
                </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                    <tr><td colspan="4" class="text-end fw-semibold">{% trans "Estimated total" %}</td>
                        <td class="text-end fw-bold">{{ order.estimated_total_display }}</td></tr>
                    {% if order.has_ask %}<tr><td colspan="5" class="text-end text-warning small">{% trans "Some items priced on request" %}</td></tr>{% endif %}
                </tfoot>
            </table>
        </div></div>
    </div>
</div>
{% endblock %}
{% block extra_javascript %}
<script>
document.querySelectorAll("[data-copy]").forEach(function (btn) {
    btn.addEventListener("click", function () {
        navigator.clipboard.writeText(btn.getAttribute("data-copy")).then(function () {
            var icon = btn.querySelector("i");
            if (!icon) return;
            var prev = icon.className;
            icon.className = "fa-solid fa-check text-success";
            setTimeout(function () { icon.className = prev; }, 1200);
        });
    });
});
</script>
{% endblock %}