{% extends 'board.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% load humanize %}
{% load home_tags %}
{% block title %}
  <title>Pay</title>
  <meta name="description" content="">

{% endblock title %}

{% block content %}
<div class=" app-content">
  <div class="side-app">
    <br>
    <div class="container content-area">
      <div class="horizontal-content">

        {% if reg.paid == False %}

        <div class="row">
          <h4 class="mb-3 text-center text-primary">Proceed to make payment for the test</h4>

          <div class="col-xl-6 col-lg-4 col-md-12">

            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="text-primary">DETAILS</h4><br>
                    <i class="far fa-check-circle text-primary mr-1"></i>Test Fee = <strong class="text-apu-green">₦{{exam.test_fee|intcomma}}</strong> <br> <br>
                    {% if late_fee > 0 %}
                    <i class="far fa-check-circle text-primary mr-1"></i><span class="text-red">Lateness Fee</span> = <strong class="text-red">₦{{late_fee|intcomma}}</strong> <br> <br>
                    {% else %}
                    {% endif %}
                    <i class="far fa-check-circle text-primary mr-1"></i>Online Processing Fee = <strong class="text-apu-green">₦{{exam.online_fee|intcomma}}</strong> <br> <br>
                  </div>
                </div>


              </div>
            </div>
          </div>

          <div class="col-xl-6 col-lg-4 col-md-12">

            <div class="row">
              <div class="form-group col-md-12">
                <form id="form">
                  <div id="user-primary">
                    <div class="form-group">
                      <button id="form-button" class="btn btn-primary btn-block" type="submit" onclick="payWithPaystack()"> <strong>Pay - ₦{{total|intcomma}}</strong> </button>
                    </div>
                    <div class="form-group">
                      <label hidden for="email-address">Email</label>
                      <input hidden required class="form-control" readonly type="email" value="{{email}}" id="email-address" name="email" placeholder="Enter Email" required />
                    </div>
                    <div class="form-group">
                      <label hidden for="amount">Amount</label>
                      <input hidden required class="form-control" readonly type="tel" value="{{total}}" id="amount" required />
                    </div>

                  </div>
                </form>
              </div>
            </div>

          </div>


        </div>
        {% elif reg.paid == True %}

        <div class="row">
          <h4 class="mb-3 text-center text-primary"><i class="fa fa-thumbs-up fa-2x mr-1"></i>You have paid for the test</h4>
        </div>

        {% else %}

        <div class="row">
          <h4 class="mb-3 text-center text-primary">Proceed to make payment for the test</h4>

          <div class="col-xl-6 col-lg-4 col-md-12">

            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="text-primary">DETAILS</h4><br>
                    <i class="far fa-check-circle text-primary mr-1"></i>Test Fee = <strong class="text-apu-green">₦{{exam.test_fee|intcomma}}</strong> <br> <br>
                    {% if late_fee > 0 %}
                    <i class="far fa-check-circle text-primary mr-1"></i><span class="text-red">Lateness Fee</span> = <strong class="text-red">₦{{late_fee|intcomma}}</strong> <br> <br>
                    {% else %}
                    {% endif %}
                    <i class="far fa-check-circle text-primary mr-1"></i>Online Processing Fee = <strong class="text-apu-green">₦{{exam.online_fee|intcomma}}</strong> <br> <br>
                  </div>
                </div>


              </div>
            </div>
          </div>

          <div class="col-xl-6 col-lg-4 col-md-12">

            <div class="row">
              <div class="form-group col-md-12">
                <form id="form">
                  <div id="user-primary">
                    <div class="form-group">
                      <button id="form-button" class="btn btn-primary btn-block" type="submit" onclick="payWithPaystack()"> <strong>Pay - ₦{{total|intcomma}}</strong> </button>
                    </div>
                    <div class="form-group">
                      <label hidden for="email-address">Email</label>
                      <input hidden required class="form-control" readonly type="email" value="{{email}}" id="email-address" name="email" placeholder="Enter Email" required />
                    </div>
                    <div class="form-group">
                      <label hidden for="amount">Amount</label>
                      <input hidden required class="form-control" readonly type="tel" value="{{total}}" id="amount" required />
                    </div>

                  </div>
                </form>
              </div>
            </div>

          </div>


        </div>

        {% endif %}



      </div>
    </div>
  </div>
</div>
<script src="https://js.paystack.co/v2/inline.js">

<script src="https://js.paystack.co/v1/inline.js"></script>
    <script>
      const form = document.getElementById('form');
      form.addEventListener("submit", payWithPaystack, false);
      function payWithPaystack(e) {
        e.preventDefault();
        let handler = PaystackPop.setup({
          key: '{{key}}',
          email: document.getElementById('email-address').value,
          amount: document.getElementById('amount').value * 100,
          currency: "NGN",
          onClose: function(){
            alert('Window closed.');
          },
          callback: function(response){
            // let message = 'Thank you! You have completed your payment! Your Reference Number is: ' + response.reference;
            // alert(message);
            window.location.href = "{% url 'paid_a' exam.id %}"
          }
        });
        handler.openIframe();
      }
    </script>


{% endblock content%}