{% extends "admin/base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{{ order.order_number }}{% endblock title %}
{% block crumb %}{{ t(key="admin-orders", lang=lang | default(value='sk')) }}{% endblock crumb %}

{% block content %}
<div class="flex flex-wrap items-center justify-between gap-3">
  <div class="flex flex-wrap items-center gap-3">
    <h1 class="font-mono text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.order_number }}</h1>
    {% if order.status == "delivered" %}{{ ui::badge(label=t(key="order-status-" ~ order.status, lang=lang | default(value='sk')), variant="success") }}
    {% elif order.status == "shipped" %}{{ ui::badge(label=t(key="order-status-" ~ order.status, lang=lang | default(value='sk')), variant="primary") }}
    {% elif order.status == "paid" %}{{ ui::badge(label=t(key="order-status-" ~ order.status, lang=lang | default(value='sk')), variant="info") }}
    {% elif order.status == "cancelled" %}{{ ui::badge(label=t(key="order-status-" ~ order.status, lang=lang | default(value='sk')), variant="danger") }}
    {% else %}{{ ui::badge(label=t(key="order-status-" ~ order.status, lang=lang | default(value='sk')), variant="warning") }}
    {% endif %}
  </div>
  {{ ui::button(variant="outline-secondary", label=t(key="admin-orders", lang=lang | default(value='sk')), href="/admin/orders", size="px-3 py-2 text-sm") }}
</div>

{% if ship_error %}
{{ ui::alert_danger(message=ship_error, extra="mt-4") }}
{% endif %}

<div class="mt-6 grid gap-6 lg:grid-cols-3">
  <div class="space-y-6 lg:col-span-2">
    <div class="{{ ui::table_wrap_cls() }}">
      <table class="{{ ui::table_cls() }}">
        <thead class="{{ ui::thead_cls() }}">
          <tr>
            {{ ui::th(label=t(key="product", lang=lang | default(value='sk'))) }}
            {{ ui::th(label=t(key="quantity", lang=lang | default(value='sk'))) }}
            {{ ui::th(label=t(key="order-total", lang=lang | default(value='sk')), align="text-right") }}
          </tr>
        </thead>
        <tbody class="{{ ui::tbody_cls() }}">
          {% for item in items %}
          <tr>
            <td class="px-4 py-3">{{ item.product_name }}</td>
            <td class="px-4 py-3 tabular-nums">{{ item.quantity }}</td>
            <td class="px-4 py-3 text-right tabular-nums">{{ item.line_total }} {{ order.currency }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot class="{{ ui::tfoot_cls() }}">
          <tr>
            <td colspan="2" class="px-4 py-3 text-right font-semibold">{{ t(key="order-total", lang=lang | default(value='sk')) }}</td>
            <td class="px-4 py-3 text-right font-bold tabular-nums text-primary dark:text-primary-dark">{{ order.total }} {{ order.currency }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <aside class="space-y-6">
    <div class="space-y-3 rounded-radius border border-outline bg-surface p-5 text-sm dark:border-outline-dark dark:bg-surface-dark-alt">
      <div>
        <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="order-customer", lang=lang | default(value='sk')) }}</p>
        <p class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.customer_name }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.email }}</p>
        {% if order.phone %}<p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.phone }}</p>{% endif %}
      </div>
      {% if order.account_type == "company" %}
      <div>
        <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="account-company-details", lang=lang | default(value='sk')) }}</p>
        <p class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.company_name }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ t(key="company-ico", lang=lang | default(value='sk')) }}: {{ order.company_id }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ t(key="company-dic", lang=lang | default(value='sk')) }}: {{ order.tax_id }}</p>
        {% if order.vat_id %}<p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ t(key="company-icdph", lang=lang | default(value='sk')) }}: {{ order.vat_id }}</p>{% endif %}
      </div>
      {% endif %}
      <div>
        <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-shipping", lang=lang | default(value='sk')) }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.address }}<br>{{ order.zip }} {{ order.city }}<br>{{ order.country }}</p>
      </div>
      <div>
        <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-carrier", lang=lang | default(value='sk')) }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.carrier_name }} — {{ order.shipping }} {{ order.currency }}</p>
        {% if order.pickup_point_name %}<p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.pickup_point_name }}</p>{% endif %}
      </div>
      <div>
        <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-payment", lang=lang | default(value='sk')) }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">
          {% if order.payment_method == "bank_transfer" %}{{ t(key="payment-bank", lang=lang | default(value='sk')) }} · VS {{ order.variable_symbol }}{% else %}{{ t(key="payment-cod", lang=lang | default(value='sk')) }}{% endif %}
        </p>
      </div>
      {% if order.note %}
      <div>
        <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-note", lang=lang | default(value='sk')) }}</p>
        <p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.note }}</p>
      </div>
      {% endif %}
    </div>

    <div class="space-y-3 rounded-radius border border-outline bg-surface p-5 text-sm dark:border-outline-dark dark:bg-surface-dark-alt">
      <p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="order-fulfillment", lang=lang | default(value='sk')) }}</p>
      {% if order.tracking_number %}
      <p class="text-on-surface/80 dark:text-on-surface-dark/80">
        {{ t(key="order-shipped-via", lang=lang | default(value='sk')) }} <span class="font-medium">{{ carrier | upper }}</span>
      </p>
      <p class="text-on-surface/80 dark:text-on-surface-dark/80">
        {{ t(key="order-tracking", lang=lang | default(value='sk')) }}: <span class="font-mono font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.tracking_number }}</span>
      </p>
      {% if order.label_url %}
      {{ ui::button(variant="outline-secondary", label=t(key="order-label", lang=lang | default(value='sk')), href=order.label_url, size="px-3 py-1.5 text-xs", attrs='target="_blank" rel="noopener"') }}
      {% endif %}
      {% elif carrier == "none" %}
      <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="order-manual-fulfillment", lang=lang | default(value='sk')) }}</p>
      {% elif can_ship %}
      <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="order-send-hint", lang=lang | default(value='sk')) }}</p>
      <form method="post" action="/admin/orders/{{ order.id }}/ship"
        onsubmit="return confirm('{{ t(key="order-send-confirm", lang=lang | default(value='sk')) }}')">
        {% set carrier_up = carrier | upper %}
        {% set ship_label = t(key="order-send-to-carrier", lang=lang | default(value='sk')) ~ " " ~ carrier_up %}
        {{ ui::button(label=ship_label, type="submit", extra="w-full") }}
      </form>
      {% endif %}
    </div>

    <form method="post" action="/admin/orders/{{ order.id }}/status" class="space-y-3 rounded-radius border border-outline bg-surface p-5 dark:border-outline-dark dark:bg-surface-dark-alt">
      <label for="status" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="order-status", lang=lang | default(value='sk')) }}</label>
      <div class="relative">
        <select id="status" name="status"
          class="w-full appearance-none rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
          {% for status in statuses %}
          <option value="{{ status }}" {% if order.status == status %}selected{% endif %}>{{ t(key="order-status-" ~ status, lang=lang | default(value='sk')) }}</option>
          {% endfor %}
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-on-surface/60 dark:text-on-surface-dark/60"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
      </div>
      {{ ui::button(label=t(key="order-update-status", lang=lang | default(value='sk')), type="submit", extra="w-full") }}
    </form>
  </aside>
</div>
{% endblock content %}