<!DOCTYPE html>
<html lang="id">
<head>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">
<meta charset="UTF-8">
<title>Cetak Kartu Meja - <?= esc($event['name']) ?></title>
<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: #e2e8f0;
    padding: 20px;
}

/* Preview Header */
.preview-header {
    background: #1e293b;
    color: white;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 10px;
    z-index: 100;
}
.preview-header h2 {
    font-size: 1.1rem;
    margin: 0;
}
.preview-header p {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 4px;
}
.btn-back {
    background: #475569;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-right: 8px;
}
.btn-print {
    background: #0ea5e9;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Page Setup: Label 101 Sheet (195mm x 156mm) */
@page {
    size: 195mm 156mm;
    margin: 0;
}

.label-sheet {
    width: 195mm;
    height: 156mm;
    background: white;
    position: relative;
    page-break-after: always;
    margin: 0 auto 20px;
    padding: 2mm 3mm;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: grid;
    grid-template-columns: repeat(2, 94mm);
    grid-template-rows: repeat(3, 50mm);
    gap: 1.5mm 1mm;
}

/* Desk Card Label (94mm x 50mm) */
.desk-label {
    width: 94mm;
    height: 50mm;
    border: 1px dotted #94a3b8;
    padding: 3mm 4mm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: white;
    overflow: hidden;
}

.label-header {
    font-size: 7.2pt;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    line-height: 1.25;
    border-bottom: 1px solid #000;
    padding-bottom: 1mm;
    width: 100%;
    letter-spacing: 0.2px;
}

.label-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1.5mm 0;
}

.label-name {
    font-size: 11pt;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    line-height: 1.15;
    margin-bottom: 1mm;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.label-sub-details {
    display: flex;
    justify-content: center;
    gap: 4mm;
    font-size: 8.5pt;
    font-weight: bold;
    color: #000;
}

.label-number {
    letter-spacing: 0.3px;
}

.label-class-room {
    background: #f1f5f9;
    padding: 0.2mm 2mm;
    border: 1px solid #000;
    border-radius: 2px;
}

.label-footer {
    font-size: 6.8pt;
    font-weight: bold;
    text-transform: uppercase;
    color: #334155;
    border-top: 0.8px solid #cbd5e1;
    padding-top: 1mm;
    width: 100%;
    letter-spacing: 0.2px;
}

/* Print Overrides */
@media print {
    body {
        background: white;
        padding: 0;
        margin: 0;
    }
    .preview-header {
        display: none !important;
    }
    .label-sheet {
        margin: 0;
        box-shadow: none;
        page-break-after: always;
    }
    .desk-label {
        border: 1px solid #e2e8f0; /* Soft border for alignment on sticker sheet */
    }
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
</style>
</head>
<body>

<div class="preview-header">
    <div>
        <h2>🏷 Cetak Kartu Meja (Label 101)</h2>
        <p><?= count($participants) ?> label &nbsp;·&nbsp; Lembar Label 101 (195x156 mm) &nbsp;·&nbsp; 6 label / lembar</p>
    </div>
    <div>
        <button class="btn-back" onclick="window.history.back()">← Kembali</button>
        <button class="btn-print" onclick="window.print()">🖨 Cetak / Simpan PDF</button>
    </div>
</div>

<?php 
$groups = array_chunk($participants, 6);
foreach ($groups as $group):
?>
<div class="label-sheet">
    <?php foreach ($group as $p): ?>
        <div class="desk-label">
            <!-- HEADER: Nama Asesmen - Semester Aktif -->
            <div class="label-header">
                <?= strtoupper(esc($event['name'])) ?><br>
                SEMESTER <?= strtoupper(esc($activePeriod['semester'] ?? '')) ?>
            </div>
            
            <!-- MAIN DETAILS -->
            <div class="label-main">
                <div class="label-name">
                    <?= strtoupper(esc($p['full_name'])) ?>
                </div>
                <div class="label-sub-details">
                    <div class="label-number"><?= strtoupper(esc($p['exam_number'])) ?></div>
                    <div class="label-class-room"><?= strtoupper(esc($p['classroom_name'])) ?> / <?= strtoupper(esc($p['room_name'])) ?></div>
                </div>
            </div>
            
            <!-- FOOTER: Nama Sekolah & Tahun Ajaran -->
            <div class="label-footer">
                <?= strtoupper(esc($school['school_name'] ?? 'MADRASAH TSANAWIYAH')) ?> — TA. <?= strtoupper(esc($activePeriod['academic_year_name'] ?? '')) ?>
            </div>
        </div>
    <?php endforeach; ?>
    
    <!-- Isi sisa grid kosong agar layout tetap presisi -->
    <?php 
    $sisa = 6 - count($group);
    for ($i = 0; $i < $sisa; $i++):
    ?>
        <div class="desk-label" style="border: 1px dashed #e2e8f0; opacity: 0.15;">
            <!-- Kosong -->
        </div>
    <?php endfor; ?>
</div>
<?php endforeach; ?>

</body>
</html>
