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

{% block title %}Fiscal Invoice {{ inv.usin }}{% endblock %}
{% block heading %}Fiscal Invoice: {{ inv.usin }}{% endblock %}

{% block content %}

<a href="{% url 'tax_registrations:dashboard' %}" class="btn btn-sm btn-outline-secondary mb-3">
  <i class="fas fa-arrow-left"></i> Back to Dashboard
</a>

<!-- Status Banner -->
<div class="alert alert-{% if inv.fiscal_status == 'success' %}success{% elif inv.fiscal_status == 'failed' %}danger{% else %}warning{% endif %} mb-3">
  <strong>Status: {{ inv.get_fiscal_status_display }}</strong>
  {% if inv.fiscal_invoice_number %}
    | Fiscal#: <code>{{ inv.fiscal_invoice_number }}</code>
  {% endif %}
  {% if inv.response_message %}
    | {{ inv.response_message }}
  {% endif %}
</div>

<div class="row">

  <!-- Invoice Header -->
  <div class="col-md-6">
    <div class="card shadow mb-3">
      <div class="card-header"><strong>Invoice Header</strong></div>
      <div class="card-body" style="font-size:13px;">
        <table class="table table-sm table-borderless">
          <tr><td class="text-muted">USIN</td><td><strong>{{ inv.usin }}</strong></td></tr>
          <tr><td class="text-muted">POS ID</td><td>{{ inv.pos_id }}</td></tr>
          <tr><td class="text-muted">Source</td><td>{{ inv.source_type }} {% if inv.source_id %}(#{{ inv.source_id }}){% endif %}</td></tr>
          <tr><td class="text-muted">Date</td><td>{{ inv.invoice_datetime|date:"d-M-Y H:i" }}</td></tr>
          <tr><td class="text-muted">Payment</td><td>{{ inv.get_payment_mode_display }}</td></tr>
          <tr><td class="text-muted">Type</td><td>{{ inv.get_invoice_type_display }}</td></tr>
          {% if inv.ref_usin %}<tr><td class="text-muted">RefUSIN</td><td>{{ inv.ref_usin }}</td></tr>{% endif %}
          {% if inv.buyer_name %}<tr><td class="text-muted">Buyer</td><td>{{ inv.buyer_name }}</td></tr>{% endif %}
          {% if inv.buyer_phone %}<tr><td class="text-muted">Phone</td><td>{{ inv.buyer_phone }}</td></tr>{% endif %}
        </table>
      </div>
    </div>
  </div>

  <!-- Amounts -->
  <div class="col-md-6">
    <div class="card shadow mb-3">
      <div class="card-header"><strong>Amounts</strong></div>
      <div class="card-body" style="font-size:13px;">
        <table class="table table-sm">
          <tr><td>Sale Value</td><td class="text-right">Rs. {{ inv.total_sale_value|floatformat:2 }}</td></tr>
          <tr><td>Tax Charged</td><td class="text-right">Rs. {{ inv.total_tax_charged|floatformat:2 }}</td></tr>
          <tr><td>Discount</td><td class="text-right">Rs. {{ inv.discount|floatformat:2 }}</td></tr>
          <tr><td>Further Tax</td><td class="text-right">Rs. {{ inv.further_tax|floatformat:2 }}</td></tr>
          <tr class="font-weight-bold"><td>Total Bill</td><td class="text-right">Rs. {{ inv.total_bill_amount|floatformat:2 }}</td></tr>
          <tr><td>Quantity</td><td class="text-right">{{ inv.total_quantity|floatformat:1 }}</td></tr>
        </table>
      </div>
    </div>

    {% if qr_url %}
    <div class="card shadow mb-3">
      <div class="card-header"><strong>QR Verification</strong></div>
      <div class="card-body">
        <a href="{{ qr_url }}" target="_blank" class="btn btn-outline-success btn-sm">
          <i class="fas fa-qrcode"></i> Verify on PRA
        </a>
        <br><small class="text-muted">{{ qr_url }}</small>
      </div>
    </div>
    {% endif %}

    {% if inv.fiscal_status == 'failed' %}
    <form method="post" action="{% url 'tax_registrations:retry_single' inv.pk %}">
      {% csrf_token %}
      <button class="btn btn-warning btn-sm">
        <i class="fas fa-redo"></i> Retry This Invoice
      </button>
      <small class="text-muted ml-2">Attempts: {{ inv.retry_count }}</small>
    </form>
    {% endif %}
  </div>

</div>

<!-- Items Table -->
<div class="card shadow mb-3">
  <div class="card-header"><strong>Invoice Items ({{ items|length }})</strong></div>
  <div class="card-body">
    <table class="table table-bordered table-sm" style="font-size:12px;">
      <thead class="thead-light">
        <tr>
          <th>Code</th><th>Name</th><th>PCTCode</th><th>Qty</th>
          <th>Rate</th><th>Sale Value</th><th>Tax%</th><th>Tax</th>
          <th>Disc</th><th>Total</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>
          <td>{{ item.item_code }}</td>
          <td>{{ item.item_name }}</td>
          <td><code>{{ item.pct_code }}</code></td>
          <td class="text-right">{{ item.quantity|floatformat:1 }}</td>
          <td class="text-right">-</td>
          <td class="text-right">{{ item.sale_value|floatformat:2 }}</td>
          <td class="text-right">{{ item.tax_rate }}%</td>
          <td class="text-right">{{ item.tax_charged|floatformat:2 }}</td>
          <td class="text-right">{{ item.discount|floatformat:2 }}</td>
          <td class="text-right font-weight-bold">{{ item.total_amount|floatformat:2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- API Logs -->
{% if logs %}
<div class="card shadow mb-3">
  <div class="card-header"><strong>API Logs</strong></div>
  <div class="card-body" style="font-size:12px;">
    {% for log in logs %}
    <div class="border rounded p-2 mb-2">
      <div>
        <span class="badge badge-{% if log.response_status == 200 %}success{% else %}danger{% endif %}">
          {{ log.response_status|default:"?" }}
        </span>
        <small class="text-muted ml-2">{{ log.created_at|date:"d-M-y H:i:s" }} | {{ log.request_url }}</small>
      </div>
      {% if log.response_body %}
      <pre class="mt-1 p-1 bg-light" style="max-height:100px;overflow:auto;font-size:11px;">{{ log.response_body }}</pre>
      {% endif %}
      {% if log.error_message %}
      <div class="text-danger mt-1"><small>{{ log.error_message }}</small></div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% endblock %}