@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-top: 1px solid black;
            border-bottom: 0px solid white;
            border-right: 0px solid white;
            border-left: 3px solid white;
            border-radius: 0;
            background-color: white;
            position: relative;
            top: 16.50cm;
            left: -0.035cm;
            height: 1cm;
            width: 630px
        }
    </style>




    <div style="width: 100%">
        <div class="line_vertical-table_first"></div>
        <table class="grade-table border-left border-bottom" style="background-color: white;min-height:13cm">
            <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 - 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">&nbsp;</td>
                        <td class="table-td" style="color: white">&nbsp;</td>
                        <td class="table-td" style="color: white">&nbsp;</td>
                        <td class="table-td" style="color: white">&nbsp;</td>
                        <td class="table-td" style="color: white">&nbsp;</td>
                        <td class="table-td" style="color: white">&nbsp;</td>
                    </tr>
                @endfor

            </tbody>
        </table>


    </div>
@endsection