{% extends "core/base.html" %}
{% load static %}
{% block title %}End of Day Reconciliation — SwiftPOS{% endblock %}
{% block topbar_title %}End of Day Reconciliation{% endblock %}

{% block content %}
<div class="swiftpos-content container-fluid py-4" style="max-width:780px;">

  {% if messages %}
  <div class="mb-3">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
      {{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <div class="card shadow-sm mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0 fw-bold"><i class="fas fa-cash-register me-2 text-primary"></i>Cash Count — {{ today }}</h6>
    </div>
    <div class="card-body">
      <div class="row mb-3">
        <div class="col-md-6">
          <div class="p-3 rounded" style="background:var(--sp-bg-alt,#f8fafc);">
            <div class="text-muted small">Expected Cash Today</div>
            <div class="fs-4 fw-bold">{{ currency_symbol }}{{ expected|floatformat:2 }}</div>
            <div class="text-muted small mt-1">Sum of all cash orders completed today</div>
          </div>
        </div>
        {% if existing %}
        <div class="col-md-6">
          <div class="p-3 rounded {% if existing.variance >= 0 %}bg-success bg-opacity-10{% else %}bg-danger bg-opacity-10{% endif %}">
            <div class="text-muted small">Last Recorded Variance</div>
            <div class="fs-4 fw-bold {% if existing.variance >= 0 %}text-success{% else %}text-danger{% endif %}">{{ currency_symbol }}{{ existing.variance|floatformat:2 }}</div>
            <div class="text-muted small mt-1">Actual entered: {{ currency_symbol }}{{ existing.actual|floatformat:2 }}</div>
          </div>
        </div>
        {% endif %}
      </div>

      <form method="post">
        {% csrf_token %}
        <div class="mb-3">
          <label class="form-label fw-semibold">Actual Cash in Drawer</label>
          <div class="input-group">
            <span class="input-group-text">{{ currency_symbol }}</span>
            <input type="number" name="actual" class="form-control form-control-lg"
                   step="0.01" min="0"
                   value="{{ existing.actual|default:'' }}"
                   placeholder="0.00" required>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">Notes (optional)</label>
          <textarea name="notes" class="form-control" rows="2" placeholder="Any discrepancies or comments…">{{ existing.notes|default:'' }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">
          <i class="fas fa-save me-1"></i> Save Reconciliation
        </button>
      </form>
    </div>
  </div>

  <!-- History -->
  {% if history %}
  <div class="card shadow-sm">
    <div class="card-header">
      <h6 class="mb-0 fw-semibold small">Recent Reconciliations</h6>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Date</th>
            <th class="text-end">Expected</th>
            <th class="text-end">Actual</th>
            <th class="text-end">Variance</th>
            <th>Cashier</th>
          </tr>
        </thead>
        <tbody>
          {% for r in history %}
          <tr>
            <td>{{ r.date }}</td>
            <td class="text-end">{{ currency_symbol }}{{ r.expected|floatformat:2 }}</td>
            <td class="text-end">{{ currency_symbol }}{{ r.actual|floatformat:2 }}</td>
            <td class="text-end fw-semibold {% if r.variance >= 0 %}text-success{% else %}text-danger{% endif %}">
              {{ currency_symbol }}{{ r.variance|floatformat:2 }}
            </td>
            <td class="text-muted small">{{ r.cashier }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}