{% extends "pos/base.html" %}
{% block title %}Order #{{ order.order_no }}{% endblock %}
{% block heading %}Order #{{ order.order_no }} — {{ order.order_type }}{% endblock %}
{% block content %}
<div class="mb-2">
  <a href="{% url 'hotel:resto_kot' order.order_no %}" class="btn btn-info btn-sm">KOT (Delta)</a>
  <a href="{% url 'hotel:resto_settle' order.order_no %}" class="btn btn-success btn-sm">Settle</a>
  <a href="{% url 'hotel:resto_credit' order.order_no %}" class="btn btn-warning btn-sm">Credit</a>
  <a href="{% url 'hotel:resto_shift_room' order.order_no %}" class="btn btn-secondary btn-sm">Shift to Room</a>
  <a href="{% url 'hotel:resto_convert_board' order.order_no %}" class="btn btn-dark btn-sm">Convert to Board</a>
  <a href="{% url 'hotel:resto_list' %}" class="btn btn-light btn-sm">Back</a>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header">Add Item</div>
      <div class="card-body">
        <form method="post">{% csrf_token %}
          <div class="form-row">
            <div class="col-md-6">
              <label class="small">Product</label>
              <select name="product_id" class="form-control">
                {% for p in products %}
                <option value="{{ p.id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-2">
              <label class="small">Qty</label>
              <input type="number" step="0.01" min="0" name="qty" class="form-control" value="1">
            </div>
            <div class="col-md-2">
              <label class="small">Rate</label>
              <input type="number" step="0.01" min="0" name="rate" class="form-control" value="0">
            </div>
            <div class="col-md-2">
              <label class="small">Disc</label>
              <input type="number" step="0.01" min="0" name="discount" class="form-control" value="0">
            </div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-3">
              <label class="small">Tax %</label>
              <input type="number" step="0.01" min="0" name="tax_percent" class="form-control" value="0">
            </div>
            <div class="col-md-9">
              <label class="small">Note</label>
              <input type="text" name="note" class="form-control">
            </div>
          </div>
          <div class="mt-2">
            <button class="btn btn-primary">Add</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header">Items</div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0">
          <thead><tr><th>Item</th><th class="text-right">Qty</th><th class="text-right">Rate</th><th class="text-right">Tax%</th><th class="text-right">Total</th></tr></thead>
          <tbody>
            {% for it in items %}
              {% with base=it.qty|floatformat:2|add:""|safe %}
            <tr>
              <td>{{ it.product.name }}</td>
              <td class="text-right">{{ it.qty }}</td>
              <td class="text-right">{{ it.rate }}</td>
              <td class="text-right">{{ it.tax_percent }}</td>
              <td class="text-right">
                {% with b=it.qty|floatformat:2 %}{% endwith %}
                {{ it.qty|floatformat:2|floatformat }} 
              </td>
            </tr>
              {% endwith %}
            {% empty %}
            <tr><td colspan="5" class="text-center text-muted">No items.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="card-footer text-right">
        <b>Subtotal:</b> Rs {{ subtotal|floatformat:2 }} &nbsp;
        <b>Tax:</b> Rs {{ tax_value|floatformat:2 }} &nbsp;
        <b>Grand:</b> Rs {{ grand_total|floatformat:2 }}
      </div>
    </div>
  </div>
</div>
{% endblock %}