<!DOCTYPE html>
<html lang="id">
<head>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">
<meta charset="UTF-8">
<title>Cetak Daftar Hadir - <?= 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: A4 Portrait (210mm x 297mm) */
@page {
    size: A4 portrait;
    margin: 0;
}

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

/* Title & Info */
.page-title {
    text-align: center;
    font-size: 13pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 3mm;
    text-decoration: underline;
    letter-spacing: 0.5px;
}

.info-table {
    width: 100%;
    margin-bottom: 4mm;
    font-size: 9.5pt;
    line-height: 1.35;
    border-collapse: collapse;
}
.info-table td {
    padding: 0.8mm 0;
    vertical-align: top;
}

/* Table */
.att-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
    margin-bottom: 4mm;
}
.att-table th, .att-table td {
    border: 1.2px solid #000;
    padding: 1.2mm 1.5mm;
    vertical-align: middle;
}
.att-table th {
    text-align: center;
    font-weight: bold;
    background: #f8fafc;
    text-transform: uppercase;
}
.att-table td.center {
    text-align: center;
}
.sig-cell {
    font-size: 11pt;
    height: 7mm;
    vertical-align: middle;
    padding-left: 4mm;
    position: relative;
}
.sig-num {
    position: absolute;
    left: 1.5mm;
    top: 1.5mm;
    font-size: 8pt;
    color: #475569;
}

/* Footer TTD */
.footer-signatures {
    display: flex;
    justify-content: space-around;
    margin-top: 6mm;
    font-size: 12pt;
    padding-top: 3mm;
}
.proctor-box {
    text-align: center;
    width: 65mm;
}
.proctor-sign-area {
    height: 14mm;
}
.proctor-line {
    border-bottom: 1.2px solid #000;
    margin-bottom: 1mm;
    font-weight: bold;
}

/* Print Overrides */
@media print {
    body {
        background: white;
        padding: 0;
        margin: 0;
    }
    .preview-header {
        display: none !important;
    }
    .a4-sheet {
        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 Daftar Hadir Ujian</h2>
        <p><?= count($rooms) ?> ruang &nbsp;·&nbsp; Kertas A4 Portrait (Margin 1cm)</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): 
    $rStudents = $participantsByRoom[$room['id']] ?? [];
    
    // Chunk students into pages so first page accommodates Kop, and subsequent pages don't repeat Kop.
    $pages = [];
    $temp = $rStudents;
    $isFirst = true;
    while (!empty($temp)) {
        // Page 1 takes up to 24 students. Page 2+ takes up to 30.
        $chunkSize = $isFirst ? 24 : 30;
        $pages[] = array_splice($temp, 0, $chunkSize);
        $isFirst = false;
    }
    if (empty($pages)) {
        $pages[] = [];
    }
    
    $globalIdx = 1;
    $totalPages = count($pages);
    
    foreach ($pages as $pIdx => $pageStudents):
        $isFirstPage = ($pIdx === 0);
        $isLastPage = ($pIdx === $totalPages - 1);
?>
<div class="a4-sheet">
    <?php if ($isFirstPage): ?>
        <!-- Official Kop -->
        <?= view('letter/_kop', ['letterSettings' => $letterSettings, 'schoolSettings' => $schoolSettings]) ?>
        
        <div class="page-title">DAFTAR HADIR PESERTA ASESMEN</div>
        
        <!-- Info Ujian -->
        <table class="info-table">
            <tr>
                <td width="18%"><strong>ASESMEN</strong></td>
                <td width="2%">:</td>
                <td width="40%"><?= strtoupper(esc($event['name'])) ?></td>
                
                <td width="15%"><strong>RUANG UJIAN</strong></td>
                <td width="2%">:</td>
                <td width="23%"><?= strtoupper(esc($room['name'])) ?></td>
            </tr>
            <tr>
                <td><strong>TAHUN AJARAN</strong></td>
                <td>:</td>
                <td><?= strtoupper(esc($letterSettings['academic_year'] ?? $event['academic_year'] ?? '2025/2026')) ?></td>
                
                <td><strong>HARI / TANGGAL</strong></td>
                <td>:</td>
                <td>........................................................</td>
            </tr>
            <tr>
                <td><strong>SEMESTER</strong></td>
                <td>:</td>
                <td><?= strtoupper(esc($event['semester'] ?? 'GANJIL')) ?></td>
                
                <td><strong>MAPEL</strong></td>
                <td>:</td>
                <td>........................................................</td>
            </tr>
        </table>
    <?php else: ?>
        <!-- Simplified header for page 2+ -->
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #000; padding-bottom: 1.5mm; margin-bottom: 4mm; font-size: 8pt; font-weight: bold; text-transform: uppercase;">
            <span>Daftar Hadir — <?= esc($event['name']) ?></span>
            <span><?= esc($room['name']) ?> — Halaman <?= ($pIdx + 1) ?> dari <?= $totalPages ?></span>
        </div>
    <?php endif; ?>

    <!-- Table Daftar Hadir -->
    <table class="att-table">
        <thead>
            <tr>
                <th width="6%">No</th>
                <th width="22%">No. Peserta</th>
                <th width="42%">Nama Siswa</th>
                <th width="12%">Kelas</th>
                <th width="18%">Tanda Tangan</th>
            </tr>
        </thead>
        <tbody>
            <?php if (empty($pageStudents)): ?>
                <tr>
                    <td colspan="5" class="center py-5 text-muted" style="font-style: italic;">
                        Belum ada peserta di ruangan ini
                    </td>
                </tr>
            <?php else: ?>
                <?php foreach ($pageStudents as $student): ?>
                    <tr>
                        <td class="center"><?= $globalIdx ?></td>
                        <td class="center"><?= esc($student['exam_number']) ?></td>
                        <td><?= strtoupper(esc($student['full_name'])) ?></td>
                        <td class="center"><?= strtoupper(esc($student['classroom_name'])) ?></td>
                        <td class="sig-cell" style="padding-left: 2mm;">
                            <?= $globalIdx ?>. ...............
                        </td>
                    </tr>
                <?php $globalIdx++; endforeach; ?>
            <?php endif; ?>
        </tbody>
    </table>

    <?php if ($isLastPage): ?>
        <!-- Footer TTD Pengawas (Only on the last page) -->
        <div class="footer-signatures">
            <div class="proctor-box">
                <div>Pengawas I,</div>
                <div class="proctor-sign-area"></div>
                <div class="proctor-line">&nbsp;</div>
                <div>NIP. ..........................................</div>
            </div>
            
            <div class="proctor-box">
                <div>Pengawas II,</div>
                <div class="proctor-sign-area"></div>
                <div class="proctor-line">&nbsp;</div>
                <div>NIP. ..........................................</div>
            </div>
        </div>
    <?php endif; ?>
</div>
<?php endforeach; ?>
<?php endforeach; ?>

</body>
</html>
