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

{% block stylesheets %}
<style>
.stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem 1.25rem; text-align: center; }
.stat-card .num { font-size: 1.8rem; font-weight: 700; color: #1e40af; }
.stat-card .lbl { font-size: .78rem; text-transform: uppercase; color: #6b7280; letter-spacing: .04em; }
.date-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid #f1f5f9; font-size: .88rem; }
.date-row:last-child { border-bottom: none; }
.date-row .d { font-weight: 600; color: #334155; }
.date-row .cnt { color: #6b7280; font-size: .8rem; }
.date-row .amt { font-weight: 700; color: #1d4ed8; }
.close-this-btn { font-size: .75rem; padding: .2rem .6rem; }
.too-many-banner { background: #fef9c3; border: 1px solid #fde047; border-radius: 8px; padding: 1rem 1.25rem; }
</style>
{% endblock %}

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

  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h3 class="mb-0"><i class="fas fa-exclamation-circle text-warning mr-2"></i>All Unclosed Transactions</h3>
      <small class="text-muted">Master view — all users, all banks</small>
    </div>
    <a href="{% url 'closing:closing_list' %}" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-history mr-1"></i>History
    </a>
  </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 %}

  <!-- Filter -->
  <div class="card shadow-sm mb-4">
    <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 font-weight-bold">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 font-weight-bold">To</label>
          <input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to_q }}">
        </div>
        <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:master_unclosed' %}" class="btn btn-outline-secondary btn-sm mb-1">All Time</a>
      </form>
    </div>
  </div>

  <!-- Stats -->
  <div class="row mb-4">
    <div class="col-sm-4 mb-2">
      <div class="stat-card shadow-sm">
        <div class="num">{{ total_count }}</div>
        <div class="lbl">Unclosed Rows</div>
      </div>
    </div>
    {% if grand_total is not None %}
    <div class="col-sm-4 mb-2">
      <div class="stat-card shadow-sm">
        <div class="num {% if grand_total >= 0 %}text-success{% else %}text-danger{% endif %}">{{ grand_total|floatformat:0 }}</div>
        <div class="lbl">Total Amount</div>
      </div>
    </div>
    {% endif %}
    {% if too_many %}
    <div class="col-sm-4 mb-2">
      <div class="stat-card shadow-sm">
        <div class="num text-warning">{{ threshold }}+</div>
        <div class="lbl">Threshold (date-wise mode)</div>
      </div>
    </div>
    {% endif %}
  </div>

  {% if too_many and date_summary %}
  <!-- Too many — date-wise view -->
  <div class="too-many-banner mb-3">
    <i class="fas fa-exclamation-triangle text-warning mr-2"></i>
    <strong>Too many unclosed transactions ({{ total_count }}).</strong>
    Showing date-wise summary. Close by date range using the buttons below.
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-header font-weight-bold">
      <i class="fas fa-calendar-alt mr-1 text-primary"></i>Date-wise Summary
    </div>
    <div class="card-body p-0" style="max-height: 450px; overflow-y: auto;">
      {% for row in date_summary %}
      <div class="date-row">
        <div>
          <span class="d">{{ row.transaction_date|date:"d M Y" }}</span>
          <span class="cnt ml-2">({{ row.row_count }} txns)</span>
        </div>
        <div class="d-flex align-items-center gap-3">
          <span class="amt">{{ row.net_amount|floatformat:0 }}</span>
          <!-- Close this date -->
          <form method="post" action="{% url 'closing:master_bulk_close' %}" class="ml-3 d-inline"
                data-date="{{ row.transaction_date|date:'d M Y' }}"
                onsubmit="return confirmClose(this)">
            {% csrf_token %}
            <input type="hidden" name="date_from" value="{{ row.transaction_date|date:'Y-m-d' }}">
            <input type="hidden" name="date_to"   value="{{ row.transaction_date|date:'Y-m-d' }}">
            <button type="submit" class="btn btn-sm btn-outline-success close-this-btn">
              <i class="fas fa-lock mr-1"></i>Close
            </button>
          </form>
        </div>
      </div>
      {% empty %}
      <div class="text-center py-4 text-muted">No dates to show.</div>
      {% endfor %}
    </div>
  </div>

  {% elif full_list %}
  <!-- Full list view -->

  <!-- Summaries -->
  <div class="row mb-4">
    <div class="col-md-6 mb-3">
      <div class="card shadow-sm">
        <div class="card-header font-weight-bold small">
          <i class="fas fa-university mr-1 text-primary"></i>Bank-wise
        </div>
        <div class="card-body p-0">
          <table class="table table-sm mb-0">
            <thead class="bg-light"><tr><th>Bank</th><th class="text-right">Amount</th></tr></thead>
            <tbody>
              {% for row in bank_summary %}
              <tr>
                <td>{{ row.bank_name }}</td>
                <td class="text-right font-weight-bold {% if row.net >= 0 %}text-success{% else %}text-danger{% endif %}">{{ row.net|floatformat:0 }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="card shadow-sm">
        <div class="card-header font-weight-bold small">
          <i class="fas fa-tags mr-1 text-info"></i>Category-wise
        </div>
        <div class="card-body p-0">
          <table class="table table-sm mb-0">
            <thead class="bg-light"><tr><th>Category</th><th class="text-right">Count</th><th class="text-right">Amount</th></tr></thead>
            <tbody>
              {% for row in category_summary %}
              <tr>
                <td>{{ row.label }}</td>
                <td class="text-right">{{ row.count }}</td>
                <td class="text-right font-weight-bold {% if row.total >= 0 %}text-success{% else %}text-danger{% endif %}">{{ row.total|floatformat:0 }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Transactions table -->
  <div class="card shadow-sm mb-4">
    <div class="card-header d-flex justify-content-between">
      <span><i class="fas fa-list text-primary mr-1"></i>Unclosed Transactions ({{ total_count }})</span>
      <span class="font-weight-bold {% if grand_total >= 0 %}text-success{% else %}text-danger{% endif %}">{{ grand_total|floatformat:0 }}</span>
    </div>
    <div class="card-body p-0" style="max-height: 400px; 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>User</th>
            <th>Type</th>
            <th>Invoice #</th>
            <th>Bank</th>
            <th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for bp in full_list %}
          <tr>
            <td class="small text-muted">{{ bp.transaction_date|date:"d M Y" }}</td>
            <td class="small text-muted">{{ bp.transaction_time|default:"—" }}</td>
            <td class="small">{{ bp.username_display }}</td>
            <td class="small">{{ bp.type_label_display }}</td>
            <td class="small text-muted">{{ 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>

  {% else %}
  <div class="card shadow-sm">
    <div class="card-body text-center py-5 text-muted">
      <i class="fas fa-check-circle fa-2x text-success mb-2 d-block"></i>
      No unclosed transactions found for the selected range.
    </div>
  </div>
  {% endif %}

  <!-- Bulk Close Form -->
  {% if total_count > 0 %}
  <div class="card shadow-sm border-warning">
    <div class="card-header bg-warning text-dark font-weight-bold">
      <i class="fas fa-lock mr-2"></i>Bulk Close All
    </div>
    <div class="card-body">
      <form method="post" action="{% url 'closing:master_bulk_close' %}"
            id="bulk-close-form"
            data-count="{{ total_count }}"
            data-from="{{ date_from_q }}"
            data-to="{{ date_to_q }}"
            onsubmit="return confirmBulkClose(this)">
        {% csrf_token %}
        <input type="hidden" name="date_from" value="{{ date_from_q }}">
        <input type="hidden" name="date_to"   value="{{ date_to_q }}">
        <div class="form-row align-items-end">
          <div class="col-md-8">
            <label class="font-weight-bold small">Notes (optional)</label>
            <input type="text" name="notes" class="form-control form-control-sm"
                   placeholder="e.g. End of day close by admin"
                   value="{% if date_from_q %}Bulk close: {{ date_from_q }} to {{ date_to_q }}{% endif %}">
          </div>
          <div class="col-md-4 mt-2 mt-md-0">
            <button type="submit" class="btn btn-warning btn-block">
              <i class="fas fa-lock mr-2"></i>Close All {{ total_count }} Transactions
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script>
// Used by per-date close buttons
function confirmClose(form) {
  var d = form.getAttribute('data-date') || 'this date';
  return confirm('Close all transactions on ' + d + '? This cannot be undone.');
}

// Used by bulk close button
function confirmBulkClose(form) {
  var cnt  = form.getAttribute('data-count') || '';
  var from = form.getAttribute('data-from') || '';
  var to   = form.getAttribute('data-to')   || '';
  var msg  = 'Close ALL ' + cnt + ' unclosed transactions';
  if (from) msg += ' from ' + from;
  if (to)   msg += ' to ' + to;
  msg += '? This cannot be undone.';
  return confirm(msg);
}
</script>
{% endblock %}