<?php echo $map['js']; ?>
<style>

.thumbnail {
    width: auto;
    height: auto;
    overflow: hidden;
}
.thumbnail img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}
</style>
<div class="content-header">
    <div class="row align-items-center">
        <div class="content-header-left col-md-6 col-12 mb-md-0 mb-1">
            <h3 class="content-header-title"><?= $judul ?></h3>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tbody>
                <tr>
                    <td>Nama Pegawai</td>
                    <td>: <?= $data->nama_lengkap; ?></td>
                    <td>Tanggal</td>
                    <td>: <?= $data->tanggal; ?></td>
                </tr>
                <tr>
                    <td>Jam </td>
                    <td>: <?= $this->fungsi->konversi_datetime($data->jam_absen) ?></td>
                    <td>Keterangan</td>
                    <td>: <?= $data->keterangan; ?></td>
                </tr>
                <tr>
                    <td>Timezone</td>
                    <td>: <?= $data->timezone; ?></td>
                    <td>GMT</td>
                    <td>: <?= $data->gmt; ?></td>
                </tr>
                <tr>
                    <td>Lokasi</td>
                    <td>: <?= $data->lokasi_absen; ?></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="row font-weight-bold">
                <div class="col-md-6 text-center">
                    <label>LOKASI ABSENSI</label>
                </div>
                <div class="col-md-6 text-center">
                    <label>FOTO ABSENSI</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 text-center">
                    <?= $map['html']; ?>
                </div>
                <div class="col-md-6 text-center thumbnail">
                    <img src="<?= $foto; ?>" class="portrait">
                </div>
            </div>
        </div>
    </div>
</div>