{# templates/pos_api/android_sales_view.html #}
{% extends "pos/base.html" %}
{% load humanize %}

{% block title %}Sale #{{ invoice_no }} — Detail{% endblock %}

{% block content %}
<style>
  .detail-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    margin-bottom:16px;
  }
  .detail-card-header {
    padding:12px 18px;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .detail-card-body {
    padding:16px 18px;
  }
  .info-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
  }
  .info-item-label {
    font-size:11px;
    font-weight:600;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .info-item-value {
    font-size:14px;
    font-weight:600;
    color:#111827;
    margin-top:2px;
  }
  .item-table {
    width:100%;
    font-size:13px;
  }
  .item-table th {
    background:#f9fafb;
    padding:8px 12px;
    font-weight:600;
    color:#374151;
    border-bottom:1px solid #e5e7eb;
    font-size:11px;
    text-transform:uppercase;
  }
  .item-table td {
    padding:9px 12px;
    border-bottom:1px solid #f3f4f6;
    vertical-align:top;
  }
  .item-table tr:last-child td {
    border-bottom:none;
  }
  .stock-pill {
    display:inline-block;
    padding:2px 8px;
    border-radius:12px;
    font-size:11px;
    font-weight:700;
  }
  .stock-pill.ok {
    background:#d1fae5;
    color:#065f46;
  }
  .stock-pill.low {
    background:#fef3c7;
    color:#92400e;
  }
  .stock-pill.zero {
    background:#fee2e2;
    color:#b91c1c;
  }
  .page-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
  }
  .page-title {
    font-size:20px;
    font-weight:800;
    color:#111827;
  }
  .layer-box {
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:8px 10px;
    margin-bottom:6px;
  }
  .layer-title {
    font-size:11px;
    font-weight:700;
    margin-bottom:4px;
  }
  .tiny-line {
    font-size:11px;
    line-height:1.45;
    color:#374151;
  }
  .status-chip {
    display:inline-block;
    padding:2px 8px;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.03em;
  }
  .status-ok {
    background:#dcfce7;
    color:#166534;
  }
  .status-warn {
    background:#fef3c7;
    color:#92400e;
  }
  .status-err {
    background:#fee2e2;
    color:#b91c1c;
  }
</style>

<div class="container-fluid py-3">

  <div class="page-header">
    <div>
      <div class="page-title">
        Sale Invoice <span style="color:#1a56db;">#{{ invoice_no }}</span>
      </div>
      <small class="text-muted">Android Staging Sale</small>
    </div>

    <div class="d-flex gap-2">
      <a class="btn btn-info btn-sm"
         href="{% url 'pos_api:android_sale_approve_single' invoice_no %}">
        Approve
      </a>

      <form method="post" action="{% url 'pos_api:android_sales_reject_bulk' %}" style="display:inline;">
        {% csrf_token %}
        <input type="hidden" name="invoice_nos" value="{{ invoice_no }}">
        <button type="submit"
                class="btn btn-danger btn-sm px-3"
                onclick="return confirm('Reject invoice #{{ invoice_no }}? This is permanent.');">
          ❌ Reject
        </button>
      </form>

      <a href="{% url 'pos_api:android_sales_list' %}" class="btn btn-outline-secondary btn-sm">← Back</a>
    </div>
  </div>

  {% if any_error %}
    <div class="alert alert-danger py-2">
      <b>Stock Issue Found:</b> One or more items have qty/bonus shortage.
    </div>
  {% elif any_warning %}
    <div class="alert alert-warning py-2">
      <b>Warning:</b> Some items have expiry-related warning/skip.
    </div>
  {% else %}
    <div class="alert alert-success py-2">
      <b>All good:</b> No stock shortage detected for current staging values.
    </div>
  {% endif %}

  <div class="detail-card">
    <div class="detail-card-header">
      <span class="fw-bold">Invoice Details</span>
      <span class="badge bg-warning text-dark">Staging</span>
    </div>
    <div class="detail-card-body">
      <div class="info-grid">
        <div>
          <div class="info-item-label">Invoice No</div>
          <div class="info-item-value">#{{ invoice_no }}</div>
        </div>
        <div>
          <div class="info-item-label">Customer</div>
          <div class="info-item-value">{{ pay.party_descp|default:"—" }}</div>
        </div>
        <div>
          <div class="info-item-label">Date</div>
          <div class="info-item-value">{{ pay.transaction_date }}</div>
        </div>
        <div>
          <div class="info-item-label">Time</div>
          <div class="info-item-value">{{ pay.bill_time|default:"—" }}</div>
        </div>
        <div>
          <div class="info-item-label">Total Amount</div>
          <div class="info-item-value text-primary">{{ pay.total_amount|floatformat:2|intcomma }}</div>
        </div>
        <div>
          <div class="info-item-label">Amount Received</div>
          <div class="info-item-value text-success">{{ pay.amount_transaction|floatformat:2|intcomma }}</div>
        </div>
        <div>
          <div class="info-item-label">Discount</div>
          <div class="info-item-value">{{ pay.discount|floatformat:2|intcomma }}</div>
        </div>
  
        {% if stock_roles %}
        <div>
          <div class="info-item-label">Pick Mode</div>
          <div class="info-item-value">{{ stock_roles.pick_mode }}</div>
        </div>
        <div>
          <div class="info-item-label">Expiry Warn Days</div>
          <div class="info-item-value">{{ stock_roles.expiry_warn_days }}</div>
        </div>
        {% endif %}
      </div>

      <div class="mt-3 pt-2" style="border-top:1px solid #e5e7eb;">
      <div class="info-item-label mb-1">Location Status</div>

      {% if location_ok %}
        <span class="badge badge-success">OK</span>
        {% if location_distance_m %}
          <small class="text-muted ml-2">
            {{ location_distance_m|floatformat:0 }} m
          </small>
        {% endif %}
      {% else %}
        <span class="badge badge-warning">{{ location_status }}</span>
        {% if location_distance_m %}
          <small class="text-muted ml-2">
            {{ location_distance_m|floatformat:0 }} m
          </small>
        {% endif %}
      {% endif %}
    </div>
    </div>
  </div>

  <div class="detail-card">
    <div class="detail-card-header">
      <span class="fw-bold">Items ({{ items|length }})</span>
      <div class="d-flex gap-2">
        <span class="badge bg-primary text-light">Qty: {{ total_qty|floatformat:2 }}</span>
        <span class="badge bg-dark text-light">Bonus: {{ total_bonus|floatformat:2 }}</span>
      </div>
    </div>

    <table class="item-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Product</th>
          <th class="text-end">Qty</th>
          <th class="text-end">Bonus</th>
          <th class="text-end">Price</th>
          <th class="text-end">Discount</th>
          <th class="text-end">Total</th>
          <th class="text-end">Stock Status</th>

        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr
          {% if item.row_status == 'err' %}
            style="background:#fff5f5;"
          {% elif item.row_status == 'warn' %}
            style="background:#fffbeb;"
          {% endif %}
        >
          <td class="text-muted" style="font-size:12px;">{{ forloop.counter }}</td>

          <td>
            <div class="fw-semibold">{{ item.product_name|default:"Unknown" }}</div>
            <small class="text-muted">
              Code: {{ item.product_code }}
              {% if item.p_per_pack %}&bull; PPP: {{ item.p_per_pack }}{% endif %}
            </small>
            <div class="mt-1">
              {% if item.row_status == 'err' %}
                <span class="status-chip status-err">Error</span>
              {% elif item.row_status == 'warn' %}
                <span class="status-chip status-warn">Warning</span>
              {% else %}
                <span class="status-chip status-ok">OK</span>
              {% endif %}
            </div>
          </td>

          <td class="text-end">{{ item.qty_disp }}</td>
          <td class="text-end text-muted">{{ item.bonus_disp }}</td>
          <td class="text-end">{{ item.item_price|floatformat:2|intcomma }}</td>
          <td class="text-end">{{ item.discount|floatformat:2 }}%</td>
          <td class="text-end fw-bold">{{ item.total_price|floatformat:2|intcomma }}</td>

          <td class="text-end">
            <span class="stock-pill {% if item.row_status == 'err' %}zero{% elif item.row_status == 'warn' %}low{% else %}ok{% endif %}">
              {{ item.legacy_stock|default:0|floatformat:2 }}
            </span>

            <br>
            <small class="text-muted" style="font-size:10px;">
              usable qty: {{ item.plan.qty_usable_total|floatformat:2 }}
            </small>

            {% if item.plan.bonus_usable_total %}
              <br>
              <small class="text-muted" style="font-size:10px;">
                usable bonus: {{ item.plan.bonus_usable_total|floatformat:2 }}
              </small>
            {% endif %}

            {% if item.qty_short > 0 %}
              <br><small class="text-danger" style="font-size:10px;">Qty short: {{ item.qty_short|floatformat:2 }}</small>
            {% endif %}

            {% if item.bonus_short > 0 %}
              <br><small class="text-danger" style="font-size:10px;">Bonus short: {{ item.bonus_short|floatformat:2 }}</small>
            {% endif %}

            {% if item.has_expiry_issue %}
              <br><small class="text-warning" style="font-size:10px;">Expiry rule triggered</small>
            {% endif %}
          </td>

          
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if bank_payments %}
  <div class="detail-card">
    <div class="detail-card-header">
      <span class="fw-bold">Bank Payments</span>
    </div>
    <table class="item-table">
      <thead>
        <tr>
          <th>Bank</th>
          <th class="text-end">Amount</th>
        </tr>
      </thead>
      <tbody>
        {% for bp in bank_payments %}
        <tr>
          <td class="fw-semibold">{{ bp.bank_name }}</td>
          <td class="text-end text-success fw-bold">{{ bp.amount_transaction|floatformat:2|intcomma }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

</div>
{% endblock %}