<html>

<head>
    <style>
        @font-face {
            font-family: MyBarcode;
            src: url(barcode.woff)
        }

        * {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        .page {
            position: relative;
            width: 21cm;
            min-height: 29cm;
            page-break-after: always;
            margin: 0.5cm auto;
            background: #FFF;
            padding: 1.5cm;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            -webkit-box-sizing: initial;
            -moz-box-sizing: initial;
            box-sizing: initial;
            page-break-after: always
        }

        .page * {
            font-family: arial;
            font-size: 11px
        }

        .page-landscape {
            position: relative;
            width: 29.7cm;
            min-height: 21cm;
            page-break-after: always;
            margin: 0.5cm;
            background: #FFF;
            padding: 1.5cm;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            -webkit-box-sizing: initial;
            -moz-box-sizing: initial;
            box-sizing: initial;
            page-break-after: always
        }

        .page-landscape * {
            font-family: arial;
            font-size: 11px
        }

        .footer {
            position: absolute;
            bottom: 1.5cm;
            left: 1.5cm;
            right: 1.5cm;
            width: auto;
            height: 30px
        }

        .kanan {
            float: right
        }

        .barcode {
            font-family: MyBarcode
        }

        .it-grid {
            background: #FFF;
            border-collapse: collapse;
            border: 1px solid #000
        }

        .it-grid th {
            color: #000;
            border: 1px solid #000;
            border-top: 1px solid #000;
            background: #C4BC96;
            padding: 3px;
            border: 1px solid #000
        }

        .it-grid tr:nth-child(even) {
            background: #f8f8f8
        }

        .it-grid td {
            padding: 3px;
            border: 1px solid #000
        }

        .seri {
            font-family: 'Lucida Handwriting'
        }

        .it-cetak td {
            padding: 6px 5px
        }

        h1 {
            font-weight: normal
        }

        h2 {
            font-weight: normal
        }

        h3 {
            font-weight: normal
        }

        h4 {
            font-weight: normal
        }

        h5 {
            font-weight: normal
        }

        h6 {
            font-weight: normal
        }

        table {
            border-collapse: collapse;
            page-break-inside: auto
        }

        td {
            padding: 3px
        }

        .f14 {
            font-size: 14pt
        }

        .f12 {
            font-size: 12pt
        }

        .line-bottom {
            border-bottom: 1px solid black
        }

        .detail {
            margin-top: 10px;
            margin-bottom: 10px
        }

        .detail td {
            padding: 5px;
            font-size: 12px
        }

        .detail span {
            border-bottom: 1px solid black;
            display: inline-block;
            font-size: 12px
        }

        .cetakan {
            font-size: 14px;
            line-height: 1.5em
        }

        .cetakan * {
            font-size: 14px;
            line-height: 1.5em
        }

        .cetakan span {
            border-bottom: 1px solid black;
            display: inline-block
        }

        .full {
            width: 100%
        }

        nip {
            display: inline-block;
            width: 130px
        }

        a {
            text-decoration: none;
            color: #006600
        }

        ol {
            margin-left: 30px
        }

        ol>li {
            padding: 10px
        }

        tr {
            page-break-inside: avoid;
            page-break-after: auto
        }

        thead {
            display: table-row-group
        }

        tfoot {
            display: table-row-group
        }

        .table th,
        .table td {
            padding: 5px
        }

        .table tbody tr:nth-child(even) {
            background: #EEE
        }

        .table thead {
            background: #ccc
        }

        @media print {
            body {
                background: #fff;
                font-family: 'Times New Roman', Times, serif;
                font-size: 12pt
            }

            div {
                font-family: 'Times New Roman', Times, serif;
                font-size: 12pt
            }

            td {
                font-family: 'Times New Roman', Times, serif;
                font-size: 12pt
            }

            p {
                font-family: 'Times New Roman', Times, serif;
                font-size: 12pt
            }

            .page {
                height: 10cm;
                padding: 0.7cm;
                box-shadow: none;
                margin: 0
            }

            @page {
                size: A4;
                margin: 0;
                -webkit-print-color-adjust: exact
            }

            .page-landscape {
                height: 10cm;
                padding: 0.7cm;
                box-shadow: none;
                margin: 0
            }

            .footer {
                bottom: 0.7cm;
                left: 0.7cm;
                right: 0.7cm
            }
        }
    </style>
    <link rel="shortcut icon" href="<?= favicon() ?>" type="image/x-icon">
    <title><?= $page_title ?></title>
</head>

<body onload="window.print();setTimeout(()=>window.close(),500)">
    <?php for ($i = 0; $i <= $halaman; $i++) : ?>
        <?php if (isset($si)) : ?>
            <?php if ($si >= $jumlah_peserta) continue ?>
        <?php endif ?>
        <div class="page">
            <table width="100%">
                <tbody>
                    <tr>
                        <td width="100"><img src="<?= $kementrian ?>" width="80"></td>
                        <td style="text-align:center">
                            <strong class="f12">
                                DAFTAR HADIR PESERTA <br>
                                <?= $nama_jenis ?><br>
                                TAHUN PELAJARAN <?= $tp ?> </strong>
                        </td>
                        <td width="100"><img src="<?= $logo ?>" height="75"></td>
                    </tr>
                </tbody>
            </table>
            <table class="detail">
                <tbody>
                    <tr>
                        <td>SEKOLAH/MADRASAH</td>
                        <td>:</td>
                        <td><span style="width:350px;">&nbsp;<?= options('nama_sekolah') ?></span></td>
                        <td>RUANG</td>
                        <td>:</td>
                        <td><span style="width:150px;">&nbsp;<?= $ruang ?></span></td>
                    </tr>
                    <tr>
                        <td>HARI</td>
                        <td>:</td>
                        <td>
                            <span style="width:90px;">&nbsp;<?= strtoupper(hariIndo(date('D', $startDateTime))) ?></span>
                            TANGGAL : <span style="width:190px;">&nbsp;<?= date('d', $startDateTime) . " " . strtoupper(bulanIndo(date("m", $startDateTime))) . " " . date("Y", $startDateTime) ?></span>
                        </td>
                        <td>PUKUL</td>
                        <td>:</td>
                        <?php if (date("Y-m-d", $startDateTime) != date("Y-m-d", $endDateTime)) : ?>
                            <td><span style="width:150px;">&nbsp;<?= date("H:i d/m/Y", $startDateTime) ?> - <?= date("H:i d/m/Y", $endDateTime) ?></span></td>
                        <?php else : ?>
                            <td><span style="width:150px;">&nbsp;<?= date("H:i", $startDateTime) ?> - <?= date("H:i", $endDateTime) ?></span></td>
                        <?php endif ?>
                    </tr>
                    <tr>
                        <td>MATA PELAJARAN</td>
                        <td>:</td>
                        <td colspan="4"><span style="width:350px;">&nbsp;<?= $nama_mapel ?></span></td>
                    </tr>
                </tbody>
            </table>

            <table class="it-grid it-cetak" width="100%">
                <tbody>
                    <tr height="40px">
                        <th>No.</th>
                        <th>Username</th>
                        <th>No Peserta</th>
                        <th>Nama Peserta<br> </th>
                        <th>Tanda Tangan</th>
                        <th>Ket</th>
                    </tr>
                    <?php for ($si = $i * $limit_page; $si < ($i + 1) * $limit_page; $si++) : ?>
                        <?php if ($si >= $jumlah_peserta) continue ?>
                        <tr>
                            <td style="text-align:center;width:15">&nbsp;<?= $si + 1 ?>.</td>
                            <td style="text-align:center" width="10%">&nbsp;<?= $peserta[$si]['nomor_induk'] ?></td>
                            <td style="text-align:center" width="17%">&nbsp;<?= $peserta[$si]['nomor_induk'] ?></td>
                            <td width="*">&nbsp;<?= $peserta[$si]['nama'] ?></td>
                            <td width="150"><span style="float:<?= $si % 2 == 0 ?  'left' : 'right'  ?>;width:80px;">&nbsp;<?= $si + 1 ?>.</span></td>
                            <td width="6%">&nbsp;</td>
                        </tr>
                    <?php endfor ?>
                </tbody>
            </table>
            <?php if ($i == $halaman - 1) : ?>

                <table>
                    <tbody>
                        <tr>
                            <td colspan="2"><strong><i>Keterangan : </i></strong></td>
                        </tr>
                        <tr>
                            <td>1. Dibuat rangkap 3 (tiga), masing-masing untuk sekolah, Cabang Dinas dan Provinsi.</td>
                        </tr>
                        <tr>
                            <td>2. Pengawas ruang menyilang Nama Peserta yang tidak hadir.</td>
                        </tr>
                    </tbody>
                </table>
                <table width="100%">
                    <tbody>
                        <tr>
                            <td>
                                <table style="border:1px solid black">
                                    <tbody>
                                        <tr>
                                            <td>Jumlah Peserta yang Seharusnya Hadir</td>
                                            <td>:</td>
                                            <td> <?= $jumlah_peserta ?> orang</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Peserta yang Tidak Hadir</td>
                                            <td>:</td>
                                            <td>_____ orang</td>
                                        </tr>
                                        <tr style="border-top:1px solid black">
                                            <td>Jumlah Peserta Hadir</td>
                                            <td>:</td>
                                            <td>_____ orang</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td style="text-align:center; width:200">
                                Proktor<br><br><br><br><br>(<nip></nip>)<br><br>&nbsp;&nbsp;&nbsp;&nbsp;NIP. <nip></nip>
                            </td>
                            <td style="text-align:center; width:175">
                                Pengawas<br><br><br><br><br>(<nip></nip>)<br><br>&nbsp;&nbsp;&nbsp;&nbsp;NIP. <nip></nip>
                            </td>
                        </tr>
                    </tbody>
                </table>
            <?php endif ?>
            <div class="footer">
                <table width="100%" height="30">
                    <tbody>
                        <tr>
                            <td style="border:1px solid black" width="25px"></td>
                            <td width="5px">&nbsp;</td>
                            <td style="border:1px solid black;font-weight:bold;font-size:14px;text-align:center;"><?= $nama_jenis ?> <?= options('nama_sekolah') ?></td>
                            <td width="5px">&nbsp;</td>
                            <td style="border:1px solid black" width="25px"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    <?php endfor ?>
</body>

</html>