<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Cetak Daftar Hadir</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <style>
            body{
                font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
                padding-top:0px;
                font-size:14px;
            }

            h1{
                font-size: 16px;
                padding:1px;
                text-align: center;
            }

            h3{
                font-size: 14px;
                padding: 1px;
            }

            .hr{
                border-bottom: 1px solid #000;
                padding-top: 1px;
                padding-bottom: 2px;
            }

            table.gridtable {
                font-size:14px;
                color:#333333;
                border-width: 1px;
                border-color: #666666;
                border-collapse: collapse;
                width: 100%;
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
            }

            table.gridtable th {
                border-width: 1px;
                padding: 4px;
                border-style: solid;
                border-color: #666666;
                background-color: #dedede;
            }

            table.gridtable tr {
                border: 1px solid #000;
            }

            table.gridtable td {
                padding: 2px;
                border: 1px solid #000;
            }

            table.gridtable td.total {
                border: 1px solid #000;
                padding: 2px;
                font-weight: bold;
            }
            table.gridtable td.nototal {
                font-size: 14px;
                font-weight: bold;
                border: 0px;
                padding: 2px;
            }

            div.columns {
                column-width: 400px;
                -moz-column-width: 400px;
                -webkit-column-width: 400px;
            }
            div.keeptogether {
                display: inline-block;
                width: 100%;
            }

            @page{
                margin: 50px 25px;
                size: A4 portrait;

                @top-left{
                    content: element(pageheader);
                }
            }

            #pageheader{
                position: running(pageHeader);
            }
        </style>
    </head>
    <body>
        <table class="gridtable" style="border: 0">
            <thead style="border: 0px">
                <tr style="border-top: 0px; border-left: 0px;border-right: 0px">
                    <th colspan="5" style="background-color: #fff; border-top: 0px;border-left: 0px;border-right: 0px">
                        <h1>DAFTAR HADIR PESERTA</h1>
                        <table style="width: 100%; border: 0px; text-align: left; border-collapse: collapse" border="0">
                            <tr style="border: 0">
                                <td style="font-weight: bold; width: 20%;border: 0">SEKOLAH/MADRASAH</td>
                                <td style="font-weight: bold; width: 2%;border: 0">:</td>
                                <td style="width: 40%;border: 0"><?php echo $this->status_cbt->nama_sekolah; ?></td>
                                <td style="border: 0"></td>
                                <td style="border: 0"></td>
                                <td style="border: 0"></td>
                            </tr>
                            <tr  style="border: 0">
                                <td style="font-weight: bold; border: 0; border: 0">ID SERVER/RUANG</td>
                                <td style="font-weight: bold; border: 0; border: 0">:</td>
                                <td style="border: 0"><?php echo $this->status_cbt->id_server; ?></td>
                                <td style="border: 0"></td>
                                <td style="border: 0"></td>
                                <td style="border: 0"></td>
                            </tr>
                            <tr style="border: 0">
                                <td style="font-weight: bold; border: 0">HARI</td>
                                <td style="font-weight: bold; border: 0">:</td>
                                <td style="border: 0"><?php echo strtoupper(strftime("%A", strtotime($detail->tanggal_pelaksanaan))); ?> <b>TANGGAL:</b> <?php echo strtoupper(strftime("%d %B %Y", strtotime($detail->tanggal_pelaksanaan))); ?></td>
                                <td style="font-weight: bold; border: 0">PUKUL</td>
                                <td style="font-weight: bold; border: 0">:</td>
                                <td  style="border: 0"><?php echo date("H:i", strtotime($detail->tanggal_pelaksanaan)); ?></td>
                            </tr>
                            <tr style="border: 0">
                                <td style="font-weight: bold; border: 0">MATA PELAJARAN</td>
                                <td style="font-weight: bold; border: 0">:</td>
                                <td style="border: 0"><?php echo $detail->nama_mata_pelajaran; ?></td>
                                <td style="border: 0"></td>
                                <td style="border: 0"></td>
                                <td style="border: 0"></td>
                            </tr>
                        </table>
                        <br/>
                        <br/>
                    </th>
                </tr>
                <tr>
                    <th style="width: 5%">NO</th>
                    <th style="width: 15%">Username</th>
                    <th>Nama Peserta</th>
                    <th style="width: 25%">Tanda Tangan</th>
                    <th style="width: 15%">keterangan</th>
                </tr>
            </thead>
            <?php
            if ($hasil) {
                $no = 0;
                foreach ($hasil as $h) {
                    $no++;

                    $align = 'left';
                    if ($no % 2 == 0) {
                        $align = 'center';
                    }
                    ?>
                    <tr>
                        <td><?php echo $no; ?></td>
                        <td><?php echo $h->no_induk; ?></td>
                        <td><?php echo $h->nama_lengkap; ?></td>
                        <td style="text-align: <?php echo $align; ?>"><?php echo $no; ?>.</td>
                        <td></td>
                    </tr>
                    <?php
                }
            }
            ?>
        </table>
        Keterangan:
        <ol>
            <li>Dibuat rangkap 3 (tiga). Masing-masing untuk sekolah, Kab/Kota dan Provinsi</li>
            <li>Pengawas ruang menyalin Nama Peserta yang tidak hadir.</li>
        </ol>
        <table style="width: 100%;">
            <tr>
                <td style="width: 50%">
                    <table style="width: 100%; border: 1px solid #000; font-size: 11px; border-collapse: collapse">
                        <tr>
                            <td style="width: 75%">Jumlah Peserta yang Seharusnya Hadir<br/>Jumlah Peserta yang tidak Hadir</td>
                            <td style="width: 5px">:<br/>:</td>
                            <td>______ Orang<br/>______ Orang</td>
                        </tr>
                        <tr style="">
                            <td style="width: 75%;border-top: 1px solid #000">Jumlah Peserta Hadir</td>
                            <td style="width: 5px;border-top: 1px solid #000">:</td>
                            <td style="border-top: 1px solid #000">______ Orang</td>
                        </tr>
                    </table>
                </td>
                <td></td>
                <td style="width: 20px; text-align: center">Proktor<br/><br/><br/><br/><br/>(_____________________)<br/>NIP.</td>
                <td style="width: 20px; text-align: center">Pengawas<br/><br/><br/><br/><br/>(_____________________)<br/>NIP.</td>
            </tr>
        </table>
    </body>
</html>