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

{% block stylesheets %}
<style>
.summary-box { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:1rem; }
.summary-box h6 { color:#374151; font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.6rem; }
.sum-row { display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px solid #f1f5f9; font-size:.85rem; }
.sum-row:last-child { border-bottom:none; }
.sum-row .lbl { color:#6b7280; }
.sum-row .val { font-weight:600; }
.pos { color:#16a34a; }
.neg { color:#dc2626; }
.closing-header { background:linear-gradient(135deg,#1e40af,#1d4ed8); color:#fff; border-radius:10px; padding:1.5rem; }
</style>
{% endblock %}

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

  <!-- Back + Print buttons -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{% url 'closing:closing_list' %}" class="text-muted small">
      <i class="fas fa-arrow-left mr-1"></i>Back to History
    </a>
    <div>
      <a href="{% url 'closing:print_thermal' closing_obj.closing_no %}" target="_blank"
         class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-receipt mr-1"></i>Thermal
      </a>
      <a href="{% url 'closing:print_a4' closing_obj.closing_no %}" target="_blank"
         class="btn btn-outline-secondary btn-sm ml-1">
        <i class="fas fa-file-alt mr-1"></i>A4
      </a>
      <a href="{% url 'closing:print_a5' closing_obj.closing_no %}" target="_blank"
         class="btn btn-outline-secondary btn-sm ml-1">
        <i class="fas fa-file mr-1"></i>A5
      </a>
    </div>
  </div>

  <!-- Header -->
  <div class="closing-header mb-4">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h4 class="mb-1">Closing #{{ closing_obj.closing_no }}</h4>
        <p class="mb-1" style="opacity:.8;">
          <i class="fas fa-user mr-1"></i>
          {% if closing_user %}{{ closing_user.username }}{% else %}User #{{ closing_obj.user_id }}{% endif %}
        </p>
        <p class="mb-0" style="opacity:.8; font-size:.85rem;">
          <i class="fas fa-calendar mr-1"></i>{{ closing_obj.closing_date|date:"d M Y" }}
          &nbsp;|&nbsp;
          <i class="fas fa-clock mr-1"></i>{{ closing_obj.closed_at|date:"H:i" }}
        </p>
      </div>
      <div class="col-md-6 text-md-right mt-3 mt-md-0">
        <div style="font-size:.8rem; opacity:.75;">Total</div>
        <div style="font-size:2rem; font-weight:700;">{{ grand_total|floatformat:0 }}</div>
        <div style="font-size:.8rem; opacity:.75;">{{ total_count }} transaction(s)</div>
      </div>
    </div>
    {% if closing_obj.notes %}
    <div class="mt-2 pt-2 border-top" style="border-color:rgba(255,255,255,.2)!important; font-size:.85rem; opacity:.85;">
      <i class="fas fa-sticky-note mr-1"></i>{{ closing_obj.notes }}
    </div>
    {% endif %}
  </div>

  <div class="row">

    <!-- Left: Transactions -->
    <div class="col-lg-8 mb-4">
      <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between">
          <span><i class="fas fa-list text-primary mr-1"></i>Transactions</span>
          <span class="badge badge-primary">{{ total_count }}</span>
        </div>
        <div class="card-body p-0" style="max-height:480px; overflow-y:auto;">
          <table class="table table-sm table-hover mb-0">
            <thead class="bg-light sticky-top">
              <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Type</th>
                <th>Invoice #</th>
                <th>Bank</th>
                <th class="text-right">Amount</th>
              </tr>
            </thead>
            <tbody>
              {% for bp in bp_list %}
              <tr>
                <td class="text-muted small">{{ bp.transaction_date|date:"d M Y" }}</td>
                <td class="text-muted small">{{ bp.transaction_time|default:"—" }}</td>
                <td class="small">{{ bp.type_label_display }}</td>
                <td class="text-muted small">{{ bp.transaction_id }}</td>
                <td class="small font-weight-500">{{ bp.bank_name_display }}</td>
                <td class="text-right font-weight-bold small {% if bp.amount_transaction >= 0 %}text-success{% else %}text-danger{% endif %}">
                  {{ bp.amount_transaction|floatformat:0 }}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="card-footer d-flex justify-content-between">
          <span class="text-muted small">{{ total_count }} transactions</span>
          <span class="font-weight-bold {% if grand_total >= 0 %}text-success{% else %}text-danger{% endif %}">
            {{ grand_total|floatformat:0 }}
          </span>
        </div>
      </div>
    </div>

    <!-- Right: Summaries -->
    <div class="col-lg-4 mb-4">

      <!-- Bank-wise -->
      <div class="summary-box mb-3">
        <h6><i class="fas fa-university mr-1"></i>Bank-wise</h6>
        {% for row in bank_summary %}
        <div class="sum-row">
          <span class="lbl">{{ row.bank_name }}</span>
          <span class="val {% if row.net >= 0 %}pos{% else %}neg{% endif %}">{{ row.net|floatformat:0 }}</span>
        </div>
        <div style="font-size:.76rem; color:#9ca3af; margin-bottom:.4rem; padding-left:.25rem;">
          Open: {{ row.opening|floatformat:0 }} → Close: {{ row.closing|floatformat:0 }}
        </div>
        {% endfor %}
      </div>

      <!-- Category-wise -->
      <div class="summary-box">
        <h6><i class="fas fa-tags mr-1"></i>Category-wise</h6>
        {% for row in category_summary %}
        <div class="sum-row">
          <span class="lbl">{{ row.label }} <span class="text-muted" style="font-size:.75rem;">({{ row.count }})</span></span>
          <span class="val {% if row.total >= 0 %}pos{% else %}neg{% endif %}">{{ row.total|floatformat:0 }}</span>
        </div>
        {% endfor %}
        <div class="sum-row" style="border-top:2px solid #e2e8f0; margin-top:.3rem; padding-top:.5rem;">
          <span style="font-weight:700;">Grand Total</span>
          <span style="font-weight:700;" class="{% if grand_total >= 0 %}pos{% else %}neg{% endif %}">{{ grand_total|floatformat:0 }}</span>
        </div>
      </div>

    </div>
  </div>

</div>
{% endblock %}