<?php
require_once "../../config/koneksi.php";
require_once "../../config/session.php";

/* ==========================================================
   VALIDASI ID SISWA
========================================================== */

if (!isset($_GET['id'])) {
    die("ID siswa tidak ditemukan.");
}

$id = (int) $_GET['id'];

/* ==========================================================
   AMBIL DATA SISWA
========================================================== */

$query = mysqli_query($conn, "
SELECT
    s.*,
    k.nama_kelas
FROM siswa s
LEFT JOIN kelas k
ON s.id_kelas = k.id_kelas
WHERE s.id_siswa='$id'
LIMIT 1
");

if (!$query) {
    die("Query gagal : " . mysqli_error($conn));
}

if (mysqli_num_rows($query) == 0) {
    die("Data siswa tidak ditemukan.");
}

$data = mysqli_fetch_assoc($query);

/* ==========================================================
   FOTO SISWA
========================================================== */

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

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

/* ==========================================================
   QR CODE
========================================================== */

$qr = "";

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

/* ==========================================================
   IDENTITAS SEKOLAH
========================================================== */

$namaSekolah = "SMP NEGERI 2 TELUK KUANTAN";
$alamat = "Kabupaten Kuantan Singingi - Riau";

?>

<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1">

<title>Kartu Identitas Siswa</title>

<link
rel="stylesheet"
href="../../assets/plugins/bootstrap/css/bootstrap.min.css">

<link
rel="stylesheet"
href="../../assets/plugins/fontawesome-free/css/all.min.css">

<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap"
rel="stylesheet">

<style>

/* ==========================================================
RESET
========================================================== */

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

body{

background:#edf2f7;

font-family:'Poppins',sans-serif;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

min-height:100vh;

padding:20px;

}

/* ==========================================================
KARTU PVC
========================================================== */

.kartu{

width:85.6mm;

height:54mm;

background:#ffffff;

border-radius:4mm;

overflow:hidden;

position:relative;

border:1.5px solid #0D47A1;

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

}
/* ==========================================================
BORDER DALAM
========================================================== */

.kartu::after{

    content:"";

    position:absolute;

    left:2mm;
    top:2mm;
    right:2mm;
    bottom:2mm;

    border:1px dashed #b8d4ff;

    border-radius:3mm;

}

/* ==========================================================
WATERMARK
========================================================== */

.kartu::before{

    content:"";

    position:absolute;

    width:35mm;
    height:35mm;

    background:url("../../assets/logo/logo.png")
    center center no-repeat;

    background-size:contain;

    left:50%;
    top:50%;

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

    opacity:.05;

}

/* ==========================================================
HEADER
========================================================== */

.header{

    height:15mm;

    background:linear-gradient(
        135deg,
        #0D47A1,
        #1976D2
    );

    position:relative;

}

.header::after{

    content:"";

    position:absolute;

    bottom:-10mm;

    left:-5%;

    width:110%;

    height:18mm;

    background:#ffffff;

    border-radius:50%;

}

.header-content{

    position:relative;

    z-index:10;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:2mm;

}

.logo{

    width:8mm;

    height:8mm;

    background:#ffffff;

    border-radius:50%;

    padding:.4mm;

}

.logo img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.judul{

    flex:1;

    text-align:center;

    color:#ffffff;

    margin:0 2mm;

}

.judul h2{

    font-size:3mm;

    font-weight:700;

    margin:0;

    text-transform:uppercase;

}

.judul p{

    font-size:2mm;

    margin-top:.3mm;

    letter-spacing:.3px;

}/* ==========================================================
KONTEN
========================================================== */

.konten{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:3mm;

}

/* ==========================================================
FOTO
========================================================== */

.foto-panel{

    width:24mm;

    display:flex;

    justify-content:center;

    align-items:center;

}

.foto{

    width:22mm;

    height:28mm;

    object-fit:cover;

    border-radius:2mm;

    border:2px solid #ffffff;

    box-shadow:0 3px 8px rgba(0,0,0,.20);

}

/* ==========================================================
IDENTITAS
========================================================== */

.info-panel{

    flex:1;

    margin-left:3mm;

}

.nama{

    font-size:9pt;

    font-weight:700;

    color:#0D47A1;

    margin-bottom:1mm;

    text-transform:uppercase;

    line-height:1.2;

}

.badge-kelas{

    display:inline-block;

    background:#1FA64A;

    color:#fff;

    padding:1mm 3mm;

    border-radius:20px;

    font-size:6pt;

    font-weight:600;

    margin-bottom:2mm;

}

.identitas{

    width:100%;

    border-collapse:collapse;

    margin-top:2mm;

}

.identitas td{

    padding:.6mm;

    font-size:6pt;

}

.label{

    width:18mm;

    color:#0D47A1;

    font-weight:600;

}

.label i{

    width:8px;

}

.titik{

    width:2mm;

    text-align:center;

}

/* ==========================================================
QR CODE
========================================================== */

.qr-panel{

    width:25mm;

    text-align:center;

}

.qr-box{

    width:22mm;

    height:22mm;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #1976D2;

    border-radius:2mm;

    background:#fff;

}

.qr{

    width:18mm;

    height:18mm;

}

.scan{

    margin-top:1mm;

    background:#0D47A1;

    color:#fff;

    border-radius:20px;

    padding:.5mm 2mm;

    font-size:5pt;

    font-weight:600;

}

/* ==========================================================
FOOTER
========================================================== */

.footer{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    background:#f5f8ff;

    border-top:1px solid #dce9ff;

    text-align:center;

    padding:1mm;

}

.footer h4{

    margin:0;

    color:#0D47A1;

    font-size:6.5pt;

}

.footer p{

    margin:0;

    font-size:4.5pt;

    color:#555;

}

/* ==========================================================
PRINT
========================================================== */

@page{

    size:85.6mm 54mm;

    margin:0;

}

@media print{

    body{

        background:#fff;

        padding:0;

    }

    .btn-area{

        display:none;

    }

    .kartu{

        box-shadow:none;

        margin:0;

    }

}
</style>

</head>

<body>

<div class="kartu">

    <!-- ================= HEADER ================= -->

    <div class="header">

        <div class="header-content">

            <div class="logo">
                <img
                    src="../../assets/logo/logo.png"
                    alt="Logo Sekolah"
                    onerror="this.style.display='none';">
            </div>

            <div class="judul">

                <h2><?= htmlspecialchars($namaSekolah) ?></h2>

                <p>KARTU IDENTITAS SISWA</p>

            </div>

            <div class="logo">
                <img
                    src="../../assets/logo/tutwuri.png"
                    alt="Tut Wuri"
                    onerror="this.style.display='none';">
            </div>

        </div>

    </div>

    <!-- ================= KONTEN ================= -->

    <div class="konten">

        <!-- FOTO -->

        <div class="foto-panel">

            <img
                src="<?= $foto ?>"
                class="foto"
                alt="Foto"
                onerror="this.src='../../uploads/foto/default.png'">

        </div>

        <!-- IDENTITAS -->

        <div class="info-panel">

            <div class="nama">

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

            </div>

            <div class="badge-kelas">

                <?= htmlspecialchars($data['nama_kelas']) ?>

            </div>

            <table class="identitas">

                <tr>

                    <td class="label">

                        <i class="fas fa-id-card"></i>

                        NIS

                    </td>

                    <td class="titik">:</td>

                    <td><?= htmlspecialchars($data['nis']) ?></td>

                </tr>

                <tr>

                    <td class="label">

                        <i class="fas fa-user-graduate"></i>

                        NISN

                    </td>

                    <td class="titik">:</td>

                    <td><?= htmlspecialchars($data['nisn']) ?></td>

                </tr>

            </table>

        </div>

        <!-- QR CODE -->

        <div class="qr-panel">

            <?php if(!empty($qr)){ ?>

                <div class="qr-box">

                    <img
                        src="<?= $qr ?>"
                        class="qr"
                        alt="QR Code">

                </div>

            <?php } else { ?>

                <div class="qr-box">

                    <span style="font-size:6pt;color:red">

                        QR BELUM ADA

                    </span>

                </div>

            <?php } ?>

            <div class="scan">

                SCAN ABSENSI

            </div>

        </div>

    </div>

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

    <div class="footer">

        <h4>SIMPAS</h4>

        <p>Sistem Informasi Manajemen Presensi Siswa</p>

        <p><?= htmlspecialchars($alamat) ?></p>

    </div>

</div>
</style>

</head>

<body>

<div class="kartu">

    <!-- ================= HEADER ================= -->

    <div class="header">

        <div class="header-content">

            <div class="logo">
                <img
                    src="../../assets/logo/logo.png"
                    alt="Logo Sekolah"
                    onerror="this.style.display='none';">
            </div>

            <div class="judul">

                <h2><?= htmlspecialchars($namaSekolah) ?></h2>

                <p>KARTU IDENTITAS SISWA</p>

            </div>

            <div class="logo">
                <img
                    src="../../assets/logo/tutwuri.png"
                    alt="Tut Wuri"
                    onerror="this.style.display='none';">
            </div>

        </div>

    </div>

    <!-- ================= KONTEN ================= -->

    <div class="konten">

        <!-- FOTO -->

        <div class="foto-panel">

            <img
                src="<?= $foto ?>"
                class="foto"
                alt="Foto"
                onerror="this.src='../../uploads/foto/default.png'">

        </div>

        <!-- IDENTITAS -->

        <div class="info-panel">

            <div class="nama">

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

            </div>

            <div class="badge-kelas">

                <?= htmlspecialchars($data['nama_kelas']) ?>

            </div>

            <table class="identitas">

                <tr>

                    <td class="label">

                        <i class="fas fa-id-card"></i>

                        NIS

                    </td>

                    <td class="titik">:</td>

                    <td><?= htmlspecialchars($data['nis']) ?></td>

                </tr>

                <tr>

                    <td class="label">

                        <i class="fas fa-user-graduate"></i>

                        NISN

                    </td>

                    <td class="titik">:</td>

                    <td><?= htmlspecialchars($data['nisn']) ?></td>

                </tr>

            </table>

        </div>

        <!-- QR CODE -->

        <div class="qr-panel">

            <?php if(!empty($qr)){ ?>

                <div class="qr-box">

                    <img
                        src="<?= $qr ?>"
                        class="qr"
                        alt="QR Code">

                </div>

            <?php } else { ?>

                <div class="qr-box">

                    <span style="font-size:6pt;color:red">

                        QR BELUM ADA

                    </span>

                </div>

            <?php } ?>

            <div class="scan">

                SCAN ABSENSI

            </div>

        </div>

    </div>

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

    <div class="footer">

        <h4>SIMPAS</h4>

        <p>Sistem Informasi Manajemen Presensi Siswa</p>

        <p><?= htmlspecialchars($alamat) ?></p>

    </div>

</div>
<!-- ================= TOMBOL ================= -->

<div class="btn-area mt-3">

    <button
        type="button"
        class="btn btn-primary"
        onclick="cetakKartu();">

        <i class="fas fa-print"></i>

        Cetak Kartu

    </button>

    <a
        href="index.php"
        class="btn btn-secondary">

        <i class="fas fa-arrow-left"></i>

        Kembali

    </a>

</div>

<script>

function cetakKartu(){

    window.focus();

    window.print();

}

window.addEventListener("afterprint",function(){

    console.log("Selesai mencetak");

});

</script>

</body>
</html>