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

{% block content %}
<div class="container py-4">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="mb-4">Fund Wallet</h2>
          <p class="text-muted">Current Balance: <strong>USD {{ wallet.balance|floatformat:2 }}</strong></p>

          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                {{ message }}
              </div>
            {% endfor %}
          {% endif %}

          {% if crypto_address %}
            <!-- ==================== CRYPTO PAYMENT SCREEN ==================== -->
            <div class="text-center">
              <h5>Send {{ provider }} to this address</h5>
              
              <div class="my-4">
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=280x280&data={{ crypto_address }}" 
                     class="img-fluid rounded shadow" alt="QR Code">
              </div>

              <div class="input-group mb-3">
                <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" id="paymentForm">
                {% csrf_token %}
                <input type="hidden" name="provider" value="{{ provider|lower }}">
                <input type="hidden" name="amount" value="{{ amount }}">
                {% if next_url %}
                  <input type="hidden" name="next" value="{{ next_url }}">
                {% endif %}

                <div class="mb-3">
                  <label class="form-label">Transaction Hash (TXID) <span class="text-danger">*</span></label>
                  <input type="text" name="tx_hash" class="form-control" 
                         placeholder="Paste your TX hash here" required>
                </div>

                <button type="submit" id="submitBtn" 
                        class="btn btn-success btn-lg w-100">
                  <span class="spinner-border spinner-border-sm d-none" id="spinner" role="status"></span>
                  <span id="btnText">✅ I HAVE MADE THE PAYMENT</span>
                </button>
              </form>
            </div>

          {% else %}
            <!-- ==================== INITIAL DEPOSIT FORM ==================== -->
            <form method="post">
              {% csrf_token %}
              {% bootstrap_form form %}
              <button type="submit" class="btn btn-primary w-100">Continue to Payment</button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

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

// Loading Spinner on Submit
document.getElementById('paymentForm').addEventListener('submit', function() {
  const btn = document.getElementById('submitBtn');
  const spinner = document.getElementById('spinner');
  const btnText = document.getElementById('btnText');
  
  btn.disabled = true;
  spinner.classList.remove('d-none');
  btnText.textContent = ' Verifying...';
});
</script>
{% endblock %}