<?php
if (!defined('ABSPATH')) {
    define('ABSPATH', dirname(__DIR__, 2));
}

$logoSekolah = "../../assets/logo/logo.png";
$logoTutwuri = "../../assets/logo/tutwuri.png";

$foto = "../../uploads/foto/default.png";

if (!empty($data['foto']) && file_exists("../../uploads/foto/".$data['foto'])) {
    $foto = "../../uploads/foto/".$data['foto'];
}

$qr = "../../uploads/qrcode/default.png";

if (!empty($data['qr_code']) && file_exists("../../uploads/qrcode/".$data['qr_code'].".png")) {
    $qr = "../../uploads/qrcode/".$data['qr_code'].".png";
} elseif (!empty($data['nis']) && file_exists("../../uploads/qrcode/".$data['nis'].".png")) {
    $qr = "../../uploads/qrcode/".$data['nis'].".png";
}
?>

<style>

@page{
    margin:0;
}

body{
    margin:0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#eceff1;
}

.wrapper{

    width:86mm;
    height:54mm;

    margin:auto;

    background:#ffffff;

    border-radius:12px;

    overflow:hidden;

    position:relative;

    box-shadow:0 0 12px rgba(0,0,0,.25);

}

.header{

    height:15mm;

    background:linear-gradient(90deg,#0D47A1,#1976D2,#42A5F5);

    color:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:6px 10px;

}

.logo{

    width:42px;

    height:42px;

    object-fit:contain;

}

.judul{

    flex:1;

    text-align:center;

}

.judul h2{

    margin:0;

    font-size:14px;

    font-weight:bold;

    letter-spacing:.5px;

}

.judul span{

    font-size:10px;

}

.watermark{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-35%);

    width:170px;

    opacity:.05;

}

.content{

    display:flex;

    padding:8px;

}

.left{

    width:36%;

    text-align:center;

}

.right{

    width:64%;

    padding-left:8px;

}

.foto{

    width:90px;

    height:115px;

    border-radius:8px;

    border:3px solid #1976D2;

    object-fit:cover;

}

.qr{

    width:75px;

    margin-top:8px;

    border:2px solid #1976D2;

    padding:4px;

    background:white;

}

.label{

    color:#1565C0;

    font-weight:bold;

    font-size:11px;

}

.value{

    font-size:12px;

    margin-bottom:4px;

}

.nama{

    font-size:16px;

    color:#0D47A1;

    font-weight:bold;

    margin-bottom:6px;

}

.badge{

    display:inline-block;

    background:#FFC107;

    color:#000;

    padding:4px 12px;

    border-radius:20px;

    font-size:11px;

    font-weight:bold;

    margin-top:4px;

}

.footer{

    position:absolute;

    bottom:0;

    width:100%;

    height:8mm;

    background:#0D47A1;

    color:white;

    text-align:center;

    font-size:10px;

    line-height:8mm;

}

.scan{

    font-size:9px;

    color:#1565C0;

    margin-top:2px;

    font-weight:bold;

}

</style>

<div class="wrapper">

<img src="<?= $logoSekolah ?>" class="watermark">

<div class="header">

<img src="<?= $logoSekolah ?>" class="logo">

<div class="judul">

<h2>SMP NEGERI 2 TELUK KUANTAN</h2>

<span>KARTU IDENTITAS SISWA</span>

</div>

<img src="<?= $logoTutwuri ?>" class="logo">

</div>
<!-- ==========================
     CONTENT KARTU
=========================== -->

<div class="content">

    <!-- FOTO -->
    <div class="left">

        <img src="<?= $foto ?>" class="foto">

        <br>

        <img src="<?= $qr ?>" class="qr">

        <div class="scan">
            SCAN UNTUK ABSENSI
        </div>

    </div>

    <!-- IDENTITAS SISWA -->
    <div class="right">

        <div class="nama">
            <?= strtoupper($data['nama']) ?>
        </div>

        <table style="width:100%;font-size:11px;border-collapse:collapse;">

            <tr>
                <td width="38%">
                    <span class="label">NIS</span>
                </td>

                <td width="3%">:</td>

                <td>
                    <span class="value"><?= $data['nis'] ?></span>
                </td>
            </tr>

            <tr>

                <td>
                    <span class="label">NISN</span>
                </td>

                <td>:</td>

                <td>
                    <span class="value"><?= $data['nisn'] ?></span>
                </td>

            </tr>

            <tr>

                <td>
                    <span class="label">Kelas</span>
                </td>

                <td>:</td>

                <td>

                    <span class="badge">

                        <?= strtoupper($data['kelas']) ?>

                    </span>

                </td>

            </tr>

            <tr>

                <td>
                    <span class="label">JK</span>
                </td>

                <td>:</td>

                <td>

                    <span class="value">

                        <?= ($data['jk']=="L") ? "Laki-laki" : "Perempuan"; ?>

                    </span>

                </td>

            </tr>

            <tr>

                <td>
                    <span class="label">Status</span>
                </td>

                <td>:</td>

                <td>

                    <span style="
                        color:#2E7D32;
                        font-weight:bold;
                    ">

                        AKTIF

                    </span>

                </td>

            </tr>

        </table>

        <div style="margin-top:8px;">

            <div style="
                background:#E3F2FD;
                border-left:4px solid #1565C0;
                padding:6px;
                border-radius:6px;
                font-size:10px;
                color:#444;
            ">

                <b>Tahun Pelajaran</b><br>

                2026 / 2027

            </div>

        </div>

    </div>

</div>
<?php

/* ===========================================
   NOMOR KARTU
=========================================== */

$nomorKartu = "SMP2TK-".str_pad($data['id'], 5, "0", STR_PAD_LEFT);

/* ===========================================
   MASA BERLAKU
=========================================== */

$masaBerlaku = "2026 - 2029";

?>

<!-- ==========================
     FOOTER
=========================== -->

<div style="
position:absolute;
left:0;
right:0;
bottom:8mm;
padding:0 8px;
">

<table style="width:100%;font-size:9px;">

<tr>

<td width="55%">

<div style="
font-weight:bold;
color:#0D47A1;
">

ID Kartu

</div>

<div>

<?= $nomorKartu ?>

</div>

</td>

<td align="right">

<div style="
font-weight:bold;
color:#0D47A1;
">

Berlaku

</div>

<div>

<?= $masaBerlaku ?>

</div>

</td>

</tr>

</table>

</div>

<!-- ==========================
     FOOTER BAWAH
=========================== -->

<div class="footer">

<div style="
display:flex;
justify-content:space-between;
align-items:center;
padding:0 12px;
height:100%;
">

<div style="
font-weight:bold;
letter-spacing:1px;
">

SIMPAS

</div>

<div style="
font-size:9px;
">

Sistem Informasi Manajemen Presensi Siswa

</div>

<div style="
font-size:9px;
">

SMPN 2 TELUK KUANTAN

</div>

</div>

</div>

</div>
<!-- END WRAPPER -->

<script>

window.onload=function(){

window.print();

}

</script>