@extends('pdf.layout.certificates.certificate_layout')

@section('content')
    <style>
        .grade-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;

        }

        .table-title {
            font-size: 8px;
            font-weight: 100;
            text-align: center;


        }

        .table-td {
            font-size: 8px;
            line-height: 10px;
            padding-left: 5px;
            padding-bottom: 4px;
            border-right: 1px solid black;
        }

        .border-left {
            border-left: 1px solid black !important;
        }

        .border-top {
            border-top: 1px solid black !important;
        }

        .border-right {
            border-right: 1px solid black !important;
        }

        .border-bottom {
            border-bottom: 1px solid black !important;
        }

        .text-center {
            text-align: center;
        }

        .text-left {
            text-align: left;
        }

        .font-small {
            font-size: 6px;
        }

        .border-top-avg {
            border-top: 2px solid black !important;
        }

        .avg-text {
            font-weight: bold;
            font-size: 10.5px;
            margin: 0;
        }


        .line_vertical-table_first {
            border-bottom: 1px solid black;
            position: absolute;
            bottom: 1cm;
            right: -0.45cm;
            width: 16.7cm;
        }
    </style>




    <div class="width: 100%">
        <table class="grade-table border-left border-bottom" style="background-color: white">
            <thead>
                <tr>
                    <th class="table-title border-right border-bottom border-top" style="width: 1.5cm;" rowspan="2">CLAVE
                    </th>
                    <th class="table-title border-right border-bottom  border-top" style="width: 8cm;" rowspan="2">NOMBRE DE
                        LA ASIGNATURA</th>
                    <th class="table-title border-right border-bottom  border-top" style="width: 1.5cm;" rowspan="2">CICLO
                        EN QUE SE CURSÓ</th>
                    <th class="table-title border-right border-bottom  border-top" style="width: 3cm;" colspan="2">
                        CALIFICACIÓN</th>
                    <th class="table-title border-bottom  border-right border-top" style="width: 2cm;" rowspan="2">
                        OBSERVACIONES</th>
                </tr>
                <tr>
                    <th class="table-title border-bottom border-right" style="width: 1.2cm">NÚMERO</th>
                    <th class="table-title border-bottom border-right" style="width: 2cm">LETRA</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $total_rows = 70;
                    $total_rows = $total_rows - count($grades); // 2 for average row and empty row
                @endphp
                @foreach ($grades as $grade)

                    <tr>
                        <td class="table-td text-center">{{ $grade->cve_subject }}</td>
                        <td class="table-td text-left">{{ $grade->name }}</td>
                        <td class="table-td text-center">{{ $grade->cycle_year }}-{{ $grade->cycle_subcycle }}</td>
                        <td class="table-td text-center">{{ $grade->grade }}</td>
                        <td class="table-td text-center font-small">{{ \app\Models\Grade::formatNumberToText($grade->grade, " ", true) }}</td>
                        <td class="table-td text-center">{{ $grade->description }}</td>
                    </tr>
                @endforeach

                {{-- Promedio --}}
                <tr>
                    <td class="table-td border-top-avg"></td>
                    <td class="table-td border-top-avg">
                        <pre class="avg-text">Promedio: {{ $average }}</pre>
                    </td>
                    <td class="table-td border-top-avg"></td>
                    <td class="table-td border-top-avg"></td>
                    <td class="table-td border-top-avg"></td>
                    <td class="table-td border-top-avg"></td>
                </tr>

                @for ($i = 0; $i <= $total_rows; $i++)
                    <tr>
                        <td class="table-td" style="color: white">*</td>
                        <td class="table-td" style="color: white">*</td>
                        <td class="table-td" style="color: white">*</td>
                        <td class="table-td" style="color: white">*</td>
                        <td class="table-td" style="color: white">*</td>
                        <td class="table-td" style="color: white">*</td>
                    </tr>
                @endfor

            </tbody>
        </table>
    @endsection

    <div class="line_vertical-table_first"></div>
</div>