<!DOCTYPE html>
<html lang="id">
<head>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">
<meta charset="UTF-8">
<title>Cetak Berita Acara Ujian</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 15mm;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    font-size: 12pt;
}

/* Title */
.report-title {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2mm;
    margin-bottom: 6mm;
    text-decoration: underline;
    letter-spacing: 0.5px;
}

/* Text paragraph spacing */
p.content-para {
    margin-bottom: 4mm;
    text-align: justify;
}

.fill-in-box {
    margin: 4mm 0 6mm 8mm;
}
.fill-row {
    display: flex;
    margin-bottom: 2.5mm;
}
.fill-label {
    width: 55mm;
    flex-shrink: 0;
    font-weight: normal;
}
.fill-colon {
    width: 3mm;
    text-align: center;
    flex-shrink: 0;
}
.fill-val {
    flex: 1;
    border-bottom: 1px solid #000;
}

/* Lines for proctor inputs */
.dotted-input-area {
    margin-top: 5mm;
    margin-bottom: 6mm;
}
.dotted-line {
    border-bottom: 1.2px dotted #000;
    height: 8.5mm;
    width: 100%;
}

/* Signatures */
.footer-sigs {
    display: flex;
    justify-content: space-around;
    margin-top: auto;
    padding-top: 6mm;
}
.sig-box {
    text-align: center;
    width: 70mm;
}
.sig-area {
    height: 16mm;
}
.sig-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 Berita Acara Ujian</h2>
        <p>1 Lembar Master Blanko (Siap Gandakan)</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="report-title">BERITA ACARA PELAKSANAAN ASESMEN</div>

    <p class="content-para">
        Pada hari ini .......................... Tanggal ....... Bulan ...................... Tahun ............ telah dilaksanakan kegiatan
        ................................................................ Tahun Ajaran ............................. di ruang ujian tersebut di bawah ini:
    </p>

    <div class="fill-in-box">
        <div class="fill-row">
            <div class="fill-label">Ruang Asesmen</div>
            <div class="fill-colon">:</div>
            <div class="fill-val"></div>
        </div>
        <div class="fill-row">
            <div class="fill-label">Mata Pelajaran</div>
            <div class="fill-colon">:</div>
            <div class="fill-val"></div>
        </div>
        <div class="fill-row">
            <div class="fill-label">Waktu / Jam Pelajaran</div>
            <div class="fill-colon">:</div>
            <div style="flex: 1; display: flex; align-items: flex-end;">
                <span>Pukul</span>
                <div style="flex: 1; border-bottom: 1px solid #000; margin: 0 5px; height: 1.2em;"></div>
                <span>s.d</span>
                <div style="flex: 1; border-bottom: 1px solid #000; margin: 0 5px; height: 1.2em;"></div>
            </div>
        </div>
        <div class="fill-row">
            <div class="fill-label">Jumlah Peserta Seharusnya</div>
            <div class="fill-colon">:</div>
            <div style="flex: 1; display: flex; align-items: flex-end;">
                <div style="width: 25mm; border-bottom: 1px solid #000; height: 1.2em;"></div>
                <span style="margin-left: 5px;">Orang</span>
            </div>
        </div>
        <div class="fill-row">
            <div class="fill-label">Jumlah Peserta Hadir</div>
            <div class="fill-colon">:</div>
            <div style="flex: 1; display: flex; align-items: flex-end;">
                <div style="width: 25mm; border-bottom: 1px solid #000; height: 1.2em;"></div>
                <span style="margin-left: 5px;">Orang</span>
            </div>
        </div>
        <div class="fill-row">
            <div class="fill-label">Jumlah Peserta Tidak Hadir</div>
            <div class="fill-colon">:</div>
            <div style="flex: 1; display: flex; align-items: flex-end;">
                <div style="width: 25mm; border-bottom: 1px solid #000; height: 1.2em;"></div>
                <span style="margin-left: 5px;">Orang</span>
            </div>
        </div>
        <div class="fill-row">
            <div class="fill-label">Nomor Peserta Tidak Hadir</div>
            <div class="fill-colon">:</div>
            <div class="fill-val"></div>
        </div>
    </div>

    <p class="content-para">
        <strong>Catatan / Kejadian Penting Selama Asesmen Berlangsung:</strong>
    </p>
    <div class="dotted-input-area">
        <div class="dotted-line"></div>
        <div class="dotted-line"></div>
        <div class="dotted-line"></div>
    </div>

    <p class="content-para">
        Demikian berita acara pelaksanaan asesmen ini dibuat dengan sesungguhnya untuk dapat dipergunakan sebagaimana mestinya.
    </p>

    <!-- Date row above signatures -->
    <div style="text-align: right; margin-right: 15mm; margin-top: 4mm; font-size: 11pt;">
        ................................, .................................... 20....
    </div>

    <!-- Signatures in straight horizontal alignment -->
    <div class="footer-sigs">
        <div class="sig-box">
            <div>Pengawas I,</div>
            <div class="sig-area"></div>
            <div class="sig-line">&nbsp;</div>
            <div>NIP. ..........................................</div>
        </div>
        
        <div class="sig-box">
            <div>Pengawas II,</div>
            <div class="sig-area"></div>
            <div class="sig-line">&nbsp;</div>
            <div>NIP. ..........................................</div>
        </div>
    </div>
</div>

</body>
</html>
