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

  <style>
      body {
          font-family: Arial, sans-serif;
          background-color: #f4f4f4;
      }

      h1 {
          color: #333;
      }

      #timer {
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          padding: 20px;
          margin: 20px auto;
          max-width: 300px;
      }

      #countdown {
          font-size: 50px;
          font-weight: bold;
          color: #ff0000;
      }

      #event {
          font-size: 34px;
          font-weight: bold;
          color: #221d1c;
      }
  </style>

{% 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' %}

        <div class="row">

          <div class="col-xl-12 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h3 class="text-apu-purple">Course registration closes after the countdown to zero</h3>
                <div id="countdown">
                  {{ data.days|stringformat:"02d" }} : {{ data.hours|stringformat:"02d" }} : {{ data.minutes|stringformat:"02d" }} : {{ data.seconds|stringformat:"02d" }}
                </div>

                <script>
                    // Function to update the countdown timer
                    function updateTimer() {
                        var days = parseInt(document.getElementById('countdown').textContent.split(':')[0]);
                        var hours = parseInt(document.getElementById('countdown').textContent.split(':')[1]);
                        var minutes = parseInt(document.getElementById('countdown').textContent.split(':')[2]);
                        var seconds = parseInt(document.getElementById('countdown').textContent.split(':')[3]);

                        if (seconds > 0) {
                            seconds--;
                        } else {
                            if (minutes > 0) {
                                minutes--;
                                seconds = 59;
                            } else {
                                if (hours > 0) {
                                    hours--;
                                    minutes = 59;
                                    seconds = 59;
                                } else {
                                  if (days > 0) {
                                    days--;
                                    hours = 23;
                                    minutes = 59;
                                    seconds = 59;
                                  } else {
                                    // Timer has reached zero, you can handle this case as needed
                                }
                            }
                        }
                    }

                        // Update the timer display
                        document.getElementById('countdown').textContent =
                            (days < 10 ? '0' : '') + days + 'd : ' +
                            (hours < 10 ? '0' : '') + hours + 'h : ' +
                            (minutes < 10 ? '0' : '') + minutes + 'm : ' +
                            (seconds < 10 ? '0' : '') + seconds + 's' ;
                    }

                    // Update the timer every second
                    setInterval(updateTimer, 1000);
                </script>


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

        <br>

        {% if okay_1 == "Yes" and okay_2 == "No" %}

        <div class="row">

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Harmattan Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-black">₦{{harmattan_bill|intcomma}}</strong></font></p>
                <a href="{% url 'history' %}" class="btn btn-outline-success btn-sm rounded-pill"><i class="fa fa-thumbs-up fa-1x mr-1"></i><strong>Paid! Navigate to the receipt page</strong></a>

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Rain Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-red">₦{{rain_bill|intcomma}}</strong></font></p>
                <a href="{% url 'upgrade_rain' %}" class="btn btn-apu-purple btn-sm"><i class="fa fa-credit-card fa-1x mr-1"></i><strong>Pay now to avoid lateness fee!</strong></a>

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

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


        </div>

        {% elif okay_1 == "No" and okay_2 == "Yes" %}

        <div class="row">

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Harmattan Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-red">₦{{harmattan_bill|intcomma}}</strong></font></p>
                <a href="{% url 'upgrade' %}" class="btn btn-apu-purple btn-sm"><i class="fa fa-credit-card fa-1x mr-1"></i><strong>Pay now to avoid lateness fee!</strong></a>

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Rain Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-black">₦{{rain_bill|intcomma}}</strong></font></p>
                <a href="{% url 'history' %}" class="btn btn-outline-success btn-sm rounded-pill"><i class="fa fa-thumbs-up fa-1x mr-1"></i><strong>Paid! Navigate to the receipt page</strong></a>

              </div>

            </div>
          </div>

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


        </div>

        {% elif okay_1 == "Yes" and okay_2 == "Yes" %}

        <div class="row">

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Harmattan Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-black">₦{{harmattan_bill|intcomma}}</strong></font></p>
                <a href="{% url 'history' %}" class="btn btn-outline-success btn-sm rounded-pill"><i class="fa fa-thumbs-up fa-1x mr-1"></i><strong>Paid! Navigate to the receipt page</strong></a>

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Rain Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-black">₦{{rain_bill|intcomma}}</strong></font></p>
                <a href="{% url 'history' %}" class="btn btn-outline-success btn-sm rounded-pill"><i class="fa fa-thumbs-up fa-1x mr-1"></i><strong>Paid! Navigate to the receipt page</strong></a>

              </div>

            </div>
          </div>

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


        </div>

        {% elif okay_1 == "No" and okay_2 == "No" %}

        <div class="row">

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Harmattan Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-red">₦{{harmattan_bill|intcomma}}</strong></font></p>
                <a href="{% url 'upgrade' %}" class="btn btn-apu-purple btn-sm"><i class="fa fa-credit-card fa-1x mr-1"></i><strong>Pay now to avoid lateness fee!</strong></a>

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Rain Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-red">₦{{rain_bill|intcomma}}</strong></font></p>
                <a href="{% url 'upgrade_rain' %}" class="btn btn-apu-purple btn-sm"><i class="fa fa-credit-card fa-1x mr-1"></i><strong>Pay now to avoid lateness fee!</strong></a>

              </div>

            </div>
          </div>

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


        </div>
        {% else %}
        <div class="row">

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Harmattan Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-red">₦{{harmattan_bill|intcomma}}</strong></font></p>
                <a href="{% url 'upgrade' %}" class="btn btn-apu-purple btn-sm"><i class="fa fa-credit-card fa-1x mr-1"></i><strong>Pay now to avoid lateness fee!</strong></a>

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

          <div class="col-xl-4 col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body text-center">
                <h4 class="text-black">Rain Semester</h4>

                <p class="text-muted "><font size="+2"><strong class="text-red">₦{{rain_bill|intcomma}}</strong></font></p>
                <a href="{% url 'upgrade_rain' %}" class="btn btn- btn-sm"><i class="fa fa-credit-card fa-1x mr-1"></i><strong>Pay now to avoid lateness fee!</strong></a>

              </div>

            </div>
          </div>

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


        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% endblock content%}