{# Template For UG Students - SEMESTER GRADE REPORT
Changes : Show rotated headers, semester grade and SGPA #}
<link href='https://fonts.googleapis.com/css2?family=Arial:wght@400;700&display=swap' rel='stylesheet'>
<style>
    body, table {
        font-family: Times New Roman !important;
    }
	table {
        border-collapse: collapse;
    }
	.markdisplay {
        border: 2px solid black !important;
        width: 100%;
    }
	.markdisplay th, .markdisplay td {
        border: 1px solid black;
        text-align: center;
        vertical-align: middle;
    }
    .info-table {
        width: 100%;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.8;
    }
    .info-table td {
        border: none !important;
        padding: 2px 0;
        vertical-align: top;
        font-size: 14px;
    }
    .info-table table {
        border-collapse: collapse;
        border: none;
    }
    .info-table table td {
        border: none !important;
        padding: 0 !important;
        vertical-align: top !important;
        font-size: 14px;
    }
    .info-label {
        font-weight: bold;
        min-width: 155px;
        text-align: left;
        vertical-align: top;
        font-size: 14px;
    }
    .info-value {
        text-align: left;
        vertical-align: top;
        word-wrap: break-word;
        white-space: normal;
        font-size: 14px;
        max-width: 300px;
    }
    .info-right-col {
        padding-left: 230px;
    }

	.heading {
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        margin: 10px 0 40px 0;
        letter-spacing: 2px;
    }
	.footer-class {
        position: fixed;
        bottom: 20px;
        left: 40px;
        font-size: 14px;
    }
	.rotate-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        display: inline-block;
    }
    .course-code-col {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        display: inline-block;
    }
    .markdisplay thead th {
        text-align: center !important;
        vertical-align: middle !important;
    }
    @media print {
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        .rotate-text, .course-code-col {
            writing-mode: vertical-rl !important;
            -webkit-writing-mode: vertical-rl !important;
            -ms-writing-mode: tb-rl !important;
            transform: rotate(180deg) !important;
            -webkit-transform: rotate(180deg) !important;
            -moz-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
            white-space: normal !important;
            text-align: center !important;
            display: inline-block !important;
        }
        .markdisplay thead th div {
            writing-mode: vertical-rl !important;
            -webkit-writing-mode: vertical-rl !important;
        }
    }
    .subject-row td {
        padding: 6px 4px;
        font-size: 14px;
        height: 30px;
    }
    .subject-name {
        text-align: left !important;
        padding-left: 8px !important;
        font-size: 14px;
    }
    .total-row {
        font-weight: bold;
    }
    .sgpa-section {
        margin-top: 20px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
    }
    .result-section {
        margin-block: 10px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
    }
    .no-border-table tr td{
        border: none !important;
    }
    .single-page {
        position: relative;
        width: 100%;
        min-height: 297mm;
        page-break-after: always;
        padding: 15px 25px;
        box-sizing: border-box;
    }
    @media print {
        .single-page {
            padding: 15px 25px;
        }
        @page {
            margin: 0;
            size: A4;
        }
    }
</style>
{% for student in data.studentData %}
    <div class="single-page">
        {# Header Title #}
        <table style="width: 100%; border:none;">
            <tr>
                <td style="text-align:center; border:none;">
                    <img src="{{data.collegeAndOtherData.collegeHeader}}" class="college-header-img">
                </td>
            </tr>
        </table>
        <div style='min-height:188mm'> 
            <div class="heading">SEMESTER GRADE REPORT
            </div>
            {# Student Information Section #}
            <table class="info-table no-border-table" cellpadding="0" cellspacing="0" style="width: 100%; border:none">
                <tr>
                    <td style="width: 45%; vertical-align: top;">
                        <table cellpadding="0" cellspacing="0" style="width: 100%; border: none;">
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">EXAMINATION</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{data.examRegistrationData.groupDesc}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">SEMESTER</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{data.examRegistrationData.semInRomanLetter}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">MONTH AND YEAR</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{data.examRegistrationData.examMonthName | upper}} {{data.examRegistrationData.examYear}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">DATE</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{ data.displayContentOptions.markListDate }}</td>
                            </tr>
                        </table>
                    </td>
                    <td style="width: 55%; vertical-align: top; padding-left: 50px;">
                        <table cellpadding="0" cellspacing="0" style="width: 100%; border: none;">
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">ROLL NO</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.rollNo}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">NAME</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.name | upper}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">FATHER'S NAME</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.fatherName | upper}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">MOTHER'S NAME</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.motherName | upper}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            {# Marks Table #}
            {% if student.isResultBlocked %}
                <div style="color:red; padding-top:1cm; text-align:center; font-weight:bold;">
                    {{student.blockingMsg |raw}}
                </div>
            {% else %}
                <table class="markdisplay" cellpadding="0" cellspacing="0" style="margin-top: 15px;">
                    <thead>
                        <tr style="height: 110px;">
                            <th style="width: 35px; vertical-align: middle;">
                                <div class="course-code-col" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important;">COURSE<br>CATEGORY</div>
                            </th>
                            <th style="width: 380px; vertical-align: middle;">
                                <div style="padding: 8px; font-weight: bold; font-size:14px; width: 380px;">COURSE TITLE</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">CREDITS</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">LETTER<br>GRADE</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">GRADE<br>POINTS</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">CREDITS<br>ACQUIRED</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">CREDIT<br>POINTS</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">RESULT</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% set totalCredits = 0 %}
                        {% set totalCreditPoints = 0 %}
                        {% set failedCountInNonCreditCourse = 0 %}
                        {% set failedCountInOtherSubjects = 0 %}
                        {% for subject in student.subjects %}
                            {% set grade = subject.grade %}
                            {% if data.displayContentOptions.showGradAsAbsent and subject.attendanceStatus == "ABSENT" %}
                                {% set grade = "AB" %}
                            {% endif %}

                            {% if subject.excludeSubjectFromTotal and subject.failedStatus == "FAILED" %}
                                {% set failedCountInNonCreditCourse = failedCountInNonCreditCourse + 1 %}
                            {% elseif subject.failedStatus == "FAILED" %}
                                {% set failedCountInOtherSubjects = failedCountInOtherSubjects + 1 %}
                            {% endif %}

                            <tr class="subject-row">
                                <td style="text-align:center; font-weight: bold; font-size: 14px; border-top: none; border-bottom: none;">{{subject.subjectTypeCode |raw}}</td>
                                <td class="subject-name" style="font-size: 14px; border-top: none; border-bottom: none;">{{subject.name |raw}} {{ subject.excludeSubjectFromTotal == "1" ? '*' : '' }}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">{{subject.credit}}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">
                                    {% if subject.attendanceStatus == "ABSENT" %}
                                        AB
                                    {% elseif subject.attendanceStatus == "MALPRACTICE" %}
                                        MAL
                                    {% else %}
                                        {{grade}}
                                    {% endif %}
                                </td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">
                                    {% if subject.attendanceStatus == "ABSENT" %}
                                        0
                                    {% else %}
                                        {{subject.gradePoint}}
                                    {% endif %}
                                </td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">{{subject.failedStatus == 'FAILED' ? '' : subject.credit}}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">{{ (subject.failedStatus == 'FAILED' ? '0' : subject.creditGradePoint)}}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">
                                    {% if subject.attendanceStatus == "ABSENT" and subject.excludeSubjectFromTotal %}
                                        F
                                    {% else %}
                                    {{subject.failedStatus == 'FAILED' ? 'F' : 'P'}}
                                    {% endif %}
                                </td>
                            </tr>
                            {% if subject.excludeSubjectFromTotal != "1" %}
                                {% if subject.failedStatus == 'FAILED' %}
                                    {# Don't add credits for failed subjects #}
                                {% else %}
                                    {% set totalCredits = totalCredits + subject.credit %}
                                    {% set totalCreditPoints = totalCreditPoints + subject.creditGradePoint %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        <tr class="total-row" style="height: 35px;">
                            <td colspan="2" style="text-align:center;">Total</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{{totalCredits}}</td>
                            <td>{{totalCreditPoints}}</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            {% endif %}
            {% if student.haveExcludeSubjectFromTotal %}
                <div style="margin-top: 15px; font-size: 14px;">
                    <span>*</span> Indicates subjects which are not calculated for SGPA/CGPA.
                </div>
            {% endif %}
            {# SGPA Section #}
            {% set calculatedSgpa = totalCredits > 0 ? (totalCreditPoints / totalCredits) | number_format(2) : '-' %}
            <div class="sgpa-section">
                SEMESTER GRADE POINT AVERAGE (SGPA)= TCP/TCA= {{(student.finalSemesterStatus == 'FAILED' or student.failedStatus == 'FAILED') ? '-' : calculatedSgpa}}
            </div>
            {# Result Section #}
            <div class="result-section" style="margin-top: 10px;">
                {% if student.finalSemesterStatus %}
                    RESULT : {{student.finalSemesterStatus}}
                {% elseif student.annualPromotionStatus %}
                    RESULT : {{student.annualPromotionStatus}}
                {% elseif failedCountInOtherSubjects == 0 and  failedCountInNonCreditCourse > 0 %}
                    RESULT : PROMOTED
                {% else %}
                    RESULT : {{student.failedStatus == 'FAILED' ? 'PROMOTED' : 'PASS'}} 
            {% endif %}
            </div>
        </div>
        
        {% if data.subjectGradeSchemeArray %}
            <div style="font-size: 10px;">
            {% set gradeArray = data.subjectGradeSchemeArray[0] %}
            {% set totalCount = gradeArray|length %}
            {% set half = (totalCount // 2) + (totalCount % 2) %}
            {% set leftArray = gradeArray|slice(0, half) %}
            {% set rightArray = gradeArray|slice(half, totalCount-half) %}

                <table style="width: 100%; border:none;">
                <tr style="text-align:center; font-weight:bold; font-size:14px;">
                    <th width='5%' style="text-align:center; padding:8px;">S.No.</th>
                    <th width='8%' style="text-align:center; padding:8px;">Letter Grade</th>
                    <th width='19%' style="text-align:center; padding:8px;">Achievement Scale</th>
                    <th width='8%' style="text-align:center; padding:8px;">Grade Points</th>
                    <th width='10%' style="text-align:center; padding:8px;">Marks Obtained</th>
                    <th width='5%' style="text-align:center; padding:8px;">S.No.</th>
                    <th width='8%' style="text-align:center; padding:8px;">Letter Grade</th>
                    <th width='19%' style="text-align:center; padding:8px;">Achievement Scale</th>
                    <th width='8%' style="text-align:center; padding:8px;">Grade Points</th>
                    <th width='10%' style="text-align:center; padding:8px;">Marks Obtained</th>
                </tr>
                    {% for i in range(0, half-1) %}
                            <tr style="text-align:center; font-size:14px;">
                                <td align="center" style="padding:5px;font-weight:bold;">{{ i + 1 }}</td>
                                <td align="center" style="padding:5px;">{{ leftArray[i].letterGrade }}</td>
                                <td align="center" style="padding:5px;">{{ leftArray[i].className }}</td>
                                <td align="center" style="padding:5px;">{{ leftArray[i].gradePoint }}</td>
                                <td align="center" style="padding:5px;">{{ leftArray[i].rangeFrom|round }}-{{ leftArray[i].rangeTo|round }}</td>
                                {% if rightArray[i] is defined %}
                                    <td align="center" style="padding:5px;font-weight:bold;">{{ half + i + 1 }}</td>
                                    <td align="center" style="padding:5px;">{{ rightArray[i].letterGrade }}</td>
                                    <td align="center" style="padding:5px;">{{ rightArray[i].className }}</td>
                                    <td align="center" style="padding:5px;">{{ rightArray[i].gradePoint }}</td>
                                    <td align="center" style="padding:5px;">{{ rightArray[i].rangeFrom|round }}-{{ rightArray[i].rangeTo|round }}</td>
                                {% else %}
                                    <td align="center" style="padding:5px;">-</td>
                                    <td align="center" style="padding:5px;">-</td>
                                    <td align="center" style="padding:5px;">-</td>
                                    <td align="center" style="padding:5px;">-</td>
                                    <td align="center" style="padding:5px;">-</td>
                                {% endif %}
                            </tr>
                    {% endfor %}
                </table>
            </div>
        {% endif %}
        <div class="footer-class">
            Date: {{ "now"|date("d-m-Y") }}
        </div>
    </div>
{% endfor %}