<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kartu Karyawan - {{ $card->card_number }}</title>
    <style>
        @page { margin: 0; padding: 0; }
        * { margin: 0; padding: 0; }
        body { font-family: 'DejaVu Sans', sans-serif; }

        .card {
            width: 54mm;
            height: 85.6mm;
            background-color: #F5D0E3;
        }

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

        /* HEADER + BODY - 43mm - Dark Magenta */
        .top-section {
            height: 43mm;
            padding: 1.5mm 3mm;
            text-align: center;
            vertical-align: top;
            background-color: #8B4876;
        }
        .header-area {
            text-align: center;
            padding-bottom: 1.5mm;
            border-bottom: 0.3mm solid #B8729E;
            margin-bottom: 1.5mm;
        }
        .logo-img {
            width: 9mm;
            height: 9mm;
            border-radius: 1.5mm;
            border: 0.3mm solid #ffffff;
        }
        .logo-placeholder {
            width: 9mm;
            height: 9mm;
            background-color: #ffffff;
            border-radius: 1.5mm;
            text-align: center;
            line-height: 9mm;
            font-size: 5pt;
            font-weight: bold;
            color: #8B4876;
            display: inline-block;
        }
        .company-name {
            font-size: 7pt;
            font-weight: bold;
            color: #ffffff;
            letter-spacing: 0.2pt;
            margin-top: 0.5mm;
        }
        .card-title {
            font-size: 3.5pt;
            color: #E8D24A;
            text-transform: uppercase;
            letter-spacing: 0.4pt;
            font-weight: bold;
        }

        /* Employee Info */
        .info-table { width: 100%; border-collapse: collapse; }
        .photo-td {
            width: 17mm;
            vertical-align: top;
            padding-right: 2mm;
        }
        .photo-box {
            width: 15mm;
            height: 20mm;
            background-color: #fff;
            border-radius: 1.5mm;
            overflow: hidden;
            border: 0.4mm solid #ffffff;
        }
        .photo-img { width: 15mm; height: 20mm; }
        .photo-placeholder {
            width: 15mm;
            height: 20mm;
            text-align: center;
            line-height: 20mm;
            font-size: 8pt;
            color: #8B4876;
            font-weight: bold;
            background-color: #FDF2F8;
        }
        .details-td {
            vertical-align: top;
            text-align: left;
            padding-top: 0.5mm;
        }
        .emp-name {
            font-size: 7.5pt;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 1.2mm;
            line-height: 1.1;
        }
        .emp-position {
            font-size: 5pt;
            color: #F5D0E3;
            margin-bottom: 0.5mm;
            font-weight: bold;
        }
        .emp-dept {
            font-size: 4pt;
            color: #E8C5DC;
            margin-bottom: 1.5mm;
        }
        .nip-box {
            background-color: #ffffff;
            border-radius: 1.2mm;
            padding: 0.8mm 1.5mm;
            display: inline-block;
            border: 0.2mm solid #E8D24A;
        }
        .emp-nip { font-size: 5pt; color: #5A2848; }
        .nip-label { color: #8B4876; font-weight: bold; }

        /* QR - 24mm - Light Pink */
        .qr-cell {
            height: 24mm;
            padding: 1mm 3mm 1.5mm 3mm;
            text-align: center;
            vertical-align: top;
            background-color: #F5D0E3;
        }
        .qr-wrapper {
            background-color: #ffffff;
            border-radius: 2.5mm;
            padding: 1.5mm;
            display: inline-block;
            border: 0.3mm solid #E8D24A;
        }
        .qr-box {
            width: 17mm;
            height: 17mm;
            background-color: #fff;
            border-radius: 1.2mm;
            padding: 0.8mm;
            display: inline-block;
            border: 0.4mm solid #8B4876;
        }
        .qr-img { width: 15.4mm; height: 15.4mm; }
        .qr-text {
            font-size: 3.5pt;
            color: #8B4876;
            margin-top: 0.8mm;
            text-transform: uppercase;
            letter-spacing: 0.2pt;
            font-weight: bold;
        }

        /* FOOTER - 5.5mm - Dark Magenta */
        .footer-cell {
            height: 5.5mm;
            background-color: #6B3860;
            padding: 0.8mm 3mm;
            text-align: center;
            vertical-align: middle;
        }
        .card-num {
            font-size: 4.5pt;
            font-family: 'DejaVu Sans Mono', monospace;
            color: #E8D24A;
            letter-spacing: 0.4pt;
            font-weight: bold;
        }
        .sep { color: #C98DB8; margin: 0 1.5mm; }
        .valid-txt { font-size: 3.5pt; color: #ffffff; }
    </style>
</head>
<body>
    <div class="card">
        <table class="main-table" cellpadding="0" cellspacing="0">
            <tr><td class="top-section">
                <div class="header-area">
                    @if($logoBase64)
                        <img class="logo-img" src="data:image/png;base64,{{ $logoBase64 }}" alt="Logo">
                    @else
                        <div class="logo-placeholder">{{ strtoupper(substr($company->name ?? 'C', 0, 2)) }}</div>
                    @endif
                    <div class="company-name">{{ strtoupper($company->name ?? 'SEKOLAH NIZHAMIA') }}</div>
                    <div class="card-title">Kartu Identitas Karyawan</div>
                </div>
                <table class="info-table" cellpadding="0" cellspacing="0"><tr>
                    <td class="photo-td">
                        <div class="photo-box">
                            @if($avatarBase64)
                                <img class="photo-img" src="data:image/png;base64,{{ $avatarBase64 }}" alt="Foto">
                            @else
                                <div class="photo-placeholder">{{ strtoupper(substr($user->name ?? 'N', 0, 2)) }}</div>
                            @endif
                        </div>
                    </td>
                    <td class="details-td">
                        <div class="emp-name">{{ $user->name ?? 'Nama Karyawan' }}</div>
                        <div class="emp-position">{{ $user->position ?? 'Jabatan' }}</div>
                        <div class="emp-dept">{{ $user->department ?? 'Departemen' }}</div>
                        <div class="nip-box"><span class="emp-nip"><span class="nip-label">NIP:</span> {{ $user->employee_id ?? $user->nip ?? '-' }}</span></div>
                    </td>
                </tr></table>
            </td></tr>
            <tr><td class="qr-cell">
                <div class="qr-wrapper">
                    <div class="qr-box"><img class="qr-img" src="data:image/svg+xml;base64,{{ $qrBase64 }}" alt="QR"></div>
                    <div class="qr-text">Scan untuk Absensi</div>
                </div>
            </td></tr>
            <tr><td class="footer-cell">
                <span class="card-num">{{ $card->card_number }}</span>
                <span class="sep">|</span>
                <span class="valid-txt">Valid {{ date('Y') }}</span>
            </td></tr>
        </table>
    </div>
</body>
</html>
