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

{% block content %}
            <!-- Company Info Row -->
            {% include 'includes/print_header.html' %}
<div class="card shadow-sm p-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">{{ title }}</h4>
    <div class="no-print d-flex gap-2">
      <a href="{% url 'inventory:expense_list' %}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back
      </a>
      <button class="btn btn-outline-primary" onclick="window.print()">
        <i class="fas fa-print me-1"></i> Print
      </button>
    </div>
  </div>

  <table class="table table-bordered w-100">
    <tbody>
      <tr>
        <th style="width: 30%;">Expense ID</th>
        <td>{{ expense.id }}</td>
      </tr>
      <tr>
        <th>Category</th>
        <td>{{ expense.expense_category }}</td>
      </tr>
      <tr>
        <th>Spent By</th>
        <td>{{ expense.spent_by }}</td>
      </tr>
      <tr>
        <th>Approved By</th>
        <td>{{ expense.approved_by }}</td>
      </tr>
      <tr>
        <th>Amount</th>
        <td>AFN {{ expense.amount|floatformat:2 }}</td>
      </tr>
      <tr>
        <th>Currency</th>
        <td>{{ expense.currency }}</td>
      </tr>
      <tr>
        <th>From Account</th>
        <td>{{ expense.get_from_account_display }}</td>
      </tr>
      <tr>
        <th>Date</th>
        <td>{{ expense.date }}</td>
      </tr>
      {% if expense.description %}
      <tr>
        <th>Description</th>
        <td>{{ expense.description }}</td>
      </tr>
      {% endif %}
      {% if expense.remarks %}
      <tr>
        <th>Remarks</th>
        <td>{{ expense.remarks }}</td>
      </tr>
      {% endif %}
    </tbody>
  </table>

  <div class="row mt-5">
    <div class="col-6 text-start">
      <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 class="col-6 text-end">
      <p><strong>Authorized Signature:</strong></p>
      <div style="margin-top: 40px; border-top: 1px solid #000; width: 60%; float: right;"></div>
    </div>
  </div>
</div>

<style>
  @media print {
    .navbar, .sidebar, footer, nav, .no-print {
      display: none !important;
    }

    .container, .card {
      padding: 10px;
      font-size: small;
      box-shadow: none !important;
    }

    table {
      width: 100%;
      border-collapse: collapse !important;
    }

    table th, table td {
      padding: 6px;
      border: 1px solid #000 !important;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
    }
  }
</style>
{% endblock %}