{% extends 'board.html' %}
{% load static %}
{% load humanize %}
{% block title %}
  <title>Receipt</title>
  <style type="text/css">
  @media print {
    body {-webkit-print-color-adjust: exact;}
      #printbtn {
          display :  none;
      }
  }

  li {
    margin-left: 10px;
    list-style-type: square
  }

  new_font {
    font-size: 38px;
  }

  </style>
  <meta name="description" content="">

{% endblock title %}

{% block content %}

{% load home_tags %}
<div class=" app-content">
	<div class="side-app">
    <br>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex strong">
              <div class="row">
                <p class="lh">Telephone: </p>
                <p class="lh3">Email: bursar@apu.edu.ng</p>
              </div>


              <div class="text-right ml-auto">
                <div class="row">
                  <div class="col-md-10 text-right ml-auto strong p1">
                    <h5 class="text-apu-purple lh"><strong>AHMAN PATEGI UNIVERSITY</strong></h5>
                    <p class="text-apu-purple lh2"><strong>Km 3 Patigi-Kpada Road, Patigi, Kwara State, Nigeria</strong></p>
                    <p class="text-apu-purple lh3"><strong>Tel: , </strong></p>

                  </div>
                  <div class="col-md-2 text-right ml-auto">
                    <img alt="logo" class="logo2" src="{% static 'img/logo2.png' %}">
                  </div>
                </div>
              </div>
            </div>
            <h5 class="text-center text-black strong">RECEIPT</h5>
            <hr>
            <div class="row">
              <div class="col-lg-6 strong">
                <p class="h6 text-black">BILL TO:</p>
                <address>
                  Mr and Mrs {{payment.user.last_name}}{% if payment.user.parent_address == None %}{% else %},<br>
                  {{payment.user.parent_address}}{% endif %}
                </address>
              </div>
              <div class="col-lg-6 text-right">

              </div>
            </div>
            <div class="row">
              <h6 class="text-black text-center"><strong>{{payment.session}} {{payment.semester}}</strong></h6>
                <div class="table-responsive">
                  <table class="table table-sm table-bordered">
                    <tbody class="table-green">
                      <tr>
                        <th style="background:#544A89!important" class="text-center text-white large"><strong>MATRIC NO</strong></th>
                        <th style="background:#544A89!important" class="text-center text-white large"><strong>LEVEL PAID FOR</strong></th>
                        <th style="background:#544A89!important" class="text-center text-white large"><strong>NAME</strong></th>
                        <th style="background:#544A89!important" class="text-center text-white large"><strong>PROGRAMME</strong></th>
                        <th style="background:#544A89!important" class="text-center text-white large"><strong>DATE</strong></th>
                        <th style="background:#544A89!important" class="text-center text-white large"><strong>PAYMENT ID</strong></th>
                      </tr>

                      <tr class="table-white">
                        <td class="text-black"><strong>{{payment.user.username}}</strong></td>
                        <td class="text-black text-left"><strong>{{payment.static_level}}</strong></td>
                        <td class="text-black text-left"><strong>{{payment.user.first_name}} {{payment.user.last_name}}</strong></td>
                        <td class="text-black text-left"><strong>{{payment.user.programme}}</strong></td>
                        <td class="text-black text-left"><strong>{{payment.created}}</strong></td>

                        <td class="text-black text-left"><strong>{{payment.payment_id}}</strong></td>

                      </tr>
                      <tr class="table-white">
                        <td colspan="5" class="text-apu-purple"><strong>NARRATIVE</strong></td>
                        <td class="text-apu-purple text-left"><strong>AMOUNT</strong></td>
                      </tr>

                      <tr class="table-white">
                        <td colspan="5" class="text-black"><strong>Tuition Fee - </strong></td>
                        <td class="text-black text-left"><strong>₦{{h_bill|intcomma}}</strong></td>
                      </tr>

                      {% if payment.semester == "Harmattan" %}
                      {% for each, value in h_fees_dict.items %}

                      <tr class="table-white">
                        <td colspan="5" class="text-black"><strong>{{each}} - </strong></td>
                        <td class="text-black text-left"><strong>₦{{value|intcomma}}</strong></td>
                      </tr>

                      {% endfor %}
                      {% elif payment.semester == "Rain" %}
                      {% for each, value in r_fees_dict.items %}

                      <tr class="table-white">
                        <td colspan="5" class="text-black"><strong>{{each}} - </strong></td>
                        <td class="text-black text-left"><strong>₦{{value|intcomma}}</strong></td>
                      </tr>

                      {% endfor %}
                      {% endif %}

                      <tr class="table-white">
                        <td colspan="5" class="text-apu-green"><strong>Total Bill - </strong></td>
                        <td class="text-black text-left"><strong>₦{{payment.amount_paid|intcomma}}</strong></td>
                      </tr>

                    </tbody>
                  </table>

            <button id="printbtn" type="button" class="btn btn-cylinder mb-1" onClick="javascript:window.print();"><i class="fas fa-print fa-1x mr-1"></i> Print payment</button>
        </div>
      </div>
    </div>
  </div>



	</div>
</div>
{% endblock content%}