{{--  
    Default text size 12px for content
    Default text size 13px for Titles in tables
    Colors:
    - Title: rgb(35, 50, 87)
    - Content: rgb(85, 97, 128)
--}}
@use('App\Enums\Attributes')

@extends('pdf.layout')

@section('content')
    <div class="header">
        <h1>Final Academic Report</h1>
    </div>

    <table class="student-info" width="100%">
        <tr>
            <td class="left">
                <p class="info-line">
                    <strong>Name:</strong>
                    {{ $student->full_name }}
                </p>
                {{-- <p class="info-line"><strong>Student ID:</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>Grade Level:</strong>
                    {{ data_get($student, 'gradeLevel.name', '') }}
                </p>
                <p class="info-line">
                    <strong>Academic Year:</strong>
                    {{ \Carbon\Carbon::parse(data_get($student, 'academic_period.start_date', ''))->format('Y') }}
                    -
                    {{ \Carbon\Carbon::parse(data_get($student, 'academic_period.end_date', ''))->format('Y') }}
                </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 ($courses && $courses->count() > 0)
        <table class="courses-table" width="100%">
            <thead>
                <tr class="course-column">
                    <th>Course</th>
                    <th>Type</th>
                    <th>Grade</th>
                    <th>Credits</th>
                    @if ($type == Attributes::GL_HIGH_SCHOOL)
                        <th>Un-weighted GPA</th>
                        <th>Weighted GPA</th>
                    @else
                        <th>GPA</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach ($courses as $course)
                    <tr class="course-row">
                        <td>{{ $course->title }}</td>
                        <td>{{ $course->type }}</td>
                        <td>{{ $course->averageParse }}</td>
                        <td>{{ $course->credits }}</td>
                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <td>{{ $course->unweighted }}</td>
                            <td>{{ $course->weighted }}</td>
                        @else
                            <td>{{ $course->unweighted }}</td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <div class="no-courses-message">
            <p>No courses enrolled</p>
        </div>
    @endif

    <div class="tables-container">
        <div class="table-left">
            <table class="summary-table">
                <tbody>
                    <tr>
                        <td class="summary-label-main">Total Credits</td>
                        <td class="summary-value">{{ $courses->sum('credits') }}</td>
                    </tr>
                    <tr>
                        <td class="summary-label">GPA</td>
                        <td class="summary-value">
                            {{ number_format($courses->sum(function ($course) {return floatval($course->unweighted);}) / max($courses->count(), 1),2) }}
                        </td>
                    </tr>
                    @if ($type == Attributes::GL_HIGH_SCHOOL)
                        <tr>
                            <td class="summary-label">WGPA</td>
                            <td class="summary-value">
                                {{ number_format($courses->sum(function ($course) {return floatval($course->weighted);}) / max($courses->count(), 1),2) }}
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>

            <span class="note">
                <p>
                    International American Institute is registered
                    in the California School Directory.
                </p>
                <p>CDS Code: 34674396167456</p>
                <p>County: Sacramento</p>
                <p>Address: 1401 21St Street Suite R</p>
            </span>

            @if($administrativeUser && $administrativeUser->signature_image)
                <img src="{{ public_path('storage/' . $administrativeUser->signature_image) }}" alt="Signature" style="max-width: 200px; height: auto; margin-top: 40px;" />
                <div class="administrative-user">
                    <div class="signature-line"></div>
                    <p class="info-line">
                        <strong>{{ $administrativeUser->name }}</strong><br />
                        <span><strong>Director</strong></span>
                    </p>
                </div>
            @endif
        </div>
        <div class="table-blank-space"></div>
        <div class="table-right">
            <table class="grade-key-table">
                <thead>
                    <tr>
                        <th colspan="{{($type == Attributes::GL_HIGH_SCHOOL ? '4' : '3')}}" class="grade-key-header">Academic Grade Key</th>
                    </tr>
                    <tr>
                        <th>Grade</th>
                        <th>Percentage</th>
                        <th>GPA</th>

                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <th>WGPA</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>A</td>
                        <td>90% - 100%</td>
                        <td>4.0</td>
                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <td>5.0</td>
                        @endif
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>80% - 89%</td>
                        <td>3.0</td>
                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <td>4.0</td>
                        @endif
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>80% - 79%</td>
                        <td>2.0</td>
                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <td>3.0</td>
                        @endif
                    </tr>
                    <tr>
                        <td>D</td>
                        <td>60% - 69%</td>
                        <td>1.0</td>
                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <td>2.0</td>
                        @endif
                    </tr>
                    <tr>
                        <td>F</td>
                        <td>0% - 59%</td>
                        <td>0.0</td>
                        @if ($type == Attributes::GL_HIGH_SCHOOL)
                            <td>0.0</td>
                        @endif
                    </tr>
                </tbody>
            </table>

            <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>
            </div>
        </div>
    </div>


    <style>
        @page {
            /* margin: 40px 40px; */
        }

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

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

        }

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

        .student-info {
            font-size: 11x;
            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;
            font-size: 12px;
        }

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

        .info-line {
            margin: 2px 0;
            color: rgb(85, 97, 128);
        }

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

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

        .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;
            padding: 5px 6px;
        }

        .courses-table td:nth-child(1) {
            width: 43%;
            text-align: left;
        }

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

        .courses-table td:nth-child(3) {
            width: 10%;
        }

        .courses-table td:nth-child(4) {
            width: 10%;
        }

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

        .course-row td {
            color: rgb(85, 97, 128);
            font-size: 12px;
            text-align: center;
        }

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

        .tables-container {
            display: table;
            width: 100%;
            margin-top: 25px;
        }

        .table-blank-space {
            display: table-cell;
            width: 20%;
        }

        .table-left {
            display: table-cell;
            width: 30%;
            vertical-align: top;
            text-align: left;
        }

        .table-left .note {
            margin-top: 15px;
            font-size: 10px;
            line-height: 1.4;
            color: rgb(85, 97, 128);
            display: block;
        }

        .table-left .note p {
            margin: 2px 0;
            line-height: 1.3;
        }

        .table-right {
            display: table-cell;
            width: 50%;
            vertical-align: top;
            text-align: right;
        }

        .summary-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .summary-table td {
            border: 2px solid black;
            padding: 8px 15px;
        }

        .summary-label {
            font-weight: bold;
            text-align: left;
            color: rgb(35, 50, 87);
            font-size: 13px;
        }

        .summary-label-main {
            font-weight: bold;
            text-align: left;
            color: rgb(35, 50, 87);
            font-size: 13px;
        }

        .summary-value {
            text-align: center;
            min-width: 80px;
            color: rgb(85, 97, 128);
            font-size: 12px;
        }

        .grade-key-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .grade-key-table th {
            border: 2px solid black;
            padding: 8px 12px;
            text-align: center;
            font-size: 13px;
            color: rgb(35, 50, 87);
        }

        .grade-key-table td {
            border: 2px solid black;
            padding: 8px 12px;
            text-align: center;
            font-size: 12px;
            color: rgb(85, 97, 128);
        }

        .grade-key-header {
            font-weight: bold;
            font-size: 13px;
            color: rgb(35, 50, 87);
            /* background-color: #f5f5f5; */
        }

        .grade-key-table th {
            font-weight: bold;
        }

        .grade-key-table tbody td {
            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: 12px;
            font-weight: bold;
            margin-bottom: 5px;
        }

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

        ul.custom-list li {
            font-size: 11px;
            line-height: 1.2;
            margin-bottom: 5px;
            font-weight: 10px;
            color: rgb(85, 97, 128);
        }

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

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

        .administrative-user {
            text-align: center;
            margin-top: -10px;
            color: black;
        }

        .administrative-user .info-line{
            text-align: center;
            margin-top: 5px;
            font-size: 13px;
        }

        .signature-line {
            border-bottom: 1px solid black;
            width: 200px;
            margin: 0 auto;
        }
    </style>
@endsection