{% 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">
        {% include 'partials/_alerts.html' %}

        {% if okay_1 == "No" %}

        <div class="row">
          <h4 class="mb-3 text-center text-apu-purple">Proceed to make payment for the Harmattan {{session}} academic session</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-apu-purple">DETAILS OF ALL FEES</h4>
                    <i class="far fa-check-circle text-apu-purple mr-1"></i>Tuition fees = <strong class="text-apu-green">₦{{h_bill|intcomma}}</strong> <br> <br>
                    {% for each, value in h_fees_dict.items %}
                    {% if each == "Late Registration Fee" %}
                    <i class="far fa-check-circle text-apu-purple mr-1"></i><span class="text-red">{{each}}</span> = <strong class="text-apu-green">₦{{value|intcomma}}</strong> <br> <br>
                    {% else %}
                    <i class="far fa-check-circle text-apu-purple mr-1"></i>{{each}} = <strong class="text-apu-green">₦{{value|intcomma}}</strong> <br> <br>
                    {% endif %}
                    {% endfor %}
                  </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-apu-purple">
                    <div class="form-group">
                      <button id="form-button" class="btn btn-apu-purple btn-block" type="submit" onclick="payWithPaystack()"> <strong>Pay - ₦{{harmattan_bill|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="{{user.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="{{harmattan_bill}}" id="amount" required />
                    </div>

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

          </div>


        </div>
        {% elif okay_1 == "Yes" %}

        <div class="row">
          <h4 class="mb-3 text-center text-apu-purple"><i class="fa fa-thumbs-up fa-2x mr-1"></i>You have completed your payment for the Harmattan {{session}} academic session</h4>
        </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 'harmattan' %}"
          }
        });
        handler.openIframe();
      }
    </script>


{% endblock content%}