{% extends 'admin_pages/base_admin.html' %}
{% block title %}Expense Voucher #{{ expense.id }}{% endblock %}

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

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
    <div>
      <h3 class="mb-1">Nana Tradings</h3>
      <p class="mb-0 text-muted">Expense Payment Voucher</p>
    </div>
    <div class="text-end d-print-none">
      <a href="{% url 'expense_list' %}" class="btn btn-secondary me-2">
        <i class="fas fa-arrow-left me-1"></i> Back
      </a>
      <button class="btn btn-primary" onclick="window.print()">
        <i class="fas fa-print me-1"></i> Print
      </button>
    </div>
  </div>

  <!-- Voucher Details -->
  <div class="mb-4">
    <table class="table table-bordered w-100">
      <tbody>
        <tr>
          <th style="width: 200px;">Voucher ID</th>
          <td>#{{ expense.id }}</td>
        </tr>
        <tr>
          <th>Expense Category</th>
          <td>{{ expense.expense_category }}</td>
        </tr>
        <tr>
          <th>Paid By</th>
          <td>{{ expense.paid_by }}</td>
        </tr>
        <tr>
          <th>Paid To</th>
          <td>{{ expense.paid_to }}</td>
        </tr>
        <tr>
          <th>Amount</th>
          <td>{{ expense.amount }} {{ expense.currency }}</td>
        </tr>
        <tr>
          <th>Date</th>
          <td>{{ expense.date|date:"Y-m-d" }}</td>
        </tr>
        <tr>
          <th>Description</th>
          <td>{{ expense.description|default:"N/A" }}</td>
        </tr>
        <tr>
          <th>Remarks</th>
          <td>{{ expense.remarks|default:"N/A" }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Signatures -->
  <div class="row mt-5">
    <div class="col-md-6">
      <p><strong>Prepared By:</strong></p>
      <div style="border-bottom: 1px solid #000; height: 40px;"></div>
    </div>
    <div class="col-md-6">
      <p><strong>Approved By:</strong></p>
      <div style="border-bottom: 1px solid #000; height: 40px;"></div>
    </div>
  </div>

  <!-- Print Date & Timestamp -->
  <div class="mt-4 text-muted">
    <small>
      Generated on: {{ now|default:expense.updated_at|date:"Y-m-d H:i" }}<br>
      Print Date: {{ now|date:"Y-m-d H:i" }}
    </small>
  </div>

</div>

<style>
  @media print {
    .navbar, .sidebar, .d-print-none, footer {
      display: none !important;
    }
    body {
      margin: 0;
      padding: 20px;
      background: white;
    }
    table {
      font-size: 14px;
    }
  }
</style>
{% endblock %}