<style>
  .mini-card {
    width: 100%;
    min-height: 300px;
    border: 2px solid #0f172a;
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    background: white;
  }

  .mini-head {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
    margin-bottom: 10px;

  }

  .logo-kiri,
  .logo-kanan {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

  }

  .logo-kiri img,
  .logo-kanan img {

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

  }

  .kop-tengah {

    flex: 1;
    text-align: center;

  }

  .kop-tengah h2 {

    margin: 0;
    font-size: 18px;

    line-height: 1.1;
    color: #003399;

  }

  .kop-tengah h3 {

    margin: 2px 0;

    font-size: 13px;

    line-height: 1.1;
    color: #002878;

  }

  .kop-tengah small {

    font-size: 10px;

    display: block;

    margin-top: 2px;

  }

  .kop-tengah span {

    display: inline-block;

    margin-top: 4px;

    font-size: 10px;

    font-weight: bold;

    background: #ffd400;

    padding: 3px 10px;

    border-radius: 4px;

  }

  .mini-body {

    display: flex;

    gap: 10px;

  }

  .mini-photo {

    width: 80px;
    height: 100px;

    object-fit: cover;

    border: 1px solid #ccc;

    border-radius: 6px;

  }

  .mini-info {

    flex: 1;
    font-size: 13px;

  }

  .mini-info p {

    margin: 4px 0;

  }

  .mini-info b {

    display: inline-block;

    width: 75px;

  }

  .mini-footer {

    margin-top: 10px;

    border-top: 1px solid #ddd;

    padding-top: 8px;

    font-size: 11px;

  }

  .footer-flex {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 10px;

  }

  .ttd-box {

    flex: 1;

    text-align: center;

  }

  .ttd-box p {

    margin: 2px 0;

    font-weight: bold;

    color: #002878;

  }

  .ttd-box h4 {

    margin: 0;

    font-size: 12px;

    text-decoration: underline;

  }

  .ttd-box span {

    font-size: 10px;

  }

  .ttd-space {

    height: 28px;

  }

  .barcode-side {

    width: 105px;

    text-align: center;

  }

  .barcode-side small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

  }

  .mini-barcode {

    display: flex;

    justify-content: center;

    align-items: end;

    height: 32px;

    gap: 1px;

  }

  .mini-barcode span {

    display: inline-block;

    height: 28px;

    background: #000;

  }
</style>

<?php

if (!function_exists('e')) {
  function e($value)
  {
    return htmlspecialchars(
      (string)$value,
      ENT_QUOTES,
      'UTF-8'
    );
  }
}

$qProfil =
  mysqli_query(
    $conn,
    "SELECT * FROM profil_sekolah LIMIT 1"
  );

$p =
  mysqli_fetch_assoc(
    $qProfil
  );

$namaSekolah =
  !empty($p['nama_sekolah'])
  ?
  $p['nama_sekolah']
  :
  'SDN 3 MEKAR SARI';

$tahun =

  !empty($p['tahun_pelajaran'])

  ?

  $p['tahun_pelajaran']

  :

  '2025/2026';

$logo =

  !empty($p['logo'])

  ?

  $p['logo']

  :

  '';

$logoKabupaten =

  !empty($p['logo_kabupaten'])

  ?

  $p['logo_kabupaten']

  :

  '';

$namaKecamatan =

  $p['nama_kecamatan']
  ?? '';

$namaKabupaten =

  $p['nama_kabupaten']
  ?? '';

$foto =

  !empty($s['foto'])

  ?

  $s['foto']

  :

  'default.png';

$noPeserta =

  !empty($s['no_ujian'])

  ?

  $s['no_ujian']

  :

  '-';

$kepsek =

  $p['kepala_sekolah']
  ?? 'Kepala Sekolah';

$nipKepsek =

  $p['nip_kepsek']
  ?? '-';

$barcodeSeed =
  preg_replace(
    '/[^0-9]/',
    '',
    $noPeserta
  );

if ($barcodeSeed == '') {

  $barcodeSeed = '25030001';
}

$bars =
  str_split(

    str_pad(

      substr(
        $barcodeSeed,
        0,
        12
      ),

      12,

      '1234567890'

    )

  );

?>

<div class="mini-card">

  <div class="mini-head">

    <div class="logo-kiri">

      <?php
      if (
        $logoKabupaten != ''
      ):
      ?>

        <img
          src="../assets/uploads/<?= e($logoKabupaten) ?>"
          alt="Logo Kabupaten">

      <?php endif; ?>

    </div>

    <div class="kop-tengah">

      <h2>
        KARTU UJIAN
      </h2>

      <h3>

        <?= e($namaSekolah) ?>

      </h3>

      <?php
      if (
        $namaKecamatan
        ||
        $namaKabupaten
      ):
      ?>

        <small>

          <?= e(

            trim(

              ($namaKecamatan
                ?
                ' ' . $namaKecamatan
                :
                '')

                .

                ($namaKabupaten
                  ?
                  ' KABUPATEN' . $namaKabupaten
                  :
                  ''),
              ' -'

            )

          ) ?>

        </small>

      <?php endif; ?>

      <span>

        TAHUN PELAJARAN

        <?= e($tahun) ?>

      </span>

    </div>

    <div class="logo-kanan">

      <?php
      if (
        $logo != ''
      ):
      ?>

        <img
          src="../assets/uploads/<?= e($logo) ?>"
          alt="Logo Sekolah">

      <?php endif; ?>

    </div>

  </div>

  <div class="mini-body">

    <img
      class="mini-photo"
      src="../assets/uploads/<?= e($foto) ?>"
      alt="Foto">

    <div class="mini-info">

      <p>

        <b>Nama</b>

        :

        <strong>

          <?= e($s['nama'] ?? '-') ?>

        </strong>

      </p>

      <p>

        <b>NISN</b>

        :

        <strong>

          <?= e($s['nisn'] ?? '-') ?>

        </strong>

      </p>

      <p>

        <b>Kelas</b>

        :

        <strong>

          <?= e($s['kelas'] ?? '-') ?>

        </strong>

      </p>

      <p>

        <b>No. Peserta</b>

        :

        <strong>

          <?= e($noPeserta) ?>

        </strong>

      </p>

    </div>

  </div>

  <div class="mini-footer">

    <div class="footer-flex">

      <div class="ttd-box">

        <small>
          Mengetahui,
        </small>

        <p>
          Kepala Sekolah
        </p>

        <div class="ttd-space"></div>

        <h4>

          <?= e($kepsek) ?>

        </h4>

        <span>

          NIP.
          <?= e($nipKepsek) ?>

        </span>

      </div>

      <div class="barcode-side">

        <div class="mini-barcode">

          <?php
          foreach (
            $bars
            as $b
          ):
          ?>

            <span
              style="
width:
<?= 1 + ((int)$b % 3) ?>
px
">
            </span>

          <?php endforeach; ?>

          <?php
          foreach (
            array_reverse(
              $bars
            )
            as $b
          ):
          ?>

            <span
              style="
width:
<?= 1 + ((int)$b % 4) ?>
px
">
            </span>

          <?php endforeach; ?>

        </div>

        <small>

          <?= e($noPeserta) ?>

        </small>

      </div>

    </div>

  </div>

</div>