{% extends "base.html" %}
{% block page_heading %}Invoice {{ sale.invoice_number }}{% endblock %}
{% block content %}
<div class="no-print mb-3 d-flex flex-wrap gap-2">
  <a href="{{ url_for('billing') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> New Invoice</a>
  <button class="btn btn-primary btn-sm" onclick="window.print()"><i class="bi bi-printer"></i> Print</button>
  <a href="{{ url_for('invoice_pdf', sale_id=sale.id) }}" class="btn btn-success btn-sm"><i class="bi bi-file-pdf"></i> Download PDF</a>
  <img src="{{ url_for('invoice_qr', sale_id=sale.id) }}" alt="QR Code" style="height:40px;border-radius:4px" title="Invoice QR Code">
</div>

<div class="card-panel invoice-print" id="invoiceArea">
  <div class="row mb-4">
    <div class="col-8">
      <h3 class="text-primary mb-1">Smart Business Billing</h3>
      <p class="mb-0 text-muted">Inventory &amp; Billing Management System</p>
    </div>
    <div class="col-4 text-end">
      <h5>INVOICE</h5>
      <p class="mb-0"><strong>#{{ sale.invoice_number }}</strong></p>
      <p class="mb-0 small">{{ sale.sale_date }}</p>
    </div>
  </div>

  <div class="row mb-3">
    <div class="col-6">
      <strong>Bill To:</strong><br>
      {{ sale.customer_name or 'Walk-in Customer' }}<br>
      {% if sale.phone %}{{ sale.phone }}<br>{% endif %}
      {% if sale.address %}{{ sale.address }}{% endif %}
    </div>
    <div class="col-6 text-end">
      <img src="{{ url_for('invoice_qr', sale_id=sale.id) }}" alt="QR" style="width:80px">
    </div>
  </div>

  <table class="table table-bordered">
    <thead class="table-primary">
      <tr><th>#</th><th>Product</th><th>Qty</th><th>Rate</th><th>GST</th><th>Amount</th></tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ item.product_name }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.unit_price|currency }}</td>
        <td>{{ item.gst_amount|currency }}</td>
        <td>{{ item.line_total|currency }}</td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr><td colspan="5" class="text-end">Subtotal</td><td>{{ sale.subtotal|currency }}</td></tr>
      <tr><td colspan="5" class="text-end">GST Total</td><td>{{ sale.gst_amount|currency }}</td></tr>
      <tr><td colspan="5" class="text-end">Discount</td><td>{{ sale.discount|currency }}</td></tr>
      <tr class="fw-bold"><td colspan="5" class="text-end">Grand Total</td><td>{{ sale.total_amount|currency }}</td></tr>
    </tfoot>
  </table>

  <p class="text-center text-muted mt-4">Thank you for your business!</p>
</div>

{% if sale.payment_status != 'paid' %}
<div class="card-panel no-print mt-3">
  <h5>Record Payment</h5>
  <form method="POST" action="{{ url_for('record_payment') }}" class="row g-2 align-items-end">
    <input type="hidden" name="sale_id" value="{{ sale.id }}">
    <div class="col-md-3">
      <label class="form-label">Amount</label>
      <input type="number" name="amount" class="form-control" value="{{ sale.total_amount - sale.paid_amount }}" step="0.01" required>
    </div>
    <div class="col-md-3">
      <label class="form-label">Mode</label>
      <select name="payment_mode" class="form-select">
        <option value="cash">Cash</option>
        <option value="upi">UPI</option>
        <option value="card">Card</option>
        <option value="bank">Bank Transfer</option>
      </select>
    </div>
    <div class="col-md-3">
      <button type="submit" class="btn btn-success">Record Payment</button>
    </div>
  </form>
  <p class="small text-muted mt-2">Status: <span class="badge bg-warning">{{ sale.payment_status }}</span> · Paid: {{ sale.paid_amount|currency }}</p>
</div>
{% endif %}
{% endblock %}