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

{% block content %}
<div class="container-fluid py-4">

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="mb-0"><i class="fas fa-history text-primary mr-2"></i>Closing History</h3>
    <a href="{% url 'closing:closing_page' %}" class="btn btn-success btn-sm">
      <i class="fas fa-cash-register mr-1"></i>New Closing
    </a>
  </div>

  <!-- Filters -->
  <div class="card shadow-sm mb-3">
    <div class="card-body py-2">
      <form method="get" class="form-inline flex-wrap" style="gap:.5rem;">
        <div class="form-group mb-1">
          <label class="mr-1 small">From</label>
          <input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from_q }}">
        </div>
        <div class="form-group mb-1">
          <label class="mr-1 small">To</label>
          <input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to_q }}">
        </div>
        <div class="form-group mb-1">
          <input type="number" name="closing_no" class="form-control form-control-sm" placeholder="Closing #" value="{{ closing_no_q }}" style="width:110px;">
        </div>
        {% if is_master %}
        <div class="form-group mb-1">
          <input type="number" name="user_id" class="form-control form-control-sm" placeholder="User ID" value="{{ user_q }}" style="width:90px;">
        </div>
        {% endif %}
        <button type="submit" class="btn btn-primary btn-sm mb-1">
          <i class="fas fa-search mr-1"></i>Filter
        </button>
        <a href="{% url 'closing:closing_list' %}" class="btn btn-outline-secondary btn-sm mb-1">Reset</a>

        {% if is_master %}
        <a href="{% url 'closing:master_unclosed' %}" class="btn btn-warning btn-sm mb-1 ml-auto">
          <i class="fas fa-exclamation-circle mr-1"></i>All Unclosed
        </a>
        {% endif %}
      </form>
    </div>
  </div>

  {% if messages %}
  {% for message in messages %}
  <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
    {{ message }}<button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endfor %}
  {% endif %}

  <!-- Table -->
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="bg-light">
            <tr>
              <th>Closing #</th>
              {% if is_master %}<th>User</th>{% endif %}
              <th>Date</th>
              <th>Closed At</th>
              <th class="text-right">Total</th>
              <th>Notes</th>
              <th class="text-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for item in closings %}
            <tr>
              <td>
                <span class="badge badge-primary">#{{ item.obj.closing_no }}</span>
              </td>
              {% if is_master %}
              <td class="font-weight-bold">{{ item.username }}</td>
              {% endif %}
              <td>{{ item.obj.closing_date|date:"d M Y" }}</td>
              <td class="text-muted small">{{ item.obj.closed_at|date:"d M Y H:i" }}</td>
              <td class="text-right font-weight-bold {% if item.total >= 0 %}text-success{% else %}text-danger{% endif %}">
                {{ item.total|floatformat:0 }}
              </td>
              <td class="text-muted small">{{ item.obj.notes|truncatechars:30 }}</td>
              <td class="text-right">
                <a href="{% url 'closing:closing_detail' item.obj.closing_no %}"
                   class="btn btn-sm btn-outline-primary" title="View">
                  <i class="fas fa-eye"></i>
                </a>
                <a href="{% url 'closing:print_thermal' item.obj.closing_no %}"
                   target="_blank" class="btn btn-sm btn-outline-secondary ml-1" title="Print">
                  <i class="fas fa-print"></i>
                </a>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="7" class="text-center py-4 text-muted">
                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                No closings found for selected filters.
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}