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

<head>
  <meta charset="UTF-8">
  <title>Label Buku</title>

  <style>
    @page {
      margin: 10mm;
      size: A4;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 8pt;
    }

    .label {
      width: 70mm;
      height: 35mm;
      display: flex;
      flex-direction: row;
      gap: 1mm;
    }

    .box-barcode {
      width: 55mm;
      height: 35mm;
      border: 1px solid black;
      padding: 1.5mm;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      gap: 4mm;
    }

    .judul-vertikal {
      writing-mode: vertical-rl;
      transform: rotate(0deg);
      text-align: center;
      font-size: 7pt;
      height: 15mm;

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

      overflow: hidden;

      margin-bottom: 3mm;
    }

    .barcode-wrapper {
      height: 12mm;
      width: 30mm;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding-left: 12mm;

    }

    .barcode-wrapper img {
      width: 30mm;
      height: auto;
      transform: scaleY(6.5);
      transform-origin: top center;

    }

    .kode-eks {
      font-size: 7pt;
      font-weight: bold;

      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 21mm;


      margin-top: 1mm;
    }

    .box-info {
      width: 55mm;
      height: 35mm;
      border: 1px solid black;
      padding: 1.5mm;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      gap: 1mm;
    }

    .logo {
      width: 35px;
      height: 35px;
      object-fit: contain;
    }

    .instansi {
      font-size: 9pt;
      font-weight: bold;
    }

    .alamat {
      font-size: 7pt;
      text-decoration: underline;
    }

    .kode {
      font-size: 10pt;
      font-weight: bold;
      margin-top: 3mm;
    }
  </style>

</head>

<body>

  <div class="label">

    <div class="box-barcode">

      <div class="judul-vertikal">{{ $koleksi->title }}</div>

      <div class="barcode-wrapper">
        @php
          use Picqer\Barcode\BarcodeGeneratorPNG;
          $generator = new BarcodeGeneratorPNG();
          $barcodeImage = base64_encode(
            $generator->getBarcode($koleksi->kode_eksemplar, $generator::TYPE_CODE_128)
          );
        @endphp

        <img src="data:image/png;base64,{{ $barcodeImage }}" alt="Barcode">
      </div>

      <div class="kode-eks">{{ $koleksi->kode_eksemplar }}</div>

    </div>

    <div class="box-info">

      @if($setting && $setting->logo && file_exists(public_path('storage/' . $setting->logo)))
        <img src="{{ public_path('storage/' . $setting->logo) }}" class="logo" alt="Logo">
      @else
        <img src="{{ public_path('images/bakorwil.png') }}" class="logo" alt="Logo">
      @endif

      <div class="instansi">BAKORWIL III MALANG</div>
      <div class="alamat">Jl. Simpang Ijen 2 65119</div>
      <div class="kode">{{ $koleksi->classification }}</div>

    </div>

  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const original = document.querySelector(".label");
      const body = document.body;

      const sheet = document.createElement("div");
      sheet.style.display = "flex";
      sheet.style.flexWrap = "wrap";
      sheet.style.justifyContent = "center";
      sheet.style.alignItems = "flex-start";
      sheet.style.width = "210mm";
      sheet.style.height = "297mm";
      sheet.style.boxSizing = "border-box";
      sheet.style.padding = "10mm";

      for (let i = 0; i < 24; i++) {
        const clone = original.cloneNode(true);
        clone.style.margin = "1.5mm";
        sheet.appendChild(clone);
      }

      body.innerHTML = "";
      body.appendChild(sheet);
    });
  </script>

</body>

</html>

