{% extends "pos/base.html" %}
{% load static %}

{% block title %}Restaurant Sale Detail{% endblock %}
{% block heading %}Restaurant Sale Detail{% endblock %}

{% block stylesheets %}
<style>
  .rsd-wrap{max-width:1200px;margin:0 auto;}
  .rsd-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 3px 12px rgba(15,23,42,.05);margin-bottom:12px;}
  .rsd-head{padding:10px 12px;border-bottom:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  .rsd-title{font-size:15px;font-weight:900;color:#0f172a;}
  .rsd-body{padding:12px;}
  .mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
  .mini-kpi{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:13px;}
  .mini-kpi .label{font-size:12px;color:#64748b;font-weight:700;}
  .mini-kpi .value{font-size:24px;color:#0f172a;font-weight:900;line-height:1.2;}
  .k-blue{border-top:4px solid #2563eb;}
  .k-green{border-top:4px solid #059669;}
  .k-red{border-top:4px solid #dc2626;}
  .rsd-table th,.rsd-table td{vertical-align:middle !important;font-size:12px;}
  .rsd-table thead th{background:#f8fafc;color:#334155;font-weight:900;}
  .money{text-align:right;font-weight:900;white-space:nowrap;}
  .num{text-align:right;white-space:nowrap;}
  .info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
  .info-box{border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;}
  .info-box small{color:#64748b;font-weight:700;}
  .info-box div{font-weight:900;color:#0f172a;}
  @media(max-width:900px){.mini-kpis,.info-grid{grid-template-columns:1fr;}}
</style>
{% endblock %}

{% block content %}
<div class="rsd-wrap">

  <div class="rsd-card">
    <div class="rsd-head">
      <div>
        <div class="rsd-title">Restaurant Sale Detail - Order #{{ order.order_no }}</div>
        <small class="text-muted">
          {{ order.created_at|date:"Y-m-d h:i A" }}
        </small>
      </div>

      <div class="d-flex" style="gap:8px;">
        <a href="{% url 'hotel:reports:restaurant_sales_report_list' %}" class="btn btn-sm btn-outline-secondary">
          Back
        </a>

        <a href="{% url 'hotel:restaurant:preprint_html' order.order_no '80' %}" target="_blank" class="btn btn-sm btn-danger">
          Print Bill
        </a>
      </div>
    </div>
  </div>

  <div class="mini-kpis">
    <div class="mini-kpi k-blue">
      <div class="label">Total Amount</div>
      <div class="value">Rs {{ row.grand_total|floatformat:0 }}</div>
    </div>

    <div class="mini-kpi k-green">
      <div class="label">Received</div>
      <div class="value">Rs {{ row.received|floatformat:0 }}</div>
    </div>

    <div class="mini-kpi k-red">
      <div class="label">Balance</div>
      <div class="value">Rs {{ row.balance|floatformat:0 }}</div>
    </div>
  </div>

  <div class="rsd-card">
    <div class="rsd-head">
      <div class="rsd-title">Order Information</div>
    </div>

    <div class="rsd-body">
      <div class="info-grid">
        <div class="info-box">
          <small>Order Type</small>
          <div>{{ row.order_type|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Status</small>
          <div>{{ row.status|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Pay Mode</small>
          <div>{{ row.pay_mode|default:"-"|upper }}</div>
        </div>

        <div class="info-box">
          <small>Customer / Table</small>
          <div>{{ row.customer_title|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Phone</small>
          <div>{{ row.customer_phone|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Delivery Person</small>
          <div>
            {% if row.order_type == "DELIVERY" %}
              {{ delivery_person_name|default:"Unassigned" }}
            {% else %}
              -
            {% endif %}
          </div>
        </div>

        <div class="info-box">
          <small>Address / Remarks</small>
          <div>{{ row.customer_address|default:row.remarks|default:"-" }}</div>
        </div>

        <div class="info-box">
          <small>Created At</small>
          <div>{{ row.created_at|date:"Y-m-d h:i A" }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="rsd-card">
    <div class="rsd-head">
      <div class="rsd-title">Items</div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 rsd-table">
        <thead>
          <tr>
            <th>Product</th>
            <th class="num">Qty</th>
            <th class="money">Rate</th>
            <th class="money">Discount</th>
            <th class="money">Line Total</th>
            <th>Note</th>
          </tr>
        </thead>

        <tbody>
          {% for r in item_rows %}
            <tr>
              <td><b>{{ r.product_name }}</b></td>
              <td class="num">{{ r.qty|floatformat:2 }}</td>
              <td class="money">Rs {{ r.rate|floatformat:0 }}</td>
              <td class="money text-danger">Rs {{ r.discount|floatformat:0 }}</td>
              <td class="money">Rs {{ r.line_total|floatformat:0 }}</td>
              <td>{{ r.note|default:"-" }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="6" class="text-center text-muted py-3">
                No items found.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="rsd-card">
    <div class="rsd-head">
      <div class="rsd-title">Payment Rows</div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 rsd-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Bank / Cash</th>
            <th class="money">Amount</th>
            <th>Transaction Type</th>
          </tr>
        </thead>

        <tbody>
          {% for p in payment_rows %}
            <tr>
              <td>{{ p.date|date:"Y-m-d" }}</td>
              <td>{{ p.bank_name }}</td>
              <td class="money text-success">Rs {{ p.amount|floatformat:0 }}</td>
              <td>{{ p.transaction_type }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted py-3">
                No payment found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="2">Total Received</th>
            <th class="money text-success">Rs {{ row.received|floatformat:0 }}</th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
{% endblock %}