<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kartu Anggota</title>

    <style>
        @page {
            size: A4;
            margin: 0;
        }

        body {
            font-family: DejaVu Sans, sans-serif;
            font-size: 10px;
        }

        .page {
            width: 100%;
            height: 100%;
            text-align: center;
            page-break-after: always;
        }

        .kta {
            width: 320px;
            border: 2px solid #000;
            border-radius: 8px;
            padding: 8px;
            margin: 120px auto 0 auto;
            page-break-inside: avoid;
        }

        .header {
            text-align: center;
            border-bottom: 1px solid #000;
            padding-bottom: 4px;
            margin-bottom: 6px;
        }

        .header h3 {
            margin: 0;
            font-size: 12px;
        }

        .header span {
            font-size: 9px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 2px;
            vertical-align: top;
        }

        .foto {
            width: 80px;
            height: 95px;
            border: 1px solid #000;
            font-size: 8px;
            text-align: center;
        }

        .aktif { color: green; font-weight: bold; }
        .nonaktif { color: red; font-weight: bold; }

        .footer {
            border-top: 1px solid #000;
            margin-top: 6px;
            padding-top: 4px;
            font-size: 8px;
        }

        .qr {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            font-size: 7px;
        }
    </style>
</head>

<body>

<div class="page">
    <div class="kta">

        <div class="header">
            <h3>PERPUSTAKAAN SEKOLAH</h3>
            <span>Kartu Tanda Anggota</span>
        </div>

        <table>
            <tr>
                <td width="30%">
                    <div class="foto">FOTO<br>3x4</div>
                </td>
                <td width="70%">
                    <table>
                        <tr><td>NIS</td><td>: <b>{{ $siswa->nis }}</b></td></tr>
                        <tr><td>Nama</td><td>: <b>{{ $siswa->nama }}</b></td></tr>
                        <tr><td>Kelas</td><td>: {{ $siswa->kelas }}</td></tr>
                        <tr>
                            <td>Status</td>
                            <td>:
                                @if($siswa->anggota->status == 'aktif')
                                    <span class="aktif">AKTIF</span>
                                @else
                                    <span class="nonaktif">NON AKTIF</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td>Terdaftar</td>
                            <td>: {{ \Carbon\Carbon::parse($siswa->anggota->tanggal_daftar)->format('d-m-Y') }}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <table class="footer">
            <tr>
                <td width="60%">
                    Berlaku selama menjadi anggota perpustakaan
                    <br><br>
                    Kepala Perpustakaan
                    <br><br>
                    ( ________________ )
                </td>
                <td width="40%" align="center">
                    <div class="qr">QR<br>CODE</div>
                </td>
            </tr>
        </table>

    </div>
</div>

</body>
</html>
