<!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 Peserta Tidak Hadir</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 */
@page {
    size: A4 portrait;
    margin: 0;
}

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

.page-title {
    text-align: center;
    font-size: 13pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2mm;
    margin-bottom: 2mm;
    text-decoration: underline;
    letter-spacing: 0.5px;
}

.event-subtitle {
    text-align: center;
    font-size: 9.5pt;
    font-weight: bold;
    margin-bottom: 6mm;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Table styling */
.abs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
    margin-bottom: 6mm;
}
.abs-table th, .abs-table td {
    border: 1.2px solid #000;
    padding: 2.2mm 2mm;
    vertical-align: middle;
}
.abs-table th {
    text-align: center;
    font-weight: bold;
    background: #f8fafc;
    text-transform: uppercase;
}
.abs-table td.center {
    text-align: center;
}

/* Footer Signature */
.footer-area {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    font-size: 12pt;
    padding-bottom: 5mm;
}
.sig-box {
    text-align: center;
    width: 60mm;
}
.sig-space {
    height: 18mm;
}
.sig-name {
    font-weight: bold;
    text-decoration: underline;
}

/* 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: avoid;
    }
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
</style>
</head>
<body>

<div class="preview-header">
    <div>
        <h2>📋 Cetak Blanko Absensi Tidak Hadir</h2>
        <p>1 Lembar Master Blanko &nbsp;·&nbsp; Kertas A4 Portrait</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>

<div class="a4-sheet">
    <!-- Official Kop -->
    <?= view('letter/_kop', ['letterSettings' => $letterSettings, 'schoolSettings' => $schoolSettings]) ?>

    <div class="page-title">DAFTAR PESERTA TIDAK HADIR</div>
    <div class="event-subtitle">
        <strong>ASESMEN:</strong> <?= strtoupper(esc($event['name'])) ?> &nbsp;|&nbsp;
        <strong>TA:</strong> <?= strtoupper(esc($event['academic_year'] ?? '2025/2026')) ?>
    </div>

    <table class="abs-table">
        <thead>
            <tr>
                <th width="7%">No</th>
                <th width="40%">Nama Siswa</th>
                <th width="13%">Kelas</th>
                <th width="15%">Ruang</th>
                <th width="15%">Tanggal</th>
                <th width="10%">Ket.</th>
            </tr>
        </thead>
        <tbody>
            <?php for ($idx = 1; $idx <= 20; $idx++): ?>
                <tr>
                    <td class="center" style="height: 9mm;"><?= $idx ?></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            <?php endfor; ?>
        </tbody>
    </table>
</div>

</body>
</html>
