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

/* ==========================================================
   VALIDASI
========================================================== */

if (
    !isset($_POST['id_siswa']) ||
    !is_array($_POST['id_siswa']) ||
    count($_POST['id_siswa']) == 0
) {
    die("
    <script>
        alert('Silakan pilih minimal satu siswa.');
        history.back();
    </script>
    ");
}

/* ==========================================================
   AMBIL ID SISWA
========================================================== */

$id = array_map('intval', $_POST['id_siswa']);

$listID = implode(",", $id);

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

if(!$query){
    die(mysqli_error($conn));
}
?>
<!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;500;600;700&display=swap"
rel="stylesheet">

<style>

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

body{

    background:#ECEFF4;

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

    padding:8mm;

}

.toolbar{

    text-align:center;

    margin-bottom:10px;

}

.toolbar .btn{

    margin:3px;

}

.halaman{

    width:210mm;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:4mm;

    justify-items:center;

    align-items:start;

}

</style>

</head>

<body>

<div class="toolbar">

<button

class="btn btn-success"

onclick="window.print()">

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

Cetak

</button>

<a

href="cetak.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-wrapper">

<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>SMP NEGERI 2 TELUK KUANTAN</h2>

                <p>KARTU IDENTITAS SISWA</p>

            </div>

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

        </div>

    </div>

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

    <div class="konten">

        <!-- FOTO -->

        <div class="foto-panel">

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

        </div>

        <!-- DATA SISWA -->

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

    </div>

</div>

</div>

<?php

$jumlah++;

if($jumlah % 8 == 0){

    echo "</div>";

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

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

}

}

?>
/* ==========================================================
   RESET
========================================================== */

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

body{
    background:#ECEFF4;
    font-family:'Poppins',sans-serif;
    padding:8mm;
}

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

.toolbar{
    text-align:center;
    margin-bottom:10px;
}

.toolbar .btn{
    margin:3px;
}

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

.halaman{
    width:210mm;
    margin:auto;

    display:grid;

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

    grid-auto-rows:54mm;

    column-gap:8mm;

    row-gap:8mm;

    justify-content:center;
}

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

.kartu-wrapper{
    width:85.6mm;
    height:54mm;
    position:relative;
}

.kartu{
    width:85.6mm;
    height:54mm;

    background:#ffffff;

    border-radius:4mm;

    overflow:hidden;

    border:1px solid #0D47A1;

    position:relative;

    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* Watermark */

.kartu::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:30mm;
    height:30mm;

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

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

    background-size:contain;

    opacity:.05;

}

/* Border Dalam */

.kartu::after{

    content:"";

    position:absolute;

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

    border:1px dashed #C8D8FF;

    border-radius:3mm;

}

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

.header{

    height:14mm;

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

    position:relative;

}

.header::after{

    content:"";

    position:absolute;

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

    width:110%;
    height:16mm;

    background:#fff;

    border-radius:50%;

}

.header-content{

    position:relative;
    z-index:5;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:2mm;

}

.logo{

    width:8mm;
    height:8mm;

    background:#fff;

    border-radius:50%;

    padding:.4mm;

}

.judul{

    flex:1;

    text-align:center;

    color:#fff;

}

.judul h2{

    font-size:3mm;

    margin:0;

    font-weight:700;

}

.judul p{

    font-size:2mm;

    margin:0;

}

/* ==========================================================
   BODY
========================================================== */

.konten{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:3mm;

    position:relative;

    z-index:2;

}

.foto-panel{

    width:23mm;

    display:flex;

    justify-content:center;

}

.foto{

    width:21mm;

    height:27mm;

    object-fit:cover;

    border-radius:2mm;

    border:2px solid #fff;

    box-shadow:0 2px 5px rgba(0,0,0,.2);

}

.info-panel{

    flex:1;

    margin-left:2.5mm;

}

.nama{

    font-size:8pt;

    font-weight:700;

    color:#0D47A1;

    margin-bottom:1mm;

    text-transform:uppercase;

}

.badge-kelas{

    display:inline-block;

    background:#1FA64A;

    color:#fff;

    border-radius:20px;

    padding:1mm 3mm;

    font-size:5.5pt;

    margin-bottom:2mm;

}

.identitas{

    width:100%;

    border-collapse:collapse;

}

.identitas td{

    padding:.5mm;

    font-size:6pt;

}

.label{

    width:15mm;

    font-weight:600;

    color:#0D47A1;

}

.titik{

    width:2mm;

    text-align:center;

}

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

.qr-panel{

    width:23mm;

    text-align:center;

}

.qr-box{

    width:20mm;

    height:20mm;

    margin:auto;

    border:1px solid #1976D2;

    border-radius:2mm;

    display:flex;

    justify-content:center;

    align-items:center;

}

.qr{

    width:17mm;

    height:17mm;

}

.scan{

    margin-top:1mm;

    font-size:5pt;

    background:#0D47A1;

    color:#fff;

    border-radius:20px;

    padding:.5mm 2mm;

}

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

    font-size:6pt;

    color:#0D47A1;

}

.footer p{

    margin:0;

    font-size:4.5pt;

}

/* ==========================================================
   CETAK
========================================================== */

.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;

}

}
</div>

<script>

window.onload = function(){

    setTimeout(function(){

        window.print();

    },500);

}

</script>

</body>

</html>