{% extends "base.html" %}

{% block title %}{{ meta_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<main class="content-section">
  <div class="container-xxl">
    <div class="page-intro">
      <div>
        <span class="eyebrow">Orden / Facturación</span>
        <h1>Orden #{{ order.id }}</h1>
        <p>{{ order.table.name }} · {{ order.get_status_display }} · {{ order.created_at|date:"d M Y · H:i" }}</p>
      </div>
      <div class="page-actions">
        <a href="{% url 'table_detail' order.table.id %}" class="btn btn-pos-soft">Volver a la mesa</a>
      </div>
    </div>

    <div class="row g-4 align-items-start">
      <div class="col-lg-7">
        <section class="panel-card">
          <div class="section-heading compact">
            <div>
              <span class="eyebrow">Detalle</span>
              <h2>Recibo en vivo</h2>
            </div>
            <span class="status-pill {% if order.status == 'paid' %}status-ready{% elif order.status == 'ready' %}status-ready{% elif order.status == 'preparing' %}status-busy{% else %}status-free{% endif %}">{{ order.get_status_display }}</span>
          </div>
          <div class="receipt-lines">
            {% for item in order.items.all %}
            <div class="receipt-line">
              <div>
                <strong>{{ item.quantity }} × {{ item.product.name }}</strong>
                <p>{% if item.note %}{{ item.note }}{% else %}Preparación estándar{% endif %}</p>
              </div>
              <span>${{ item.line_total|floatformat:2 }}</span>
            </div>
            {% endfor %}
          </div>
          <div class="receipt-footer large">
            <div>
              <span>Total</span>
              <strong>${{ order.subtotal|floatformat:2 }}</strong>
            </div>
            <div>
              <span>Ítems</span>
              <strong>{{ order.total_items }}</strong>
            </div>
          </div>
        </section>
      </div>
      <div class="col-lg-5">
        <section class="panel-card">
          <div class="section-heading compact">
            <div>
              <span class="eyebrow">Siguiente acción</span>
              <h2>Flujo operativo</h2>
            </div>
          </div>
          <div class="workflow-steps">
            <div class="workflow-step {% if order.status == 'open' %}active{% endif %}">Abierta</div>
            <div class="workflow-step {% if order.status == 'preparing' %}active{% endif %}">En preparación</div>
            <div class="workflow-step {% if order.status == 'ready' %}active{% endif %}">Lista</div>
            <div class="workflow-step {% if order.status == 'paid' %}active{% endif %}">Pagada</div>
          </div>
          {% if status_forms %}
          <div class="action-stack">
            {% for status, form in status_forms.items %}
            <form method="post">
              {% csrf_token %}
              {{ form.status }}
              <button type="submit" class="btn btn-pos-primary btn-lg w-100">
                {% if status == 'preparing' %}Enviar a cocina{% elif status == 'ready' %}Marcar lista{% elif status == 'paid' %}Cobrar y cerrar mesa{% else %}Actualizar{% endif %}
              </button>
            </form>
            {% endfor %}
          </div>
          {% else %}
          <div class="empty-state-card small paid-state">
            <h3>Cuenta cerrada</h3>
            <p>La orden ya fue cobrada y la mesa quedó disponible para un nuevo servicio.</p>
            <a href="{% url 'home' %}" class="btn btn-pos-soft">Volver al dashboard</a>
          </div>
          {% endif %}
        </section>
      </div>
    </div>
  </div>
</main>
{% endblock %}