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

/* ==========================================================
   FILTER KELAS
========================================================== */

$where = "";

if (isset($_GET['kelas']) && $_GET['kelas'] != "") {

    $id_kelas = (int)$_GET['kelas'];

    $where = " WHERE s.id_kelas='$id_kelas' ";
}

/* ==========================================================
   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
ORDER BY
k.nama_kelas,
s.nama_siswa ASC
");

if (!$query) {
    die(mysqli_error($conn));
}

$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>Cetak Semua Kartu</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>

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

body{

    background:#edf2f7;

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

    padding:8mm;

}

/* ==========================================================
   TOOLBAR
========================================================== */

.toolbar{

    text-align:center;

    margin-bottom:12px;

}

.toolbar .btn{

    margin:3px;

}

/* ==========================================================
   HALAMAN
========================================================== */

.halaman{

    width:210mm;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,85.6mm);

    grid-auto-rows:54mm;

    justify-content:center;

    gap:6mm;

}

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

.kartu{

    width:85.6mm;

    height:54mm;

    background:#fff;

    border-radius:4mm;

    overflow:hidden;

    position:relative;

    border:1.5px solid #0D47A1;

    box-shadow:0 4px 10px rgba(0,0,0,.18);

}

.kartu::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    width:34mm;
    height:34mm;

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

    background-size:contain;

    opacity:.05;

}

.kartu::after{

    content:"";

    position:absolute;

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

    border:1px dashed #b8d4ff;

    border-radius:3mm;

}

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

.header{

    height:15mm;

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

    position:relative;

}

.header::after{

    content:"";

    position:absolute;

    left:-5%;
    bottom:-10mm;

    width:110%;
    height:18mm;

    background:#fff;

    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;

    border-radius:50%;/* ==========================================================
   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;

}

.badge-kelas{

    display:inline-block;

    background:#1FA64A;

    color:#fff;

    padding:1mm 3mm;

    border-radius:20px;

    font-size:6pt;

    margin-bottom:2mm;

}

.identitas{

    width:100%;

    border-collapse:collapse;

}

.identitas td{

    padding:.6mm;

    font-size:6pt;

}

.label{

    width:18mm;

    color:#0D47A1;

    font-weight:600;

}

.titik{

    width:2mm;

    text-align:center;

}

/* QR */

.qr-panel{

    width:24mm;

    text-align:center;

}

.qr-box{

    width:22mm;

    height:22mm;

    margin:auto;

    border:1px solid #1976D2;

    border-radius:2mm;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

}

.qr{

    width:18mm;

    height:18mm;

}

.scan{

    margin-top:1mm;

    background:#0D47A1;

    color:#fff;

    border-radius:20px;

    padding:.5mm 2mm;

    font-size:5pt;

}

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

.footer{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    background:#f5f8ff;

    border-top:1px solid #dce9ff;

    text-align:center;

    padding:1mm;

}

.footer h4{

    color:#0D47A1;

    font-size:6.5pt;

    margin:0;

}

.footer p{

    margin:0;

    font-size:4.5pt;

}

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

.page-break{

    page-break-after:always;

}

@page{

    size:A4 portrait;

    margin:8mm;

}

@media print{

    body{

        background:#fff;

        padding:0;

    }

    .toolbar{

        display:none;

    }

    .kartu{

        box-shadow:none;

    }

}
</style>

</head>

<body>

<div class="toolbar">

<button
class="btn btn-primary"
onclick="window.print()">

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

Cetak Semua

</button>

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

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

Kembali

</a>

</div>

<div class="halaman">
    <?php

$jumlah = 0;

while($data = mysqli_fetch_assoc($query)){

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

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

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

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

    $qr = "../../uploads/qrcode/".$data['nis'].".png";

?>

<div class="kartu">

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

    <div class="header">

        <div class="header-content">

            <img
                src="../../assets/logo/logo.png"
                class="logo"
                alt="Logo">

            <div class="judul">

                <h2><?= $namaSekolah ?></h2>

                <p>KARTU IDENTITAS SISWA</p>

            </div>

            <img
                src="../../assets/logo/tutwuri.png"
                class="logo"
                alt="Tut Wuri">

        </div>

    </div>

    <!-- ================= BODY ================= -->

    <div class="konten">

        <!-- FOTO -->

        <div class="foto-panel">

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

        </div>

        <!-- DATA -->

        <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">

                        NIS

                    </td>

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

                    <td>

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

                    </td>

                </tr>

                <?php if(!empty($data['nisn'])){ ?>

                <tr>

                    <td class="label">

                        NISN

                    </td>

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

                    <td>

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

                    </td>

                </tr>

                <?php } ?>

            </table>

        </div>

        <!-- QR -->

        <div class="qr-panel">

            <?php if(file_exists($qr)){ ?>

                <div class="qr-box">

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

                </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>

            <?= $alamat ?>

        </p>

    </div>

</div>

<?php

$jumlah++;

if($jumlah % 8 == 0){

    echo "</div>";

    echo '<div class="page-break"></div>';

    echo '<div class="halaman">';

}

}

?>
</div>

<script>

window.onload = function(){

    setTimeout(function(){

        window.print();

    },500);

}

</script>

</body>

</html>

    background:#fff;

    padding:.4mm;

}

.judul{

    flex:1;

    text-align:center;

    color:#fff;

}

.judul h2{

    font-size:3mm;

    margin:0;

    font-weight:700;

}

.judul p{

    margin:0;

    font-size:2mm;

}
/* ==========================================================
   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;

}

.badge-kelas{

    display:inline-block;

    background:#1FA64A;

    color:#fff;

    padding:1mm 3mm;

    border-radius:20px;

    font-size:6pt;

    margin-bottom:2mm;

}

.identitas{

    width:100%;

    border-collapse:collapse;

}

.identitas td{

    padding:.6mm;

    font-size:6pt;

}

.label{

    width:18mm;

    color:#0D47A1;

    font-weight:600;

}

.titik{

    width:2mm;

    text-align:center;

}

/* QR */

.qr-panel{

    width:24mm;

    text-align:center;

}

.qr-box{

    width:22mm;

    height:22mm;

    margin:auto;

    border:1px solid #1976D2;

    border-radius:2mm;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

}

.qr{

    width:18mm;

    height:18mm;

}

.scan{

    margin-top:1mm;

    background:#0D47A1;

    color:#fff;

    border-radius:20px;

    padding:.5mm 2mm;

    font-size:5pt;

}

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

.footer{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    background:#f5f8ff;

    border-top:1px solid #dce9ff;

    text-align:center;

    padding:1mm;

}

.footer h4{

    color:#0D47A1;

    font-size:6.5pt;

    margin:0;

}

.footer p{

    margin:0;

    font-size:4.5pt;

}

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

.page-break{

    page-break-after:always;

}

@page{

    size:A4 portrait;

    margin:8mm;

}

@media print{

    body{

        background:#fff;

        padding:0;

    }

    .toolbar{

        display:none;

    }

    .kartu{

        box-shadow:none;

    }

}
</style>

</head>

<body>

<div class="toolbar">

<button
class="btn btn-primary"
onclick="window.print()">

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

Cetak Semua

</button>

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

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

Kembali

</a>

</div>

<div class="halaman">
    <?php

$jumlah = 0;

while($data = mysqli_fetch_assoc($query)){

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

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

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

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

    $qr = "../../uploads/qrcode/".$data['nis'].".png";

?>

<div class="kartu">

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

    <div class="header">

        <div class="header-content">

            <img
                src="../../assets/logo/logo.png"
                class="logo"
                alt="Logo">

            <div class="judul">

                <h2><?= $namaSekolah ?></h2>

                <p>KARTU IDENTITAS SISWA</p>

            </div>

            <img
                src="../../assets/logo/tutwuri.png"
                class="logo"
                alt="Tut Wuri">

        </div>

    </div>

    <!-- ================= BODY ================= -->

    <div class="konten">

        <!-- FOTO -->

        <div class="foto-panel">

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

        </div>

        <!-- DATA -->

        <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">

                        NIS

                    </td>

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

                    <td>

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

                    </td>

                </tr>

                <?php if(!empty($data['nisn'])){ ?>

                <tr>

                    <td class="label">

                        NISN

                    </td>

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

                    <td>

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

                    </td>

                </tr>

                <?php } ?>

            </table>

        </div>

        <!-- QR -->

        <div class="qr-panel">

            <?php if(file_exists($qr)){ ?>

                <div class="qr-box">

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

                </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>

            <?= $alamat ?>

        </p>

    </div>

</div>

<?php

$jumlah++;

if($jumlah % 8 == 0){

    echo "</div>";

    echo '<div class="page-break"></div>';

    echo '<div class="halaman">';

}

}

?>
</div>

<script>

window.onload = function(){

    setTimeout(function(){

        window.print();

    },500);

}

</script>

</body>

</html>