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

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card shadow-sm">
        <div class="card-body text-center">
          <h3 class="mb-4">Pay for {{ plan.name }}</h3>
          <p class="text-muted">Send exact amount in {{ provider }}</p>

          <div class="my-4">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{ crypto_address }}" 
                 class="img-fluid rounded shadow" alt="QR Code">
          </div>

          <div class="input-group mb-4">
            <input type="text" id="addr" class="form-control" value="{{ crypto_address }}" readonly>
            <button class="btn btn-primary" onclick="copyAddress()">Copy</button>
          </div>

          <form method="post" action="{% url 'core:crypto_subscription_webhook' %}">
            {% csrf_token %}
            <input type="hidden" name="reference" value="{{ transaction.reference }}">
            <div class="mb-3">
              <label class="form-label">Transaction Hash (TXID)</label>
              <input type="text" name="tx_hash" class="form-control" placeholder="Paste TX hash here" required>
            </div>
            <button type="submit" class="btn btn-success btn-lg w-100">✅ I HAVE MADE THE PAYMENT</button>
          </form>

          <p class="text-muted small mt-4">
            Once confirmed, your subscription will be activated automatically.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
function copyAddress() {
  const el = document.getElementById('addr');
  el.select();
  document.execCommand('copy');
  alert('✅ Address copied!');
}
</script>
{% endblock %}