<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kartu Anggota {{ $member->nama }}</title>
    <style>
        @page {
            margin: 0cm;
        }
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #ffffff;
        }

        /* LABEL KETERANGAN */
        .keterangan-label {
            width: 85.6mm;
            margin: 0 auto 5px auto;
            font-size: 9pt;
            font-weight: bold;
            color: #4b5563;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-left: 3px solid #0072b1;
            padding-left: 6px;
        }

        /* UKURAN CR80 STANDAR */
        .kartu-table {
            width: 85.6mm;
            height: 54.0mm;
            max-width: 85.6mm;
            max-height: 54.0mm;
            table-layout: fixed;
            
            border-radius: 3.18mm; 
            overflow: hidden; /* Memotong konten agar ikut melengkung */
            
            border: 1px solid #cbd5e1;
            margin: 0 auto 15mm auto;
            border-collapse: collapse;
            background-color: #ffffff;
            page-break-inside: avoid;
        }

        /* TWEAK KHUSUS AGAR SUDUT ATAS DAN BAWAH IKUT BULAT SEMPURNA */
        .header-card {
            background-color: #0072b1;
            height: 13mm;
            padding: 0 4mm;
            color: #ffffff;
            /* Lengkungan sudut atas */
            border-top-left-radius: 3.18mm;
            border-top-right-radius: 3.18mm;
        }

        .footer-card {
            background-color: #f7931e;
            color: #ffffff;
            text-align: center;
            font-size: 5.5pt;
            height: 5.5mm;
            vertical-align: middle;
            /* KUNCI LENGKUNGAN SUDUT BAWAH DISINI */
            border-bottom-left-radius: 3.18mm;
            border-bottom-right-radius: 3.18mm;
        }

        /* LOGO HEADER */
        .header-logo {
            width: 9mm;
            height: 9mm;
            vertical-align: middle;
        }
        .header-text {
            vertical-align: middle;
            padding-left: 2mm;
        }
        .header-text h1 {
            font-size: 7.5pt;
            margin: 0;
            font-weight: bold;
            line-height: 1.1;
        }
        .header-text span {
            font-size: 5pt;
            display: block;
            margin-top: 1px;
            color: #f3f4f6;
        }

        /* CONTENT DEPAN */
        .content-card-depan {
            padding: 2.5mm 0mm 2.5mm 4mm;
            vertical-align: top;
        }
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 2px;
        }
        .info-table td {
            padding: 0.8px 0;
            font-size: 6.2pt;
            color: #374151;
            vertical-align: top;
            line-height: 1.15;
        }
        .info-table td.label {
            width: 21mm;
            font-weight: bold;
        }
        .info-table td.colon {
            width: 1.5mm;
            text-align: center;
        }

        /* FOTO KARTU DEPAN */
        .foto-td {
            width: 22mm;
            vertical-align: top;
            text-align: right;
            padding: 3mm 4mm 0 0;
        }
        .foto-box {
            width: 16.5mm;
            height: 21.5mm;
            border: 1px solid #e5e7eb;
            object-fit: cover;
            border-radius: 1mm;
        }

        /* BAGIAN BELAKANG */
        .content-belakang {
            padding: 4mm 5mm 2mm 5mm;
            vertical-align: top;
        }
        .content-belakang h3 {
            margin: 0 0 2mm 0;
            color: #0072b1;
            font-size: 7.5pt;
            border-bottom: 1px solid #f7931e;
            padding-bottom: 2px;
            text-align: center;
        }
        .catatan-list {
            margin: 0;
            padding-left: 3.5mm;
        }
        .catatan-list li {
            font-size: 5.8pt;
            color: #1f2937;
            margin-bottom: 3.5px;
            line-height: 1.25;
        }
    </style>
</head>
<body>

    <div class="keterangan-label">Bagian Depan</div>
    <table class="kartu-table">
        <tr>
            <td colspan="2" class="header-card">
                <table width="100%">
                    <tr>
                        <td width="35">
                            <img class="header-logo" src="{{ public_path('images/pustaka.jpeg') }}" alt="Logo">
                        </td>
                        <td class="header-text">
                            <h1>BAKORWIL III MALANG PROV JATIM</h1>
                            <span>KARTU TANDA ANGGOTA - PUSTAKA NAWASENA</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        
        <tr>
            <td class="content-card-depan">
                <h2 style="margin: 0 0 2px 0; font-size: 8.5pt; color: #111827; font-weight: bold;">{{ $member->nama }}</h2>
                <table class="info-table">
                    <tr>
                        <td class="label">ID/UID Anggota</td>
                        <td class="colon">:</td>
                        <td class="value"><strong>{{ $member->uid ?? '-' }}</strong></td>
                    </tr>
                    <tr>
                        <td class="label">NIP/NIM</td>
                        <td class="colon">:</td>
                        <td class="value">{{ $member->nip_nim ?? '-' }}</td>
                    </tr>
                    <tr>
                        <td class="label">Email</td>
                        <td class="colon">:</td>
                        <td class="value">{{ $member->email }}</td>
                    </tr>
                    <tr>
                        <td class="label">Alamat</td>
                        <td class="colon">:</td>
                        <td class="value">{{ Str::limit($member->alamat, 45) }}</td>
                    </tr>
                    <tr>
                        <td class="label">No. Telepon</td>
                        <td class="colon">:</td>
                        <td class="value">{{ $member->no_hp ?? '-' }}</td>
                    </tr>
                </table>
            </td>
            
            <td class="foto-td">
                @php
                    $fotoPath = $member->foto ? storage_path('app/public/foto_anggota/'.$member->foto) : public_path('images/default-user.png');
                    if(file_exists($fotoPath)){
                        $fotoData = base64_encode(file_get_contents($fotoPath));
                        $fotoExt = pathinfo($fotoPath, PATHINFO_EXTENSION);
                        $fotoSrc = "data:image/{$fotoExt};base64,{$fotoData}";
                    } else {
                        $fotoSrc = "";
                    }
                @endphp
                @if($fotoSrc)
                    <img class="foto-box" src="{{ $fotoSrc }}" alt="Foto">
                @endif
            </td>
        </tr>
        
        <tr>
            <td colspan="2" class="footer-card">
                Pustaka Nawasena • BAKORWIL III Malang
            </td>
        </tr>
    </table>


    <div class="keterangan-label">Bagian Belakang</div>
    <table class="kartu-table">
        <tr>
            <td class="content-belakang">
                <h3>SYARAT & KETENTUAN ANGGOTA</h3>
                <ol class="catatan-list">
                    <li>Kartu ini bukti keanggotaan resmi Pustaka Nawasena BAKORWIL III Malang.</li>
                    <li>Kartu wajib dibawa setiap melakukan kunjungan, peminjaman, atau pengembalian buku.</li>
                    <li>Peminjam bertanggung jawab penuh atas keutuhan buku yang dipinjam.</li>
                    <li>Jika kartu hilang/rusak, segera laporkan ke petugas perpustakaan.</li>
                    <li>Kartu tidak dapat dipindahtangankan kepada orang lain.</li>
                </ol>
            </td>
        </tr>
        <tr>
            <td class="footer-card" style="height: 7mm; padding: 2px 5px; line-height: 1.1;">
                <strong style="font-size: 6pt;">PUSTAKA NAWASENA • BAKORWIL III MALANG</strong><br>
                <span style="font-size: 4.5pt; opacity: 0.9;">Jl. Simpang Ijen No. 2, Oro-oro Dowo, Kec. Klojen, Kota Malang, Jawa Timur 65119</span>
            </td>
        </tr>
    </table>

</body>
</html>

