{% extends 'admin_pages/base_admin.html' %}
{% block title %}{{ title }}{% endblock %}

{% block content %}

<div class="card p-4 shadow-sm">
            <!-- Company Info Row -->
            {% include 'includes/print_header.html' %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">{{ title }}</h4>
    <button class="btn btn-outline-primary no-print" onclick="window.print()">
      <i class="fas fa-print me-1"></i> Print
    </button>
  </div>

  <hr>

  <div class="row mb-3">
    <div class="col-sm-6"><strong>Consumer:</strong> {{ account.consumer.name }}</div>
    <div class="col-sm-6"><strong>Transaction Date:</strong> {{ account.tx_date }}</div>
    <div class="col-sm-6"><strong>Transaction Number:</strong> {{ account.tx_number }}</div>
    <div class="col-sm-6"><strong>Details:</strong> {{ account.details }}</div>
    <div class="col-sm-6"><strong>Receipt No:</strong> {{ payment.receipt_no }}</div>
  </div>

  <table class="table table-bordered text-center">
    <thead class="table-light">
      <tr>
        <th>Previous Balance</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Remaining Balance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AFN {{ account.previous_balance|floatformat:2 }}</td>
        <td class="text-success">AFN {{ account.credit|floatformat:2 }}</td>
        <td class="text-danger">AFN {{ account.debit|floatformat:2 }}</td>
        <td><strong>AFN {{ account.current_balance|floatformat:2 }}</strong></td>
      </tr>
    </tbody>
  </table>

  <div class="mt-4">
    <p><strong>Printed at:</strong> {{ now|date:"Y-m-d H:i" }}</p>
    <p><strong>Printed by:</strong> {{ request.user.get_full_name|default:request.user.username }}</p>
  </div>
</div>

<style>
  @media print {
    .navbar, .sidebar, footer, nav, .no-print {
      display: none !important;
    }
    .container {
      padding: 20px;
      font-size: 12px;
    }
    p, .table td, .table th {
      margin: 0;
      padding: 6px;
      line-height: 1.4;
    }
  }
</style>
{% endblock %}