<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Batch Kartu Karyawan</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @page {
            size: A4 portrait;
            margin: 10mm;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 8pt;
        }

        .print-info {
            text-align: center;
            font-size: 7pt;
            color: #666;
            margin-bottom: 5mm;
            padding-bottom: 3mm;
            border-bottom: 0.5pt solid #ddd;
        }

        .cards-container {
            width: 100%;
        }

        .card-wrapper {
            float: left;
            width: 85.6mm;
            height: 54mm;
            margin-right: 5mm;
            margin-bottom: 5mm;
        }

        .card {
            width: 85.6mm;
            height: 54mm;
            background-color: #8B4876;
            overflow: hidden;
        }

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

        /* Header Row - 10mm */
        .header-row td {
            height: 10mm;
            padding: 1.5mm 2mm;
            border-bottom: 0.2mm solid #C98DB8;
            vertical-align: middle;
        }

        .logo-cell {
            width: 11mm;
            text-align: center;
        }

        .logo-img {
            width: 7mm;
            height: 7mm;
            border-radius: 1.5mm;
        }

        .logo-placeholder {
            width: 7mm;
            height: 7mm;
            background-color: #ffffff;
            border-radius: 1.5mm;
            text-align: center;
            line-height: 7mm;
            font-size: 5pt;
            font-weight: bold;
            color: #8B4876;
            display: inline-block;
        }

        .company-cell {
            padding-left: 1mm;
        }

        .company-name {
            font-size: 7pt;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 0.5mm;
            letter-spacing: 0.2pt;
        }

        .card-title {
            font-size: 4pt;
            color: #E8C5DC;
            text-transform: uppercase;
            letter-spacing: 0.3pt;
        }

        .accent-cell {
            width: 2.5mm;
            background-color: #5BA8B5;
        }

        /* Body Row - 38mm */
        .body-row td {
            height: 38mm;
            vertical-align: top;
            padding: 2mm;
        }

        .photo-cell {
            width: 18mm;
            padding: 2mm 1mm 2mm 2mm;
        }

        .photo-container {
            width: 15mm;
            height: 20mm;
            background-color: #FDF2F8;
            border-radius: 1.5mm;
            overflow: hidden;
            border: 0.4mm solid #C98DB8;
        }

        .photo-img {
            width: 15mm;
            height: 20mm;
        }

        .photo-placeholder {
            width: 15mm;
            height: 20mm;
            text-align: center;
            line-height: 20mm;
            font-size: 8pt;
            color: #B56DA0;
            font-weight: bold;
            background-color: #FDF2F8;
        }

        .info-cell {
            padding: 2mm 1mm;
            vertical-align: middle;
        }

        .employee-name {
            font-size: 8pt;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 1mm;
            line-height: 1.2;
        }

        .employee-position {
            font-size: 6pt;
            color: #FDF2F8;
            margin-bottom: 0.5mm;
        }

        .employee-department {
            font-size: 5pt;
            color: #E8C5DC;
            margin-bottom: 1.5mm;
        }

        .employee-nip {
            font-size: 6pt;
            color: #FDF2F8;
            margin-top: 1.5mm;
        }

        .nip-label {
            color: #E8D24A;
            font-weight: bold;
        }

        .qr-cell {
            width: 22mm;
            text-align: center;
            vertical-align: middle;
            padding: 2mm;
        }

        .qr-wrapper {
            text-align: center;
        }

        .qr-container {
            width: 18mm;
            height: 18mm;
            background-color: #ffffff;
            border-radius: 1.5mm;
            padding: 1mm;
            display: inline-block;
            border: 0.4mm solid #E8D24A;
        }

        .qr-img {
            width: 16mm;
            height: 16mm;
        }

        .qr-label {
            font-size: 3.5pt;
            color: #E8C5DC;
            margin-top: 0.5mm;
            text-transform: uppercase;
            letter-spacing: 0.2pt;
        }

        /* Footer Row - 6mm */
        .footer-row td {
            height: 6mm;
            background-color: #6B3860;
            padding: 1mm 2mm;
            vertical-align: middle;
        }

        .card-number {
            font-size: 5pt;
            font-family: 'DejaVu Sans Mono', monospace;
            color: #E8D24A;
            letter-spacing: 0.3pt;
            font-weight: bold;
        }

        .valid-text {
            font-size: 4pt;
            color: #E8C5DC;
            text-align: right;
        }

        .page-break {
            page-break-after: always;
            clear: both;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="print-info">
        Batch Kartu Karyawan - Dicetak: {{ now()->format('d M Y H:i') }} - Total: {{ count($cards) }} kartu
    </div>

    <div class="cards-container clearfix">
        @foreach($cards as $index => $cardData)
            <div class="card-wrapper">
                <div class="card">
                    <table class="main-table" cellpadding="0" cellspacing="0">
                        <!-- Header - 10mm -->
                        <tr class="header-row">
                            <td class="logo-cell">
                                @if($cardData['logoBase64'])
                                    <img class="logo-img" src="data:image/png;base64,{{ $cardData['logoBase64'] }}" alt="Logo">
                                @else
                                    <div class="logo-placeholder">{{ strtoupper(substr($cardData['company']->name ?? 'C', 0, 2)) }}</div>
                                @endif
                            </td>
                            <td class="company-cell" colspan="2">
                                <div class="company-name">{{ strtoupper($cardData['company']->name ?? 'COMPANY') }}</div>
                                <div class="card-title">Kartu Identitas Karyawan</div>
                            </td>
                            <td class="accent-cell" rowspan="3"></td>
                        </tr>

                        <!-- Body - 38mm -->
                        <tr class="body-row">
                            <td class="photo-cell">
                                <div class="photo-container">
                                    @if($cardData['avatarBase64'])
                                        <img class="photo-img" src="data:image/png;base64,{{ $cardData['avatarBase64'] }}" alt="Foto">
                                    @else
                                        <div class="photo-placeholder">{{ strtoupper(substr($cardData['user']->name ?? 'N', 0, 2)) }}</div>
                                    @endif
                                </div>
                            </td>
                            <td class="info-cell">
                                <div class="employee-name">{{ $cardData['user']->name ?? 'Name' }}</div>
                                <div class="employee-position">{{ $cardData['user']->position ?? 'Jabatan' }}</div>
                                <div class="employee-department">{{ $cardData['user']->department ?? 'Departemen' }}</div>
                                <div class="employee-nip">
                                    <span class="nip-label">NIP:</span> {{ $cardData['user']->employee_id ?? $cardData['user']->nip ?? '-' }}
                                </div>
                            </td>
                            <td class="qr-cell">
                                <div class="qr-wrapper">
                                    <div class="qr-container">
                                        <img class="qr-img" src="data:image/svg+xml;base64,{{ $cardData['qrBase64'] }}" alt="QR">
                                    </div>
                                    <div class="qr-label">Scan Absensi</div>
                                </div>
                            </td>
                        </tr>

                        <!-- Footer - 6mm -->
                        <tr class="footer-row">
                            <td colspan="2" class="card-number">{{ $cardData['card']->card_number }}</td>
                            <td class="valid-text">Valid: {{ date('Y') }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            @if(($index + 1) % 8 == 0 && $index + 1 < count($cards))
                <div class="page-break"></div>
            @endif
        @endforeach
    </div>
</body>
</html>
