<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Daftar Mata Pelajaran</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: DejaVu Sans, sans-serif; font-size: 12px; color: #1e293b; padding: 24px; }
    .header { text-align: center; margin-bottom: 20px; }
    .header h2 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
    .header p  { font-size: 11px; color: #64748b; }
    table { width: 100%; border-collapse: collapse; }
    thead tr { background-color: #a5e6ba; }
    th, td { border: 1px solid #cbd5e1; padding: 7px 9px; text-align: left; }
    th { font-weight: 700; font-size: 11px; }
    td { font-size: 11px; }
    tr:nth-child(even) { background-color: #f8fafc; }
    .footer { margin-top: 16px; font-size: 10px; color: #94a3b8; text-align: right; }
</style>
</head>
<body>

<div class="header">
    <h2>DAFTAR MATA PELAJARAN</h2>
    <p>Dicetak pada {{ now()->format('d M Y, H:i') }}</p>
</div>

<table>
    <thead>
        <tr>
            <th style="width:40px">No</th>
            <th>ID Mapel</th>
            <th>Nama Mata Pelajaran</th>
            <th>Kelas</th>
        </tr>
    </thead>
    <tbody>
        @foreach($mapels as $i => $mapel)
        <tr>
            <td>{{ $i + 1 }}</td>
            <td>{{ $mapel->id_mapel }}</td>
            <td>{{ $mapel->nama_mapel }}</td>
            <td>
                @foreach($mapel->kelas as $k)
                    <span>{{ $k->tingkat }} {{ $k->nama_kelas }}</span>@unless($loop->last), @endunless
                @endforeach
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<div class="footer">Total: {{ count($mapels) }} mata pelajaran</div>

</body>
</html>