{% extends "django_program/manage/base.html" %}

{% block title %}Review Receipt{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="{% url 'manage:dashboard' conference.slug %}">Dashboard</a>
  <span class="breadcrumb-separator"></span>
  <a href="{% url 'manage:travel-grant-list' conference.slug %}">Travel Grants</a>
  <span class="breadcrumb-separator"></span>
  <span>Review Receipt</span>
</nav>
{% endblock %}

{% block page_title %}
<h1>Review Receipt</h1>
{% endblock %}

{% block content %}
<div class="info-grid" style="margin-bottom: 2rem;">
  <div class="info-item">
    <div class="info-item-label">Applicant</div>
    <div class="info-item-value">{{ receipt.grant.user.get_full_name|default:receipt.grant.user.username }}</div>
  </div>
  <div class="info-item">
    <div class="info-item-label">Receipt Type</div>
    <div class="info-item-value">{{ receipt.get_receipt_type_display }}</div>
  </div>
  <div class="info-item">
    <div class="info-item-label">Amount</div>
    <div class="info-item-value">${{ receipt.amount }}</div>
  </div>
  <div class="info-item">
    <div class="info-item-label">Date</div>
    <div class="info-item-value">{{ receipt.date|date:"M j, Y" }}</div>
  </div>
  {% if receipt.description %}
  <div class="info-item">
    <div class="info-item-label">Description</div>
    <div class="info-item-value">{{ receipt.description }}</div>
  </div>
  {% endif %}
  <div class="info-item">
    <div class="info-item-label">Status</div>
    <div class="info-item-value">
      {% if receipt.approved %}
      <span class="badge badge--active">Approved</span>
      {% elif receipt.flagged %}
      <span class="badge badge--inactive">Flagged</span>
      {% else %}
      <span class="badge badge--warning">Pending</span>
      {% endif %}
    </div>
  </div>
  <div class="info-item">
    <div class="info-item-label">Uploaded</div>
    <div class="info-item-value">{{ receipt.created_at|date:"N j, Y, P" }}</div>
  </div>
</div>

<h2 class="section-heading">Receipt File</h2>
<div style="margin-bottom: 2rem; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 1rem;">
  {% if receipt.receipt_file %}
  <p style="margin-bottom: 0.5rem;"><a href="{{ receipt.receipt_file.url }}" target="_blank" class="btn btn-sm btn-secondary">Open File</a></p>
  {% if receipt.receipt_file.name|lower|slice:"-4:" == ".pdf" %}
  <p style="font-size: 0.85rem; color: var(--color-text-muted);">PDF file — click to open in a new tab.</p>
  {% else %}
  <img src="{{ receipt.receipt_file.url }}" alt="Receipt" style="max-width: 100%; max-height: 600px; border-radius: var(--radius-sm);">
  {% endif %}
  {% endif %}
</div>

{% if not receipt.approved and not receipt.flagged %}
<h2 class="section-heading">Actions</h2>
<div style="display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 2rem;">
  <form method="post" action="{% url 'manage:receipt-approve' conference.slug receipt.pk %}">
    {% csrf_token %}
    <button type="submit" class="btn btn-primary" onclick="return confirm('Approve this receipt?');">Approve</button>
  </form>

  <div style="flex: 1; min-width: 300px;">
    <form method="post" action="{% url 'manage:receipt-flag' conference.slug receipt.pk %}">
      {% csrf_token %}
      <div class="form-group" style="margin-bottom: 0.5rem;">
        <label for="id_reason">Flag with reason</label>
        {{ flag_form.reason }}
      </div>
      <button type="submit" class="btn btn-danger">Flag Receipt</button>
    </form>
  </div>
</div>
{% endif %}

<div style="margin-top: 1rem;">
  <a href="{% url 'manage:receipt-review-queue' conference.slug %}" class="btn btn-secondary">Next Receipt</a>
  <a href="{% url 'manage:travel-grant-list' conference.slug %}" class="btn btn-secondary">Back to Grants</a>
</div>
{% endblock %}