{% extends 'base.html' %}{% load static %}
{% block title %}Review {{ merchant.business_name }} — Admin{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:760px;margin:0 auto">
<div style="margin-bottom:18px"><a href="{% url 'admin_merchant_approvals' %}" style="color:var(--muted);font-size:.83rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px"><i class="fas fa-arrow-left"></i>All Applications</a></div>
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px">
  <h1 style="font-family:var(--ff);font-size:1.8rem;font-weight:700;letter-spacing:-.025em">{{ merchant.business_name }}</h1>
  <span class="badge {% if merchant.is_approved %}badge-teal{% else %}badge-gold{% endif %}" style="font-size:.82rem;padding:7px 14px">{% if merchant.is_approved %}<i class="fas fa-check-circle"></i>Approved{% else %}<i class="fas fa-clock"></i>Pending Review{% endif %}</span>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px">
  <div class="card" style="padding:20px">
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:13px">Business Info</div>
    <div style="display:flex;flex-direction:column;gap:9px;font-size:.86rem">
      <div><span style="color:var(--muted)">Owner: </span><strong>{{ merchant.user.username }}</strong></div>
      <div><span style="color:var(--muted)">Type: </span><span class="badge badge-violet">{{ merchant.get_merchant_type_display }}</span></div>
      <div><span style="color:var(--muted)">Country: </span><strong>{{ merchant.country }}</strong></div>
      <div><span style="color:var(--muted)">Phone: </span><strong>{{ merchant.business_phone|default:"N/A" }}</strong></div>
      <div><span style="color:var(--muted)">Applied: </span><strong>{{ merchant.created_at|date:"M d, Y" }}</strong></div>
    </div>
  </div>
  <div class="card" style="padding:20px">
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px">Business Address</div>
    <div style="font-size:.86rem;color:var(--muted);line-height:1.65;margin-bottom:14px">{{ merchant.business_address }}</div>
    {% if merchant.description %}
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:6px">Description</div>
    <div style="font-size:.84rem;color:var(--muted)">{{ merchant.description }}</div>
    {% endif %}
  </div>
</div>

{% if merchant.id_document or merchant.business_photo or merchant.cac_document %}
<div class="card" style="margin-bottom:20px">
  <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:16px">Submitted Documents</div>
  <div style="display:flex;gap:16px;flex-wrap:wrap">
    {% if merchant.id_document %}
    <div>
      <div style="font-size:.76rem;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:5px"><i class="fas fa-id-card" style="color:var(--vlt)"></i>Valid ID</div>
      <a href="{{ merchant.id_document.url }}" target="_blank"><img src="{{ merchant.id_document.url }}" style="width:170px;height:115px;object-fit:cover;border-radius:10px;border:1px solid var(--border);display:block"></a>
    </div>
    {% endif %}
    {% if merchant.business_photo %}
    <div>
      <div style="font-size:.76rem;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:5px"><i class="fas fa-store" style="color:var(--vlt)"></i>Business Photo</div>
      <a href="{{ merchant.business_photo.url }}" target="_blank"><img src="{{ merchant.business_photo.url }}" style="width:170px;height:115px;object-fit:cover;border-radius:10px;border:1px solid var(--border);display:block"></a>
    </div>
    {% endif %}
    {% if merchant.cac_document %}
    <div>
      <div style="font-size:.76rem;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:5px"><i class="fas fa-file-alt" style="color:var(--gold)"></i>CAC Certificate</div>
      <a href="{{ merchant.cac_document.url }}" target="_blank" class="btn btn-ghost btn-sm"><i class="fas fa-download"></i>View Document</a>
    </div>
    {% endif %}
  </div>
</div>
{% endif %}

<div style="display:flex;gap:10px;flex-wrap:wrap">
  <a href="{% url 'admin_merchant_approvals' %}" class="btn btn-ghost"><i class="fas fa-arrow-left"></i>Back</a>
  {% if not merchant.is_approved %}
  <form method="post" action="{% url 'admin_merchant_approvals' %}">{% csrf_token %}<input type="hidden" name="merchant_id" value="{{ merchant.id }}"><input type="hidden" name="action" value="approve"><button type="submit" class="btn btn-teal btn-lg"><i class="fas fa-check"></i>Approve Merchant</button></form>
  <form method="post" action="{% url 'admin_merchant_approvals' %}">{% csrf_token %}<input type="hidden" name="merchant_id" value="{{ merchant.id }}"><input type="hidden" name="action" value="reject"><button type="submit" class="btn btn-red"><i class="fas fa-times"></i>Reject</button></form>
  {% else %}
  <span class="badge badge-teal" style="padding:11px 18px;font-size:.86rem"><i class="fas fa-check-circle"></i>Already Approved</span>
  {% endif %}
</div>
</div>
{% endblock %}