{% extends 'base.html' %}
{% load humanize %}

{% block title %}Payment {{ payment.reference }} — PhinTech Solutions{% endblock %}

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

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h4 mb-0">
        <i class="fas fa-receipt text-primary me-2"></i>Developer Payment Detail
      </h1>
      <small class="text-muted">
        {{ developer }} &nbsp;·&nbsp;
        <span class="badge bg-secondary" style="font-size:0.65rem;">v{{ system_version }}</span>
      </small>
    </div>
    <div class="d-flex gap-2">
      {% if payment.status in 'pending,processing,failed' %}
      <form method="post" action="{% url 'payments:retry_developer_payment' payment.id %}"
            onsubmit="return confirm('Re-send STK push?')">
        {% csrf_token %}
        <button type="submit" class="btn btn-outline-primary btn-sm">
          <i class="fas fa-redo me-1"></i> Retry
        </button>
      </form>
      <form method="post" action="{% url 'payments:cancel_developer_payment' payment.id %}"
            onsubmit="return confirm('Cancel this payment?')">
        {% csrf_token %}
        <button type="submit" class="btn btn-outline-danger btn-sm">
          <i class="fas fa-times me-1"></i> Cancel
        </button>
      </form>
      {% endif %}
      <a href="{% url 'payments:developer_payments' %}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i> Back
      </a>
    </div>
  </div>

  {% for msg in messages %}
  <div class="alert alert-{{ msg.tags|default:'info' }} alert-dismissible fade show">
    {{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  <div class="row g-4">

    <!-- Left: Core details -->
    <div class="col-lg-7">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom fw-semibold py-2">
          <i class="fas fa-info-circle me-1 text-muted"></i> Payment Information
        </div>
        <div class="card-body">
          <dl class="row mb-0">
            <dt class="col-sm-4 text-muted small">Reference</dt>
            <dd class="col-sm-8 fw-semibold">{{ payment.reference }}</dd>

            <dt class="col-sm-4 text-muted small">Status</dt>
            <dd class="col-sm-8">
              {% if payment.status == 'completed' %}
                <span class="badge bg-success fs-6"><i class="fas fa-check me-1"></i>Completed</span>
              {% elif payment.status == 'processing' %}
                <span class="badge bg-info text-dark fs-6"><i class="fas fa-spinner fa-spin me-1"></i>Processing</span>
              {% elif payment.status == 'pending' %}
                <span class="badge bg-warning text-dark fs-6"><i class="fas fa-clock me-1"></i>Pending</span>
              {% elif payment.status == 'failed' %}
                <span class="badge bg-danger fs-6"><i class="fas fa-times me-1"></i>Failed</span>
              {% else %}
                <span class="badge bg-secondary fs-6">{{ payment.get_status_display }}</span>
              {% endif %}
            </dd>

            <dt class="col-sm-4 text-muted small">Amount</dt>
            <dd class="col-sm-8 fw-bold text-success fs-5">KES {{ payment.amount|floatformat:2|intcomma }}</dd>

            <dt class="col-sm-4 text-muted small">Payment Type</dt>
            <dd class="col-sm-8">{{ payment.get_payment_type_display }}</dd>

            <dt class="col-sm-4 text-muted small">Description</dt>
            <dd class="col-sm-8">{{ payment.description }}</dd>

            <dt class="col-sm-4 text-muted small">Payer Phone</dt>
            <dd class="col-sm-8">{{ payment.payer_phone }}</dd>

            <dt class="col-sm-4 text-muted small">Initiated By</dt>
            <dd class="col-sm-8">{{ payment.initiated_by.get_full_name|default:"—" }}</dd>

            <dt class="col-sm-4 text-muted small">Created</dt>
            <dd class="col-sm-8">{{ payment.created_at|date:"d M Y, H:i:s" }}</dd>

            {% if payment.completed_at %}
            <dt class="col-sm-4 text-muted small">Completed</dt>
            <dd class="col-sm-8 text-success">{{ payment.completed_at|date:"d M Y, H:i:s" }}</dd>
            {% endif %}
          </dl>
        </div>
      </div>

      {% if payment.admin_notes %}
      <div class="card border-0 shadow-sm mt-3">
        <div class="card-header bg-white border-bottom fw-semibold py-2">
          <i class="fas fa-sticky-note me-1 text-muted"></i> Notes
        </div>
        <div class="card-body">
          <p class="mb-0 small">{{ payment.admin_notes|linebreaksbr }}</p>
        </div>
      </div>
      {% endif %}

      {% if payment.failure_reason %}
      <div class="card border-danger border-0 shadow-sm mt-3">
        <div class="card-header bg-danger text-white py-2 fw-semibold">
          <i class="fas fa-exclamation-triangle me-1"></i> Failure Reason
        </div>
        <div class="card-body">
          <p class="mb-0 small text-danger">{{ payment.failure_reason }}</p>
        </div>
      </div>
      {% endif %}
    </div>

    <!-- Right: M-Pesa / LipiaOnline details -->
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom fw-semibold py-2">
          <i class="fas fa-mobile-alt me-1 text-muted"></i> M-Pesa / LipiaOnline Details
        </div>
        <div class="card-body">
          <dl class="row mb-0">
            <dt class="col-sm-5 text-muted small">M-Pesa Receipt</dt>
            <dd class="col-sm-7">
              {% if payment.mpesa_receipt %}
                <code class="text-success fw-bold">{{ payment.mpesa_receipt }}</code>
              {% else %}
                <span class="text-muted">—</span>
              {% endif %}
            </dd>

            <dt class="col-sm-5 text-muted small">Checkout ID</dt>
            <dd class="col-sm-7">
              <small class="text-break">{{ payment.lipia_checkout_id|default:"—" }}</small>
            </dd>

            <dt class="col-sm-5 text-muted small">Transaction ID</dt>
            <dd class="col-sm-7">
              <small class="text-break">{{ payment.lipia_transaction_id|default:"—" }}</small>
            </dd>
          </dl>
        </div>
      </div>

      <!-- Raw API response (collapsed) -->
      {% if payment.raw_initiation_response %}
      <div class="card border-0 shadow-sm mt-3">
        <div class="card-header bg-white border-bottom py-2">
          <a class="fw-semibold text-decoration-none text-dark small"
             data-bs-toggle="collapse" href="#rawInit">
            <i class="fas fa-code me-1 text-muted"></i> Initiation Response
            <i class="fas fa-chevron-down ms-1 small"></i>
          </a>
        </div>
        <div class="collapse" id="rawInit">
          <div class="card-body p-2">
            <pre class="small mb-0 text-break" style="max-height:200px;overflow-y:auto;">{{ payment.raw_initiation_response }}</pre>
          </div>
        </div>
      </div>
      {% endif %}

      {% if payment.raw_callback_data %}
      <div class="card border-0 shadow-sm mt-3">
        <div class="card-header bg-white border-bottom py-2">
          <a class="fw-semibold text-decoration-none text-dark small"
             data-bs-toggle="collapse" href="#rawCallback">
            <i class="fas fa-code me-1 text-muted"></i> Callback Data
            <i class="fas fa-chevron-down ms-1 small"></i>
          </a>
        </div>
        <div class="collapse" id="rawCallback">
          <div class="card-body p-2">
            <pre class="small mb-0 text-break" style="max-height:200px;overflow-y:auto;">{{ payment.raw_callback_data }}</pre>
          </div>
        </div>
      </div>
      {% endif %}

      <!-- Developer info card -->
      <div class="card border-0 shadow-sm mt-3 bg-light">
        <div class="card-body py-3 text-center">
          <i class="fas fa-code fa-2x text-primary mb-2"></i>
          <div class="fw-semibold">{{ developer }}</div>
          <small class="text-muted">System v{{ system_version }}</small>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}