<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Cetak ID Card Siswa - {{ $school['school_name'] ?? 'Sekolah' }}</title>
    <style>
        @page {
            size: A4;
            margin: 1cm;
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #f8fafc;
            color: #0f172a;
            margin: 0;
            padding: 10px;
        }
        .no-print {
            text-align: center;
            margin-bottom: 20px;
        }
        .btn-print {
            padding: 10px 20px;
            background: #0284c7;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }
        .grid-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
        }
        .id-card {
            width: 85.6mm;
            height: 54mm;
            border: 1px solid #cbd5e0;
            border-radius: 8px;
            background: #ffffff;
            padding: 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            page-break-inside: avoid;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-header {
            display: flex;
            items-center;
            gap: 8px;
            border-bottom: 2px solid #0284c7;
            padding-bottom: 4px;
        }
        .card-header img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }
        .header-text h3 {
            margin: 0;
            font-size: 8pt;
            font-weight: bold;
            text-transform: uppercase;
            color: #0f172a;
        }
        .header-text p {
            margin: 0;
            font-size: 6.5pt;
            color: #0284c7;
            font-weight: bold;
            text-transform: uppercase;
        }
        .card-body {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 4px 0;
        }
        .photo-box {
            width: 42px;
            height: 48px;
            border: 1px solid #cbd5e0;
            border-radius: 4px;
            overflow: hidden;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 10pt;
            color: #0284c7;
        }
        .photo-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .info-box {
            flex: 1;
            font-size: 7.5pt;
            line-height: 1.3;
        }
        .info-box h4 {
            margin: 0 0 2px 0;
            font-size: 8.5pt;
            font-weight: bold;
            color: #0f172a;
        }
        .info-box p {
            margin: 0;
            color: #475569;
        }
        .qr-box {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }
        .qr-box img {
            width: 100%;
            height: 100%;
        }
        .card-footer {
            border-top: 1px solid #e2e8f0;
            padding-top: 2px;
            display: flex;
            justify-content: space-between;
            font-size: 6pt;
            color: #64748b;
            font-weight: bold;
        }
        @media print {
            body { background: white; padding: 0; }
            .no-print { display: none; }
            .grid-container { gap: 8mm; }
        }
    </style>
</head>
<body>
    <div class="no-print">
        <button onclick="window.print()" class="btn-print">🖨️ Cetak Seluruh Kartu Siswa</button>
    </div>

    <div class="grid-container">
        @foreach($students as $st)
            <div class="id-card">
                <div class="card-header">
                    @if(!empty($logoUrl))
                        <img src="{{ $logoUrl }}" alt="Logo">
                    @endif
                    <div class="header-text">
                        <h3>{{ $school['school_name'] ?? 'SMKN 1 GUNUNG AGUNG' }}</h3>
                        <p>Kartu Presensi Siswa</p>
                    </div>
                </div>

                <div class="card-body">
                    <div class="photo-box">
                        @if($st->photo_path)
                            <img src="{{ Storage::url($st->photo_path) }}">
                        @else
                            {{ strtoupper(substr($st->name, 0, 2)) }}
                        @endif
                    </div>

                    <div class="info-box">
                        <h4>{{ $st->name }}</h4>
                        <p>NIS: <strong>{{ $st->nip_nis ?? '-' }}</strong></p>
                        <p>Kelas: <strong>{{ $st->class_name ?? '-' }}</strong></p>
                    </div>

                    <div class="qr-box">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode($st->parent_token ?? $st->nip_nis) }}">
                    </div>
                </div>

                <div class="card-footer">
                    <span>KARTU RESMI SISWA</span>
                    <span>TULANG BAWANG BARAT</span>
                </div>
            </div>
        @endforeach
    </div>
</body>
</html>
