{% extends 'base_undergrad_result.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load home_tags %}
{% block title %}
<title>{{score.undergrad.first_name}} {{score.undergrad.last_name}}'s {{score.session}} Result</title>
  <style type="text/css">
  @media print {
    body {-webkit-print-color-adjust: exact;}
      printbtn {
          display :  none;
      }

  }
  </style>
{% endblock title %}

{% block content %}
{% if score.undergrad == request.user %}

{% if payment_1h == True and payment_1r == True and payment_2h == True %}
<form class="text-center">
  <input id ="printbtn" type="button" class="btn btn-apu-purple" value="Click to show print preview" onclick="window.print();" >
</form> <br>
<div class="text-center report">
  <div class="bg-white text-dark form-group col-md-12">
    <div class="row">
      <div class="col-md-2">
        <br>
        <h5 class="text-right"><img src="{% static 'img/logo2.png' %}" alt="APU Logo" class="logo3"></h5>
      </div>
      <div class="col-md-8">
        <h3 class="text-center text-primary p7 lh3"><strong>AHMAN PATEGI UNIVERSITY</strong></h3>
        <h4>Faculty of {{score.undergrad.programme.department.faculty}}</h4>
        <h4>Department of {{score.undergrad.programme.department}}</h4>
      </div>
      <div class="col-md-2 mt-4">
        {% if score.undergrad.photograph %}
          <h5 class="text-left"><img src="{{ score.undergrad.photograph.url }}" alt="undergrad's Photograph" class="logo3"></h5>
        {% else %}
          <h5 class="text-left"><i class="fas fa-user fa-8x text-apu-purple"></i> </h5>
        {% endif %}
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 text-left">
        <h6 class="text-black text-left"><strong>1. BIODATA</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td class="text-apu-purple text-left"><strong>Name</strong></td>
              {% if score.undergrad.middle_name == None %}
              <td class="text-dark text-left"><strong>{{score.undergrad.last_name}} {{score.undergrad.first_name}}</strong></td>
              {% else %}
              <td class="text-dark text-left"><strong>{{score.undergrad.last_name}} {{score.undergrad.first_name}} {{score.undergrad.middle_name}}</strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td class="text-apu-purple"><strong>Date of Birth</strong></td>
              <td class="text-dark"><strong>{{score.undergrad.dob}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-apu-purple"><strong>Sex</strong></td>
              <td class="text-dark"><strong>{{score.undergrad.gender}}</strong></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-md-4 text-left">
        <h6 class="text-black text-left"><strong>2. SESSION INFORMATION</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td class="text-apu-purple text-left"><strong>Session</strong></td>
              <td class="text-dark text-left"><strong>{{score.session}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-apu-purple"><strong>Level</strong></td>
              <td class="text-dark"><strong>100</strong></td>
            </tr>
          </table>
        </div>
      </div>

      <div class="col-md-4 text-left">
        <h6 class="text-black text-left"><strong>3. ACADEMIC RECORD</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td class="text-apu-purple"><strong>Matric Number</strong></td>
              <td class="text-dark"><strong>{{score.undergrad.username}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-apu-purple"><strong>Programme</strong></td>
              <td class="text-dark"><strong>{{score.undergrad.programme}}</strong></td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <h6 class="text-black text-left"><strong>HARMATTAN</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tbody class="table-light">
              <tr class="bg-white">
                <th class="text-center text-apu-purple"><strong>COURSE CODE</strong></th>
                <th class="text-center text-apu-purple"><strong>COURSE TITLE</strong></th>
                <th class="text-center text-apu-purple"><strong>CREDIT UNIT</strong></th>
                <th class="text-center text-apu-purple"><strong>SCORE</strong></th>
                <th class="text-center text-apu-purple"><strong>GRADE</strong></th>
              </tr>

              {% for score in scores_undergrad %}
              <tr class="table-light">
                <td style="font-size:12px" class="text-dark"><strong>{{score.course.course_code}}</strong></td>
                <td style="font-size:12px" class="text-dark text-left"><strong>{{score.course.course_title}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{score.credit_unit}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center"><strong>{{score.total}}</strong></td>
                {% if score.total > 69 %}
                <td style="background:#1b5e02!important; font-size:12px" class="text-white text-center"><strong>{{score.grade}}</strong></td>
                {% elif score.total > 59 %}
                <td style="background:#2fa802!important; font-size:12px" class="text-white text-center"><strong>{{score.grade}}</strong></td>
                {% elif score.total > 49 %}
                <td style="background:#8dfc17!important; font-size:12px" class="text-black text-center"><strong>{{score.grade}}</strong></td>
                {% elif score.total > 44 %}
                <td style="background:#e9fc17!important; font-size:12px" class="text-black text-center"><strong>{{score.grade}}</strong></td>
                {% elif score.total > 39 %}
                <td style="background:#fc8617!important; font-size:12px" class="text-white text-center"><strong>{{score.grade}}</strong></td>
                {% elif score.total < 40 %}
                <td style="background:#ff0000!important; font-size:12px" class="text-white text-center"><strong>{{score.grade}}</strong></td>
                {% endif %}
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div class="col-md-6">
        <h6 class="text-black text-left"><strong>RAIN</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tbody class="table-light">
              <tr class="bg-white">
                <th class="text-center text-apu-purple"><strong>COURSE CODE</strong></th>
                <th class="text-center text-apu-purple"><strong>COURSE TITLE</strong></th>
                <th class="text-center text-apu-purple"><strong>CREDIT UNIT</strong></th>
                <th class="text-center text-apu-purple"><strong>SCORE</strong></th>
                <th class="text-center text-apu-purple"><strong>GRADE</strong></th>
              </tr>

              {% for score_r in scores_undergrad_r %}
              <tr class="table-light">
                <td style="font-size:12px" class="text-dark"><strong>{{score_r.course.course_code}}</strong></td>
                <td style="font-size:12px" class="text-dark text-left"><strong>{{score_r.course.course_title}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{score_r.credit_unit}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center"><strong>{{score_r.total}}</strong></td>
                {% if score_r.total > 69 %}
                <td style="background:#1b5e02!important; font-size:12px" class="text-white text-center"><strong>{{score_r.grade}}</strong></td>
                {% elif score_r.total > 59 %}
                <td style="background:#2fa802!important; font-size:12px" class="text-white text-center"><strong>{{score_r.grade}}</strong></td>
                {% elif score_r.total > 49 %}
                <td style="background:#8dfc17!important; font-size:12px" class="text-black text-center"><strong>{{score_r.grade}}</strong></td>
                {% elif score_r.total > 44 %}
                <td style="background:#e9fc17!important; font-size:12px" class="text-black text-center"><strong>{{score_r.grade}}</strong></td>
                {% elif score_r.total > 39 %}
                <td style="background:#fc8617!important; font-size:12px" class="text-white text-center"><strong>{{score_r.grade}}</strong></td>
                {% elif score_r.total < 40 %}
                <td style="background:#ff0000!important; font-size:12px" class="text-white text-center"><strong>{{score_r.grade}}</strong></td>
                {% endif %}
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <p>
          <span class="text-apu-green">Semester Points: </span>{{score.semester_points}};
          <span class="text-apu-green">Semester Credits: </span>{{score.semester_credits}};
          <strong><span class="text-apu-green">Semester GPA: </span>{{score.semester_gpa}}/5.00</strong>
        </p>
      </div>
      <div class="col-md-6">
        <p>
          <span class="text-apu-green">Semester Points: </span>{{score_r.semester_points}};
          <span class="text-apu-green">Semester Credits: </span>{{score_r.semester_credits}};
          <strong><span class="text-apu-green">Semester GPA: </span>{{score_r.semester_gpa}}/5.00</strong>
        </p>
      </div>
      <div class="row">
        <div class="col-md-1">

        </div>
        <div class="col-md-10">
          <p class="text-center">
            <span class="text-apu-green">Total Points: </span>{{score.total_points}};
            <span class="text-apu-green">Total Credits: </span>{{score.total_credits}};
            <strong><span class="text-apu-green">Cumulative GPA: </span>{{score.cumulative_gpa}}/5.00</strong>
          </p>
          <p class="text-center">
            <strong><span class="text-apu-green">Class of Degree: </span>{{degree}}</strong>
          </p>
        </div>
        <div class="col-md-1">

        </div>
      </div>

    </div>
    <div class="row">
      <div class="col-md-4">
        <p class="text-black text-right lh h6"><strong>GRADES' KEY</strong></p>
        <p class="text-dark text-left lh">70 - 100 <span style="background:#1b5e02!important" class="text-white">A</span> Distinction</p>
        <p class="text-dark text-left lh">60 - 69 <span style="background:#2fa802!important" class="text-white">B</span> Excellent</p>
        <p class="text-dark text-left lh">50 - 59 <span style="background:#8dfc17!important" class="text-dark">C</span> Good</p>
      </div>
      <div class="col-md-4">
        <br>
        <p class="text-dark text-left lh">45 - 49 <span style="background:#e9fc17!important" class="bg-D">D</span> Pass</p>
        <p class="text-dark text-left lh">40 - 44 <span style="background:#fc8617!important" class="text-white">E</span> Weak Pass</p>
        <p class="text-dark text-left lh">0 - 39 <span style="background:#ff0000!important" class="text-white">F</span> Fail</p>
      </div>
    </div>

      <div class="row">
          <div class="col-md-2">
            <strong> <p class="text-black text-left">Academic Adviser: </p></strong>
          </div>
          <div class="col-md-2">
            {% if score.static_adviser %}
              <sup><p class="text-left"><img src="{{score.static_adviser.url}}" alt="Adviser's Signature" class="sig2"></p></sup>
            {% endif %}
          </div>
          <div class="col-md-4">

          </div>
          <div class="col-md-2">
            <strong> <p class="text-black text-right">Dean of Faculty: </p></strong>
          </div>
          <div class="col-md-2">
            {% if score.static_dean %}
              <sup><p class="text-left"><img src="{{score.static_dean.url}}" alt="Dean's Signature" class="sig2"></p></sup>
            {% endif %}
          </div>
          <div class="col-md-1">

          </div>
        </div>

      <div class="row">
        <div class="col-md-5">
        </div>
        <div class="col-md-1">
        </div>
        <div class="col-md-3">
          <strong> <p class="text-black text-right">DATE: </p></strong>
        </div>
        <div class="col-md-3">
          <p class="text-left text-primary"><strong>{{score.updated}}</strong></p>
        </div>

      </div>
      {% else %}
      <div class="page-header">
        <h4 class="page-title"><strong class="text-red">Please pay up to date to view your result</strong></h4>
        <script type="text/javascript">
          window.location.href = "{% url 'plans' %}"
        </script>

      </div>
      {% endif %}

  {% else %}
    <h2 class="text-center text-apu-purple">Access Restricted!</h2>
    <br>
{% endif %}

{% endblock content%}