{% extends "index.html" %}
{% load static %}
{% load humanize %}

{% block content %}
<div class="container mt-5">
  <div class="card shadow-sm rounded-3">
    <div class="card-header bg-primary text-white">
      <h4 class="mb-0">Transaction Details</h4>
    </div>
    <div class="card-body" style="font-size: 1.05rem; line-height: 1.7;">

      <dl class="row">
        <dt class="col-sm-4 col-md-3 fw-bold">Date</dt>
        <dd class="col-sm-8 col-md-9 text-muted">{{ transaction.date }}</dd>

        <dt class="col-sm-4 col-md-3 fw-bold">Description</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.transaction }}</dd>

        <dt class="col-sm-4 col-md-3 fw-bold">Amount</dt>
        <dd class="col-sm-8 col-md-9 text-success fw-semibold">${{ transaction.amount|floatformat:2|intcomma }}</dd>

        <dt class="col-sm-4 col-md-3 fw-bold">Type</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.trans_type.trans_type }}</dd>

        <dt class="col-sm-4 col-md-3 fw-bold">Category</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.category.category }}</dd>

        {% if transaction.sub_cat %}
        <dt class="col-sm-4 col-md-3 fw-bold">Subcategory</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.sub_cat.sub_cat }}</dd>
        {% endif %}

        {% if transaction.invoice_numb %}
        <dt class="col-sm-4 col-md-3 fw-bold">Invoice #</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.invoice_numb }}</dd>
        {% endif %}

        {% if transaction.paid %}
        <dt class="col-sm-4 col-md-3 fw-bold">Paid</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.paid }}</dd>
        {% endif %}

        {% if transaction.team %}
        <dt class="col-sm-4 col-md-3 fw-bold">Team</dt>
        <dd class="col-sm-8 col-md-9">{{ transaction.team }}</dd>
        {% endif %}

        {% if transaction.receipt %}
        <dt class="col-sm-4 col-md-3 fw-bold">Receipt</dt>
        <dd class="col-sm-8 col-md-9">
          {% if ".pdf" in transaction.receipt.url|lower %}
            <a href="{{ transaction.receipt.url }}" target="_blank" class="btn btn-outline-primary btn-sm">
              View PDF Receipt
            </a>
          {% else %}
            <img src="{{ transaction.receipt.url }}" alt="Receipt Image" class="img-fluid rounded border mt-2" style="max-height: 300px;">
          {% endif %}
        </dd>
        {% endif %}
      </dl>

      <div class="text-end mt-4">
        <a href="{% url 'transactions' %}" class="btn btn-secondary">Back to Transactions</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}
