<!DOCTYPE html>
<html lang="id">
<head>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">
<meta charset="UTF-8">
<title>Cetak Label Pintu Ruang</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: A4 Landscape */
@page {
    size: A4 landscape;
    margin: 0;
}

.a4-sheet-landscape {
    width: 297mm;
    height: 210mm;
    background: white;
    position: relative;
    page-break-after: always;
    margin: 0 auto 20px;
    padding: 12mm 15mm;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.label-header {
    width: 100%;
    border-bottom: 3px double #000;
    padding-bottom: 3mm;
    text-align: center;
}
.school-name {
    font-size: 28pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.event-name {
    font-size: 22pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1.5mm;
    color: #334155;
}
.academic-period {
    font-size: 15pt;
    font-weight: bold;
    margin-top: 1.5mm;
}

.room-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 4mm 0;
}
.room-title {
    font-size: 12pt;
    font-weight: bold;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.room-name-large {
    font-size: 80pt;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    line-height: 1.1;
    letter-spacing: 1px;
}

.rekap-card {
    border: 2px solid #000;
    border-radius: 6px;
    padding: 5mm 8mm;
    width: 100%;
    background: #f8fafc;
}
.rekap-title {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #000;
    padding-bottom: 2mm;
    margin-bottom: 4mm;
    letter-spacing: 1.5px;
}
.rekap-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 13pt;
    font-weight: bold;
}
.rekap-item {
    text-align: center;
}
.rekap-item .class-name {
    color: #475569;
    font-size: 12pt;
}
.rekap-item .student-count {
    font-size: 20pt;
    color: #000;
    margin-top: 1mm;
}
.rekap-total {
    border-left: 2px solid #cbd5e1;
    padding-left: 6mm;
    text-align: center;
}
.rekap-total .total-label {
    color: #0ea5e9;
    font-size: 12pt;
}
.rekap-total .total-count {
    font-size: 24pt;
    color: #000;
    margin-top: 1mm;
}

/* Print Overrides */
@media print {
    body {
        background: white;
        padding: 0;
        margin: 0;
    }
    .preview-header {
        display: none !important;
    }
    .a4-sheet-landscape {
        margin: 0;
        box-shadow: none;
        page-break-after: always;
    }
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
</style>
</head>
<body>

<div class="preview-header">
    <div>
        <h2>🚪 Cetak Label Pintu Ruang</h2>
        <p><?= count($rooms) ?> ruang &nbsp;·&nbsp; Kertas A4 Landscape</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 foreach ($rooms as $room): 
    $roomRules = $rulesByRoom[$room['id']] ?? [];
    $totalCount = $roomCounts[$room['id']] ?? 0;
?>
<div class="a4-sheet-landscape">
    <!-- Header -->
    <div class="label-header">
        <div class="school-name"><?= esc($schoolSettings['school_name'] ?? 'MADRASAH TSANAWIYAH NEGERI') ?></div>
        <div class="event-name"><?= esc($event['name']) ?></div>
        <div class="academic-period">TAHUN AJARAN <?= esc($activePeriod['academic_year_name'] ?? '') ?> — SEMESTER <?= strtoupper(esc($activePeriod['semester'] ?? '')) ?></div>
    </div>

    <!-- Room Large Text -->
    <div class="room-display">
        <div class="room-name-large"><?= esc($room['name']) ?></div>
    </div>

    <!-- Rekap Peserta -->
    <div class="rekap-card">
        <div class="rekap-title">Rekapitulasi Peserta Asesmen</div>
        <div class="rekap-grid">
            <?php foreach ($roomRules as $rule): 
                $count = $rule['end_absen'] - $rule['start_absen'] + 1;
            ?>
                <div class="rekap-item">
                    <div class="class-name">KELAS <?= esc($rule['classroom_name']) ?></div>
                    <div class="student-count"><?= $count ?> SISWA</div>
                    <div style="font-size: 7.5pt; color: #64748b;">(ABSEN <?= $rule['start_absen'] ?>-<?= $rule['end_absen'] ?>)</div>
                </div>
            <?php endforeach; ?>

            <div class="rekap-total">
                <div class="total-label">TOTAL PESERTA</div>
                <div class="total-count"><?= $totalCount ?> SISWA</div>
            </div>
        </div>
    </div>
</div>
<?php endforeach; ?>

</body>
</html>
