{% extends "django_razorpay/base.html" %}
{% load static %}
{% block head %}{% endblock %}
{% block title %}Membership Fee Payment{% endblock %}

{% block main %}
<main>
    <div class="py-5 text-center">
      <h2>Adhoc Payment</h2>
      <p class="lead">Do a adhoc payment using razorpay</p>
    </div>
    <div class="row g-5 align-items-center justify-content-center">
      <div class="col-md-7 col-lg-5">
          <div class="row">
          <div class="col-12">
              {% for message in messages %}
              <div class="alert {{ message.tags }} alert-dismissible fade show" role="alert">
              <strong>{{ message }}</strong>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
              {% endfor %}
            </div>

          </div>
        <h4 class="mb-3">Provide details</h4>
        <form method="POST">
          {% csrf_token %}
          <div class="row g-3">
            <div class="col-12">
              <label for="name" class="form-label">Label / Description / Name</label>
              <input type="text" class="form-control border border-primary" id="name" name="label" placeholder="Example: For John Doe" required>

            </div>
              <div class="col-12">
              <label for="amount" class="form-label ">Amount</label>
              <input type="text" class="form-control border border-primary" id="amount" name="amount" placeholder="Example: 200" required>
            </div>
          <hr class="my-4">
          <button class="w-100 btn btn-primary btn-lg" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </main>
{% endblock %}
{% block js %}
<script>
  $(document).ready(function(){

  });
</script>
{% endblock %}