{% extends 'backoffice/base.html' %}

{% block title %}Pedido {{ object.code }}{% endblock %}

{% block main %}
  <h1 class="text-2xl font-semibold mb-4">Pedido {{ object.code }}</h1>

  <div class="stats stats-vertical sm:stats-horizontal shadow mb-6 bg-base-100 w-full sm:w-auto">
    <div class="stat">
      <div class="stat-title">Cliente</div>
      <div class="stat-value text-lg">{{ object.email }}</div>
    </div>
    <div class="stat">
      <div class="stat-title">Estado</div>
      <div class="stat-value text-lg"><span class="badge badge-lg">{{ object.get_status_display }}</span></div>
    </div>
    <div class="stat">
      <div class="stat-title">Total</div>
      <div class="stat-value text-lg">{{ object.total }} €</div>
    </div>
  </div>

  <p class="mb-6">
    <span class="font-medium">Dirección de envío:</span>
    {{ object.shipping_address }}, {{ object.shipping_city }}, {{ object.shipping_zip }}
  </p>

  <h2 class="text-xl font-semibold mb-2">Estado de envío</h2>
  <form method="post" action="{% url 'backoffice:order_update_shipping_status' object.pk %}" class="mb-6 max-w-sm">
    {% csrf_token %}
    {{ shipping_status_form.as_p }}
    <button class="btn btn-primary btn-sm">Actualizar</button>
  </form>

  <h2 class="text-xl font-semibold mb-2">Líneas</h2>
  <div class="overflow-x-auto bg-base-100 rounded-box border border-base-300 mb-6">
    <table class="table">
      <thead><tr><th>Producto</th><th>Cantidad</th><th>Precio</th><th>Total</th></tr></thead>
      <tbody>
        {% for line in lines %}
          <tr class="hover">
            <td>
              {{ line.product.name }}
              {% if line.variant %}
                {% for attribute_value in line.variant.attribute_values.all %}<span class="badge badge-ghost ml-1">{{ attribute_value }}</span>{% endfor %}
              {% endif %}
            </td>
            <td>{{ line.quantity }}</td>
            <td>{{ line.price }} €</td>
            <td>{{ line.total }} €</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <h2 class="text-xl font-semibold mb-2">Pagos</h2>
  <div class="overflow-x-auto bg-base-100 rounded-box border border-base-300">
    <table class="table">
      <thead><tr><th>Fecha</th><th>Importe</th><th>Método</th></tr></thead>
      <tbody>
        {% for payment in payments %}
          <tr class="hover">
            <td>{{ payment.creation_date }}</td>
            <td>{{ payment.amount }} €</td>
            <td>{{ payment.get_method_display }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="3" class="text-center py-6">Sin pagos registrados.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}