@extends('pdf.layout')

@section('content')
    <div class="header">
        <h1>Interim Progress Report</h1>
        <p>The Interim report is formal notification of your child'
            s progress / El Informe Interino es una notificación formal
            del progreso de su hijo(a).
        </p>
    </div>

    <table class="student-info" width="100%">
        <tr>
            <td class="left">
                <p class="info-line"><strong>Student:</strong> {{ $student->full_name }}</p>
                <p class="info-line"><strong>DOB:</strong> {{ \Carbon\Carbon::parse($student->birthdate)->format('F j, Y') }}
                </p>
                <p class="info-line"><strong>Current Grade:</strong> {{ data_get($student, 'gradeLevel.name', '') }}
                </p>
            </td>
            <td class="right">
                <p class="info-line"><strong>Data accurate as of:</strong> {{ \Carbon\Carbon::now()->format('F j, Y') }}</p>
            </td>
        </tr>
    </table>

    @if ($student->courses && $student->courses->count() > 0)
        <table class="courses-table" width="100%">
            <thead>
                <tr class="course-column">
                    <th>Course code</th>
                    <th>Courses</th>
                    <th>Grade</th>
                    <th>Progress</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($student->courses as $course)
                    <tr class="course-row">
                        <td>{{ $course->code }}</td>
                        <td>{{ $course->title }}</td>
                        <td>{{ $course['averageParse'] }}</td>
                        <td>{{ $course->progress ? $course->progress . '%' : '0%' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <div class="no-courses-message">
            <p>No courses enrolled</p>
        </div>
    @endif

    <div class="body-note">
        <p class="title">ACADEMIC GRADE KEY/CÓDIGO DE CALIFICACIÓN</p>
        <ul class="custom-list">
            <li><span class="grade">A - </span>Outstanding Progress/Progreso sobresaliente</li>
            <li><span class="grade">B - </span>Above Average Progress/Progreso que supera al promedio</li>
            <li><span class="grade">C - </span>Average Progress/Progreso promedio</li>
            <li><span class="grade">D - </span>Lowest Acceptable Progress/Progreso mínimo aceptable</li>
            <li><span class="grade">F - </span>Failure/Reprobado</li>
        </ul>

        {{-- Note section --}}
        <p class="note">Note: The grades and progress shown reflect your child’
            s activity across courses in our Learning Management
            System (LMS) / Las calificaciones y el progreso mostrados reflejan la actividad de su hijo(a) en los cursos
            dentro
            de nuestra plataforma (LMS).</p>
        <p class="sub-note">Grades for subjects completed at another school have not been included in this report./ Este
            informe no
            incluye las calificaciones de las materias validadas cursadas en otra institución.
        </p>
    </div>
    <style>
        @page {
            /* margin: 40px 40px; */
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            /* color: #333; */
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            color: rgb(35, 50, 87);

        }

        .header h1 {
            font-weight: bold;
            font-size: 24px;
        }

        .student-info {
            font-size: 14px;
            margin-top: 10px;
            border-collapse: collapse;
            width: 100%;
        }

        .student-info td {
            vertical-align: top;
            padding: 0;
            margin: 0;
        }

        .student-info .left {
            width: 65%;
            line-height: 1.5;
        }

        .student-info .right {
            width: 35%;
            text-align: right;
            white-space: nowrap;
        }

        .info-line {
            margin: 2px 0;
            color: rgb(35, 50, 87);
        }

        .student-info strong {
            /* color: #14213d; */
            color: rgb(35, 50, 87);
            font-weight: bold;
            font-size: 16px;
        }

        .courses-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            margin-top: 25px;
        }

        .courses-table th,
        .courses-table td {
            border: 2px solid black;
            padding: 8px 10px;
            text-align: left;
            vertical-align: middle;
        }

        .courses-table th {
            font-weight: bold;
            text-align: center;
        }

        .courses-table td:nth-child(1) {
            width: 22%;
        }

        .courses-table td:nth-child(2) {
            width: 48%;
        }

        .courses-table td:nth-child(3),
        .courses-table td:nth-child(4) {
            width: 15%;
            text-align: center;
        }

        .body-note {
            margin-top: 20px;
            font-size: 13px;
            padding-left: 10px;
            text-align: left;
        }

        .body-note p {
            text-align: left;
            font-size: 13px;
            margin-bottom: 10px;
        }

        .body-note .title {
            color: rgb(35, 50, 87);
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        ul.custom-list {
            list-style: none;
            padding-left: 0;
            margin-top: 0;
        }

        ul.custom-list li {
            font-size: 13px;
            line-height: 1.8;
            margin-bottom: 5px;
            font-weight: 10px;
            /* color: #555; */
            color: rgb(35, 50, 87);

        }

        ul.custom-list .grade {
            color: rgb(35, 50, 87);
            font-weight: bold;
            font-size: 13px;
            font-weight: 14px;
        }

        .course-row td {
            text-align: center;
        }

        .course-column {
            font-size: 16px;
            color: rgb(35, 50, 87);
        }

        .no-courses-message {
            text-align: center;
            padding: 40px 20px;
            margin-top: 25px;
            font-size: 14px;
            color: rgb(35, 50, 87);
            font-weight: bold;
        }

        .body-note .note {
            margin-top: 60px;
            font-size: 13px;
            text-align: center;
            /* color: #555; */
            color: rgb(35, 50, 87);
            line-height: 1.5;
        }

        .body-note .sub-note {
            text-align: center;
            font-size: 12px;
            /* font-style: italic; */
            margin-top: 5px;
            /* color: #555; */
            color: rgb(35, 50, 87);
            line-height: 1.5;
        }
    </style>
@endsection