@extends('pdf.layout')

@section('content')
    <style>
        @page {
            margin: 40px 40px;
        }

        body {
            font-family: DejaVu Sans, sans-serif;
            font-size: 12px;
            color: #333;
        }

        .header-left img {
            width: 100px;
        }

        .header-title {
            font-size: 20px;
            font-weight: bold;
            color: #1f3b73;
        }

        /* STUDENT INFO SECTION */
        .student-info {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .student-details {
            line-height: 1.6;
        }

        .student-details strong {
            color: #1f3b73;
        }

        .gpa-box {
            text-align: right;
        }

        .gpa-box .label {
            font-weight: bold;
            font-size: 14px;
            color: #1f3b73;
        }

        .gpa-box .value {
            font-size: 14px;
            font-weight: bold;
            color: #000;
        }

        /* TABLES */
        h3 {
            margin-top: 25px;
            font-size: 13px;
            color: #1f3b73;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 6px;
            font-size: 11px;
        }

        th {
            background-color: #f8fafc;
            color: #333;
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ccc;
        }

        td {
            padding: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        tr:last-child td {
            border-bottom: none;
        }
    </style>

    <div class="student-info">
        <div class="student-details">
            <strong>{{ $student['full_name'] }}</strong><br>
            <strong>Grade:</strong> {{ data_get($student, 'gradeLevel.name', '') }}
        </div>
        <div class="gpa-box">
            <div class="label">Cumulative GPA</div>
            <div class="value">{{ number_format($cumulativeAverage, 2) }}</div>
        </div>
    </div>

    <hr style="border: none; border-top: 1px solid #ddd; margin-bottom: 15px;">

    @foreach ($academicPeriods as $name => $courses)
        <h3>{{ $name }}</h3>
        <table>
            <thead>
                <tr>
                    <th style="width: 40%;">Course</th>
                    <th style="width: 10%;">Grade</th>
                    <th style="width: 15%;">Credits</th>
                    <th style="width: 15%;">GPA</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($courses as $course)
                    <tr>
                        <td>{{ $course['title'] }}</td>
                        <td>{{ $course['averageParse'] }}</td>
                        <td>{{ number_format($course['credits'], 2) }}</td>
                        <td>{{ number_format($course['average'], 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endforeach
@endsection