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

{% block stylesheets %}
<style>
.summary-card { border-radius: 10px; border: 1px solid #e2e8f0; }
.summary-card .card-header { background: #f8fafc; border-radius: 10px 10px 0 0; padding: .75rem 1rem; font-weight: 600; font-size: .88rem; color: #374151; }
.bank-row { padding: .6rem .85rem; border-bottom: 1px solid #f1f5f9; font-size: .88rem; }
.bank-row:last-child { border-bottom: none; }
.bank-row .bank-name { font-weight: 600; color: #1e40af; }
.bank-row .amounts { font-size: .8rem; color: #64748b; margin-top: 2px; }
.cat-row { display: flex; justify-content: space-between; padding: .45rem .85rem; border-bottom: 1px solid #f1f5f9; font-size: .83rem; }
.cat-row:last-child { border-bottom: none; }
.cat-label { color: #374151; }
.cat-total { font-weight: 600; }
.cat-total.positive { color: #16a34a; }
.cat-total.negative { color: #dc2626; }
.grand-box { background: linear-gradient(135deg, #1d4ed8, #1e40af); color: #fff; border-radius: 10px; padding: 1.25rem; text-align: center; }
.grand-box .label { font-size: .78rem; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.grand-box .amount { font-size: 1.8rem; font-weight: 700; }
.too-many-box { background: #fef9c3; border: 1px solid #fde047; border-radius: 10px; padding: 1.5rem; text-align: center; }
.close-btn { background: #16a34a; color: #fff; border: none; border-radius: 8px; padding: .65rem 2rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .15s; }
.close-btn:hover { background: #15803d; }
.close-btn:disabled { background: #9ca3af; cursor: not-allowed; }
</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-cash-register text-primary mr-2"></i>Close Shift</h3>
      <small class="text-muted">Review your transactions and close the shift</small>
    </div>
    <a href="{% url 'closing:closing_list' %}" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-history mr-1"></i>Closing 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 %}

  {% if total_count == 0 %}
  <!-- No unclosed transactions -->
  <div class="card shadow-sm">
    <div class="card-body text-center py-5">
      <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
      <h5 class="text-success mb-1">All Caught Up!</h5>
      <p class="text-muted mb-3">No unclosed transactions found.</p>
      <a href="{% url 'closing:closing_list' %}" class="btn btn-outline-primary">
        <i class="fas fa-history mr-1"></i>View Closing History
      </a>
    </div>
  </div>

  {% elif too_many %}
  <!-- Too many transactions warning -->
  <div class="too-many-box mb-4">
    <i class="fas fa-exclamation-triangle fa-2x text-warning mb-2 d-block"></i>
    <h5 class="mb-1">Too Many Unclosed Transactions</h5>
    <p class="text-muted mb-2">
      <strong>{{ total_count }}</strong> unclosed transactions found (limit for full view: 300).
    </p>
    <p class="text-muted mb-3">Total Amount: <strong>{{ grand_total|floatformat:0 }}</strong></p>
    <form method="post">
      {% csrf_token %}
      <div class="form-group mb-2">
        <textarea name="notes" class="form-control" rows="2"
          placeholder="Notes (optional)" style="max-width:400px;margin:auto;"></textarea>
      </div>
      <button type="submit" class="close-btn"
        onclick="return confirm('Close all {{ total_count }} unclosed transactions?')">
        <i class="fas fa-lock mr-2"></i>Close All {{ total_count }} Transactions
      </button>
    </form>
    <div class="mt-3">
      <small class="text-muted">Or use </small>
      <a href="{% url 'closing:master_unclosed' %}" class="btn btn-outline-warning btn-sm">
        <i class="fas fa-calendar-alt mr-1"></i>Date-wise View
      </a>
    </div>
  </div>

  {% else %}
  <!-- Normal view: transaction list + summaries -->
  <div class="row">

    <!-- Left: Transaction List (70%) -->
    <div class="col-lg-7 col-xl-8 mb-4">
      <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span><i class="fas fa-list mr-2 text-primary"></i>Unclosed Transactions</span>
          <span class="badge badge-primary badge-pill">{{ total_count }}</span>
        </div>
        <div class="card-body p-0" style="max-height:500px; 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 unclosed_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 {% if bp.amount_transaction >= 0 %}text-success{% else %}text-danger{% endif %} font-weight-bold small">
                  {{ bp.amount_transaction|floatformat:0 }}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center">
          <span class="text-muted small">{{ total_count }} transaction(s)</span>
          <span class="font-weight-bold {% if grand_total >= 0 %}text-success{% else %}text-danger{% endif %}">
            Total: {{ grand_total|floatformat:0 }}
          </span>
        </div>
      </div>
    </div>

    <!-- Right: Summary + Close Button (30%) -->
    <div class="col-lg-5 col-xl-4 mb-4">

      <!-- Grand Total Box -->
      <div class="grand-box mb-3">
        <div class="label">Current Shift Total</div>
        <div class="amount">{{ grand_total|floatformat:0 }}</div>
        <small style="opacity:.75;">{{ total_count }} transaction(s)</small>
      </div>

      <!-- Bank-wise Summary -->
      <div class="summary-card mb-3">
        <div class="card-header">
          <i class="fas fa-university mr-1 text-primary"></i>Bank-wise Summary
        </div>
        {% for row in bank_summary %}
        <div class="bank-row">
          <div class="d-flex justify-content-between">
            <span class="bank-name">{{ row.bank_name }}</span>
            <span class="font-weight-bold {% if row.net >= 0 %}text-success{% else %}text-danger{% endif %}">
              {{ row.net|floatformat:0 }}
            </span>
          </div>
          <div class="amounts">
            Opening: <strong>{{ row.opening|floatformat:0 }}</strong>
            &nbsp;→&nbsp;
            Closing: <strong>{{ row.closing|floatformat:0 }}</strong>
          </div>
        </div>
        {% empty %}
        <div class="bank-row text-muted small">No bank data</div>
        {% endfor %}
      </div>

      <!-- Category-wise Summary -->
      <div class="summary-card mb-3">
        <div class="card-header">
          <i class="fas fa-tags mr-1 text-info"></i>Category-wise
        </div>
        {% for row in category_summary %}
        <div class="cat-row">
          <span class="cat-label">{{ row.label }} <small class="text-muted">({{ row.count }})</small></span>
          <span class="cat-total {% if row.total >= 0 %}positive{% else %}negative{% endif %}">
            {{ row.total|floatformat:0 }}
          </span>
        </div>
        {% endfor %}
      </div>

      <!-- Close Form -->
      <div class="card shadow-sm">
        <div class="card-body">
          <form method="post" id="close-form">
            {% csrf_token %}
            <div class="form-group">
              <label class="font-weight-bold small">Notes (optional)</label>
              <textarea name="notes" class="form-control form-control-sm" rows="2"
                        placeholder="Any notes for this closing..."></textarea>
            </div>
            <button type="submit" class="close-btn btn-block" id="close-btn">
              <i class="fas fa-lock mr-2"></i>Close Shift
            </button>
          </form>
        </div>
      </div>

    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script>
document.getElementById('close-form') && document.getElementById('close-form').addEventListener('submit', function (e) {
  var btn = document.getElementById('close-btn');
  if (!confirm('Close shift with {{ total_count }} transaction(s)? This cannot be undone.')) {
    e.preventDefault();
    return;
  }
  if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Closing...'; }
});
</script>
{% endblock %}