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

{% block title %}Unassigned Invoices{% endblock %}
{% block heading %}Unassigned Invoices ({{ total }}){% endblock %}

{% block content %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><strong>{{ total }}</strong> invoices not assigned to any challan</span>
        <div>
          <a href="{% url 'sales:challan_create' %}" class="btn btn-sm btn-outline-secondary mr-1">
            <i class="fas fa-arrow-left"></i> Back
          </a>
          {% if invoices %}
          <form method="post" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="action" value="close_all">
            <button type="submit" class="btn btn-sm btn-danger"
                    onclick="return confirm('Close all {{ total }} invoices?\n\nThis sets remarks2 = -1 so they won\'t appear in challan creation.\nSales and payments remain untouched.')">
              <i class="fas fa-eye-slash"></i> Close All {{ total }} Invoices
            </button>
          </form>
          {% endif %}
        </div>
      </div>
      <div class="card-body table-responsive p-0">
        <table class="table table-striped mb-0" style="font-size:13px;">
          <thead class="thead-light">
            <tr>
              <th>#</th>
              <th>Invoice #</th>
              <th>Date</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for inv_no, amount, dt in invoices %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td><strong>{{ inv_no }}</strong></td>
              <td>{{ dt }}</td>
              <td class="text-right">{{ amount|floatformat:0 }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted py-4">No unassigned invoices.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}