{% 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">Mesero / Comanda</span>
        <h1>{{ table.name }}</h1>
        <p>{{ table.seats }} puestos · Estado actual: {{ table.get_status_display }}</p>
      </div>
      <div class="page-actions">
        <a href="{% url 'home' %}" class="btn btn-pos-soft">Volver al dashboard</a>
        {% if current_order %}
        <a href="{% url 'order_detail' current_order.id %}" class="btn btn-pos-primary">Ver recibo actual</a>
        {% endif %}
      </div>
    </div>

    <div class="row g-4 align-items-start">
      <div class="col-lg-5">
        <section class="panel-card">
          <div class="section-heading compact">
            <div>
              <span class="eyebrow">Agregar ítems</span>
              <h2>Nueva línea de comanda</h2>
            </div>
          </div>
          <form method="post" novalidate class="pos-form">
            {% csrf_token %}
            {% for field in form %}
            <div class="mb-3">
              <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
              {{ field }}
              {% if field.errors %}
              <div class="invalid-feedback d-block">{{ field.errors|join:", " }}</div>
              {% endif %}
            </div>
            {% endfor %}
            <button type="submit" class="btn btn-pos-primary btn-lg w-100">Agregar a la mesa</button>
          </form>
        </section>
      </div>
      <div class="col-lg-7">
        <section class="panel-card">
          <div class="section-heading compact">
            <div>
              <span class="eyebrow">Orden activa</span>
              <h2>{% if current_order %}Comanda #{{ current_order.id }}{% else %}Sin comanda todavía{% endif %}</h2>
            </div>
            {% if current_order %}
            <span class="status-pill {% if current_order.status == 'ready' %}status-ready{% elif current_order.status == 'preparing' %}status-busy{% else %}status-free{% endif %}">{{ current_order.get_status_display }}</span>
            {% endif %}
          </div>
          {% if current_order %}
          <div class="receipt-lines">
            {% for item in current_order.items.all %}
            <div class="receipt-line">
              <div>
                <strong>{{ item.quantity }} × {{ item.product.name }}</strong>
                <p>{% if item.note %}{{ item.note }}{% else %}Sin nota adicional{% endif %}</p>
              </div>
              <span>${{ item.line_total|floatformat:2 }}</span>
            </div>
            {% endfor %}
          </div>
          <div class="receipt-footer">
            <div>
              <span>Total actual</span>
              <strong>${{ current_order.subtotal|floatformat:2 }}</strong>
            </div>
            <a href="{% url 'order_detail' current_order.id %}" class="btn btn-pos-soft">Gestionar estado</a>
          </div>
          {% else %}
          <div class="empty-state-card small">
            <h3>Mesa lista para abrir</h3>
            <p>Agrega el primer producto para crear automáticamente la comanda activa.</p>
          </div>
          {% endif %}
        </section>
      </div>
    </div>
  </div>
</main>
{% endblock %}